经办人变更修改

front-vue/src/views/system/user/index.vue

@@ -158,9 +158,9 @@
         </div>
     </el-dialog>
     <!-- 申请变更经办人-->
-    <el-dialog :title="titles" :visible.sync="imgs" width="700px" append-to-body>
+    <el-dialog :title="titles" :visible.sync="imgs" width="800px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="安心签开户及管理授权书(模板)">
+            <el-form-item label="安心签开户及管理授权书(模板)" ><!-- style="display: inline-block;width: 50%;" -->
                 <el-upload ref="upload" class="upload-demo" :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }" action="" accept=".jpg, .jpeg, .png" :http-request="sfzRequest" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="beforeRemove" :on-change="dealImgChange" multiple :limit="1" :on-exceed="handleExceed" list-type="picture-card" :file-list="sfzList" :auto-upload="true">
                     <el-button slot="trigger" size="small" type="primary">点击选择</el-button>
                     <div class="el-upload__tip" slot="tip">
@@ -169,7 +169,7 @@
                     </div>
                 </el-upload>
             </el-form-item>
-            <el-form-item label="安心签用户信息变更申请表">
+            <el-form-item label="安心签用户信息变更申请表" ><!-- style="display: inline-block;" -->
                 <el-upload ref="upload" class="upload-demo" :class="{ uoloadAxq: showsBtnImg, disUoloadAxq: nonesBtnImg }" action="" accept=".jpg, .jpeg, .png" :http-request="sqsRequest" :on-preview="sqsPictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="sqsRemove" :on-change="dealImgChange" multiple :limit="1" :on-exceed="sqsExceed" list-type="picture-card" :file-list="sqsList" :auto-upload="true">
                     <el-button slot="trigger" size="small" type="primary">点击选择</el-button>
                     <div class="el-upload__tip" slot="tip">
@@ -178,6 +178,77 @@
                     </div>
                 </el-upload>
             </el-form-item>
+            <el-row>
+                  <el-col>身份证号:</el-col>
+                    <el-input
+                      v-model="form.card"
+                      placeholder="请输入身份证号"
+                      maxlength="20"
+                    ></el-input>
+            </el-row>
+            <el-form-item>
+            <el-row class="zap-idcard zap-margin">
+            <div class="zap-certification-title">
+              <div class="zap-certification-title__wrap">
+                <span class="main-title">账号管理员身份证件</span>
+                <span class="sub-title">(请按照要求上传经办人身份证证件图片)</span>
+                <div class="warning"><i class="el-icon-warning-outline"></i>请核对系统识别结果是否正确</div>
+              </div>
+            </div>
+            <el-row>
+              <el-col :span="12" class="zap-idcard__wrap">
+                <el-upload
+                  ref="jsfzzload"
+                  class="zap-idcard__upload"
+                  action=""
+                  :class="{
+                    uoloadjsfzz: showBtnImg,
+                    jsfzzUoloadSty: jsfzzBtnImg,
+                  }"
+                  :on-change="jsfzzImgChange"
+                  accept=".jpg, .jpeg, .png"
+                  :http-request="jsfzzRequest"
+                  :on-preview="jsfzzPictureCardPreview"
+                  :on-remove="jsfzzRemove"
+                  :before-upload="checkUpload"
+                  multiple
+                  :limit="1"
+                  :on-exceed="jsfzzExceed"
+                  list-type="picture-card"
+                  :file-list="jsfzzList"
+                  :auto-upload="true"
+                >
+                  <img slot="trigger" src="../../../assets/images/certification/idcard_obverse.png" alt="">
+                </el-upload>
+              </el-col>
+              <el-col :span="12" class="zap-idcard__wrap">
+                <el-upload
+                  ref="jsfzfload"
+                  class="zap-idcard__upload"
+                  action=""
+                  :class="{
+                    uoloadjsfzf: showBtnImg,
+                    jsfzfUoloadSty: jsfzfBtnImg,
+                  }"
+                  :on-change="jsfzfImgChange"
+                  accept=".jpg, .jpeg, .png"
+                  :http-request="jsfzfRequest"
+                  :on-preview="jsfzfPictureCardPreview"
+                  :on-remove="jsfzfRemove"
+                  :before-upload="checkUpload"
+                  multiple
+                  :limit="1"
+                  :on-exceed="jsfzfExceed"
+                  list-type="picture-card"
+                  :file-list="jsfzfList"
+                  :auto-upload="true"
+                >
+                  <img slot="trigger" src="../../../assets/images/certification/idcard_reverse.png" alt="">
+                </el-upload>
+              </el-col>
+            </el-row>
+          </el-row>
+         </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitImg">确 定</el-button>
@@ -264,7 +335,8 @@ import {
 } from "@/api/common/columnSetting";
 import ColumnSetting from "../../../components/Table/columnSetting.vue";
 import Cookies from "js-cookie";
