update:企业法人电子印章申请改为必填项

src/components/UnitApply/config.js

@@ -0,0 +1,112 @@
+import regex from "@/services/regex";
+
+const checkSealList = async (rule, sealList) => {
+  if (!sealList || sealList.length == 0) {
+    return Promise.reject("必须上传法人电子印章申请表");
+  }
+  if (sealList.some(s => !s.sealName || !s.sealApplyFileId)) {
+    return Promise.reject("必须填写法人电子印章名称，并上传对应申请表");
+  }
+};
+
+export const rules = {
+  operatorId: [
+    { required: true, message: "请输入18位身份证号码", trigger: "blur" },
+    {
+      pattern: regex.IdCardNo,
+      message: "输入正确的18位身份证号码",
+      trigger: "blur"
+    }
+  ],
+  operatorName: [
+    { required: true, message: "请输入经办人姓名", trigger: "blur" }
+  ],
+  unitName: [{ required: true, message: "请选择企业名称", trigger: "change" }],
+  unitType: [{ required: true, message: "请选择企业类型", trigger: "change" }],
+  operatorPhone: [
+    { required: true, message: "请输入你的手机号码", trigger: "blur" },
+    {
+      pattern: regex.Phone,
+      message: "请输入正确的11位手机号码",
+      trigger: "blur"
+    }
+  ],
+  tydm: [
+    {
+      required: true,
+      message: "请输入企业统一社会信用代码",
+      trigger: "blur"
+    },
+    {
+      pattern: regex.Tydm,
+      message: "请输入正确的18位统一社会信用代码",
+      trigger: "blur"
+    }
+  ],
+  address: [{ required: true, message: "请输入邮寄信息", trigger: "blur" }],
+  code: [
+    {
+      required: true,
+      message: "请选择省市区信息",
+      type: "string",
+      trigger: "blur",
+      transform: v => v && v.join("-")
+    },
+    {
+      pattern: /\d+-\d+-\d+/,
+      message: "信息不完整",
+      trigger: "blur",
+      transform: v => v && v.join("-")
+    }
+  ],
+  loaPicId: [
+    {
+      required: true,
+      message: "请上传授权承诺书照片",
+      trigger: "change",
+      type: "number"
+    }
+  ],
+  idCardFrontPicId: [
+    {
+      required: true,
+      message: "请上传身份证正面照片",
+      trigger: "change",
+      type: "number"
+    }
+  ],
+  idCardBackPicId: [
+    {
+      required: true,
+      message: "请上传身份证背面照片",
+      trigger: "change",
+      type: "number"
+    }
+  ],
+  businessLicensePicId: [
+    {
+      required: true,
+      message: "请上营业执照照片",
+      trigger: "change",
+      type: "number"
+    }
+  ],
+  sealApplyPicId: [
+    {
+      required: true,
+      message: "请上电子印章申请表",
+      trigger: "change",
+      type: "number"
+    }
+  ],
+  phoneCode: [
+    { required: true, message: "请输入短信验证码", trigger: "change" }
+  ],
+  sealApplyList: [
+    {
+      required: true,
+      trigger: "change",
+      validator: checkSealList
+    }
+  ]
+};

src/views/CA/UnitApply.vue

@@ -25,7 +25,7 @@
       </div>
       <a-form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
         <a-row>
-          <a-col :span="11">
+          <a-col :span="12">
             <a-form-item label="企业名称" v-bind="validateInfos.unitName">
               <a-select
                 v-model:value="modelRef.unitName"
@@ -105,24 +105,42 @@
               />
             </a-form-item>
           </a-col>
