perf(views): 编写"角色管理"页面角色新增，编辑，删除功能

src/views/role-manage/RoleManage.vue

@@ -1,45 +1,35 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
 import { message } from 'ant-design-vue';
 
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
-import { getSubOrgsByToken } from '@/api';
+import { t } from '@/i18n';
+import { addCharacter, deleteCharacter, getFindRolesByOrgIds, getSubOrgsByToken, updateCharacter } from '@/api';
 
 import type { DataNode } from 'ant-design-vue/es/tree';
 
-const characterList = ref([
-  {
-    name: '管理员',
-    id: 1,
-    show: false,
-  },
-  {
-    name: '工程师',
-    id: 2,
-    show: false,
-  },
-  {
-    name: '技术员',
-    id: 3,
-    show: false,
-  },
-  {
-    name: '操作工',
-    id: 4,
-    show: false,
-  },
-]);
+interface HaracterItem {
+  name: string;
+  id?: number;
+  show: boolean;
+}
+
+const characterList = ref<HaracterItem[]>([]);
 const { handleRequest } = useRequest();
-const characterListId = ref(1);
+const characterListId = ref();
 const inputRef = ref<HTMLInputElement[]>([]); // 明确的类型声明
 const permissions = ref<string>('dataPermissions');
 const equipmentChecked = ref<boolean>(false);
 const editorChecked = ref<boolean>(true);
 const valueTime = ref<string>('1');
 const pagePermissionsSelectedKeys = ref<number[]>([]);
-
+const orgId = ref<number>();
+const characterId = ref<number>();
+const enterShow = ref<boolean>(false);
+const modalComponentRef = useTemplateRef('modalComponent');
 const pagePermissionsTree = ref<DataNode[]>([
   {
     title: '父节点 1',
@@ -57,17 +47,17 @@ const pagePermissionsTree = ref<DataNode[]>([
     ],
   },
 ]);
-const addCharacter = async () => {
+const addCharacterName = async () => {
   if (characterList.value.some((item) => item.name === '')) {
     return;
   }
   characterList.value.push({
     name: '',
-    id: 5,
+    id: undefined,
     show: true,
   });
   await nextTick();
-  console.log(inputRef.value);
+
   inputRef.value[0].focus();
 };
 const clickCharacter = (id: number) => {
@@ -85,9 +75,58 @@ const addEditor = async (index: number) => {
   await nextTick();
   inputRef.value[0].focus();
 };
-const editorcharacter = (index: number, name: string) => {
+const addDelete = (id: number | undefined) => {
+  if (!id) {
+    return message.warning(t('deviceList.pleaseSelectItemDelete'));
+  }
+  characterId.value = id;
+  modalComponentRef.value?.showView();
+};
+const confirm = () => {
+  handleRequest(async () => {
+    if (characterId.value) {
+      await deleteCharacter(characterId.value);
+      if (orgId.value) {
+        getFindRolesByOrg(orgId.value);
+      }
+    }
+
+    modalComponentRef.value?.hideView();
+  });
+};
+const editorCharacterBlur = (index: number, name: string) => {
+  if (!enterShow.value) {
+    editorCharacter(index, name);
+  }
+};
+/**
+ * 检查字符串是否包含任何空白字符（包括空格、制表符、换行等）
+ * @param str 待检测的字符串
+ * @returns 是否包含空白字符
+ */
+const hasWhitespace = (str: string): boolean => {
+  return /\s/.test(str);
+};
+const editorCharacter = (index: number, name: string) => {
   if (name) {
-    characterList.value[index].show = false;
+    if (!hasWhitespace(name)) {
+      enterShow.value = true;
+      characterList.value[index].show = false;
+      const id = characterList.value[index].id;
+      handleRequest(async () => {
+        if (id) {
+          await updateCharacter({ roleName: name, orgId: orgId.value, id });
+        } else {
+          await addCharacter({ roleName: name, orgId: orgId.value });
+        }
+        enterShow.value = false;
+        if (orgId.value) {
+          getFindRolesByOrg(orgId.value);
+        }
+      });
+    } else {
+      return message.warning('名称中不能包含空格！');
+    }
   } else {
     return message.warning('名称不能为空！');
   }
@@ -103,6 +142,32 @@ const savePermission = () => {
 };
 const clickOrganizationChange = (id: number) => {
   console.log(id);
+  orgId.value = id;
+  getFindRolesByOrg(id);
+};
+
+const getFindRolesByOrg = (id: number) => {
+  handleRequest(async () => {
+    const data = await getFindRolesByOrgIds([id]);
+    characterList.value = [];
+    if (data.length) {
+      data.forEach((item) => {
+        const { roleName, id } = item;
+        characterList.value.push({
+          name: roleName,
+          id,
+          show: false,
+        });
+      });
+      if (!characterListId.value) {
+        characterListId.value = data[0].id;
+      }
+    }
+  });
+};
+
+const addRadioGroup = () => {
+  editorChecked.value = true;
 };
 
 onMounted(() => {
@@ -120,7 +185,7 @@ onMounted(() => {
       <div class="content">
         <AFlex justify="space-between" align="center" class="content-top">
           <div class="content-text">角色</div>
-          <div class="icon-style pointer" @click="addCharacter">
+          <div class="icon-style pointer" @click="addCharacterName">
             <AFlex align="center"
               ><SvgIcon name="plus" />
               <div class="text-left">添加</div>
@@ -135,8 +200,8 @@ onMounted(() => {
                 v-model:value="item.name"
                 :bordered="false"
                 ref="inputRef"
-                @pressEnter="editorcharacter(index, item.name)"
-                @blur="editorcharacter(index, item.name)"
+                @pressEnter="editorCharacter(index, item.name)"
+                @blur="editorCharacterBlur(index, item.name)"
               />
             </div>
             <AFlex
@@ -145,10 +210,10 @@ onMounted(() => {
               align="center"
               :class="item.id === characterListId ? 'character-list character-list-color' : 'character-list'"
             >
-              <div class="pointer text-height" @click="clickCharacter(item.id)">{{ item.name }}</div>
+              <div class="pointer text-height" @click="clickCharacter(item.id!)">{{ item.name }}</div>
               <div v-if="item.id === characterListId">
                 <SvgIcon class="pointer" name="edit-o" @click="addEditor(index)" />
-                <SvgIcon class="pointer icon-left" name="delete" />
+                <SvgIcon class="pointer icon-left" @click="addDelete(item.id)" name="delete" />
               </div>
             </AFlex>
           </div>
@@ -180,7 +245,7 @@ onMounted(() => {
           </AFlex>
         </AFlex>
 
-        <ARadioGroup v-model:value="permissions" button-style="solid" size="large">
+        <ARadioGroup v-model:value="permissions" button-style="solid" size="large" @change="addRadioGroup">
           <ARadioButton value="dataPermissions">数据权限</ARadioButton>
           <ARadioButton value="functionPermissions">功能权限</ARadioButton>
         </ARadioGroup>
@@ -227,6 +292,14 @@ onMounted(() => {
         </div>
       </div>
     </AFlex>
+    <ConfirmModal
+      ref="modalComponent"
+      :title="t('common.deleteConfirmation')"
+      :description-text="t('common.confirmDeletion')"
+      :icon="{ name: 'delete' }"
+      :icon-bg-color="'#F56C6C'"
+      @confirm="confirm"
+    />
   </div>
 </template>