!329 完善团队成员公共组件,crm-客户：集成团队成员

Merge pull request !329 from puhui999/dev-crm

src/api/crm/permission/index.ts

@@ -6,9 +6,9 @@ export interface PermissionVO {
   bizType: number | undefined // Crm 类型
   bizId: number | undefined // Crm 类型数据编号
   level: number | undefined // 权限级别
-  deptName?: string // 部门名称 // 岗位名称数组 TODO @puhui999：数组？
+  deptName?: string // 部门名称
   nickname?: string // 用户昵称
-  postNames?: string // 岗位名称数组 TODO @puhui999：数组？
+  postNames?: string[] // 岗位名称数组
   createTime?: Date
 }
 
@@ -19,7 +19,7 @@ export const getPermissionList = async (params) => {
 
 // 新增团队成员
 export const createPermission = async (data: PermissionVO) => {
-  return await request.post({ url: `/crm/permission/add`, data })
+  return await request.post({ url: `/crm/permission/create`, data })
 }
 
 // 修改团队成员权限级别

src/utils/dict.ts

@@ -1,8 +1,8 @@
 /**
  * 数据字典工具类
  */
-import { useDictStoreWithOut } from '@/store/modules/dict'
-import { ElementPlusInfoType } from '@/types/elementPlus'
+import {useDictStoreWithOut} from '@/store/modules/dict'
+import {ElementPlusInfoType} from '@/types/elementPlus'
 
 const dictStore = useDictStoreWithOut()
 
@@ -13,51 +13,51 @@ const dictStore = useDictStoreWithOut()
  * @returns {*|Array} 数据字典数组
  */
 export interface DictDataType {
-  dictType: string
-  label: string
-  value: string | number | boolean
-  colorType: ElementPlusInfoType | ''
-  cssClass: string
+    dictType: string
+    label: string
+    value: string | number | boolean
+    colorType: ElementPlusInfoType | ''
+    cssClass: string
 }
 
 export const getDictOptions = (dictType: string) => {
-  return dictStore.getDictByType(dictType) || []
+    return dictStore.getDictByType(dictType) || []
 }
 
 export const getIntDictOptions = (dictType: string): DictDataType[] => {
-  const dictOption: DictDataType[] = []
-  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  dictOptions.forEach((dict: DictDataType) => {
-    dictOption.push({
-      ...dict,
-      value: parseInt(dict.value + '')
+    const dictOption: DictDataType[] = []
+    const dictOptions: DictDataType[] = getDictOptions(dictType)
+    dictOptions.forEach((dict: DictDataType) => {
+        dictOption.push({
+            ...dict,
+            value: parseInt(dict.value + '')
+        })
     })
-  })
-  return dictOption
+    return dictOption
 }
 
 export const getStrDictOptions = (dictType: string) => {
-  const dictOption: DictDataType[] = []
-  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  dictOptions.forEach((dict: DictDataType) => {
-    dictOption.push({
-      ...dict,
-      value: dict.value + ''
+    const dictOption: DictDataType[] = []
+    const dictOptions: DictDataType[] = getDictOptions(dictType)
+    dictOptions.forEach((dict: DictDataType) => {
+        dictOption.push({
+            ...dict,
+            value: dict.value + ''
+        })
     })
-  })
-  return dictOption
+    return dictOption
 }
 
 export const getBoolDictOptions = (dictType: string) => {
-  const dictOption: DictDataType[] = []
-  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  dictOptions.forEach((dict: DictDataType) => {
-    dictOption.push({
-      ...dict,
-      value: dict.value + '' === 'true'
+    const dictOption: DictDataType[] = []
+    const dictOptions: DictDataType[] = getDictOptions(dictType)
+    dictOptions.forEach((dict: DictDataType) => {
+        dictOption.push({
+            ...dict,
+            value: dict.value + '' === 'true'
+        })
     })
-  })
-  return dictOption
+    return dictOption
 }
 
 /**
@@ -67,12 +67,12 @@ export const getBoolDictOptions = (dictType: string) => {
  * @return DictDataType 字典对象
  */
 export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
-  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  for (const dict of dictOptions) {
-    if (dict.value === value + '') {
-      return dict
+    const dictOptions: DictDataType[] = getDictOptions(dictType)
+    for (const dict of dictOptions) {
+        if (dict.value === value + '') {
+            return dict
+        }
     }
-  }
 }
 
 /**
@@ -83,117 +83,121 @@ export const getDictObj = (dictType: string, value: any): DictDataType | undefin
  * @return 字典名称
  */
 export const getDictLabel = (dictType: string, value: any): string => {
-  const dictOptions: DictDataType[] = getDictOptions(dictType)
-  const dictLabel = ref('')
-  dictOptions.forEach((dict: DictDataType) => {
-    if (dict.value === value + '') {
-      dictLabel.value = dict.label
-    }
-  })
-  return dictLabel.value
+    const dictOptions: DictDataType[] = getDictOptions(dictType)
+    const dictLabel = ref('')
+    dictOptions.forEach((dict: DictDataType) => {
+        if (dict.value === value + '') {
+            dictLabel.value = dict.label
+        }
+    })
+    return dictLabel.value
 }
 
 export enum DICT_TYPE {
-  USER_TYPE = 'user_type',
-  COMMON_STATUS = 'common_status',
-  SYSTEM_TENANT_PACKAGE_ID = 'system_tenant_package_id',
-  TERMINAL = 'terminal', // 终端
-
-  // ========== SYSTEM 模块 ==========
-  SYSTEM_USER_SEX = 'system_user_sex',
-  SYSTEM_MENU_TYPE = 'system_menu_type',
-  SYSTEM_ROLE_TYPE = 'system_role_type',
-  SYSTEM_DATA_SCOPE = 'system_data_scope',
-  SYSTEM_NOTICE_TYPE = 'system_notice_type',
-  SYSTEM_OPERATE_TYPE = 'system_operate_type',
-  SYSTEM_LOGIN_TYPE = 'system_login_type',
-  SYSTEM_LOGIN_RESULT = 'system_login_result',
-  SYSTEM_SMS_CHANNEL_CODE = 'system_sms_channel_code',
-  SYSTEM_SMS_TEMPLATE_TYPE = 'system_sms_template_type',
-  SYSTEM_SMS_SEND_STATUS = 'system_sms_send_status',
-  SYSTEM_SMS_RECEIVE_STATUS = 'system_sms_receive_status',
-  SYSTEM_ERROR_CODE_TYPE = 'system_error_code_type',
-  SYSTEM_OAUTH2_GRANT_TYPE = 'system_oauth2_grant_type',
-  SYSTEM_MAIL_SEND_STATUS = 'system_mail_send_status',
-  SYSTEM_NOTIFY_TEMPLATE_TYPE = 'system_notify_template_type',
-  SYSTEM_SOCIAL_TYPE = 'system_social_type',
-
-  // ========== INFRA 模块 ==========
-  INFRA_BOOLEAN_STRING = 'infra_boolean_string',
-  INFRA_JOB_STATUS = 'infra_job_status',
-  INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
-  INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',
-  INFRA_CONFIG_TYPE = 'infra_config_type',
-  INFRA_CODEGEN_TEMPLATE_TYPE = 'infra_codegen_template_type',
-  INFRA_CODEGEN_FRONT_TYPE = 'infra_codegen_front_type',
-  INFRA_CODEGEN_SCENE = 'infra_codegen_scene',
-  INFRA_FILE_STORAGE = 'infra_file_storage',
-
-  // ========== BPM 模块 ==========
-  BPM_MODEL_CATEGORY = 'bpm_model_category',
-  BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
-  BPM_TASK_ASSIGN_RULE_TYPE = 'bpm_task_assign_rule_type',
-  BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
-  BPM_PROCESS_INSTANCE_RESULT = 'bpm_process_instance_result',
-  BPM_TASK_ASSIGN_SCRIPT = 'bpm_task_assign_script',
-  BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
-
-  // ========== PAY 模块 ==========
-  PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
-  PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
-  PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
-  PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
-  PAY_NOTIFY_TYPE = 'pay_notify_type', // 商户支付回调状态
-  PAY_TRANSFER_STATUS = 'pay_transfer_status', // 转账订单状态
-  PAY_TRANSFER_TYPE = 'pay_transfer_type', // 转账订单状态
-
-  // ========== MP 模块 ==========
-  MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
-  MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
-
-  // ========== MALL - 会员模块 ==========
-  MEMBER_POINT_BIZ_TYPE = 'member_point_biz_type', // 积分的业务类型
-  MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
-
-  // ========== MALL - 商品模块 ==========
-  PRODUCT_UNIT = 'product_unit', // 商品单位
-  PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
-  PROMOTION_TYPE_ENUM = 'promotion_type_enum', // 营销类型枚举
-
-  // ========== MALL - 交易模块 ==========
-  EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
-  TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
-  TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
-  TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
-  TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
-  TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
-  TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
-  TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
-  BROKERAGE_ENABLED_CONDITION = 'brokerage_enabled_condition', // 分佣模式
-  BROKERAGE_BIND_MODE = 'brokerage_bind_mode', // 分销关系绑定模式
-  BROKERAGE_BANK_NAME = 'brokerage_bank_name', // 佣金提现银行
-  BROKERAGE_WITHDRAW_TYPE = 'brokerage_withdraw_type', // 佣金提现类型
-  BROKERAGE_RECORD_BIZ_TYPE = 'brokerage_record_biz_type', // 佣金业务类型
-  BROKERAGE_RECORD_STATUS = 'brokerage_record_status', // 佣金状态
-  BROKERAGE_WITHDRAW_STATUS = 'brokerage_withdraw_status', // 佣金提现状态
-
-  // ========== MALL - 营销模块 ==========
-  PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
-  PROMOTION_PRODUCT_SCOPE = 'promotion_product_scope', // 营销的商品范围
-  PROMOTION_COUPON_TEMPLATE_VALIDITY_TYPE = 'promotion_coupon_template_validity_type', // 优惠劵模板的有限期类型
-  PROMOTION_COUPON_STATUS = 'promotion_coupon_status', // 优惠劵的状态
-  PROMOTION_COUPON_TAKE_TYPE = 'promotion_coupon_take_type', // 优惠劵的领取方式
-  PROMOTION_ACTIVITY_STATUS = 'promotion_activity_status', // 优惠活动的状态
-  PROMOTION_CONDITION_TYPE = 'promotion_condition_type', // 营销的条件类型枚举
-  PROMOTION_BARGAIN_RECORD_STATUS = 'promotion_bargain_record_status', // 砍价记录的状态
-  PROMOTION_COMBINATION_RECORD_STATUS = 'promotion_combination_record_status', // 拼团记录的状态
-  PROMOTION_BANNER_POSITION = 'promotion_banner_position', // banner 定位
-
-  // ========== CRM - 客户管理模块 ==========
-  CRM_RECEIVABLE_CHECK_STATUS = 'crm_receivable_check_status',
-  CRM_RETURN_TYPE = 'crm_return_type',
-  CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
-  CRM_CUSTOMER_LEVEL = 'crm_customer_level',
-  CRM_CUSTOMER_SOURCE = 'crm_customer_source',
-  CRM_PRODUCT_STATUS = 'crm_product_status'
+    USER_TYPE = 'user_type',
+    COMMON_STATUS = 'common_status',
+    SYSTEM_TENANT_PACKAGE_ID = 'system_tenant_package_id',
+    TERMINAL = 'terminal', // 终端
+
+    // ========== SYSTEM 模块 ==========
+    SYSTEM_USER_SEX = 'system_user_sex',
+    SYSTEM_MENU_TYPE = 'system_menu_type',
+    SYSTEM_ROLE_TYPE = 'system_role_type',
+    SYSTEM_DATA_SCOPE = 'system_data_scope',
+    SYSTEM_NOTICE_TYPE = 'system_notice_type',
+    SYSTEM_OPERATE_TYPE = 'system_operate_type',
+    SYSTEM_LOGIN_TYPE = 'system_login_type',
+    SYSTEM_LOGIN_RESULT = 'system_login_result',
+    SYSTEM_SMS_CHANNEL_CODE = 'system_sms_channel_code',
+    SYSTEM_SMS_TEMPLATE_TYPE = 'system_sms_template_type',
+    SYSTEM_SMS_SEND_STATUS = 'system_sms_send_status',
+    SYSTEM_SMS_RECEIVE_STATUS = 'system_sms_receive_status',
+    SYSTEM_ERROR_CODE_TYPE = 'system_error_code_type',
+    SYSTEM_OAUTH2_GRANT_TYPE = 'system_oauth2_grant_type',
+    SYSTEM_MAIL_SEND_STATUS = 'system_mail_send_status',
+    SYSTEM_NOTIFY_TEMPLATE_TYPE = 'system_notify_template_type',
+    SYSTEM_SOCIAL_TYPE = 'system_social_type',
+
+    // ========== INFRA 模块 ==========
+    INFRA_BOOLEAN_STRING = 'infra_boolean_string',
+    INFRA_JOB_STATUS = 'infra_job_status',
+    INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
+    INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',
+    INFRA_CONFIG_TYPE = 'infra_config_type',
+    INFRA_CODEGEN_TEMPLATE_TYPE = 'infra_codegen_template_type',
+    INFRA_CODEGEN_FRONT_TYPE = 'infra_codegen_front_type',
+    INFRA_CODEGEN_SCENE = 'infra_codegen_scene',
+    INFRA_FILE_STORAGE = 'infra_file_storage',
+
+    // ========== BPM 模块 ==========
+    BPM_MODEL_CATEGORY = 'bpm_model_category',
+    BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
+    BPM_TASK_ASSIGN_RULE_TYPE = 'bpm_task_assign_rule_type',
+    BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
+    BPM_PROCESS_INSTANCE_RESULT = 'bpm_process_instance_result',
+    BPM_TASK_ASSIGN_SCRIPT = 'bpm_task_assign_script',
+    BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
+
+    // ========== PAY 模块 ==========
+    PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
+    PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
+    PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
+    PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
+    PAY_NOTIFY_TYPE = 'pay_notify_type', // 商户支付回调状态
+    PAY_TRANSFER_STATUS = 'pay_transfer_status', // 转账订单状态
+    PAY_TRANSFER_TYPE = 'pay_transfer_type', // 转账订单状态
+
+    // ========== MP 模块 ==========
+    MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
+    MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
+
+    // ========== MALL - 会员模块 ==========
+    MEMBER_POINT_BIZ_TYPE = 'member_point_biz_type', // 积分的业务类型
+    MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
+
+    // ========== MALL - 商品模块 ==========
+    PRODUCT_UNIT = 'product_unit', // 商品单位
+    PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
+    PROMOTION_TYPE_ENUM = 'promotion_type_enum', // 营销类型枚举
+
+    // ========== MALL - 交易模块 ==========
+    EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
+    TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
+    TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
+    TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
+    TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
+    TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
+    TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
+    TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
+    BROKERAGE_ENABLED_CONDITION = 'brokerage_enabled_condition', // 分佣模式
+    BROKERAGE_BIND_MODE = 'brokerage_bind_mode', // 分销关系绑定模式
+    BROKERAGE_BANK_NAME = 'brokerage_bank_name', // 佣金提现银行
+    BROKERAGE_WITHDRAW_TYPE = 'brokerage_withdraw_type', // 佣金提现类型
+    BROKERAGE_RECORD_BIZ_TYPE = 'brokerage_record_biz_type', // 佣金业务类型
+    BROKERAGE_RECORD_STATUS = 'brokerage_record_status', // 佣金状态
+    BROKERAGE_WITHDRAW_STATUS = 'brokerage_withdraw_status', // 佣金提现状态
+
+    // ========== MALL - 营销模块 ==========
+    PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
+    PROMOTION_PRODUCT_SCOPE = 'promotion_product_scope', // 营销的商品范围
+    PROMOTION_COUPON_TEMPLATE_VALIDITY_TYPE = 'promotion_coupon_template_validity_type', // 优惠劵模板的有限期类型
+    PROMOTION_COUPON_STATUS = 'promotion_coupon_status', // 优惠劵的状态
+    PROMOTION_COUPON_TAKE_TYPE = 'promotion_coupon_take_type', // 优惠劵的领取方式
+    PROMOTION_ACTIVITY_STATUS = 'promotion_activity_status', // 优惠活动的状态
+    PROMOTION_CONDITION_TYPE = 'promotion_condition_type', // 营销的条件类型枚举
+    PROMOTION_BARGAIN_RECORD_STATUS = 'promotion_bargain_record_status', // 砍价记录的状态
+    PROMOTION_COMBINATION_RECORD_STATUS = 'promotion_combination_record_status', // 拼团记录的状态
+    PROMOTION_BANNER_POSITION = 'promotion_banner_position', // banner 定位
+
+    // ========== CRM - 客户管理模块 ==========
+    CRM_RECEIVABLE_CHECK_STATUS = 'crm_receivable_check_status',
+    CRM_RETURN_TYPE = 'crm_return_type',
+    CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
+    CRM_CUSTOMER_LEVEL = 'crm_customer_level',
+    CRM_CUSTOMER_SOURCE = 'crm_customer_source',
+    CRM_PRODUCT_STATUS = 'crm_product_status',
+
+    // ========== CRM - 数据权限模块 ==========
+    CRM_BIZ_TYPE = 'crm_biz_type', // 数据模块类型
+    CRM_PERMISSION_LEVEL = 'crm_permission_level' // 用户数据权限类型
 }

src/views/crm/components/CrmPermissionForm.vue

@@ -19,9 +19,14 @@
       </el-form-item>
       <el-form-item label="权限级别" prop="level">
         <el-radio-group v-model="formData.level">
-          <!-- TODO @puhui999：搞个字典配置？然后这里 remove 掉负责人 -->
-          <el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
-          <el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
+          <template
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PERMISSION_LEVEL)"
+            :key="dict.value"
+          >
+            <el-radio v-if="dict.value != CrmPermissionLevelEnum.OWNER" :label="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </template>
         </el-radio-group>
       </el-form-item>
     </el-form>
@@ -34,7 +39,8 @@
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
 import * as PermissionApi from '@/api/crm/permission'
-import { CrmPermissionLevelEnum } from './index'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CrmPermissionLevelEnum } from '@/views/crm/components/index'
 
 defineOptions({ name: 'CrmPermissionForm' })
 

src/views/crm/components/CrmTeamList.vue → src/views/crm/components/CrmPermissionList.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 操作栏 -->
   <el-row justify="end">
-    <el-button type="primary" @click="handleAdd">
+    <el-button type="primary" @click="openForm">
       <Icon class="mr-5px" icon="ep:plus" />
       新增
     </el-button>
@@ -9,7 +9,7 @@
       <Icon class="mr-5px" icon="ep:edit" />
       编辑
     </el-button>
-    <el-button @click="handleRemove">
+    <el-button @click="handleDelete">
       <Icon class="mr-5px" icon="ep:delete" />
       移除
     </el-button>
@@ -30,45 +30,32 @@
     <el-table-column align="center" label="岗位" prop="postNames" />
     <el-table-column align="center" label="权限级别" prop="level">
       <template #default="{ row }">
-        <el-tag>{{ getLevelName(row.level) }}</el-tag>
+        <dict-tag :type="DICT_TYPE.CRM_PERMISSION_LEVEL" :value="row.level" />
       </template>
     </el-table-column>
     <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
   </el-table>
-  <CrmPermissionForm ref="crmPermissionFormRef" />
+  <CrmPermissionForm ref="permissionFormRef" @success="getList" />
 </template>
 <script lang="ts" setup>
-// TODO @puhui999：改成 CrmPermissionList
 import { dateFormatter } from '@/utils/formatTime'
 import { ElTable } from 'element-plus'
 import * as PermissionApi from '@/api/crm/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import CrmPermissionForm from './CrmPermissionForm.vue'
 import { CrmPermissionLevelEnum } from './index'
+import { DICT_TYPE } from '@/utils/dict'
 
-defineOptions({ name: 'CrmTeam' })
+defineOptions({ name: 'CrmPermissionList' })
 
 const message = useMessage() // 消息
 
 const props = defineProps<{
-  bizType: number
-  bizId: number
+  bizType: number // 模块类型
+  bizId: number // 模块数据编号
 }>()
 const loading = ref(true) // 列表的加载中
-const list = ref<PermissionApi.PermissionVO[]>([
-  // TODO 测试数据
-  {
-    id: 1, // 数据权限编号
-    userId: 1, // 用户编号
-    bizType: 1, // Crm 类型
-    bizId: 1, // Crm 类型数据编号
-    level: 1, // 权限级别
-    deptName: '研发部门', // 部门名称
-    nickname: '芋道源码', // 用户昵称
-    postNames: '全栈开发工程师', // 岗位名称数组
-    createTime: new Date()
-  }
-]) // 列表的数据
+const list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
 
 /** 查询列表 */
 const getList = async () => {
@@ -83,40 +70,28 @@ const getList = async () => {
     loading.value = false
   }
 }
-
-// TODO @puhui999：字典格式化
-/**
- * 获得权限级别名称
- * @param level 权限级别
- */
-const getLevelName = computed(() => (level: number) => {
-  switch (level) {
-    case CrmPermissionLevelEnum.OWNER:
-      return '负责人'
-    case CrmPermissionLevelEnum.READ:
-      return '只读'
-    case CrmPermissionLevelEnum.WRITE:
-      return '读写'
-    default:
-      break
-  }
-})
-// TODO @puhui999：空行稍微注意下哈；一些注释补齐下；
-const multipleSelection = ref<PermissionApi.PermissionVO[]>([])
+const multipleSelection = ref<PermissionApi.PermissionVO[]>([]) // 选择的团队成员
 const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
   multipleSelection.value = val
 }
-// TODO @puhui999：一些变量命名，看看有没可能跟列表界面的 index.vue 保持他统一的风格；
-const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>()
+
+const permissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>() // 权限表单 Ref
+/**
+ * 编辑团队成员
+ */
 const handleEdit = () => {
   if (multipleSelection.value?.length === 0) {
     message.warning('请先选择团队成员后操作！')
     return
   }
   const ids = multipleSelection.value?.map((item) => item.id)
-  crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
+  permissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
 }
-const handleRemove = async () => {
+
+/**
+ * 移除团队成员
+ */
+const handleDelete = async () => {
   if (multipleSelection.value?.length === 0) {
     message.warning('请先选择团队成员后操作！')
     return
@@ -129,11 +104,18 @@ const handleRemove = async () => {
     ids
   })
 }
-const handleAdd = () => {
-  crmPermissionFormRef.value?.open('create', props.bizType, props.bizId)
+
+/**
+ * 添加团队成员
+ */
+const openForm = () => {
+  permissionFormRef.value?.open('create', props.bizType, props.bizId)
 }
 
-const userStore = useUserStoreWithOut()
+const userStore = useUserStoreWithOut() // 用户信息缓存
+/**
+ * 退出团队
+ */
 const handleQuit = async () => {
   const permission = list.value.find(
     (item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER

src/views/crm/components/index.ts

@@ -1,4 +1,4 @@
-import CrmTeam from './CrmTeamList.vue'
+import CrmPermissionList from './CrmPermissionList.vue'
 
 enum CrmBizTypeEnum {
   CRM_LEADS = 1, // 线索
@@ -9,9 +9,7 @@ enum CrmBizTypeEnum {
 }
 
 enum CrmPermissionLevelEnum {
-  OWNER = 1, // 负责人
-  READ = 2, // 读
-  WRITE = 3 // 写
+  OWNER = 1 // 负责人
 }
 
-export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum }
+export { CrmPermissionList, CrmBizTypeEnum, CrmPermissionLevelEnum }

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

@@ -8,7 +8,7 @@
       </div>
       <div>
         <!-- 右上：按钮 -->
-        <el-button @click="openForm('update', customer.id)" v-hasPermi="['crm:customer:update']">
+        <el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
           编辑
         </el-button>
         <el-button>更改成交状态</el-button>
@@ -16,31 +16,31 @@
     </div>
     <el-row class="mt-10px">
       <el-button>
-        <Icon icon="ph:calendar-fill" class="mr-5px" />
+        <Icon class="mr-5px" icon="ph:calendar-fill" />
         创建任务
       </el-button>
       <el-button>
-        <Icon icon="carbon:email" class="mr-5px" />
+        <Icon class="mr-5px" icon="carbon:email" />
         发送邮件
       </el-button>
       <el-button>
-        <Icon icon="system-uicons:contacts" class="mr-5px" />
+        <Icon class="mr-5px" icon="system-uicons:contacts" />
         创建联系人
       </el-button>
       <el-button>
-        <Icon icon="ep:opportunity" class="mr-5px" />
+        <Icon class="mr-5px" icon="ep:opportunity" />
         创建商机
       </el-button>
       <el-button>
-        <Icon icon="clarity:contract-line" class="mr-5px" />
+        <Icon class="mr-5px" icon="clarity:contract-line" />
         创建合同
       </el-button>
       <el-button>
-        <Icon icon="icon-park:income-one" class="mr-5px" />
+        <Icon class="mr-5px" icon="icon-park:income-one" />
         创建回款
       </el-button>
       <el-button>
-        <Icon icon="fluent:people-team-add-20-filled" class="mr-5px" />
+        <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
         添加团队成员
       </el-button>
     </el-row>
@@ -75,20 +75,32 @@
       <el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
       <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
       <el-tab-pane label="联系人" lazy>
-        <template #label> 联系人<el-badge class="item" type="primary" /> </template>
+        <template #label>
+          联系人
+          <el-badge class="item" type="primary" />
+        </template>
         联系人
       </el-tab-pane>
       <el-tab-pane label="团队成员" lazy>
-        <template #label> 团队成员<el-badge class="item" type="primary" /> </template>
-        团队成员
+        <template #label>
+          团队成员
+          <el-badge class="item" type="primary" />
+        </template>
+        <CrmPermissionList :biz-id="customer.id" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
       <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
       <el-tab-pane label="合同" lazy>
-        <template #label> 合同<el-badge class="item" type="primary" /> </template>
+        <template #label>
+          合同
+          <el-badge class="item" type="primary" />
+        </template>
         合同
       </el-tab-pane>
       <el-tab-pane label="回款" lazy>
-        <template #label> 回款<el-badge class="item" type="primary" /> </template>
+        <template #label>
+          回款
+          <el-badge class="item" type="primary" />
+        </template>
         回款
       </el-tab-pane>
       <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
@@ -100,7 +112,7 @@
   <CustomerForm ref="formRef" @success="getCustomerData(id)" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ElMessage } from 'element-plus'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as CustomerApi from '@/api/crm/customer'
@@ -108,6 +120,7 @@ import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue
 import { DICT_TYPE } from '@/utils/dict'
 import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
 import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
+import { CrmBizTypeEnum, CrmPermissionList } from '@/views/crm/components'
 
 defineOptions({ name: 'CustomerDetail' })
 

src/views/crm/customer/index.vue

@@ -121,7 +121,7 @@
       <el-table-column align="center" label="手机" prop="mobile" width="120" />
       <el-table-column align="center" label="详细地址" prop="detailAddress" width="200" />
       <el-table-column align="center" label="负责人" prop="ownerUserName" />
-      <el-table-column align="center" label="所属部门" prop="ownerUserDept" />
+      <el-table-column align="center" label="所属部门" prop="ownerUserDeptName" />
       <el-table-column align="center" label="创建人" prop="creatorName" />
       <el-table-column
         :formatter="dateFormatter"
@@ -185,8 +185,6 @@
       @pagination="getList"
     />
   </ContentWrap>
-  <!-- TODO 方便查看效果 TODO 芋艿：先注释了，避免演示环境报错 -->
-  <!--  <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />-->
 
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getList" />
@@ -198,7 +196,6 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CustomerApi from '@/api/crm/customer'
 import CustomerForm from './CustomerForm.vue'
-import { CrmBizTypeEnum, CrmTeam } from '@/views/crm/components'
 
 defineOptions({ name: 'CrmCustomer' })
 
@@ -211,11 +208,12 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  name: null,
-  mobile: null,
-  industryId: null,
-  level: null,
-  source: null
+  pool: false,
+  name: '',
+  mobile: '',
+  industryId: undefined,
+  level: undefined,
+  source: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -241,6 +239,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
+  queryParams.pool = false
   handleQuery()
 }