update:CA相关代码整理

This commit is contained in:
2021-02-05 11:12:06 +08:00
parent 7732eee52d
commit c5746051df
5 changed files with 615 additions and 1325 deletions

View File

@@ -2,10 +2,10 @@
<div class="ca_index">
<Space>
<Button type="primary">
<router-link to="/ca/user"> 个人数字证书申领入口 </router-link>
<router-link to="/ca/userapply"> 个人数字证书申领入口 </router-link>
</Button>
<Button>
<router-link to="/ca/composition"> 企业数字证书申领入口 </router-link>
<router-link to="/ca/unitapply"> 企业数字证书申领入口 </router-link>
</Button>
</Space>
</div>

View File

@@ -1,30 +0,0 @@
<template>
<Result
status="success"
title="您的企业已经完成数字证书申领"
sub-title="已经申领过数字证书的企业无法再次申领如需补办请联系管理人员"
>
<template #extra>
<!-- <Button type="primary">
申请补办
</Button> -->
<Button @click="router.back()"> 返回 </Button>
</template>
</Result>
</template>
<script>
import { Result, Button } from "ant-design-vue";
import { useRouter } from "vue-router";
export default {
components: {
Result,
Button
},
setup() {
const router = useRouter();
return {
router
};
}
};
</script>

View File

