Skip to content

Commit 668da2f

Browse files
author
puhui999
committed
CRM-合同：新增合同详情
1 parent 90e0baf commit 668da2f

File tree

7 files changed

+245
-6
lines changed

7 files changed

+245
-6
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import request from '@/config/axios'
22
import { ProductExpandVO } from '@/api/crm/product'
3+
import { TransferReqVO } from '@/api/crm/customer'
34

45
export interface ContractVO {
56
id: number
@@ -21,6 +22,12 @@ export interface ContractVO {
2122
status: number
2223
remark: string
2324
productItems: ProductExpandVO[]
25+
creatorName: string
26+
updateTime?: Date
27+
createTime?: Date
28+
customerName: string
29+
contactName: string
30+
ownerUserName: string
2431
}
2532

2633
// 查询 CRM 合同列表
@@ -62,3 +69,8 @@ export const exportContract = async (params) => {
6269
export const handleApprove = async (id: number) => {
6370
return await request.put({ url: `/crm/contract/approve?id=${id}` })
6471
}
72+
73+
// 合同转移
74+
export const transfer = async (data: TransferReqVO) => {
75+
return await request.put({ url: '/crm/contract/transfer', data })
76+
}

‎src/router/modules/remaining.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -507,6 +507,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
507507
},
508508
component: () => import('@/views/crm/customer/detail/index.vue')
509509
},
510+
{
511+
path: 'contract/detail/:id',
512+
name: 'CrmContractDetail',
513+
meta: {
514+
title: '合同详情',
515+
noCache: true,
516+
hidden: true,
517+
activeMenu: '/crm/contract'
518+
},
519+
component: () => import('@/views/crm/contract/detail/index.vue')
520+
},
510521
{
511522
path: 'contact/detail/:id',
512523
name: 'CrmContactDetail',

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</el-tabs>
3535
</el-col>
3636
<!-- 表单弹窗：添加/修改 -->
37-
<ContactForm ref="formRef" @success="getContactData" />
37+
<ContactForm ref="formRef" @success="getContactData(contact.id)" />
3838
<CrmTransferForm ref="crmTransferFormRef" @success="close" />
3939
</template>
4040
<script lang="ts" setup>
@@ -53,6 +53,7 @@ import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
5353
defineOptions({ name: 'CrmContactDetail' })
5454
5555
const route = useRoute()
56+
const message = useMessage()
5657
const id = Number(route.params.id) // 联系人编号
5758
const loading = ref(true) // 加载中
5859
const contact = ref<ContactApi.ContactVO>({} as ContactApi.ContactVO) // 联系人详情
@@ -102,7 +103,7 @@ const { delView } = useTagsViewStore() // 视图操作
102103
const { currentRoute } = useRouter() // 路由
103104
onMounted(async () => {
104105
if (!id) {
105-
ElMessage.warning('参数错误，联系人不能为空！')
106+
message.warning('参数错误，联系人不能为空！')
106107
close()
107108
return
108109
}

‎src/views/crm/contract/detail/ContractDetailsHeader.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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">{{ contract.name }}</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+
{{ contract.customerName }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="客户签约人">
23+
{{ contract.contactName }}
24+
</el-descriptions-item>
25+
<el-descriptions-item label="合同金额">
26+
{{ contract.productPrice }}
27+
</el-descriptions-item>
28+
<el-descriptions-item label="创建时间">
29+
{{ contract.createTime ? formatDate(contract.createTime) : '空' }}
30+
</el-descriptions-item>
31+
</el-descriptions>
32+
</ContentWrap>
33+
</template>
34+
<script lang="ts" setup>
35+
import * as ContractApi from '@/api/crm/contract'
36+
import { formatDate } from '@/utils/formatTime'
37+
38+
defineOptions({ name: 'ContractDetailsHeader' })
39+
defineProps<{ contract: ContractApi.ContractVO }>()
40+
</script>

‎src/views/crm/contract/detail/ContractDetailsInfo.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<ContentWrap>
3+
<el-collapse v-model="activeNames">
4+
<el-collapse-item name="contractInfo">
5+
<template #title>
6+
<span class="text-base font-bold">基本信息</span>
7+
</template>
8+
<!-- TODO puhui999: 先出详情样式后补全 -->
9+
<el-descriptions :column="4">
10+
<el-descriptions-item label="合同名称">
11+
{{ contract.name }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="备注">
14+
{{ contract.remark }}
15+
</el-descriptions-item>
16+
</el-descriptions>
17+
</el-collapse-item>
18+
<el-collapse-item name="systemInfo">
19+
<template #title>
20+
<span class="text-base font-bold">系统信息</span>
21+
</template>
22+
<el-descriptions :column="2">
23+
<el-descriptions-item label="负责人">
24+
{{ contract.ownerUserName }}
25+
</el-descriptions-item>
26+
<el-descriptions-item label="创建人">
27+
{{ contract.creatorName }}
28+
</el-descriptions-item>
29+
<el-descriptions-item label="创建时间">
30+
{{ contract.createTime ? formatDate(contract.createTime) : '空' }}
31+
</el-descriptions-item>
32+
<el-descriptions-item label="更新时间">
33+
{{ contract.updateTime ? formatDate(contract.updateTime) : '空' }}
34+
</el-descriptions-item>
35+
</el-descriptions>
36+
</el-collapse-item>
37+
</el-collapse>
38+
</ContentWrap>
39+
</template>
40+
<script lang="ts" setup>
41+
import * as ContractApi from '@/api/crm/contract'
42+
import { formatDate } from '@/utils/formatTime'
43+
44+
defineOptions({ name: 'ContractDetailsInfo' })
45+
defineProps<{
46+
contract: ContractApi.ContractVO
47+
}>()
48+
49+
// 展示的折叠面板
50+
const activeNames = ref(['contractInfo', 'systemInfo'])
51+
</script>

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<ContractDetailsHeader v-loading="loading" :contract="contract">
3+
<el-button v-if="permissionListRef?.validateWrite" @click="openForm('update', contract.id)">
4+
编辑
5+
</el-button>
6+
<el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transfer">
7+
转移
8+
</el-button>
9+
</ContractDetailsHeader>
10+
<el-col>
11+
<el-tabs>
12+
<el-tab-pane label="详细资料">
13+
<ContractDetailsInfo :contract="contract" />
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="contract.id!"
22+
:biz-type="BizTypeEnum.CRM_CONTRACT"
23+
:show-action="!permissionListRef?.isPool || false"
24+
@quit-team="close"
25+
/>
26+
</el-tab-pane>
27+
<el-tab-pane label="商机" lazy>
28+
<BusinessList
29+
:biz-id="contract.id!"
30+
:biz-type="BizTypeEnum.CRM_CONTRACT"
31+
:customer-id="contract.customerId"
32+
/>
33+
</el-tab-pane>
34+
</el-tabs>
35+
</el-col>
36+
<!-- 表单弹窗：添加/修改 -->
37+
<ContractForm ref="formRef" @success="getContractData" />
38+
<CrmTransferForm ref="crmTransferFormRef" @success="close" />
39+
</template>
40+
<script lang="ts" setup>
41+
import { useTagsViewStore } from '@/store/modules/tagsView'
42+
import { OperateLogV2VO } from '@/api/system/operatelog'
43+
import * as ContractApi from '@/api/crm/contract'
44+
import ContractDetailsHeader from './ContractDetailsHeader.vue'
45+
import ContractDetailsInfo from './ContractDetailsInfo.vue'
46+
import { BizTypeEnum } from '@/api/crm/permission'
47+
import { getOperateLogPage } from '@/api/crm/operateLog'
48+
import ContractForm from '@/views/crm/contract/ContractForm.vue'
49+
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
50+
import PermissionList from '@/views/crm/permission/components/PermissionList.vue'
51+
import BusinessList from '@/views/crm/business/components/BusinessList.vue'
52+
53+
defineOptions({ name: 'CrmContractDetail' })
54+
55+
const route = useRoute()
56+
const message = useMessage()
57+
const contractId = ref(0) // 编号
58+
const loading = ref(true) // 加载中
59+
const contract = ref<ContractApi.ContractVO>({} as ContractApi.ContractVO) // 详情
60+
/** 编辑 */
61+
const formRef = ref()
62+
const openForm = (type: string, id?: number) => {
63+
formRef.value.open(type, id)
64+
}
65+
/** 获取详情 */
66+
const getContractData = async () => {
67+
loading.value = true
68+
try {
69+
await getOperateLog(contractId.value)
70+
contract.value = await ContractApi.getContract(contractId.value)
71+
} finally {
72+
loading.value = false
73+
}
74+
}
75+
76+
/** 获取操作日志 */
77+
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
78+
const getOperateLog = async (contractId: number) => {
79+
if (!contractId) {
80+
return
81+
}
82+
const data = await getOperateLogPage({
83+
bizType: BizTypeEnum.CRM_CONTRACT,
84+
bizId: contractId
85+
})
86+
logList.value = data.list
87+
}
88+
89+
const crmTransferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 合同转移表单 ref
90+
const transfer = () => {
91+
crmTransferFormRef.value?.open('合同转移', contract.value.id, ContractApi.transfer)
92+
}
93+
94+
const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
95+
/** 初始化 */
96+
const { delView } = useTagsViewStore() // 视图操作
97+
const { currentRoute } = useRouter() // 路由
98+
const close = () => {
99+
delView(unref(currentRoute))
100+
}
101+
onMounted(async () => {
102+
const id = route.params.id
103+
if (!id) {
104+
message.warning('参数错误，合同不能为空！')
105+
close()
106+
return
107+
}
108+
contractId.value = id
109+
await getContractData()
110+
})
111+
</script>

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
width="180px"
106106
/>
107107
<el-table-column align="center" label="备注" prop="remark" />
108-
<el-table-column label="操作" width="120px">
108+
<el-table-column fixed="right" label="操作" width="250">
109109
<template #default="scope">
110110
<el-button
111111
v-hasPermi="['crm:contract:update']"
@@ -119,10 +119,18 @@
119119
v-hasPermi="['crm:contract:update']"
120120
link
121121
type="primary"
122-
@click="handleApprove(scope.row.id)"
122+
@click="handleApprove(scope.row)"
123123
>
124124
提交审核
125125
</el-button>
126+
<el-button
127+
v-hasPermi="['crm:contract:query']"
128+
link
129+
type="primary"
130+
@click="openDetail(scope.row.id)"
131+
>
132+
详情
133+
</el-button>
126134
<el-button
127135
v-hasPermi="['crm:contract:delete']"
128136
link
@@ -233,11 +241,16 @@ const handleExport = async () => {
233241
}
234242
235243
/** 提交审核 **/
236-
const handleApprove = async (id: number) => {
237-
await ContractApi.handleApprove(id)
244+
const handleApprove = async (row: ContractApi.ContractVO) => {
245+
await message.confirm(`您确定提交【${row.name}】审核吗？`)
246+
await ContractApi.handleApprove(row.id)
238247
message.success('提交审核成功！')
239248
await getList()
240249
}
250+
const { push } = useRouter()
251+
const openDetail = (id: number) => {
252+
push({ name: 'CrmContractDetail', params: { id } })
253+
}
241254
/** 初始化 **/
242255
onMounted(() => {
243256
getList()

0 commit comments

Comments
 (0)