update:法人证书申领

src/views/CA/UnitApply.vue

@@ -1,6 +1,22 @@
 <template>
   <div class="ca_apply">
+    <Result
+      v-if="isSuccess"
+      status="success"
+      title="您的企业已经完成数字证书申领"
+      sub-title="已经申领过数字证书的企业无法再次申领，如需补办请联系管理人员"
+    >
+      <template #extra>
+        <!-- <Button type="primary">
+        申请补办
+      </Button> -->
+        <Button @click="router.back()">
+          返回
+        </Button>
+      </template>
+    </Result>
     <Form
+      v-if="!isSuccess"
       ref="ruleForm"
       :model="form"
       :label-col="labelCol"
@@ -8,9 +24,13 @@
       :rules="rules"
     >
       <Row>
-        <RowCol :span="12">
+        <Col :span="12">
           <FormItem label="企业名称" name="unitName">
-            <Select v-model:value="form.unitName" :disabled="disabled">
+            <Select
+              v-model:value="form.unitName"
+              :disabled="disabled"
+              @change="getTydm"
+            >
               <Option
                 v-for="organize in organizeList"
                 :key="organize.id"
@@ -20,7 +40,7 @@
             </Select>
           </FormItem>
           <FormItem label="统一社会信用代码" name="tydm">
-            <Input v-model:value="form.tydm" :disabled="disabled" />
+            <Input v-model:value="form.tydm" disabled />
           </FormItem>
           <FormItem label="经办人姓名" name="operatorName">
             <Input v-model:value="form.operatorName" :disabled="disabled" />
@@ -31,8 +51,17 @@
           <FormItem label="经办人手机号" name="operatorPhone">
             <Input v-model:value="form.operatorPhone" :disabled="disabled" />
           </FormItem>
-          <FormItem label="邮寄地址" name="address">
+          <FormItem label="手机验证码" name="phoneCode">
-            <Input v-model:value="form.address" :disabled="disabled" />
+            <Row :gutter="8">
+              <Col :span="12">
+                <Input v-model:value="form.phoneCode" :disabled="disabled" />
+              </Col>
+              <Col :span="12">
+                <Button @click="getCode" :disabled="disabled || countdown > 0"
+                  >获取验证码{{ countdown > 0 ? `(${countdown})` : "" }}</Button
+                >
+              </Col>
+            </Row>
           </FormItem>
           <FormItem label="省市区信息" name="code">
             <Cascader
@@ -44,8 +73,11 @@
               :disabled="disabled"
             />
           </FormItem>
-        </RowCol>
+          <FormItem label="邮寄地址" name="address">
-        <RowCol :span="12">
+            <Input v-model:value="form.address" :disabled="disabled" />
+          </FormItem>
+        </Col>
+        <Col :span="12">
           <FormItem
             v-for="config in uploadConfig"
             :label="config.label"
@@ -68,7 +100,7 @@
               </Button>
             </Upload>
           </FormItem>
-        </RowCol>
+        </Col>
       </Row>
 
       <FormItem :wrapperCol="{ span: 10, offset: 8 }">
@@ -104,12 +136,22 @@
     placement="right"
     :closable="false"
     v-model:visible="drawVisible"
+    width="350px"
   >
-    <p v-for="unitApply in unitApplyList" :key="unitApply.id">
+    <div
-      {{
+      v-for="unitApply in unitApplyList"
-        `${unitApply.unitName}-${unitApply.operatorName}-${unitApply.operatorPhone}`
+      :key="unitApply.id"
-      }}
+      style="padding:10px"
+    >
+      <p>
+        {{ unitApply.unitName
+        }}<Tag :color="['orange', 'green', 'red'][unitApply.status]">{{
+          ["进行中", "已成功", "已失败"][unitApply.status] || "未申领"
+        }}</Tag>
       </p>
+      <p>经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}</p>
+      <p>发起时间: {{ unitApply.time }}</p>
+    </div>
   </Drawer>
 </template>
 <style lang="less">
@@ -131,12 +173,16 @@ import {
   Select,
   Row,
   Col,
-  Drawer
+  Drawer,
+  Tag,
+  Modal,
+  Result
 } from "ant-design-vue";
 import { UploadOutlined } from "@ant-design/icons-vue";
 import { get, post } from "@/services/http";
 import { delay } from "@/services/util";
 import regex from "@/services/regex";
+import { useRouter } from "vue-router";
 const picUploadConfig = [
   {
     label: "授权委托书照片",
@@ -173,7 +219,6 @@ async function getAreaOptions(code) {
     }));
   }
 }
-
 export default {
   components: {
     Form,
@@ -186,8 +231,10 @@ export default {
     Select,
     Option: Select.Option,
     Row,
-    RowCol: Col,
+    Col,
-    Drawer
+    Drawer,
+    Tag,
+    Result
   },
   data() {
     return {
@@ -202,6 +249,8 @@ export default {
       organizeList: [],
       drawVisible: false,
       disabled: true,
+      countdown: 0,
+      isSuccess: false,
       rules: {
         operatorId: [
           { required: true, message: "请输入18位身份证号码", trigger: "blur" },
@@ -285,8 +334,12 @@ export default {
             trigger: "change",
             transform: v => v && v.toString()
           }
+        ],
+        phoneCode: [
+          { required: true, message: "请输入短信验证码", trigger: "change" }
         ]
-      }
+      },
+      router: useRouter()
     };
   },
   async created() {
@@ -297,6 +350,7 @@ export default {
     const current = unitApplyList.data.find(
       d => d.status == null || d.status == 0
     );
+    this.isSuccess = !!unitApplyList.data.find(d => d.status == 1);
     this.unitApplyList = unitApplyList.data;
     if (current) {
       //省市信息初始化
@@ -387,7 +441,8 @@ export default {
         message.success("登记成功");
         this.disabled = true;
         this.currentId = resp.data;
-        await delay(1000);
+        this.currentStatus = null;
+        await delay(500);
         await this.sendUnitApply();
       }
     },
@@ -400,6 +455,7 @@ export default {
           message.error(resp.errorMsg);
         } else {
           message.success(resp.errorMsg);
+          this.currentStatus = 0;
         }
       }
     },
@@ -409,13 +465,41 @@ export default {
         id: this.currentId
       });
       if (res.errorCode == 0) {
-        message.success(res.errorMsg);
+        Modal.success({ title: "完成", content: "数字证书申领流程已完成" });
       } else {
-        message.error(res.errorMsg);
+        Modal.info({ title: "当前状态", content: res.errorMsg });
       }
     },
     showDrawer() {
       this.drawVisible = true;
+    },
+    async getCode() {
+      if (!regex.Phone.test(this.form.operatorPhone)) {
+        message.error("请输入正确的手机号码");
+        return;
+      }
+      var res = await get("/api2/CA/GetPhoneCode", {
+        type: 1,
+        phone: this.form.operatorPhone
+      });
+      if (res.errorCode !== 0) {
+        message.error(res.errorMsg);
+        return;
+      }
+      this.countdown = 60;
+      var handle = setInterval(() => {
+        this.countdown--;
+        this.countdown < 0 && clearInterval(handle);
+      }, 1000);
+    },
+    async getTydm() {
+      const unitName = this.form.unitName;
+      const res = await get("/api2/CA/GetTydm", { unitName });
+      if (res.errorCode !== 0) {
+        message.error(res.errorMsg);
+      } else {
+        this.form.tydm = res.data;
+      }
     }
   }
 };