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