From a3af7a6ba06cf7c4579ded1dbdf6bec04991dcc9 Mon Sep 17 00:00:00 2001
From: zhangqi <2794379662@qq.com>
Date: Wed, 27 Jan 2021 12:07:53 +0800
Subject: [PATCH] =?UTF-8?q?update:=E6=B3=95=E4=BA=BA=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/http.js                   |  47 ++-
 src/views/CA/Index.vue                 |   2 +-
 src/views/CA/UnitApply.composition.vue | 506 +++++++++++++++++++++++++
 src/views/CA/UnitApply.vue             | 120 ++++--
 src/views/CA/UserApply.composition.vue | 126 ++++++
 vue.config.js                          |   8 +
 6 files changed, 753 insertions(+), 56 deletions(-)
 create mode 100644 src/views/CA/UnitApply.composition.vue
 create mode 100644 src/views/CA/UserApply.composition.vue

diff --git a/src/services/http.js b/src/services/http.js
index c914785..37183ee 100644
--- a/src/services/http.js
+++ b/src/services/http.js
@@ -1,28 +1,37 @@
-import { message } from "ant-design-vue";
 import axios from "axios";
 export async function get(url, params) {
-  var response = await axios.get(url, { params });
-  if (response.status == 200) {
+  try {
+    var response = await axios.get(url, { params });
     return response.data;
-  } else if (response.status == 401) {
-    message.warning(
-      "未登录或身份认证信息已过期",
-      (onclose = () => {
-        top && top.login();
-      })
-    );
+  } catch (error) {
+    if (error.response && error.response.status == "401") {
+      return new {
+        errorCode: -1,
+        errorMsg: "身份认证失败"
+      }();
+    } else {
+      return new {
+        errorCode: -1,
+        errorMsg: "请求出错"
+      }();
+    }
   }
 }
 export async function post(url, data) {
-  var response = await axios.post(url, data);
-  if (response.status == 200) {
+  try {
+    var response = await axios.post(url, data);
     return response.data;
-  } else if (response.status == 401) {
-    message.warning(
-      "未登录或身份认证信息已过期",
-      (onclose = () => {
-        top && top.login();
-      })
-    );
+  } catch (error) {
+    if (error.response && error.response.status == "401") {
+      return new {
+        errorCode: -1,
+        errorMsg: "身份认证失败"
+      }();
+    } else {
+      return new {
+        errorCode: -1,
+        errorMsg: "请求出错"
+      }();
+    }
   }
 }
diff --git a/src/views/CA/Index.vue b/src/views/CA/Index.vue
index 4267b5d..47cfc28 100644
--- a/src/views/CA/Index.vue
+++ b/src/views/CA/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ca_index">
     <Space>
-      <Button type="primary">
+      <Button type="primary" disabled>
         <router-link to="/ca/user"> 个人数字证书申领入口 </router-link>
       </Button>
       <Button>
diff --git a/src/views/CA/UnitApply.composition.vue b/src/views/CA/UnitApply.composition.vue
new file mode 100644
index 0000000..09599d4
--- /dev/null
+++ b/src/views/CA/UnitApply.composition.vue
@@ -0,0 +1,506 @@
+<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"
+      :wrapper-col="wrapperCol"
+      :rules="rules"
+    >
+      <Row>
+        <Col :span="12">
+          <FormItem label="企业名称" name="unitName">
+            <Select
+              v-model:value="form.unitName"
+              :disabled="disabled"
+              @change="getTydm"
+            >
+              <Option
+                v-for="organize in organizeList"
+                :key="organize.id"
+                :value="organize.name"
+                >{{ organize.name }}</Option
+              >
+            </Select>
+          </FormItem>
+          <FormItem label="统一社会信用代码" name="tydm">
+            <Input v-model:value="form.tydm" disabled />
+          </FormItem>
+          <FormItem label="经办人姓名" name="operatorName">
+            <Input v-model:value="form.operatorName" :disabled="disabled" />
+          </FormItem>
+          <FormItem label="经办人身份证号" name="operatorId">
+            <Input v-model:value="form.operatorId" :disabled="disabled" />
+          </FormItem>
+          <FormItem label="经办人手机号" name="operatorPhone">
+            <Input v-model:value="form.operatorPhone" :disabled="disabled" />
+          </FormItem>
+          <FormItem label="手机验证码" name="phoneCode">
+            <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
+              v-model:value="form.code"
+              :load-data="loadAreaOptions"
+              :options="areaOptions"
+              placeholder="请选择省市区信息"
+              change-on-select
+              :disabled="disabled"
+            />
+          </FormItem>
+          <FormItem label="邮寄地址" name="address">
+            <Input v-model:value="form.address" :disabled="disabled" />
+          </FormItem>
+        </Col>
+        <Col :span="12">
+          <FormItem
+            v-for="config in uploadConfig"
+            :label="config.label"
+            :name="config.name"
+            :key="config"
+          >
+            <input hidden v-model="form[config.name]" />
+            <Upload
+              :disabled="disabled"
+              v-model:fileList="config.defaultFileList"
+              accept="image/*"
+              action="/api2/upload/uploadfile"
+              @change="info => handleChange(config, info)"
+              :beforeUpload="beforeUpload"
+              list-type="picture"
+            >
+              <Button block :disabled="disabled || config.disabled">
+                <UploadOutlined />
+                点击上传
+              </Button>
+            </Upload>
+          </FormItem>
+        </Col>
+      </Row>
+
+      <FormItem :wrapperCol="{ span: 10, offset: 8 }">
+        <Button
+          v-if="currentId == 0"
+          style="margin-left: 10px"
+          type="primary"
+          @click="createUnitApply"
+          >申领登记</Button
+        >
+        <Button
+          v-if="currentId !== 0 && currentStatus == null"
+          style="margin-left: 10px"
+          type="primary"
+          @click="sendUnitApply"
+          >发起申领</Button
+        >
+        <Button
+          v-if="currentId !== 0 && currentStatus == 0"
+          style="margin-left: 10px"
+          type="primary"
+          @click="queryOrder"
+          >查询结果</Button
+        >
+        <Button style="margin-left: 10px" @click="showDrawer"
+          >历史申领记录</Button
+        >
+      </FormItem>
+    </Form>
+  </div>
+  <Drawer
+    title="历史申领记录"
+    placement="right"
+    :closable="false"
+    v-model:visible="drawVisible"
+    width="350px"
+  >
+    <div
+      v-for="unitApply in unitApplyList"
+      :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">
+.ca_apply {
+  width: 800px;
+  .ant-upload {
+    width: 100%;
+  }
+}
+</style>
+<script>
+import {
+  Form,
+  Input,
+  Upload,
+  message,
+  Cascader,
+  Button,
+  Select,
+  Row,
+  Col,
+  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: "授权委托书照片",
+    name: "loaPicId",
+    disabled: false,
+    defaultFileList: []
+  },
+  {
+    label: "身份证正面照片",
+    name: "idCardFrontPicId",
+    disabled: false,
+    defaultFileList: []
+  },
+  {
+    label: "身份证背面照片",
+    name: "idCardBackPicId",
+    disabled: false,
+    defaultFileList: []
+  },
+  {
+    label: "营业执照照片",
+    name: "businessLicensePicId",
+    disabled: false,
+    defaultFileList: []
+  }
+];
+async function getAreaOptions(code) {
+  const res = await get("/api2/CA/AreaOptions", { code });
+  if (res.errorCode == 0) {
+    return res.data.map(p => ({
+      label: p.name,
+      value: p.code,
+      isLeaf: p.divisionLevel == 3
+    }));
+  }
+}
+export default {
+  components: {
+    Form,
+    FormItem: Form.Item,
+    Input,
+    Upload,
+    Cascader,
+    UploadOutlined,
+    Button,
+    Select,
+    Option: Select.Option,
+    Row,
+    Col,
+    Drawer,
+    Tag,
+    Result
+  },
+  data() {
+    return {
+      uploadConfig: picUploadConfig,
+      labelCol: { span: 8 },
+      wrapperCol: { span: 14 },
+      form: {},
+      currentId: 0,
+      currentStatus: null,
+      unitApplyList: [],
+      areaOptions: [],
+      organizeList: [],
+      drawVisible: false,
+      disabled: true,
+      countdown: 0,
+      isSuccess: false,
+      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" }
+        ],
+        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",
+            transform: v => v && v.toString()
+          }
+        ],
+        idCardFrontPicId: [
+          {
+            required: true,
+            message: "请上传身份证正面照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ],
+        idCardBackPicId: [
+          {
+            required: true,
+            message: "请上传身份证背面照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ],
+        businessLicensePicId: [
+          {
+            required: true,
+            message: "请上营业执照照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ],
+        phoneCode: [
+          { required: true, message: "请输入短信验证码", trigger: "change" }
+        ]
+      },
+      router: useRouter()
+    };
+  },
+  async created() {
+    const organizeInfo = await get("/api2/UserInfo/Organize");
+    const unitApplyList = await get("/api2/CA/UnitApplyList");
+    this.areaOptions = await getAreaOptions("");
+    this.organizeList = organizeInfo.data;
+    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) {
+      //省市信息初始化
+      const [code0, code1] = current.code;
+      var option0 = this.areaOptions.find(o => o.value == code0);
+      option0.children = await getAreaOptions(code0);
+      var option1 = option0.children.find(o => o.value == code1);
+      option1.children = await getAreaOptions(code1);
+      this.form = current;
+      this.currentId = current.id;
+      this.currentStatus = current.status;
+      picUploadConfig[0].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: current.loaPicPath
+      });
+      picUploadConfig[1].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: current.idCardFrontPicPath
+      });
+      picUploadConfig[2].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: current.idCardBackPicPath
+      });
+      picUploadConfig[3].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: current.businessLicensePicPath
+      });
+    } else {
+      this.disabled = false;
+    }
+  },
+  methods: {
+    handleChange(config, info) {
+      const name = config.name;
+      if (info.file.status !== "uploading") {
+        // console.log(info.file.status,info.file, info.fileList);
+      }
+      if (info.file.status === "done") {
+        message.success(`${info.file.name} 文件上传成功`);
+        this.form[name] = info.file.response.id;
+        config.disabled = true;
+      } else if (info.file.status === "error") {
+        message.error(`${info.file.name} 文件上传失败`);
+      }
+      if (info.file.status === "removed") {
+        config.disabled = false;
+        this.form[name] = null;
+      }
+    },
+    beforeUpload(file) {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
+      if (!isJpgOrPng) {
+        message.error("只能上传jpeg/png格式的图片文件");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        message.error("文件大小超过2MB!");
+      }
+      return isJpgOrPng && isLt2M;
+    },
+    async loadAreaOptions(selectedOptions) {
+      console.log(selectedOptions);
+      const targetOption = selectedOptions[selectedOptions.length - 1];
+      targetOption.loading = true;
+      const options = await getAreaOptions(targetOption.value);
+      if (options) {
+        targetOption.children = options;
+      }
+      targetOption.loading = false;
+      this.areaOptions = [...this.areaOptions];
+    },
+    async createUnitApply() {
+      try {
+        await this.$refs.ruleForm.validate();
+      } catch (error) {
+        console.log("error", error);
+        return;
+      }
+      const resp = await post("/api2/CA/createUnitApply", this.form);
+      if (resp.errorCode != 0) {
+        message.error(resp.errorMsg);
+      } else {
+        message.success("登记成功");
+        this.disabled = true;
+        this.currentId = resp.data;
+        this.currentStatus = null;
+        await delay(500);
+        await this.sendUnitApply();
+      }
+    },
+    async sendUnitApply() {
+      if (this.currentId && this.currentStatus === null) {
+        const resp = await get("/api2/CA/SendCreateOrder", {
+          orderId: this.currentId
+        });
+        if (resp.errorCode != 0) {
+          message.error(resp.errorMsg);
+        } else {
+          message.success(resp.errorMsg);
+          this.currentStatus = 0;
+        }
+      }
+    },
+    //查询结果
+    async queryOrder() {
+      const res = await get("/api2/CA/QueryUnitApplyResult", {
+        id: this.currentId
+      });
+      if (res.errorCode == 0) {
+        Modal.success({ title: "完成", content: "数字证书申领流程已完成" });
+      } else {
+        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;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/views/CA/UnitApply.vue b/src/views/CA/UnitApply.vue
index 09599d4..7e7c993 100644
--- a/src/views/CA/UnitApply.vue
+++ b/src/views/CA/UnitApply.vue
@@ -10,9 +10,7 @@
         <!-- <Button type="primary">
         申请补办
       </Button> -->
-        <Button @click="router.back()">
-          返回
-        </Button>
+        <Button @click="router.back()"> 返回 </Button>
       </template>
     </Result>
     <Form
@@ -86,7 +84,7 @@
           >
             <input hidden v-model="form[config.name]" />
             <Upload
-              :disabled="disabled"
+              :disabled="disableUpload"
               v-model:fileList="config.defaultFileList"
               accept="image/*"
               action="/api2/upload/uploadfile"
@@ -94,7 +92,7 @@
               :beforeUpload="beforeUpload"
               list-type="picture"
             >
-              <Button block :disabled="disabled || config.disabled">
+              <Button block :disabled="disableUpload || config.disabled">
                 <UploadOutlined />
                 点击上传
               </Button>
@@ -141,7 +139,7 @@
     <div
       v-for="unitApply in unitApplyList"
       :key="unitApply.id"
-      style="padding:10px"
+      style="padding: 10px"
     >
       <p>
         {{ unitApply.unitName
@@ -151,6 +149,13 @@
       </p>
       <p>经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}</p>
       <p>发起时间: {{ unitApply.time }}</p>
+      <Button
+        v-if="unitApply.status == 2"
+        type="link"
+        @click="modifyOrder(unitApply)"
+        :disabled="disabled"
+        >重新申请</Button
+      >
     </div>
   </Drawer>
 </template>
@@ -249,6 +254,7 @@ export default {
       organizeList: [],
       drawVisible: false,
       disabled: true,
+      disableUpload: true,
       countdown: 0,
       isSuccess: false,
       rules: {
@@ -353,37 +359,10 @@ export default {
     this.isSuccess = !!unitApplyList.data.find(d => d.status == 1);
     this.unitApplyList = unitApplyList.data;
     if (current) {
-      //省市信息初始化
-      const [code0, code1] = current.code;
-      var option0 = this.areaOptions.find(o => o.value == code0);
-      option0.children = await getAreaOptions(code0);
-      var option1 = option0.children.find(o => o.value == code1);
-      option1.children = await getAreaOptions(code1);
-      this.form = current;
-      this.currentId = current.id;
-      this.currentStatus = current.status;
-      picUploadConfig[0].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.loaPicPath
-      });
-      picUploadConfig[1].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.idCardFrontPicPath
-      });
-      picUploadConfig[2].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.idCardBackPicPath
-      });
-      picUploadConfig[3].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.businessLicensePicPath
-      });
+      this.initForm(current);
     } else {
       this.disabled = false;
+      this.disableUpload = false;
     }
   },
   methods: {
@@ -428,6 +407,30 @@ export default {
       this.areaOptions = [...this.areaOptions];
     },
     async createUnitApply() {
+      if (this.form.orderNo) {
+        //有orderNo 修改
+        const resp = await post("/api2/CA/ModifyUnitApply", {
+          id: this.form.id,
+          orderNo: this.form.orderNo,
+          loaPicId: this.form.loaPicId,
+          idCardFrontPicId: this.form.idCardFrontPicId,
+          idCardBackPicId: this.form.idCardBackPicId,
+          businessLicensePicId: this.form.businessLicensePicId
+        });
+        if (resp.errorCode != 0) {
+          message.error(resp.errorMsg);
+        } else {
+          message.success("修改成功");
+          this.disabled = true;
+          this.disableUpload = true;
+          this.currentId = resp.data;
+          this.currentStatus = null;
+          await delay(500);
+          await this.sendUnitApply();
+        }
+        return;
+      }
+
       try {
         await this.$refs.ruleForm.validate();
       } catch (error) {
@@ -454,7 +457,7 @@ export default {
         if (resp.errorCode != 0) {
           message.error(resp.errorMsg);
         } else {
-          message.success(resp.errorMsg);
+          message.success("发起申请成功");
           this.currentStatus = 0;
         }
       }
@@ -466,6 +469,7 @@ export default {
       });
       if (res.errorCode == 0) {
         Modal.success({ title: "完成", content: "数字证书申领流程已完成" });
+        this.isSuccess = true;
       } else {
         Modal.info({ title: "当前状态", content: res.errorMsg });
       }
@@ -500,6 +504,50 @@ export default {
       } else {
         this.form.tydm = res.data;
       }
+    },
+    async initForm(unitApply) {
+      //省市信息初始化
+      const [code0, code1] = unitApply.code;
+      var option0 = this.areaOptions.find(o => o.value == code0);
+      option0.children = await getAreaOptions(code0);
+      var option1 = option0.children.find(o => o.value == code1);
+      option1.children = await getAreaOptions(code1);
+      this.form = unitApply;
+      this.currentId = unitApply.id;
+      this.currentStatus = unitApply.status;
+      picUploadConfig[0].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: unitApply.loaPicPath
+      });
+      picUploadConfig[0].disabled = true;
+      picUploadConfig[1].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: unitApply.idCardFrontPicPath
+      });
+      picUploadConfig[1].disabled = true;
+
+      picUploadConfig[2].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: unitApply.idCardBackPicPath
+      });
+      picUploadConfig[2].disabled = true;
+
+      picUploadConfig[3].defaultFileList.push({
+        uid: -1,
+        status: "done",
+        url: unitApply.businessLicensePicPath
+      });
+      picUploadConfig[3].disabled = true;
+    },
+    async modifyOrder(unitApply) {
+      await this.initForm(unitApply);
+      this.currentId = 0;
+      this.disabled = true;
+      this.disableUpload = false;
+      this.currentStatus = null;
     }
   }
 };
