增加展览和文物新增和编辑时的交互反馈；修复文物列表点击大图失效问题；新增用户的部门为必填项

src/components/Uploader/ManualUploader.vue

 
 <template>
-  <div class="images-list">
+  <div class="images-list" >
     <el-upload
       action="#"
       :on-remove="handleRemove"
@@ -13,6 +13,7 @@
       :accept="fileAccept"
       :auto-upload="false"
       ref="ManualUploader"
+      :class="{ disabled: uploadDisabled }"
     >
       <i
         v-if="listType === 'picture-card'"
@@ -22,6 +23,7 @@
       <el-button v-else size="small" type="primary">点击上传</el-button>
 
       <div v-if="showTip" slot="tip" class="el-upload__tip">
+        <div v-if="advice" style="color: #f56c6c">建议：{{ advice }}</div>
         提示：只能上传{{ fileTypeName || "jpg/png" }}文件，且不超过
         {{ fileSize }}MB，最多上传{{ fileLimit }}个文件
       </div>
@@ -65,6 +67,10 @@ export default {
       type: Number,
       default: 99,
     },
+    //建议
+    advice: {
+      type: String,
+    },
   },
   data() {
     return {
@@ -74,7 +80,20 @@ export default {
   watch: {
     files: {
       handler: function (val) {
-        this.fileList = JSON.parse(JSON.stringify(val));
+        // this.fileList = JSON.parse(JSON.stringify(val));
+        // 将回填的字段从url-->pressUrl
+        if (val.length > 0) {
+          this.fileList = val.map((item) => {
+            return {
+              highImg: item.url,
+              lowImg: item.pressUrl,
+              url: item.pressUrl,
+              // pressUrl:item.pressUrl,
+              name: item.name,
+              fileId: item.fileId,
+            };
+          });
+        }
       },
       immediate: true,
       deep: true,
@@ -88,6 +107,9 @@ export default {
       immediate: true,
       deep: true,
     },
+    advice(value) {
+      console.log(value);
+    },
   },
   computed: {
     // 是否显示提示
@@ -108,10 +130,36 @@ export default {
       });
       return fileAccept;
     },
+    uploadDisabled() {
+      return this.fileList.length == this.fileLimit;
+    },
   },
   methods: {
     getFiles() {
-      return this.fileList;
+      if (
+        this.fileType == "jpg" ||
+        this.fileType == "png" ||
+        this.fileType == "jpeg"
+      ) {
+        let newFileList = this.fileList.map((item) => {
+          // return {
+          //   // highImg: item.url,
+          //   // lowImg: item.pressUrl,
+          //   url: item.highImg,
+          //   pressUrl: item.lowImg,
+          //   name: item.name,
+          //   fileId: item.fileId,
+          // };
+          item.url = item.highImg;
+          item.pressUrl = item.lowImg;
+          item.name = item.name;
+          item.fileId = item.fileId;
+          return item;
+        });
+        return newFileList;
+      } else {
+        return this.fileList;
+      }
     },
     // 上传前校检格式和大小
     handleBeforeUpload(file) {
@@ -161,22 +209,72 @@ export default {
     handleRemove(file, fileList) {
       // debugger
       // console.log("handleRemove", file, fileList);
-      this.fileList.map(async (item, index) => {
+      let that = this;
+      that.fileList.map(async (item, index) => {
         if (item.uid === file.uid) {
-          this.fileList.splice(index, 1);
+          that.fileList.splice(index, 1);
         }
       });
-      this.$emit("input", this.fileList);
+      if (
+        that.fileType == "jpg" ||
+        that.fileType == "png" ||
+        that.fileType == "jpeg"
+      ) {
+        let newFileList = that.fileList.map((item) => {
+          item.url = item.highImg;
+          item.pressUrl = item.lowImg;
+          item.name = item.name;
+          item.fileId = item.fileId;
+          return item;
+          // return {
+          //   // highImg: item.url,
+          //   // lowImg: item.pressUrl,
+          //   url: item.highImg,
+          //   pressUrl: item.lowImg,
+          //   name: item.name,
+          //   fileId: item.fileId,
+          // };
+        });
+        that.$emit("input", newFileList);
+      } else {
+        that.$emit("input", that.fileList);
+      }
     },
 
     handleChange(file, fileList) {
       let that = this;
       // console.log("handleChange", file, fileList);
+      if (fileList.length == this.fileLimit) {
+        this.maxNum = this.fileLimit;
+      }
       if (file.status === "ready") {
         this.handleBeforeUpload(file)
           .then((res) => {
             that.fileList.push(res);
-            that.$emit("input", that.fileList);
+            if (
+              that.fileType == "jpg" ||
+              that.fileType == "png" ||
+              that.fileType == "jpeg"
+            ) {
+              let newFileList = that.fileList.map((item) => {
+                item.url = item.highImg;
+                item.pressUrl = item.lowImg;
+                item.name = item.name;
+                item.fileId = item.fileId;
+                return item;
+                // return {
+                //   // highImg: item.url,
+                //   // lowImg: item.pressUrl,
+                //   url: item.highImg,
+                //   pressUrl: item.lowImg,
+                //   name: item.name,
+                //   fileId: item.fileId,
+                // };
+              });
+              that.$emit("input", newFileList);
+            } else {
+              that.$emit("input", that.fileList);
+            }
           })
           .catch((err) => {
             console.log("err", err);

src/views/culturalRelic/index.vue

@@ -54,7 +54,6 @@
       :data="list.records"
       :tableTitle="tableTitle"
       :operates="tableOperates"
-      :height="tableHeight"
     >
       <template v-slot:status="data">
         <el-popconfirm
@@ -69,9 +68,13 @@
       </template>
       <template v-slot:faceImageUrl="data">
         <img
-          :src="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
+          :src="
+            $getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
+          "
           alt="查看大图"
-          v-if="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
+          v-if="
+            $getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)
+          "
           style="cursor: pointer"
           width="100px"
           @click="handelPreviewImages(data.scope.faceImageUrl)"
@@ -125,6 +128,12 @@
       :visible="importRecordVisible"
       @handleClose="handleImportRecordClose"
     />
+
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
   </div>
 </template>
 
@@ -153,10 +162,11 @@ export default {
     SearchBar,
     ImportRecordDialog,
     UploadListDialog,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
   },
   data() {
     return {
-      tableHeight: 400,
       list: {
         records: [],
         size: 10,
@@ -465,6 +475,7 @@ export default {
     },
     // 预览图片
     handelPreviewImages(images) {
+      // debugger
       this.imgViewerVisible = true;
       this.imgList = [images];
     },

src/views/display/index.vue

@@ -324,7 +324,7 @@ export default {
     // 预览图片
     handelPreviewImages(images) {
       this.imgViewerVisible = true;
-       this.imgList = [images];
+      this.imgList = [images];
     },
 
     handleClosePreviewDialog() {

src/views/user/components/InfoEditDialog.vue

@@ -12,8 +12,12 @@
       <div class="label">{{ title }}</div>
     </div>
     <div class="dialog-content">
-      <el-form :model="dialogForm" class="basic-info">
-        <el-form-item label="账号" :label-width="formLabelWidth">
+      <el-form :model="dialogForm" class="basic-info" :rules="rules" ref="form">
+        <el-form-item
+          label="账号"
+          :label-width="formLabelWidth"
+          prop="username"
+        >
           <el-input
             v-model="dialogForm.username"
             autocomplete="off"
@@ -21,10 +25,15 @@
             clearable
           ></el-input>
         </el-form-item>
-        <el-form-item label="密码" :label-width="formLabelWidth">
+        <el-form-item
+          label="密码"
+          :label-width="formLabelWidth"
+          prop="password"
+        >
           <el-input
             v-model="dialogForm.password"
             autocomplete="off"
+            show-password
             type="password"
             placeholder="请输入密码"
             clearable
@@ -54,13 +63,18 @@
             clearable
           ></el-input>
         </el-form-item>
-        <el-form-item label="所属部门" :label-width="formLabelWidth">
+        <el-form-item
+          label="所属部门"
+          :label-width="formLabelWidth"
+          prop="deptId"
+        >
           <el-cascader
             style="width: 100%"
             v-model="dialogForm.deptId"
             :options="orgTreeData"
             :props="optionProps"
             placeholder="请选择所属部门"
+            clearable
           >
           </el-cascader>
         </el-form-item>
@@ -135,9 +149,6 @@ export default {
       deep: true,
       immediate: true,
     },
-    // orgTreeData(value){
-    //   console.log(1111,value);
-    // }
   },
   data() {
     var validatePass = (rule, value, callback) => {
@@ -165,19 +176,7 @@ export default {
         if (!pattern.test(value)) {
           callback(new Error("账号长度4-20个字符，只能包括字母、数字、下划线"));
         } else {
-          const formData = new FormData();
-          formData.append("userName", value);
-          checkUserName(formData)
-            .then((res) => {
-              if (res.code == "0") {
-                callback();
-              } else {
-                callback(res.msg);
-              }
-            })
-            .catch((err) => {
-              console.error(err);
-            });
+          callback();
         }
       }
     };
@@ -190,20 +189,7 @@ export default {
         if (!pattern.test(value)) {
           callback(new Error("请输入合法手机号/电话号"));
         } else {
-          const formData = new FormData();
-          formData.append("phone", value);
-          checkPhone(formData)
-            .then((res) => {
-              console.log(res);
-              if (res.code == "0") {
-                callback();
-              } else {
-                callback(res.msg);
-              }
-            })
-            .catch((err) => {
-              console.error(err);
-            });
+          callback();
         }
       }
     };
@@ -223,7 +209,7 @@ export default {
         username: [
           { validator: validateUserName, trigger: "blur", required: true },
         ],
-        phone: [{ validator: validatePhone, trigger: "blur", required: true }],
+        // phone: [{ validator: validatePhone, trigger: "blur", required: true }],
         nickName: [
           { required: true, message: "请输入昵称", trigger: "blur" },
           {
@@ -236,6 +222,7 @@ export default {
         password: [
           { validator: validatePass, trigger: "blur", required: true },
         ],
+        deptId: [{ required: true, message: "请输入部门", trigger: "change" }],
       },
     };
   },
@@ -243,41 +230,48 @@ export default {
     // 取消编辑
     cancelForm() {
       this.$emit("handleClose");
-      this.faceImage = [];
+      this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
     },
 
-    async handleSubmit() {
-      let params = JSON.parse(JSON.stringify(this.dialogForm));
-      // 修改状态
-      params.status = this.status ? 1 : 0;
-      // return;
-      // 处理馆藏单位
-      if (params.deptId instanceof Array) {
-        params.deptId = params.deptId[params.deptId.length - 1];
-      }
-      if (params.id) {
-        let res = await upadateUser(params);
-        if (res.code == 0) {
-          this.$message.success("修改成功！");
-          this.reload();
+    handleSubmit() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          let params = JSON.parse(JSON.stringify(this.dialogForm));
+          // 修改状态
+          params.status = this.status ? 1 : 0;
+          // 处理馆藏单位
+          if (params.deptId instanceof Array) {
+            params.deptId = params.deptId[params.deptId.length - 1];
+          }
+          // debugger
+          // return;
+          if (params.id) {
+            let res = await upadateUser(params);
+            if (res.code == 0) {
+              this.$message.success("修改成功！");
+              this.reload();
+            }
+          } else {
+            let res = await addUser(params);
+            if (res.code == 0) {
+              this.$message.success("添加成功！");
+              this.reload();
+            }
+          }
         }
-      } else {
-        let res = await addUser(params);
-        if (res.code == 0) {
-          this.$message.success("添加成功！");
-          this.reload();
-        }
-      }
+      });
     },
     reload() {
       this.$emit("refresh");
       this.$emit("handleClose");
+      this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
     },
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
           this.$emit("handleClose");
+          this.$refs.form.resetFields(); //对表单进行重置且移除校验结果
         })
         .catch((_) => {});
     },