Skip to content

Commit 9628517

Browse files
author
puhui999
committed
CRM: 跟进组件完善
1 parent f88b26e commit 9628517

File tree

7 files changed

+183
-92
lines changed

7 files changed

+183
-92
lines changed

‎src/views/crm/followup/FollowUpRecordForm.vue

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
/>
3232
</el-form-item>
3333
</el-col>
34-
<!-- TODO @puhui999：不搞富文本哈；然后加个附件、图片两个 form-item 哈 -->
3534
<el-col :span="24">
3635
<el-form-item label="跟进内容" prop="content">
3736
<el-input v-model="formData.content" :rows="3" type="textarea" />
@@ -72,13 +71,13 @@
7271
<el-button @click="dialogVisible = false">取 消</el-button>
7372
</template>
7473
</Dialog>
74+
<ContactTableSelect ref="contactTableSelectRef" v-model="formData.contactIds" />
75+
<BusinessTableSelect ref="businessTableSelectRef" v-model="formData.businessIds" />
7576
</template>
7677
<script lang="ts" setup>
7778
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
7879
import { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup'
79-
import { BusinessList, ContactList } from './components'
80-
import * as ContactApi from '@/api/crm/contact'
81-
import * as BusinessApi from '@/api/crm/business'
80+
import { BusinessList, BusinessTableSelect, ContactList, ContactTableSelect } from './components'
8281
8382
defineOptions({ name: 'FollowUpRecordForm' })
8483
@@ -97,8 +96,6 @@ const formRules = reactive({
9796
})
9897
9998
const formRef = ref() // 表单 Ref
100-
const allContactList = ref<ContactApi.ContactVO[]>([]) // 所有联系人列表
101-
const allBusinessList = ref<BusinessApi.BusinessVO[]>([]) // 所有商家列表
10299
103100
/** 打开弹窗 */
104101
const open = async (bizType: number, bizId: number, type: string, id?: number) => {
@@ -108,8 +105,6 @@ const open = async (bizType: number, bizId: number, type: string, id?: number) =
108105
resetForm()
109106
formData.value.bizType = bizType
110107
formData.value.bizId = bizId
111-
allContactList.value = await ContactApi.getSimpleContactList()
112-
allBusinessList.value = await BusinessApi.getSimpleBusinessList()
113108
// 修改时，设置数据
114109
if (id) {
115110
formLoading.value = true
@@ -146,8 +141,14 @@ const submitForm = async () => {
146141
}
147142
}
148143
149-
const handleAddContact = () => {}
150-
const handleAddBusiness = () => {}
144+
const contactTableSelectRef = ref<InstanceType<typeof ContactTableSelect>>()
145+
const handleAddContact = () => {
146+
contactTableSelectRef.value?.open()
147+
}
148+
const businessTableSelectRef = ref<InstanceType<typeof BusinessTableSelect>>()
149+
const handleAddBusiness = () => {
150+
businessTableSelectRef.value?.open()
151+
}
151152
/** 重置表单 */
152153
const resetForm = () => {
153154
formRef.value?.resetFields()

‎src/views/crm/followup/components/BusinessList.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ watch(
5252
if (!val || val.length === 0) {
5353
return
5454
}
55-
list.value = BusinessApi.getBusinessListByIds(val) as unknown as BusinessApi.BusinessVO[]
55+
list.value = BusinessApi.getBusinessListByIds(unref(val)) as unknown as BusinessApi.BusinessVO[]
5656
}
5757
)
5858
const emits = defineEmits<{

‎src/views/crm/followup/components/BusinessListSelectForm.vue

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎src/views/crm/followup/components/BusinessTableSelect.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择商机" width="700">
3+
<el-table
4+
ref="multipleTableRef"
5+
v-loading="loading"
6+
:data="list"
7+
:show-overflow-tooltip="true"
8+
:stripe="true"
9+
@selection-change="handleSelectionChange"
10+
>
11+
<el-table-column type="selection" width="55" />
12+
<el-table-column align="center" label="商机名称" prop="name" />
13+
<el-table-column align="center" label="客户名称" prop="customerName" />
14+
<el-table-column align="center" label="商机金额" prop="price" />
15+
<el-table-column
16+
:formatter="dateFormatter"
17+
align="center"
18+
label="预计成交日期"
19+
prop="dealTime"
20+
width="180px"
21+
/>
22+
<el-table-column align="center" label="备注" prop="remark" />
23+
</el-table>
24+
<template #footer>
25+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
26+
<el-button @click="dialogVisible = false">取 消</el-button>
27+
</template>
28+
</Dialog>
29+
</template>
30+
31+
<script lang="ts" setup>
32+
import * as BusinessApi from '@/api/crm/business'
33+
import { dateFormatter } from '@/utils/formatTime'
34+
import { ElTable } from 'element-plus'
35+
36+
defineOptions({ name: 'BusinessTableSelect' })
37+
withDefaults(defineProps<{ modelValue: number[] }>(), { modelValue: () => [] })
38+
const list = ref<BusinessApi.BusinessVO[]>([]) // 列表的数据
39+
const loading = ref(false) // 列表的加载中
40+
const dialogVisible = ref(false) // 弹窗的是否展示
41+
const formLoading = ref(false)
42+
// 确认选择时的触发事件
43+
const emits = defineEmits<{
44+
(e: 'update:modelValue', v: number[]): void
45+
}>()
46+
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
47+
const multipleSelection = ref<BusinessApi.BusinessVO[]>([])
48+
const handleSelectionChange = (val: BusinessApi.BusinessVO[]) => {
49+
multipleSelection.value = val
50+
}
51+
/** 触发 */
52+
const submitForm = () => {
53+
formLoading.value = true
54+
try {
55+
emits(
56+
'update:modelValue',
57+
multipleSelection.value.map((item) => item.id)
58+
)
59+
} finally {
60+
formLoading.value = false
61+
// 关闭弹窗
62+
dialogVisible.value = false
63+
}
64+
}
65+
66+
const getList = async () => {
67+
loading.value = true
68+
try {
69+
list.value = await BusinessApi.getSimpleBusinessList()
70+
} finally {
71+
loading.value = false
72+
}
73+
}
74+
/** 打开弹窗 */
75+
const open = async () => {
76+
dialogVisible.value = true
77+
await nextTick()
78+
if (multipleSelection.value.length > 0) {
79+
multipleTableRef.value!.clearSelection()
80+
}
81+
await getList()
82+
}
83+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
84+
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const props = withDefaults(defineProps<{ contactIds: number[] }>(), {
6969
const list = ref<ContactApi.ContactVO[]>([] as ContactApi.ContactVO[])
7070
const getContactList = async () => {
7171
list.value = (await ContactApi.getContactListByIds(
72-
props.contactIds
72+
unref(props.contactIds)
7373
)) as unknown as ContactApi.ContactVO[]
7474
}
7575
watch(

‎src/views/crm/followup/components/ContactTableSelect.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择联系人" width="700">
3+
<el-table
4+
ref="multipleTableRef"
5+
v-loading="loading"
6+
:data="list"
7+
:show-overflow-tooltip="true"
8+
:stripe="true"
9+
@selection-change="handleSelectionChange"
10+
>
11+
<el-table-column type="selection" width="55" />
12+
<el-table-column align="center" fixed="left" label="姓名" prop="name" width="140" />
13+
<el-table-column
14+
align="center"
15+
fixed="left"
16+
label="客户名称"
17+
prop="customerName"
18+
width="120"
19+
/>
20+
<el-table-column align="center" label="手机" prop="mobile" width="120" />
21+
<el-table-column align="center" label="电话" prop="telephone" width="120" />
22+
<el-table-column align="center" label="邮箱" prop="email" width="120" />
23+
<el-table-column align="center" label="职位" prop="post" width="120" />
24+
</el-table>
25+
<template #footer>
26+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
27+
<el-button @click="dialogVisible = false">取 消</el-button>
28+
</template>
29+
</Dialog>
30+
</template>
31+
32+
<script lang="ts" setup>
33+
import * as ContactApi from '@/api/crm/contact'
34+
import { ElTable } from 'element-plus'
35+
36+
defineOptions({ name: 'ContactTableSelect' })
37+
withDefaults(defineProps<{ modelValue: number[] }>(), { modelValue: () => [] })
38+
const list = ref<ContactApi.ContactVO[]>([]) // 列表的数据
39+
const loading = ref(false) // 列表的加载中
40+
const dialogVisible = ref(false) // 弹窗的是否展示
41+
const formLoading = ref(false)
42+
// 确认选择时的触发事件
43+
const emits = defineEmits<{
44+
(e: 'update:modelValue', v: number[]): void
45+
}>()
46+
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
47+
const multipleSelection = ref<ContactApi.ContactVO[]>([])
48+
const handleSelectionChange = (val: ContactApi.ContactVO[]) => {
49+
multipleSelection.value = val
50+
}
51+
/** 触发 */
52+
const submitForm = () => {
53+
formLoading.value = true
54+
try {
55+
emits(
56+
'update:modelValue',
57+
multipleSelection.value.map((item) => item.id)
58+
)
59+
} finally {
60+
formLoading.value = false
61+
// 关闭弹窗
62+
dialogVisible.value = false
63+
}
64+
}
65+
const getList = async () => {
66+
loading.value = true
67+
try {
68+
list.value = await ContactApi.getSimpleContactList()
69+
} finally {
70+
loading.value = false
71+
}
72+
}
73+
/** 打开弹窗 */
74+
const open = async () => {
75+
dialogVisible.value = true
76+
await nextTick()
77+
if (multipleSelection.value.length > 0) {
78+
multipleTableRef.value!.clearSelection()
79+
}
80+
await getList()
81+
}
82+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
83+
</script>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import BusinessList from './BusinessList.vue'
2+
import BusinessTableSelect from './BusinessTableSelect.vue'
23
import ContactList from './ContactList.vue'
4+
import ContactTableSelect from './ContactTableSelect.vue'
35

4-
export { BusinessList, ContactList }
6+
export { BusinessList, BusinessTableSelect, ContactList, ContactTableSelect }

0 commit comments

Comments
 (0)