Skip to content

Commit 7de0e93

Browse files
YunaiVYunaiV
committed
crm：联系人增加 ContactList 组件，提供给其它模块内嵌
1 parent 2cda0cd commit 7de0e93

File tree

7 files changed

+181
-46
lines changed

7 files changed

+181
-46
lines changed

‎src/api/crm/contact/index.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,36 +26,43 @@ export interface ContactVO {
2626
ownerUserName: string
2727
}
2828

29-
// 查询crm联系人列表
29+
// 查询 CRM 联系人列表
3030
export const getContactPage = async (params) => {
3131
return await request.get({ url: `/crm/contact/page`, params })
3232
}
3333

34-
// 查询crm联系人详情
34+
// 查询 CRM 联系人列表，基于指定客户
35+
export const getContactPageByCustomer = async (params: any) => {
36+
return await request.get({ url: `/crm/contact/page-by-customer`, params })
37+
}
38+
39+
// 查询 CRM 联系人详情
3540
export const getContact = async (id: number) => {
3641
return await request.get({ url: `/crm/contact/get?id=` + id })
3742
}
3843

39-
// 新增crm联系人
44+
// 新增 CRM 联系人
4045
export const createContact = async (data: ContactVO) => {
4146
return await request.post({ url: `/crm/contact/create`, data })
4247
}
4348

44-
// 修改crm联系人
49+
// 修改 CRM 联系人
4550
export const updateContact = async (data: ContactVO) => {
4651
return await request.put({ url: `/crm/contact/update`, data })
4752
}
4853

49-
// 删除crm联系人
54+
// 删除 CRM 联系人
5055
export const deleteContact = async (id: number) => {
5156
return await request.delete({ url: `/crm/contact/delete?id=` + id })
5257
}
5358

54-
// 导出crm联系人 Excel
59+
// 导出 CRM 联系人 Excel
5560
export const exportContact = async (params) => {
5661
return await request.download({ url: `/crm/contact/export-excel`, params })
5762
}
5863

5964
export const simpleAllList = async () => {
6065
return await request.get({ url: `/crm/contact/simple-all-list` })
6166
}
67+
68+
//

‎src/api/crm/permission/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@ export interface PermissionVO {
1212
createTime?: Date
1313
}
1414

