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

(cherry picked from commit cac39ae126)

src/api/bpm/model/index.ts

@@ -33,10 +33,6 @@ export const getModelApi = 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 updateModelApi = async (data: ModelVO) => {
   return await request.put({ url: '/bpm/model/update', data: data })
 }

src/api/crm/contract/index.ts

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

src/views/crm/contract/ContractForm.vue

@@ -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">
+        <el-col :span="12">
-          <CardTitle title="基本信息" />
+          <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-form-item label="客户名称" prop="customerId">
-            <el-input v-model="formData.no" placeholder="请输入合同编号" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <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 { fenToYuan } from '@/utils'
-import { floatToFixed2 } 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 方法，用于打开弹窗
 
 /** 提交表单 */

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

@@ -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>

src/views/crm/contract/components/ProductList.vue

@@ -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="name" width="120" />
-    <el-table-column align="center" label="产品类型" prop="categoryName" width="160" />
+    <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="价格（元）"
+      fixed="right"
-      prop="price"
+      label="折扣(%)"
-      width="100"
+      prop="discountPercent"
-    />
+      width="120"
-    <el-table-column align="center" label="数量" prop="count" width="200">
+    >
       <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">
+    <el-table-column align="center" fixed="right" label="操作" width="60">
-      <template #default="{ row }: { row: ProductApi.ProductExpandVO }">
-        {{ getTotalPrice(row) }}
-      </template>
-    </el-table-column>
-    <el-table-column align="center" fixed="right" label="操作" width="130">
       <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[] }>(), {

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

@@ -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="操作日志">
+      <!-- TODO @puhui999：回款信息 -->
-        <OperateLogV2 :log-list="logList" />
+      <!-- TODO @puhui999：这里是不是不用 isPool 哈 -->
-      </el-tab-pane>
       <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" />

src/views/crm/contract/index.vue

@@ -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()
 }

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

@@ -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>