Merge remote-tracking branch 'origin/dev' into dev

package.json

@@ -101,6 +101,7 @@
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.1.0",
+    "prettier-eslint": "^16.3.0",
     "rimraf": "^5.0.5",
     "rollup": "^4.4.1",
     "sass": "^1.69.5",

src/api/crm/business/index.ts

@@ -1,5 +1,5 @@
 import request from '@/config/axios'
-import { TransferReqVO } from '@/api/crm/customer'
+import { TransferReqVO } from '@/api/crm/permission'
 
 export interface BusinessVO {
   id: number

src/api/crm/clue/index.ts

@@ -1,5 +1,5 @@
 import request from '@/config/axios'
-import { TransferReqVO } from '@/api/crm/customer'
+import { TransferReqVO } from '@/api/crm/permission'
 
 export interface ClueVO {
   id: number // 编号

src/api/crm/contact/index.ts

@@ -1,5 +1,5 @@
 import request from '@/config/axios'
-import { TransferReqVO } from '@/api/crm/customer'
+import { TransferReqVO } from '@/api/crm/permission'
 
 export interface ContactVO {
   id: number // 编号

src/api/crm/contract/index.ts

@@ -1,5 +1,5 @@
 import request from '@/config/axios'
-import { TransferReqVO } from '@/api/crm/customer'
+import { TransferReqVO } from '@/api/crm/permission'
 
 export interface ContractVO {
   id: number

src/api/crm/customer/index.ts

@@ -1,4 +1,5 @@
 import request from '@/config/axios'
+import { TransferReqVO } from '@/api/crm/permission'
 
 export interface CustomerVO {
   id: number // 编号
@@ -102,12 +103,6 @@ export const getCustomerSimpleList = async () => {
 
 // ======================= 业务操作 =======================
 
-export interface TransferReqVO {
-  id: number | undefined // 客户编号
-  newOwnerUserId: number | undefined // 新负责人的用户编号
-  oldOwnerPermissionLevel: number | undefined // 老负责人加入团队后的权限级别
-}
-
 // 客户转移
 export const transferCustomer = async (data: TransferReqVO) => {
   return await request.put({ url: '/crm/customer/transfer', data })

src/api/crm/permission/index.ts

@@ -6,6 +6,7 @@ export interface PermissionVO {
   bizType: number // Crm 类型
   bizId: number // Crm 类型数据编号
   level: number // 权限级别
+  toBizTypes?: number[] // 同时添加至
   deptName?: string // 部门名称
   nickname?: string // 用户昵称
   postNames?: string[] // 岗位名称数组
@@ -13,6 +14,13 @@ export interface PermissionVO {
   ids?: number[]
 }
 
+export interface TransferReqVO {
+  id: number // 模块编号
+  newOwnerUserId: number // 新负责人的用户编号
+  oldOwnerPermissionLevel?: number // 老负责人加入团队后的权限级别
+  toBizTypes?: number[] // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
+}
+
 /**
  * CRM 业务类型枚举
  *

src/api/crm/receivable/index.ts

@@ -3,18 +3,20 @@ import request from '@/config/axios'
 export interface ReceivableVO {
   id: number
   no: string
-  planId: number
-  customerId: number
+  planId?: number
+  customerId?: number
   customerName?: string
-  contractId: number
+  contractId?: number
   contract?: {
+    id?: number
+    name?: string
     no: string
     totalPrice: number
   }
   auditStatus: number
   processInstanceId: number
   returnTime: Date
-  returnType: string
+  returnType: number
   price: number
   ownerUserId: number
   ownerUserName?: string

src/api/crm/receivable/plan/index.ts

@@ -11,7 +11,7 @@ export interface ReceivablePlanVO {
   remindTime: Date
   customerId: number
   customerName?: string
-  contractId: number
+  contractId?: number
   contractNo?: string
   ownerUserId: number
   ownerUserName?: string

src/api/crm/statistics/customer.ts

@@ -0,0 +1,116 @@
+import request from '@/config/axios'
+
+export interface CrmStatisticsCustomerSummaryByDateRespVO {
+  time: string
+  customerCreateCount: number
+  customerDealCount: number
+}
+
+export interface CrmStatisticsCustomerSummaryByUserRespVO {
+  ownerUserName: string
+  customerCreateCount: number
+  customerDealCount: number
+  contractPrice: number
+  receivablePrice: number
+}
+
+export interface CrmStatisticsFollowupSummaryByDateRespVO {
+  time: string
+  followupRecordCount: number
+  followupCustomerCount: number
+}
+
+export interface CrmStatisticsFollowupSummaryByUserRespVO {
+  ownerUserName: string
+  followupRecordCount: number
+  followupCustomerCount: number
+}
+
+export interface CrmStatisticsFollowupSummaryByTypeRespVO {
+  followupType: string
+  followupRecordCount: number
+}
+
+export interface CrmStatisticsCustomerContractSummaryRespVO {
+  customerName: string
+  contractName: string
+  totalPrice: number
+  receivablePrice: number
+  customerType: string
+  customerSource: string
+  ownerUserName: string
+  creatorUserName: string
+  createTime: Date
+  orderDate: Date
+}
+
+export interface CrmStatisticsCustomerDealCycleByDateRespVO {
+  time: string
+  customerDealCycle: number
+}
+
+export interface CrmStatisticsCustomerDealCycleByUserRespVO {
+  ownerUserName: string
+  customerDealCycle: number
+  customerDealCount: number
+}
+
+// 客户分析 API
+export const StatisticsCustomerApi = {
+  // 1.1 客户总量分析(按日期)
+  getCustomerSummaryByDate: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-summary-by-date',
+      params
+    })
+  },
+  // 1.2 客户总量分析(按用户)
+  getCustomerSummaryByUser: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-summary-by-user',
+      params
+    })
+  },
+  // 2.1 客户跟进次数分析(按日期)
+  getFollowupSummaryByDate: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-followup-summary-by-date',
+      params
+    })
+  },
+  // 2.2 客户跟进次数分析(按用户)
+  getFollowupSummaryByUser: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-followup-summary-by-user',
+      params
+    })
+  },
+  // 3.1 获取客户跟进方式统计数
+  getFollowupSummaryByType: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-followup-summary-by-type',
+      params
+    })
+  },
+  // 4.1 合同摘要信息(客户转化率页面)
+  getContractSummary: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-contract-summary',
+      params
+    })
+  },
+  // 5.1 获取客户成交周期(按日期)
+  getCustomerDealCycleByDate: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-deal-cycle-by-date',
+      params
+    })
+  },
+  // 5.2 获取客户成交周期(按用户)
+  getCustomerDealCycleByUser: (params: any) => {
+    return request.get({
+      url: '/crm/statistics-customer/get-customer-deal-cycle-by-user',
+      params
+    })
+  }
+}

src/views/Login/components/LoginForm.vue

@@ -291,10 +291,16 @@ const doSocialLogin = async (type: number) => {
       await getTenantId()
       // 如果获取不到，则需要弹出提示，进行处理
       if (!authUtil.getTenantId()) {
-        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
-          const res = await LoginApi.getTenantIdByName(value)
+        try {
+          const data = await message.prompt('请输入租户名称', t('common.reminder'))
+          if (data?.action !== 'confirm') throw 'cancel'
+          const res = await LoginApi.getTenantIdByName(data.value)
           authUtil.setTenantId(res)
-        })
+        } catch (error) {
+          if (error === 'cancel') return
+        } finally {
+          loginLoading.value = false
+        }
       }
     }
     // 计算 redirectUri

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

@@ -4,8 +4,8 @@
       编辑
     </el-button>
     <el-button
-      :disabled="business.endStatus"
       v-if="permissionListRef?.validateWrite"
+      :disabled="business.endStatus"
       type="success"
       @click="openStatusForm()"
     >
@@ -53,13 +53,12 @@
   </el-col>
 
   <!-- 表单弹窗：添加/修改 -->
-  <BusinessForm ref="formRef" @success="getBusiness(business.id)" />
-  <BusinessUpdateStatusForm ref="statusFormRef" @success="getBusiness(business.id)" />
-  <CrmTransferForm ref="transferFormRef" @success="close" />
+  <BusinessForm ref="formRef" @success="getBusiness" />
+  <BusinessUpdateStatusForm ref="statusFormRef" @success="getBusiness" />
+  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_BUSINESS" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import * as ContactApi from '@/api/crm/contact'
 import * as BusinessApi from '@/api/crm/business'
 import BusinessDetailsHeader from './BusinessDetailsHeader.vue'
 import BusinessDetailsInfo from './BusinessDetailsInfo.vue'
@@ -73,6 +72,7 @@ import FollowUpList from '@/views/crm/followup/index.vue'
 import ContactList from '@/views/crm/contact/components/ContactList.vue'
 import BusinessUpdateStatusForm from '@/views/crm/business/BusinessUpdateStatusForm.vue'
 import ContractList from '@/views/crm/contract/components/ContractList.vue'
+import BusinessProductList from '@/views/crm/business/detail/BusinessProductList.vue'
 
 defineOptions({ name: 'CrmBusinessDetail' })
 
@@ -80,15 +80,15 @@ const message = useMessage()
 
 const businessId = ref(0) // 线索编号
 const loading = ref(true) // 加载中
-const business = ref<ContactApi.ContactVO>({} as ContactApi.ContactVO) // 联系人详情
+const business = ref<BusinessApi.BusinessVO>({} as BusinessApi.BusinessVO) // 商机详情
 const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
 
 /** 获取详情 */
-const getBusiness = async (id: number) => {
+const getBusiness = async () => {
   loading.value = true
   try {
-    business.value = await BusinessApi.getBusiness(id)
-    await getOperateLog(id)
+    business.value = await BusinessApi.getBusiness(businessId.value)
+    await getOperateLog(businessId.value)
   } finally {
     loading.value = false
   }
@@ -109,7 +109,7 @@ const openStatusForm = () => {
 /** 联系人转移 */
 const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 联系人转移表单 ref
 const transfer = () => {
-  transferFormRef.value?.open('商机转移', business.value.id, BusinessApi.transferBusiness)
+  transferFormRef.value?.open(business.value.id)
 }
 
 /** 获取操作日志 */
@@ -141,6 +141,6 @@ onMounted(async () => {
     return
   }
   businessId.value = params.id as unknown as number
-  await getBusiness(businessId.value)
+  await getBusiness()
 })
 </script>

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

@@ -18,7 +18,7 @@
     >
       转化为客户
     </el-button>
-    <el-button v-else type="success" disabled>已转化客户</el-button>
+    <el-button v-else disabled type="success">已转化客户</el-button>
   </ClueDetailsHeader>
   <el-col>
     <el-tabs>
@@ -45,7 +45,7 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <ClueForm ref="formRef" @success="getClue" />
-  <CrmTransferForm ref="transferFormRef" @success="close" />
+  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CLUE" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -91,7 +91,7 @@ const openForm = () => {
 /** 线索转移 */
 const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 线索转移表单 ref
 const transfer = () => {
-  transferFormRef.value?.open('线索转移', clueId.value, ClueApi.transferClue)
+  transferFormRef.value?.open(clueId.value)
 }
 
 /** 转化为客户 */

src/views/crm/contact/components/ContactList.vue

@@ -6,18 +6,20 @@
       创建联系人
     </el-button>
     <el-button
-      @click="openBusinessModal"
-      v-hasPermi="['crm:contact:create-business']"
       v-if="queryParams.businessId"
+      v-hasPermi="['crm:contact:create-business']"
+      @click="openBusinessModal"
     >
-      <Icon class="mr-5px" icon="ep:circle-plus" />关联
+      <Icon class="mr-5px" icon="ep:circle-plus" />
+      关联
     </el-button>
     <el-button
-      @click="deleteContactBusinessList"
-      v-hasPermi="['crm:contact:delete-business']"
       v-if="queryParams.businessId"
+      v-hasPermi="['crm:contact:delete-business']"
+      @click="deleteContactBusinessList"
     >
-      <Icon class="mr-5px" icon="ep:remove" />解除关联
+      <Icon class="mr-5px" icon="ep:remove" />
+      解除关联
     </el-button>
   </el-row>
 
@@ -27,21 +29,21 @@
       ref="contactRef"
       v-loading="loading"
       :data="list"
-      :stripe="true"
       :show-overflow-tooltip="true"
+      :stripe="true"
     >
-      <el-table-column type="selection" width="55" v-if="queryParams.businessId" />
-      <el-table-column label="姓名" fixed="left" align="center" prop="name">
+      <el-table-column v-if="queryParams.businessId" type="selection" width="55" />
+      <el-table-column align="center" fixed="left" label="姓名" prop="name">
         <template #default="scope">
-          <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
+          <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
             {{ scope.row.name }}
           </el-link>
         </template>
       </el-table-column>
-      <el-table-column label="手机号" align="center" prop="mobile" />
-      <el-table-column label="职位" align="center" prop="post" />
-      <el-table-column label="直属上级" align="center" prop="parentName" />
-      <el-table-column label="是否关键决策人" align="center" prop="master" min-width="100">
+      <el-table-column align="center" label="手机号" prop="mobile" />
+      <el-table-column align="center" label="职位" prop="post" />
+      <el-table-column align="center" label="直属上级" prop="parentName" />
+      <el-table-column align="center" label="是否关键决策人" min-width="100" prop="master">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
         </template>
@@ -49,9 +51,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -60,12 +62,13 @@
   <ContactForm ref="formRef" @success="getList" />
   <!-- 关联商机选择弹框 -->
   <ContactListModal
+    v-if="customerId"
     ref="contactModalRef"
-    :customer-id="props.customerId"
+    :customer-id="customerId"
     @success="createContactBusinessList"
   />
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import * as ContactApi from '@/api/crm/contact'
 import ContactForm from './../ContactForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
@@ -76,8 +79,8 @@ defineOptions({ name: 'CrmContactList' })
 const props = defineProps<{
   bizType: number // 业务类型
   bizId: number // 业务编号
-  customerId: number // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
-  businessId: number // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
+  customerId?: number // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
+  businessId?: number // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
 }>()
 
 const loading = ref(true) // 列表的加载中
@@ -147,7 +150,7 @@ const createContactBusinessList = async (contactIds: number[]) => {
     contactIds: contactIds
   } as ContactApi.ContactBusiness2ReqVO
   contactRef.value.getSelectionRows().forEach((row: ContactApi.ContactVO) => {
-    data.businessIds.push(row.id)
+    data.contactIds.push(row.id)
   })
   await ContactApi.createContactBusinessList2(data)
   // 刷新列表

src/views/crm/contact/components/ContactListModal.vue

@@ -1,28 +1,35 @@
 <template>
-  <Dialog title="关联联系人" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" title="关联联系人">
     <!-- 搜索工作栏 -->
     <ContentWrap>
       <el-form
-        class="-mb-15px"
-        :model="queryParams"
         ref="queryFormRef"
         :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
         label-width="90px"
       >
         <el-form-item label="联系人名称" prop="name">
           <el-input
             v-model="queryParams.name"
-            placeholder="请输入联系人名称"
+            class="!w-240px"
             clearable
+            placeholder="请输入联系人名称"
             @keyup.enter="handleQuery"
-            class="!w-240px"
           />
         </el-form-item>
         <el-form-item>
-          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-          <el-button type="primary" @click="openForm()" v-hasPermi="['crm:business:create']">
-            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+          <el-button v-hasPermi="['crm:business:create']" type="primary" @click="openForm()">
+            <Icon class="mr-5px" icon="ep:plus" />
+            新增
           </el-button>
         </el-form-item>
       </el-form>
@@ -31,24 +38,24 @@
     <!-- 列表 -->
     <ContentWrap class="mt-10px">
       <el-table
-        v-loading="loading"
         ref="contactRef"
+        v-loading="loading"
         :data="list"
-        :stripe="true"
         :show-overflow-tooltip="true"
+        :stripe="true"
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column label="姓名" fixed="left" align="center" prop="name">
+        <el-table-column align="center" fixed="left" label="姓名" prop="name">
           <template #default="scope">
-            <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
+            <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
               {{ scope.row.name }}
             </el-link>
           </template>
         </el-table-column>
-        <el-table-column label="手机号" align="center" prop="mobile" />
-        <el-table-column label="职位" align="center" prop="post" />
-        <el-table-column label="直属上级" align="center" prop="parentName" />
-        <el-table-column label="是否关键决策人" align="center" prop="master" min-width="100">
+        <el-table-column align="center" label="手机号" prop="mobile" />
+        <el-table-column align="center" label="职位" prop="post" />
+        <el-table-column align="center" label="直属上级" prop="parentName" />
+        <el-table-column align="center" label="是否关键决策人" min-width="100" prop="master">
           <template #default="scope">
             <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
           </template>
@@ -56,14 +63,14 @@
       </el-table>
       <!-- 分页 -->
       <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
         @pagination="getList"
       />
     </ContentWrap>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
 
@@ -71,10 +78,9 @@
     <ContactForm ref="formRef" @success="getList" />
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import * as ContactApi from '@/api/crm/contact'
 import ContactForm from '../ContactForm.vue'
-import { erpPriceTableColumnFormatter } from '@/utils'
 import { DICT_TYPE } from '@/utils/dict'
 
 const message = useMessage() // 消息弹窗

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

@@ -31,15 +31,15 @@
         <BusinessList
           :biz-id="contact.id!"
           :biz-type="BizTypeEnum.CRM_CONTACT"
-          :customer-id="contact.customerId"
           :contact-id="contact.id"
+          :customer-id="contact.customerId"
         />
       </el-tab-pane>
     </el-tabs>
   </el-col>
   <!-- 表单弹窗：添加/修改 -->
-  <ContactForm ref="formRef" @success="getContact(contact.id)" />
-  <CrmTransferForm ref="transferFormRef" @success="close" />
+  <ContactForm ref="formRef" @success="getContact" />
+  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CONTACT" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -65,11 +65,11 @@ const contact = ref<ContactApi.ContactVO>({} as ContactApi.ContactVO) // 联系
 const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
 
 /** 获取详情 */
-const getContact = async (id: number) => {
+const getContact = async () => {
   loading.value = true
   try {
-    contact.value = await ContactApi.getContact(id)
-    await getOperateLog(id)
+    contact.value = await ContactApi.getContact(contactId.value)
+    await getOperateLog(contactId.value)
   } finally {
     loading.value = false
   }
@@ -84,7 +84,7 @@ const openForm = (type: string, id?: number) => {
 /** 联系人转移 */
 const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 联系人转移表单 ref
 const transfer = () => {
-  transferFormRef.value?.open('联系人转移', contact.value.id, ContactApi.transferContact)
+  transferFormRef.value?.open(contact.value.id)
 }
 
 /** 获取操作日志 */
@@ -116,6 +116,6 @@ onMounted(async () => {
     return
   }
   contactId.value = params.id as unknown as number
-  await getContact(contactId.value)
+  await getContact()
 })
 </script>

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

@@ -48,7 +48,7 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <ContractForm ref="formRef" @success="getContractData" />
-  <CrmTransferForm ref="transferFormRef" @success="close" />
+  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CONTRACT" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -113,10 +113,9 @@ const createReceivable = (planData: any) => {
 }
 
 /** 转移 */
-// TODO @puhui999：这个组件，要不传递业务类型，然后组件里判断 title 和 api 能调用哪个；整体治理掉；好呢
 const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 合同转移表单 ref
 const transferContract = () => {
-  transferFormRef.value?.open('合同转移', contract.value.id, ContractApi.transferContract)
+  transferFormRef.value?.open(contract.value.id)
 }
 
 /** 关闭 */

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

@@ -76,7 +76,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getCustomer" />
   <CustomerDistributeForm ref="distributeForm" @success="getCustomer" />
-  <CrmTransferForm ref="transferFormRef" @success="getCustomer" />
+  <CrmTransferForm ref="transferFormRef" :biz-type="BizTypeEnum.CRM_CUSTOMER" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -142,7 +142,7 @@ const handleUpdateDealStatus = async () => {
 /** 客户转移 */
 const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 客户转移表单 ref
 const transfer = () => {
-  transferFormRef.value?.open('客户转移', customerId.value, CustomerApi.transferCustomer)
+  transferFormRef.value?.open(customerId.value)
 }
 
 /** 锁定客户 */

src/views/crm/permission/components/PermissionForm.vue

@@ -29,12 +29,15 @@
           </template>
         </el-radio-group>
       </el-form-item>
-      <!-- TODO @puhui999：同时添加至,还没想好下次搞 -->
-      <el-form-item v-if="false && formType === 'create'" label="同时添加至" prop="toBizType">
-        <el-select v-model="formData.userId">
-          <el-option :value="1" label="联系人" />
-          <el-option :value="1" label="商机" />
-        </el-select>
+      <el-form-item
+        v-if="formType === 'create' && formData.bizType === BizTypeEnum.CRM_CUSTOMER"
+        label="同时添加至"
+      >
+        <el-checkbox-group v-model="formData.toBizTypes">
+          <el-checkbox :label="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
+          <el-checkbox :label="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
+          <el-checkbox :label="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
+        </el-checkbox-group>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -46,7 +49,7 @@
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
 import * as PermissionApi from '@/api/crm/permission'
-import { PermissionLevelEnum } from '@/api/crm/permission'
+import { BizTypeEnum, PermissionLevelEnum } from '@/api/crm/permission'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 defineOptions({ name: 'CrmPermissionForm' })

src/views/crm/permission/components/TransferForm.vue

@@ -19,10 +19,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="老负责人">
-        <el-radio-group
-          v-model="oldOwnerHandler"
-          @change="formData.oldOwnerPermissionLevel = undefined"
-        >
+        <el-radio-group v-model="oldOwnerHandler" @change="handleOwnerChange">
           <el-radio :label="false" size="large">移除</el-radio>
           <el-radio :label="true" size="large">加入团队</el-radio>
         </el-radio-group>
@@ -39,8 +36,14 @@
           </template>
         </el-radio-group>
       </el-form-item>
+      <el-form-item v-if="bizType === BizTypeEnum.CRM_CUSTOMER" label="同时转移">
+        <el-checkbox-group v-model="formData.toBizTypes">
+          <el-checkbox :label="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
+          <el-checkbox :label="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
+          <el-checkbox :label="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
     </el-form>
-    <!-- TODO @puhui999 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择 -->
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -49,23 +52,27 @@
 </template>
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
-import type { TransferReqVO } from '@/api/crm/customer'
+import * as BusinessApi from '@/api/crm/business'
+import * as ClueApi from '@/api/crm/clue'
+import * as ContactApi from '@/api/crm/contact'
+import * as CustomerApi from '@/api/crm/customer'
+import * as ContractApi from '@/api/crm/contract'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { PermissionLevelEnum } from '@/api/crm/permission'
+import { BizTypeEnum, PermissionLevelEnum, TransferReqVO } from '@/api/crm/permission'
 
 defineOptions({ name: 'CrmTransferForm' })
 
+const props = defineProps<{
+  bizType: number
+}>()
+
 const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const oldOwnerHandler = ref(false) // 老负责人的处理方式
-const formData = ref<TransferReqVO>({
-  id: undefined, // 客户编号
-  newOwnerUserId: undefined, // 新负责人的用户编号
-  oldOwnerPermissionLevel: undefined // 老负责人加入团队后的权限级别
-})
+const formData = ref<TransferReqVO>({} as TransferReqVO)
 const formRules = reactive({
   newOwnerUserId: [{ required: true, message: '新负责人不能为空', trigger: 'blur' }],
   oldOwnerPermissionLevel: [
@@ -73,18 +80,22 @@ const formRules = reactive({
   ]
 })
 const formRef = ref() // 表单 Ref
-const transferFuncRef = ref<Function>(() => {}) // 转移所需回调
 
 /** 打开弹窗 */
-const open = async (title: string, bizId: number, transferFunc: Function) => {
+const open = async (bizId: number) => {
   dialogVisible.value = true
-  dialogTitle.value = title
-  transferFuncRef.value = transferFunc
+  dialogTitle.value = getDialogTitle()
   resetForm()
   formData.value.id = bizId
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
+// 老负责人负责方式
+const handleOwnerChange = (val: boolean) => {
+  if (!val) {
+    // 移除的话提交不带 oldOwnerPermissionLevel 参数
+    formData.value.oldOwnerPermissionLevel = undefined
+  }
+}
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -96,7 +107,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value
-    await transferFuncRef.value(unref(data))
+    await transfer(unref(data))
     message.success(dialogTitle.value + '成功')
     dialogVisible.value = false
     // 发送操作成功的事件
@@ -105,15 +116,44 @@ const submitForm = async () => {
     formLoading.value = false
   }
 }
+const transfer = async (data: TransferReqVO) => {
+  switch (props.bizType) {
+    case BizTypeEnum.CRM_CLUE:
+      return await ClueApi.transferClue(data)
+    case BizTypeEnum.CRM_CUSTOMER:
+      return await CustomerApi.transferCustomer(data)
+    case BizTypeEnum.CRM_CONTACT:
+      return await ContactApi.transferContact(data)
+    case BizTypeEnum.CRM_BUSINESS:
+      return await BusinessApi.transferBusiness(data)
+    case BizTypeEnum.CRM_CONTRACT:
+      return await ContractApi.transferContract(data)
+    default:
+      message.error('【转移失败】没有转移接口')
+      throw new Error('【转移失败】没有转移接口')
+  }
+}
+const getDialogTitle = () => {
+  switch (props.bizType) {
+    case BizTypeEnum.CRM_CLUE:
+      return '线索转移'
+    case BizTypeEnum.CRM_CUSTOMER:
+      return '客户转移'
+    case BizTypeEnum.CRM_CONTACT:
+      return '联系人转移'
+    case BizTypeEnum.CRM_BUSINESS:
+      return '商机转移'
+    case BizTypeEnum.CRM_CONTRACT:
+      return '合同转移'
+    default:
+      return '转移'
+  }
+}
 
 /** 重置表单 */
 const resetForm = () => {
   formRef.value?.resetFields()
-  formData.value = {
-    id: undefined, // 客户编号
-    newOwnerUserId: undefined, // 新负责人的用户编号
-    oldOwnerPermissionLevel: undefined // 老负责人加入团队后的权限级别
-  }
+  formData.value = {} as TransferReqVO
 }
 onMounted(async () => {
   // 获得用户列表

src/views/crm/receivable/ReceivableForm.vue

@@ -10,7 +10,7 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="回款编号" prop="no">
-            <el-input disabled v-model="formData.no" placeholder="保存时自动生成" />
+            <el-input v-model="formData.no" disabled placeholder="保存时自动生成" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -38,8 +38,8 @@
               :disabled="formType !== 'create'"
               class="w-1/1"
               filterable
-              @change="handleCustomerChange"
               placeholder="请选择客户"
+              @change="handleCustomerChange"
             >
               <el-option
                 v-for="item in customerList"
@@ -57,15 +57,15 @@
               :disabled="formType !== 'create' || !formData.customerId"
               class="w-1/1"
               filterable
-              @change="handleContractChange"
               placeholder="请选择合同"
+              @change="handleContractChange"
             >
               <el-option
                 v-for="data in contractList"
                 :key="data.id"
+                :disabled="data.auditStatus !== 20"
                 :label="data.name"
                 :value="data.id!"
-                :disabled="data.auditStatus !== 20"
               />
             </el-select>
           </el-form-item>
@@ -78,15 +78,15 @@
               v-model="formData.planId"
               :disabled="formType !== 'create' || !formData.contractId"
               class="!w-1/1"
-              @change="handleReceivablePlanChange"
               placeholder="请选择回款期数"
+              @change="handleReceivablePlanChange"
             >
               <el-option
                 v-for="data in receivablePlanList"
                 :key="data.id"
+                :disabled="data.receivableId"
                 :label="'第 ' + data.period + ' 期'"
                 :value="data.id!"
-                :disabled="data.receivableId"
               />
             </el-select>
           </el-form-item>
@@ -109,11 +109,11 @@
           <el-form-item label="回款金额" prop="price">
             <el-input-number
               v-model="formData.price"
+              :min="0.01"
+              :precision="2"
               class="!w-100%"
               controls-position="right"
               placeholder="请输入回款金额"
-              :min="0.01"
-              :precision="2"
             />
           </el-form-item>
         </el-col>
@@ -145,12 +145,12 @@
 <script lang="ts" setup>
 import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
 import * as ReceivableApi from '@/api/crm/receivable'
+import { ReceivableVO } from '@/api/crm/receivable'
 import * as UserApi from '@/api/system/user'
 import * as CustomerApi from '@/api/crm/customer'
 import * as ContractApi from '@/api/crm/contract'
 import { useUserStore } from '@/store/modules/user'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import form from '@/components/Form/src/Form.vue'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -185,9 +185,10 @@ const open = async (
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ReceivableApi.getReceivable(id)
-      await handleCustomerChange(formData.value.customerId)
-      formData.value.contractId = formData.value.contract.id
+      const data = (await ReceivableApi.getReceivable(id)) as ReceivableVO
+      formData.value = data
+      await handleCustomerChange(data.customerId!)
+      formData.value.contractId = data?.contract?.id
     } finally {
       formLoading.value = false
     }
@@ -266,7 +267,7 @@ const handleContractChange = async (contractId: number) => {
     // 获得回款计划列表
     receivablePlanList.value = []
     receivablePlanList.value = await ReceivablePlanApi.getReceivablePlanSimpleList(
-      formData.value.customerId,
+      formData.value.customerId!,
       contractId
     )
     // 设置金额

src/views/crm/receivable/plan/ReceivablePlanForm.vue

@@ -10,7 +10,7 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="还款期数" prop="period">
-            <el-input disabled v-model="formData.period" placeholder="保存时自动生成" />
+            <el-input v-model="formData.period" disabled placeholder="保存时自动生成" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -38,8 +38,8 @@
               :disabled="formType !== 'create'"
               class="w-1/1"
               filterable
-              @change="handleCustomerChange"
               placeholder="请选择客户"
+              @change="handleCustomerChange"
             >
               <el-option
                 v-for="item in customerList"
@@ -74,11 +74,11 @@
           <el-form-item label="计划回款金额" prop="price">
             <el-input-number
               v-model="formData.price"
+              :min="0.01"
+              :precision="2"
               class="!w-100%"
               controls-position="right"
               placeholder="请输入计划回款金额"
-              :min="0.01"
-              :precision="2"
             />
           </el-form-item>
         </el-col>
@@ -136,7 +136,7 @@ import * as CustomerApi from '@/api/crm/customer'
 import * as ContractApi from '@/api/crm/contract'
 import { useUserStore } from '@/store/modules/user'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { aw } from '../../../../../dist-prod/assets/index-9eac537b'
+import { cloneDeep } from 'lodash-es'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -167,7 +167,10 @@ const open = async (type: string, id?: number, customerId?: number, contractId?:
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ReceivablePlanApi.getReceivablePlan(id)
+      const data = await ReceivablePlanApi.getReceivablePlan(id)
+      formData.value = cloneDeep(data)
+      await handleCustomerChange(data.customerId!)
+      formData.value.contractId = data?.contractId
     } finally {
       formLoading.value = false
     }

src/views/crm/statistics/customer/components/CustomerConversionStat.vue

@@ -0,0 +1,130 @@
+<!-- 客户转化率分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-skeleton :loading="loading" animated>
+      <Echart :height="500" :options="echartsOption" />
+    </el-skeleton>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card shadow="never" class="mt-16px">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="序号" align="center" type="index" width="80" />
+      <el-table-column label="客户名称" align="center" prop="customerName" min-width="200" />
+      <el-table-column label="合同名称" align="center" prop="contractName" min-width="200" />
+      <el-table-column label="合同总金额" align="center" prop="totalPrice" min-width="200" />
+      <el-table-column label="回款金额" align="center" prop="receivablePrice" min-width="200" />
+      <el-table-column label="负责人" align="center" prop="ownerUserName" min-width="200" />
+      <el-table-column label="创建人" align="center" prop="creatorUserName" min-width="200" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        min-width="200"
+      />
+      <el-table-column
+        label="下单日期"
+        align="center"
+        prop="orderDate"
+        :formatter="dateFormatter2"
+        min-width="200"
+      />
+    </el-table>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {
+  StatisticsCustomerApi,
+  CrmStatisticsCustomerSummaryByDateRespVO
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+import { round } from 'lodash-es'
+import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
+
+defineOptions({ name: 'CustomerConversionStat' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticsCustomerSummaryByDateRespVO[]>([]) // 列表的数据
+
+/** 柱状图配置：纵向 */
+const echartsOption = reactive<EChartsOption>({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    containLabel: true
+  },
+  legend: {},
+  series: [
+    {
+      name: '客户转化率',
+      type: 'line',
+      data: []
+    }
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        xAxisIndex: false // 数据区域缩放：Y 轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '客户转化率分析' } // 保存为图片
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '转化率(%)'
+  },
+  xAxis: {
+    type: 'category',
+    name: '日期',
+    data: []
+  }
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const customerCount = await StatisticsCustomerApi.getCustomerSummaryByDate(props.queryParams)
+  const contractSummary = await StatisticsCustomerApi.getContractSummary(props.queryParams)
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.xAxis && echartsOption.xAxis['data']) {
+    echartsOption.xAxis['data'] = customerCount.map(
+      (s: CrmStatisticsCustomerSummaryByDateRespVO) => s.time
+    )
+  }
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = customerCount.map(
+      (item: CrmStatisticsCustomerSummaryByDateRespVO) => {
+        return {
+          name: item.time,
+          value: item.customerCreateCount
+            ? round((item.customerDealCount / item.customerCreateCount) * 100, 2)
+            : 0
+        }
+      }
+    )
+  }
+  // 2.2 更新列表数据
+  list.value = contractSummary
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>

src/views/crm/statistics/customer/components/CustomerDealCycle.vue

@@ -0,0 +1,127 @@
+<!-- 成交周期分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-skeleton :loading="loading" animated>
+      <Echart :height="500" :options="echartsOption" />
+    </el-skeleton>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card shadow="never" class="mt-16px">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="序号" align="center" type="index" width="80" />
+      <el-table-column label="日期" align="center" prop="ownerUserName" min-width="200" />
+      <el-table-column
+        label="成交周期(天)"
+        align="center"
+        prop="customerDealCycle"
+        min-width="200"
+      />
+      <el-table-column label="成交客户数" align="center" prop="customerDealCount" min-width="200" />
+    </el-table>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {
+  StatisticsCustomerApi,
+  CrmStatisticsCustomerDealCycleByDateRespVO,
+  CrmStatisticsCustomerSummaryByDateRespVO,
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+
+defineOptions({ name: 'CustomerDealCycle' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticsCustomerDealCycleByDateRespVO[]>([]) // 列表的数据
+
+/** 柱状图配置：纵向 */
+const echartsOption = reactive<EChartsOption>({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    containLabel: true
+  },
+  legend: {},
+  series: [
+    {
+      name: '成交周期(天)',
+      type: 'bar',
+      data: []
+    },
+    {
+      name: '成交客户数',
+      type: 'bar',
+      data: []
+    }
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        xAxisIndex: false // 数据区域缩放：Y 轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '成交周期分析' } // 保存为图片
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '数量（个）'
+  },
+  xAxis: {
+    type: 'category',
+    name: '日期',
+    data: []
+  }
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate(
+    props.queryParams
+  )
+    const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
+    props.queryParams
+  )
+  const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser(
+    props.queryParams
+  )
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.xAxis && echartsOption.xAxis['data']) {
+    echartsOption.xAxis['data'] = customerDealCycleByDate.map(
+      (s: CrmStatisticsCustomerDealCycleByDateRespVO) => s.time
+    )
+  }
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = customerDealCycleByDate.map(
+      (s: CrmStatisticsCustomerDealCycleByDateRespVO) => s.customerDealCycle
+    )
+  }
+  if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
+    echartsOption.series[1]['data'] = customerSummaryByDate.map(
+      (s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerDealCount
+    )
+  }
+  // 2.2 更新列表数据
+  list.value = customerDealCycleByUser
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>

src/views/crm/statistics/customer/components/CustomerFollowupSummary.vue

@@ -0,0 +1,124 @@
+<!-- 客户跟进次数分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-skeleton :loading="loading" animated>
+      <Echart :height="500" :options="echartsOption" />
+    </el-skeleton>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card shadow="never" class="mt-16px">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="序号" align="center" type="index" width="80" />
+      <el-table-column label="员工姓名" align="center" prop="ownerUserName" min-width="200" />
+      <el-table-column label="跟进次数" align="right" prop="followupRecordCount" min-width="200" />
+      <el-table-column
+        label="跟进客户数"
+        align="right"
+        prop="followupCustomerCount"
+        min-width="200"
+      />
+    </el-table>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {
+  StatisticsCustomerApi,
+  CrmStatisticsFollowupSummaryByDateRespVO,
+  CrmStatisticsFollowupSummaryByUserRespVO
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+
+defineOptions({ name: 'CustomerFollowupSummary' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticsFollowupSummaryByUserRespVO[]>([]) // 列表的数据
+
+/** 柱状图配置：纵向 */
+const echartsOption = reactive<EChartsOption>({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    containLabel: true
+  },
+  legend: {},
+  series: [
+    {
+      name: '跟进客户数',
+      type: 'bar',
+      data: []
+    },
+    {
+      name: '跟进次数',
+      type: 'bar',
+      data: []
+    }
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        xAxisIndex: false // 数据区域缩放：Y 轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '客户跟进次数分析' } // 保存为图片
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '数量（个）'
+  },
+  xAxis: {
+    type: 'category',
+    name: '日期',
+    data: []
+  }
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const followupSummaryByDate = await StatisticsCustomerApi.getFollowupSummaryByDate(
+    props.queryParams
+  )
+  const followupSummaryByUser = await StatisticsCustomerApi.getFollowupSummaryByUser(
+    props.queryParams
+  )
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.xAxis && echartsOption.xAxis['data']) {
+    echartsOption.xAxis['data'] = followupSummaryByDate.map(
+      (s: CrmStatisticsFollowupSummaryByDateRespVO) => s.time
+    )
+  }
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = followupSummaryByDate.map(
+      (s: CrmStatisticsFollowupSummaryByDateRespVO) => s.followupCustomerCount
+    )
+  }
+  if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
+    echartsOption.series[1]['data'] = followupSummaryByDate.map(
+      (s: CrmStatisticsFollowupSummaryByDateRespVO) => s.followupRecordCount
+    )
+  }
+  // 2.2 更新列表数据
+  list.value = followupSummaryByUser
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>

src/views/crm/statistics/customer/components/CustomerFollowupType.vue

@@ -0,0 +1,105 @@
+<!-- 客户跟进方式分析 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-skeleton :loading="loading" animated>
+      <Echart :height="500" :options="echartsOption" />
+    </el-skeleton>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card shadow="never" class="mt-16px">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="序号" align="center" type="index" width="80" />
+      <el-table-column label="跟进方式" align="center" prop="followupType" min-width="200" />
+      <el-table-column label="个数" align="center" prop="followupRecordCount" min-width="200" />
+      <el-table-column label="占比(%)" align="center" prop="portion" min-width="200" />
+    </el-table>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {
+  StatisticsCustomerApi,
+  CrmStatisticsFollowupSummaryByTypeRespVO
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+import { round, sumBy } from 'lodash-es'
+
+defineOptions({ name: 'CustomerFollowupType' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticsFollowupSummaryByTypeRespVO[]>([]) // 列表的数据
+
+/** 饼图配置 */
+const echartsOption = reactive<EChartsOption>({
+  title: {
+    text: '客户跟进方式分析',
+    left: 'center'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b} : {c}% '
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: { show: true, name: '客户跟进方式分析' } // 保存为图片
+    }
+  },
+  series: [
+    {
+      name: '跟进方式',
+      type: 'pie',
+      radius: '50%',
+      data: [],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const followupSummaryByType = await StatisticsCustomerApi.getFollowupSummaryByType(
+    props.queryParams
+  )
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = followupSummaryByType.map(
+      (r: CrmStatisticsFollowupSummaryByTypeRespVO) => {
+        return {
+          name: r.followupType,
+          value: r.followupRecordCount
+        }
+      }
+    )
+  }
+  // 2.2 更新列表数据
+  const totalCount = sumBy(followupSummaryByType, 'followupRecordCount')
+  list.value = followupSummaryByType.map((r: CrmStatisticsFollowupSummaryByTypeRespVO) => {
+    return {
+      followupType: r.followupType,
+      followupRecordCount: r.followupRecordCount,
+      portion: round((r.followupRecordCount / totalCount) * 100, 2)
+    }
+  })
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>

src/views/crm/statistics/customer/components/CustomerSummary.vue

@@ -0,0 +1,151 @@
+<!-- 客户总量统计 -->
+<template>
+  <!-- Echarts图 -->
+  <el-card shadow="never">
+    <el-skeleton :loading="loading" animated>
+      <Echart :height="500" :options="echartsOption" />
+    </el-skeleton>
+  </el-card>
+
+  <!-- 统计列表 -->
+  <el-card shadow="never" class="mt-16px">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="序号" align="center" type="index" width="80" />
+      <el-table-column label="员工姓名" prop="ownerUserName" min-width="100" />
+      <el-table-column
+        label="新增客户数"
+        align="right"
+        prop="customerCreateCount"
+        min-width="200"
+      />
+      <el-table-column label="成交客户数" align="right" prop="customerDealCount" min-width="200" />
+      <el-table-column label="客户成交率(%)" align="right" min-width="200">
+        <template #default="scope">
+          {{
+            scope.row.customerCreateCount !== 0
+              ? round((scope.row.customerDealCount / scope.row.customerCreateCount) * 100, 2)
+              : 0
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="合同总金额" align="right" prop="contractPrice" min-width="200" />
+      <el-table-column label="回款金额" align="right" prop="receivablePrice" min-width="200" />
+      <el-table-column label="未回款金额" align="right" min-width="200">
+        <!-- TODO @dhb52：参考 util/index.ts 的 // ========== ERP 专属方法 ========== 部分，搞个两个方法，一个格式化百分比，一个计算百分比  -->
+        <template #default="scope">
+          {{ round(scope.row.contractPrice - scope.row.receivablePrice, 2) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="回款完成率(%)" align="right" min-width="200">
+        <template #default="scope">
+          {{
+            scope.row.contractPrice !== 0
+              ? round((scope.row.receivablePrice / scope.row.contractPrice) * 100, 2)
+              : 0
+          }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {
+  StatisticsCustomerApi,
+  CrmStatisticsCustomerSummaryByDateRespVO,
+  CrmStatisticsCustomerSummaryByUserRespVO
+} from '@/api/crm/statistics/customer'
+import { EChartsOption } from 'echarts'
+import { round } from 'lodash-es'
+
+defineOptions({ name: 'CustomerSummary' })
+const props = defineProps<{ queryParams: any }>() // 搜索参数
+
+const loading = ref(false) // 加载中
+const list = ref<CrmStatisticsCustomerSummaryByUserRespVO[]>([]) // 列表的数据
+
+/** 柱状图配置：纵向 */
+const echartsOption = reactive<EChartsOption>({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    containLabel: true
+  },
+  legend: {},
+  series: [
+    {
+      name: '新增客户数',
+      type: 'bar',
+      data: []
+    },
+    {
+      name: '成交客户数',
+      type: 'bar',
+      data: []
+    }
+  ],
+  toolbox: {
+    feature: {
+      dataZoom: {
+        xAxisIndex: false // 数据区域缩放：Y 轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '数量（个）'
+  },
+  xAxis: {
+    type: 'category',
+    name: '日期',
+    data: []
+  }
+}) as EChartsOption
+
+/** 获取统计数据 */
+const loadData = async () => {
+  // 1. 加载统计数据
+  loading.value = true
+  const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
+    props.queryParams
+  )
+  const customerSummaryByUser = await StatisticsCustomerApi.getCustomerSummaryByUser(
+    props.queryParams
+  )
+  // 2.1 更新 Echarts 数据
+  if (echartsOption.xAxis && echartsOption.xAxis['data']) {
+    echartsOption.xAxis['data'] = customerSummaryByDate.map(
+      (s: CrmStatisticsCustomerSummaryByDateRespVO) => s.time
+    )
+  }
+  if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
+    echartsOption.series[0]['data'] = customerSummaryByDate.map(
+      (s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerCreateCount
+    )
+  }
+  if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
+    echartsOption.series[1]['data'] = customerSummaryByDate.map(
+      (s: CrmStatisticsCustomerSummaryByDateRespVO) => s.customerDealCount
+    )
+  }
+  // 2.2 更新列表数据
+  list.value = customerSummaryByUser
+  loading.value = false
+}
+defineExpose({ loadData })
+
+/** 初始化 */
+onMounted(() => {
+  loadData()
+})
+</script>

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

@@ -0,0 +1,166 @@
+<!-- 数据统计 - 员工客户分析 -->
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="时间范围" prop="orderDate">
+        <el-date-picker
+          v-model="queryParams.times"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+        />
+      </el-form-item>
+      <el-form-item label="归属部门" prop="deptId">
+        <el-tree-select
+          v-model="queryParams.deptId"
+          class="!w-240px"
+          :data="deptList"
+          :props="defaultProps"
+          check-strictly
+          node-key="id"
+          placeholder="请选择归属部门"
+          @change="queryParams.userId = undefined"
+        />
+      </el-form-item>
+      <el-form-item label="员工" prop="userId">
+        <el-select v-model="queryParams.userId" class="!w-240px" placeholder="员工" clearable>
+          <el-option
+            v-for="(user, index) in userListByDeptId"
+            :label="user.nickname"
+            :value="user.id"
+            :key="index"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 客户统计 -->
+  <el-col>
+    <el-tabs v-model="activeTab">
+      <!-- 客户总量分析 -->
+      <el-tab-pane label="客户总量分析" name="customerSummary" lazy>
+        <CustomerSummary :query-params="queryParams" ref="customerSummaryRef" />
+      </el-tab-pane>
+      <!-- 客户跟进次数分析 -->
+      <el-tab-pane label="客户跟进次数分析" name="followupSummary" lazy>
+        <CustomerFollowupSummary :query-params="queryParams" ref="followupSummaryRef" />
+      </el-tab-pane>
+      <!-- 客户跟进方式分析 -->
+      <el-tab-pane label="客户跟进方式分析" name="followupType" lazy>
+        <CustomerFollowupType :query-params="queryParams" ref="followupTypeRef" />
+      </el-tab-pane>
+      <!-- 客户转化率分析 -->
+      <el-tab-pane label="客户转化率分析" name="conversionStat" lazy>
+        <CustomerConversionStat :query-params="queryParams" ref="conversionStatRef" />
+      </el-tab-pane>
+      <!-- 成交周期分析 -->
+      <el-tab-pane label="成交周期分析" name="dealCycle" lazy>
+        <CustomerDealCycle :query-params="queryParams" ref="dealCycleRef" />
+      </el-tab-pane>
+    </el-tabs>
+  </el-col>
+</template>
+
+<script lang="ts" setup>
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { useUserStore } from '@/store/modules/user'
+import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
+import { defaultProps, handleTree } from '@/utils/tree'
+import CustomerSummary from './components/CustomerSummary.vue'
+import CustomerFollowupSummary from './components/CustomerFollowupSummary.vue'
+import CustomerFollowupType from './components/CustomerFollowupType.vue'
+import CustomerConversionStat from './components/CustomerConversionStat.vue'
+import CustomerDealCycle from './components/CustomerDealCycle.vue'
+
+defineOptions({ name: 'CrmStatisticsCustomer' })
+
+const queryParams = reactive({
+  deptId: useUserStore().getUser.deptId,
+  userId: undefined,
+  times: [
+    // 默认显示最近一周的数据
+    formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
+    formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
+  ]
+})
+
+const queryFormRef = ref() // 搜索的表单
+const deptList = ref<Tree[]>([]) // 部门树形结构
+const userList = ref<UserApi.UserVO[]>([]) // 全量用户清单
+// 根据选择的部门筛选员工清单
+const userListByDeptId = computed(() =>
+  queryParams.deptId
+    ? userList.value.filter((u: UserApi.UserVO) => u.deptId === queryParams.deptId)
+    : []
+)
+
+// 活跃标签
+const activeTab = ref('customerSummary')
+// 1.客户总量分析
+const customerSummaryRef = ref()
+// 2.客户跟进次数分析
+const followupSummaryRef = ref()
+// 3.客户跟进方式分析
+const followupTypeRef = ref()
+// 4.客户转化率分析
+const conversionStatRef = ref()
+// 5.公海客户分析
+// 缺 crm_owner_record 表
+// 6.成交周期分析
+const dealCycleRef = ref()
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  switch (activeTab.value) {
+    case 'customerSummary':
+      customerSummaryRef.value?.loadData?.()
+      break
+    case 'followupSummary':
+      followupSummaryRef.value?.loadData?.()
+      break
+    case 'followupType':
+      followupTypeRef.value?.loadData?.()
+      break
+    case 'conversionStat':
+      conversionStatRef.value?.loadData?.()
+      break
+    case 'dealCycle':
+      dealCycleRef.value?.loadData?.()
+      break
+  }
+}
+
+// 当 activeTab 改变时，刷新当前活动的 tab
+watch(activeTab, () => {
+  handleQuery()
+})
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+// 加载部门树
+onMounted(async () => {
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  userList.value = handleTree(await UserApi.getSimpleUserList())
+})
+</script>

src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue

@@ -2,39 +2,40 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-button
-      type="primary"
+      v-hasPermi="['infra:demo03-student:create']"
       plain
+      type="primary"
       @click="openForm('create')"
-      v-hasPermi="['infra:demo03-student:create']"
     >
-      <Icon icon="ep:plus" class="mr-5px" /> 新增
+      <Icon class="mr-5px" icon="ep:plus" />
+      新增
     </el-button>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="分数" align="center" prop="score" />
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="名字" prop="name" />
+      <el-table-column align="center" label="分数" prop="score" />
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button
+            v-hasPermi="['infra:demo03-student:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo03-student:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-hasPermi="['infra:demo03-student:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo03-student:delete']"
           >
             删除
           </el-button>
@@ -43,9 +44,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -53,7 +54,7 @@
   <Demo03CourseForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
 import Demo03CourseForm from './Demo03CourseForm.vue'
@@ -62,7 +63,7 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
+  studentId?: number // 学生编号（主表的关联字段）
 }>()
 const loading = ref(false) // 列表的加载中
 const list = ref([]) // 列表的数据
@@ -70,17 +71,20 @@ const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  studentId: undefined
+  studentId: undefined as unknown
 })
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.studentId,
-  (val) => {
+  (val: number) => {
+    if (!val) {
+      return
+    }
     queryParams.studentId = val
     handleQuery()
   },
-  { immediate: false }
+  { immediate: true, deep: true }
 )
 
 /** 查询列表 */

src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue

@@ -2,39 +2,40 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-button
-      type="primary"
+      v-hasPermi="['infra:demo03-student:create']"
       plain
+      type="primary"
       @click="openForm('create')"
-      v-hasPermi="['infra:demo03-student:create']"
     >
-      <Icon icon="ep:plus" class="mr-5px" /> 新增
+      <Icon class="mr-5px" icon="ep:plus" />
+      新增
     </el-button>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="班主任" align="center" prop="teacher" />
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="名字" prop="name" />
+      <el-table-column align="center" label="班主任" prop="teacher" />
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button
+            v-hasPermi="['infra:demo03-student:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo03-student:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-hasPermi="['infra:demo03-student:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo03-student:delete']"
           >
             删除
           </el-button>
@@ -43,9 +44,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -53,7 +54,7 @@
   <Demo03GradeForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
 import Demo03GradeForm from './Demo03GradeForm.vue'
@@ -62,7 +63,7 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
+  studentId?: number // 学生编号（主表的关联字段）
 }>()
 const loading = ref(false) // 列表的加载中
 const list = ref([]) // 列表的数据
@@ -70,17 +71,20 @@ const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  studentId: undefined
+  studentId: undefined as unknown
 })
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.studentId,
-  (val) => {
+  (val: number) => {
+    if (!val) {
+      return
+    }
     queryParams.studentId = val
     handleQuery()
   },
-  { immediate: false }
+  { immediate: true, deep: true }
 )
 
 /** 查询列表 */

src/views/infra/demo/demo03/erp/index.vue

@@ -4,23 +4,23 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="名字" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入名字"
+          class="!w-240px"
           clearable
+          placeholder="请输入名字"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="性别" prop="sex">
-        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable class="!w-240px">
+        <el-select v-model="queryParams.sex" class="!w-240px" clearable placeholder="请选择性别">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
@@ -32,33 +32,41 @@
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
         <el-button
-          type="primary"
+          v-hasPermi="['infra:demo03-student:create']"
           plain
+          type="primary"
           @click="openForm('create')"
-          v-hasPermi="['infra:demo03-student:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
         <el-button
-          type="success"
+          v-hasPermi="['infra:demo03-student:export']"
+          :loading="exportLoading"
           plain
+          type="success"
           @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['infra:demo03-student:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
         </el-button>
       </el-form-item>
     </el-form>
@@ -69,48 +77,48 @@
     <el-table
       v-loading="loading"
       :data="list"
-      :stripe="true"
       :show-overflow-tooltip="true"
+      :stripe="true"
       highlight-current-row
       @current-change="handleCurrentChange"
     >
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="性别" align="center" prop="sex">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="名字" prop="name" />
+      <el-table-column align="center" label="性别" prop="sex">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
         </template>
       </el-table-column>
       <el-table-column
-        label="出生日期"
+        :formatter="dateFormatter"
         align="center"
+        label="出生日期"
         prop="birthday"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column align="center" label="简介" prop="description" />
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button
+            v-hasPermi="['infra:demo03-student:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo03-student:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-hasPermi="['infra:demo03-student:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo03-student:delete']"
           >
             删除
           </el-button>
@@ -119,9 +127,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -132,17 +140,17 @@
   <ContentWrap>
     <el-tabs model-value="demo03Course">
       <el-tab-pane label="学生课程" name="demo03Course">
-        <Demo03CourseList :student-id="currentRow.id" />
+        <Demo03CourseList :student-id="currentRow?.id" />
       </el-tab-pane>
       <el-tab-pane label="学生班级" name="demo03Grade">
-        <Demo03GradeList :student-id="currentRow.id" />
+        <Demo03GradeList :student-id="currentRow?.id" />
       </el-tab-pane>
     </el-tabs>
   </ContentWrap>
 </template>
 
-<script setup lang="ts">
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'