✨ CRM：完善合同的列表实现

Author: YunaiV

src/api/crm/contract/index.ts

@@ -1,35 +1,48 @@
 import request from '@/config/axios'
-import { ProductExpandVO } from '@/api/crm/product'
 import { TransferReqVO } from '@/api/crm/customer'
 
 export interface ContractVO {
   id: number
   name: string
+  no: string
   customerId: number
+  customerName?: string
   businessId: number
   businessName: string
+  contactLastTime: Date
+  ownerUserId: number
+  ownerUserName?: string
+  ownerUserDeptName?: string
   processInstanceId: number
+  auditStatus: number
   orderDate: Date
-  ownerUserId: number
-  no: string
   startTime: Date
   endTime: Date
-  price: number
+  totalProductPrice: number
   discountPercent: number
-  productPrice: number
-  contactId: number
+  totalPrice: number
+  signContactId: number
+  signContactName?: string
   signUserId: number
   signUserName: string
-  contactLastTime: Date
-  auditStatus: number
   remark: string
-  productItems: ProductExpandVO[]
+  createTime?: Date
+  creator: string
   creatorName: string
   updateTime?: Date
-  createTime?: Date
-  customerName: string
-  contactName: string
-  ownerUserName: string
+  products?: [
+    {
+      id: number
+      productId: number
+      productName: string
+      productNo: string
+      productUnit: number
+      productPrice: number
+      contractPrice: number
+      count: number
+      totalPrice: number
+    }
+  ]
 }
 
 // 查询 CRM 合同列表

src/api/crm/product/index.ts

@@ -12,6 +12,7 @@ export interface ProductVO {
   ownerUserId: number
 }
 
+// TODO 芋艿：待删除
 export interface ProductExpandVO extends ProductVO {
   count: number
   discountPercent: number

src/views/crm/contact/index.vue

@@ -230,7 +230,6 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -245,6 +244,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const activeName = ref('1') // 列表 tab
+const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
 
 /** 查询列表 */
 const getList = async () => {

src/views/crm/contract/index.vue

@@ -25,6 +25,24 @@
           placeholder="请输入合同名称"
           @keyup.enter="handleQuery"
         />
+        <el-form-item label="客户" prop="customerId">
+          <el-select
+            v-model="queryParams.customerId"
+            class="!w-240px"
+            clearable
+            lable-key="name"
+            placeholder="请选择客户"
+            value-key="id"
+            @keyup.enter="handleQuery"
+          >
+            <el-option
+              v-for="item in customerList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id!"
+            />
+          </el-select>
+        </el-form-item>
       </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
@@ -55,9 +73,20 @@
 
   <!-- 列表 -->
   <ContentWrap>
+    <el-tabs v-model="activeName" @tab-click="handleTabClick">
+      <el-tab-pane label="我负责的" name="1" />
+      <el-tab-pane label="我参与的" name="2" />
+      <el-tab-pane label="下属负责的" name="3" />
+    </el-tabs>
     <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" />
-      <el-table-column align="center" label="合同名称" prop="name" width="130" />
+      <el-table-column align="center" fixed="left" label="合同名称" prop="name" width="160">
+        <template #default="scope">
+          <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </el-link>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="客户名称" prop="customerName" width="120">
         <template #default="scope">
           <el-link
@@ -69,22 +98,31 @@
           </el-link>
         </template>
       </el-table-column>
-      <!-- TODO @puhui999：做了商机详情后，可以把这个超链接加上 -->
-      <el-table-column align="center" label="商机名称" prop="businessName" width="130" />
+      <el-table-column align="center" label="商机名称" prop="businessName" width="130">
+        <template #default="scope">
+          <el-link
+            :underline="false"
+            type="primary"
+            @click="openBusinessDetail(scope.row.businessId)"
+          >
+            {{ scope.row.businessName }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="合同金额（元）"
+        prop="totalPrice"
+        width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
       <el-table-column
         align="center"
         label="下单时间"
         prop="orderDate"
         width="120"
         :formatter="dateFormatter2"
       />
-      <el-table-column
-        align="center"
-        label="合同金额"
-        prop="price"
-        width="130"
-        :formatter="fenToYuanFormat"
-      />
       <el-table-column
         align="center"
         label="合同开始时间"
@@ -104,17 +142,24 @@
           <el-link
             :underline="false"
             type="primary"
-            @click="openContactDetail(scope.row.contactId)"
+            @click="openContactDetail(scope.row.signContactId)"
           >
-            {{ scope.row.contactName }}
+            {{ scope.row.signContactName }}
           </el-link>
         </template>
       </el-table-column>
       <el-table-column align="center" label="公司签约人" prop="signUserName" width="130" />
-      <el-table-column align="center" label="备注" prop="remark" width="130" />
+      <el-table-column align="center" label="备注" prop="remark" width="200" />
       <!-- TODO @puhui999：后续可加 【已收款金额】、【未收款金额】 -->
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="最后跟进时间"
+        prop="contactLastTime"
+        width="180px"
+      />
       <el-table-column align="center" label="负责人" prop="ownerUserName" width="120" />
-      <el-table-column align="center" label="创建人" prop="creatorName" width="120" />
+      <el-table-column align="center" label="所属部门" prop="ownerUserDeptName" width="100px" />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -129,6 +174,7 @@
         prop="createTime"
         width="180px"
       />
+      <el-table-column align="center" label="创建人" prop="creatorName" width="120" />
       <el-table-column align="center" fixed="right" label="合同状态" prop="auditStatus" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
@@ -191,6 +237,8 @@ import * as ContractApi from '@/api/crm/contract'
 import ContractForm from './ContractForm.vue'
 import { fenToYuanFormat } from '@/utils/formatter'
 import { DICT_TYPE } from '@/utils/dict'
+import { erpPriceTableColumnFormatter } from '@/utils'
+import * as CustomerApi from '@/api/crm/customer'
 
 defineOptions({ name: 'CrmContract' })
 
@@ -203,16 +251,16 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
+  sceneType: '1', // 默认和 activeName 相等
   name: null,
   customerId: null,
-  businessId: null,
   orderDate: [],
-  no: null,
-  discountPercent: null,
-  productPrice: null
+  no: null
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const activeName = ref('1') // 列表 tab
+const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -296,8 +344,14 @@ const openContactDetail = (id: number) => {
   push({ name: 'CrmContactDetail', params: { id } })
 }
 
+/** 打开商机详情 */
+const openBusinessDetail = (id: number) => {
+  push({ name: 'CrmBusinessDetail', params: { id } })
+}
+
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
+  customerList.value = await CustomerApi.getCustomerSimpleList()
 })
 </script>