From c5746051dfc08227baccce1712f98c42749c8f23 Mon Sep 17 00:00:00 2001
From: zhangqi <2794379662@qq.com>
Date: Fri, 5 Feb 2021 11:12:06 +0800
Subject: [PATCH] =?UTF-8?q?update:CA=E7=9B=B8=E5=85=B3=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/CA/Index.vue                 |    4 +-
 src/views/CA/Result.vue                |   30 -
 src/views/CA/UnitApply.composition.vue |  712 ----------------
 src/views/CA/UnitApply.vue             | 1068 ++++++++++++++----------
 src/views/CA/UserApply.composition.vue |  126 ---
 5 files changed, 615 insertions(+), 1325 deletions(-)
 delete mode 100644 src/views/CA/Result.vue
 delete mode 100644 src/views/CA/UnitApply.composition.vue
 delete mode 100644 src/views/CA/UserApply.composition.vue

diff --git a/src/views/CA/Index.vue b/src/views/CA/Index.vue
index 2355b99..ec4470a 100644
--- a/src/views/CA/Index.vue
+++ b/src/views/CA/Index.vue
@@ -2,10 +2,10 @@
   <div class="ca_index">
     <Space>
       <Button type="primary">
-        <router-link to="/ca/user"> 个人数字证书申领入口 </router-link>
+        <router-link to="/ca/userapply"> 个人数字证书申领入口 </router-link>
       </Button>
       <Button>
-        <router-link to="/ca/composition"> 企业数字证书申领入口 </router-link>
+        <router-link to="/ca/unitapply"> 企业数字证书申领入口 </router-link>
       </Button>
     </Space>
   </div>
