feat: 新增企业客户新增/编辑/查看表单页
halo
parent
3e3a2097a3
commit
801cadbcc4
|
|
@ -0,0 +1,275 @@
|
|||
<!-- src/views/customer/enterprise/EnterpriseForm.vue -->
|
||||
<template>
|
||||
<div class="enterprise-customer-form-page">
|
||||
<a-page-header :title="pageTitle" @back="goBack" />
|
||||
<a-card>
|
||||
<a-form ref="formRef" layout="vertical" :model="form" :rules="rules" :disabled="isDetail">
|
||||
<a-form-item v-if="!isDetail" label="所属渠道" required>
|
||||
<ChannelSelect v-model:model-value="channelNo" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="营业执照照片">
|
||||
<LicenseUpload :channel-no="channelNo" v-model:file-no="form.businessLicenseFileNo" />
|
||||
<div v-if="isEdit" class="hint">编辑模式下无法读取历史营业执照图片,如需变更请重新上传</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="所属机构" name="organizationId">
|
||||
<OrgTreeSelect v-model="form.organizationId" placeholder="请选择所属机构" />
|
||||
</a-form-item>
|
||||
<a-form-item label="企业名称" name="enterpriseName">
|
||||
<a-input v-model:value="form.enterpriseName" placeholder="请输入企业名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="证件类型">
|
||||
<a-input value="营业执照" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="营业执照号" name="businessLicense">
|
||||
<a-input v-model:value="form.businessLicense" placeholder="请输入营业执照号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="证件生效日" name="certificateEffectiveDate">
|
||||
<a-date-picker v-model:value="effectiveDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
||||
</a-form-item>
|
||||
<a-form-item label="证件到期日" name="certificateExpiryDate">
|
||||
<a-date-picker v-model:value="expiryDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
||||
<div v-if="isExpired" class="expired-hint">证件已过期,请更换有效证件</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" name="mobilePhone">
|
||||
<a-input v-model:value="form.mobilePhone" placeholder="请输入11位手机号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="证件地址" name="certificateAddress">
|
||||
<a-input v-model:value="form.certificateAddress" placeholder="请输入详细地址" />
|
||||
</a-form-item>
|
||||
<a-form-item label="经营范围" name="businessScope">
|
||||
<a-textarea v-model:value="form.businessScope" placeholder="请输入经营范围" :rows="3" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="法定代表人">
|
||||
<a-space>
|
||||
<span v-if="legalRepName">{{ legalRepName }}</span>
|
||||
<a-button v-if="!isDetail" @click="openLegalRepPicker">选择</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="isCreate" label="股东高管信息">
|
||||
<a-table :columns="relatedPersonColumns" :data-source="relatedPersonList" :pagination="false" row-key="individualId">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'customerName'">{{ record.customerName }}</template>
|
||||
<template v-else-if="column.dataIndex === 'relatedType'">
|
||||
<a-select v-model:value="record.relatedType" style="width: 140px">
|
||||
<a-select-option value="SHAREHOLDER">股东</a-select-option>
|
||||
<a-select-option value="EXECUTIVE">高管</a-select-option>
|
||||
<a-select-option value="BENEFICIARY_OWNER">受益所有人</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'certificateNumber'">{{ record.certificateNumber }}</template>
|
||||
<template v-else-if="column.dataIndex === 'action'">
|
||||
<a @click="removeRelatedPerson(index)">删除</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-button style="margin-top: 8px" @click="openRelatedPersonPicker">添加股东/高管</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item v-else label="股东高管信息">
|
||||
<div class="hint">股东高管信息仅支持新增时登记,当前接口不支持查询或修改,如需变更请联系技术支持核实数据</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-space v-if="!isDetail">
|
||||
<a-button type="primary" :loading="submitting" @click="handleSubmit">提交</a-button>
|
||||
<a-button @click="goBack">取消</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
|
||||
<PersonalCustomerPicker ref="legalRepPickerRef" @select="handleLegalRepSelect" />
|
||||
<PersonalCustomerPicker ref="relatedPersonPickerRef" @select="handleRelatedPersonSelect" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import dayjs from 'dayjs'
|
||||
import ChannelSelect from '@/components/ChannelSelect.vue'
|
||||
import LicenseUpload from '@/components/LicenseUpload.vue'
|
||||
import OrgTreeSelect from '@/components/OrgTreeSelect.vue'
|
||||
import PersonalCustomerPicker from '@/components/PersonalCustomerPicker.vue'
|
||||
import {
|
||||
fetchEnterpriseCustomerDetailApi,
|
||||
createEnterpriseCustomerApi,
|
||||
updateEnterpriseCustomerApi
|
||||
} from '@/api/customer'
|
||||
import { fetchPersonalCustomerDetailApi } from '@/api/customer'
|
||||
import { phoneValidatorRule, businessLicenseValidatorRule } from '@/utils/validators'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const mode = computed(() => route.query.mode || 'create')
|
||||
const isCreate = computed(() => mode.value === 'create')
|
||||
const isEdit = computed(() => mode.value === 'edit')
|
||||
const isDetail = computed(() => mode.value === 'detail')
|
||||
const pageTitle = computed(() => ({ create: '新增企业客户', edit: '编辑企业客户', detail: '查看企业客户' }[mode.value]))
|
||||
|
||||
const channelNo = ref(undefined)
|
||||
const submitting = ref(false)
|
||||
const formRef = ref(null)
|
||||
const legalRepName = ref('')
|
||||
const legalRepPickerRef = ref(null)
|
||||
const relatedPersonPickerRef = ref(null)
|
||||
const relatedPersonList = ref([])
|
||||
|
||||
const form = reactive({
|
||||
id: '',
|
||||
organizationId: undefined,
|
||||
enterpriseName: '',
|
||||
businessLicense: '',
|
||||
certificateEffectiveDate: '',
|
||||
certificateExpiryDate: '',
|
||||
mobilePhone: '',
|
||||
certificateAddress: '',
|
||||
businessScope: '',
|
||||
businessLicenseFileNo: '',
|
||||
legalRepresentativeId: undefined
|
||||
})
|
||||
|
||||
const effectiveDateValue = computed({
|
||||
get: () => (form.certificateEffectiveDate ? dayjs(form.certificateEffectiveDate) : undefined),
|
||||
set: (val) => (form.certificateEffectiveDate = val ? val.format('YYYY-MM-DD') : '')
|
||||
})
|
||||
const expiryDateValue = computed({
|
||||
get: () => (form.certificateExpiryDate ? dayjs(form.certificateExpiryDate) : undefined),
|
||||
set: (val) => (form.certificateExpiryDate = val ? val.format('YYYY-MM-DD') : '')
|
||||
})
|
||||
const isExpired = computed(
|
||||
() => !!form.certificateExpiryDate && dayjs(form.certificateExpiryDate).isBefore(dayjs(), 'day')
|
||||
)
|
||||
|
||||
const rules = {
|
||||
organizationId: [{ required: true, message: '请选择所属机构' }],
|
||||
enterpriseName: [{ required: true, message: '请输入企业名称' }],
|
||||
businessLicense: [businessLicenseValidatorRule()],
|
||||
mobilePhone: [phoneValidatorRule()]
|
||||
}
|
||||
|
||||
const relatedPersonColumns = [
|
||||
{ title: '客户名称', dataIndex: 'customerName' },
|
||||
{ title: '关联人类型', dataIndex: 'relatedType', width: 160 },
|
||||
{ title: '证件号码', dataIndex: 'certificateNumber' },
|
||||
{ title: '操作', dataIndex: 'action', width: 80 }
|
||||
]
|
||||
|
||||
function openLegalRepPicker() {
|
||||
legalRepPickerRef.value.show()
|
||||
}
|
||||
|
||||
function handleLegalRepSelect(record) {
|
||||
form.legalRepresentativeId = record.id
|
||||
legalRepName.value = record.customerName
|
||||
}
|
||||
|
||||
function openRelatedPersonPicker() {
|
||||
relatedPersonPickerRef.value.show()
|
||||
}
|
||||
|
||||
async function handleRelatedPersonSelect(record) {
|
||||
// IndividualCustomerListVo 不含证件生效日,需要额外查一次详情补全
|
||||
const detailRes = await fetchPersonalCustomerDetailApi({ id: record.id })
|
||||
const detail = detailRes.data.code === 200 ? detailRes.data.data : record
|
||||
relatedPersonList.value.push({
|
||||
individualId: record.id,
|
||||
customerName: record.customerName,
|
||||
relatedType: 'SHAREHOLDER',
|
||||
certificateType: detail.certificateType || 'ID_CARD',
|
||||
certificateNumber: detail.certificateNumber,
|
||||
certificateEffectiveDate: detail.certificateEffectiveDate,
|
||||
certificateExpiryDate: detail.certificateExpiryDate
|
||||
})
|
||||
}
|
||||
|
||||
function removeRelatedPerson(index) {
|
||||
relatedPersonList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
async function loadDetail(id) {
|
||||
const res = await fetchEnterpriseCustomerDetailApi({ id })
|
||||
if (res.data.code === 200) {
|
||||
Object.assign(form, res.data.data)
|
||||
if (res.data.data.legalRepresentativeId) {
|
||||
const repRes = await fetchPersonalCustomerDetailApi({ id: res.data.data.legalRepresentativeId })
|
||||
if (repRes.data.code === 200) legalRepName.value = repRes.data.data.customerName
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.id) {
|
||||
loadDetail(route.query.id)
|
||||
}
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
router.push('/customer/enterprise')
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
const toFullDate = (d) => (d ? `${d} 00:00:00` : undefined)
|
||||
const payload = {
|
||||
organizationId: form.organizationId,
|
||||
enterpriseName: form.enterpriseName,
|
||||
businessLicense: form.businessLicense,
|
||||
certificateType: 'BUSINESS_LICENSE',
|
||||
certificateNumber: form.businessLicense,
|
||||
certificateEffectiveDate: toFullDate(form.certificateEffectiveDate),
|
||||
certificateExpiryDate: toFullDate(form.certificateExpiryDate),
|
||||
mobilePhone: form.mobilePhone,
|
||||
certificateAddress: form.certificateAddress,
|
||||
businessScope: form.businessScope,
|
||||
businessLicenseFileNo: form.businessLicenseFileNo,
|
||||
legalRepresentativeId: form.legalRepresentativeId
|
||||
}
|
||||
let res
|
||||
if (isCreate.value) {
|
||||
const enterpriseRelatedPersonBtoList = relatedPersonList.value.map((item) => ({
|
||||
individualId: item.individualId,
|
||||
relatedType: item.relatedType,
|
||||
certificateType: item.certificateType,
|
||||
certificateNumber: item.certificateNumber,
|
||||
certificateEffectiveDate: toFullDate(item.certificateEffectiveDate),
|
||||
certificateExpiryDate: toFullDate(item.certificateExpiryDate)
|
||||
}))
|
||||
res = await createEnterpriseCustomerApi({
|
||||
createEnterpriseCustomerBto: { ...payload, enterpriseRelatedPersonBtoList },
|
||||
enableOcr: true
|
||||
})
|
||||
} else {
|
||||
res = await updateEnterpriseCustomerApi({ id: form.id, ...payload })
|
||||
}
|
||||
if (res.data.code === 200) {
|
||||
message.success(isCreate.value ? '新增成功' : '修改成功')
|
||||
goBack()
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.expired-hint {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hint {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue