crm: 增加基于客户查询商机分页

src/api/crm/business/index.ts

@@ -21,32 +21,37 @@ export interface BusinessVO {
   followUpStatus: number
 }
 
-// 查询商机列表
+// 查询 CRM 商机列表
 export const getBusinessPage = async (params) => {
   return await request.get({ url: `/crm/business/page`, params })
 }
 
-// 查询商机详情
+// 查询 CRM 商机列表，基于指定客户
+export const getBusinessPageByCustomer = async (params) => {
+  return await request.get({ url: `/crm/business/page-by-customer`, params })
+}
+
+// 查询 CRM 商机详情
 export const getBusiness = async (id: number) => {
   return await request.get({ url: `/crm/business/get?id=` + id })
 }
 
-// 新增商机
+// 新增 CRM 商机
 export const createBusiness = async (data: BusinessVO) => {
   return await request.post({ url: `/crm/business/create`, data })
 }
 
-// 修改商机
+// 修改 CRM 商机
 export const updateBusiness = async (data: BusinessVO) => {
   return await request.put({ url: `/crm/business/update`, data })
 }
 
-// 删除商机
+// 删除 CRM 商机
 export const deleteBusiness = async (id: number) => {
   return await request.delete({ url: `/crm/business/delete?id=` + id })
 }
 
-// 导出商机 Excel
+// 导出 CRM 商机 Excel
 export const exportBusiness = async (params) => {
   return await request.download({ url: `/crm/business/export-excel`, params })
 }

src/views/crm/business/components/BusinessList.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 操作栏 -->
+  <el-row justify="end">
+    <el-button @click="openForm">
+      <Icon class="mr-5px" icon="ep:opportunity" />
+      创建商机
+    </el-button>
+  </el-row>
+
+  <!-- 列表 -->
+  <ContentWrap class="mt-10px">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="商机名称" fixed="left" align="center" prop="name">
+        <template #default="scope">
+          <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="商机金额" align="center" prop="price" :formatter="fenToYuanFormat" />
+      <el-table-column label="客户名称" align="center" prop="customerName" />
+      <el-table-column label="商机组" align="center" prop="statusTypeName" />
+      <el-table-column label="商机阶段" align="center" prop="statusName" />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加 -->
+  <BusinessForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import BusinessForm from './../BusinessForm.vue'
+import { BizTypeEnum } from '@/api/crm/permission'
+import { fenToYuanFormat } from '@/utils/formatter'
+
+defineOptions({ name: 'CrmBusinessList' })
+const props = defineProps<{
+  bizType: number // 业务类型
+  bizId: number // 业务编号
+}>()
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  customerId: undefined as unknown // 允许 undefined + number
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 置空参数
+    queryParams.customerId = undefined
+    // 执行查询
+    let data = { list: [], total: 0 }
+    switch (props.bizType) {
+      case BizTypeEnum.CRM_CUSTOMER:
+        queryParams.customerId = props.bizId
+        data = await BusinessApi.getBusinessPageByCustomer(queryParams)
+        break
+      default:
+        return
+    }
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加操作 */
+const formRef = ref()
+const openForm = () => {
+  formRef.value.open('create')
+}
+
+/** 打开联系人详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmBusinessDetail', params: { id } })
+}
+
+/** 监听打开的 bizId + bizType，从而加载最新的列表 */
+watch(
+  () => [props.bizId, props.bizType],
+  () => {
+    handleQuery()
+  },
+  { immediate: true, deep: true }
+)
+</script>

src/views/crm/customer/detail/CustomerDetailsHeader.vue

@@ -17,12 +17,6 @@
         <el-button>更改成交状态</el-button>
       </div>
     </div>
-    <!-- TODO 芋艿： -->
-    <el-row class="mt-10px">
-      <el-button> <Icon class="mr-5px" icon="ph:calendar-fill" /> 创建任务 </el-button>
-      <el-button> <Icon class="mr-5px" icon="ep:opportunity" /> 创建商机 </el-button>
-      <el-button> <Icon class="mr-5px" icon="icon-park:income-one" />创建回款 </el-button>
-    </el-row>
   </div>
   <ContentWrap class="mt-10px">
     <el-descriptions :column="5" direction="vertical">

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

@@ -12,13 +12,14 @@
       <el-tab-pane label="团队成员" lazy>
         <PermissionList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
-      <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
+      <el-tab-pane label="商机" lazy>
+        <BusinessList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
+      </el-tab-pane>
       <el-tab-pane label="合同" lazy>
         <ContractList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
-      <el-tab-pane label="回款" lazy>TODO 待开发</el-tab-pane>
+      <el-tab-pane label="回款" lazy>TODO待开发 </el-tab-pane>
       <el-tab-pane label="回访" lazy>TODO 待开发</el-tab-pane>
-      <el-tab-pane label="发票" lazy>TODO 待开发</el-tab-pane>
     </el-tabs>
   </el-col>
 </template>
@@ -28,8 +29,9 @@ import * as CustomerApi from '@/api/crm/customer'
 import CustomerDetailsInfo from './CustomerDetailsInfo.vue' // 客户明细 - 详细信息
 import CustomerDetailsHeader from './CustomerDetailsHeader.vue' // 客户明细 - 头部
 import ContactList from '@/views/crm/contact/components/ContactList.vue' // 联系人列表
-import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
 import ContractList from '@/views/crm/contract/components/ContractList.vue' // 合同列表
+import BusinessList from '@/views/crm/business/components/BusinessList.vue' // 商机列表
+import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
 import { BizTypeEnum } from '@/api/crm/permission'
 
 defineOptions({ name: 'CrmCustomerDetail' })