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>
|
||||
<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>
|
||||
|
||||
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