feat(customer): 添加客户详情查看功能
This commit is contained in:
parent
309e87be7e
commit
71708f31fc
@ -0,0 +1,250 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
label-width="100px"
|
||||||
|
v-loading="formLoading"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-title">基础信息</div>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="客户编码" prop="custNo">
|
||||||
|
<el-input v-model="formData.custNo" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="客户全称" prop="custName">
|
||||||
|
<el-input v-model="formData.custName" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="客户简称" prop="custSimName">
|
||||||
|
<el-input v-model="formData.custSimName" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="所属行业" prop="industryClass">
|
||||||
|
<el-select v-model="formData.industryClass">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.INDUSTRY_CLASS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合作状态" prop="coopStatus">
|
||||||
|
<el-select v-model="formData.coopStatus">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.COOP_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="企业性质" prop="enterpriseType">
|
||||||
|
<el-select v-model="formData.enterpriseType">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISE_TYPE)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="客户等级" prop="custReg">
|
||||||
|
<el-select v-model="formData.custReg">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.CUSTOMER_LEVER)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="信用等级" prop="creditRate">
|
||||||
|
<el-select v-model="formData.creditRate">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.CREDIT_RATE)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="启用状态" prop="enabledStatus">
|
||||||
|
<el-select v-model="formData.enabledStatus">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="formData.remark" type="textarea" :rows="2" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-title">联系方式</div>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="联系人1" prop="contact1">
|
||||||
|
<el-input v-model="formData.contact1" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="联系电话1" prop="conPhone1">
|
||||||
|
<el-input v-model="formData.conPhone1" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="联系地址1" prop="conAddress1">
|
||||||
|
<el-input v-model="formData.conAddress1" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="联系人2" prop="contact2">
|
||||||
|
<el-input v-model="formData.contact2" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="联系电话2" prop="conPhone2">
|
||||||
|
<el-input v-model="formData.conPhone2" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="联系地址2" prop="conAddress2">
|
||||||
|
<el-input v-model="formData.conAddress2" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-title">开票信息</div>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="公司税号" prop="comTaxNumber">
|
||||||
|
<el-input v-model="formData.comTaxNumber" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="开户地区" prop="accountRegion">
|
||||||
|
<el-input v-model="formData.accountRegion" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="开户银行" prop="accountBank">
|
||||||
|
<el-input v-model="formData.accountBank" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="开户账号" prop="accountNo">
|
||||||
|
<el-input v-model="formData.accountNo" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="付款方式" prop="payMeth">
|
||||||
|
<el-select v-model="formData.payMeth">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_METH)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">关 闭</el-button>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getStrDictOptions, getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||||
|
import * as CustomerApi from '@/api/biz/customer'
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const dialogTitle = ref('')
|
||||||
|
const formLoading = ref(false)
|
||||||
|
const formData = ref({
|
||||||
|
id: undefined,
|
||||||
|
custNo: undefined,
|
||||||
|
custName: undefined,
|
||||||
|
custSimName: undefined,
|
||||||
|
industryClass: undefined,
|
||||||
|
coopStatus: undefined,
|
||||||
|
enterpriseType: undefined,
|
||||||
|
custReg: undefined,
|
||||||
|
creditRate: undefined,
|
||||||
|
contact1: undefined,
|
||||||
|
conPhone1: undefined,
|
||||||
|
conAddress1: undefined,
|
||||||
|
contact2: undefined,
|
||||||
|
conPhone2: undefined,
|
||||||
|
conAddress2: undefined,
|
||||||
|
comTaxNumber: undefined,
|
||||||
|
accountRegion: undefined,
|
||||||
|
accountBank: undefined,
|
||||||
|
accountNo: undefined,
|
||||||
|
payMeth: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
enabledStatus: undefined,
|
||||||
|
})
|
||||||
|
const formRef = ref()
|
||||||
|
|
||||||
|
const open = async (id: number) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = '客户详情'
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
formData.value = await CustomerApi.getCustomer(id)
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.form-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 8px;
|
||||||
|
border-left: 3px solid #409eff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user