Skip to content

Commit fee444d

Browse files
YunaiVYunaiV
committed
✨ CRM：完善回款 plan 详情
1 parent 5cb8658 commit fee444d

File tree

6 files changed

+261
-3
lines changed

6 files changed

+261
-3
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,16 @@ export interface ReceivablePlanVO {
1111
remindDays: number
1212
remindTime: Date
1313
customerId: number
14+
customerName?: string
1415
contractId: number
16+
contractNo?: string
1517
ownerUserId: number
18+
ownerUserName?: string
1619
remark: string
20+
creator: string // 创建人
21+
creatorName?: string // 创建人名称
22+
createTime: Date // 创建时间
23+
updateTime: Date // 更新时间
1724
receivable?: {
1825
price: number
1926
returnTime: Date

‎src/router/modules/remaining.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
539539
},
540540
component: () => import('@/views/crm/contract/detail/index.vue')
541541
},
542+
{
543+
path: 'receivable-plan/detail/:id',
544+
name: 'CrmReceivablePlanDetail',
545+
meta: {
546+
title: '回款计划详情',
547+
noCache: true,
548+
hidden: true,
549+
activeMenu: '/crm/contract'
550+
},
551+
component: () => import('@/views/crm/receivable/plan/detail/index.vue')
552+
},
542553
{
543554
path: 'contact/detail/:id',
544555
name: 'CrmContactDetail',

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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">第 {{ receivablePlan.period }} 期</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+
{{ receivablePlan.customerName }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="合同编号">{{ receivablePlan.contractNo }}</el-descriptions-item>
23+
<el-descriptions-item label="计划回款金额">
24+
{{ erpPriceInputFormatter(receivablePlan.price) }}
25+
</el-descriptions-item>
26+
<el-descriptions-item label="计划回款日期">
27+
{{ formatDate(receivablePlan.returnTime) }}
28+
</el-descriptions-item>
29+
<el-descriptions-item label="实际回款金额">
30+
<el-text v-if="receivablePlan.receivable">
31+
{{ erpPriceInputFormatter(receivablePlan.receivable.price) }}
32+
</el-text>
33+
<el-text v-else>{{ erpPriceInputFormatter(0) }}</el-text>
34+
</el-descriptions-item>
35+
</el-descriptions>
36+
</ContentWrap>
37+
</template>
38+
<script lang="ts" setup>
39+
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
40+
import { formatDate } from '@/utils/formatTime'
41+
import { erpPriceInputFormatter } from '@/utils'
42+
43+
const { receivablePlan } = defineProps<{ receivablePlan: ReceivablePlanApi.ReceivablePlanVO }>()
44+
</script>

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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="期数">{{ receivablePlan.period }}</el-descriptions-item>
10+
<el-descriptions-item label="客户名称">
11+
{{ receivablePlan.customerName }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="合同编号">
14+
{{ receivablePlan.contractNo }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="计划回款金额">
17+
{{ erpPriceInputFormatter(receivablePlan.price) }}
18+
</el-descriptions-item>
19+
<el-descriptions-item label="计划回款日期">
20+
{{ formatDate(receivablePlan.returnTime, 'YYYY-MM-DD') }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="计划回款方式">
23+
<dict-tag
24+
:type="DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE"
25+
:value="receivablePlan.returnType"
26+
/>
27+
</el-descriptions-item>
28+
<el-descriptions-item label="提前几天提醒">
29+
{{ receivablePlan.remindDays }}
30+
</el-descriptions-item>
31+
<el-descriptions-item label="备注">{{ receivablePlan.remark }}</el-descriptions-item>
32+
<el-descriptions-item label="实际回款金额">
33+
<el-text v-if="receivablePlan.receivable">
34+
{{ erpPriceInputFormatter(receivablePlan.receivable.price) }}
35+
</el-text>
36+
<el-text v-else>{{ erpPriceInputFormatter(0) }}</el-text>
37+
</el-descriptions-item>
38+
<el-descriptions-item label="未回款金额">
39+
<el-text v-if="receivablePlan.receivable">
40+
{{ erpPriceInputFormatter(receivablePlan.price - receivablePlan.receivable.price) }}
41+
</el-text>
42+
<el-text v-else>{{ erpPriceInputFormatter(receivablePlan.price) }}</el-text>
43+
</el-descriptions-item>
44+
<el-descriptions-item label="实际回款日期">
45+
{{ formatDate(receivablePlan.receivable?.returnTime, 'YYYY-MM-DD') }}
46+
</el-descriptions-item>
47+
</el-descriptions>
48+
</el-collapse-item>
49+
<el-collapse-item name="systemInfo">
50+
<template #title>
51+
<span class="text-base font-bold">系统信息</span>
52+
</template>
53+
<el-descriptions :column="4">
54+
<el-descriptions-item label="负责人">
55+
{{ receivablePlan.ownerUserName }}
56+
</el-descriptions-item>
57+
<el-descriptions-item label="创建人">
58+
{{ receivablePlan.creatorName }}
59+
</el-descriptions-item>
60+
<el-descriptions-item label="创建时间">
61+
{{ formatDate(receivablePlan.createTime) }}
62+
</el-descriptions-item>
63+
<el-descriptions-item label="更新时间">
64+
{{ formatDate(receivablePlan.updateTime) }}
65+
</el-descriptions-item>
66+
</el-descriptions>
67+
</el-collapse-item>
68+
</el-collapse>
69+
</ContentWrap>
70+
</template>
71+
<script setup lang="ts">
72+
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
73+
import { DICT_TYPE } from '@/utils/dict'
74+
import { formatDate } from '@/utils/formatTime'
75+
import { erpPriceInputFormatter } from '@/utils'
76+
77+
const { receivablePlan } = defineProps<{
78+
receivablePlan: ReceivablePlanApi.ReceivablePlanVO
79+
}>()
80+
81+
// 展示的折叠面板
82+
const activeNames = ref(['basicInfo', 'systemInfo'])
83+
</script>

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

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

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,13 @@
7979
</template>
8080
</el-table-column>
8181
<el-table-column align="center" label="合同编号" prop="contractNo" width="200px" />
82-
<!-- TODO @puhui999：这里可以点到详情；最新版本，他有了单独的详情哈 -->
83-
<el-table-column align="center" label="期数" prop="period" />
82+
<el-table-column align="center" label="期数" prop="period">
83+
<template #default="scope">
84+
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
85+
{{ scope.row.period }}
86+
</el-link>
87+
</template>
88+
</el-table-column>
8489
<el-table-column
8590
align="center"
8691
label="计划回款金额（元）"
@@ -289,8 +294,13 @@ const handleExport = async () => {
289294
}
290295
}
291296
292-
/** 打开客户详情 */
297+
/** 打开详情 */
293298
const { push } = useRouter()
299+
const openDetail = (id: number) => {
300+
push({ name: 'CrmReceivablePlanDetail', params: { id } })
301+
}
302+
303+
/** 打开客户详情 */
294304
const openCustomerDetail = (id: number) => {
295305
push({ name: 'CrmCustomerDetail', params: { id } })
296306
}

0 commit comments

Comments
 (0)