Skip to content

Commit 32b3c87

Browse files
YunaiVgitee-org
authored andcommitted
!294 feat: 客户表的 crud
Merge pull request !294 from wanwan/master
2 parents 309c3f3 + 044754c commit 32b3c87

File tree

3 files changed

+484
-0
lines changed

3 files changed

+484
-0
lines changed

src/api/crm/customer/index.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import request from '@/config/axios'
2+
3+
export interface CustomerVO {
4+
id: number
5+
name: string
6+
followUpStatus: boolean
7+
lockStatus: boolean
8+
mobile: string
9+
telephone: string
10+
website: string
11+
remark: string
12+
ownerUserId: number
13+
roUserIds: string
14+
rwUserIds: string
15+
areaId: number
16+
detailAddress: string
17+
longitude: string
18+
latitude: string
19+
contactLastTime: Date
20+
contactNextTime: Date
21+
}
22+
23+
// 查询客户列表
24+
export const getCustomerPage = async (params) => {
25+
return await request.get({ url: `/crm/customer/page`, params })
26+
}
27+
28+
// 查询客户详情
29+
export const getCustomer = async (id: number) => {
30+
return await request.get({ url: `/crm/customer/get?id=` + id })
31+
}
32+
33+
// 新增客户
34+
export const createCustomer = async (data: CustomerVO) => {
35+
return await request.post({ url: `/crm/customer/create`, data })
36+
}
37+
38+
// 修改客户
39+
export const updateCustomer = async (data: CustomerVO) => {
40+
return await request.put({ url: `/crm/customer/update`, data })
41+
}
42+
43+
// 删除客户
44+
export const deleteCustomer = async (id: number) => {
45+
return await request.delete({ url: `/crm/customer/delete?id=` + id })
46+
}
47+
48+
// 导出客户 Excel
49+
export const exportCustomer = async (params) => {
50+
return await request.download({ url: `/crm/customer/export-excel`, params })
51+
}
Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
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-form-item label="客户名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入客户名称" />
12+
</el-form-item>
13+
<el-form-item label="跟进状态" prop="followUpStatus">
14+
<el-radio-group v-model="formData.followUpStatus">
15+
<el-radio
16+
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
17+
:key="dict.value"
18+
:label="dict.value"
19+
>
20+
{{ dict.label }}
21+
</el-radio>
22+
</el-radio-group>
23+
</el-form-item>
24+
<el-form-item label="锁定状态" prop="lockStatus">
25+
<el-radio-group v-model="formData.lockStatus">
26+
<el-radio
27+
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
28+
:key="dict.value"
29+
:label="dict.value"
30+
>
31+
{{ dict.label }}
32+
</el-radio>
33+
</el-radio-group>
34+
</el-form-item>
35+
<el-form-item label="手机" prop="mobile">
36+
<el-input v-model="formData.mobile" placeholder="请输入手机" />
37+
</el-form-item>
38+
<el-form-item label="电话" prop="telephone">
39+
<el-input v-model="formData.telephone" placeholder="请输入电话" />
40+
</el-form-item>
41+
<el-form-item label="网址" prop="website">
42+
<el-input v-model="formData.website" placeholder="请输入网址" />
43+
</el-form-item>
44+
<el-form-item label="备注" prop="remark">
45+
<el-input v-model="formData.remark" placeholder="请输入备注" />
46+
</el-form-item>
47+
<el-form-item label="负责人的用户编号" prop="ownerUserId">
48+
<el-input v-model="formData.ownerUserId" placeholder="请输入负责人的用户编号" />
49+
</el-form-item>
50+
<el-form-item label="只读权限的用户编号数组" prop="roUserIds">
51+
<el-input v-model="formData.roUserIds" placeholder="请输入只读权限的用户编号数组" />
52+
</el-form-item>
53+
<el-form-item label="读写权限的用户编号数组" prop="rwUserIds">
54+
<el-input v-model="formData.rwUserIds" placeholder="请输入读写权限的用户编号数组" />
55+
</el-form-item>
56+
<el-form-item label="地区编号" prop="areaId">
57+
<el-input v-model="formData.areaId" placeholder="请输入地区编号" />
58+
</el-form-item>
59+
<el-form-item label="详细地址" prop="detailAddress">
60+
<el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
61+
</el-form-item>
62+
<el-form-item label="地理位置经度" prop="longitude">
63+
<el-input v-model="formData.longitude" placeholder="请输入地理位置经度" />
64+
</el-form-item>
65+
<el-form-item label="地理位置维度" prop="latitude">
66+
<el-input v-model="formData.latitude" placeholder="请输入地理位置维度" />
67+
</el-form-item>
68+
<el-form-item label="最后跟进时间" prop="contactLastTime">
69+
<el-date-picker
70+
v-model="formData.contactLastTime"
71+
type="date"
72+
value-format="x"
73+
placeholder="选择最后跟进时间"
74+
/>
75+
</el-form-item>
76+
<el-form-item label="下次联系时间" prop="contactNextTime">
77+
<el-date-picker
78+
v-model="formData.contactNextTime"
79+
type="date"
80+
value-format="x"
81+
placeholder="选择下次联系时间"
82+
/>
83+
</el-form-item>
84+
</el-form>
85+
<template #footer>
86+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
87+
<el-button @click="dialogVisible = false">取 消</el-button>
88+
</template>
89+
</Dialog>
90+
</template>
91+
<script setup lang="ts">
92+
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
93+
import * as CustomerApi from '@/api/crm/customer'
94+
95+
const { t } = useI18n() // 国际化
96+
const message = useMessage() // 消息弹窗
97+
98+
const dialogVisible = ref(false) // 弹窗的是否展示
99+
const dialogTitle = ref('') // 弹窗的标题
100+
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
101+
const formType = ref('') // 表单的类型:create - 新增;update - 修改
102+
const formData = ref({
103+
id: undefined,
104+
name: undefined,
105+
followUpStatus: undefined,
106+
lockStatus: undefined,
107+
mobile: undefined,
108+
telephone: undefined,
109+
website: undefined,
110+
remark: undefined,
111+
ownerUserId: undefined,
112+
roUserIds: undefined,
113+
rwUserIds: undefined,
114+
areaId: undefined,
115+
detailAddress: undefined,
116+
longitude: undefined,
117+
latitude: undefined,
118+
contactLastTime: undefined,
119+
contactNextTime: undefined
120+
})
121+
const formRules = reactive({
122+
name: [{ require: true, message: '跟进状态不能为空', trigger: 'blur' }],
123+
followUpStatus: [{ required: true, message: '跟进状态不能为空', trigger: 'blur' }],
124+
lockStatus: [{ required: true, message: '锁定状态不能为空', trigger: 'blur' }]
125+
})
126+
const formRef = ref() // 表单 Ref
127+
128+
/** 打开弹窗 */
129+
const open = async (type: string, id?: number) => {
130+
dialogVisible.value = true
131+
dialogTitle.value = t('action.' + type)
132+
formType.value = type
133+
resetForm()
134+
// 修改时,设置数据
135+
if (id) {
136+
formLoading.value = true
137+
try {
138+
formData.value = await CustomerApi.getCustomer(id)
139+
} finally {
140+
formLoading.value = false
141+
}
142+
}
143+
}
144+
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
145+
146+
/** 提交表单 */
147+
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
148+
const submitForm = async () => {
149+
// 校验表单
150+
if (!formRef) return
151+
const valid = await formRef.value.validate()
152+
if (!valid) return
153+
// 提交请求
154+
formLoading.value = true
155+
try {
156+
const data = formData.value as unknown as CustomerApi.CustomerVO
157+
if (formType.value === 'create') {
158+
await CustomerApi.createCustomer(data)
159+
message.success(t('common.createSuccess'))
160+
} else {
161+
await CustomerApi.updateCustomer(data)
162+
message.success(t('common.updateSuccess'))
163+
}
164+
dialogVisible.value = false
165+
// 发送操作成功的事件
166+
emit('success')
167+
} finally {
168+
formLoading.value = false
169+
}
170+
}
171+
172+
/** 重置表单 */
173+
const resetForm = () => {
174+
formData.value = {
175+
id: undefined,
176+
name: undefined,
177+
followUpStatus: undefined,
178+
lockStatus: undefined,
179+
mobile: undefined,
180+
telephone: undefined,
181+
website: undefined,
182+
remark: undefined,
183+
ownerUserId: undefined,
184+
roUserIds: undefined,
185+
rwUserIds: undefined,
186+
areaId: undefined,
187+
detailAddress: undefined,
188+
longitude: undefined,
189+
latitude: undefined,
190+
contactLastTime: undefined,
191+
contactNextTime: undefined
192+
}
193+
formRef.value?.resetFields()
194+
}
195+
</script>

0 commit comments

Comments
 (0)