-          <a-col :span="11">
-            <a-form-item label="授权委托书" v-bind="validateInfos.loaPicId">
-              <input v-model="modelRef.loaPicId" hidden />
-              <a-upload
-                accept="application/pdf"
-                action="/api2/upload/uploadfile"
-                v-model:fileList="loaPicFileList"
-                :beforeUpload="
-                  (file, fileList) => beforeUpload(file, fileList, true)
-                "
-                @change="info => handleChange(info, 'loaPicId')"
-              >
-                <a-button block :disabled="disabledUpload">
-                  <UploadOutlined />
-                  点击{{ modelRef.loaPicId ? "替换" : "上传" }}
-                </a-button>
-              </a-upload>
-            </a-form-item>
+          <a-col :span="12">
+            <div class="relative">
+              <a-form-item label="授权委托书" v-bind="validateInfos.loaPicId">
+                <input v-model="modelRef.loaPicId" hidden />
+                <a-upload
+                  accept="application/pdf"
+                  action="/api2/upload/uploadfile"
+                  v-model:fileList="loaPicFileList"
+                  :beforeUpload="
+                    (file, fileList) => beforeUpload(file, fileList, true)
+                  "
+                  @change="info => handleChange(info, 'loaPicId')"
+                >
+                  <a-button block :disabled="disabledUpload">
+                    <UploadOutlined />
+                    点击{{ modelRef.loaPicId ? "替换" : "上传" }}
+                  </a-button>
+                </a-upload>
+              </a-form-item>
+              <a-form-item class="tip">
+                <a-popover title="说明">
+                  <template #content>
+                    <p>上传的文件pdf大小不得超过2Mb</p>
+                  </template>
+                  <a-button type="link"
+                    ><a
+                      href="http://183.136.157.18:7308/stgl/sources/202102/授权书模板.doc"
+                      download="授权书模板.doc"
+                      target="_blank"
+                      ><DownloadOutlined />模板</a
+                    ></a-button
+                  >
+                </a-popover>
+              </a-form-item>
+            </div>
+
             <a-form-item
               label="身份证正面照"
               v-bind="validateInfos.idCardFrontPicId"
@@ -180,22 +198,51 @@
                 </a-button>
               </a-upload>
             </a-form-item>
-            <a-form-item label="电子印章申请">
-              <a-button type="dashed" style="width: 100%" @click="addSealApply">
-                <PlusOutlined />
-                添加电子印章
-              </a-button>
-            </a-form-item>
+            <div class="relative">
+              <a-form-item
+                label="电子印章申请"
+                v-bind="validateInfos.sealApplyList"
+              >
+                <a-button
+                  type="dashed"
+                  style="width: 100%"
+                  @click="addSealApply"
+                >
+                  <PlusOutlined />
+                  添加电子印章
+                </a-button>
+              </a-form-item>
+              <a-form-item class="tip">
+                <a-button type="link"
+                  ><a
+                    href="http://183.136.157.18:7308/stgl/sources/202102/附件1：法人电子印章启用申请表.docx"
+                    download="法人电子印章启用申请表.docx"
+                    target="_blank"
+                    ><DownloadOutlined />模板</a
+                  ></a-button
+                >
+              </a-form-item>
+            </div>
+
             <template
               v-for="(sealApply, index) in modelRef.sealApplyList"
               :key="index"
             >
-              <a-form-item :wrapper-col="{ span: 15, offset: 9 }">
+              <a-form-item
+                :wrapper-col="{ span: 15, offset: 9 }"
+                class="relative"
+              >
                 <a-input
                   v-model:value="modelRef.sealApplyList[index].sealName"
                   :disabled="disabledFeild"
                   placeholder="印章名称"
                 />
+                <MinusCircleOutlined
+                  v-if="modelRef.sealApplyList.length > 1"
+                  class="dynamic-delete-button"
+                  :disabled="modelRef.sealApplyList.length === 1"
+                  @click="removeApply(sealApply)"
+                />
               </a-form-item>
               <a-form-item :wrapper-col="{ span: 15, offset: 9 }">
                 <input
@@ -223,23 +270,6 @@
               </a-form-item>
             </template>
           </a-col>
-          <a-col :span="2">
-            <a-form-item>
-              <a-popover title="说明">
-                <template #content>
-                  <p>上传的文件pdf大小不得超过2Mb</p>
-                </template>
-                <a-button type="link"
-                  ><a
-                    href="http://183.136.157.18:7308/stgl/sources/202102/授权书模板.doc"
-                    download="授权书模板.doc"
-                    target="_blank"
-                    ><DownloadOutlined />模板</a
-                  ></a-button
-                >
-              </a-popover>
-            </a-form-item>
-          </a-col>
         </a-row>
         <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
           <a-popconfirm
@@ -330,6 +360,23 @@
     font-size: 32px;
     background-color: rgba(255, 255, 255, 0.7);
   }
+  .relative {
+    position: relative;
+  }
+  .tip {
+    position: absolute;
+    right: -5em;
+    top: 0;
+  }
+  .dynamic-delete-button {
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+    right: -75px;
+  }
 }
 </style>
 <script>