15+
export enum BizTypeEnum {
16+
CRM_LEADS = 1, // 线索
17+
CRM_CUSTOMER = 2, // 客户
18+
CRM_CONTACTS = 3, // 联系人
19+
CRM_BUSINESS = 5, // 商机
20+
CRM_CONTRACT = 6 // 合同
21+
}
22+
1523
// 查询团队成员列表
1624
export const getPermissionList = async (params) => {
1725
return await request.get({ url: `/crm/permission/list`, params })

‎src/views/crm/components/CrmPermissionList.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
</el-button>
1616
<el-button type="danger" @click="handleQuit"> 退出团队</el-button>
1717
</el-row>
18+
1819
<!-- 团队成员展示 -->
1920
<el-table
2021
v-loading="loading"

‎src/views/crm/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import CrmPermissionList from './CrmPermissionList.vue'
22

3+
// TODO @puhui999：迁移到 api/permission/index.ts 里；我已经迁移了一部分哈
34
enum CrmBizTypeEnum {
45
CRM_LEADS = 1, // 线索
56
CRM_CUSTOMER = 2, // 客户

‎src/views/crm/contact/components/ContactList.vue

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<template>
2+
<!-- 操作栏 -->
3+
<el-row justify="end">
4+
<el-button class="mb-10px">
5+
<Icon class="mr-5px" icon="system-uicons:contacts" />
6+
创建联系人
7+
</el-button>
8+
</el-row>
9+
10+
<!-- 列表 -->
11+
<ContentWrap>
12+
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
13+
<el-table-column label="姓名" fixed="left" align="center" prop="name">
14+
<template #default="scope">
15+
<el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
16+
{{ scope.row.name }}
17+
</el-link>
18+
</template>
19+
</el-table-column>
20+
<el-table-column label="手机号" align="center" prop="mobile" />
21+
<el-table-column label="职位" align="center" prop="post" />
22+
<el-table-column label="直属上级" align="center" prop="parentName" />
23+
<el-table-column label="是否关键决策人" align="center" prop="master">
24+
<template #default="scope">
25+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
26+
</template>
27+
</el-table-column>
28+
<el-table-column label="操作" align="center" fixed="right" width="200">
29+
<template #default="scope">
30+
<el-button
31+
plain
32+
type="primary"
33+
@click="openForm('update', scope.row.id)"
34+
v-hasPermi="['crm:contact:update']"
35+
>
36+
编辑
37+
</el-button>
38+
<el-button
39+
plain
40+
type="danger"
41+
@click="handleDelete(scope.row.id)"
42+
v-hasPermi="['crm:contact:delete']"
43+
>
44+
删除
45+
</el-button>
46+
</template>
47+
</el-table-column>
48+
</el-table>
49+
<!-- 分页 -->
50+
<Pagination
51+
:total="total"
52+
v-model:page="queryParams.pageNo"
53+
v-model:limit="queryParams.pageSize"
54+
@pagination="getList"
55+
/>
56+
</ContentWrap>
57+
58+
<!-- 表单弹窗：添加/修改 -->
59+
<ContactForm ref="formRef" @success="getList" />
60+
</template>
61+
<script setup lang="ts">
62+
import * as ContactApi from '@/api/crm/contact'
63+
import ContactForm from './../ContactForm.vue'
64+
import { DICT_TYPE } from '@/utils/dict'
65+
import { BizTypeEnum } from '@/api/crm/permission'
66+
67+
defineOptions({ name: 'CrmContactList' })
68+
const props = defineProps<{
69+
bizType: number // 业务类型
70+
bizId: number // 业务编号
71+
}>()
72+
73+
const message = useMessage() // 消息弹窗
74+
const { t } = useI18n() // 国际化
75+
76+
const loading = ref(true) // 列表的加载中
77+
const total = ref(0) // 列表的总页数
78+
const list = ref([]) // 列表的数据
79+
const queryParams = reactive({
80+
pageNo: 1,
81+
pageSize: 10,
82+
customerId: undefined as unknown // 允许 undefined + number
83+
})
84+
85+
/** 查询列表 */
86+
const getList = async () => {
87+
loading.value = true
88+
try {
89+
// 置空参数
90+
queryParams.customerId = undefined
91+
// 执行查询
92+
let data = { list: [], total: 0 }
93+
switch (props.bizType) {
94+
case BizTypeEnum.CRM_CUSTOMER:
95+
queryParams.customerId = props.bizId
96+
data = await ContactApi.getContactPageByCustomer(queryParams)
97+
break
98+
default:
99+
return
100+
}
101+
list.value = data.list
102+
total.value = data.total
103+
} finally {
104+
loading.value = false
105+
}
106+
}
107+
108+
/** 搜索按钮操作 */
109+
const handleQuery = () => {
110+
queryParams.pageNo = 1
111+
getList()
112+
}
113+
114+
/** 添加/修改操作 */
115+
const formRef = ref()
116+
const openForm = (type: string, id?: number) => {
117+
formRef.value.open(type, id)
118+
}
119+
120+
/** 删除按钮操作 */
121+
const handleDelete = async (id: number) => {
122+
try {
123+
// 删除的二次确认
124+
await message.delConfirm()
125+
// 发起删除
126+
await ContactApi.deleteContact(id)
127+
message.success(t('common.delSuccess'))
128+
// 刷新列表
129+
await getList()
130+
} catch {}
131+
}
132+
133+
/** 打开客户详情 */
134+
const { push } = useRouter()
135+
const openDetail = (id: number) => {
136+
push({ name: 'CrmContactDetail', params: { id } })
137+
}
138+
139+
watch(
140+
() => [props.bizId, props.bizType],
141+
() => {
142+
handleQuery()
143+
},
144+
{ immediate: true, deep: true }
145+
)
146+
</script>

‎src/views/crm/customer/detail/CustomerDetailsHeader.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<el-button>更改成交状态</el-button>
1414
</div>
1515
</div>
16+
<!-- TODO 芋艿： -->
1617
<el-row class="mt-10px">
1718
<el-button>
1819
<Icon class="mr-5px" icon="ph:calendar-fill" />
@@ -22,10 +23,6 @@
2223
<Icon class="mr-5px" icon="carbon:email" />
2324
发送邮件
2425
</el-button>
25-
<el-button>
26-
<Icon class="mr-5px" icon="system-uicons:contacts" />
27-
创建联系人
28-
</el-button>
2926
<el-button>
3027
<Icon class="mr-5px" icon="ep:opportunity" />
3128
创建商机

‎src/views/crm/customer/detail/index.vue

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,55 +5,30 @@
55
<el-tab-pane label="详细资料">
66
<CustomerDetails :customer="customer" />
77
</el-tab-pane>
8-
<el-tab-pane label="活动" lazy> 活动</el-tab-pane>
9-
<el-tab-pane label="邮件" lazy> 邮件</el-tab-pane>
10-
<el-tab-pane label="工商信息" lazy> 工商信息</el-tab-pane>
11-
<el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
12-
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
8+
<el-tab-pane label="操作日志" lazy>TODO 待开发</el-tab-pane>
139
<el-tab-pane label="联系人" lazy>
14-
<template #label>
15-
联系人
16-
<el-badge class="item" type="primary" />
17-
</template>
18-
联系人
10+
<ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
1911
</el-tab-pane>
2012
<el-tab-pane label="团队成员" lazy>
21-
<template #label>
22-
团队成员
23-
<el-badge class="item" type="primary" />
24-
</template>
25-
<CrmPermissionList :biz-id="customer.id" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />
13+
<CrmPermissionList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
2614
</el-tab-pane>
2715
<el-tab-pane label="商机" lazy> 商机</el-tab-pane>
28-
<el-tab-pane label="合同" lazy>
29-
<template #label>
30-
合同
31-
<el-badge class="item" type="primary" />
32-
</template>
33-
合同
34-
</el-tab-pane>
35-
<el-tab-pane label="回款" lazy>
36-
<template #label>
37-
回款
38-
<el-badge class="item" type="primary" />
39-
</template>
40-
回款
41-
</el-tab-pane>
42-
<el-tab-pane label="回访" lazy> 回访</el-tab-pane>
43-
<el-tab-pane label="发票" lazy> 发票</el-tab-pane>
16+
<el-tab-pane label="合同" lazy>TODO 待开发</el-tab-pane>
17+
<el-tab-pane label="回款" lazy>TODO 待开发</el-tab-pane>
18+
<el-tab-pane label="回访" lazy>TODO 待开发</el-tab-pane>
19+
<el-tab-pane label="发票" lazy>TODO 待开发</el-tab-pane>
4420
</el-tabs>
4521
</el-col>
4622
</template>
4723

4824
<script lang="ts" setup>
49-
import { ElMessage } from 'element-plus'
5025
import { useTagsViewStore } from '@/store/modules/tagsView'
5126
import * as CustomerApi from '@/api/crm/customer'
52-
import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
53-
import { DICT_TYPE } from '@/utils/dict'
5427
import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
55-
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
56-
import { CrmBizTypeEnum, CrmPermissionList } from '@/views/crm/components'
28+
import { CrmPermissionList } from '@/views/crm/components'
29+
import ContactList from '@/views/crm/contact/components/ContactList.vue'
30+
import CustomerDetailsHeader from './CustomerDetailsHeader.vue'
31+
import { BizTypeEnum } from '@/api/crm/permission'
5732
5833
defineOptions({ name: 'CustomerDetail' })
5934

0 commit comments

Comments
 (0)