crm-客户：完善转移和按钮权限

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

@@ -1,103 +1,112 @@
 <template>
   <!-- 操作栏 -->
-  <el-row justify="end">
-    <el-button @click="openForm">
-      <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
-      添加团队成员
+  <el-row v-if="showAction" justify="end">
+    <el-button v-if="validateOwnerUser" type="primary" @click="openForm">
+      <Icon class="mr-5px" icon="ep:plus" />
+      新增
     </el-button>
-    <el-button @click="handleUpdate">
+    <el-button v-if="validateOwnerUser" @click="handleUpdate">
       <Icon class="mr-5px" icon="ep:edit" />
       编辑
     </el-button>
-    <el-button @click="handleDelete">
+    <el-button v-if="validateOwnerUser" @click="handleDelete">
       <Icon class="mr-5px" icon="ep:delete" />
       移除
     </el-button>
-    <el-button type="danger" @click="handleQuit"> 退出团队</el-button>
+    <el-button v-if="!validateOwnerUser && list.length > 0" type="danger" @click="handleQuit">
+      退出团队
+    </el-button>
   </el-row>
-
-  <!-- 列表 -->
-  <ContentWrap class="mt-10px">
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :show-overflow-tooltip="true"
-      :stripe="true"
-      @selection-change="handleSelectionChange"
-    >
-      <!-- TODO @puhui999：负责人不允许选中 -->
-      <el-table-column type="selection" width="55" />
-      <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">
-        <template #default="{ row }">
-          <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>
-  </ContentWrap>
+  <!-- 团队成员展示 -->
+  <el-table
+    ref="elTableRef"
+    v-loading="loading"
+    :data="list"
+    :show-overflow-tooltip="true"
+    :stripe="true"
+    class="mt-20px"
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column type="selection" width="55" />
+    <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">
+      <template #default="{ row }">
+        <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="formRef" @success="getList" />
 </template>
 <script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
-import { DICT_TYPE } from '@/utils/dict'
+import { ElTable } from 'element-plus'
 import * as PermissionApi from '@/api/crm/permission'
-import { PermissionLevelEnum } from '@/api/crm/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import CrmPermissionForm from './PermissionForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
 
 defineOptions({ name: 'CrmPermissionList' })
-const props = defineProps<{
-  bizType: number // 业务类型
-  bizId: number // 业务编号
-}>()
 
 const message = useMessage() // 消息
+
+const props = defineProps<{
+  bizType: number // 模块类型
+  bizId: number | undefined // 模块数据编号
+  showAction: boolean //是否展示操作按钮
+}>()
 const loading = ref(true) // 列表的加载中
 const list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
+const formData = ref({
+  ownerUserId: 0
+})
+const userStore = useUserStoreWithOut() // 用户信息缓存
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    list.value = await PermissionApi.getPermissionList({
+    const data = await PermissionApi.getPermissionList({
       bizType: props.bizType,
       bizId: props.bizId
     })
+    list.value = data
+    const permission = list.value.find(
+      (item) =>
+        item.userId === userStore.getUser.id &&
+        item.level === PermissionApi.PermissionLevelEnum.OWNER
+    )
+    if (permission) {
+      formData.value.ownerUserId = userStore.getUser.id
+    }
   } finally {
     loading.value = false
   }
 }
-
-/** 选中团队成员 */
 const multipleSelection = ref<PermissionApi.PermissionVO[]>([]) // 选择的团队成员
+const elTableRef = ref<InstanceType<typeof ElTable>>()
 const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
+  if (val.findIndex((item) => item.level === PermissionApi.PermissionLevelEnum.OWNER) !== -1) {
+    message.warning('不能选择负责人！')
+    elTableRef.value?.clearSelection()
+    return
+  }
   multipleSelection.value = val
 }
 
-/** 添加团队成员 */
-const formRef = ref<InstanceType<typeof CrmPermissionForm>>() // 权限表单 Ref
-const openForm = () => {
-  formRef.value?.open('create', props.bizType, props.bizId)
-}
-
 /** 编辑团队成员 */
+const formRef = ref<InstanceType<typeof CrmPermissionForm>>() // 权限表单 Ref
 const handleUpdate = () => {
   if (multipleSelection.value?.length === 0) {
     message.warning('请先选择团队成员后操作！')
     return
   }
-  const ids = multipleSelection.value?.map((item) => item.id) as number[]
-  formRef.value?.open('update', props.bizType, props.bizId, ids)
+  const ids = multipleSelection.value?.map((item) => item.id) as unknown as number[]
+  formRef.value?.open('update', props.bizType, props.bizId!, ids)
 }
 
 /** 移除团队成员 */
@@ -106,36 +115,75 @@ const handleDelete = async () => {
     message.warning('请先选择团队成员后操作！')
     return
   }
-  await message.delConfirm('是否删除选择的团队成员？')
+  await message.delConfirm()
   const ids = multipleSelection.value?.map((item) => item.id)
   await PermissionApi.deletePermissionBatch({
     bizType: props.bizType,
     bizId: props.bizId,
     ids
   })
-  message.success('删除成功')
 }
 
+/** 添加团队成员 */
+const openForm = () => {
+  formRef.value?.open('create', props.bizType, props.bizId!)
+}
+
+// 校验负责人权限和编辑权限
+const validateOwnerUser = ref(false)
+const validateWrite = ref(false)
+const isPool = ref(false)
+watch(
+  list,
+  (newArr) => {
+    isPool.value = false
+    if (newArr?.length > 0) {
+      isPool.value = !list.value.some(
+        (item) => item.level === PermissionApi.PermissionLevelEnum.OWNER
+      )
+      validateOwnerUser.value = false
+      validateWrite.value = false
+      const userId = userStore.getUser?.id
+      list.value
+        .filter((item) => item.userId === userId)
+        .forEach((item) => {
+          if (item.level === PermissionApi.PermissionLevelEnum.OWNER) {
+            validateOwnerUser.value = true
+            validateWrite.value = true
+          } else if (item.level === PermissionApi.PermissionLevelEnum.WRITE) {
+            validateWrite.value = true
+          }
+        })
+    } else {
+      isPool.value = true
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+defineExpose({ openForm, validateOwnerUser, validateWrite, isPool })
 /** 退出团队 */
-const userStore = useUserStoreWithOut() // 用户信息缓存
 const handleQuit = async () => {
   const permission = list.value.find(
-    (item) => item.userId === userStore.getUser.id && item.level === PermissionLevelEnum.OWNER
+    (item) =>
+      item.userId === userStore.getUser.id && item.level === PermissionApi.PermissionLevelEnum.OWNER
   )
   if (permission) {
     message.warning('负责人不能退出团队！')
     return
   }
-  await message.confirm('确认退出团队吗？')
   const userPermission = list.value.find((item) => item.userId === userStore.getUser.id)
-  await PermissionApi.deleteSelfPermission(userPermission?.id)
+  if (userPermission) {
+    await PermissionApi.deleteSelfPermission(userPermission.id!)
+  }
 }
 
-/** 监听打开的 bizId + bizType，从而加载最新的列表 */
 watch(
-  () => [props.bizId, props.bizType],
-  (val) => {
-    if (!val[0]) {
+  () => props.bizId,
+  (bizId) => {
+    if (!bizId) {
       return
     }
     getList()