@@ -337,14 +384,15 @@ import { message, Modal } from "ant-design-vue";
 import {
   UploadOutlined,
   DownloadOutlined,
-  PlusOutlined
+  PlusOutlined,
+  MinusCircleOutlined
 } from "@ant-design/icons-vue";
 import { useForm } from "@ant-design-vue/use";
 import { computed, onMounted, reactive, ref, toRaw, inject } from "vue";
 import { get, post } from "@/services/http";
-import regex from "@/services/regex";
 import { toBit } from "@/services/util";
 import { useRouter } from "vue-router";
+import { rules } from "@/components/UnitApply/config";
 async function getAreaOptions(code) {
   const res = await get("/api2/CA/AreaOptions", { code });
   if (res.errorCode == 0) {
@@ -362,7 +410,8 @@ export default {
   components: {
     UploadOutlined,
     DownloadOutlined,
-    PlusOutlined
+    PlusOutlined,
+    MinusCircleOutlined
   },
   setup() {
     const modelRef = reactive({
@@ -390,103 +439,7 @@ export default {
     const idCardBackPicFileList = ref([]);
     const businessLicenseFileList = ref([]);
     const sealApplyFileList = ref([]);
-    const rulesRef = reactive({
-      operatorId: [
-        { required: true, message: "请输入18位身份证号码", trigger: "blur" },
-        {
-          pattern: regex.IdCardNo,
-          message: "输入正确的18位身份证号码",
-          trigger: "blur"
-        }
-      ],
-      operatorName: [
-        { required: true, message: "请输入经办人姓名", trigger: "blur" }
-      ],
-      unitName: [
-        { required: true, message: "请选择企业名称", trigger: "change" }
-      ],
-      unitType: [
-        { required: true, message: "请选择企业类型", trigger: "change" }
-      ],
-      operatorPhone: [
-        { required: true, message: "请输入你的手机号码", trigger: "blur" },
-        {
-          pattern: regex.Phone,
-          message: "请输入正确的11位手机号码",
-          trigger: "blur"
-        }
-      ],
-      tydm: [
-        {
-          required: true,
-          message: "请输入企业统一社会信用代码",
-          trigger: "blur"
-        },
-        {
-          pattern: regex.Tydm,
-          message: "请输入正确的18位统一社会信用代码",
-          trigger: "blur"
-        }
-      ],
-      address: [{ required: true, message: "请输入邮寄信息", trigger: "blur" }],
-      code: [
-        {
-          required: true,
-          message: "请选择省市区信息",
-          trigger: "blur",
-          transform: v => v && v.join("-")
-        },
-        {
-          pattern: /\d+-\d+-\d+/,
-          message: "信息不完整",
-          trigger: "blur",
-          transform: v => v && v.join("-")
-        }
-      ],
-      loaPicId: [
-        {
-          required: true,
-          message: "请上传授权承诺书照片",
-          trigger: "change",
-          type: "number"
-        }
-      ],
-      idCardFrontPicId: [
-        {
-          required: true,
-          message: "请上传身份证正面照片",
-          trigger: "change",
-          type: "number"
-        }
-      ],
-      idCardBackPicId: [
-        {
-          required: true,
-          message: "请上传身份证背面照片",
-          trigger: "change",
-          type: "number"
-        }
-      ],
-      businessLicensePicId: [
-        {
-          required: true,
-          message: "请上营业执照照片",
-          trigger: "change",
-          type: "number"
-        }
-      ],
-      sealApplyPicId: [
-        {
-          required: true,
-          message: "请上电子印章申请表",
-          trigger: "change",
-          type: "number"
-        }
-      ],
-      phoneCode: [
-        { required: true, message: "请输入短信验证码", trigger: "change" }
-      ]
-    });
+    const rulesRef = reactive(rules);
     const { resetFields, validate, validateInfos } = useForm(
       modelRef,
       rulesRef
@@ -784,6 +737,12 @@ export default {
         sealApplyFileId: 0
       });
     };
+    const removeApply = sealApply => {
+      let index = modelRef.sealApplyList.indexOf(sealApply);
+      if (index !== -1) {
+        modelRef.sealApplyList.splice(index, 1);
+      }
+    };
 
     return {
       modelRef,
@@ -854,7 +813,8 @@ export default {
       readonly,
       popvisible,
       cancel,
-      handleVisibleChange
+      handleVisibleChange,
+      removeApply
     };
   }
 };