|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <!-- 新增客户资料 -->
|
|
|
+ <a-modal class="add-custom"
|
|
|
+ title="新增客户资料"
|
|
|
+ v-model:visible="visible"
|
|
|
+ @cancel="cancel"
|
|
|
+ centered
|
|
|
+ :maskClosable="false"
|
|
|
+ width="890px">
|
|
|
+ <template #footer>
|
|
|
+ <a-button key="submit"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="submit">完成</a-button>
|
|
|
+ </template>
|
|
|
+ <a-form class="inlineForm"
|
|
|
+ ref="formRef"
|
|
|
+ :model="formState"
|
|
|
+ :rules="rules">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="客户类型"
|
|
|
+ name="userinfotype">
|
|
|
+ <a-select class="typeSelect"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.userinfotype"
|
|
|
+ placeholder="请选择客户类型">
|
|
|
+ <a-select-option value="1">
|
|
|
+ 个人
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="2">
|
|
|
+ 企业
|
|
|
+ </a-select-option>
|
|
|
+ </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>
|
|
|
+ <a-col :span="12">
|
|
|
+ <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-col :span="12">
|
|
|
+ <a-form-item label="联系电话"
|
|
|
+ name="telphone">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.telphone"
|
|
|
+ placeholder="请输入联系电话" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="姓名"
|
|
|
+ name="username">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.username"
|
|
|
+ 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="mobilephone">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.mobilephone"
|
|
|
+ placeholder="请输入手机号码" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="身份证正面照"
|
|
|
+ name="cardbackphotourl">
|
|
|
+ <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="email">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.email"
|
|
|
+ placeholder="请输入邮箱" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="身份证反面照"
|
|
|
+ name="cardfrontphotourl">
|
|
|
+ <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="telphone">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="formState.telphone"
|
|
|
+ placeholder="请输入联系电话" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item>
|
|
|
+
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="通讯地址">
|
|
|
+ <a-select class="inlineFormSelect"
|
|
|
+ style="width: 205px"
|
|
|
+ placeholder="请选择省">
|
|
|
+ <a-select-option value="1">
|
|
|
+ 客户一
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="2">
|
|
|
+ 客户二
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select class="inlineFormSelect ml10"
|
|
|
+ style="width: 205px"
|
|
|
+ placeholder="请选择市">
|
|
|
+ <a-select-option value="1">
|
|
|
+ 客户一
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="2">
|
|
|
+ 客户二
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select class="inlineFormSelect ml10"
|
|
|
+ style="width: 205px"
|
|
|
+ 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-col :span="24">
|
|
|
+ <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-col :span="24">
|
|
|
+ <a-form-item label="备注"
|
|
|
+ name="remark">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 635px"
|
|
|
+ v-model:value="formState.remark"
|
|
|
+ placeholder="请输入备注" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { closeModal } from '@/common/setup/modal/index';
|
|
|
+import { initData } from '@/common/methods/index';
|
|
|
+import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
|
|
|
+import { getCardType, initFormState, handleApply } from './setup';
|
|
|
+import { AllEnums } from '@/services/go/commonService/interface';
|
|
|
+import { FormState } from './interface';
|
|
|
+import { RuleObject, 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(initFormState());
|
|
|
+ const rules = {
|
|
|
+ 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, applyAction } = handleApply();
|
|
|
+ function isPersonal(): boolean {
|
|
|
+ return formState.userinfotype === '1';
|
|
|
+ }
|
|
|
+ function submit() {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ const param = toRaw(formState);
|
|
|
+ applyAction(param);
|
|
|
+ console.log('values', formState);
|
|
|
+ })
|
|
|
+ .catch((error: ValidateErrorEntity<FormState>) => {
|
|
|
+ console.log('error', error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ initData(() => {});
|
|
|
+ return {
|
|
|
+ formState,
|
|
|
+ rules,
|
|
|
+ formRef,
|
|
|
+ cardTypeList,
|
|
|
+ isPersonal,
|
|
|
+ visible,
|
|
|
+ cancel,
|
|
|
+ submit,
|
|
|
+ loading,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.add-custom {
|
|
|
+}
|
|
|
+</style
|
|
|
+>;
|