|
|
@@ -5,7 +5,7 @@
|
|
|
v-model:visible="visible"
|
|
|
@cancel="cancel"
|
|
|
centered
|
|
|
- :maskClosable="maskClosableFlag"
|
|
|
+ :maskClosable="false"
|
|
|
width="890px">
|
|
|
<template #footer>
|
|
|
<a-button key="submit"
|
|
|
@@ -14,11 +14,13 @@
|
|
|
@click="submit">完成</a-button>
|
|
|
</template>
|
|
|
<a-form class="inlineForm"
|
|
|
- :form="form"
|
|
|
- @submit="handleSearch">
|
|
|
+ ref="formRef"
|
|
|
+ :model="formState"
|
|
|
+ :rules="rules">
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="客户类型">
|
|
|
+ <a-form-item label="客户类型"
|
|
|
+ name="userinfotype">
|
|
|
<a-select class="typeSelect"
|
|
|
style="width: 200px"
|
|
|
v-model:value="formState.userinfotype"
|
|
|
@@ -32,97 +34,112 @@
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
+ <template v-if="!isPersonal()">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="企业名称"
|
|
|
+ name="customername">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ v-model:value="formState.customername"
|
|
|
+ style="width: 200px"
|
|
|
+ placeholder="请输入企业名称" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="企业简称"
|
|
|
+ name="nickname">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.nickname"
|
|
|
+ placeholder="请输入企业简称" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="证件类型"
|
|
|
+ name="cardtype">
|
|
|
+ <a-select class="inlineFormSelect"
|
|
|
+ v-model:value="formState.cardtype"
|
|
|
+ style="width: 200px"
|
|
|
+ placeholder="请选择证件类型">
|
|
|
+ <a-select-option :value="item.enumitemname"
|
|
|
+ v-for="item in cardTypeList"
|
|
|
+ :key="item.autoid">
|
|
|
+ {{item.enumdicname}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="法定代表人"
|
|
|
+ name="legalpersonname">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.legalpersonname"
|
|
|
+ placeholder="请输入法定代表人" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="证件号码"
|
|
|
+ name="cardnum">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.cardnum"
|
|
|
+ placeholder="请输入证件号码" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="纳税人识别号"
|
|
|
+ name="taxpayernum">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.taxpayernum"
|
|
|
+ placeholder="请输入纳税人识别号" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="营业执照">
|
|
|
+ <div class="upload">
|
|
|
+ <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
+ :transform-file="transformFile">
|
|
|
+ <a-button class="uploadBtn">上传</a-button>
|
|
|
+ </a-upload>
|
|
|
+ <div class="look">查看附件</div>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="联系人"
|
|
|
+ name="contactname">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.contactname"
|
|
|
+ placeholder="请输入联系人" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="企业名称">
|
|
|
+ <a-form-item label="姓名"
|
|
|
+ name="mobilephone">
|
|
|
<a-input class="dialogInput"
|
|
|
- v-model:value="formState.customername"
|
|
|
style="width: 200px"
|
|
|
- placeholder="请输入企业名称" />
|
|
|
+ v-model:value="formState.mobilephone"
|
|
|
+ placeholder="请输入姓名" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="企业简称">
|
|
|
- <a-input class="dialogInput"
|
|
|
- style="width: 200px"
|
|
|
- v-model:value="formState.nickname"
|
|
|
- placeholder="请输入企业简称" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="证件类型">
|
|
|
- <a-select class="inlineFormSelect"
|
|
|
- v-model:value="formState.cardtype"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请选择证件类型">
|
|
|
- <a-select-option value="1">
|
|
|
- 客户一
|
|
|
- </a-select-option>
|
|
|
- <a-select-option value="2">
|
|
|
- 客户二
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="法定代表人">
|
|
|
- <a-input class="dialogInput"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请输入法定代表人" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="证件号码">
|
|
|
- <a-input class="dialogInput"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请输入证件号码" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="纳税人识别号">
|
|
|
- <a-input class="dialogInput"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请输入纳税人识别号" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="营业执照">
|
|
|
- <div class="upload">
|
|
|
- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
- :transform-file="transformFile">
|
|
|
- <a-button class="uploadBtn">上传</a-button>
|
|
|
- </a-upload>
|
|
|
- <div class="look">查看附件</div>
|
|
|
- </div>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="联系人">
|
|
|
- <a-input class="dialogInput"
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请输入联系人" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="联系人手机号">
|
|
|
+ <a-form-item label="联系人手机号"
|
|
|
+ name="mobilephone">
|
|
|
<a-input class="dialogInput"
|
|
|
style="width: 200px"
|
|
|
+ v-model:value="formState.mobilephone"
|
|
|
placeholder="请输入联系人手机号" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="联系电话">
|
|
|
+ <a-form-item label="联系电话"
|
|
|
+ name="telphone">
|
|
|
<a-input class="dialogInput"
|
|
|
style="width: 200px"
|
|
|
+ v-model:value="formState.telphone"
|
|
|
placeholder="请输入联系电话" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
@@ -131,8 +148,6 @@
|
|
|
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
<a-col :span="24">
|
|
|
<a-form-item label="通讯地址">
|
|
|
<a-select class="inlineFormSelect"
|
|
|
@@ -167,21 +182,21 @@
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
<a-col :span="24">
|
|
|
- <a-form-item label=" ">
|
|
|
+ <a-form-item label=" "
|
|
|
+ name="cardaddress">
|
|
|
<a-input class="dialogInput"
|
|
|
style="width: 635px"
|
|
|
+ v-model:value="formState.cardaddress"
|
|
|
placeholder="请输入详细地址" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
<a-col :span="24">
|
|
|
- <a-form-item label="备注">
|
|
|
+ <a-form-item label="备注"
|
|
|
+ name="remark">
|
|
|
<a-input class="dialogInput"
|
|
|
style="width: 635px"
|
|
|
+ v-model:value="formState.remark"
|
|
|
placeholder="请输入备注" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
@@ -194,41 +209,26 @@
|
|
|
import { closeModal } from '@/common/setup/modal/index';
|
|
|
import { initData } from '@/common/methods/index';
|
|
|
import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
|
|
|
-
|
|
|
-interface FormState {
|
|
|
- userinfotype: string; //客户类型
|
|
|
- customername: string; //客户名称(企业名称)
|
|
|
- nickname: string; //企业简称
|
|
|
- cardtype: number; //证件类型
|
|
|
- cardnum: string; //证件号码 (加密存储)
|
|
|
- legalpersonname: string; //法人姓名(企业)
|
|
|
- attachment1: string; //附件1
|
|
|
- attachment2: string; //附件2
|
|
|
- attachment3: string; //附件3
|
|
|
- attachment4: string; //附件4
|
|
|
- attachment5: string; //附件5
|
|
|
- contactname: string; //联系人
|
|
|
- mobilephone: string; //手机号码 (加密存储)
|
|
|
- telphone: string; //联系电话(加密存储)
|
|
|
- provinceid: number; //省
|
|
|
- cityid: number; //市
|
|
|
- districtid: number; //地区
|
|
|
- remark: string; //备注
|
|
|
- cardaddress: string; //证件地址 (加密存储)
|
|
|
-}
|
|
|
+import { getCardType } from './setup';
|
|
|
+import { AllEnums } from '@/services/go/commonService/interface';
|
|
|
+import { FormState } from './interface';
|
|
|
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'add-custom',
|
|
|
components: {},
|
|
|
setup() {
|
|
|
const { visible, cancel } = closeModal('custom_info_btn_add');
|
|
|
+ const cardTypeList = ref<AllEnums[]>(getCardType());
|
|
|
+ const formRef = ref();
|
|
|
const formState: UnwrapRef<FormState> = reactive({
|
|
|
- userinfotype: '',
|
|
|
+ userinfotype: '2',
|
|
|
customername: '',
|
|
|
nickname: '',
|
|
|
- cardtype: 2,
|
|
|
+ cardtype: undefined,
|
|
|
cardnum: '',
|
|
|
legalpersonname: '',
|
|
|
+ taxpayernum: '',
|
|
|
attachment1: '',
|
|
|
attachment2: '',
|
|
|
attachment3: '',
|
|
|
@@ -244,27 +244,39 @@ export default defineComponent({
|
|
|
remark: '',
|
|
|
});
|
|
|
const rules = {
|
|
|
- userinfotype: [{ type: 'array', required: true, message: '请选择客户类型', trigger: 'change' }],
|
|
|
+ userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
|
|
|
customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
|
|
|
nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
|
|
|
+ cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
|
|
|
};
|
|
|
const loading = ref<boolean>(false);
|
|
|
- const maskClosableFlag = ref<boolean>(false);
|
|
|
+ function isPersonal(): boolean {
|
|
|
+ return formState.userinfotype === '1';
|
|
|
+ }
|
|
|
function submit() {
|
|
|
loading.value = true;
|
|
|
- setTimeout(() => {
|
|
|
- loading.value = false;
|
|
|
- cancel();
|
|
|
- }, 2000);
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ console.log('values', formState, toRaw(formState));
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch((error: ValidateErrorEntity<FormState>) => {
|
|
|
+ console.log('error', error);
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
}
|
|
|
initData(() => {});
|
|
|
return {
|
|
|
formState,
|
|
|
+ rules,
|
|
|
+ formRef,
|
|
|
+ cardTypeList,
|
|
|
+ isPersonal,
|
|
|
visible,
|
|
|
cancel,
|
|
|
submit,
|
|
|
loading,
|
|
|
- maskClosableFlag,
|
|
|
};
|
|
|
},
|
|
|
});
|