@@ -1,712 +0,0 @@
<template>
<div class="ca-apply">
<Result
v-if="isSuccess"
status="success"
title="您的企业已经完成数字证书申领"
sub-title="已经申领过数字证书的企业无法再次申领如需补办请联系管理人员"
>
<template #extra>
<!-- <Button type="primary">
申请补办
</Button> -->
<Button @click="router.back()" type="primary"> 返回 </Button>
<Button style="margin-left: 10px" @click="toggleDrawer"
>历史提交记录</Button
>
</template>
</Result>
<Spin v-else :spinning="spining">
<Form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
<Row>
<Col :span="11">
<FormItem label="企业名称" v-bind="validateInfos.unitName">
<Select
v-model:value="modelRef.unitName"
@change="getTydm"
:disabled="disabledFeild"
placeholder="请选择企业名称"
>
<Option
v-for="organize in organizeList"
:key="organize.id"
:value="organize.name"
>{{ organize.name }}</Option
>
</Select>
</FormItem>
<FormItem label="统一社会信用代码" v-bind="validateInfos.tydm">
<Input
v-model:value="modelRef.tydm"
readonly
:disabled="disabledFeild"
placeholder="根据企业名称自动获取"
/>
</FormItem>
<FormItem label="经办人姓名" v-bind="validateInfos.operatorName">
<Input
v-model:value="modelRef.operatorName"
:disabled="disabledFeild"
placeholder="请输入经办人姓名"
/>
</FormItem>
<FormItem label="经办人身份证" v-bind="validateInfos.operatorId">
<Input
v-model:value="modelRef.operatorId"
:disabled="disabledFeild"
placeholder="请输入经办人身份证号码"
/>
</FormItem>
<FormItem label="经办人手机号" v-bind="validateInfos.operatorPhone">
<Input
v-model:value="modelRef.operatorPhone"
:disabled="disabledFeild"
placeholder="请输入经办人手机号码"
/>
</FormItem>
<FormItem label="手机验证码" v-bind="validateInfos.phoneCode">
<Row :gutter="8">
<Col :span="12">
<Input
v-model:value="modelRef.phoneCode"
:disabled="disabledFeild"
/>
</Col>
<Col :span="12">
<Button
:disabled="disabledFeild || countdown > 0"
@click="getCode"
>
获取验证码{{ countdown > 0 ? `(${countdown})` : "" }}
</Button>
</Col>
</Row>
</FormItem>
<FormItem label="省市区信息" v-bind="validateInfos.code">
<Cascader
v-model:value="modelRef.code"
placeholder="请选择省市区信息"
:options="areaOptions"
:load-data="loadAreaOptions"
:disabled="disabledFeild"
/>
</FormItem>
<FormItem label="邮寄地址" v-bind="validateInfos.address">
<Input
v-model:value="modelRef.address"
:disabled="disabledFeild"
placeholder="请输入证书邮寄地址"
/>
</FormItem>
</Col>
<Col :span="11">
<FormItem label="授权委托书" v-bind="validateInfos.loaPicId">
<input v-model="modelRef.loaPicId" hidden />
<Upload
accept="image/*"
action="/api2/upload/uploadfile"
v-model:fileList="loaPicFileList"
:beforeUpload="beforeUpload"
list-type="picture"
@change="info => handleChange(info, 'loaPicId')"
:disabled="disabledUpload"
>
<Button block :disabled="disabledUpload">
<UploadOutlined />
点击{{ modelRef.loaPicId ? "替换" : "上传" }}
</Button>
</Upload>
</FormItem>
<FormItem
label="身份证正面照"
v-bind="validateInfos.idCardFrontPicId"
>
<input v-model="modelRef.idCardFrontPicId" hidden />
<Upload
accept="image/*"
action="/api2/upload/uploadfile"
v-model:fileList="idCardFrontPicFileList"
:beforeUpload="beforeUpload"
list-type="picture"
@change="info => handleChange(info, 'idCardFrontPicId')"
:disabled="disabledUpload"
>
<Button block :disabled="disabledUpload">
<UploadOutlined />
点击{{ modelRef.idCardFrontPicId ? "替换" : "上传" }}
</Button>
</Upload>
</FormItem>
<FormItem
label="身份证背面照"
v-bind="validateInfos.idCardBackPicId"
>
<input v-model="modelRef.idCardBackPicId" hidden />
<Upload
accept="image/*"
action="/api2/upload/uploadfile"
v-model:fileList="idCardBackPicFileList"
:beforeUpload="beforeUpload"
list-type="picture"
@change="info => handleChange(info, 'idCardBackPicId')"
:disabled="disabledUpload"
>
<Button block :disabled="disabledUpload">
<UploadOutlined />
点击{{ modelRef.idCardBackPicId ? "替换" : "上传" }}
</Button>
</Upload>
</FormItem>
<FormItem
label="营业许可证照片"
v-bind="validateInfos.businessLicensePicId"
>
<input v-model="modelRef.businessLicensePicId" hidden />
<Upload
accept="image/*"
action="/api2/upload/uploadfile"
v-model:fileList="businessLicenseFileList"
:beforeUpload="beforeUpload"
list-type="picture"
@change="info => handleChange(info, 'businessLicensePicId')"
:disabled="disabledUpload"
>
<Button block :disabled="disabledUpload">
<UploadOutlined />
点击{{ modelRef.businessLicensePicId ? "替换" : "上传" }}
</Button>
</Upload>
</FormItem>
</Col>
<Col :span="2">
<FormItem>
<Popover title="说明">
<template #content>
<p>请将两页纸一起拍照或扫描上传</p>
</template>
<Button type="link"
><a
href="http://183.136.157.18:7308/stgl/sources/202102/授权书模板.doc"
download="授权书模板.doc"
target="_blank"
><DownloadOutlined />模板</a
></Button
>
</Popover>
</FormItem>
</Col>
</Row>
<FormItem :wrapper-col="{ span: 12, offset: 10 }">
<Button v-if="progressingId" type="primary" @click="onSubmit"
>查询</Button
>
<Button v-else type="primary" @click="onSubmit">提交</Button>
<Button style="margin-left: 10px" @click="toggleDrawer"
>历史提交记录</Button
>
</FormItem>
</Form>
</Spin>
</div>
<Drawer
title="历史申领记录"
placement="right"
:closable="false"
v-model:visible="showDrawer"
width="450px"
>
<Empty v-if="!(unitApplyList && unitApplyList.length > 0)" />
<div
v-for="unitApply in unitApplyList"
:key="unitApply.id"
style="padding: 10px"
>
<Card size="small">
<template #title>
{{ unitApply.unitName
}}<Tag
style="margin-left:4px;"
:color="['orange', 'green', 'red'][unitApply.status]"
>{{
["进行中", "已成功", "已失败"][unitApply.status] || "未申领"
}}</Tag
>
</template>
<template #extra>
<Button
v-if="unitApply.status == 2"
type="link"
@click="modifyOrder(unitApply)"
:disabled="disabledModify"
>重新申请</Button
>
</template>
<p>
经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}
</p>
<p>发起时间: {{ unitApply.time }}</p>
<p v-if="unitApply.dealReason">
不通过原因:{{ unitApply.dealReason }}
</p></Card
>
</div>
</Drawer>
</template>
<style lang="less">
.ca-apply {
width: 800px;
.ant-upload {
width: 100%;
}
}
</style>
<script>
import {
Form,
Row,
Col,
Button,
Input,
Cascader,
Upload,
message,
Spin,
Select,
Drawer,
Empty,
Tag,
Card,
Modal,
Result,
Popover
} from "ant-design-vue";
import { UploadOutlined, DownloadOutlined } from "@ant-design/icons-vue";
import { useForm } from "@ant-design-vue/use";
import { computed, onMounted, reactive, ref, toRaw, inject } from "vue";
import { get, post } from "@/services/http";
import regex from "@/services/regex";
import { toBit } from "@/services/util";
import { useRouter } from "vue-router";
async function getAreaOptions(code) {
const res = await get("/api2/CA/AreaOptions", { code });
if (res.errorCode == 0) {
return res.data.map(p => ({
label: p.name,
value: p.code,
isLeaf: p.divisionLevel == 3
}));
}
}
const editfeildFlag = toBit("0001");
const editPicFlag = toBit("0010");
const editModifyFlag = toBit("0100");
export default {
components: {
Form,
FormItem: Form.Item,
Row,
Col,
Button,
Input,
Cascader,
Upload,
UploadOutlined,
Spin,
Select,
Option: Select.Option,
Drawer,
Empty,
Tag,
Card,
Result,
DownloadOutlined,
Popover
},
setup() {
const modelRef = reactive({
id: null,
orderNo: null,
unitName: null,
tydm: "",
operatorName: "",
operatorId: "",
operatorPhone: "",
phoneCode: "",
code: [],
address: "",
loaPicId: null,
idCardFrontPicId: null,
idCardBackPicId: null,
businessLicensePicId: null
});
const loaPicFileList = ref([]);
const idCardFrontPicFileList = ref([]);
const idCardBackPicFileList = ref([]);
const businessLicenseFileList = ref([]);
const rulesRef = reactive({
operatorId: [
{ required: true, message: "请输入18位身份证号码", trigger: "blur" },
{
pattern: regex.IdCardNo,
message: "输入正确的18位身份证号码",
trigger: "blur"
}
],
operatorName: [
{ required: true, message: "请输入经办人姓名", trigger: "blur" }
],
unitName: [
{ required: true, message: "请选择企业名称", trigger: "change" }
],
operatorPhone: [
{ required: true, message: "请输入你的手机号码", trigger: "blur" },
{
pattern: regex.Phone,
message: "请输入正确的11位手机号码",
trigger: "blur"
}
],
tydm: [
{
required: true,
message: "请输入企业统一社会信用代码",
trigger: "blur"
},
{
pattern: regex.Tydm,
message: "请输入正确的18位统一社会信用代码",
trigger: "blur"
}
],
address: [{ required: true, message: "请输入邮寄信息", trigger: "blur" }],
code: [
{
required: true,
message: "请选择省市区信息",
trigger: "blur",
transform: v => v && v.join("-")
},
{
pattern: /\d+-\d+-\d+/,
message: "信息不完整",
trigger: "blur",
transform: v => v && v.join("-")
}
],
loaPicId: [
{
required: true,
message: "请上传授权承诺书照片",
trigger: "change",
type: "number"
}
],
idCardFrontPicId: [
{
required: true,
message: "请上传身份证正面照片",
trigger: "change",
type: "number"
}
],
idCardBackPicId: [
{
required: true,
message: "请上传身份证背面照片",
trigger: "change",
type: "number"
}
],
businessLicensePicId: [
{
required: true,
message: "请上营业执照照片",
trigger: "change",
type: "number"
}
],
phoneCode: [
{ required: true, message: "请输入短信验证码", trigger: "change" }
]
});
const { resetFields, validate, validateInfos } = useForm(
modelRef,
rulesRef
);
const useReload = inject("reload");
const queryUnitApply = async id => {
const res = await get("/api2/CA/QueryUnitApplyResult", {
id
});
if (res.errorCode == 0) {
Modal.success({
title: "完成",
content: "数字证书申领流程已完成",
onOk: useReload
});
} else {
Modal.info({ title: "当前状态", content: res.errorMsg });
}
};
const sendUnitApply = async id => {
const resp = await get("/api2/CA/SendCreateOrder", {
orderId: id
});
if (resp.errorCode != 0) {
message.error(resp.errorMsg);
} else {
message.success("发起申请成功", 2, useReload);
}
};
const createUnitApply = async () => {
try {
await validate();
const resp = await post("/api2/CA/createUnitApply", toRaw(modelRef));
if (resp.errorCode != 0) {
message.error(resp.errorMsg);
} else {
message.success("提交成功", (onclose = useReload));
await sendUnitApply(resp.data);
}
} catch {
0;
}
};
const modifyUnitApply = async () => {
try {
await validate([
"loaPicId",
"idCardFrontPicId",
"idCardBackPicId",
"businessLicensePicId"
]);
const resp = await post("/api2/CA/modifyUnitApply", toRaw(modelRef));
if (resp.errorCode != 0) {
message.error(resp.errorMsg);
} else {
message.success("提交成功", (onclose = useReload));
await sendUnitApply(resp.data);
}
} catch (error) {
1;
}
};
const onSubmit = async e => {
e.preventDefault();
if (progressingId == 0) {
if (modelRef.orderNo) {
await modifyUnitApply();
} else {
await createUnitApply();
}
} else {
var current = toRaw(unitApplyList.value).find(
p => p.id == progressingId
);
if (current.status == null) {
await sendUnitApply(progressingId);
} else if (current.status == 0) {
await queryUnitApply(progressingId);
}
}
};
const beforeUpload = file => {
const isJpgOrPng =
file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error("只能上传jpeg/png格式的图片文件");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("文件大小超过2MB!");
}
return isJpgOrPng && isLt2M;
};
const handleChange = (info, name) => {
console.log(info.file.status, info.file, info.fileList);
// if (info.file.status !== "uploading") {
// }
if (info.file.status === "done") {
message.success(`${info.file.name} 文件上传成功`);
modelRef[name] = 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") {
modelRef[name] = null;
}
};
const areaOptions = ref([]);
const spining = ref(false);
const organizeList = ref([]);
const loadAreaOptions = async selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
const options = await getAreaOptions(targetOption.value);
if (options) {
targetOption.children = options;
}
targetOption.loading = false;
};
const getTydm = async () => {
const unitName = modelRef.unitName;
const res = await get("/api2/CA/GetTydm", { unitName });
if (res.errorCode !== 0) {
message.error(res.errorMsg);
} else {
modelRef.tydm = res.data;
}
};
const countdown = ref(0);
const getCode = async () => {
try {
await validate("operatorPhone");
} catch (error) {
return;
}
var res = await get("/api2/CA/GetPhoneCode", {
type: 1,
phone: modelRef.operatorPhone
});
if (res.errorCode !== 0) {
message.error(res.errorMsg);
return;
}
countdown.value = 60;
var handle = setInterval(() => {
countdown.value--;
countdown.value < 0 && clearInterval(handle);
}, 1000);
};
const editStatus = ref(toBit("0000"));
const disabledFeild = computed(
() => (editStatus.value & editfeildFlag) == 0
);
const disabledUpload = computed(
() => (editStatus.value & editPicFlag) == 0
);
const disabledModify = computed(
() => (editStatus.value & editModifyFlag) == 0
);
const initPage = unitApply => {
for (const key in toRaw(modelRef)) {
if (Object.hasOwnProperty.call(unitApply, key)) {
const element = unitApply[key];
modelRef[key] = element;
}
}
loaPicFileList.value = [
{
uid: "-1",
status: "done",
url: unitApply.loaPicPath
}
];
idCardFrontPicFileList.value = [
{
uid: "-1",
status: "done",
url: unitApply.idCardFrontPicPath
}
];
idCardBackPicFileList.value = [
{
uid: "-1",
status: "done",
url: unitApply.idCardBackPicPath
}
];
businessLicenseFileList.value = [
{
uid: "-1",
status: "done",
url: unitApply.businessLicensePicPath
}
];
};
const modifyOrder = unitApply => {
initPage(unitApply);
editStatus.value = toBit("0000") | editPicFlag | editModifyFlag;
};
let progressingId = 0;
const unitApplyList = ref([]);
const isSuccess = ref(false);
onMounted(async () => {
spining.value = true;
const options = await getAreaOptions("");
const organizeInfoRes = await get("/api2/UserInfo/Organize");
if (organizeInfoRes.errorCode != 0) {
message.error(organizeInfoRes.errorMsg);
spining.value = false;
return;
}
organizeList.value = organizeInfoRes.data;
const unitApplyListRes = await get("/api2/CA/UnitApplyList");
if (unitApplyListRes.errorCode != 0) {
message.error(unitApplyListRes.errorMsg);
spining.value = false;
return;
}
unitApplyList.value = unitApplyListRes.data;
const current = unitApplyListRes.data.find(
d => d.status == null || d.status == 0
);
if (current) {
progressingId = current.id;
initPage(current);
} else {
const successApply = unitApplyListRes.data.find(d => d.status == 1);
if (successApply) {
isSuccess.value = true;
} else {
editStatus.value =
editStatus.value | editfeildFlag | editPicFlag | editModifyFlag;
}
}
areaOptions.value = options;
spining.value = false;
console.log(toRaw(modelRef));
});
const showDrawer = ref(false);
const toggleDrawer = () => {
showDrawer.value = !showDrawer.value;
};
return {
modelRef,
loaPicFileList,
idCardFrontPicFileList,
idCardBackPicFileList,
businessLicenseFileList,
rulesRef,
validate,
validateInfos,
editStatus,
onSubmit,
resetFields,
beforeUpload,
handleChange,
areaOptions,
loadAreaOptions,
spining,
organizeList,
unitApplyList,
getTydm,
getCode,
countdown,
disabledFeild,
disabledUpload,
disabledModify,
showDrawer,
toggleDrawer,
isSuccess,
modifyOrder,
router: useRouter(),
progressingId
};
}
};
</script>

