update 添加电子印章申领界面
This commit is contained in:
82
src/components/Upload.vue
Normal file
82
src/components/Upload.vue
Normal file
@@ -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>
|
||||||
@@ -1,9 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ca_index">
|
<div class="ca_index">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button type="primary">
|
<a-button>
|
||||||
<router-link to="/ca/userapply"> 个人数字证书申领入口 </router-link>
|
<router-link to="/ca/userapply"> 个人数字证书申领入口 </router-link>
|
||||||
</a-button>
|
</a-button>
|
||||||
|
<a-button type="primary">
|
||||||
|
<router-link to="/ca/sealapply"> 电子印章申请入口 </router-link>
|
||||||
|
</a-button>
|
||||||
<a-button>
|
<a-button>
|
||||||
<router-link to="/ca/unitapply"> 企业数字证书申领入口 </router-link>
|
<router-link to="/ca/unitapply"> 企业数字证书申领入口 </router-link>
|
||||||
</a-button>
|
</a-button>
|
||||||
|
|||||||
193
src/views/CA/SealApply.vue
Normal file
193
src/views/CA/SealApply.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user