生词列表

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -1,13 +1,15 @@
 <template>
   <ModuleBase :type="data.type">
     <template #content>
-      <label>标题：</label>
-      <RichText
-        v-model="data.title_con"
-        :inline="true"
-        :placeholder="'输入标题'"
-        toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
-      />
+      <div style="text-align: left">
+        <label>标题：</label>
+        <RichText
+          v-model="data.title_con"
+          :inline="true"
+          :placeholder="'输入标题'"
+          toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+        />
+      </div>
       <el-table :data="data.option" border style="width: 100%">
         <el-table-column fixed prop="number" label="序号" width="70">
           <template slot-scope="scope">
@@ -62,6 +64,17 @@
             />
           </template>
         </el-table-column>
+        <el-table-column prop="file_list" label="图片" width="200">
+          <template slot-scope="scope">
+            <UploadPicture
+              :file-id="scope.row.file_list[0]"
+              :item-index="scope.$index"
+              :show-upload="!scope.row.file_list[0]"
+              @upload="uploadPic"
+              @deleteFile="deletePic"
+            />
+          </template>
+        </el-table-column>
         <el-table-column prop="definition_list" label="释义" width="200">
           <template slot-scope="scope">
             <RichText
@@ -91,6 +104,16 @@
             />
           </template>
         </el-table-column>
+        <el-table-column prop="header_con" label="页眉" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.header_con"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="label" label="标签" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.label"></el-input>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="150">
           <template slot-scope="scope">
             <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
@@ -128,6 +151,7 @@
 import ModuleMixin from '../../common/ModuleMixin';
 import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
 import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
+import UploadPicture from './components/UploadPicture.vue';
 
 import { getNewWordData, getOption } from '@/views/book/courseware/data/newWord';
 import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
@@ -139,6 +163,7 @@ export default {
     SelectUpload,
     SoundRecord,
     UploadAudio,
+    UploadPicture,
   },
   mixins: [ModuleMixin],
   data() {
@@ -224,6 +249,12 @@ export default {
     deleteFiles(file_id, index) {
       this.data.option[index].mp3_list = '';
     },
+    uploadPic(file_id, index) {
+      this.data.option[index].file_list[0] = file_id;
+    },
+    deletePic(file_id, index) {
+      this.data.option[index].file_list[0] = '';
+    },
     // 自动生成音频
     handleMatic(index) {
       GetStaticResources('tool-TextToVoiceFile', {

src/views/book/courseware/create/components/question/new_word/components/UploadPicture.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="upload-wrapper">
+    <el-upload
+      v-if="showUpload"
+      ref="upload"
+      :limit="1"
+      action="no"
+      accept=".jpg,.png"
+      :show-file-list="false"
+      :before-upload="beforeUpload"
+      :http-request="upload"
+    >
+      <div class="upload-audio">
+        <SvgIcon icon-class="upload" />
+        <span class="upload-text">上传图片</span>
+        <span v-show="progress > 0">{{ progress }}%</span>
+      </div>
+    </el-upload>
+    <div v-show="file_url.length > 0" class="file-wrapper">
+      <div class="file-name">{{ file_name }}</div>
+      <SvgIcon icon-class="delete" class-name="delete pointer" @click="deleteFile" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { fileUpload, GetFileStoreInfo } from '@/api/app';
+
+export default {
+  name: 'UploadAudio',
+  props: {
+    fileId: {
+      type: String,
+      default: '',
+    },
+    showUpload: {
+      type: Boolean,
+      default: true,
+    },
+    itemIndex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      progress: 0,
+      file_id: '',
+      file_url: '',
+      file_name: '',
+    };
+  },
+  watch: {
+    fileId: {
+      handler(val) {
+        if (!val) return;
+        GetFileStoreInfo({ file_id: val }).then(({ file_id, file_url, file_name }) => {
+          this.file_id = file_id;
+          this.file_url = file_url;
+          this.file_name = file_name;
+        });
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    beforeUpload(file) {
+      if (this.file_id.length > 0) {
+        this.$message.warning('只能上传一个图片文件');
+        return false;
+      }
+      const fileName = file.name;
+      const suffix = fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+      if (!['png', 'jpg', 'jpeg'].includes(suffix)) {
+        this.$message.warning('图片格式不正确');
+        return false;
+      }
+    },
+    upload(file) {
+      fileUpload('Mid', file, { handleUploadProgress: this.handleUploadProgress }).then(({ file_info_list }) => {
+        if (file_info_list.length > 0) {
+          const { file_id, file_name, file_url } = file_info_list[0];
+          this.file_id = file_id;
+          this.file_url = file_url;
+          this.file_name = file_name;
+          this.$emit('upload', file_id, this.itemIndex);
+        }
+      });
+    },
+    handleUploadProgress(progressEvent) {
+      this.progress = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2) || 0;
+    },
+    deleteFile() {
+      this.$confirm('是否删除当前文件？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$emit('deleteFile', this.file_id, this.itemIndex);
+          this.file_id = '';
+          this.file_url = '';
+          this.file_name = '';
+          this.progress = 0;
+          this.$refs.upload.clearFiles();
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.upload-wrapper {
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+  margin-top: 8px;
+
+  .upload-audio {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+    width: 233px;
+    padding: 4px 12px;
+    background-color: $fill-color;
+
+    .upload-text {
+      flex: 1;
+      text-align: left;
+    }
+  }
+
+  .file-wrapper {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+
+    .file-name {
+      padding: 4px 12px;
+      background-color: $fill-color;
+    }
+  }
+}
+</style>

src/views/book/courseware/data/bookType.js

@@ -203,14 +203,14 @@ export const bookTypeOption = [
     value: 'question',
     label: '题型组件',
     children: [
-      {
-        value: 'article',
-        label: '文章组件',
-        icon: '',
-        component: Article,
-        set: ArticleSetting,
-        preview: ArticlePreview,
-      },
+      // {
+      //   value: 'article',
+      //   label: '文章组件',
+      //   icon: '',
+      //   component: Article,
+      //   set: ArticleSetting,
+      //   preview: ArticlePreview,
+      // },
       {
         value: 'select',
         label: '选择组件',

src/views/book/courseware/data/newWord.js

@@ -53,6 +53,9 @@ export function getOption() {
     mp3_list: '',
     collocation: '', // 搭配
     liju_list: '', // 例句
+    file_list: [''], // 图片
+    header_con: '',//页眉
+    label:'',// 标签
   };
 }
 export function getNewWordProperty() {

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -398,7 +398,7 @@ export default {
   @include preview-base;
 
   .NPC-zhedie {
-    width: 780px;
+    // width: 780px;
     margin-bottom: 24px;
 
     .aduioLine-box {

src/views/book/courseware/preview/components/new_word/components/Strockplayredline.vue

@@ -126,8 +126,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 11px;
-  height: 11px;
+  width: 14px;
+  height: 14px;
   color: #e81b1b;
   cursor: pointer;
 }

src/views/book/courseware/preview/components/new_word/components/WordPhraseDetail.vue

@@ -878,6 +878,7 @@ export default {
         font-size: 16px;
         line-height: 19px;
         color: #000;
+        text-align: left;
       }
     }