小秀嘎

src/api/sys/menu.ts

@@ -19,7 +19,9 @@ enum Api {
   // GetMenuTreeData = "/base-center/menu/getMenuTreeData",
   GetMenuTreeData = "/base-center/newmenu/getMenuTreeData",
   DeleteMenuData = '/base-center/newmenu/deleteMenuData',
-  DeleteMenuDataList = '/base-center/newmenu/deleteMenuDataList'
+  DeleteMenuDataList = '/base-center/newmenu/deleteMenuDataList',
+  GetRoleMenus = "/base-center/newmenu/getRoleMenus"
+
 }
 
 
@@ -148,11 +150,22 @@ export const delMenu = (menuIds: string[]) => {
   return defHttp.post({ url: Api.DeleteMenuDataList, data: menuIds.map(i => { return { id: i } }) });
 };
 
-export const getMenusIdsByRoleId = (roleId: string) => {
-  const url = Api.GetMenuIdsByRoleId + roleId;
-  // return defHttp.get<Array<string>>({ url });
+export const getMenusIdsByRoleId2 = (roleId: string) => {
   return new Promise<void>((resolve, reject) => {
-    // resolve(menu_get_ids);
     resolve(session.getItem("menu_get_ids"))
   })
 };
+
+export const getMenusIdsByRoleId = () => {
+  var params = {
+    menusId: true,
+    systemId: '1',
+    roleIds: 'FB264E2A-BBEN-FB9T-9CEU-FF94AF30DB87',
+    // roleIds: "1F899E7A-748N-609T-99CU-3FCE7FBEA814"//session.getItem("userInfo").ROLES.map(i => i.ROLE_ID).join(','),
+  }
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post<Array<string>>({ url: Api.GetRoleMenus, params: params }).then(r => {
+      resolve(r.datas.map(i => i.id))
+    })
+  })
+};

src/api/sys/user.ts

@@ -31,7 +31,9 @@ enum Api {
   Appointment = "/user-center/position/GetPostTreeByOrgId",
   AppointPos = "/user-center/post/GetAtpPostTree",
   SelectGroupList = "/user-center/role/selectGroupList",
-  AddLoginRecord = "/base-center/syslog/AddLogin"
+  AddLoginRecord = "/base-center/syslog/AddLogin",
+  SaveRoleMenu = "/base-center/newmenu/saveRoleMenu",
+  GetRoleMenus = "/base-center/newmenu/getRoleMenus"
 }
 
 const client = {
@@ -178,6 +180,26 @@ export const roleList = (id) => {
   })
 }
 