diff --git a/src/views/CA/Result.vue b/src/views/CA/Result.vue
deleted file mode 100644
index 1cf7000..0000000
--- a/src/views/CA/Result.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <Result
-    status="success"
-    title="您的企业已经完成数字证书申领"
-    sub-title="已经申领过数字证书的企业无法再次申领，如需补办请联系管理人员"
-  >
-    <template #extra>
-      <!-- <Button type="primary">
-        申请补办
-      </Button> -->
-      <Button @click="router.back()"> 返回 </Button>
-    </template>
-  </Result>
-</template>
-<script>
-import { Result, Button } from "ant-design-vue";
-import { useRouter } from "vue-router";
-export default {
-  components: {
-    Result,
-    Button
-  },
-  setup() {
-    const router = useRouter();
-    return {
-      router
-    };
-  }
-};
-</script>
diff --git a/src/views/CA/UnitApply.composition.vue b/src/views/CA/UnitApply.composition.vue
deleted file mode 100644
index 50dba35..0000000
--- a/src/views/CA/UnitApply.composition.vue
+++ /dev/null
@@ -1,712 +0,0 @@
-<template>
-  <div class="ca-apply">
-    <Result
-      v-if="isSuccess"
-      status="success"
-      title="您的企业已经完成数字证书申领"
-      sub-title="已经申领过数字证书的企业无法再次申领，如需补办请联系管理人员"
-    >
-      <template #extra>
-        <!-- <Button type="primary">
-        申请补办
-      </Button> -->
-        <Button @click="router.back()" type="primary"> 返回 </Button>
-        <Button style="margin-left: 10px" @click="toggleDrawer"
-          >历史提交记录</Button
-        >
-      </template>
-    </Result>
-    <Spin v-else :spinning="spining">
-      <Form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
-        <Row>
-          <Col :span="11">
-            <FormItem label="企业名称" v-bind="validateInfos.unitName">
-              <Select
-                v-model:value="modelRef.unitName"
-                @change="getTydm"
-                :disabled="disabledFeild"
-                placeholder="请选择企业名称"
-              >
-                <Option
-                  v-for="organize in organizeList"
-                  :key="organize.id"
-                  :value="organize.name"
-                  >{{ organize.name }}</Option
-                >
-              </Select>
-            </FormItem>
-            <FormItem label="统一社会信用代码" v-bind="validateInfos.tydm">
-              <Input
-                v-model:value="modelRef.tydm"
-                readonly
-                :disabled="disabledFeild"
-                placeholder="根据企业名称自动获取"
-              />
-            </FormItem>
-            <FormItem label="经办人姓名" v-bind="validateInfos.operatorName">
-              <Input
-                v-model:value="modelRef.operatorName"
-                :disabled="disabledFeild"
-                placeholder="请输入经办人姓名"
-              />
-            </FormItem>
-            <FormItem label="经办人身份证" v-bind="validateInfos.operatorId">
-              <Input
-                v-model:value="modelRef.operatorId"
-                :disabled="disabledFeild"
-                placeholder="请输入经办人身份证号码"
-              />
-            </FormItem>
-            <FormItem label="经办人手机号" v-bind="validateInfos.operatorPhone">
-              <Input
-                v-model:value="modelRef.operatorPhone"
-                :disabled="disabledFeild"
-                placeholder="请输入经办人手机号码"
-              />
-            </FormItem>
-            <FormItem label="手机验证码" v-bind="validateInfos.phoneCode">
-              <Row :gutter="8">
-                <Col :span="12">
-                  <Input
-                    v-model:value="modelRef.phoneCode"
-                    :disabled="disabledFeild"
-                  />
-                </Col>
-                <Col :span="12">
-                  <Button
-                    :disabled="disabledFeild || countdown > 0"
-                    @click="getCode"
-                  >
-                    获取验证码{{ countdown > 0 ? `(${countdown})` : "" }}
-                  </Button>
-                </Col>
-              </Row>
-            </FormItem>
-            <FormItem label="省市区信息" v-bind="validateInfos.code">
-              <Cascader
-                v-model:value="modelRef.code"
-                placeholder="请选择省市区信息"
-                :options="areaOptions"
-                :load-data="loadAreaOptions"
-                :disabled="disabledFeild"
-              />
-            </FormItem>
-            <FormItem label="邮寄地址" v-bind="validateInfos.address">
-              <Input
-                v-model:value="modelRef.address"
-                :disabled="disabledFeild"
-                placeholder="请输入证书邮寄地址"
-              />
-            </FormItem>
-          </Col>
-          <Col :span="11">
-            <FormItem label="授权委托书" v-bind="validateInfos.loaPicId">
-              <input v-model="modelRef.loaPicId" hidden />
-              <Upload
-                accept="image/*"
-                action="/api2/upload/uploadfile"
-                v-model:fileList="loaPicFileList"
-                :beforeUpload="beforeUpload"
-                list-type="picture"
-                @change="info => handleChange(info, 'loaPicId')"
-                :disabled="disabledUpload"
-              >
-                <Button block :disabled="disabledUpload">
-                  <UploadOutlined />
-                  点击{{ modelRef.loaPicId ? "替换" : "上传" }}
-                </Button>
-              </Upload>
-            </FormItem>
-            <FormItem
-              label="身份证正面照"
-              v-bind="validateInfos.idCardFrontPicId"
-            >
-              <input v-model="modelRef.idCardFrontPicId" hidden />
-              <Upload
-                accept="image/*"
-                action="/api2/upload/uploadfile"
-                v-model:fileList="idCardFrontPicFileList"
-                :beforeUpload="beforeUpload"
-                list-type="picture"
-                @change="info => handleChange(info, 'idCardFrontPicId')"
-                :disabled="disabledUpload"
-              >
-                <Button block :disabled="disabledUpload">
-                  <UploadOutlined />
-                  点击{{ modelRef.idCardFrontPicId ? "替换" : "上传" }}
-                </Button>
-              </Upload>
-            </FormItem>
-            <FormItem
-              label="身份证背面照"
-              v-bind="validateInfos.idCardBackPicId"
-            >
-              <input v-model="modelRef.idCardBackPicId" hidden />
-              <Upload
-                accept="image/*"
-                action="/api2/upload/uploadfile"
-                v-model:fileList="idCardBackPicFileList"
-                :beforeUpload="beforeUpload"
-                list-type="picture"
-                @change="info => handleChange(info, 'idCardBackPicId')"
-                :disabled="disabledUpload"
-              >
-                <Button block :disabled="disabledUpload">
-                  <UploadOutlined />
-                  点击{{ modelRef.idCardBackPicId ? "替换" : "上传" }}
-                </Button>
-              </Upload>
-            </FormItem>
-            <FormItem
-              label="营业许可证照片"
-              v-bind="validateInfos.businessLicensePicId"
-            >
-              <input v-model="modelRef.businessLicensePicId" hidden />
-              <Upload
-                accept="image/*"
-                action="/api2/upload/uploadfile"
-                v-model:fileList="businessLicenseFileList"
-                :beforeUpload="beforeUpload"
-                list-type="picture"
-                @change="info => handleChange(info, 'businessLicensePicId')"
-                :disabled="disabledUpload"
-              >
-                <Button block :disabled="disabledUpload">
-                  <UploadOutlined />
-                  点击{{ modelRef.businessLicensePicId ? "替换" : "上传" }}
-                </Button>
-              </Upload>
-            </FormItem>
-          </Col>
-          <Col :span="2">
-            <FormItem>
-              <Popover title="说明">
-                <template #content>
-                  <p>请将两页纸一起拍照或扫描上传</p>
-                </template>
-                <Button type="link"
-                  ><a
-                    href="http://183.136.157.18:7308/stgl/sources/202102/授权书模板.doc"
-                    download="授权书模板.doc"
-                    target="_blank"
-                    ><DownloadOutlined />模板</a
-                  ></Button
-                >
-              </Popover>
-            </FormItem>
-          </Col>
-        </Row>
-        <FormItem :wrapper-col="{ span: 12, offset: 10 }">
-          <Button v-if="progressingId" type="primary" @click="onSubmit"
-            >查询</Button
-          >
-          <Button v-else type="primary" @click="onSubmit">提交</Button>
-          <Button style="margin-left: 10px" @click="toggleDrawer"
-            >历史提交记录</Button
-          >
-        </FormItem>
-      </Form>
-    </Spin>
-  </div>
-  <Drawer
-    title="历史申领记录"
-    placement="right"
-    :closable="false"
-    v-model:visible="showDrawer"
-    width="450px"
-  >
-    <Empty v-if="!(unitApplyList && unitApplyList.length > 0)" />
-    <div
-      v-for="unitApply in unitApplyList"
-      :key="unitApply.id"
-      style="padding: 10px"
-    >
-      <Card size="small">
-        <template #title>
-          {{ unitApply.unitName
-          }}<Tag
-            style="margin-left:4px;"
-            :color="['orange', 'green', 'red'][unitApply.status]"
-            >{{
-              ["进行中", "已成功", "已失败"][unitApply.status] || "未申领"
-            }}</Tag
-          >
-        </template>
-        <template #extra>
-          <Button
-            v-if="unitApply.status == 2"
-            type="link"
-            @click="modifyOrder(unitApply)"
-            :disabled="disabledModify"
-            >重新申请</Button
-          >
-        </template>
-        <p>
-          经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}
-        </p>
-        <p>发起时间: {{ unitApply.time }}</p>
-        <p v-if="unitApply.dealReason">
-          不通过原因:{{ unitApply.dealReason }}
-        </p></Card
-      >
-    </div>
-  </Drawer>
-</template>
-<style lang="less">
-.ca-apply {
-  width: 800px;
-  .ant-upload {
-    width: 100%;
-  }
-}
-</style>
-<script>
-import {
-  Form,
-  Row,
-  Col,
-  Button,
-  Input,
-  Cascader,
-  Upload,
-  message,
-  Spin,
-  Select,
-  Drawer,
-  Empty,
-  Tag,
-  Card,
-  Modal,
-  Result,
-  Popover
-} from "ant-design-vue";
-import { UploadOutlined, DownloadOutlined } 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";
-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
-    }));
-  }
-}
-const editfeildFlag = toBit("0001");
-const editPicFlag = toBit("0010");
-const editModifyFlag = toBit("0100");
-export default {
-  components: {
-    Form,
-    FormItem: Form.Item,
-    Row,
-    Col,
-    Button,
-    Input,
-    Cascader,
-    Upload,
-    UploadOutlined,
-    Spin,
-    Select,
-    Option: Select.Option,
-    Drawer,
-    Empty,
-    Tag,
-    Card,
-    Result,
-    DownloadOutlined,
-    Popover
-  },
-  setup() {
-    const modelRef = reactive({
-      id: null,
-      orderNo: null,
-      unitName: null,
-      tydm: "",
-      operatorName: "",
-      operatorId: "",
-      operatorPhone: "",
-      phoneCode: "",
-      code: [],
-      address: "",
-      loaPicId: null,
-      idCardFrontPicId: null,
-      idCardBackPicId: null,
-      businessLicensePicId: null
-    });
-    const loaPicFileList = ref([]);
-    const idCardFrontPicFileList = ref([]);
-    const idCardBackPicFileList = ref([]);
-    const businessLicenseFileList = 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" }
-      ],
-      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"
-        }
-      ],
-      phoneCode: [
-        { required: true, message: "请输入短信验证码", trigger: "change" }
-      ]
-    });
-    const { resetFields, validate, validateInfos } = useForm(
-      modelRef,
-      rulesRef
-    );
-    const useReload = inject("reload");
-    const queryUnitApply = async id => {
-      const res = await get("/api2/CA/QueryUnitApplyResult", {
-        id
-      });
-      if (res.errorCode == 0) {
-        Modal.success({
-          title: "完成",
-          content: "数字证书申领流程已完成",
-          onOk: useReload
-        });
-      } else {
-        Modal.info({ title: "当前状态", content: res.errorMsg });
-      }
-    };
-    const sendUnitApply = async id => {
-      const resp = await get("/api2/CA/SendCreateOrder", {
-        orderId: id
-      });
-      if (resp.errorCode != 0) {
-        message.error(resp.errorMsg);
-      } else {
-        message.success("发起申请成功", 2, useReload);
-      }
-    };
-    const createUnitApply = async () => {
-      try {
-        await validate();
-        const resp = await post("/api2/CA/createUnitApply", toRaw(modelRef));
-        if (resp.errorCode != 0) {
-          message.error(resp.errorMsg);
-        } else {
-          message.success("提交成功", (onclose = useReload));
-          await sendUnitApply(resp.data);
-        }
-      } catch {
-        0;
-      }
-    };
-    const modifyUnitApply = async () => {
-      try {
-        await validate([
-          "loaPicId",
-          "idCardFrontPicId",
-          "idCardBackPicId",
-          "businessLicensePicId"
-        ]);
-        const resp = await post("/api2/CA/modifyUnitApply", toRaw(modelRef));
-        if (resp.errorCode != 0) {
-          message.error(resp.errorMsg);
-        } else {
-          message.success("提交成功", (onclose = useReload));
-          await sendUnitApply(resp.data);
-        }
-      } catch (error) {
-        1;
-      }
-    };
-    const onSubmit = async e => {
-      e.preventDefault();
-      if (progressingId == 0) {
-        if (modelRef.orderNo) {
-          await modifyUnitApply();
-        } else {
-          await createUnitApply();
-        }
-      } else {
-        var current = toRaw(unitApplyList.value).find(
-          p => p.id == progressingId
-        );
-        if (current.status == null) {
-          await sendUnitApply(progressingId);
-        } else if (current.status == 0) {
-          await queryUnitApply(progressingId);
-        }
-      }
-    };
-    const 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;
-    };
-    const handleChange = (info, name) => {
-      console.log(info.file.status, info.file, info.fileList);
-      // if (info.file.status !== "uploading") {
-      // }
-      if (info.file.status === "done") {
-        message.success(`${info.file.name} 文件上传成功`);
-        modelRef[name] = info.file.response.id;
-        if (info.fileList.length > 1) {
-          info.fileList.shift();
-        }
-      } else if (info.file.status === "error") {
-        message.error(`${info.file.name} 文件上传失败`);
-        info.fileList.pop();
-      }
-      if (info.file.status === "removed") {
-        modelRef[name] = null;
-      }
-    };
-    const areaOptions = ref([]);
-    const spining = ref(false);
-    const organizeList = ref([]);
-    const loadAreaOptions = async selectedOptions => {
-      const targetOption = selectedOptions[selectedOptions.length - 1];
-      targetOption.loading = true;
-      const options = await getAreaOptions(targetOption.value);
-      if (options) {
-        targetOption.children = options;
-      }
-      targetOption.loading = false;
-    };
-    const getTydm = async () => {
-      const unitName = modelRef.unitName;
-      const res = await get("/api2/CA/GetTydm", { unitName });
-      if (res.errorCode !== 0) {
-        message.error(res.errorMsg);
-      } else {
-        modelRef.tydm = res.data;
-      }
-    };
-    const countdown = ref(0);
-    const getCode = async () => {
-      try {
-        await validate("operatorPhone");
-      } catch (error) {
-        return;
-      }
-      var res = await get("/api2/CA/GetPhoneCode", {
-        type: 1,
-        phone: modelRef.operatorPhone
-      });
-      if (res.errorCode !== 0) {
-        message.error(res.errorMsg);
-        return;
-      }
-      countdown.value = 60;
-      var handle = setInterval(() => {
-        countdown.value--;
-        countdown.value < 0 && clearInterval(handle);
-      }, 1000);
-    };
-    const editStatus = ref(toBit("0000"));
-    const disabledFeild = computed(
-      () => (editStatus.value & editfeildFlag) == 0
-    );
-    const disabledUpload = computed(
-      () => (editStatus.value & editPicFlag) == 0
-    );
-    const disabledModify = computed(
-      () => (editStatus.value & editModifyFlag) == 0
-    );
-    const initPage = unitApply => {
-      for (const key in toRaw(modelRef)) {
-        if (Object.hasOwnProperty.call(unitApply, key)) {
-          const element = unitApply[key];
-          modelRef[key] = element;
-        }
-      }
-      loaPicFileList.value = [
-        {
-          uid: "-1",
-          status: "done",
-          url: unitApply.loaPicPath
-        }
-      ];
-      idCardFrontPicFileList.value = [
-        {
-          uid: "-1",
-          status: "done",
-          url: unitApply.idCardFrontPicPath
-        }
-      ];
-      idCardBackPicFileList.value = [
-        {
-          uid: "-1",
-          status: "done",
-          url: unitApply.idCardBackPicPath
-        }
-      ];
-      businessLicenseFileList.value = [
-        {
-          uid: "-1",
-          status: "done",
-          url: unitApply.businessLicensePicPath
-        }
-      ];
-    };
-    const modifyOrder = unitApply => {
-      initPage(unitApply);
-      editStatus.value = toBit("0000") | editPicFlag | editModifyFlag;
-    };
-    let progressingId = 0;
-    const unitApplyList = ref([]);
-    const isSuccess = ref(false);
-    onMounted(async () => {
-      spining.value = true;
-      const options = await getAreaOptions("");
-      const organizeInfoRes = await get("/api2/UserInfo/Organize");
-      if (organizeInfoRes.errorCode != 0) {
-        message.error(organizeInfoRes.errorMsg);
-        spining.value = false;
-        return;
-      }
-      organizeList.value = organizeInfoRes.data;
-      const unitApplyListRes = await get("/api2/CA/UnitApplyList");
-      if (unitApplyListRes.errorCode != 0) {
-        message.error(unitApplyListRes.errorMsg);
-        spining.value = false;
-        return;
-      }
-      unitApplyList.value = unitApplyListRes.data;
-      const current = unitApplyListRes.data.find(
-        d => d.status == null || d.status == 0
-      );
-      if (current) {
-        progressingId = current.id;
-        initPage(current);
-      } else {
-        const successApply = unitApplyListRes.data.find(d => d.status == 1);
-        if (successApply) {
-          isSuccess.value = true;
-        } else {
-          editStatus.value =
-            editStatus.value | editfeildFlag | editPicFlag | editModifyFlag;
-        }
-      }
-      areaOptions.value = options;
-      spining.value = false;
-      console.log(toRaw(modelRef));
-    });
-    const showDrawer = ref(false);
-    const toggleDrawer = () => {
-      showDrawer.value = !showDrawer.value;
-    };
-    return {
-      modelRef,
-      loaPicFileList,
-      idCardFrontPicFileList,
-      idCardBackPicFileList,
-      businessLicenseFileList,
-      rulesRef,
-      validate,
-      validateInfos,
-      editStatus,
-      onSubmit,
-      resetFields,
-      beforeUpload,
-      handleChange,
-      areaOptions,
-      loadAreaOptions,
-      spining,
-      organizeList,
-      unitApplyList,
-      getTydm,
-      getCode,
-      countdown,
-      disabledFeild,
-      disabledUpload,
-      disabledModify,
-      showDrawer,
-      toggleDrawer,
-      isSuccess,
-      modifyOrder,
-      router: useRouter(),
-      progressingId
-    };
-  }
-};
-</script>
diff --git a/src/views/CA/UnitApply.vue b/src/views/CA/UnitApply.vue
index 7e7c993..50dba35 100644
--- a/src/views/CA/UnitApply.vue
+++ b/src/views/CA/UnitApply.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ca_apply">
+  <div class="ca-apply">
     <Result
       v-if="isSuccess"
       status="success"
@@ -10,157 +10,250 @@
         <!-- <Button type="primary">
         申请补办
       </Button> -->
-        <Button @click="router.back()"> 返回 </Button>
+        <Button @click="router.back()" type="primary"> 返回 </Button>
+        <Button style="margin-left: 10px" @click="toggleDrawer"
+          >历史提交记录</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
+    <Spin v-else :spinning="spining">
+      <Form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
+        <Row>
+          <Col :span="11">
+            <FormItem label="企业名称" v-bind="validateInfos.unitName">
+              <Select
+                v-model:value="modelRef.unitName"
+                @change="getTydm"
+                :disabled="disabledFeild"
+                placeholder="请选择企业名称"
               >
-            </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
+                <Option
+                  v-for="organize in organizeList"
+                  :key="organize.id"
+                  :value="organize.name"
+                  >{{ organize.name }}</Option
                 >
-              </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="disableUpload"
-              v-model:fileList="config.defaultFileList"
-              accept="image/*"
-              action="/api2/upload/uploadfile"
-              @change="info => handleChange(config, info)"
-              :beforeUpload="beforeUpload"
-              list-type="picture"
+              </Select>
+            </FormItem>
+            <FormItem label="统一社会信用代码" v-bind="validateInfos.tydm">
+              <Input
+                v-model:value="modelRef.tydm"
+                readonly
+                :disabled="disabledFeild"
+                placeholder="根据企业名称自动获取"
+              />
+            </FormItem>
+            <FormItem label="经办人姓名" v-bind="validateInfos.operatorName">
+              <Input
+                v-model:value="modelRef.operatorName"
+                :disabled="disabledFeild"
+                placeholder="请输入经办人姓名"
+              />
+            </FormItem>
+            <FormItem label="经办人身份证" v-bind="validateInfos.operatorId">
+              <Input
+                v-model:value="modelRef.operatorId"
+                :disabled="disabledFeild"
+                placeholder="请输入经办人身份证号码"
+              />
+            </FormItem>
+            <FormItem label="经办人手机号" v-bind="validateInfos.operatorPhone">
+              <Input
+                v-model:value="modelRef.operatorPhone"
+                :disabled="disabledFeild"
+                placeholder="请输入经办人手机号码"
+              />
+            </FormItem>
+            <FormItem label="手机验证码" v-bind="validateInfos.phoneCode">
+              <Row :gutter="8">
+                <Col :span="12">
+                  <Input
+                    v-model:value="modelRef.phoneCode"
+                    :disabled="disabledFeild"
+                  />
+                </Col>
+                <Col :span="12">
+                  <Button
+                    :disabled="disabledFeild || countdown > 0"
+                    @click="getCode"
+                  >
+                    获取验证码{{ countdown > 0 ? `(${countdown})` : "" }}
+                  </Button>
+                </Col>
+              </Row>
+            </FormItem>
+            <FormItem label="省市区信息" v-bind="validateInfos.code">
+              <Cascader
+                v-model:value="modelRef.code"
+                placeholder="请选择省市区信息"
+                :options="areaOptions"
+                :load-data="loadAreaOptions"
+                :disabled="disabledFeild"
+              />
+            </FormItem>
+            <FormItem label="邮寄地址" v-bind="validateInfos.address">
+              <Input
+                v-model:value="modelRef.address"
+                :disabled="disabledFeild"
+                placeholder="请输入证书邮寄地址"
+              />
+            </FormItem>
+          </Col>
+          <Col :span="11">
+            <FormItem label="授权委托书" v-bind="validateInfos.loaPicId">
+              <input v-model="modelRef.loaPicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="loaPicFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'loaPicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.loaPicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+            <FormItem
+              label="身份证正面照"
+              v-bind="validateInfos.idCardFrontPicId"
             >
-              <Button block :disabled="disableUpload || 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>
+              <input v-model="modelRef.idCardFrontPicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="idCardFrontPicFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'idCardFrontPicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.idCardFrontPicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+            <FormItem
+              label="身份证背面照"
+              v-bind="validateInfos.idCardBackPicId"
+            >
+              <input v-model="modelRef.idCardBackPicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="idCardBackPicFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'idCardBackPicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.idCardBackPicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+            <FormItem
+              label="营业许可证照片"
+              v-bind="validateInfos.businessLicensePicId"
+            >
+              <input v-model="modelRef.businessLicensePicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="businessLicenseFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'businessLicensePicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.businessLicensePicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+          </Col>
+          <Col :span="2">
+            <FormItem>
+              <Popover title="说明">
+                <template #content>
+                  <p>请将两页纸一起拍照或扫描上传</p>
+                </template>
+                <Button type="link"
+                  ><a
+                    href="http://183.136.157.18:7308/stgl/sources/202102/授权书模板.doc"
+                    download="授权书模板.doc"
+                    target="_blank"
+                    ><DownloadOutlined />模板</a
+                  ></Button
+                >
+              </Popover>
+            </FormItem>
+          </Col>
+        </Row>
+        <FormItem :wrapper-col="{ span: 12, offset: 10 }">
+          <Button v-if="progressingId" type="primary" @click="onSubmit"
+            >查询</Button
+          >
+          <Button v-else type="primary" @click="onSubmit">提交</Button>
+          <Button style="margin-left: 10px" @click="toggleDrawer"
+            >历史提交记录</Button
+          >
+        </FormItem>
+      </Form>
+    </Spin>
   </div>
   <Drawer
     title="历史申领记录"
     placement="right"
     :closable="false"
-    v-model:visible="drawVisible"
-    width="350px"
+    v-model:visible="showDrawer"
+    width="450px"
   >
+    <Empty v-if="!(unitApplyList && unitApplyList.length > 0)" />
     <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>
-      <Button
-        v-if="unitApply.status == 2"
-        type="link"
-        @click="modifyOrder(unitApply)"
-        :disabled="disabled"
-        >重新申请</Button
+      <Card size="small">
+        <template #title>
+          {{ unitApply.unitName
+          }}<Tag
+            style="margin-left:4px;"
+            :color="['orange', 'green', 'red'][unitApply.status]"
+            >{{
+              ["进行中", "已成功", "已失败"][unitApply.status] || "未申领"
+            }}</Tag
+          >
+        </template>
+        <template #extra>
+          <Button
+            v-if="unitApply.status == 2"
+            type="link"
+            @click="modifyOrder(unitApply)"
+            :disabled="disabledModify"
+            >重新申请</Button
+          >
+        </template>
+        <p>
+          经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}
+        </p>
+        <p>发起时间: {{ unitApply.time }}</p>
+        <p v-if="unitApply.dealReason">
+          不通过原因:{{ unitApply.dealReason }}
+        </p></Card
       >
     </div>
   </Drawer>
 </template>
 <style lang="less">
-.ca_apply {
+.ca-apply {
   width: 800px;
   .ant-upload {
     width: 100%;
@@ -170,50 +263,30 @@
 <script>
 import {
   Form,
-  Input,
-  Upload,
-  message,
-  Cascader,
-  Button,
-  Select,
   Row,
   Col,
+  Button,
+  Input,
+  Cascader,
+  Upload,
+  message,
+  Spin,
+  Select,
   Drawer,
+  Empty,
   Tag,
+  Card,
   Modal,
-  Result
+  Result,
+  Popover
 } from "ant-design-vue";
-import { UploadOutlined } from "@ant-design/icons-vue";
+import { UploadOutlined, DownloadOutlined } 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 { delay } from "@/services/util";
 import regex from "@/services/regex";
+import { toBit } from "@/services/util";
 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) {
@@ -224,166 +297,220 @@ async function getAreaOptions(code) {
     }));
   }
 }
+const editfeildFlag = toBit("0001");
+const editPicFlag = toBit("0010");
+const editModifyFlag = toBit("0100");
 export default {
   components: {
     Form,
     FormItem: Form.Item,
-    Input,
-    Upload,
-    Cascader,
-    UploadOutlined,
-    Button,
-    Select,
-    Option: Select.Option,
     Row,
     Col,
+    Button,
+    Input,
+    Cascader,
+    Upload,
+    UploadOutlined,
+    Spin,
+    Select,
+    Option: Select.Option,
     Drawer,
+    Empty,
     Tag,
-    Result
+    Card,
+    Result,
+    DownloadOutlined,
+    Popover
   },
-  data() {
-    return {
-      uploadConfig: picUploadConfig,
-      labelCol: { span: 8 },
-      wrapperCol: { span: 14 },
-      form: {},
-      currentId: 0,
-      currentStatus: null,
-      unitApplyList: [],
-      areaOptions: [],
-      organizeList: [],
-      drawVisible: false,
-      disabled: true,
-      disableUpload: 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
+  setup() {
+    const modelRef = reactive({
+      id: null,
+      orderNo: null,
+      unitName: null,
+      tydm: "",
+      operatorName: "",
+      operatorId: "",
+      operatorPhone: "",
+      phoneCode: "",
+      code: [],
+      address: "",
+      loaPicId: null,
+      idCardFrontPicId: null,
+      idCardBackPicId: null,
+      businessLicensePicId: null
+    });
+    const loaPicFileList = ref([]);
+    const idCardFrontPicFileList = ref([]);
+    const idCardBackPicFileList = ref([]);
+    const businessLicenseFileList = 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" }
+      ],
+      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"
+        }
+      ],
+      phoneCode: [
+        { required: true, message: "请输入短信验证码", trigger: "change" }
+      ]
+    });
+    const { resetFields, validate, validateInfos } = useForm(
+      modelRef,
+      rulesRef
     );
