update:个人申请数字证书流程

src/main.js

@@ -1,7 +1,8 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
-
+import { Form } from "ant-design-vue";
 createApp(App)
   .use(router)
+  .use(Form)
   .mount("#app");

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Home from "../views/Home.vue";
+import CA from "../views/CA.vue";
 import CA_Index from "../views/CA/Index.vue";
 import CA_User from "../views/CA/UserApply.vue";
 import CA_Unit from "../views/CA/UnitApply.vue";
@@ -12,15 +13,22 @@ const routes = [
   },
   {
     path: "/CA",
-    component: CA_Index,
+    component: CA,
+    name: "数字证书申领",
     children: [
+      {
+        path: "",
+        component: CA_Index
+      },
       {
         path: "user",
-        component: CA_User
+        component: CA_User,
+        name: "个人数字证书申领"
       },
       {
         path: "unit",
-        component: CA_Unit
+        component: CA_Unit,
+        name: "企业数字证书申领"
       }
     ]
   }

src/services/http.js

@@ -1,7 +1,28 @@
+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) {
     return response.data;
+  } else if (response.status == 401) {
+    message.warning(
+      "未登录或身份认证信息已过期",
+      (onclose = () => {
+        top && top.login();
+      })
+    );
+  }
+}
+export async function post(url, data) {
+  var response = await axios.post(url, data);
+  if (response.status == 200) {
+    return response.data;
+  } else if (response.status == 401) {
+    message.warning(
+      "未登录或身份认证信息已过期",
+      (onclose = () => {
+        top && top.login();
+      })
+    );
   }
 }

src/views/CA.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="ca">
+    <router-view></router-view>
+  </div>
+</template>
+<style lang="less" scoped>
+.ca {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+}
+</style>

src/views/CA/Index.vue

@@ -1,19 +1,23 @@
 <template>
   <div class="ca_index">
-    数字证书管理
+    <Space>
-    <router-view></router-view>
+      <Button type="primary">
+        <router-link to="/ca/user"> 个人数字证书申领入口 </router-link>
+      </Button>
+      <Button>
+        <router-link to="/ca/unit"> 企业数字证书申领入口 </router-link>
+      </Button>
+    </Space>
   </div>
+  <router-view></router-view>
 </template>
 <style lang="less" scoped></style>
 <script>
-import { get } from "@/services/http.js";
+import { Button, Space } from "ant-design-vue";
+// import { get } from "@/services/http.js";
 
 export default {
   name: "index",
-  components: {},
+  components: { Button, Space }
-  async created() {
-    var res = await get("/api2/dictionary/children", { code: "abc" });
-    console.log(res);
-  }
 };
 </script>

src/views/CA/UserApply.vue

@@ -1,7 +1,142 @@
 <template>
-  <div class="ca_apply">
+  <div class="ca-apply">
-    ca_user_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="onSubmit" 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>
-<script></script>
+.ca-apply {
+  width: 600px;
+}
+</style>
+<script>
+import { Form, Input, Button, Select, message, Drawer } from "ant-design-vue";
+import { get, post } from "@/services/http";
+export default {
+  data() {
+    return {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 10 },
+      form: {
+        idCardNo: "",
+        idCardName: "",
+        unitName: "",
+        phone: ""
+      },
+      rules: {
+        idCardNo: [
+          { required: true, message: "请输入18位身份证号码", trigger: "blur" }
+        ],
+        idCardName: [
+          { required: true, message: "请输入真实姓名", trigger: "blur" }
+        ],
+        unitName: [
+          { required: true, message: "请选择你的单位名称", trigger: "change" }
+        ],
+        phone: [
+          { required: true, message: "请输入你的手机号码", trigger: "blur" }
+        ]
+      },
+      userApplyList: [],
+      organizeList: [],
+      drawVisible: false,
+      disableEdit: true
+    };
+  },
+  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 {
+        message.success("录入完成即将进入申请页面");
+      }
+    }
+  },
+  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;
+    } else {
+      this.disableEdit = false;
+    }
+  }
+};
+</script>

vue.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  publicPath: "/www",
+  publicPath: "/spa",
   css: {
     loaderOptions: {
       less: {