优化代码

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

@@ -21,7 +21,7 @@
     <el-divider />
     <div class="upload-tip">{{ uploadTip }}</div>
     <ul slot="file-list" class="file-list">
-      <li v-for="(file, i) in content.file_list" :key="i">
+      <li v-for="(file, i) in fileList" :key="i">
         <div class="file-name">
           <span>
             <SvgIcon :icon-class="iconClass" size="12" />
@@ -49,7 +49,6 @@
 import { fileUpload } from '@/api/app';
 import { conversionSize } from '@/utils/common';
 import FillDescribe from '../../common/FillDescribe';
-import { login } from '@/api/user';
 
 export default {
   name: 'UploadFile',
@@ -131,6 +130,16 @@ export default {
       },
       deep: true,
     },
+    fileList: {
+      handler(val) {
+        this.content = {
+          file_list: val,
+          file_id_list: this.fileIdList,
+          file_info_list: this.fileInfoList,
+        };
+      },
+      deep: true,
+    },
   },
   methods: {
     // 显示自定义样式文件列表

src/views/book/courseware/create/components/base/picture/Picture.vue

@@ -4,12 +4,17 @@
       <UploadFile
         :courseware-id="courseware_id"
         :component-id="id"
-        :module-data="data"
+        :type="data.type"
+        :single-size="data.single_size"
+        :total-size="data.total_size"
+        :file-list="data.file_list"
+        :file-id-list="data.file_id_list"
+        :file-info-list="data.file_info_list"
         :label-text="labelText"
         :accept-file-type="acceptFileType"
         :upload-tip="uploadTip"
         :icon-class="iconClass"
-        @saveDate="saveDate"
+        @updateFileList="updateFileList"
       />
     </template>
   </ModuleBase>
@@ -35,8 +40,10 @@ export default {
   },
   computed: {},
   methods: {
-    saveDate(content) {
-      if (content) this.data = content;
+    updateFileList({ file_list, file_id_list, file_info_list }) {
+      this.data.file_list = file_list;
+      this.data.file_id_list = file_id_list;
+      this.data.file_info_list = file_info_list;
     },
   },
 };

src/views/book/courseware/create/components/base/picture/PictureSetting.vue

@@ -17,63 +17,14 @@
       </el-form-item>
       <el-form-item label="序号位置">
         <div class="grid-container">
-          <div class="top">
-            <el-button
-              :class="['top-start', { active: 'top-start' === property.sn_position }]"
-              @click="changeNumberPosition('top-start')"
-            />
-            <el-button
-              :class="['top', { active: 'top' === property.sn_position }]"
-              @click="changeNumberPosition('top')"
-            />
-            <el-button
-              :class="['top-end', { active: 'top-end' === property.sn_position }]"
-              @click="changeNumberPosition('top-end')"
-            />
-          </div>
-          <div class="left">
-            <el-button
-              :class="['left-start', { active: 'left-start' === property.sn_position }]"
-              @click="changeNumberPosition('left-start')"
-            />
-            <el-button
-              :class="['left', { active: 'left' === property.sn_position }]"
-              @click="changeNumberPosition('left')"
-            />
-            <el-button
-              :class="['left-end', { active: 'left-end' === property.sn_position }]"
-              @click="changeNumberPosition('left-end')"
-            />
-          </div>
+          <el-button
+            v-for="{ value } in serialNumberPositionList"
+            :key="value"
+            :class="[value, { active: value === property.sn_position }]"
+            :style="{ gridArea: value }"
+            @click="changeNumberPosition(value)"
+          />
           <div class="main"></div>
-          <div class="right">
-            <el-button
-              :class="['right-start', { active: 'right-start' === property.sn_position }]"
-              @click="changeNumberPosition('right-start')"
-            />
-            <el-button
-              :class="['right', { active: 'right' === property.sn_position }]"
-              @click="changeNumberPosition('right')"
-            />
-            <el-button
-              :class="['right-end', { active: 'right-end' === property.sn_position }]"
-              @click="changeNumberPosition('right-end')"
-            />
-          </div>
-          <div class="bottom">
-            <el-button
-              :class="['bottom-start', { active: 'bottom-start' === property.sn_position }]"
-              @click="changeNumberPosition('bottom-start')"
-            />
-            <el-button
-              :class="['bottom', { active: 'bottom' === property.sn_position }]"
-              @click="changeNumberPosition('bottom')"
-            />
-            <el-button
-              :class="['bottom-end', { active: 'bottom-end' === property.sn_position }]"
-              @click="changeNumberPosition('bottom-end')"
-            />
-          </div>
         </div>
       </el-form-item>
       <el-divider />
@@ -93,6 +44,7 @@ import {
   viewMethodList,
   switchSerialNumber,
   checkString,
+  serialNumberPositionList,
 } from '@/views/book/courseware/data/common';
 
 export default {
@@ -102,6 +54,7 @@ export default {
     return {
       switchSerialNumber,
       checkString,
+      serialNumberPositionList,
       snGenerationMethodList,
       viewMethodList,
       labelPosition: 'left',
@@ -160,63 +113,35 @@ export default {
     margin-right: 16px;
   }
 
-  .top {
-    grid-area: top;
-    column-gap: 8px;
-    justify-content: center;
-  }
-
-  .left {
-    flex-direction: column;
-    grid-area: left;
-    row-gap: 4px;
-  }
-
   .main {
     grid-area: main;
   }
 
-  .right {
-    flex-direction: column;
-    grid-area: right;
-    row-gap: 4px;
-  }
-
-  .bottom {
-    grid-area: bottom;
-    column-gap: 8px;
-    justify-content: center;
-  }
-
   .grid-container {
     display: grid;
     grid:
-      'top top top top top top'
-      'left main main main main right'
-      'bottom bottom bottom bottom bottom bottom';
+      '. top-start top top-end .'
+      'left-start main main main right-start'
+      'left main main main right'
+      'left-end main main main right-end'
+      '. bottom-start bottom bottom-end .';
+    place-items: center center;
     width: 134px;
     height: 80px;
-    padding: 8px 8px 0;
+    padding: 8px;
     line-height: 10px;
     border: 1px solid #ebebeb;
 
-    div {
-      display: flex;
-      margin: 0 auto;
-      text-align: center;
-      background-color: rgba(255, 255, 255, 8%);
-
-      .el-button {
-        width: 16px;
-        height: 8px;
-        padding: 0;
-        margin: 0;
-        border: 1px solid #e4e4e4;
-        border-radius: 2px;
+    .el-button {
+      width: 16px;
+      height: 8px;
+      padding: 0;
+      margin: 0;
+      border: 1px solid #e4e4e4;
+      border-radius: 2px;
 
-        &.active {
-          background-color: $setting-active-color;
-        }
+      &.active {
+        background-color: $setting-active-color;
       }
     }
 

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

@@ -1,4 +1,9 @@
-import { snGenerationMethodList, viewMethodList } from '@/views/book/courseware/data/common';
+import {
+  snGenerationMethodList,
+  viewMethodList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+} from '@/views/book/courseware/data/common';
 
 export function getPictureData() {
   return {
@@ -9,8 +14,8 @@ export function getPictureData() {
     total_size: 100, // 单位MB
     property: {
       serial_number: 1, // 序号
-      sn_type: 'letter', // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
-      sn_position: 'top-start', // 序号位置：top-start top top-end，left-start left left-end等
+      sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
+      sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
       sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow跟随
       view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标
     },

src/views/book/courseware/preview/components/picture/Picture.vue

@@ -1,26 +1,18 @@
 <template>
   <div class="picture_area">
-    <div class="top">
-      <span v-show="'top-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'top' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'top-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('top')"
+      class="top"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
-    <div class="left">
-      <span v-show="'left-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'left' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'left-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('left')"
+      class="left"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
     <div class="main">
       <div class="view_area">
@@ -47,27 +39,19 @@
         </ul>
       </div>
     </div>
-    <div class="right">
-      <span v-show="'right-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'right' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'right-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('right')"
+      class="right"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
-    <div class="bottom">
-      <span v-show="'bottom-start' === data.property.sn_position" style="justify-content: start">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'bottom' === data.property.sn_position" style="justify-content: center">
-        {{ data.property.serial_number }}
-      </span>
-      <span v-show="'bottom-end' === data.property.sn_position" style="justify-content: end">
-        {{ data.property.serial_number }}
-      </span>
+    <div
+      v-show="data.property.sn_position.includes('bottom')"
+      class="bottom"
+      :style="getJustifyContentStyle(data.property.sn_position)"
+    >
+      {{ data.property.serial_number }}
     </div>
   </div>
 </template>
@@ -93,6 +77,19 @@ export default {
       // 切换到对应索引的图片
       carousel.setActiveItem(index);
     },
+
+    /**
+     * 得到位置样式
+     * @param {string} position 位置
+     */
+    getJustifyContentStyle(position) {
+      if (position.includes('start')) {
+        return 'justify-content: start';
+      } else if (position.includes('end')) {
+        return 'justify-content: end';
+      }
+      return 'justify-content: center';
+    },
   },
 };
 </script>
@@ -108,6 +105,7 @@ export default {
   width: 100%;
 
   > div {
+    display: flex;
     margin: 4px auto;
 
     > span {