From 6af9e8f15ed6b7f9ecb4eeba924d4324b59313ac Mon Sep 17 00:00:00 2001
From: zhangqi <2794379662@qq.com>
Date: Fri, 23 Apr 2021 17:52:50 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=B7=BB=E5=8A=A0=E7=94=B5=E5=AD=90?=
 =?UTF-8?q?=E5=8D=B0=E7=AB=A0=E7=94=B3=E9=A2=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload.vue  |  82 ++++++++++++++++
 src/views/CA/Index.vue     |   5 +-
 src/views/CA/SealApply.vue | 193 +++++++++++++++++++++++++++++++++++++
 3 files changed, 279 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Upload.vue
 create mode 100644 src/views/CA/SealApply.vue

diff --git a/src/components/Upload.vue b/src/components/Upload.vue
new file mode 100644
index 0000000..4232bcb
--- /dev/null
+++ b/src/components/Upload.vue
@@ -0,0 +1,82 @@
+<template>
+  <input v-model="props.fileId" hidden />
+  <a-upload
+    :accept="props.isPdf ? 'application/pdf' : 'image/*'"
+    action="/api2/upload/uploadfile"
+    v-model:fileList="fileList"
+    :beforeUpload="beforeUpload"
+    @change="handleChange"
+    :disabled="props.disabled"
+  >
+    <a-button block :disabled="props.disabled">
+      <UploadOutlined />
+      点击{{ props.fileId ? "替换" : "上传" }}
+    </a-button>
+  </a-upload>
+</template>
+<script>
+import { UploadOutlined } from "@ant-design/icons-vue";
+import { message } from "ant-design-vue";
+import { ref } from "vue";
+export default {
+  name: "Upload",
+  props: {
+    name: String,
+    fileId: Number,
+    fileUrl: String,
+    isPdf: Boolean,
+    disabled: Boolean
+  },
+  components: {
+    UploadOutlined
+  },
+  setup(props, context) {
+    var fileList = ref([]);
+    if (!props.fileId && props.fileUrl) {
+      fileList.value.push({
+        uid: "-1",
+        status: "done",
+        url: props.fileUrl,
+        name: props.fileName
+      });
+    }
+    const updateValue = value => {
+      context.emit("update:fileId", value); // 传递的方法
+    };
+    const beforeUpload = file => {
+      console.log(file);
+      const isValid =
+        props.isPdf === true
+          ? file.type === "application/pdf"
+          : file.type === "image/jpeg" || file.type === "image/png";
+      if (!isValid) {
+        message.error("只能上传受支持格式的文件");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        message.error("文件大小超过2MB!");
+      }
+      return isValid && isLt2M;
+    };
+    const handleChange = info => {
+      console.log(info.file.status, info.file, info.fileList);
+      // if (info.file.status !== "uploading") {
+      // }
+      if (info.file.status === "done") {
+        message.success(`${info.file.name} 文件上传成功`);
+        updateValue(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") {
+        updateValue(null);
+      }
+    };
+    return { props, fileList, beforeUpload, handleChange, updateValue };
+  }
+};
+</script>
diff --git a/src/views/CA/Index.vue b/src/views/CA/Index.vue
index 1996e42..8f7006a 100644
--- a/src/views/CA/Index.vue
+++ b/src/views/CA/Index.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="ca_index">
     <a-space>
-      <a-button type="primary">
+      <a-button>
         <router-link to="/ca/userapply"> 个人数字证书申领入口 </router-link>
       </a-button>
+      <a-button type="primary">
+        <router-link to="/ca/sealapply"> 电子印章申请入口 </router-link>
+      </a-button>
       <a-button>
         <router-link to="/ca/unitapply"> 企业数字证书申领入口 </router-link>
       </a-button>
diff --git a/src/views/CA/SealApply.vue b/src/views/CA/SealApply.vue
new file mode 100644
index 0000000..2404110
--- /dev/null
+++ b/src/views/CA/SealApply.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="seal-apply">
+    <a-form
+      :model="formModel"
+      :label-col="{ span: 9 }"
+      :wrapper-col="{ span: 15 }"
+    >
+      <a-form-item label="印章类型">
+        <a-radio-group v-model:value="formModel.sealType" button-style="solid">
+          <a-radio value="0" :disabled="disableEdit">个人电子印章</a-radio>
+          <a-radio value="1" :disabled="disableEdit">法人电子印章</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        :label="formModel.sealType == '1' ? '统一信用代码' : '身份证号码'"
+      >
+        <a-input
+          v-model:value="formModel.idCardNumOrTydm"
+          :disabled="disableEdit"
+        />
+      </a-form-item>
+      <a-form-item label="印章名称">
+        <a-input v-model:value="formModel.sealName" :disabled="disableEdit" />
+      </a-form-item>
+      <a-form-item label="印章申领表">
+        <Upload
+          v-model:fileId="formModel.sealImageId"
+          name="印章申领表"
+          :disabled="disableEdit"
+          :fileUrl="filePath"
+        />
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
+        <a-button v-if="progressingId" type="primary" @click="onSubmit"
+          >查询</a-button
+        >
+        <a-button v-else type="primary" @click="onSubmit">提交</a-button>
+        <a-button style="margin-left: 10px" @click="toggleDrawer"
+          >历史提交记录</a-button
+        >
+      </a-form-item>
+    </a-form>
+  </div>
+  <a-drawer
+    title="历史记录"
+    placement="right"
+    :closable="false"
+    v-model:visible="showDrawer"
+    width="450px"
+  >
+    <a-empty v-if="!(sealApplyList && sealApplyList.length > 0)" />
+    <div
+      v-for="sealApply in sealApplyList"
+      :key="sealApply.id"
+      style="padding: 10px"
+    >
+      <a-card size="small">
+        <template #title>
+          {{ sealApply.sealName
+          }}<a-tag
+            style="margin-left:4px;"
+            :color="status[sealApply.status].color"
+            >{{ status[sealApply.status].text }}</a-tag
+          >
+        </template>
+        <p>类型: {{ sealApply.type == 0 ? "个人电子印章" : "法人电子印章" }}</p>
+        <p>
+          {{ sealApply.type == 0 ? "身份证号码" : "统一信用代码" }}:
+          {{ sealApply.idCardNumOrTydm }}
+        </p>
+        <p>发起时间: {{ sealApply.createTime }}</p>
+        <p v-if="sealApply.dealReason">
+          不通过原因:{{ sealApply.rejectMsg }}
+        </p></a-card
+      >
+    </div>
+  </a-drawer>
+</template>
+<style>
+.seal-apply {
+  width: 550px;
+}
+</style>
+<script>
+import Upload from "@/components/Upload";
+import { onMounted, reactive, ref } from "vue";
+import { get, post } from "@/services/http";
+import { message } from "ant-design-vue";
+export default {
+  components: {
+    Upload
+  },
+  setup() {
+    var formModel = reactive({
+      sealType: "",
+      sealName: "",
+      idCardNumOrTydm: "",
+      sealImageId: 0
+    });
+    var sealApplyList = ref([]);
+    var progressingId = ref(0);
+    var disableEdit = ref(false);
+    var filePath;
+    var showDrawer = ref(false);
+    onMounted(async () => {
+      var resp = await get("/api2/ca/sealApplyList");
+      if (resp.data) {
+        sealApplyList.value = resp.data;
+        var currentApply = sealApplyList.value.find(
+          p => p.status == 0 || p.status == 1
+        );
+        progressingId.value = currentApply?.id || 0;
+        disableEdit.value = progressingId.value !== 0;
+        if (currentApply) {
+          formModel.sealType = currentApply.sealType;
+          formModel.sealName = currentApply.sealName;
+          formModel.idCardNumOrTydm = currentApply.idCardNumOrTydm;
+          filePath = currentApply.sealApplyFilePath;
+        }
+      }
+    });
+    async function createSealApply() {
+      var resp = await post("/api2/ca/sealApply", formModel);
+      if (resp.errorCode == 0) {
+        message.success("创建成功");
+      } else {
+        message.error(resp.errorMsg);
+      }
+    }
+    async function sendSealApply(id) {
+      var resp = await post("/api2/ca/sendSealApply", { id });
+      if (resp.errorCode == 0) {
+        message.success("申请成功");
+      } else {
+        message.error(resp.errorMsg);
+      }
+    }
+    async function querySealApply(id) {
+      var resp = await get("/api2/ca/querySealApply", { id });
+      if (resp.errorCode == 0) {
+        message.success("申请成功");
+      } else {
+        message.error(resp.errorMsg);
+      }
+    }
+    async function onSubmit() {
+      if (progressingId.value) {
+        var sealApply = sealApplyList.value.find(
+          p => p.id == progressingId.value
+        );
+        if (sealApply.status == 0) {
+          await sendSealApply(progressingId.value);
+        } else {
+          await querySealApply(progressingId.value);
+        }
+      } else {
+        await createSealApply();
+      }
+    }
+    const toggleDrawer = () => {
+      showDrawer.value = !showDrawer.value;
+    };
+    return {
+      formModel,
+      sealApplyList,
+      progressingId,
+      onSubmit,
+      disableEdit,
+      filePath,
+      showDrawer,
+      toggleDrawer,
+      status: {
+        0: {
+          color: "orange",
+          text: "未申领"
+        },
+        1: {
+          color: "orange",
+          text: "审核中"
+        },
+        2: {
+          color: "greeb",
+          text: "进行中"
+        },
+        3: {
+          color: "red",
+          text: "申请拒绝"
+        }
+      }
+    };
+  }
+};
+</script>