Skip to content

Commit c5e5228

Browse files
YunaiVYunaiV
committed
✨ CRM：完善回款的详情
1 parent 5369328 commit c5e5228

File tree

7 files changed

+233
-3
lines changed

7 files changed

+233
-3
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,24 @@ export interface ReceivableVO {
55
no: string
66
planId: number
77
customerId: number
8+
customerName?: string
89
contractId: number
10+
contract?: {
11+
no: string
12+
totalPrice: number
13+
}
914
auditStatus: number
1015
processInstanceId: number
1116
returnTime: Date
1217
returnType: string
1318
price: number
1419
ownerUserId: number
20+
ownerUserName?: string
1521
remark: string
22+
creator: string // 创建人
23+
creatorName?: string // 创建人名称
24+
createTime: Date // 创建时间
25+
updateTime: Date // 更新时间
1626
}
1727

1828
// 查询回款列表

‎src/router/modules/remaining.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -546,10 +546,21 @@ const remainingRouter: AppRouteRecordRaw[] = [
546546
title: '回款计划详情',
547547
noCache: true,
548548
hidden: true,
549-
activeMenu: '/crm/contract'
549+
activeMenu: '/crm/receivable-plan'
550550
},
551551
component: () => import('@/views/crm/receivable/plan/detail/index.vue')
552552
},
553+
{
554+
path: 'receivable/detail/:id',
555+
name: 'CrmReceivableDetail',
556+
meta: {
557+
title: '回款详情',
558+
noCache: true,
559+
hidden: true,
560+
activeMenu: '/crm/receivable'
561+
},
562+
component: () => import('@/views/crm/receivable/detail/index.vue')
563+
},
553564
{
554565
path: 'contact/detail/:id',
555566
name: 'CrmContactDetail',

‎src/views/crm/receivable/detail/ReceivableDetailsHeader.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div>
3+
<div class="flex items-start justify-between">
4+
<div>
5+
<el-col>
6+
<el-row>
7+
<span class="text-xl font-bold">{{ receivable.no }}</span>
8+
</el-row>
9+
</el-col>
10+
</div>
11+
<div>
12+
<!-- 右上：按钮 -->
13+
<slot></slot>
14+
</div>
15+
</div>
16+
</div>
17+
<ContentWrap class="mt-10px">
18+
<el-descriptions :column="5" direction="vertical">
19+
<el-descriptions-item label="客户名称">
20+
{{ receivable.customerName }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="合同金额">
23+
{{ erpPriceInputFormatter(receivable.contract?.totalPrice) }}
24+
</el-descriptions-item>
25+
<el-descriptions-item label="回款日期">
26+
{{ formatDate(receivable.returnTime) }}
27+
</el-descriptions-item>
28+
<el-descriptions-item label="回款金额">
29+
{{ erpPriceInputFormatter(receivable.price) }}
30+
</el-descriptions-item>
31+
<el-descriptions-item label="负责人">
32+
{{ receivable.ownerUserName }}
33+
</el-descriptions-item>
34+
</el-descriptions>
35+
</ContentWrap>
36+
</template>
37+
<script lang="ts" setup>
38+
import * as ReceivableApi from '@/api/crm/receivable'
39+
import { formatDate } from '@/utils/formatTime'
40+
import { erpPriceInputFormatter } from '@/utils'
41+
42+
const { receivable } = defineProps<{ receivable: ReceivableApi.ReceivableVO }>()
43+
</script>

‎src/views/crm/receivable/detail/ReceivableDetailsInfo.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<ContentWrap>
3+
<el-collapse v-model="activeNames">
4+
<el-collapse-item name="basicInfo">
5+
<template #title>
6+
<span class="text-base font-bold">基本信息</span>
7+
</template>
8+
<el-descriptions :column="4">
9+
<el-descriptions-item label="回款编号">{{ receivable.no }}</el-descriptions-item>
10+
<el-descriptions-item label="客户名称">
11+
{{ receivable.customerName }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="合同编号">
14+
{{ receivable.contract?.no }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="回款日期">
17+
{{ formatDate(receivable.returnTime, 'YYYY-MM-DD') }}
18+
</el-descriptions-item>
19+
<el-descriptions-item label="回款金额">
20+
{{ erpPriceInputFormatter(receivable.price) }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="回款方式">
23+
<dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE" :value="receivable.returnType" />
24+
</el-descriptions-item>
25+
<el-descriptions-item label="备注">{{ receivable.remark }}</el-descriptions-item>
26+
</el-descriptions>
27+
</el-collapse-item>
28+
<el-collapse-item name="systemInfo">
29+
<template #title>
30+
<span class="text-base font-bold">系统信息</span>
31+
</template>
32+
<el-descriptions :column="4">
33+
<el-descriptions-item label="负责人">
34+
{{ receivable.ownerUserName }}
35+
</el-descriptions-item>
36+
<el-descriptions-item label="创建人">
37+
{{ receivable.creatorName }}
38+
</el-descriptions-item>
39+
<el-descriptions-item label="创建时间">
40+
{{ formatDate(receivable.createTime) }}
41+
</el-descriptions-item>
42+
<el-descriptions-item label="更新时间">
43+
{{ formatDate(receivable.updateTime) }}
44+
</el-descriptions-item>
45+
</el-descriptions>
46+
</el-collapse-item>
47+
</el-collapse>
48+
</ContentWrap>
49+
</template>
50+
<script setup lang="ts">
51+
import * as ReceivableApi from '@/api/crm/receivable'
52+
import { DICT_TYPE } from '@/utils/dict'
53+
import { formatDate } from '@/utils/formatTime'
54+
import { erpPriceInputFormatter } from '@/utils'
55+
56+
const { receivable } = defineProps<{
57+
receivable: ReceivableApi.ReceivableVO
58+
}>()
59+
60+
// 展示的折叠面板
61+
const activeNames = ref(['basicInfo', 'systemInfo'])
62+
</script>

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<ReceivableDetailsHeader v-loading="loading" :receivable="receivable">
3+
<el-button v-if="permissionListRef?.validateWrite" @click="openForm('update', receivable.id)">
4+
编辑
5+
</el-button>
6+
</ReceivableDetailsHeader>
7+
<el-col>
8+
<el-tabs>
9+
<el-tab-pane label="详细资料">
10+
<ReceivableDetailsInfo :receivable="receivable" />
11+
</el-tab-pane>
12+
<el-tab-pane label="操作日志">
13+
<OperateLogV2 :log-list="logList" />
14+
</el-tab-pane>
15+
<el-tab-pane label="团队成员">
16+
<PermissionList
17+
ref="permissionListRef"
18+
:biz-id="receivable.id!"
19+
:biz-type="BizTypeEnum.CRM_RECEIVABLE"
20+
:show-action="true"
21+
@quit-team="close"
22+
/>
23+
</el-tab-pane>
24+
</el-tabs>
25+
</el-col>
26+
27+
<!-- 表单弹窗：添加/修改 -->
28+
<ReceivableForm ref="formRef" @success="getReceivable(receivable.id)" />
29+
</template>
30+
<script lang="ts" setup>
31+
import { useTagsViewStore } from '@/store/modules/tagsView'
32+
import * as ReceivableApi from '@/api/crm/receivable'
33+
import ReceivableDetailsHeader from './ReceivableDetailsHeader.vue'
34+
import ReceivableDetailsInfo from './ReceivableDetailsInfo.vue'
35+
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
36+
import { BizTypeEnum } from '@/api/crm/permission'
37+
import { OperateLogV2VO } from '@/api/system/operatelog'
38+
import { getOperateLogPage } from '@/api/crm/operateLog'
39+
import ReceivableForm from '@/views/crm/receivable/ReceivableForm.vue'
40+
41+
defineOptions({ name: 'CrmReceivablePlanDetail' })
42+
43+
const message = useMessage()
44+
45+
const receivableId = ref(0) // 回款编号
46+
const loading = ref(true) // 加载中
47+
const receivable = ref<ReceivableApi.ReceivableVO>({} as ReceivableApi.ReceivableVO) // 回款详情
48+
const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
49+
50+
/** 获取详情 */
51+
const getReceivable = async (id: number) => {
52+
loading.value = true
53+
try {
54+
receivable.value = await ReceivableApi.getReceivable(id)
55+
await getOperateLog(id)
56+
} finally {
57+
loading.value = false
58+
}
59+
}
60+
61+
/** 编辑 */
62+
const formRef = ref()
63+
const openForm = (type: string, id?: number) => {
64+
formRef.value.open(type, id)
65+
}
66+
67+
/** 获取操作日志 */
68+
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
69+
const getOperateLog = async (receivableId: number) => {
70+
if (!receivableId) {
71+
return
72+
}
73+
const data = await getOperateLogPage({
74+
bizType: BizTypeEnum.CRM_RECEIVABLE,
75+
bizId: receivableId
76+
})
77+
logList.value = data.list
78+
}
79+
80+
/** 关闭窗口 */
81+
const { delView } = useTagsViewStore() // 视图操作
82+
const { currentRoute } = useRouter() // 路由
83+
const close = () => {
84+
delView(unref(currentRoute))
85+
}
86+
87+
/** 初始化 */
88+
const { params } = useRoute()
89+
onMounted(async () => {
90+
if (!params.id) {
91+
message.warning('参数错误，回款不能为空！')
92+
close()
93+
return
94+
}
95+
receivableId.value = params.id as unknown as number
96+
await getReceivable(receivableId.value)
97+
})
98+
</script>

‎src/views/crm/receivable/index.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,13 @@
7272
<el-tab-pane label="下属负责的" name="3" />
7373
</el-tabs>
7474
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
75-
<el-table-column align="center" fixed="left" label="回款编号" prop="no" width="180" />
75+
<el-table-column align="center" fixed="left" label="回款编号" prop="no" width="180">
76+
<template #default="scope">
77+
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
78+
{{ scope.row.no }}
79+
</el-link>
80+
</template>
81+
</el-table-column>
7682
<el-table-column align="center" label="客户名称" prop="customerName" width="120">
7783
<template #default="scope">
7884
<el-link

‎src/views/crm/receivable/plan/detail/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ defineOptions({ name: 'CrmReceivablePlanDetail' })
4545
4646
const message = useMessage()
4747
48-
const receivablePlanId = ref(0) // 线索编号
48+
const receivablePlanId = ref(0) // 回款计划编号
4949
const loading = ref(true) // 加载中
5050
const receivablePlan = ref<ReceivablePlanApi.ReceivablePlanVO>(
5151
{} as ReceivablePlanApi.ReceivablePlanVO

0 commit comments

Comments
 (0)