讲义列表

.env.development

@@ -6,7 +6,7 @@ ENV = 'development'
 
 # 中正云教育管理后台/开发环境
 VUE_APP_BASE_API = 'http://120.79.166.78:19013/'
-# VUE_APP_BASE_API = 'http://localhost:5030/'
+# VUE_APP_BASE_API = 'http://192.168.1.24:5030/'
 VUE_APP_IMG_API = 'https://file-dev.xyyxt.net'
 
 # 路由懒加载

src/utils/request.js

@@ -8,7 +8,7 @@ import methods from '@/utils/methodsTool';
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 export const baseURL = process.env.VUE_APP_BASE_API
-// export const baseURL = 'http://192.168.1.7:5030/'
+// export const baseURL = 'http://192.168.1.24:5030/'
 export const BASE_IMG_URL = process.env.VUE_APP_IMG_API
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分

src/views/resource/handoutManagement/handoutList/add/index copy.vue

@@ -0,0 +1,565 @@
+<template>
+  <div id="handoutListAdd">
+    <div class="boxWidth">
+      <el-form
+        label-position="right"
+        label-width="120px"
+        :model="listData"
+        :rules="rules"
+        ref="listData"
+      >
+        <el-form-item label="适用业务层级">
+          <el-select
+            v-model="eduType"
+            placeholder="请选择教育类型"
+            @change="changeEduType"
+          >
+            <el-option
+              v-for="(item, index) in eduTypeOptions"
+              :key="index"
+              :label="item.educationName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            v-model="courType"
+            placeholder="请选择业务层次"
+            @change="changecourseType"
+          >
+            <el-option
+              v-for="(item, index) in newCourTypeOptions"
+              :key="index"
+              :label="item.projectName + '-' + item.businessName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-popover
+            ref="popovers"
+            placement="bottom"
+            width="200"
+            trigger="click"
+            @show="showHandle"
+            @hide="hideHandle"
+            :disabled="courType ? false : true"
+          >
+            <el-checkbox
+              v-model="checkAll"
+              @change="handleCheckAllChange"
+              :indeterminate="isIndeterminate"
+              >全选</el-checkbox
+            >
+            <el-checkbox-group
+              v-model="sujectArray"
+              class="checkboxSty"
+              @change="handleCheckedCitiesChange"
+            >
+              <el-checkbox
+                v-for="(item, index) in newSujectOption"
+                :label="item.newId"
+                :key="index"
+                >{{ item.subjectName }}</el-checkbox
+              >
+            </el-checkbox-group>
+            <div style="display: block; text-align: center; margin-top: 10px">
+              <el-button size="mini" type="primary" @click="submitSujectArray"
+                >确定</el-button
+              >
+            </div>
+            <el-button slot="reference" style="margin-left: 12px"
+              >请选择科目</el-button
+            >
+          </el-popover>
+        </el-form-item>
+        <el-form-item label="">
+          <div :class="changeHeight ? 'ach' : 'clh'">
+            <div
+              v-for="(item, index) in newSujectApis"
+              :key="index"
+              class="listBoxStys"
+            >
+              {{
+                item.educationName +
+                " - " +
+                item.projectName +
+                " - " +
+                item.businessName +
+                " - " +
+                item.subjectName
+              }}
+              <i class="el-icon-error closeIcons" @click="closeType(index)"></i>
+            </div>
+          </div>
+          <el-popover
+            placement="bottom-start"
+            trigger="hover"
+            :close-delay="50"
+          >
+            <ul style="margin: 0; max-width: 600px">
+              <li
+                class="copyDataLi"
+                :class="changeSty(itemT)"
+                v-for="(itemT, indexT) in localData"
+                :key="indexT"
+                @click="unTime(itemT)"
+              >
+                {{
+                  `${itemT.educationName}-${itemT.projectName}-${itemT.businessName}-${itemT.subjectName}`
+                }}
+              </li>
+            </ul>
+            <el-button
+              v-show="localData.length"
+              type="danger"
+              slot="reference"
+              size="mini"
+              style="margin-right: 10px"
+              >最近选择</el-button
+            >
+          </el-popover>
+          <el-button
+            size="mini"
+            v-if="newSujectApis.length > 1"
+            @click="changeType"
+            >{{ changeHeight ? "展开" : "关闭" }}</el-button
+          ><el-button
+            size="mini"
+            v-if="newSujectApis.length > 0"
+            @click="sujectApis = []"
+            >清空</el-button
+          >
+          <!-- <span v-if="newSujectApis.length === 0">未选项目类型</span> -->
+        </el-form-item>
+        <el-form-item label="讲义标题" prop="handoutsName">
+          <el-input v-model="listData.handoutsName"></el-input>
+        </el-form-item>
+        <el-form-item label="是否可下载" prop="canDownload">
+          <el-radio-group v-model="listData.canDownload">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否发布" prop="status">
+          <el-radio-group v-model="listData.status">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="讲义文件">
+          <div class="imgBoxins">
+            <div v-if="handoutsUrlLive" class="dis_stsy">
+              <a :href="blob" target="_blank">
+                <img src="@/assets/images/pdf@3x.png" alt="" />
+              </a>
+
+              <p>{{ listData.urlName }}</p>
+              <el-button
+                type="danger"
+                size="mini"
+                class="margin-top: 20px;"
+                @click="clearImgs"
+                >删除</el-button
+              >
+            </div>
+            <div class="posimg" v-else>
+              <label for="uplose">
+                <i class="el-icon-circle-plus-outline iconStsz"></i
+              ></label>
+              <input
+                ref="file"
+                type="file"
+                style="display: none"
+                id="uplose"
+                @change="getImgFile"
+              />
+              <p>注：只能上传PDF文件，且不超过100MB</p>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="backPage">取消</el-button>
+          <el-button type="primary" @click="submit('listData')" :loading="disabledBtn">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HandoutListAdd",
+  data() {
+    return {
+      disabledBtn: false,
+      isIndeterminate: false,
+      checkAll: false,
+      blob: "", //pdf本地路径
+      handoutsUrlLive: false, //是否存在PDF
+      //   弹窗数据
+      changeHeight: true,
+      listData: {
+        handoutsUrl: undefined,
+        urlName: undefined,
+      },
+      eduTypeOptions: [], //教育类型数据
+      projectTypeOptions: [], //项目类型数据
+      courTypeOptions: [], //业务层次数据
+      newCourTypeOptions: [], //当前业务层次数据
+      sujectOption: [], //科目数据
+      newSujectOption: [], //当前科目数据数据
+      eduType: "", //当前选中教育类型
+      courType: "", //当前选中业务层次
+      sujectApis: [], //当前存在的科目
+      newSujectApis: [],
+      sujectArray: [], //选中的科目
+      localData: [],
+      //表单验证
+      rules: {
+        handoutsName: [
+          { required: true, message: "请输入讲义标题", trigger: "blur" },
+        ],
+        canDownload: [
+          { required: true, message: "请选择是否可下载", trigger: "change" },
+        ],
+        status: [
+          { required: true, message: "请选择是否发布", trigger: "change" },
+        ],
+      },
+    };
+  },
+  watch: {
+    sujectApis: {
+      immediate: true,
+      handler(newName, oldName) {
+        this.changeTypes();
+      },
+    },
+    "listData.handoutsUrl": {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          this.handoutsUrlLive = true;
+        } else {
+          this.handoutsUrlLive = false;
+        }
+      },
+    },
+  },
+  mounted() {
+    this.localData = this.$methodsTools.getBusinessList();
+    this.getDict();
+  },
+  methods: {
+    unTime(val) {
+      let a = `${val.businessId}-${val.subjectId}`;
+      if (this.sujectApis.includes(a)) {
+        this.sujectApis.splice(this.sujectApis.indexOf(a), 1);
+      } else {
+        this.sujectApis.push(a);
+      }
+    },
+    changeSty(val) {
+      var arr = "";
+      this.sujectApis.forEach((item) => {
+        let arr1 = item.split("-").map(Number);
+        if (val.businessId == arr1[0] && val.subjectId == arr1[1]) {
+          arr = "activeStyIcons";
+        }
+      });
+      return arr;
+    },
+    handleCheckedCitiesChange() {
+      let nid = this.newSujectOption.map((item) => {
+        return item.newId;
+      });
+      this.checkAll = this.sujectArray.length === nid.length;
+      this.isIndeterminate =
+        this.sujectArray.length > 0 && this.sujectArray.length < nid.length;
+    },
+    setFunc(arr) {
+      var arrays = [];
+      for (let i = 0; i < arr.length; i++) {
+        if (!arrays.includes(arr[i])) {
+          arrays.push(arr[i]);
+        }
+      }
+      return arrays;
+    },
+    handleCheckAllChange(val) {
+      if (val) {
+        let nid = this.newSujectOption.map((item) => {
+          return item.newId;
+        });
+        let arrays = this.sujectArray.concat(nid);
+        this.sujectArray = this.setFunc(arrays);
+        this.isIndeterminate = false;
+      } else {
+        let nid = this.newSujectOption.map((item) => {
+          return item.newId;
+        });
+        let newArr = [];
+        this.sujectArray.forEach((item) => {
+          if (!nid.includes(item)) {
+            newArr.push(item);
+          }
+        });
+        this.sujectArray = newArr;
+        this.isIndeterminate = false;
+      }
+    },
+    changeTypes() {
+      var self = this;
+      var arrays = [];
+      this.sujectApis.map((item, index) => {
+        this.courTypeOptions.map((items) => {
+          if (items.id === item.split("-").map(Number)[0]) {
+            var obj = {
+              educationId: items.educationId,
+              educationName: items.educationName,
+              projectId: items.projectId,
+              projectName: items.projectName,
+              businessId: items.id,
+              businessName: items.businessName,
+            };
+            self.sujectOption.map((i) => {
+              if (
+                i.id === item.split("-").map(Number)[1] &&
+                i.courseArrays.indexOf(items.projectId) !== -1
+              ) {
+                obj.subjectName = i.subjectName;
+                obj.subjectId = i.id;
+              }
+            });
+            arrays.push(obj);
+          }
+        });
+      });
+      this.newSujectApis = arrays;
+    },
+    changeType() {
+      this.changeHeight = !this.changeHeight;
+    },
+    submitSujectArray() {
+      var self = this;
+      this.sujectApis = this.sujectApis.filter((item, index) => {
+        return item.split("-").map(Number)[0] !== Number(self.courType);
+      });
+      for (let i = 0; i < this.sujectArray.length; i++) {
+        this.sujectApis.push(this.sujectArray[i]);
+      }
+      this.$refs.popovers.doClose();
+    },
+    showHandle() {
+      var array = [];
+      for (let i = 0; i < this.sujectApis.length; i++) {
+        if (
+          this.sujectApis[i].split("-").map(Number)[0] === Number(this.courType)
+        ) {
+          array.push(this.sujectApis[i]);
+        }
+      }
+      this.sujectArray = array;
+      if (!this.newSujectOption.length) {
+        this.$message.warning("该业务层次暂无关联科目");
+        this.$refs.popovers.doClose();
+        return;
+      }
+      this.newSujectOption.map((item) => {
+        item.newId = this.courType + "-" + item.id;
+      });
+      this.handleCheckedCitiesChange();
+    },
+    hideHandle() {},
+    getDict() {
+      this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
+        this.eduTypeOptions = res.rows;
+      });
+      this.$api.inquireCourseProjectType({ status: 1 }).then((res) => {
+        this.projectTypeOptions = res.rows;
+      });
+      this.$api.inquirebusinessList({ status: 1 }).then((res) => {
+        this.courTypeOptions = res.rows;
+        this.newCourTypeOptions = res.rows;
+      });
+      this.$api.inquireCourseSubject({ status: 1 }).then((res) => {
+        res.rows.map((item, index) => {
+          var array = [];
+          item.courseProjectTypes.map((items, indexs) => {
+            array.push(items.id);
+          });
+          item.courseArrays = array;
+        });
+        this.sujectOption = res.rows;
+      });
+    },
+    changeEduType() {
+      if (!(this.courType === undefined || this.courType === "")) {
+        this.courType = "";
+      }
+      var arrays = [];
+      this.courTypeOptions.map((item) => {
+        if (item.educationId === this.eduType) {
+          arrays.push(item);
+        }
+      });
+      this.newCourTypeOptions = arrays;
+    },
+    changecourseType() {
+      this.newCourTypeOptions.map((item, index) => {
+        if (item.id === this.courType) {
+          this.eduType = item.educationId;
+          var array = [];
+          this.sujectOption.map((items, indexs) => {
+            if (items.courseArrays.indexOf(item.projectId) !== -1) {
+              array.push(items);
+            }
+          });
+          this.newSujectOption = array;
+        }
+      });
+      var arrays = [];
+      this.courTypeOptions.map((item) => {
+        if (item.educationId === this.eduType) {
+          arrays.push(item);
+        }
+      });
+      this.newCourTypeOptions = arrays;
+      this.$refs.popovers.doClose();
+    },
+    clearImgs() {
+      this.listData.handoutsUrl = undefined;
+      this.listData.urlName = undefined;
+    },
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.rulesTableSumbit();
+        } else {
+          return false;
+        }
+      });
+    },
+    async rulesTableSumbit() {
+      var dataInfos = {
+        handoutsName: this.listData.handoutsName,
+        courseHandoutsBusinessAddBos: this.newSujectApis,
+        status: this.listData.status,
+        canDownload: this.listData.canDownload,
+        coverUrl: this.listData.coverUrl,
+      };
+      if (this.listData.handoutsUrl) {
+        const urls = await this.$upload.upload(this.listData.handoutsUrl, 6);
+        dataInfos.handoutsUrl = urls;
+        dataInfos.urlName = this.listData.urlName;
+      }
+      this.disabledBtn = true
+      this.$api.addCourseHandouts(dataInfos).then((res) => {
+        this.$methodsTools.cacheBusinessList(this.newSujectApis);
+        this.$message.success("新增成功");
+        setTimeout(() => {
+          this.$store.dispatch("tagsView/exitView", this.$route).then((res) => {
+            this.$router.push({
+              path: "handoutList",
+            });
+          });
+        }, 500);
+      }).catch(()=>{
+          this.disabledBtn = false
+        })
+    },
+    backPage() {
+      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
+        this.$router.push({
+          path: "handoutList",
+        });
+      });
+    },
+    closeType(index) {
+      this.sujectApis.splice(index, 1);
+    },
+    getImgFile(e) {
+      var self = this;
+      var file = self.$refs.file.files[0];
+      if (file === undefined) {
+        self.$set(self.listData, "handoutsUrl", "");
+        return;
+      }
+      if (file.size > 100 * 1024 * 1024) {
+        self.$message.error("pdf文件不得大于100MB");
+        return;
+      }
+      var type = self.$refs.file.value.toLowerCase().split(".").splice(-1);
+      if (type[0] != "pdf") {
+        self.$message.error("上传格式需为：.pdf");
+        self.$refs.file.value = "";
+        return;
+      }
+      const imgURL = window.URL.createObjectURL(file);
+      self.blob = imgURL;
+      self.listData.handoutsUrl = file;
+      self.listData.urlName = file.name;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.boxWidth {
+  width: 700px;
+}
+.numInputs {
+  width: 150px;
+}
+.checkboxSty {
+  max-height: 210px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.listBoxStys {
+  flex-shrink: 0;
+  padding: 0px 10px;
+  border-radius: 8px;
+  border: 1px solid #eee;
+  margin-right: 10px;
+  margin-bottom: 6px;
+}
+.closeIcons {
+  color: red;
+  cursor: pointer;
+  margin-left: 6px;
+}
+.ach {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.clh {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.imgBoxins {
+  width: 375px;
+  // height: 220px;
+  text-align: center;
+  img {
+    height: 100%;
+    width: 60px;
+    cursor: pointer;
+    transition: all 0.3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .dis_stsy {
+    display: flex;
+    align-items: flex-end;
+  }
+}
+.iconStsz {
+  font-size: 40px;
+  color: #67c23a;
+  cursor: pointer;
+}
+</style>

src/views/resource/handoutManagement/handoutList/add/index.vue

@@ -147,39 +147,60 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="讲义文件">
-          <div class="imgBoxins">
-            <div v-if="handoutsUrlLive" class="dis_stsy">
-              <a :href="blob" target="_blank">
-                <img src="@/assets/images/pdf@3x.png" alt="" />
-              </a>
-
-              <p>{{ listData.urlName }}</p>
-              <el-button
-                type="danger"
-                size="mini"
-                class="margin-top: 20px;"
-                @click="clearImgs"
-                >删除</el-button
-              >
-            </div>
-            <div class="posimg" v-else>
-              <label for="uplose">
-                <i class="el-icon-circle-plus-outline iconStsz"></i
-              ></label>
-              <input
-                ref="file"
-                type="file"
-                style="display: none"
-                id="uplose"
-                @change="getImgFile"
-              />
-              <p>注：只能上传PDF文件，且不超过100MB</p>
-            </div>
+          <div class="handoutList">
+            <label for="uplose"><span style="color: blue">添加pdf</span></label>
+            <input
+              ref="file"
+              type="file"
+              style="display: none"
+              id="uplose"
+              @change="getImgFile"
+            />
+            <span style="margin-left: 10px"
+              >注：只能上传PDF文件，且不超过100MB</span
+            >
+            <el-button
+              v-if="fileList.length > 1"
+              style="margin-left: 10px"
+              size="mini"
+              @click="sortList"
+              type="success"
+              >排序</el-button
+            >
+            <ul>
+              <li v-for="(item, index) in fileList" :key="index">
+                <el-input-number
+                  style="width: 40px; margin-right: 10px"
+                  size="mini"
+                  :precision="0"
+                  v-model="item.sort"
+                  :min="0"
+                  label="排序"
+                  :controls="false"
+                ></el-input-number>
+                <a :href="item.blob" target="_blank">
+                  <img src="@/assets/images/pdf@3x.png" alt="" />
+                </a>
+                <input v-model="item.urlName" />
+                <el-button
+                  type="danger"
+                  size="mini"
+                  style="margin-left: 10px"
+                  @click="fileList.splice(index, 1)"
+                  >删除</el-button
+                >
+              </li>
+            </ul>
           </div>
         </el-form-item>
         <el-form-item>
           <el-button @click="backPage">取消</el-button>
-          <el-button type="primary" @click="submit('listData')" :loading="disabledBtn">确定</el-button>
+          <el-button
+            type="primary"
+            @click="submit('listData')"
+            :loading="disabledBtn"
+            >确定</el-button
+          >
         </el-form-item>
       </el-form>
     </div>
@@ -191,11 +212,11 @@ export default {
   name: "HandoutListAdd",
   data() {
     return {
+      fileList: [],
+      // --------------------------------------------
       disabledBtn: false,
       isIndeterminate: false,
       checkAll: false,
-      blob: "", //pdf本地路径
-      handoutsUrlLive: false, //是否存在PDF
       //   弹窗数据
       changeHeight: true,
       listData: {
@@ -235,15 +256,6 @@ export default {
         this.changeTypes();
       },
     },
-    "listData.handoutsUrl": {
-      handler(newValue, oldValue) {
-        if (newValue) {
-          this.handoutsUrlLive = true;
-        } else {
-          this.handoutsUrlLive = false;
-        }
-      },
-    },
   },
   mounted() {
     this.localData = this.$methodsTools.getBusinessList();
@@ -430,7 +442,7 @@ export default {
       this.listData.handoutsUrl = undefined;
       this.listData.urlName = undefined;
     },
-    submit(formName) {
+    async submit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.rulesTableSumbit();
@@ -447,25 +459,66 @@ export default {
         canDownload: this.listData.canDownload,
         coverUrl: this.listData.coverUrl,
       };
-      if (this.listData.handoutsUrl) {
-        const urls = await this.$upload.upload(this.listData.handoutsUrl, 6);
-        dataInfos.handoutsUrl = urls;
-        dataInfos.urlName = this.listData.urlName;
-      }
-      this.disabledBtn = true
-      this.$api.addCourseHandouts(dataInfos).then((res) => {
-        this.$methodsTools.cacheBusinessList(this.newSujectApis);
-        this.$message.success("新增成功");
-        setTimeout(() => {
-          this.$store.dispatch("tagsView/exitView", this.$route).then((res) => {
-            this.$router.push({
-              path: "handoutList",
+      if (this.fileList.length) {
+        const hasSort = this.fileList.every((item) => {
+          return item.sort >= 0 && item.urlName.length > 0;
+        });
+        if (hasSort) {
+          let array = [];
+          let stop = false; //控制上下文执行
+          for (let i = 0; i < this.fileList.length; i++) {
+            array.push(
+              new Promise((resolve, reject) => {
+                this.$upload
+                  .upload(this.fileList[i].file, 6)
+                  .then((res) => {
+                    this.$set(this.fileList[i], "url", res);
+                    resolve();
+                  })
+                  .catch((err) => {
+                    this.$message.error(`第${i}个文件上传失败`);
+                    reject();
+                  });
+              })
+            );
+          }
+          await Promise.all(array)
+            .then(() => {
+              stop = false;
+              console.log("成功");
+            })
+            .catch(() => {
+              stop = true;
+              console.log("失败");
             });
-          });
-        }, 500);
-      }).catch(()=>{
-          this.disabledBtn = false
+          if (stop) {
+            return;
+          }
+        } else {
+          this.$message.warning("排序与文件名不允许为空");
+          return;
+        }
+      }
+      dataInfos["fileList"] = this.fileList;
+      this.disabledBtn = true;
+      this.$api
+        .addCourseHandouts(dataInfos)
+        .then((res) => {
+          this.$methodsTools.cacheBusinessList(this.newSujectApis);
+          this.$message.success("新增成功");
+          setTimeout(() => {
+            this.$store
+              .dispatch("tagsView/exitView", this.$route)
+              .then((res) => {
+                this.$router.push({
+                  path: "handoutList",
+                });
+              });
+          }, 500);
         })
+        .catch(() => {
+          this.disabledBtn = false;
+        });
     },
     backPage() {
       this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
@@ -481,7 +534,7 @@ export default {
       var self = this;
       var file = self.$refs.file.files[0];
       if (file === undefined) {
-        self.$set(self.listData, "handoutsUrl", "");
+        // self.$set(self.listData, "handoutsUrl", "");
         return;
       }
       if (file.size > 100 * 1024 * 1024) {
@@ -495,9 +548,34 @@ export default {
         return;
       }
       const imgURL = window.URL.createObjectURL(file);
-      self.blob = imgURL;
-      self.listData.handoutsUrl = file;
-      self.listData.urlName = file.name;
+      self.fileList.push({
+        blob: imgURL,
+        url: "",
+        file: file,
+        status: 1,
+        urlName: file.name,
+        sort: self.backNowMathMax(),
+      });
+    },
+    //返回当前数组sort最大值+1,用于自动sort排序
+    backNowMathMax() {
+      if (this.fileList.length) {
+        let list = this.fileList.map((item) => Number(item.sort));
+        return Math.max(...list) + 1;
+      } else {
+        return 1;
+      }
+    },
+
+    //排序
+    sortList() {
+      this.fileList = this.fileList.sort((a, b) => {
+        if (a.sort >= 0 && b.sort >= 0) {
+          return a.sort - b.sort;
+        } else {
+          this.$message.warning("请完善排序号码");
+        }
+      }); //升序
     },
   },
 };
@@ -539,27 +617,26 @@ export default {
   align-items: center;
   flex-wrap: wrap;
 }
-.imgBoxins {
-  width: 375px;
-  // height: 220px;
-  text-align: center;
-  img {
-    height: 100%;
-    width: 60px;
-    cursor: pointer;
-    transition: all 0.3s;
-    &:hover {
-      transform: scale(1.05);
+.handoutList {
+  & > ul {
+    max-height: 500px;
+    overflow: auto;
+    & > li {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #666;
+      margin-bottom: 6px;
+      img {
+        height: 50px;
+        width: 40px;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin-right: 10px;
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
     }
   }
-  .dis_stsy {
-    display: flex;
-    align-items: flex-end;
-  }
-}
-.iconStsz {
-  font-size: 40px;
-  color: #67c23a;
-  cursor: pointer;
 }
 </style>

src/views/resource/handoutManagement/handoutList/edit/index.vue

@@ -107,38 +107,54 @@
           <el-input v-model="listData.handoutsName"></el-input>
         </el-form-item>
         <el-form-item label="讲义文件">
-          <div class="imgBoxins">
-            <div v-if="handoutsUrlLive" class="dis_stsy">
-              <a
-                :href="
-                  blob ? blob : $methodsTools.splitImgHost(listData.handoutsUrl)
-                "
-                target="_blank"
-              >
-                <img src="@/assets/images/pdf@3x.png" alt="" />
-              </a>
-              <p>{{ listData.urlName }}</p>
-              <el-button
-                type="danger"
-                size="mini"
-                class="margin-top: 20px;"
-                @click="clearImgs"
-                >删除</el-button
-              >
-            </div>
-            <div class="posimg" v-else>
-              <label for="uplose">
-                <i class="el-icon-circle-plus-outline iconStsz"></i
-              ></label>
-              <input
-                ref="file"
-                type="file"
-                style="display: none"
-                id="uplose"
-                @change="getImgFile"
-              />
-              <p>注：只能上传PDF文件，且不超过100MB</p>
-            </div>
+          <div class="handoutList">
+            <label for="uplose"><span style="color: blue">添加pdf</span></label>
+            <input
+              ref="file"
+              type="file"
+              style="display: none"
+              id="uplose"
+              @change="getImgFile"
+            />
+            <span style="margin-left: 10px"
+              >注：只能上传PDF文件，且不超过100MB</span
+            ><el-button
+              v-if="fileList.length > 1"
+              style="margin-left: 10px"
+              size="mini"
+              @click="sortList"
+              type="success"
+              >排序</el-button
+            >
+            <ul>
+              <li v-for="(item, index) in fileList" :key="index">
+                <el-input-number
+                  style="width: 40px; margin-right: 10px"
+                  size="mini"
+                  :precision="0"
+                  v-model="item.sort"
+                  :min="0"
+                  label="排序"
+                  :controls="false"
+                ></el-input-number>
+                <a
+                  :href="
+                    item.blob ? item.blob : $methodsTools.splitImgHost(item.url)
+                  "
+                  target="_blank"
+                >
+                  <img src="@/assets/images/pdf@3x.png" alt="" />
+                </a>
+                <input v-model="item.urlName" />
+                <el-button
+                  type="danger"
+                  size="mini"
+                  style="margin-left: 10px"
+                  @click="fileList.splice(index, 1)"
+                  >删除</el-button
+                >
+              </li>
+            </ul>
           </div>
         </el-form-item>
         <el-form-item label="是否可下载" prop="canDownload">
@@ -172,11 +188,10 @@ export default {
   name: "HandoutListEdit",
   data() {
     return {
+      fileList: [],
       disabledBtn: false,
       isIndeterminate: false,
       checkAll: false,
-      blob: "", //pdf本地路径
-      handoutsUrlLive: false, //是否存在PDF
       changeHeight: true,
       //   弹窗数据
       listData: {
@@ -216,15 +231,6 @@ export default {
         this.changeTypes();
       },
     },
-    "listData.handoutsUrl": {
-      handler(newValue, oldValue) {
-        if (newValue) {
-          this.handoutsUrlLive = true;
-        } else {
-          this.handoutsUrlLive = false;
-        }
-      },
-    },
   },
   async mounted() {
     this.$modal.loading("正在导入数据，请稍后...");
@@ -275,7 +281,7 @@ export default {
       this.$api
         .obtainCourseHandouts(this.$route.query.id)
         .then((res) => {
-          this.bfImg = res.data.handoutsUrl;
+          this.fileList = res.data.fileList || [];
           this.listData = res.data;
           if (res.data.courseHandoutsBusinessVo) {
             var arrays = [];
@@ -289,10 +295,6 @@ export default {
           this.$modal.closeLoading();
         });
     },
-    clearImgs() {
-      this.listData.handoutsUrl = undefined;
-      this.listData.urlName = undefined;
-    },
     changeTypes() {
       var self = this;
       var arrays = [];
@@ -451,19 +453,49 @@ export default {
         status: this.listData.status,
         canDownload: this.listData.canDownload,
       };
-      if (this.listData.handoutsUrl !== this.bfImg) {
-        if (this.listData.handoutsUrl) {
-          const urls = await this.$upload.upload(this.listData.handoutsUrl, 6);
-          dataInfos.handoutsUrl = urls;
-          dataInfos.urlName = this.listData.urlName;
+      if (this.fileList.length) {
+        const hasSort = this.fileList.every((item) => {
+          return item.sort >= 0 && item.urlName.length > 0;
+        });
+        if (hasSort) {
+          let array = [];
+          let stop = false; //控制上下文执行
+          for (let i = 0; i < this.fileList.length; i++) {
+            if (this.fileList[i].blob) {
+              array.push(
+                new Promise((resolve, reject) => {
+                  this.$upload
+                    .upload(this.fileList[i].file, 6)
+                    .then((res) => {
+                      this.$set(this.fileList[i], "url", res);
+                      resolve();
+                    })
+                    .catch((err) => {
+                      this.$message.error(`第${i}个文件上传失败`);
+                      reject();
+                    });
+                })
+              );
+            }
+          }
+          await Promise.all(array)
+            .then(() => {
+              stop = false;
+              console.log("成功");
+            })
+            .catch(() => {
+              stop = true;
+              console.log("失败");
+            });
+          if (stop) {
+            return;
+          }
         } else {
-          dataInfos.handoutsUrl = "";
-          dataInfos.urlName = "";
+          this.$message.warning("排序与文件名不允许为空");
+          return;
         }
-      } else {
-        dataInfos.handoutsUrl = this.bfImg;
-        dataInfos.urlName = this.listData.urlName;
       }
+      dataInfos["fileList"] = this.fileList;
       this.disabledBtn = true;
       this.$api
         .editCourseHandouts(dataInfos)
@@ -497,7 +529,7 @@ export default {
       var self = this;
       var file = self.$refs.file.files[0];
       if (file === undefined) {
-        self.$set(self.listData, "handoutsUrl", "");
+        // self.$set(self.listData, "handoutsUrl", "");
         return;
       }
       if (file.size > 100 * 1024 * 1024) {
@@ -511,9 +543,34 @@ export default {
         return;
       }
       const imgURL = window.URL.createObjectURL(file);
-      self.blob = imgURL;
-      self.listData.handoutsUrl = file;
-      self.listData.urlName = file.name;
+      self.fileList.push({
+        blob: imgURL,
+        url: "",
+        file: file,
+        status: 1,
+        urlName: file.name,
+        sort: self.backNowMathMax(),
+      });
+    },
+
+    //返回当前数组sort最大值+1,用于自动sort排序
+    backNowMathMax() {
+      if (this.fileList.length) {
+        let list = this.fileList.map((item) => Number(item.sort));
+        return Math.max(...list) + 1;
+      } else {
+        return 1;
+      }
+    },
+    //排序
+    sortList() {
+      this.fileList = this.fileList.sort((a, b) => {
+        if (a.sort >= 0 && b.sort >= 0) {
+          return a.sort - b.sort;
+        } else {
+          this.$message.warning("请完善排序号码");
+        }
+      }); //升序
     },
   },
 };
@@ -555,26 +612,26 @@ export default {
   align-items: center;
   flex-wrap: wrap;
 }
-.imgBoxins {
-  width: 375px;
-  text-align: center;
-  img {
-    height: 100%;
-    width: 60px;
-    cursor: pointer;
-    transition: all 0.3s;
-    &:hover {
-      transform: scale(1.05);
+.handoutList {
+  & > ul {
+    max-height: 500px;
+    overflow: auto;
+    & > li {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #666;
+      margin-bottom: 6px;
+      img {
+        height: 50px;
+        width: 40px;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin-right: 10px;
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
     }
   }
-  .dis_stsy {
-    display: flex;
-    align-items: flex-end;
-  }
-}
-.iconStsz {
-  font-size: 40px;
-  color: #67c23a;
-  cursor: pointer;
 }
 </style>