修改问题

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -18,7 +18,7 @@
       <span class="drag-line" data-row="-1"></span>
       <!-- 行 -->
       <template v-for="(row, i) in data.row_list">
-        <div :key="i" class="row" :style="getMultipleColStyle(i)">
+        <div :key="i" class="row" :style="computedRowStyle(i)">
           <!-- 列 -->
           <template v-for="(col, j) in row.col_list">
             <span
@@ -42,6 +42,16 @@
                   data-type="row"
                 ></span>
                 <span
+                  v-if="grid.row > 1 && grid.row !== col.grid_list[k - 1].row"
+                  :key="`middle-${i}-${j}-${k}`"
+                  :style="{ gridArea: `middle-${grid.grid_area}` }"
+                  :data-row="i"
+                  :data-col="j"
+                  :data-grid="k"
+                  data-type="col-middle"
+                  class="drag-line grid-line"
+                ></span>
+                <span
                   :key="`left-${i}-${j}-${k}`"
                   :style="{ gridArea: `left-${grid.grid_area}` }"
                   :data-row="i"
@@ -481,7 +491,7 @@ export default {
       grid.forEach(({ row }) => {
         rowList.set(row, (rowList.get(row) || 0) + 1);
       });
-      let curMaxRow = 0; // 当前数量最大 row 的值
+      let curMaxRow = 0; // 当前列数最多的 row 的值
       rowList.forEach((value, key) => {
         if (value > maxCol) {
           maxCol = value;
@@ -491,10 +501,21 @@ export default {
       // 计算 grid_template_areas
       let gridStr = '';
       let gridArr = [];
-      grid.forEach(({ grid_area, row }) => {
+      let gridRowArr = []; // 存储不同 row 中间的 line
+      grid.forEach(({ grid_area, row }, i) => {
+        // 如果 gridArr[row - 1] 不存在则创建
         if (!gridArr[row - 1]) {
           gridArr[row - 1] = [];
         }
+
+        if (row > 1 && grid[i - 1].row !== row) {
+          gridRowArr.push({
+            row: row - 1,
+            str: `middle-${grid_area} `.repeat(maxCol * 3),
+          });
+        }
+
+        // 如果当前 row 是最大列数的 row
         if (curMaxRow === row) {
           gridArr[row - 1].push(`left-${grid_area} ${grid_area} right-${grid_area}`);
         } else {
@@ -512,10 +533,13 @@ export default {
           gridArr[row - 1].push(`left-${grid_area} ${str} right-${grid_area}`);
         }
       });
-      gridArr.forEach((item) => {
+      gridArr.forEach((item, i) => {
+        let find = gridRowArr.find((row) => row.row === i);
+        if (find) {
+          gridStr += `'${find.str}' `;
+        }
         gridStr += `'${item.join(' ')}' `;
       });
-
       // 计算 grid_template_columns
       let gridTemCols = '';
       let max = { row: 0, num: 0 };
@@ -543,7 +567,10 @@ export default {
         }
         gridMap.get(item.row).push(item.height);
       });
-      gridMap.forEach((value) => {
+      gridMap.forEach((value, i) => {
+        if (i > 1) {
+          gridTemplateRows += '4px ';
+        }
         if (value.length === 1) {
           gridTemplateRows += `${value[0]} `;
         } else {
@@ -676,7 +703,7 @@ export default {
       }
       this.enterCanvas = false;
     },
-    getMultipleColStyle(i) {
+    computedRowStyle(i) {
       let row = this.data.row_list[i];
       let col = row.col_list;
       if (col.length <= 1) {
@@ -709,7 +736,7 @@ export default {
       let grid = col.grid_list;
       let type = this.gridInsertType;
 
-      if (type === 'row') {
+      if (['row', 'col-middle'].includes(type)) {
         let rowNum = this.curGrid === 0 ? 1 : grid[this.curGrid - 1].row + 1;
         grid.splice(this.curGrid, 0, {
           id,
@@ -906,6 +933,10 @@ export default {
       position: relative;
       top: 6px;
     }
+
+    &.grid-line {
+      background-color: #f43;
+    }
   }
 
   .drag-vertical-line {

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

@@ -8,10 +8,12 @@
           class="file-uploader"
           action="no"
           :accept="acceptFileType"
-          :multiple="true"
+          :multiple="limit === null || limit > 1"
           :show-file-list="false"
           :auto-upload="false"
+          :file-list="fileList"
           :on-change="onFileChange"
+          :on-exceed="handleExceed"
           :limit="limit"
         >
           <el-button>选取{{ labelText }}文件</el-button>
@@ -21,7 +23,7 @@
     </div>
     <el-divider />
     <div class="upload-tip">{{ uploadTip }}</div>
-    <ul slot="file-list" class="file-list" v-if="fileList.length > 0">
+    <ul v-if="fileList.length > 0" slot="file-list" class="file-list">
       <li v-for="(file, i) in fileList" :key="i">
         <div class="file-name">
           <span>
@@ -159,12 +161,23 @@ export default {
       });
       const lists = this.$refs.upload.uploadFiles;
       if (lists.length === 0) return;
-      lists.forEach((item) => {
-        let _index = this.content.file_list.findIndex((p) => p.uid === item.uid);
-        if (_index <= -1) {
-          this.content.file_list.push(item);
-        }
+      const files = lists.filter((item) => {
+        let find = this.content.file_list.findIndex((p) => p.uid === item.uid);
+        return find === -1;
       });
+      if (this.limit !== null && this.content.file_list.length + files.length > this.limit) {
+        this.$message.warning(
+          `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + this.content.file_list.length} 个文件`,
+        );
+        return;
+      }
+      this.content.file_list = [...this.content.file_list, ...files];
+    },
+
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
+      );
     },
 
     // 删除文件
@@ -220,7 +233,7 @@ export default {
 
     // 上传文件
     uploadFiles() {
-      const files = (this.content.file_list || []).filter((file) => file.uid);
+      const files = (this.content.file_list || []).filter((file) => file.uid && file.status !== 'success');
       if (files.length <= 0) {
         this.$message.error('没有需要上传的文件！');
         return false;

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

@@ -70,7 +70,7 @@ import WritePreview from '../preview/components/write/WritePreview.vue';
 import NewWordPreview from '../preview/components/new_word/NewWordPreview.vue';
 import NotesPreview from '../preview/components/notes/NotesPreview.vue';
 import OtherWordPreview from '../preview/components/other_word/OtherWordPreview.vue';
-import ArticlePreview from '../preview/components/article/index.vue'
+import ArticlePreview from '../preview/components/article/index.vue';
 
 export const bookTypeOption = [
   {

src/views/book/courseware/preview/components/upload_control/UploadControlPreview.vue

@@ -4,11 +4,11 @@
 
     <div class="main">
       <UploadFile
-        :changeFillId="changeFillId"
-        :accept="acceptFileType"
-        :filleNumber="1"
-        :fileList="data.file_list"
         v-if="data.answer.answer_list.length === 0"
+        :change-fill-id="changeFillId"
+        :accept="acceptFileType"
+        :fille-number="1"
+        :file-list="data.file_list"
       />
       <div v-else class="preview-box">
         <template
@@ -23,13 +23,12 @@
             :src="data.answer.answer_list[0].file_url"
             :fit="'contain'"
             :preview-src-list="[data.answer.answer_list[0].file_url]"
-          >
-          </el-image>
+          />
         </template>
         <template v-else-if="data.answer.answer_list[0].file_name.indexOf('pdf') !== -1">
           <iframe
-            :src="data.answer.answer_list[0].newpath"
             id="ifm"
+            :src="data.answer.answer_list[0].newpath"
             width="100%"
             height="260px"
             frameborder="0"
@@ -46,15 +45,15 @@
       </div>
     </div>
     <el-dialog
+      v-if="showIframe"
       :visible.sync="showIframe"
       :show-close="true"
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       width="1000px"
       class="login-dialog"
-      v-if="showIframe"
     >
-      <iframe :src="data.answer.answer_list[0].newpath" id="ifms" width="100%" height="600px" frameborder="0"></iframe>
+      <iframe id="ifms" :src="data.answer.answer_list[0].newpath" width="100%" height="600px" frameborder="0"></iframe>
     </el-dialog>
   </div>
 </template>
@@ -68,8 +67,8 @@ import { getConfig } from '@/utils/auth';
 
 export default {
   name: 'UploadControlPreview',
-  mixins: [PreviewMixin],
   components: { UploadFile },
+  mixins: [PreviewMixin],
   data() {
     return {
       data: getUploadControlData(),
@@ -81,8 +80,7 @@ export default {
   methods: {
     changeFillId(fileList) {
       this.data.answer.answer_list = [fileList[0].response.file_info_list[0]];
-      let path =
-        `${this.file_preview_url}/onlinePreview?url=` + Base64.encode(fileList[0].response.file_info_list[0].file_url);
+      let path = `${this.file_preview_url}/onlinePreview?url=${Base64.encode(fileList[0].response.file_info_list[0].file_url)}`;
       this.data.answer.answer_list[0].newpath = path;
       this.$forceUpdate();
     },

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -4,26 +4,19 @@
 
     <div class="main">
       <template v-if="data.file_list.length > 0">
-        <template
-          v-if="
-            data.file_list[0].file_name.indexOf('png') !== -1 ||
-            data.file_list[0].file_name.indexOf('jpg') !== -1 ||
-            data.file_list[0].file_name.indexOf('jpeg') !== -1
-          "
-        >
+        <template v-if="data.file_list[0].file_name.match(/\.(png|jpg|jpeg)$/i) !== null">
           <el-image
             style="width: 100%; height: 260px"
             :src="data.file_list[0].file_url"
             :fit="'contain'"
             :preview-src-list="[data.file_list[0].file_url]"
-          >
-          </el-image>
+          />
         </template>
         <template v-else-if="data.file_list[0].file_name.indexOf('pdf') !== -1">
-          <iframe :src="data.file_list[0].newpath" id="ifm" width="100%" height="260px" frameborder="0"></iframe>
+          <iframe id="ifm" :src="data.file_list[0].newpath" width="100%" height="260px" frameborder="0"></iframe>
         </template>
-        <div class="uploadBtn" @click="downLoad" v-if="isEnable(data.is_enable_download)">
-          <img style="width: 24px; height: 24px" src="@/assets/download.png" alt="" />
+        <div v-if="isEnable(data.is_enable_download)" class="uploadBtn" @click="downLoad">
+          <img style="width: 24px; height: 24px" src="@/assets/download.png" alt="download" />
           下载
         </div>
       </template>
@@ -33,15 +26,14 @@
 
 <script>
 import PreviewMixin from '../common/PreviewMixin';
-import { getConfig } from '@/utils/auth';
+import { getConfig, getToken } from '@/utils/auth';
 import { GetFileURLMap } from '@/api/app';
 const Base64 = require('js-base64').Base64;
-import { getToken } from '@/utils/auth';
 
 import { getUploadPreviewData } from '@/views/book/courseware/data/uploadPreview';
 
 export default {
-  name: 'UploadControlPreview',
+  name: 'UploadPreviewPreview',
   mixins: [PreviewMixin],
   data() {
     return {
@@ -59,7 +51,6 @@ export default {
       immediate: true,
     },
   },
-  created() {},
   methods: {
     // 处理数据
     handleData() {
@@ -68,7 +59,7 @@ export default {
           this.$set(
             item,
             'newpath',
-            `${this.file_preview_url}/onlinePreview?url=` + Base64.encode(url_map[item.file_id]),
+            `${this.file_preview_url}/onlinePreview?url=${Base64.encode(url_map[item.file_id])}`,
           );
         });
       });
@@ -76,9 +67,9 @@ export default {
     //   下载表格
     downLoad() {
       let userInfor = getToken();
-      let UserCode = '',
-        UserType = '',
-        SessionID = '';
+      let SessionID = '';
+      let UserCode = '';
+      let UserType = '';
       if (userInfor) {
         UserCode = userInfor.user_code;
         UserType = userInfor.user_type;
@@ -91,9 +82,9 @@ export default {
         UserType,
         FileID,
       };
-      location.href =
-        process.env.VUE_APP_BASE_API +
-        `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
+      location.href = `${
+        process.env.VUE_APP_BASE_API
+      }/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
     },
   },
 };
@@ -104,27 +95,27 @@ export default {
 
 .upload-preview {
   @include preview-base;
-}
 
-.uploadBtn {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 96px;
-  height: 39px;
-  margin-top: 8px;
-  font-size: 16px;
-  line-height: 150%;
-  color: #000;
-  cursor: pointer;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 10%);
-  border-radius: 4px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 10%);
+  .uploadBtn {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 96px;
+    height: 39px;
+    margin-top: 8px;
+    font-size: 16px;
+    line-height: 150%;
+    color: #000;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 10%);
+    border-radius: 4px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 10%);
 
-  img {
-    margin-right: 13px;
+    img {
+      margin-right: 13px;
+    }
   }
 }
 </style>

src/views/book/create.vue

@@ -22,7 +22,7 @@
             :http-request="uploadCover"
             :before-upload="beforeCoverUpload"
           >
-            <img v-if="form.picture_url" :src="form.picture_url" class="cover" />
+            <img v-if="form.picture_url" :src="form.picture_url" class="cover" alt="cover" />
             <div v-else class="cover-uploader-icon">
               <i class="el-icon-plus"></i>
               <span>点击上传封面</span>
@@ -81,7 +81,7 @@
           />
         </el-form-item>
         <el-form-item label="主题色" prop="theme_color">
-          <el-color-picker v-model="form.theme_color"></el-color-picker>
+          <el-color-picker v-model="form.theme_color" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="addBook">确定</el-button>
@@ -281,8 +281,11 @@ export default {
 
       .cover-uploader {
         :deep img {
+          min-width: 100px;
           max-width: 228px;
+          min-height: 50px;
           max-height: 320px;
+          vertical-align: middle;
         }
 
         :deep .el-upload {