+/**
+ * @description: 保存角色和菜单的关系
+ */
+export const saveRoleMenu = (params) => {
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.SaveRoleMenu, params })
+      .then((r) => resolve(r.datas && r.resp_code == 0)).catch(e => resolve())
+  })
+}
+
+/**
+ * @description: 获取角色和菜单的关系
+ */
+export const getRoleMenus = (params) => {
+  return new Promise<void>((resolve, reject) => {
+    defHttp.post({ url: Api.GetRoleMenus, params })
+      .then((r) => resolve(r.datas)).catch(e => resolve())
+  })
+}
+
 
 /**
  * @description: getUserInfo

src/api/system/system.ts

@@ -176,10 +176,7 @@ export const SaveOrUpdateUserInfo = (params) => {
   const formData = new FormData();
   Object.keys(params).forEach((key) => formData.append(key, params[key]))
   return new Promise<void>((resolve, reject) => {
-    defHttp.post({ url: Api.BaseUserUrl, params: formData }).then((res) => {
-      debugger
-      resolve(res.datas)
-    })
+    defHttp.post({ url: Api.BaseUserUrl, params: formData }).then((res) => resolve(res.datas))
   })
 }
 /**
@@ -190,10 +187,7 @@ export const deleteUser = (id) => {
   const formData = new FormData();
   formData.append("userid", id)
   return new Promise<void>((resolve, reject) => {
-    defHttp.post({ url: Api.DeleteUser, params: formData }).then((res) => {
-      debugger;
-      resolve(res.datas)
-    })
+    defHttp.post({ url: Api.DeleteUser, params: formData }).then((res) => resolve(res.datas))
   })
 }
 

src/views/systemAdmin/system/role/PowerDrawer.vue

@@ -0,0 +1,323 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="500px" @ok="handleSubmit">
+    <BasicForm @register="registerForm">
+      <template #menu>
+        <Spin :spinning="spinning">
+          <!-- <BasicTable @register="registerTable">
+            <template #metacolums="{ record }">
+              <a-checkbox-group @change="(e) => columnsCheck(record, e)" :value="getCheckValue(record.id)">
+                <Checkbox v-for="item in record.fieldMap" :value="item.propField" :key="item.propField">
+                  {{ item.propName }}
+                </Checkbox>
+              </a-checkbox-group>
+            </template>
+          </BasicTable> -->
+
+          <!-- <a-checkbox-group @change="(e) => columnsCheck(record, e)" :value="getCheckValue(record.id)">
+            <Checkbox v-for="item in record.fieldMap" :value="item.propField" :key="item.propField">
+              {{ item.propName }}
+            </Checkbox>
+          </a-checkbox-group> -->
+        </Spin>
+      </template>
+    </BasicForm>
+    <div class="selectPower">
+      <p>选择权限</p>
+      <a-tree checkable :tree-data="treeData2" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
+        v-model:checkedKeys="checkedKeys" :replaceFields="replaceFields">
+        <template #title0010><span style="color: #1890ff">sss</span></template>
+      </a-tree>
+    </div>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+import { defineComponent, ref, computed, nextTick, unref, watch } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { powerSchema, KeysTypeEnum, RoleMenuDictEnum, menuColumns } from './role.data';
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+import { BasicTree, TreeItem } from '/@/components/Tree';
+import { useMessage } from '/@/hooks/web/useMessage';
+const { t } = useI18n(); //加载国际化
+// 加载菜单数据
+import { getMenuList, menuList } from '/@/api/sys/menu';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { MenuRecord } from '/@/api/sys/model/menuModel';
+import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { Spin, message } from 'ant-design-vue';
+import { useUserStore } from '/@/store/modules/user';
+import { session } from '/@/utils/Memory';
+import { v4 as uuidv4 } from 'uuid';
+import { BasicTable, useTable } from '/@/components/Table';
+import { onMounted } from 'vue';
+import { saveRoleMenu, getRoleMenus } from '/@/api/sys/user';
+// import { nextTick } from 'process';
+
+
+
+type TreeData = MenuRecord & TreeItem;
+
+export default defineComponent({
+  name: 'RoleDrawer',
+  components: { BasicDrawer, BasicForm, BasicTree, Spin },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref<boolean>(true);
+    const treeData = ref<TreeData[]>([]);
+    const roleMenus = ref<string[]>([]);
+    const roleId = ref<string>('');
+    const checked = ref<string[]>([]); //需要选中的节点
+    const spinning = ref(false);
+    var nowRole = null;
+
+    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+      labelWidth: 100,
+      schemas: powerSchema,
+      showActionButtonGroup: false,
+    });
+
+    const transformName = (data: TreeData[]) => {
+      return data.map((item) => {
+        item.name = t(item.name);
+        if (item.children && item.children.length) {
+          item.children = transformName(item.children as unknown as TreeData[]);
+        }
+        return item;
+      });
+    };
+
+    const userStore = useUserStore();
+    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+      resetFields();
+      roleId.value = '';
+      // 在打开弹窗时清除所有选择的菜单
+      isUpdate.value = data.isUpdate;
+      const roleType = data?.record?.roleType || userStore.getRoleList.at(0);
+
+      try {
+        spinning.value = true;
+        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+
+        if (!unref(treeData).length) {
+          // 获取全部的菜单
+          const menuListModel = await getMenuList();
+          treeData.value = transformName(menuListModel as unknown as TreeData[]);
+        }
+
+        const keys = await getPermissionByRole(roleType);
+        const { keyType } = RoleMenuDictEnum[roleType];
+        treeData.value = getPermissionTreeData(unref(treeData) as unknown as TreeData[], keys, keyType);
+        // 更新
+        if (unref(isUpdate)) {
+          checked.value = [];
+          roleId.value = data.record.id;
+          nowRole = data.record;
+          setFieldsValue(data.record);
+        } else {
+        }
+      } catch (error) {
+        throw error;
+      } finally {
+        spinning.value = false;
+      }
+    });
+
+
+
+
+
+    const getTitle = '编辑角色权限';
+    async function handleSubmit() {
+      setDrawerProps({ confirmLoading: true });
+      const values = await validate()
+      saveRoleMenu({
+        menusId: menusIds.join(","),
+        systemId: "1",
+        roleId: values.groupid,
+      }).then(r => {
+        closeDrawer();
+        if (r) {
+          setDrawerProps({ confirmLoading: false });
+          message.success('权限添加成功！');
+        }
+      })
+
+    }
+
+    const getPermissionByRole = async (roleType: RoleEnum) => {
+      // try {
+      //   const { key } = RoleMenuDictEnum[roleType];
+      //   const res = await findDictItemByCode({ dictCode: key });
+      //   return res.map((item) => item.itemValue);
+      // } catch (error) { }
+      return [];
+    };
+
+    const getPermissionTreeData = (
+      data: MenuRecord[],
+      permissionKeys: string[],
+      keysType: KeysTypeEnum
+    ) => {
+      const setDisabled = (data: MenuRecord[], flag: boolean) => {
+        return data.map((item) => {
+          item.name = t(item.name);
+          if (item.children && item.children.length) {
+            item.children = setDisabled(item.children, flag);
+          }
+          return {
+            ...item,
+            disabled: flag,
+            icon: item.meta.icon,
+          } as TreeData;
+        });
+      };
+
+      const permissionCompare = (
+        data: MenuRecord[],
+        permissionKeys: string[],
+        keysType: KeysTypeEnum
+      ) => {
+        return data.map((item) => {
+          item.name = t(item.name);
+          const findFlag = permissionKeys.includes(item.permission);
+          if (findFlag) item.isDictCompareDisabled = true;
+          const disabledFlag = keysType === KeysTypeEnum.DISABLED ? findFlag : !findFlag;
+          item.disabled = disabledFlag;
+
+          if (item.isDictCompareDisabled && item.children && item.children.length) {
+            setDisabled(item.children, disabledFlag);
+          } else {
+            if (item.children && item.children.length) {
+              item.children = permissionCompare(item.children, permissionKeys, keysType);
+              item.disabled = item.children.every((temp) => temp.disabled);
+            }
+          }
+          return {
+            ...item,
+            icon: item.meta.icon,
+          } as TreeData;
+        });
+      };
+
+      const result = permissionCompare(data, permissionKeys, keysType).map((item) => {
+        if (item.children && item.children.length) {
+          const rootDisabledFlag = item.children.every((temp) => temp.disabled);
+          item.disabled = rootDisabledFlag;
+        }
+        return item;
+      });
+
+      return result;
+    };
+
+    const colcheckKeys = ref(new Map());
+    const visibleFieldList = ref(new Map());
+    function columnsCheck(record: Recordable, e: any) {
+      debugger
+      colcheckKeys.value.set(record.id, e);
+      const list = record.fieldMap?.map((item) => {
+        if (e.indexOf(item.propField) > -1) {
+          return { ...item, isVisible: '1' };
+        } else {
+          return { ...item, isVisible: '0' };
+        }
+      });
+      visibleFieldList.value.set(record.id, list);
+    }
+
+    function getCheckValue(id: string) {
+      const list = visibleFieldList.value.get(id);
+      if (list && list.length > 0) {
+        const templist = list.filter((item) => item.isVisible == '1');
+
+        return templist.map((item) => {
+          return item.propField;
+        });
+      }
+      return [];
+    }
+
+    const [registerTable, { setSelectedRowKeys, setTableData, getSelectRowKeys }] = useTable({
+      title: '权限分配',
+      api: getMenuList, //加载数据
+      columns: menuColumns, //加载列
+      isTreeTable: true,
+      pagination: false,
+      striped: false,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: false,
+      canResize: false,
+      rowKey: (record) => record.id,
+      rowSelection: {
+        type: 'checkbox',
+        // selectedRowKeys: roleMenus.value,
+      },
+    });
+
+
+    const treeData2 = ref([]);
+    const replaceFields = { title: 'name', key: 'id' }
+    const expandedKeys = ref<string[]>([]);
+    const selectedKeys = ref<string[]>([]);
+    const checkedKeys = ref<string[]>([]);
+    let menusIds = [];
+    watch(expandedKeys, () => menusIds = [...new Set(menusIds.concat(expandedKeys.value))]);
+    watch(selectedKeys, () => menusIds = [...new Set(menusIds.concat(selectedKeys.value))]);
+    watch(checkedKeys, () => menusIds = [...new Set(menusIds.concat(checkedKeys.value))]);
+
+    async function getRoleMenusWay() {
+      // const values = await validate()
+      getRoleMenus({
+        menusId: true,
+        systemId: '1',
+        roleIds: 'FB264E2A-BBEN-FB9T-9CEU-FF94AF30DB87',//values.groupid,
+      }).then(r => {
+        console.log(r);
+      })
+    }
+
+    onMounted(() => {
+      getRoleMenusWay()
+      menuList().then(e => treeData2.value = e)
+    })
+
+    return {
+      replaceFields,
+      treeData2,
+      expandedKeys,
+      selectedKeys,
+      checkedKeys,
+      registerTable,
+      getCheckValue,
+      columnsCheck,
+      spinning,
+      registerDrawer,
+      registerForm,
+      getTitle,
+      handleSubmit,
+      treeData,
+      roleMenus,
+    };
+  },
+});
+</script>
+
+<style scoped lang="less">
+:deep(.vben-basic-tree) {
+  width: 100% !important;
+}
+
+:deep(.is-unflod) {
+  display: none !important;
+}
+
+:deep(.is-flod) {
+  display: none !important;
+}
+
+.selectPower {
+  padding-left: 36px;
+}
+</style>

src/views/systemAdmin/system/role/index.vue

@@ -22,6 +22,11 @@
             icon: 'clarity:note-edit-line',
             onClick: handleEdit.bind(null, record),
           },
+          {
+            label: '权限设置',
+            icon: 'clarity:note-edit-line',
+            onClick: power.bind(null, record),
+          },
           {
             label: '删除',
             icon: 'ant-design:delete-outlined',
@@ -36,6 +41,7 @@
       </template>
     </BasicTable>
     <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+    <PowerDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
@@ -44,6 +50,9 @@ import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
 import { useDrawer } from '/@/components/Drawer';
 import RoleDrawer from './RoleDrawer.vue';
+import PowerDrawer from './PowerDrawer.vue';
+
+
 import { columns, searchFormSchema } from './role.data';
 import { RoleEnum } from '/@/enums/roleEnum';
 import { Authority } from '/@/components/Authority';
@@ -54,7 +63,7 @@ import { roleList } from '/@/api/sys/user';
 
 export default defineComponent({
   name: 'RoleManagement',
-  components: { BasicTable, RoleDrawer, TableAction, Authority, Switch, Popconfirm },
+  components: { BasicTable, RoleDrawer, PowerDrawer, TableAction, Authority, Switch, Popconfirm },
   setup() {
     const [registerDrawer, { openDrawer }] = useDrawer();
     function handleSuccess() {
@@ -108,6 +117,15 @@ export default defineComponent({
       console.log(record)
     }
 
+    function power(record: Recordable) {
+      openDrawer(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+
+
+
     const statusChange = async (checked, record) => {
       setProps({
         loading: true,
@@ -132,6 +150,7 @@ export default defineComponent({
     };
 
     return {
+      power,
       registerTable,
       registerDrawer,
       handleCreate,

src/views/systemAdmin/system/role/role.data.ts

@@ -88,3 +88,39 @@ export const formSchema: FormSchema[] = [
     },
   }
 ];
+
+
+export const powerSchema: FormSchema[] = [
+  {
+    field: 'groupName',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      disabled: true,
+      placeholder: '请输入角色名称',
+    },
+  },
+  {
+    field: 'groupid',
+    label: '角色ID',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      disabled: true,
+      placeholder: '请输入角色名称',
+    },
+  }
+];
+
+
+export const menuColumns: BasicColumn[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'meta.title',
+    width: 180,
+    align: 'left',
+  },
+];