perf(views): 完成"创建角色"步骤查询，新增，编辑，删除功能

src/views/create-customer/CreateCharacter.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue';
+import { onMounted, ref, useTemplateRef, watch } from 'vue';
 
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { addRolePermissions, getSubPermList } from '@/api';
+import {
+  addRolePermissions,
+  addUpdateRolePermissions,
+  deleteCharacter,
+  getFindRolesByOrgIds,
+  getRolePermissions,
+  getSubPermList,
+} from '@/api';
 
 import type { TreeProps } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
 import type { DataNode } from 'ant-design-vue/es/tree';
-import type { CharacterForm, CharacterItem, CreateCustomer, TreeStructure, UseGuideStepItemProps } from '@/types';
+import type { CharacterForm, CharacterPageItem, CreateCustomer, TreeStructure, UseGuideStepItemProps } from '@/types';
 
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
@@ -18,12 +25,13 @@ const rules: Record<string, Rule[]> = {
 
 const { handleRequest } = useRequest();
 const modalComponentRef = useTemplateRef('modalComponent');
-const characterList = ref<CharacterItem[]>([]);
+const characterList = ref<CharacterPageItem[]>([]);
 const characterOpen = ref<boolean>(false);
+const characterTitle = ref<boolean>(true);
 const checked = ref<boolean>(false);
 const checkedAll = ref<number[]>([]);
 const indeterminate = ref<boolean>(false);
-const characterIndex = ref<number>(0);
+const characterId = ref<number>(0);
 const expandedKeys = ref<number[]>([]);
 const selectedKeys = ref<number[]>([]);
 const checkedKeys = ref<number[]>([]);
@@ -39,58 +47,87 @@ const characterForm = ref<CharacterForm>({
   roleName: '',
   remark: '',
 });
+const handleClose = () => {
+  characterForm.value.roleName = '';
+  characterForm.value.remark = '';
+  checkedKeys.value = [];
+  indeterminate.value = false;
+  checked.value = false;
+  expandedKeys.value = [];
+};
 const addCharacter = () => {
+  characterTitle.value = true;
   characterOpen.value = true;
 };
 const characterSave = () => {
   handleRequest(async () => {
-    await addRolePermissions({
-      ...characterForm.value,
-      orgId: props.form.id as number,
-      enabled: '1',
-      permissionIds: checkedKeys.value,
-    });
-  });
+    if (characterTitle.value) {
+      await addRolePermissions({
+        ...characterForm.value,
+        orgId: props.form.id as number,
+        enabled: '1',
+        permissionIds: checkedKeys.value,
+      });
+    } else {
+      await addUpdateRolePermissions({
+        id: characterId.value,
+        ...characterForm.value,
+        orgId: props.form.id as number,
+        enabled: '1',
+        permissionIds: checkedKeys.value,
+      });
+    }
 
-  characterList.value.push({
-    name: '',
-    id: undefined,
+    getFindRolesByOrg();
+    characterOpen.value = false;
   });
-  characterOpen.value = false;
 };
 const cancelSave = () => {
   checkedKeys.value = [];
   characterOpen.value = false;
 };
 const confirm = () => {
-  modalComponentRef.value?.hideView();
-  characterList.value.splice(characterIndex.value, 1);
+  handleRequest(async () => {
+    await deleteCharacter(characterId.value);
+    getFindRolesByOrg();
+    modalComponentRef.value?.hideView();
+  });
 };
-const characterEditor = () => {};
-const characterDelete = (index: number) => {
-  characterIndex.value = index;
-  modalComponentRef.value?.showView();
+const characterEditor = (id: number) => {
+  characterId.value = id;
+  characterTitle.value = false;
+  characterOpen.value = true;
+  handleRequest(async () => {
+    const { remark, roleName, permissionCheckTreeVos } = await getRolePermissions(id);
+    checkedKeys.value = [];
+    characterForm.value.roleName = roleName;
+    characterForm.value.remark = remark;
+
+    permissionCheckTreeVos[0].subPermissions[0].subPermissions.forEach((item) => {
+      if (item.subPermissions) {
+        item.subPermissions.forEach((i) => {
+          if (i.checked === 1) {
+            checkedKeys.value.push(i.id);
+          }
+        });
+        expandedKeys.value.push(item.id);
+      } else {
+        if (item.checked === 1) {
+          checkedKeys.value.push(item.id);
+        }
+      }
+    });
+  });
 };
-const addMenu = () => {
-  if (checkedKeys.value.length === 0) {
-    checked.value = false;
-    indeterminate.value = false;
-    return;
-  }
-  if (checkedAll.value.length !== checkedKeys.value.length) {
-    indeterminate.value = true;
-    checked.value = false;
-  } else {
-    indeterminate.value = false;
-    checked.value = true;
-  }
+const characterDelete = (id: number) => {
+  characterId.value = id;
+  modalComponentRef.value?.showView();
 };
+
 const selectAll = () => {
+  indeterminate.value = false;
   if (checked.value) {
-    checkedKeys.value = getAllKeys(treeStructure.value);
-    if (checkedKeys.value.length) {
-      checkedAll.value = checkedKeys.value;
-    }
+    checkedKeys.value = checkedAll.value;
   } else {
     checkedKeys.value = [];
   }
@@ -101,6 +138,7 @@ const getAllKeys = (data: DataNode[]) => {
   let keys: number[] = [];
   data.forEach((item) => {
     keys.push(item.id);
+    expandedKeys.value.push(item.id);
     if (item.subPermissions) {
       keys = keys.concat(getAllKeys(item.subPermissions));
     }
@@ -117,11 +155,36 @@ const transformTreeData = (data: TreeStructure[]): DataNode[] => {
   }));
 };
 
+const getFindRolesByOrg = () => {
+  handleRequest(async () => {
+    if (props.form.id) {
+      characterList.value = [];
+      const list = await getFindRolesByOrgIds([props.form.id]);
+      list.forEach((item) => {
+        if (item.roleName !== '管理员' && item.roleName !== '工程师') {
+          characterList.value.push(item);
+        }
+      });
+    }
+  });
+};
+
+watch(
+  () => checkedKeys.value,
+  (count) => {
+    if (count) {
+      indeterminate.value = !!count.length && count.length < checkedAll.value.length;
+      checked.value = count.length === checkedAll.value.length;
+    }
+  },
+);
+
 onMounted(() => {
   handleRequest(async () => {
+    getFindRolesByOrg();
     const data = await getSubPermList(0);
+
     treeStructure.value = transformTreeData(data[0].subPermissions[0].subPermissions);
-    // treeStructure.value = treeData[0].subPermissions;
     checkedAll.value = getAllKeys(treeStructure.value);
   });
 });
@@ -140,13 +203,13 @@ onMounted(() => {
         <div class="input-style-text">默认角色</div>
       </AFlex>
       <AFlex align="center" v-for="(item, index) in characterList" :key="index">
-        <AFlex class="input-style input-background" align="center"> 角色 </AFlex>
-        <div @click="characterEditor">
+        <AFlex class="input-style input-background" align="center"> {{ item.roleName }} </AFlex>
+        <div @click="characterEditor(item.id)">
           <AFlex class="editorial-role" align="center" justify="center">
             <SvgIcon name="edit-o" />
           </AFlex>
         </div>
-        <div @click="characterDelete(index)">
+        <div @click="characterDelete(item.id)">
           <AFlex class="editorial-role" align="center" justify="center">
             <SvgIcon class="icon-color" name="delete" />
           </AFlex>
@@ -159,7 +222,14 @@ onMounted(() => {
         <span> 增加角色 </span>
       </AFlex>
     </AButton>
-    <AModal v-model:open="characterOpen" title="添加角色" width="920px" :mask-closable="false" :footer="null">
+    <AModal
+      v-model:open="characterOpen"
+      :title="characterTitle ? '添加角色' : '编辑角色'"
+      width="920px"
+      :mask-closable="false"
+      :footer="null"
+      :after-close="handleClose"
+    >
       <AForm
         ref="formRef"
         class="alarm-modal"
@@ -191,7 +261,6 @@ onMounted(() => {
               :tree-data="treeStructure"
               checkable
               :field-names="fieldNames"
-              @check="addMenu"
             />
           </div>
         </AFormItem>