diff --git a/src/views/CA/UserApply.composition.vue b/src/views/CA/UserApply.composition.vue
new file mode 100644
index 0000000..654ff1c
--- /dev/null
+++ b/src/views/CA/UserApply.composition.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="ca-apply">
+    <Form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <FormItem label="真实姓名" v-bind="validateInfos.idCardName">
+        <Input v-model:value="form.idCardName" :disabled="disableEdit" />
+      </FormItem>
+      <FormItem label="身份证号码" v-bind="validateInfos.idCardNo">
+        <Input v-model:value="form.idCardNo" :disabled="disableEdit" />
+      </FormItem>
+      <FormItem label="所在单位名称" v-bind="validateInfos.unitName">
+        <Select v-model:value="form.unitName" :disabled="disableEdit">
+          <Option
+            v-for="organize in organizeList"
+            :key="organize.id"
+            :value="organize.name"
+            >{{ organize.name }}</Option
+          >
+        </Select>
+      </FormItem>
+      <FormItem label="手机号码" v-bind="validateInfos.phone">
+        <Input v-model:value="form.phone" :disabled="disableEdit" />
+      </FormItem>
+      <FormItem label="收件人" v-bind="validateInfos.idCardNo">
+        <Input v-model:value="form.receiverName" :disadbled="disableEdit" />
+      </FormItem>
+      <FormItem label="联系电话" v-bind="validateInfos.idCardNo">
+        <Input v-model:value="form.receiverPhone" :disadbled="disableEdit" />
+      </FormItem>
+      <FormItem label="邮寄地址" v-bind="validateInfos.address">
+        <Input v-model:value="form.address" :disabled="disableEdit" />
+      </FormItem>
+      <FormItem :wrapperCol="{ span: 10, offset: 8 }">
+        <Button type="primary" @click="onSubmit">前往申领</Button>
+        <Button style="margin-left: 10px" @click="changeDisabled"
+          >历史申领记录</Button
+        >
+      </FormItem>
+    </Form>
+  </div>
+  <Drawer title="历史申领记录" placement="right" :closable="false"> </Drawer>
+</template>
+<style lang="less" scoped>
+.ca-apply {
+  width: 600px;
+}
+</style>
+<script>
+import { Form, Input, Button, Select, Drawer, message } from "ant-design-vue";
+import { onMounted, reactive, ref, toRaw } from "vue";
+import { useForm } from "@ant-design-vue/use";
+import { get } from "@/services/http";
+export default {
+  components: {
+    Form,
+    Input,
+    FormItem: Form.Item,
+    Button,
+    Select,
+    Option: Select.Option,
+    Drawer
+  },
+  setup() {
+    //界面初始化
+    var organizeList = ref([]);
+    var userApplyList = ref([]);
+    onMounted(async () => {
+      const res = await get("/api2/UserInfo/Organize");
+      if (res.errorCode != 0) {
+        message.error(res.errorMsg);
+      }
+      organizeList.value = res.data;
+      const listRes = await get("/api2/CA/UserApplyList");
+      if (res.errorCode != 0) {
+        message.error(res.errorMsg);
+      }
+      userApplyList.value = listRes;
+    });
+    const formRef = reactive({
+      idCardName: "",
+      idCardNo: "",
+      phone: "",
+      unitName: ""
+    });
+    const rulesRef = reactive({
+      idCardName: [
+        { required: true, message: "请输入18位身份证号码", trigger: "blur" }
+      ],
+      idCardId: [
+        { required: true, message: "请输入18位身份证号码", trigger: "blur" }
+      ],
+      phone: [
+        { required: true, message: "请输入18位身份证号码", trigger: "blur" }
+      ],
+      unitName: [
+        { required: true, message: "请输入18位身份证号码", trigger: "change" }
+      ]
+    });
+    const { validate, validateInfos } = useForm(formRef, rulesRef);
+
+    var disableEdit = ref(false);
+    const changeDisabled = function() {
+      disableEdit.value = !disableEdit.value;
+      console.log(disableEdit);
+    };
+    const onSubmit = function() {
+      validate()
+        .then(() => {
+          console.log(toRaw(formRef));
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    };
+    return {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 10 },
+      form: formRef,
+      disableEdit,
+      changeDisabled,
+      validateInfos,
+      onSubmit,
+      organizeList
+    };
+  }
+};
+</script>
diff --git a/vue.config.js b/vue.config.js
index 2901c27..6e12d0c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -11,5 +11,13 @@ module.exports = {
   },
   devServer: {
     proxy: "http://localhost:42127"
+  },
+  chainWebpack: config => {
+    config.module
+      .rule("eslint")
+      .use("eslint-loader")
+      .options({
+        fix: true
+      });
   }
 };