pref:修改工作人员照片上传

base-manager-ui/admin/src/pages/basicset/deploy/deploy.vue

@@ -522,7 +522,8 @@ export default {
 /deep/.ant-card {
   width: 100% !important;
 }
-.svg-box {
+.svg-box,
+/deep/.ant-upload-list-item-thumbnail {
   background-color: #54788c;
 }
 /deep/.ant-modal-content {

base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue

@@ -653,11 +653,11 @@ export default {
       if (!isJpgOrPng) {
         this.$message.error("请上传jpeg或者png图片!");
       }
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isLt2M) {
-        this.$message.error("图片大小不能超过2MB!");
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error("图片大小不能超过10MB!");
       }
-      return isJpgOrPng && isLt2M;
+      return isJpgOrPng && isLt10M;
     },
     // 上传图片
     handleChange({ fileList }) {

base-manager-ui/admin/src/pages/basicset/workman/components/EditPersonel.vue

@@ -194,6 +194,24 @@
           >
             <div class="person_image">
               <a-upload
+                name="file"
+                list-type="picture-card"
+                class="avatar-uploader"
+                :file-list="fileList"
+                :before-upload="beforeUpload"
+                :action="api + 'base/file/commonupload'"
+                :accept="accept"
+                @change="handleChange"
+                @preview="handlePreview"
+              >
+                <div v-if="fileList.length < 1">
+                  <a-icon type="plus" />
+                  <div class="ant-upload-text">
+                    添加照片
+                  </div>
+                </div>
+              </a-upload>
+              <!-- <a-upload
                 name="file"
                 list-type="picture-card"
                 class="avatar-uploader"
@@ -213,7 +231,7 @@
                   <a-icon :type="loading ? 'loading' : 'plus'" />
                   <div class="ant-upload-text">添加照片</div>
                 </div>
-              </a-upload>
+              </a-upload> -->
               <span
                 >请上传jpg、png、jpeg格式图片 <br />
                 建议尺寸：250px*350px</span
@@ -312,12 +330,18 @@
       <a-button @click="handleReset">重置</a-button>
       <a-button type="primary" @click="hideModal">确定</a-button>
     </div>
+    <!-- 预览 -->
+    <PrevieModal
+      :previewData="previewData"
+      :previewVisible.sync="previewVisible"
+    ></PrevieModal>
   </a-modal>
 </template>
 
 <script>
 import { getWindowList, saveWorkman } from "@/services/dept";
 import { modelList } from "@/services/basicsetFun";
+import PrevieModal from "@/components/PrevieModal.vue";
 // import { changePhone, changeLandline } from "@/utils/validate";
 export default {
   props: {
@@ -346,6 +370,9 @@ export default {
       },
     },
   },
+  components: {
+    PrevieModal,
+  },
   data() {
     const checkIdCard = (rule, value, callback) => {
       if (!value) {
@@ -363,6 +390,9 @@ export default {
     return {
       api: process.env.VUE_APP_API_BASE_URL + "/",
       accept: "image/jpeg,image/png", // 上传类型
+      previewData: {}, // 预览
+      previewVisible: false,
+      fileList: [],
       loading: false,
       imageUrl: "",
       labelCol: { span: 5 },
@@ -485,6 +515,17 @@ export default {
       this.form = { ...data };
       this.form.loginName && this.$delete(this.form, "loginName");
       this.form.loginPwd && this.$delete(this.form, "loginPwd");
+      if (this.form.photoPath) {
+        this.fileList = [
+          {
+            uid: -1,
+            status: "done",
+            name: this.form.photoPath,
+            url: this.api + this.form.photoPath,
+            url2: this.form.photoPath,
+          },
+        ];
+      }
       // this.editWindow(data.deptId);
     },
     // 关闭对话框
@@ -498,13 +539,29 @@ export default {
       this.$refs.formData.resetFields();
     },
     // 照片上传
-    handleChange({ file }) {
-      this.loading = true;
-      if (file.status == "done") {
-        this.form.photoPath = file.response.url;
-        this.loading = false;
+    handleChange({ fileList }) {
+      this.fileList = [...fileList].slice(-1);
+      this.fileList = this.fileList.map((v) => {
+        if (v.response) {
+          v.url2 = v.response.url;
+          v.url = this.api + v.response.url;
+        }
+        return v;
+      });
+      if (this.fileList[0]) {
+        this.form.photoPath = this.fileList[0].url2;
+      } else {
+        this.form.photoPath = "";
       }
     },
+    // 预览
+    handlePreview(info) {
+      this.previewData = {
+        type: "img",
+        url: info.url,
+      };
+      this.previewVisible = true;
+    },
     // 照片大小格式限制
     beforeUpload(file) {
       const isJpgOrPng =
@@ -524,10 +581,17 @@ export default {
 
 <style lang="less" scoped>
 /deep/.ant-upload,
-.avatar-uploader {
+/deep/.avatar-uploader {
   width: 120px;
   height: 170px;
   margin-right: 20px;
+  .ant-upload-list-item {
+    width: 120px;
+    height: 170px;
+  }
+  .ant-upload-list-item-thumbnail {
+    object-fit: cover;
+  }
 }
 .person_image {
   display: flex;
@@ -598,4 +662,4 @@ export default {
 /deep/.ant-col-2 {
   width: 8.33333333% !important;
 }
-</style>
+</style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/workman/components/addpersonnel.vue

@@ -203,14 +203,20 @@
                 name="file"
                 list-type="picture-card"
                 class="avatar-uploader"
-                :show-upload-list="false"
+                :file-list="fileList"
                 :before-upload="beforeUpload"
                 :action="api + 'base/file/commonupload'"
                 :accept="accept"
                 @change="handleChange"
-                :remove="handleRemove"
+                @preview="handlePreview"
               >
-                <img
+                <div v-if="fileList.length < 1">
+                  <a-icon type="plus" />
+                  <div class="ant-upload-text">
+                    添加照片
+                  </div>
+                </div>
+                <!-- <img
                   v-if="form.photoPath"
                   class="avatar"
                   :src="api + form.photoPath"
@@ -219,7 +225,7 @@
                 <div v-else>
                   <a-icon :type="loading ? 'loading' : 'plus'" />
                   <div class="ant-upload-text">添加照片</div>
-                </div>
+                </div> -->
               </a-upload>
               <span
                 >请上传jpg、png、jpeg格式图片 <br />
@@ -362,6 +368,11 @@
       <a-button @click="handleReset">重置</a-button>
       <a-button type="primary" @click="hideModal">确定</a-button>
     </div>
+    <!-- 预览 -->
+    <PrevieModal
+      :previewData="previewData"
+      :previewVisible.sync="previewVisible"
+    ></PrevieModal>
   </a-modal>
 </template>
 
@@ -369,6 +380,7 @@
 import { changeAccount, changePassWord } from "@/utils/validate";
 import { getWindowList, saveWorkman } from "@/services/dept";
 import { modelList } from "@/services/basicsetFun";
+import PrevieModal from "@/components/PrevieModal.vue";
 // import { changePhone, changeLandline } from "@/utils/validate";
 import local from "@/utils/local";
 export default {
@@ -398,6 +410,9 @@ export default {
       },
     },
   },
+  components: {
+    PrevieModal,
+  },
   data() {
     const checkIdCard = (rule, value, callback) => {
       if (!value) {
@@ -415,6 +430,9 @@ export default {
     return {
       api: process.env.VUE_APP_API_BASE_URL + "/",
       accept: "image/jpeg,image/png", // 上传类型
+      previewData: {}, // 预览
+      previewVisible: false,
+      fileList: [],
       loading: false,
       imageUrl: "",
       labelCol: { span: 5 },
@@ -551,6 +569,17 @@ export default {
     onEdit(data) {
       this.form = { ...data };
       this.editWindow(data.deptId);
+      if (this.form.photoPath) {
+        this.fileList = [
+          {
+            uid: -1,
+            status: "done",
+            name: this.form.photoPath,
+            url: this.api + this.form.photoPath,
+            url2: this.form.photoPath,
+          },
+        ];
+      }
     },
     // 关闭对话框
     handleClose() {
@@ -558,26 +587,31 @@ export default {
       this.loading = false;
       this.Visible = false;
     },
+
     // 照片上传
-    handleChange({ file }) {
-      this.loading = true;
-      if (file.status == "done") {
-        this.form.photoPath = file.response.url;
-        this.loading = false;
+    handleChange({ fileList }) {
+      this.fileList = [...fileList].slice(-1);
+      this.fileList = this.fileList.map((v) => {
+        if (v.response) {
+          v.url2 = v.response.url;
+          v.url = this.api + v.response.url;
+        }
+        return v;
+      });
+      if (this.fileList[0]) {
+        this.form.photoPath = this.fileList[0].url2;
+      } else {
+        this.form.photoPath = "";
       }
     },
-    handleRemove() {},
-    // async uploadImg(info) {
-    //   this.loading = true;
-    //   const formData = new FormData();
-    //   formData.append("file", info.file);
-    //   let res = await uploadFile(formData);
-    //   let { code, url } = res.data;
-    //   if (code === 1) {
-    //     this.form.photoPath = url;
-    //     this.loading = false;
-    //   }
-    // },
+    // 预览
+    handlePreview(info) {
+      this.previewData = {
+        type: "img",
+        url: info.url,
+      };
+      this.previewVisible = true;
+    },
     // 照片大小格式限制
     beforeUpload(file) {
       const isJpgOrPng =
@@ -597,11 +631,19 @@ export default {
 
 <style lang="less" scoped>
 /deep/.ant-upload,
-.avatar-uploader {
+/deep/.avatar-uploader {
   width: 120px;
   height: 170px;
   margin-right: 20px;
+  .ant-upload-list-item {
+    width: 120px;
+    height: 170px;
+  }
+  .ant-upload-list-item-thumbnail {
+    object-fit: cover;
+  }
 }
+
 .person_image {
   display: flex;
   align-items: center;
@@ -609,11 +651,11 @@ export default {
     color: #ccc;
   }
 }
-.avatar {
-  width: 120px;
-  height: 170px;
+.avatar,
+/deep/.ant-upload-list-item-thumbnail {
   object-fit: cover;
 }
+
 /deep/.ant-form-item {
   margin-bottom: 15px;
 }
@@ -671,4 +713,4 @@ export default {
 /deep/.ant-col-2 {
   width: 8.33333333% !important;
 }
-</style>
+</style>
\ No newline at end of file