Skip to content

Commit 41195d5

Browse files
author
puhui999
committed
CRM-合同：新增合同预览审批流程和提交审核
1 parent 668da2f commit 41195d5

File tree

5 files changed

+266
-3
lines changed

5 files changed

+266
-3
lines changed

‎src/api/bpm/model/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ export const getModelPage = async (params) => {
3232
export const getModel = async (id: number) => {
3333
return await request.get({ url: '/bpm/model/get?id=' + id })
3434
}
35-
35+
export const getModelByKey = async (key: string) => {
36+
return await request.get({ url: '/bpm/model/get-by-key?key=' + key })
37+
}
3638
export const updateModel = async (data: ModelVO) => {
3739
return await request.put({ url: '/bpm/model/update', data: data })
3840
}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,14 @@
145145
<CardTitle class="mb-10px" title="审批信息" />
146146
</el-col>
147147
<el-col :span="12">
148-
<el-button class="m-20px" link type="primary">查看工作流</el-button>
148+
<el-button
149+
class="m-20px"
150+
link
151+
type="primary"
152+
@click="BPMLModelRef?.handleBpmnDetail('contract-approve')"
153+
>
154+
查看工作流
155+
</el-button>
149156
</el-col>
150157
</el-row>
151158
</el-form>
@@ -154,6 +161,7 @@
154161
<el-button @click="dialogVisible = false">取 消</el-button>
155162
</template>
156163
</Dialog>
164+
<BPMLModel ref="BPMLModelRef" />
157165
</template>
158166
<script lang="ts" setup>
159167
import * as CustomerApi from '@/api/crm/customer'
@@ -162,6 +170,7 @@ import * as UserApi from '@/api/system/user'
162170
import * as ContactApi from '@/api/crm/contact'
163171
import * as BusinessApi from '@/api/crm/business'
164172
import ProductList from './components/ProductList.vue'
173+
import BPMLModel from '@/views/crm/contract/components/BPMLModel.vue'
165174
166175
const { t } = useI18n() // 国际化
167176
const message = useMessage() // 消息弹窗
@@ -179,6 +188,7 @@ const formRules = reactive({
179188
no: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }]
180189
})
181190
const formRef = ref() // 表单 Ref
191+
const BPMLModelRef = ref<InstanceType<typeof BPMLModel>>()
182192
watch(
183193
() => formData.value.productItems,
184194
(val) => {

‎src/views/crm/contract/components/BPMLModel.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<!-- 弹窗：流程模型图的预览 -->
3+
<Dialog v-model="bpmnDetailVisible" :append-to-body="true" title="流程图" width="800">
4+
<MyProcessViewer
5+
key="designer"
6+
v-model="bpmnXML"
7+
:prefix="bpmnControlForm.prefix"
8+
:value="bpmnXML as any"
9+
v-bind="bpmnControlForm"
10+
/>
11+
</Dialog>
12+
</template>
13+
14+
<script lang="ts" setup>
15+
import * as ModelApi from '@/api/bpm/model'
16+
import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
17+
18+
defineOptions({ name: 'BPMLModel' })
19+
/** 流程图的详情按钮操作 */
20+
const bpmnDetailVisible = ref(false)
21+
const bpmnXML = ref(null)
22+
const bpmnControlForm = ref({
23+
prefix: 'flowable'
24+
})
25+
const handleBpmnDetail = async (key: string) => {
26+
const data = await ModelApi.getModelByKey(key)
27+
bpmnXML.value = data.bpmnXml || ''
28+
bpmnDetailVisible.value = true
29+
}
30+
defineExpose({ handleBpmnDetail })
31+
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ onMounted(async () => {
105105
close()
106106
return
107107
}
108-
contractId.value = id
108+
contractId.value = id as unknown as number
109109
await getContractData()
110110
})
111111
</script>

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

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<template>
2+
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="110px">
3+
<el-row>
4+
<el-col :span="24" class="mb-10px">
5+
<CardTitle title="基本信息" />
6+
</el-col>
7+
<el-col :span="12">
8+
<el-form-item label="合同名称" prop="name">
9+
<el-input v-model="formData.name" placeholder="请输入合同名称" />
10+
</el-form-item>
11+
</el-col>
12+
<el-col :span="12">
13+
<el-form-item label="合同编号" prop="no">
14+
<el-input v-model="formData.no" placeholder="请输入合同编号" />
15+
</el-form-item>
16+
</el-col>
17+
<el-col :span="12">
18+
<el-form-item label="客户" prop="customerId">
19+
<el-select v-model="formData.customerId">
20+
<el-option
21+
v-for="item in customerList"
22+
:key="item.id"
23+
:label="item.name"
24+
:value="item.id!"
25+
/>
26+
</el-select>
27+
</el-form-item>
28+
</el-col>
29+
<el-col :span="12">
30+
<el-form-item label="客户签约人" prop="contactId">
31+
<el-select v-model="formData.contactId" :disabled="!formData.customerId">
32+
<el-option
33+
v-for="item in getContactOptions"
34+
:key="item.id"
35+
:label="item.name"
36+
:value="item.id!"
37+
/>
38+
</el-select>
39+
</el-form-item>
40+
</el-col>
41+
<el-col :span="12">
42+
<el-form-item label="公司签约人" prop="signUserId">
43+
<el-select v-model="formData.signUserId">
44+
<el-option
45+
v-for="item in userList"
46+
:key="item.id"
47+
:label="item.nickname"
48+
:value="item.id!"
49+
/>
50+
</el-select>
51+
</el-form-item>
52+
</el-col>
53+
<el-col :span="12">
54+
<el-form-item label="负责人" prop="ownerUserId">
55+
<el-select v-model="formData.ownerUserId">
56+
<el-option
57+
v-for="item in userList"
58+
:key="item.id"
59+
:label="item.nickname"
60+
:value="item.id!"
61+
/>
62+
</el-select>
63+
</el-form-item>
64+
</el-col>
65+
<el-col :span="12">
66+
<el-form-item label="商机名称" prop="businessId">
67+
<el-select v-model="formData.businessId">
68+
<el-option
69+
v-for="item in businessList"
70+
:key="item.id"
71+
:label="item.name"
72+
:value="item.id!"
73+
/>
74+
</el-select>
75+
</el-form-item>
76+
</el-col>
77+
<el-col :span="12">
78+
<el-form-item label="合同金额(元)" prop="price">
79+
<el-input v-model="formData.price" placeholder="请输入合同金额" />
80+
</el-form-item>
81+
</el-col>
82+
<el-col :span="12">
83+
<el-form-item label="下单日期" prop="orderDate">
84+
<el-date-picker
85+
v-model="formData.orderDate"
86+
placeholder="选择下单日期"
87+
type="date"
88+
value-format="x"
89+
/>
90+
</el-form-item>
91+
</el-col>
92+
<el-col :span="12">
93+
<el-form-item label="开始时间" prop="startTime">
94+
<el-date-picker
95+
v-model="formData.startTime"
96+
placeholder="选择开始时间"
97+
type="date"
98+
value-format="x"
99+
/>
100+
</el-form-item>
101+
</el-col>
102+
<el-col :span="12">
103+
<el-form-item label="结束时间" prop="endTime">
104+
<el-date-picker
105+
v-model="formData.endTime"
106+
placeholder="选择结束时间"
107+
type="date"
108+
value-format="x"
109+
/>
110+
</el-form-item>
111+
</el-col>
112+
<el-col :span="24">
113+
<el-form-item label="备注" prop="remark">
114+
<el-input v-model="formData.remark" :rows="3" placeholder="请输入备注" type="textarea" />
115+
</el-form-item>
116+
</el-col>
117+
<el-col :span="24">
118+
<el-form-item label="产品列表" prop="productList">
119+
<ProductList v-model="formData.productItems" />
120+
</el-form-item>
121+
</el-col>
122+
<el-col :span="12">
123+
<el-form-item label="整单折扣(%)" prop="discountPercent">
124+
<el-input v-model="formData.discountPercent" placeholder="请输入整单折扣" />
125+
</el-form-item>
126+
</el-col>
127+
<el-col :span="12">
128+
<el-form-item label="产品总金额(元)" prop="productPrice">
129+
<el-input v-model="formData.productPrice" placeholder="请输入产品总金额" />
130+
</el-form-item>
131+
</el-col>
132+
<el-col :span="24">
133+
<CardTitle class="mb-10px" title="审批信息" />
134+
</el-col>
135+
<el-col :span="12">
136+
<el-button
137+
class="m-20px"
138+
link
139+
type="primary"
140+
@click="BPMLModelRef?.handleBpmnDetail('contract-approve')"
141+
>
142+
查看工作流
143+
</el-button>
144+
</el-col>
145+
</el-row>
146+
</el-form>
147+
<BPMLModel ref="BPMLModelRef" />
148+
</template>
149+
<script lang="ts" setup>
150+
import * as CustomerApi from '@/api/crm/customer'
151+
import * as ContractApi from '@/api/crm/contract'
152+
import * as UserApi from '@/api/system/user'
153+
import * as ContactApi from '@/api/crm/contact'
154+
import * as BusinessApi from '@/api/crm/business'
155+
import ProductList from '@/views/crm/contract/components/ProductList.vue'
156+
import BPMLModel from '@/views/crm/contract/components/BPMLModel.vue'
157+
158+
defineOptions({ name: 'ContractDetailOA' })
159+
const props = defineProps<{ id?: number }>()
160+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
161+
const formData = ref<ContractApi.ContractVO>({} as ContractApi.ContractVO)
162+
const formRef = ref() // 表单 Ref
163+
const BPMLModelRef = ref<InstanceType<typeof BPMLModel>>()
164+
watch(
165+
() => formData.value.productItems,
166+
(val) => {
167+
if (!val || val.length === 0) {
168+
formData.value.productPrice = 0
169+
return
170+
}
171+
// 使用reduce函数进行累加
172+
formData.value.productPrice = val.reduce(
173+
(accumulator, currentValue) =>
174+
isNaN(accumulator + currentValue.totalPrice) ? 0 : accumulator + currentValue.totalPrice,
175+
0
176+
)
177+
},
178+
{ deep: true }
179+
)
180+
/** 打开弹窗 */
181+
const getFormData = async () => {
182+
await getAllApi()
183+
formLoading.value = true
184+
try {
185+
formData.value = await ContractApi.getContract(props.id!)
186+
} finally {
187+
formLoading.value = false
188+
}
189+
}
190+
const getAllApi = async () => {
191+
await Promise.all([getCustomerList(), getUserList(), getContactListList(), getBusinessList()])
192+
}
193+
const customerList = ref<CustomerApi.CustomerVO[]>([])
194+
/** 获取客户 */
195+
const getCustomerList = async () => {
196+
customerList.value = await CustomerApi.getSimpleCustomerList()
197+
}
198+
const contactList = ref<ContactApi.ContactVO[]>([])
199+
/** 动态获取客户联系人 */
200+
const getContactOptions = computed(() =>
201+
contactList.value.filter((item) => item.customerId === formData.value.customerId)
202+
)
203+
const getContactListList = async () => {
204+
contactList.value = await ContactApi.getSimpleContactList()
205+
}
206+
const userList = ref<UserApi.UserVO[]>([])
207+
/** 获取用户列表 */
208+
const getUserList = async () => {
209+
userList.value = await UserApi.getSimpleUserList()
210+
}
211+
const businessList = ref<BusinessApi.BusinessVO[]>([])
212+
/** 获取商机 */
213+
const getBusinessList = async () => {
214+
businessList.value = await BusinessApi.getSimpleBusinessList()
215+
}
216+
217+
onMounted(() => {
218+
getFormData()
219+
})
220+
</script>

0 commit comments

Comments
 (0)