Skip to content

Commit 896f975

Browse files
committed
✨ ERP:增加 ERP 客户的实现
1 parent 616fd3f commit 896f975

File tree

6 files changed

+480
-11
lines changed

6 files changed

+480
-11
lines changed

src/api/erp/sale/customer/index.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import request from '@/config/axios'
2+
3+
// ERP 客户 VO
4+
export interface CustomerVO {
5+
id: number // 客户编号
6+
name: string // 客户名称
7+
contact: string // 联系人
8+
mobile: string // 手机号码
9+
telephone: string // 联系电话
10+
email: string // 电子邮箱
11+
fax: string // 传真
12+
remark: string // 备注
13+
status: number // 开启状态
14+
sort: number // 排序
15+
taxNo: string // 纳税人识别号
16+
taxPercent: number // 税率
17+
bankName: string // 开户行
18+
bankAccount: string // 开户账号
19+
bankAddress: string // 开户地址
20+
}
21+
22+
// ERP 客户 API
23+
export const CustomerApi = {
24+
// 查询客户分页
25+
getCustomerPage: async (params: any) => {
26+
return await request.get({ url: `/erp/customer/page`, params })
27+
},
28+
29+
// 查询客户精简列表
30+
getCustomerSimpleList: async () => {
31+
return await request.get({ url: `/erp/customer/simple-list` })
32+
},
33+
34+
// 查询客户详情
35+
getCustomer: async (id: number) => {
36+
return await request.get({ url: `/erp/customer/get?id=` + id })
37+
},
38+
39+
// 新增客户
40+
createCustomer: async (data: CustomerVO) => {
41+
return await request.post({ url: `/erp/customer/create`, data })
42+
},
43+
44+
// 修改客户
45+
updateCustomer: async (data: CustomerVO) => {
46+
return await request.put({ url: `/erp/customer/update`, data })
47+
},
48+
49+
// 删除客户
50+
deleteCustomer: async (id: number) => {
51+
return await request.delete({ url: `/erp/customer/delete?id=` + id })
52+
},
53+
54+
// 导出客户 Excel
55+
exportCustomer: async (params) => {
56+
return await request.download({ url: `/erp/customer/export-excel`, params })
57+
}
58+
}
Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="100px"
8+
v-loading="formLoading"
9+
>
10+
<el-row :gutter="20">
11+
<el-col :span="12">
12+
<el-form-item label="名称" prop="name">
13+
<el-input v-model="formData.name" placeholder="请输入名称" />
14+
</el-form-item>
15+
</el-col>
16+
<el-col :span="12">
17+
<el-form-item label="联系人" prop="contact">
18+
<el-input v-model="formData.contact" placeholder="请输入联系人" />
19+
</el-form-item>
20+
</el-col>
21+
<el-col :span="12">
22+
<el-form-item label="手机号码" prop="mobile">
23+
<el-input v-model="formData.mobile" placeholder="请输入手机号码" />
24+
</el-form-item>
25+
</el-col>
26+
<el-col :span="12">
27+
<el-form-item label="联系电话" prop="telephone">
28+
<el-input v-model="formData.telephone" placeholder="请输入联系电话" />
29+
</el-form-item>
30+
</el-col>
31+
<el-col :span="12">
32+
<el-form-item label="电子邮箱" prop="email">
33+
<el-input v-model="formData.email" placeholder="请输入电子邮箱" />
34+
</el-form-item>
35+
</el-col>
36+
<el-col :span="12">
37+
<el-form-item label="传真" prop="fax">
38+
<el-input v-model="formData.fax" placeholder="请输入传真" />
39+
</el-form-item>
40+
</el-col>
41+
<el-col :span="12">
42+
<el-form-item label="开启状态" prop="status">
43+
<el-radio-group v-model="formData.status">
44+
<el-radio
45+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
46+
:key="dict.value"
47+
:label="dict.value"
48+
>
49+
{{ dict.label }}
50+
</el-radio>
51+
</el-radio-group>
52+
</el-form-item>
53+
</el-col>
54+
<el-col :span="12">
55+
<el-form-item label="排序" prop="sort">
56+
<el-input-number
57+
v-model="formData.sort"
58+
placeholder="请输入排序"
59+
class="!w-1/1"
60+
:precision="0"
61+
/>
62+
</el-form-item>
63+
</el-col>
64+
<el-col :span="12">
65+
<el-form-item label="纳税人识别号" prop="taxNo">
66+
<el-input v-model="formData.taxNo" placeholder="请输入纳税人识别号" />
67+
</el-form-item>
68+
</el-col>
69+
<el-col :span="12">
70+
<el-form-item label="税率(%)" prop="taxPercent">
71+
<el-input-number
72+
v-model="formData.taxPercent"
73+
:min="0"
74+
:precision="2"
75+
placeholder="请输入税率"
76+
class="!w-1/1"
77+
/>
78+
</el-form-item>
79+
</el-col>
80+
<el-col :span="12">
81+
<el-form-item label="开户行" prop="bankName">
82+
<el-input v-model="formData.bankName" placeholder="请输入开户行" />
83+
</el-form-item>
84+
</el-col>
85+
<el-col :span="12">
86+
<el-form-item label="开户账号" prop="bankAccount">
87+
<el-input v-model="formData.bankAccount" placeholder="请输入开户账号" />
88+
</el-form-item>
89+
</el-col>
90+
<el-col :span="12">
91+
<el-form-item label="开户地址" prop="bankAddress">
92+
<el-input v-model="formData.bankAddress" placeholder="请输入开户地址" />
93+
</el-form-item>
94+
</el-col>
95+
<el-col :span="24">
96+
<el-form-item label="备注" prop="remark">
97+
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
98+
</el-form-item>
99+
</el-col>
100+
</el-row>
101+
</el-form>
102+
<template #footer>
103+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
104+
<el-button @click="dialogVisible = false">取 消</el-button>
105+
</template>
106+
</Dialog>
107+
</template>
108+
<script setup lang="ts">
109+
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
110+
import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
111+
import { CommonStatusEnum } from '@/utils/constants'
112+
113+
/** ERP 客户 表单 */
114+
defineOptions({ name: 'CustomerForm' })
115+
116+
const { t } = useI18n() // 国际化
117+
const message = useMessage() // 消息弹窗
118+
119+
const dialogVisible = ref(false) // 弹窗的是否展示
120+
const dialogTitle = ref('') // 弹窗的标题
121+
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
122+
const formType = ref('') // 表单的类型:create - 新增;update - 修改
123+
const formData = ref({
124+
id: undefined,
125+
name: undefined,
126+
contact: undefined,
127+
mobile: undefined,
128+
telephone: undefined,
129+
email: undefined,
130+
fax: undefined,
131+
remark: undefined,
132+
status: undefined,
133+
sort: undefined,
134+
taxNo: undefined,
135+
taxPercent: undefined,
136+
bankName: undefined,
137+
bankAccount: undefined,
138+
bankAddress: undefined
139+
})
140+
const formRules = reactive({
141+
name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
142+
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
143+
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
144+
})
145+
const formRef = ref() // 表单 Ref
146+
147+
/** 打开弹窗 */
148+
const open = async (type: string, id?: number) => {
149+
dialogVisible.value = true
150+
dialogTitle.value = t('action.' + type)
151+
formType.value = type
152+
resetForm()
153+
// 修改时,设置数据
154+
if (id) {
155+
formLoading.value = true
156+
try {
157+
formData.value = await CustomerApi.getCustomer(id)
158+
} finally {
159+
formLoading.value = false
160+
}
161+
}
162+
}
163+
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
164+
165+
/** 提交表单 */
166+
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
167+
const submitForm = async () => {
168+
// 校验表单
169+
await formRef.value.validate()
170+
// 提交请求
171+
formLoading.value = true
172+
try {
173+
const data = formData.value as unknown as CustomerVO
174+
if (formType.value === 'create') {
175+
await CustomerApi.createCustomer(data)
176+
message.success(t('common.createSuccess'))
177+
} else {
178+
await CustomerApi.updateCustomer(data)
179+
message.success(t('common.updateSuccess'))
180+
}
181+
dialogVisible.value = false
182+
// 发送操作成功的事件
183+
emit('success')
184+
} finally {
185+
formLoading.value = false
186+
}
187+
}
188+
189+
/** 重置表单 */
190+
const resetForm = () => {
191+
formData.value = {
192+
id: undefined,
193+
name: undefined,
194+
contact: undefined,
195+
mobile: undefined,
196+
telephone: undefined,
197+
email: undefined,
198+
fax: undefined,
199+
remark: undefined,
200+
status: CommonStatusEnum.ENABLE,
201+
sort: undefined,
202+
taxNo: undefined,
203+
taxPercent: undefined,
204+
bankName: undefined,
205+
bankAccount: undefined,
206+
bankAddress: undefined
207+
}
208+
formRef.value?.resetFields()
209+
}
210+
</script>

0 commit comments

Comments
 (0)