crm-团队成员：完善团队成员通用组件封装

src/api/crm/permission/index.ts

@@ -1,14 +1,14 @@
 import request from '@/config/axios'
 
 export interface PermissionVO {
-  id: number // 数据权限编号
-  userId: number // 用户编号
-  bizType: number // Crm 类型
-  bizId: number // Crm 类型数据编号
-  level: number // 权限级别
-  deptName: string // 部门名称
-  nickname: string // 用户昵称
-  postNames: string // 岗位名称数组
+  id?: number // 数据权限编号
+  userId: number | undefined // 用户编号
+  bizType: number | undefined // Crm 类型
+  bizId: number | undefined // Crm 类型数据编号
+  level: number | undefined // 权限级别
+  deptName?: string // 部门名称
+  nickname?: string // 用户昵称
+  postNames?: string // 岗位名称数组
 }
 
 // 查询团队成员列表
@@ -21,8 +21,8 @@ export const createPermission = async (data: PermissionVO) => {
   return await request.post({ url: `/crm/permission/add`, data })
 }
 
-// 修改团队成员
-export const updatePermission = async (data: PermissionVO) => {
+// 修改团队成员权限级别
+export const updatePermission = async (data) => {
   return await request.put({ url: `/crm/permission/update`, data })
 }
 
@@ -30,3 +30,18 @@ export const updatePermission = async (data: PermissionVO) => {
 export const deletePermission = async (params) => {
   return await request.delete({ url: '/crm/permission/delete', params })
 }
+
+// 退出团队
+export const quitTeam = async (id) => {
+  return await request.delete({ url: '/crm/permission/quit-team?id=' + id })
+}
+
+// 领取公海数据
+export const receive = async (data: { bizType: number; bizId: number }) => {
+  return await request.put({ url: `/crm/permission/receive`, data })
+}
+
+// 数据放入公海
+export const putPool = async (data: { bizType: number; bizId: number }) => {
+  return await request.put({ url: `/crm/permission/put-pool`, data })
+}

src/views/crm/components/CrmPermissionForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -11,16 +11,16 @@
         <el-select v-model="formData.userId">
           <el-option
             v-for="item in userOptions"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.nickname"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="权限级别" prop="level">
         <el-radio-group v-model="formData.level">
-          <el-radio label="2">只读</el-radio>
-          <el-radio label="3">读写</el-radio>
+          <el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
+          <el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
@@ -32,6 +32,8 @@
 </template>
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
+import * as PermissionApi from '@/api/crm/permission'
+import { CrmPermissionLevelEnum } from './index'
 
 defineOptions({ name: 'CrmPermissionForm' })
 const { t } = useI18n() // 国际化
@@ -42,7 +44,7 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const formData = ref({
+const formData = ref<PermissionApi.PermissionVO & { ids?: number[] }>({
   userId: undefined, // 用户编号
   bizType: undefined, // Crm 类型
   bizId: undefined, // Crm 类型数据编号
@@ -55,17 +57,15 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (type: 'create' | 'update', bizType: number, bizId: number, id?: number) => {
+const open = async (type: 'create' | 'update', bizType: number, bizId: number, ids?: number[]) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type) + '团队成员'
   formType.value = type
   resetForm(bizType, bizId)
   // 修改时，设置数据
-  if (id) {
-    formData.value.id = id
+  if (ids) {
+    formData.value.ids = ids
   }
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -81,8 +81,10 @@ const submitForm = async () => {
   try {
     const data = formData.value
     if (formType.value === 'create') {
+      await PermissionApi.createPermission(unref(data))
       message.success(t('common.createSuccess'))
     } else {
+      await PermissionApi.updatePermission(unref(data))
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -95,12 +97,16 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = (bizType: number, bizId: number) => {
+  formRef.value?.resetFields()
   formData.value = {
     userId: undefined, // 用户编号
     bizType, // Crm 类型
     bizId, // Crm 类型数据编号
     level: undefined // 权限级别
   }
-  formRef.value?.resetFields()
 }
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+})
 </script>

src/views/crm/components/CrmTeamList.vue

@@ -25,10 +25,10 @@
     @selection-change="handleSelectionChange"
   >
     <el-table-column type="selection" width="55" />
-    <el-table-column align="center" label="姓名" prop="mobile" />
-    <el-table-column align="center" label="部门" prop="detailAddress" />
-    <el-table-column align="center" label="岗位" prop="detailAddress" />
-    <el-table-column align="center" label="权限级别" prop="creatorName" />
+    <el-table-column align="center" label="姓名" prop="nickname" />
+    <el-table-column align="center" label="部门" prop="deptName" />
+    <el-table-column align="center" label="岗位" prop="postNames" />
+    <el-table-column align="center" label="权限级别" prop="level" />
     <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
   </el-table>
   <CrmPermissionForm ref="crmPermissionFormRef" />
@@ -39,6 +39,7 @@ 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'
 
 defineOptions({ name: 'CrmTeam' })
 const props = defineProps<{
@@ -65,14 +66,14 @@ const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
   multipleSelection.value = val
 }
 const message = useMessage()
-const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm | null>>(null)
+const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>()
 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[0])
+  crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
 }
 const handleRemove = async () => {
   if (multipleSelection.value?.length === 0) {
@@ -81,13 +82,10 @@ const handleRemove = async () => {
   }
   await message.delConfirm()
   const ids = multipleSelection.value?.map((item) => item.id)
-  ids?.forEach((id) => {
-    // TODO 还不确定要不要搞个批量删除，还是一次只能删除一个，先用循环弄一下
-    PermissionApi.deletePermission({
-      bizType: props.bizType,
-      bizId: props.bizId,
-      id
-    })
+  await PermissionApi.deletePermission({
+    bizType: props.bizType,
+    bizId: props.bizId,
+    ids
   })
 }
 const handleAdd = () => {
@@ -95,14 +93,16 @@ const handleAdd = () => {
 }
 
 const userStore = useUserStoreWithOut()
-const handleQuit = () => {
+const handleQuit = async () => {
   const permission = list.value.find(
-    (item) => item.userId === userStore.getUser.id && item.level === 1
+    (item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER
   )
   if (permission) {
     message.warning('负责人不能退出团队！')
     return
   }
+  const userPermission = list.value.find((item) => item.userId === userStore.getUser.id)
+  await PermissionApi.quitTeam(userPermission?.id)
 }
 
 watch(
@@ -113,4 +113,3 @@ watch(
   { immediate: true, deep: true }
 )
 </script>
-<style lang="scss" scoped></style>

src/views/crm/components/index.ts

@@ -8,4 +8,10 @@ enum CrmBizTypeEnum {
   CRM_CONTRACT = 6 // 合同
 }
 
-export { CrmTeam, CrmBizTypeEnum }
+enum CrmPermissionLevelEnum {
+  OWNER = 1, // 负责人
+  READ = 2, // 读
+  WRITE = 3 // 写
+}
+
+export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum }