sgt_ca_app/src/views/CA/UserApply.vue

<template>
  <div class="ca-apply">
    <Form
      ref="ruleForm"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
    >
      <FormItem label="真实姓名" name="idCardName">
        <Input v-model:value="form.idCardName" :disabled="disableEdit" />
      </FormItem>
      <FormItem label="身份证号码" name="idCardNo">
        <Input v-model:value="form.idCardNo" :disabled="disableEdit" />
      </FormItem>
      <FormItem label="所在单位名称" name="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="手机号码" name="phone">
        <Input v-model:value="form.phone" :disabled="disableEdit" />
      </FormItem>
      <FormItem :wrapperCol="{ span: 10, offset: 8 }">
        <Button type="primary" @click="onSubmit" v-if="!disableEdit"
          >前往申领</Button
        >
        <Button type="primary" @click="getStatus" v-if="disableEdit"
          >继续申领流程</Button
        >
        <Button style="margin-left: 10px" @click="showDrawer"
          >历史申领记录</Button
        >
      </FormItem>
    </Form>
  </div>
  <Drawer
    title="历史申领记录"
    placement="right"
    :closable="false"
    v-model:visible="drawVisible"
  >
    <p v-for="userApply in userApplyList" :key="userApply.id">
      {{ `${userApply.idCardName}-${userApply.phone}-${userApply.unitName}` }}
    </p>
  </Drawer>
</template>
<style lang="less" scoped>
.ca-apply {
  width: 600px;
}
</style>
<script>
import { Form, Input, Button, Select, message, Drawer } from "ant-design-vue";
import { get, post } from "@/services/http";
import regex from "@/services/regex";
export default {
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
      form: {
        idCardNo: "",
        idCardName: "",
        unitName: "",
        phone: ""
      },
      rules: {
        idCardNo: [
          { required: true, message: "请输入18位身份证号码", trigger: "blur" },
          {
            pattern: regex.IdCardNo,
            message: "输入正确的18位身份证号码",
            trigger: "blur"
          }
        ],
        idCardName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        unitName: [
          { required: true, message: "请选择你的单位名称", trigger: "change" }
        ],
        phone: [
          { required: true, message: "请输入你的手机号码", trigger: "blur" },
          {
            pattern: regex.Phone,
            message: "请输入正确的11位手机号码",
            trigger: "blur"
          }
        ]
      },
      userApplyList: [],
      organizeList: [],
      drawVisible: false,
      disableEdit: true,
      currentApplyId: 0
    };
  },
  methods: {
    showDrawer() {
      this.drawVisible = true;
    },
    async onSubmit() {
      try {
        await this.$refs.ruleForm.validate();
      } catch (error) {
        console.log("error", error);
        return;
      }
      const resp = await post("/api2/CA/createUserApply", this.form);
      if (resp.errorCode != 0) {
        message.error(resp.errorMsg);
      } else {
        this.currentApplyId = resp.data;
        message.success(
          "录入完成即将进入申请页面",
          (onclose = () => this.goCertUrl())
        );
      }
    },
    async goCertUrl() {
      const res = await get("/api2/CA/GetRedirectUrl", {
        applyId: this.currentApplyId
      });
      if (res.errorCode == 0) {
        // window.open(res.data);
        location.href = res.data;
      } else {
        message.error(res.errorMsg);
      }
    },
    async getStatus() {
      const res = await get("/api2/CA/UserApplyGetStatus", {
        id: this.currentApplyId
      });
      if (res.errorCode == 0) {
        const status = res.data;
        message.info(
          "当前状态:" +
            [
              "待审核,请耐心等待结果",
              "审核通过,请等待授权通过",
              "已授权，请等待证书发放",
              "已发放，申领已完成",
              "已拒绝，请重新申请或联系管理员"
            ][status]
        );
      } else {
        await this.goCertUrl();
      }
    }
  },
  components: {
    Form,
    Input,
    FormItem: Form.Item,
    Button,
    Select,
    Option: Select.Option,
    Drawer
  },
  created: async function() {
    //获取所在组织信息和个人数字认证信息
    const organizeInfo = await get("/api2/UserInfo/Organize");
    const userApplyList = await get("/api2/CA/UserApplyList");
    console.log(userApplyList);
    if (organizeInfo.errorCode !== 0 || userApplyList.errorCode !== 0) {
      message.error("数据异常请稍后重试");
      return;
    }
    this.organizeList = organizeInfo.data;
    this.userApplyList = userApplyList.data;
    var current = this.userApplyList.find(p => p.status === null);
    if (current) {
      this.form.idCardName = current.idCardName;
      this.form.idCardNo = current.idCardNo;
      this.form.unitName = current.unitName;
      this.form.phone = current.phone;
      this.currentApplyId = current.id;
    } else {
      this.disableEdit = false;
    }
  }
};
</script>