File diff suppressed because it is too large Load Diff

View File

@@ -1,126 +0,0 @@
<template>
<div class="ca-apply">
<Form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<FormItem label="真实姓名" v-bind="validateInfos.idCardName">
<Input v-model:value="form.idCardName" :disabled="disableEdit" />
</FormItem>
<FormItem label="身份证号码" v-bind="validateInfos.idCardNo">
<Input v-model:value="form.idCardNo" :disabled="disableEdit" />
</FormItem>
<FormItem label="所在单位名称" v-bind="validateInfos.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="手机号码" v-bind="validateInfos.phone">
<Input v-model:value="form.phone" :disabled="disableEdit" />
</FormItem>
<FormItem label="收件人" v-bind="validateInfos.idCardNo">
<Input v-model:value="form.receiverName" :disadbled="disableEdit" />
</FormItem>
<FormItem label="联系电话" v-bind="validateInfos.idCardNo">
<Input v-model:value="form.receiverPhone" :disadbled="disableEdit" />
</FormItem>
<FormItem label="邮寄地址" v-bind="validateInfos.address">
<Input v-model:value="form.address" :disabled="disableEdit" />
</FormItem>
<FormItem :wrapperCol="{ span: 10, offset: 8 }">
<Button type="primary" @click="onSubmit">前往申领</Button>
<Button style="margin-left: 10px" @click="changeDisabled"
>历史申领记录</Button
>
</FormItem>
</Form>
</div>
<Drawer title="历史申领记录" placement="right" :closable="false"> </Drawer>
</template>
<style lang="less" scoped>
.ca-apply {
width: 600px;
}
</style>
<script>
import { Form, Input, Button, Select, Drawer, message } from "ant-design-vue";
import { onMounted, reactive, ref, toRaw } from "vue";
import { useForm } from "@ant-design-vue/use";
import { get } from "@/services/http";
export default {
components: {
Form,
Input,
FormItem: Form.Item,
Button,
Select,
Option: Select.Option,
Drawer
},
setup() {
//界面初始化
var organizeList = ref([]);
var userApplyList = ref([]);
onMounted(async () => {
const res = await get("/api2/UserInfo/Organize");
if (res.errorCode != 0) {
message.error(res.errorMsg);
}
organizeList.value = res.data;
const listRes = await get("/api2/CA/UserApplyList");
if (res.errorCode != 0) {
message.error(res.errorMsg);
}
userApplyList.value = listRes;
});
const formRef = reactive({
idCardName: "",
idCardNo: "",
phone: "",
unitName: ""
});
const rulesRef = reactive({
idCardName: [
{ required: true, message: "请输入18位身份证号码", trigger: "blur" }
],
idCardId: [
{ required: true, message: "请输入18位身份证号码", trigger: "blur" }
],
phone: [
{ required: true, message: "请输入18位身份证号码", trigger: "blur" }
],
unitName: [
{ required: true, message: "请输入18位身份证号码", trigger: "change" }
]
});
const { validate, validateInfos } = useForm(formRef, rulesRef);
var disableEdit = ref(false);
const changeDisabled = function() {
disableEdit.value = !disableEdit.value;
console.log(disableEdit);
};
const onSubmit = function() {
validate()
.then(() => {
console.log(toRaw(formRef));
})
.catch(e => {
console.log(e);
});
};
return {
labelCol: { span: 8 },
wrapperCol: { span: 10 },
form: formRef,
disableEdit,
changeDisabled,
validateInfos,
onSubmit,
organizeList
};
}
};
</script>