基础组件图片文件介绍

src/api/app.js

@@ -72,7 +72,7 @@ export async function fileUpload(
     formData = file;
   } else {
     formData = new FormData();
-    formData.append(file.name, file.raw, file.name);
+    formData.append(file.filename, file.file, file.file.name);
   }
 
   let onUploadProgress = handleUploadProgress || null;

src/views/book/courseware/create/components/base/audio/AudioSetting.vue

@@ -3,7 +3,7 @@
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
       <el-form-item label="序号" class="serial-number">
         <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property.serial_number)" />
+        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
       </el-form-item>
       <el-form-item>
         <el-radio
@@ -93,7 +93,12 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { snGenerationMethodList, audioViewMethodList, switchSerialNumber } from '@/views/book/courseware/data/common';
+import {
+  snGenerationMethodList,
+  audioViewMethodList,
+  switchSerialNumber,
+  checkString,
+} from '@/views/book/courseware/data/common';
 
 export default {
   name: 'AudioSetting',
@@ -101,11 +106,13 @@ export default {
   data() {
     return {
       switchSerialNumber,
+      checkString,
       snGenerationMethodList,
       audioViewMethodList,
       labelPosition: 'left',
       property: {
         serial_number: 1, // 序号
+        sn_type: 'number',
         sn_position: 'top-start', // 序号位置：top-start top top-end 等
         sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate 重新计算follow 跟随
         view_method: audioViewMethodList[0].value, // 查看方式：independent 独立 list 列表icon 图标
@@ -113,9 +120,10 @@ export default {
     };
   },
   watch: {
-    setting: {
+    property: {
       handler(val) {
         if (this.isSet) {
+          val.sn_type = checkString(val.serial_number);
           this.$emit('updateSetting', val);
         }
       },

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -34,17 +34,17 @@
           </span>
         </div>
         <SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
-        <SvgIcon v-show="moduleData.type == 'picture'" icon-class="mark" size="12" @click="viewDialog" />
+        <SvgIcon v-show="moduleData.type == 'picture'" icon-class="mark" size="12" @click="viewDialog(file)" />
       </li>
     </ul>
 
-    <FillDescribe :visible.sync="visible" @fillDescribeToFile="fillDescribeToFile" />
+    <FillDescribe :file-data="curFile" :visible.sync="visible" @fillDescribeToFile="fillDescribeToFile" />
   </div>
 </template>
 
 <script>
 import ModuleMixin from '../../common/ModuleMixin';
-import { fileUpload, GetFileStoreInfo } from '@/api/app';
+import { fileUpload } from '@/api/app';
 import { conversionSize } from '@/utils/common';
 import FillDescribe from '../../common/FillDescribe';
 
@@ -82,13 +82,10 @@ export default {
   },
   data() {
     return {
+      curFile: null,
       conversionSize,
       file_info_list: [],
       visible: false,
-      form: {
-        title: '',
-        describe: '',
-      },
     };
   },
   computed: {},
@@ -100,6 +97,8 @@ export default {
 
       fileList.forEach((file) => {
         if (!file.progress || file.progress <= 0) file.progress = 0;
+        if (!file.title) file.title = '';
+        if (!file.describe) file.describe = '';
       });
       this.file_info_list = fileList;
     },
@@ -121,7 +120,7 @@ export default {
     // 文件校验
     afterSelectFile(file) {
       const fileName = file.name;
-      let singleSizeTip = '文件[' + fileName + ']大小超过 ' + conversionSize(this.moduleData.single_size) + ',被移除！';
+      let singleSizeTip = `文件[${fileName}]大小超过 ${conversionSize(this.moduleData.single_size)},被移除！`;
 
       if (file.size > this.moduleData.single_size * 1024 * 1024) {
         this.$message.error(singleSizeTip);
@@ -142,7 +141,7 @@ export default {
       }
       const isNeedType = fileType.includes(suffix);
       if (!isNeedType) {
-        typeTip += ',[' + fileName + ']被移除！';
+        typeTip += `,[${fileName}]被移除！`;
         this.$message.error(typeTip);
         this.$refs.upload.handleRemove(file);
         return false;
@@ -154,38 +153,46 @@ export default {
       const files = this.$refs.upload.uploadFiles || [];
       const totalSize = files.reduce((sum, cur) => sum + Number(cur.size || 0), 0);
       if (totalSize > this.moduleData.total_size * 1024 * 1024) {
-        this.$message.error('文件总大小不能超过' + conversionSize(this.moduleData.total_size));
+        this.$message.error(`文件总大小不能超过${conversionSize(this.moduleData.total_size)}`);
         return false;
       }
-      var that = this;
       files.forEach((file) => {
-        fileUpload('Mid', file, {
-          handleUploadProgress: function (progressEvent) {
-            var en = that.file_info_list.find((p) => p.uid == file.uid);
-            var per = Number((progressEvent.progress * 100).toFixed(2) || 0);
+        let formData = new FormData();
+        formData.append('file', file.raw);
+        fileUpload('Mid', formData, {
+          handleUploadProgress: (progressEvent) => {
+            let en = this.file_info_list.find((p) => p.uid === file.uid);
+            let per = Number((progressEvent.progress * 100).toFixed(2) || 0);
             if (en) {
               // var _i = that.file_info_list.findIndex((p) => p.uid == file.uid);
               en.progress = per;
               // that.$set(that.file_info_list, _i, en);
-              that.$forceUpdate();
+              this.$forceUpdate();
             }
           },
         }).then(({ file_info_list }) => {
           if (file_info_list.length > 0) {
-            // console.log(file_info_list);
-            this.file_info_list = file_info_list;
+            console.log(file_info_list);
+            // this.file_info_list = file_info_list;
           }
         });
       });
     },
 
     // 显示弹窗
-    viewDialog() {
+    viewDialog(file) {
       this.visible = true;
+      this.curFile = file;
+      console.info(file);
     },
 
-    //给文件加介绍
-    fillDescribeToFile() {},
+    // 给文件加介绍
+    fillDescribeToFile(file) {
+      let en = this.file_info_list.find((p) => p.uid === file.uid);
+      if (en) {
+        Object.assign(en, file);
+      }
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/common/FillDescribe.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog title="" :visible="visible" width="260px" top="38vh" :show-close="false" @close="dialogClose">
-    <el-input v-model="form.title" autocomplete="off" placeholder="标题"></el-input>
-    <el-input type="textarea" v-model="form.describe" placeholder="介绍"></el-input>
+  <el-dialog :visible="visible" width="260px" top="38vh" :show-close="false" @close="dialogClose">
+    <el-input v-model="form.title" autocomplete="off" placeholder="标题" />
+    <el-input v-model="form.describe" type="textarea" placeholder="介绍" />
     <template slot="footer">
       <el-button size="medium" @click="dialogClose">取消</el-button>
       <el-button type="primary" size="medium" @click="confirm">确定</el-button>
@@ -17,22 +17,36 @@ export default {
       type: Boolean,
       required: true,
     },
+    fileData: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       form: {
+        uid: '',
         title: '',
         describe: '',
       },
     };
   },
+  watch: {
+    fileData: {
+      handler(val) {
+        Object.assign(this.form, val);
+      },
+      deep: true,
+    },
+  },
   methods: {
     dialogClose() {
+      Object.assign(this.form, this.fileData);
       this.$emit('update:visible', false);
     },
     confirm() {
       this.$emit('update:visible', false);
-      // this.$emit('fillDescribeToFile');
+      this.$emit('fillDescribeToFile', this.form);
     },
   },
 };

src/views/book/courseware/create/components/common/SettingMixin.js

@@ -1,9 +1,10 @@
-import { snGenerationMethodList } from '../../../data/common';
+import { snGenerationMethodList, computedQuestionNumber } from '../../../data/common';
 
 const mixin = {
   data() {
     return {
       snGenerationMethodList,
+      computedQuestionNumber,
     };
   },
   methods: {

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

@@ -9,7 +9,7 @@ export function getAudioData() {
     total_size: 1024, // 单位MB
     property: {
       serial_number: 1, // 序号
-      sn_type: 'letter', //序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
+      sn_type: 'number', // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
       sn_position: 'top-start', // 序号位置：top-start top top-end，left-start left left-end等
       sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
       view_method: audioViewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标

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

@@ -19,10 +19,10 @@ export const audioViewMethodList = [
 
 // 序号类型
 export const serialNumberTypeList = [
-  { value: 'letter', label: '字母' },
   { value: 'number', label: '数字' },
-  { value: 'capital', label: '大写字母' },
   { value: 'bracket_number', label: '括号数字' },
+  { value: 'letter', label: '字母' },
+  { value: 'capital', label: '大写字母' },
 ];
 
 /**
@@ -31,31 +31,55 @@ export const serialNumberTypeList = [
  */
 export function checkString(str) {
   const number = /\d/.test(str); // 判断是否包含数字
-  const letter = /[a-zA-Z]/.test(str); // 判断是否包含字母
+  const letter = /[a-z]/.test(str); // 判断是否包含字母
   const capital = /[A-Z]/.test(str); // 判断是否包含大写字母
   const bracket_number = /\(\d+\)/.test(str); // 判断是否包含括号数字，例如 (123)
-  return { number, letter, capital, bracket_number };
-}
-
-/**
- * 改变选项类型
- * @param {string} serial_number 序号
- */
-export function switchSerialNumber(serial_number) {
-  let sn_type = checkString(serial_number);
-  let index = serialNumberTypeList.findIndex(({ value }) => value === sn_type);
-  sn_type = serialNumberTypeList[index + 1]?.value || serialNumberTypeList[0].value;
+  const obj = { number, letter, capital, bracket_number };
+  let strType = '';
+  Object.keys(obj).forEach((key) => {
+    if (obj[key]) {
+      strType = key;
+      return true;
+    }
+  });
+  return strType;
 }
 
 // 计算选项方法
 export const computeOptionMethods = {
-  [serialNumberTypeList[0].value]: (i) => `${String.fromCharCode(97 + i)}.`,
-  [serialNumberTypeList[1].value]: (i) => `${i + 1}.`,
-  [serialNumberTypeList[2].value]: (i) => `${String.fromCharCode(65 + i)}.`,
-  [serialNumberTypeList[3].value]: (i) => `(${i + 1})`,
+  [serialNumberTypeList[0].value]: (i) => `${i + 1}`,
+  [serialNumberTypeList[1].value]: (i) => `(${i + 1})`,
+  [serialNumberTypeList[2].value]: (i) => `${String.fromCharCode(97 + i)}`, // 小写
+  [serialNumberTypeList[3].value]: (i) => `${String.fromCharCode(65 + i)}`, // 大写
+};
+
+export const reversedComputeOptionMethods = {
+  [serialNumberTypeList[0].value]: (i) => Number(i),
+  [serialNumberTypeList[1].value]: (i) => Number(i.replace('(', '').replace(')', '')),
+  [serialNumberTypeList[2].value]: (i) => i.charCodeAt(0) - 97 + 1, // 小写
+  [serialNumberTypeList[3].value]: (i) => i.charCodeAt(0) - 65 + 1,
 };
 
 /**
+ * 改变选项序号
+ * @param {object} property
+ */
+export function switchSerialNumber(property) {
+  let relNum = 1;
+  const reversedComputationMethod = reversedComputeOptionMethods[property.sn_type];
+  if (reversedComputationMethod) {
+    relNum = reversedComputationMethod(property.serial_number);
+  }
+
+  let index = serialNumberTypeList.findIndex((p) => p.value === property.sn_type);
+  property.sn_type = serialNumberTypeList[index + 1]?.value || serialNumberTypeList[0].value;
+  const computationMethod = computeOptionMethods[property.sn_type];
+  if (computationMethod) {
+    property.serial_number = computationMethod(relNum - 1);
+  }
+}
+
+/**
  * 计算选项序号
  * @param {Number} i 序号
  * @param {String} sn_type 选项类型