root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

CRM：优化合同列的新增/修改界面

Browse Source
This commit is contained in:
YunaiV 2024-02-04 12:57:39 +08:00
parent 6d0231d409
commit cac39ae126
8 changed files with 112 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/bpm/model/index.ts
View File

@ -33,10 +33,6 @@ export const getModel = async (id: number) => {
return await request.get({ url: '/bpm/model/get?id=' + id })
}
export const getModelByKey = async (key: string) => {
return await request.get({ url: '/bpm/model/get-by-key?key=' + key })
}
export const updateModel = async (data: ModelVO) => {
return await request.put({ url: '/bpm/model/update', data: data })
}

4
src/api/crm/contract/index.ts
View File

@ -68,8 +68,8 @@ export const exportContract = async (params) => {
}
// 提交审核
export const handleApprove = async (id: number) => {
return await request.put({ url: `/crm/contract/approve?id=${id}` })
export const submitContract = async (id: number) => {
return await request.put({ url: `/crm/contract/submit?id=${id}` })
}
// 合同转移

131
src/views/crm/contract/ContractForm.vue
View File

@ -1,5 +1,5 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="70%">
<Dialog v-model="dialogVisible" :title="dialogTitle" width="820">
<el-form
ref="formRef"
v-loading="formLoading"
@ -8,8 +8,10 @@
label-width="110px"
>
<el-row :gutter="20">
<el-col :span="24" class="mb-10px">
<CardTitle title="基本信息" />
<el-col :span="12">
<el-form-item label="合同编号" prop="no">
<el-input v-model="formData.no" placeholder="请输入合同编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="name">
@ -17,12 +19,7 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="no">
<el-input v-model="formData.no" placeholder="请输入合同编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户" prop="customerId">
<el-form-item label="客户名称" prop="customerId">
<el-select v-model="formData.customerId">
<el-option
v-for="item in customerList"
@ -33,42 +30,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户签约人" prop="contactId">
<el-select v-model="formData.contactId" :disabled="!formData.customerId">
<el-option
v-for="item in getContactOptions"
:key="item.id"
:label="item.name"
:value="item.id!"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司签约人" prop="signUserId">
<el-select v-model="formData.signUserId">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.nickname"
:value="item.id!"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="ownerUserId">
<el-select v-model="formData.ownerUserId">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.nickname"
:value="item.id!"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="商机名称" prop="businessId">
<el-select v-model="formData.businessId">
@ -81,11 +42,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额(元)" prop="price">
<el-input v-model="formData.price" placeholder="请输入合同金额" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下单日期" prop="orderDate">
<el-date-picker
@ -96,6 +52,11 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额" prop="price">
<el-input v-model="formData.price" placeholder="请输入合同金额" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
@ -116,6 +77,42 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司签约人" prop="signUserId">
<el-select v-model="formData.signUserId">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.nickname"
:value="item.id!"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户签约人" prop="contactId">
<el-select v-model="formData.contactId" :disabled="!formData.customerId">
<el-option
v-for="item in getContactOptions"
:key="item.id"
:label="item.name"
:value="item.id!"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="ownerUserId">
<el-select v-model="formData.ownerUserId">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.nickname"
:value="item.id!"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
@ -126,6 +123,7 @@
/>
</el-form-item>
</el-col>
<!-- TODO @puhui999：productItems 改成 products 会更好点；因为它不是 item 哈 -->
<el-col :span="24">
<el-form-item label="产品列表" prop="productList">
<ProductList v-model="formData.productItems" />
@ -133,28 +131,21 @@
</el-col>
<el-col :span="12">
<el-form-item label="整单折扣(%)" prop="discountPercent">
<el-input v-model="formData.discountPercent" placeholder="请输入整单折扣" />
<el-input-number
v-model="formData.discountPercent"
:min="0"
:max="100"
:precision="0"
placeholder="请输入整单折扣"
class="!w-100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品总金额(元)" prop="productPrice">
{{ floatToFixed2(formData.productPrice) }}
{{ fenToYuan(formData.productPrice) }}
</el-form-item>
</el-col>
<el-col :span="24">
<CardTitle class="mb-10px" title="审批信息" />
</el-col>
<!-- TODO 芋艿：需要后面在 review 下，目前看不到信息 -->
<el-col :span="12">
<el-button
class="m-20px"
link
type="primary"
@click="BPMLModelRef?.handleBpmnDetail('contract-approve')"
>
查看工作流
</el-button>
</el-col>
</el-row>
</el-form>
<template #footer>
@ -162,7 +153,6 @@
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
<BPMLModel ref="BPMLModelRef" />
</template>
<script lang="ts" setup>
import * as CustomerApi from '@/api/crm/customer'
@ -171,8 +161,7 @@ import * as UserApi from '@/api/system/user'
import * as ContactApi from '@/api/crm/contact'
import * as BusinessApi from '@/api/crm/business'
import ProductList from './components/ProductList.vue'
import BPMLModel from '@/views/crm/contract/components/BPMLModel.vue'
import { floatToFixed2 } from '@/utils'
import { fenToYuan } from '@/utils'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -190,9 +179,8 @@ const formRules = reactive({
no: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const BPMLModelRef = ref<InstanceType<typeof BPMLModel>>() // TODO @puhui999：这个变量不太对；另外，可以不做 bpm model 窗口，而是可以点击跳转到工作流详情里；
// 监听合同产品变化，计算合同产品总价
/** 监听合同产品变化，计算合同产品总价 */
watch(
() => formData.value.productItems,
(val) => {
@ -227,7 +215,6 @@ const open = async (type: string, id?: number) => {
}
await getAllApi()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */

31
src/views/crm/contract/components/BPMLModel.vue
View File

@ -1,31 +0,0 @@
<template>
<!-- 弹窗：流程模型图的预览 -->
<Dialog v-model="bpmnDetailVisible" :append-to-body="true" title="流程图" width="800">
<MyProcessViewer
key="designer"
v-model="bpmnXML"
:prefix="bpmnControlForm.prefix"
:value="bpmnXML as any"
v-bind="bpmnControlForm"
/>
</Dialog>
</template>
<script lang="ts" setup>
import * as ModelApi from '@/api/bpm/model'
import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
defineOptions({ name: 'BPMLModel' })
/** 流程图的详情按钮操作 */
const bpmnDetailVisible = ref(false)
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
const handleBpmnDetail = async (key: string) => {
const data = await ModelApi.getModelByKey(key)
bpmnXML.value = data.bpmnXml || ''
bpmnDetailVisible.value = true
}
defineExpose({ handleBpmnDetail })
</script>

55
src/views/crm/contract/components/ProductList.vue
View File

@ -4,37 +4,56 @@
<el-button plain type="primary" @click="openForm">添加产品</el-button>
</el-row>
<el-table :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="产品名称" prop="name" width="160" />
<el-table-column align="center" label="产品类型" prop="categoryName" width="160" />
<el-table-column align="center" label="产品名称" prop="name" width="120" />
<el-table-column
:formatter="fenToYuanFormat"
align="center"
label="价格"
prop="price"
width="100"
/>
<el-table-column align="center" label="产品类型" prop="categoryName" width="100" />
<el-table-column align="center" label="产品单位" prop="unit">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
</template>
</el-table-column>
<el-table-column align="center" label="产品编码" prop="no" />
<el-table-column align="center" fixed="right" label="数量" prop="count" width="100">
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
<el-input-number
v-model="row.count"
controls-position="right"
:min="0"
:precision="0"
class="!w-100%"
/>
</template>
</el-table-column>
<el-table-column
:formatter="fenToYuanFormat"
align="center"
label="价格（元）"
prop="price"
width="100"
/>
<el-table-column align="center" label="数量" prop="count" width="200">
fixed="right"
label="折扣(%)"
prop="discountPercent"
width="120"
>
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
<el-input-number v-model="row.count" class="!w-100%" />
<el-input-number
v-model="row.discountPercent"
controls-position="right"
:min="0"
:max="100"
:precision="0"
class="!w-100%"
/>
</template>
</el-table-column>
<el-table-column align="center" label="折扣(%)" prop="discountPercent" width="200">
<el-table-column align="center" fixed="right" label="合计" prop="totalPrice" width="100">
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
<el-input-number v-model="row.discountPercent" class="!w-100%" />
{{ fenToYuan(getTotalPrice(row)) }}
</template>
</el-table-column>
<el-table-column align="center" label="合计" prop="totalPrice" width="100">
<template #default="{ row }: { row: ProductApi.ProductExpandVO }">
{{ getTotalPrice(row) }}
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="130">
<el-table-column align="center" fixed="right" label="操作" width="60">
<template #default="scope">
<el-button link type="danger" @click="handleDelete(scope.row.id)"> 移除</el-button>
</template>
@ -66,7 +85,7 @@ import * as ProductApi from '@/api/crm/product'
import { DICT_TYPE } from '@/utils/dict'
import { fenToYuanFormat } from '@/utils/formatter'
import { TableSelectForm } from '@/components/Table/index'
import { floatToFixed2, yuanToFen } from '@/utils'
import { fenToYuan, floatToFixed2, yuanToFen } from '@/utils'
defineOptions({ name: 'ProductList' })
const props = withDefaults(defineProps<{ modelValue: ProductApi.ProductExpandVO[] }>(), {

13
src/views/crm/contract/detail/index.vue
View File

@ -10,15 +10,16 @@
</ContractDetailsHeader>
<el-col>
<el-tabs>
<el-tab-pane label="详细资料">
<!-- TODO @puhui999：跟进记录 -->
<el-tab-pane label="基本信息">
<ContractDetailsInfo :contract="contract" />
</el-tab-pane>
<!-- TODO @puhui999：products 更合适哈 -->
<el-tab-pane label="产品">
<ContractProductList v-model="contract.productItems" />
</el-tab-pane>
<el-tab-pane label="操作日志">
<OperateLogV2 :log-list="logList" />
</el-tab-pane>
<!-- TODO @puhui999：回款信息 -->
<!-- TODO @puhui999：这里是不是不用 isPool 哈 -->
<el-tab-pane label="团队成员">
<PermissionList
ref="permissionListRef"
@ -28,8 +29,12 @@
@quit-team="close"
/>
</el-tab-pane>
<el-tab-pane label="操作日志">
<OperateLogV2 :log-list="logList" />
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 表单弹窗：添加/修改 -->
<ContractForm ref="formRef" @success="getContractData" />
<CrmTransferForm ref="transferFormRef" @success="close" />

9
src/views/crm/contract/index.vue
View File

@ -54,7 +54,6 @@
</ContentWrap>
<!-- 列表 -->
<!-- TODO 芋艿：各种字段要调整 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" fixed="left" label="合同编号" prop="no" width="130" />
@ -145,12 +144,12 @@
>
编辑
</el-button>
<!-- TODO @puhui999：可以加下判断，什么情况下，可以审批； -->
<!-- TODO @puhui999：可以加下判断，什么情况下，可以审批；然后加个【查看审批】按钮 -->
<el-button
v-hasPermi="['crm:contract:update']"
link
type="primary"
@click="handleApprove(scope.row)"
@click="handleSubmit(scope.row)"
>
提交审核
</el-button>
@ -274,9 +273,9 @@ const handleExport = async () => {
}
/** 提交审核 **/
const handleApprove = async (row: ContractApi.ContractVO) => {
const handleSubmit = async (row: ContractApi.ContractVO) => {
await message.confirm(`您确定提交【${row.name}】审核吗？`)
await ContractApi.handleApprove(row.id)
await ContractApi.submitContract(row.id)
message.success('提交审核成功！')
await getList()
}

2
src/views/crm/contract/oa/ContractDetail/index.vue
View File

@ -1,4 +1,4 @@
<!-- TODO @puhui999：这个好像和 detail 重复了？？？ -->
<!-- TODO @puhui999：这个好像和 detail 重复了？？？能不能复用 detail 哈？ -->
<template>
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="110px">
<el-row>