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

cac39ae1 · YunaiV · 6d0231d4 · cac39ae1 · cac39ae1 · cac39ae1
Commit cac39ae1 authored Feb 04, 2024 by YunaiV
8 changed files
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -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 })
 }

--- a/src/api/crm/contract/index.ts
+++ b/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}` })
 }
 // 合同转移

--- a/src/views/crm/contract/ContractForm.vue
+++ b/src/views/crm/contract/ContractForm.vue
 <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,36 +8,21 @@
      label-width="110px"
    >
      <el-row :gutter="20">
-        <el-col :span="24" class="mb-10px">
-          <CardTitle title="基本信息" />
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="合同名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入合同名称" />
-          </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="name">
-            <el-select v-model="formData.customerId">
+            <el-input v-model="formData.name" placeholder="请输入合同名称" />
-              <el-option
-                v-for="item in customerList"
-                :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="contactId">
+          <el-form-item label="客户名称" prop="customerId">
-            <el-select v-model="formData.contactId" :disabled="!formData.customerId">
+            <el-select v-model="formData.customerId">
              <el-option
-                v-for="item in getContactOptions"
+                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id!"
@@ -46,30 +31,6 @@
          </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">
              <el-option
@@ -82,11 +43,6 @@
          </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
              v-model="formData.orderDate"
@@ -97,6 +53,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
              v-model="formData.startTime"
@@ -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 方法，用于打开弹窗
 /** 提交表单 */

--- a/src/views/crm/contract/components/BPMLModel.vue
+++ b/src/views/crm/contract/components/BPMLModel.vue
-<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>
--- a/src/views/crm/contract/components/ProductList.vue
+++ b/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 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
      :formatter="fenToYuanFormat"
      align="center"
-      label="价格（元）"
+      label="价格"
      prop="price"
      width="100"
    />
-    <el-table-column align="center" label="数量" prop="count" width="200">
+    <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" class="!w-100%" />
+        <el-input-number
+          v-model="row.count"
+          controls-position="right"
+          :min="0"
+          :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="discountPercent"
+      width="120"
+    >
      <template #default="{ row }: { row: ProductApi.ProductExpandVO }">
-        <el-input-number v-model="row.discountPercent" 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="totalPrice" width="100">
+    <el-table-column align="center" fixed="right" label="合计" prop="totalPrice" width="100">
      <template #default="{ row }: { row: ProductApi.ProductExpandVO }">
-        {{ getTotalPrice(row) }}
+        {{ fenToYuan(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[] }>(), {

--- a/src/views/crm/contract/detail/index.vue
+++ b/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" />

--- a/src/views/crm/contract/index.vue
+++ b/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()
 }

--- a/src/views/crm/contract/oa/ContractDetail/index.vue
+++ b/src/views/crm/contract/oa/ContractDetail/index.vue
-<!-- TODO @puhui999：这个好像和 detail 重复了？？？ -->
+<!-- TODO @puhui999：这个好像和 detail 重复了？？？能不能复用 detail 哈？ -->
 <template>
  <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="110px">
    <el-row>