-    this.isSuccess = !!unitApplyList.data.find(d => d.status == 1);
-    this.unitApplyList = unitApplyList.data;
-    if (current) {
-      this.initForm(current);
-    } else {
-      this.disabled = false;
-      this.disableUpload = false;
-    }
-  },
-  methods: {
-    handleChange(config, info) {
-      const name = config.name;
-      if (info.file.status !== "uploading") {
-        // console.log(info.file.status,info.file, info.fileList);
+    const useReload = inject("reload");
+    const queryUnitApply = async id => {
+      const res = await get("/api2/CA/QueryUnitApplyResult", {
+        id
+      });
+      if (res.errorCode == 0) {
+        Modal.success({
+          title: "完成",
+          content: "数字证书申领流程已完成",
+          onOk: useReload
+        });
+      } else {
+        Modal.info({ title: "当前状态", content: res.errorMsg });
       }
-      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} 文件上传失败`);
+    };
+    const sendUnitApply = async id => {
+      const resp = await get("/api2/CA/SendCreateOrder", {
+        orderId: id
+      });
+      if (resp.errorCode != 0) {
+        message.error(resp.errorMsg);
+      } else {
+        message.success("发起申请成功", 2, useReload);
       }
-      if (info.file.status === "removed") {
-        config.disabled = false;
-        this.form[name] = null;
+    };
+    const createUnitApply = async () => {
+      try {
+        await validate();
+        const resp = await post("/api2/CA/createUnitApply", toRaw(modelRef));
+        if (resp.errorCode != 0) {
+          message.error(resp.errorMsg);
+        } else {
+          message.success("提交成功", (onclose = useReload));
+          await sendUnitApply(resp.data);
+        }
+      } catch {
+        0;
       }
-    },
-    beforeUpload(file) {
+    };
+    const modifyUnitApply = async () => {
+      try {
+        await validate([
+          "loaPicId",
+          "idCardFrontPicId",
+          "idCardBackPicId",
+          "businessLicensePicId"
+        ]);
+        const resp = await post("/api2/CA/modifyUnitApply", toRaw(modelRef));
+        if (resp.errorCode != 0) {
+          message.error(resp.errorMsg);
+        } else {
+          message.success("提交成功", (onclose = useReload));
+          await sendUnitApply(resp.data);
+        }
+      } catch (error) {
+        1;
+      }
+    };
+    const onSubmit = async e => {
+      e.preventDefault();
+      if (progressingId == 0) {
+        if (modelRef.orderNo) {
+          await modifyUnitApply();
+        } else {
+          await createUnitApply();
+        }
+      } else {
+        var current = toRaw(unitApplyList.value).find(
+          p => p.id == progressingId
+        );
+        if (current.status == null) {
+          await sendUnitApply(progressingId);
+        } else if (current.status == 0) {
+          await queryUnitApply(progressingId);
+        }
+      }
+    };
+    const beforeUpload = file => {
       const isJpgOrPng =
         file.type === "image/jpeg" || file.type === "image/png";
       if (!isJpgOrPng) {
@@ -394,9 +521,29 @@ export default {
         message.error("文件大小超过2MB!");
       }
       return isJpgOrPng && isLt2M;
-    },
-    async loadAreaOptions(selectedOptions) {
-      console.log(selectedOptions);
+    };
+    const handleChange = (info, name) => {
+      console.log(info.file.status, info.file, info.fileList);
+      // if (info.file.status !== "uploading") {
+      // }
+      if (info.file.status === "done") {
+        message.success(`${info.file.name} 文件上传成功`);
+        modelRef[name] = info.file.response.id;
+        if (info.fileList.length > 1) {
+          info.fileList.shift();
+        }
+      } else if (info.file.status === "error") {
+        message.error(`${info.file.name} 文件上传失败`);
+        info.fileList.pop();
+      }
+      if (info.file.status === "removed") {
+        modelRef[name] = null;
+      }
+    };
+    const areaOptions = ref([]);
+    const spining = ref(false);
+    const organizeList = ref([]);
+    const loadAreaOptions = async selectedOptions => {
       const targetOption = selectedOptions[selectedOptions.length - 1];
       targetOption.loading = true;
       const options = await getAreaOptions(targetOption.value);
@@ -404,151 +551,162 @@ export default {
         targetOption.children = options;
       }
       targetOption.loading = false;
-      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) {
-        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("发起申请成功");
-          this.currentStatus = 0;
-        }
-      }
-    },
-    //查询结果
-    async queryOrder() {
-      const res = await get("/api2/CA/QueryUnitApplyResult", {
-        id: this.currentId
-      });
-      if (res.errorCode == 0) {
-        Modal.success({ title: "完成", content: "数字证书申领流程已完成" });
-        this.isSuccess = true;
-      } 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 getTydm = async () => {
+      const unitName = modelRef.unitName;
       const res = await get("/api2/CA/GetTydm", { unitName });
       if (res.errorCode !== 0) {
         message.error(res.errorMsg);
       } else {
-        this.form.tydm = res.data;
+        modelRef.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
+    };
+    const countdown = ref(0);
+    const getCode = async () => {
+      try {
+        await validate("operatorPhone");
+      } catch (error) {
+        return;
+      }
+      var res = await get("/api2/CA/GetPhoneCode", {
+        type: 1,
+        phone: modelRef.operatorPhone
       });
-      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;
-    }
+      if (res.errorCode !== 0) {
+        message.error(res.errorMsg);
+        return;
+      }
+      countdown.value = 60;
+      var handle = setInterval(() => {
+        countdown.value--;
+        countdown.value < 0 && clearInterval(handle);
+      }, 1000);
+    };
+    const editStatus = ref(toBit("0000"));
+    const disabledFeild = computed(
+      () => (editStatus.value & editfeildFlag) == 0
+    );
+    const disabledUpload = computed(
+      () => (editStatus.value & editPicFlag) == 0
+    );
+    const disabledModify = computed(
+      () => (editStatus.value & editModifyFlag) == 0
+    );
+    const initPage = unitApply => {
+      for (const key in toRaw(modelRef)) {
+        if (Object.hasOwnProperty.call(unitApply, key)) {
+          const element = unitApply[key];
+          modelRef[key] = element;
+        }
+      }
+      loaPicFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.loaPicPath
+        }
+      ];
+      idCardFrontPicFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.idCardFrontPicPath
+        }
+      ];
+      idCardBackPicFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.idCardBackPicPath
+        }
+      ];
+      businessLicenseFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.businessLicensePicPath
+        }
+      ];
+    };
+    const modifyOrder = unitApply => {
+      initPage(unitApply);
+      editStatus.value = toBit("0000") | editPicFlag | editModifyFlag;
+    };
+    let progressingId = 0;
+    const unitApplyList = ref([]);
+    const isSuccess = ref(false);
+    onMounted(async () => {
+      spining.value = true;
+      const options = await getAreaOptions("");
+      const organizeInfoRes = await get("/api2/UserInfo/Organize");
+      if (organizeInfoRes.errorCode != 0) {
+        message.error(organizeInfoRes.errorMsg);
+        spining.value = false;
+        return;
+      }
+      organizeList.value = organizeInfoRes.data;
+      const unitApplyListRes = await get("/api2/CA/UnitApplyList");
+      if (unitApplyListRes.errorCode != 0) {
+        message.error(unitApplyListRes.errorMsg);
+        spining.value = false;
+        return;
+      }
+      unitApplyList.value = unitApplyListRes.data;
+      const current = unitApplyListRes.data.find(
+        d => d.status == null || d.status == 0
+      );
+      if (current) {
+        progressingId = current.id;
+        initPage(current);
+      } else {
+        const successApply = unitApplyListRes.data.find(d => d.status == 1);
+        if (successApply) {
+          isSuccess.value = true;
+        } else {
+          editStatus.value =
+            editStatus.value | editfeildFlag | editPicFlag | editModifyFlag;
+        }
+      }
+      areaOptions.value = options;
+      spining.value = false;
+      console.log(toRaw(modelRef));
+    });
+    const showDrawer = ref(false);
+    const toggleDrawer = () => {
+      showDrawer.value = !showDrawer.value;
+    };
+    return {
+      modelRef,
+      loaPicFileList,
+      idCardFrontPicFileList,
+      idCardBackPicFileList,
+      businessLicenseFileList,
+      rulesRef,
+      validate,
+      validateInfos,
+      editStatus,
+      onSubmit,
+      resetFields,
+      beforeUpload,
+      handleChange,
+      areaOptions,
+      loadAreaOptions,
+      spining,
+      organizeList,
+      unitApplyList,
+      getTydm,
+      getCode,
+      countdown,
+      disabledFeild,
+      disabledUpload,
+      disabledModify,
+      showDrawer,
+      toggleDrawer,
+      isSuccess,
+      modifyOrder,
+      router: useRouter(),
+      progressingId
+    };
   }
 };
 </script>
diff --git a/src/views/CA/UserApply.composition.vue b/src/views/CA/UserApply.composition.vue
deleted file mode 100644
index 654ff1c..0000000
--- a/src/views/CA/UserApply.composition.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<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>