-import SearchBar from '@/components/SearchBar/index.vue'
+import SearchBar from '@/components/SearchBar/index.vue';
+import {getCard} from "@/api/system/authentication";
 
 export default {
     name: "User",
@@ -345,6 +417,11 @@ export default {
             companyList: [],
             // 表单参数
             form: {},
+            jsfzzBtnImg:false,
+            jsfzfBtnImg:false,
+            showBtnImg:false,
+            jsfzzList : [],
+            jsfzfList : [],
             //筛选按钮的数据列表，与table表头的数据一致 --显示隐藏列用
             tableList: [{
                     label: "userId",
@@ -525,6 +602,122 @@ export default {
         this.columnQuery();
     },
     methods: {
+        jsfzzImgChange(file, jsfzzList) {
+            this.jsfzzBtnImg = jsfzzList.length >= this.limitCountImg;
+        },
+        jsfzzRemove(file, jsfzzList) {
+            for (let i = 0; i < this.jsfzzList.length; i++) {
+                if (file.uid == thisjsfzzList[i].uid) {
+                this.jsfzzList.splice(i, 1);
+                break;
+                }
+            }
+            this.jsfzzBtnImg = jsfzzList.length >= this.limitCountImg;
+        },
+        jsfzzExceed(file, jsfzzList) {
+            this.$message.warning(`当前限制选择 1 个文件`);
+        },
+        jsfzfRemove(file, jsfzfList) {
+            for (let i = 0; i < this.jsfzfList.length; i++) {
+                if (file.uid == this.jsfzfList[i].uid) {
+                this.jsfzfList.splice(i, 1);
+                break;
+                }
+            }
+            this.jsfzfBtnImg = jsfzfList.length >= this.limitCountImg;
+        },
+        jsfzfExceed(file, jsfzfList) {
+            this.$message.warning(`当前限制选择 1 个文件`);
+        },
+        jsfzzPictureCardPreview(file) {
+            this.jsfzzImageUrl = file.url;
+            this.jsfzzVisible = true;
+        },
+        jsfzfPictureCardPreview(file) {
+            this.jsfzfImageUrl = file.url;
+            this.jsffzVisible = true;
+        },
+        jsfzfImgChange(file, jsfzfList) {
+            this.jsfzfBtnImg = jsfzfList.length >= this.limitCountImg;
+        },
+        //经办人身份证正面
+        jsfzzRequest(param) {
+            let fileObj = param.file; // 相当于input里取得的files
+            let fd = new FormData(); // FormData 对象
+            fd.append("file", fileObj); // 文件对象
+            fd.append("fileType", "01"); 
+            const loading = this.$loading({
+                lock: true,
+                text: "Loading",
+                spinner: "el-icon-loading",
+                background: "rgba(0, 0, 0, 0.7)",
+            });
+            getCard(fd)
+                .then((response) => {
+                if (response) {
+                    this.$set(this.form, "card", response.data.handlerCard);
+                    this.$set(this.form, "jsfzzList", response.data.jsfzzList);
+                    setTimeout(() => {
+                        loading.close();
+                    }, 2000);
+                }
+                })
+                .catch((response) => {
+                    let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
+                    let idx = this.$refs.jsfzzload.uploadFiles.findIndex(
+                        (item) => item.uid === uid
+                    ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
+                    this.$refs.jsfzzload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
+                    this.jsfzzBtnImg = this.jsfzzList.length >= this.limitCountImg;
+                    loading.close();
+                });
+        },
+        //经办人身份证反面
+        jsfzfRequest(param) {
+            let fileObj = param.file; // 相当于input里取得的files
+            let fd = new FormData(); // FormData 对象
+            fd.append("file", fileObj); // 文件对象
+            fd.append("fileType", "03");
+            const loading = this.$loading({
+                lock: true,
+                text: "Loading",
+                spinner: "el-icon-loading",
+                background: "rgba(0, 0, 0, 0.7)",
+            });
+            getCard(fd)
+                .then((response) => {
+                if (response) {
+                        this.$set(this.form, "jsfzfList", response.data.jsfzfList);
+                    setTimeout(() => {
+                        loading.close();
+                    }, 2000);
+                }
+                })
+                .catch((response) => {
+                let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
+                let idx = this.$refs.jsfzfload.uploadFiles.findIndex(
+                    (item) => item.uid === uid
+                ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
+                this.$refs.jsfzfload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
+                this.jsfzfBtnImg = this.jsfzfList.length >= this.limitCountImg;
+                loading.close();
+                });
+            },
+            //上传前校验
+            checkUpload(file) {
+                const isJPG =
+                    file.type === "image/jpeg" ||
+                    file.type === "image/png";
+                const isLt2M = file.size / 1024 / 1024 < 3;
+
+                if (!isJPG) {
+                    this.$message.error("上传图片只能是 JPG/PNG/ 格式");
+                }
+                if (!isLt2M) {
+                    this.$message.error("上传图片大小不能超过 3MB");
+                }
+                return isJPG && isLt2M;
+            },
         //获取当前客户是否之前设置过列展示隐藏
         columnQuery() {
             //获取页面路径
@@ -697,6 +890,8 @@ export default {
                 postIds: [],
                 roleIds: [],
                 nameList: [],
+                jsfzzList :[],
+                jsfzfList :[]
             };
             this.resetForm("form");
         },
@@ -965,6 +1160,28 @@ export default {
         },
         /** 申请变更经办人 */
         submitImg() {
+            //身份证号
+            if(!this.form.card){
+                 this.$message({
+                    message: "身份证号不能为空",
+                    type: 'warning'
+                });
+                return false;
+            }
+            if(!this.form.jsfzzList){
+                 this.$message({
+                    message: "请上传身份证人像面",
+                    type: 'warning'
+                });
+                return false;
+            }
+            if(!this.form.jsfzfList){
+                 this.$message({
+                    message: "请上传身份证国徽面",
+                    type: 'warning'
+                });
+                return false;
+            }
             this.form.sfzList = this.sfzList;
             this.form.sqsList = this.sqsList;
             const loading = this.$loading({
@@ -973,7 +1190,7 @@ export default {
                 spinner: "el-icon-loading",
                 background: "rgba(0, 0, 0, 0.7)",
             });
-            handlerChange(this.form)
+             handlerChange(this.form)
                 .then((response) => {
                     loading.close();
                     this.msgSuccess("申请成功");
@@ -1198,4 +1415,11 @@ export default {
     padding: 20px;
     margin-right: 20px;
 }
+.jsfzfUoloadSty .el-upload--picture-card {
+  display: none;
+}
+.jsfzzUoloadSty .el-upload--picture-card {
+  display: none;
+}
+
 </style>