feature:添加法人证书申领界面
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
export default {
|
||||
IdCardNo: /\d{17}[\dX]/,
|
||||
Phone: /1\d{10}/
|
||||
Phone: /1\d{10}/,
|
||||
Tydm: /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
|
||||
};
|
||||
|
||||
@@ -1,7 +1,302 @@
|
||||
<template>
|
||||
<div class="ca_apply">
|
||||
ca_unit_apply
|
||||
<Form
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
:rules="rules"
|
||||
>
|
||||
<Row>
|
||||
<RowCol :span="12">
|
||||
<FormItem label="企业名称" name="unitName">
|
||||
<Select v-model:value="form.unitName">
|
||||
<Option
|
||||
v-for="organize in organizeList"
|
||||
:key="organize.id"
|
||||
:value="organize.name"
|
||||
>{{ organize.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="统一社会信用代码" name="tydm">
|
||||
<Input v-model:value="form.tydm" />
|
||||
</FormItem>
|
||||
<FormItem label="经办人姓名" name="operatorName">
|
||||
<Input v-model:value="form.operatorName" />
|
||||
</FormItem>
|
||||
<FormItem label="经办人身份证号" name="operatorId">
|
||||
<Input v-model:value="form.operatorId" />
|
||||
</FormItem>
|
||||
<FormItem label="经办人手机号" name="operatorPhone">
|
||||
<Input v-model:value="form.operatorPhone" />
|
||||
</FormItem>
|
||||
<FormItem label="邮寄地址" name="address">
|
||||
<Input v-model:value="form.address" />
|
||||
</FormItem>
|
||||
<FormItem label="省市区信息" name="code">
|
||||
<Cascader
|
||||
v-model:value="form.code"
|
||||
:load-data="loadAreaOptions"
|
||||
:options="areaOptions"
|
||||
placeholder="请选择省市区信息"
|
||||
change-on-select
|
||||
/>
|
||||
</FormItem>
|
||||
</RowCol>
|
||||
<RowCol :span="12">
|
||||
<FormItem
|
||||
v-for="config in uploadConfig"
|
||||
:label="config.label"
|
||||
:name="config.name"
|
||||
:key="config"
|
||||
>
|
||||
<input hidden v-model="form[config.name]" />
|
||||
<Upload
|
||||
accept="image/*"
|
||||
action="/api2/upload/uploadfile"
|
||||
@change="info => handleChange(config, info)"
|
||||
:beforeUpload="beforeUpload"
|
||||
list-type="picture"
|
||||
>
|
||||
<Button block :disabled="config.disabled">
|
||||
<UploadOutlined />
|
||||
点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
</FormItem>
|
||||
</RowCol>
|
||||
</Row>
|
||||
|
||||
<FormItem :wrapperCol="{ span: 10, offset: 8 }">
|
||||
<Button type="primary" @click="onSubmit">前往申领</Button>
|
||||
<Button style="margin-left: 10px">历史申领记录</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.ca_apply {
|
||||
width: 800px;
|
||||
.ant-upload {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Upload,
|
||||
message,
|
||||
Cascader,
|
||||
Button,
|
||||
Select,
|
||||
Row,
|
||||
Col
|
||||
} from "ant-design-vue";
|
||||
import { UploadOutlined } from "@ant-design/icons-vue";
|
||||
import { get } from "@/services/http";
|
||||
import regex from "@/services/regex";
|
||||
const picUploadConfig = [
|
||||
{
|
||||
label: "授权委托书照片",
|
||||
name: "LOAPicId",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: "身份证正面照片",
|
||||
name: "idCardFrontPicId",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: "身份证背面照片",
|
||||
name: "idCardBackPicId",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: "营业执照照片",
|
||||
name: "businessLicensePicId",
|
||||
disabled: false
|
||||
}
|
||||
];
|
||||
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
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
<script></script>
|
||||
export default {
|
||||
components: {
|
||||
Form,
|
||||
FormItem: Form.Item,
|
||||
Input,
|
||||
Upload,
|
||||
Cascader,
|
||||
UploadOutlined,
|
||||
Button,
|
||||
Select,
|
||||
Option: Select.Option,
|
||||
Row,
|
||||
RowCol: Col
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadConfig: picUploadConfig,
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 14 },
|
||||
fileList: [],
|
||||
form: {},
|
||||
areaOptions: [],
|
||||
organizeList: [],
|
||||
rules: {
|
||||
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",
|
||||
transform: v => v && v.toString()
|
||||
}
|
||||
],
|
||||
idCardFrontPicId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请上传授权承诺书照片",
|
||||
trigger: "change",
|
||||
transform: v => v && v.toString()
|
||||
}
|
||||
],
|
||||
idCardBackPicId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请上传授权承诺书照片",
|
||||
trigger: "change",
|
||||
transform: v => v && v.toString()
|
||||
}
|
||||
],
|
||||
businessLicensePicId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请上传授权承诺书照片",
|
||||
trigger: "change",
|
||||
transform: v => v && v.toString()
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
disabled: function() {
|
||||
return this.fileList.length > 0;
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const organizeInfo = await get("/api2/UserInfo/Organize");
|
||||
this.areaOptions = await getAreaOptions("");
|
||||
this.organizeList = organizeInfo.data;
|
||||
},
|
||||
methods: {
|
||||
handleChange(config, info) {
|
||||
const name = config.name;
|
||||
// var formValue = this.form[name];
|
||||
// console.log(name, formValue);
|
||||
if (info.file.status !== "uploading") {
|
||||
// console.log(info.file.status,info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === "done") {
|
||||
message.success(`${info.file.name} 文件上传成功`);
|
||||
this.form[name] = info.file.response.id;
|
||||
config.disabled = true;
|
||||
} else if (info.file.status === "error") {
|
||||
message.error(`${info.file.name} 文件上传失败`);
|
||||
}
|
||||
if (info.file.status === "removed") {
|
||||
config.disabled = false;
|
||||
this.form[name] = null;
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
async loadAreaOptions(selectedOptions) {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
targetOption.loading = true;
|
||||
const options = await getAreaOptions(targetOption.value);
|
||||
if (options) {
|
||||
targetOption.children = options;
|
||||
}
|
||||
targetOption.loading = false;
|
||||
this.areaOptions = [...this.areaOptions];
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs.ruleForm.validate();
|
||||
console.log(this.form);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -59,7 +59,6 @@
|
||||
import { Form, Input, Button, Select, message, Drawer } from "ant-design-vue";
|
||||
import { get, post } from "@/services/http";
|
||||
import regex from "@/services/regex";
|
||||
console.log(regex);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user