角色管理规则修改

src/api/sys/user.ts

@@ -27,6 +27,7 @@ enum Api {
   GroupById = '/group/',
   RuleUrl = '/rule',
   RuleById = '/rule/',
+  allowUrl = '/allow/', // 允许访问的规则 <pid>
 }
 
 /**
@@ -152,3 +153,9 @@ export function getRuleById(params: RuleIdParams) {
     method: 'GET',
   });
 }
+export function getAllowRule(params: RuleIdParams) {
+  return defHttp.request<CommonTreeModel>({
+    url: Api.allowUrl + params.id,
+    method: 'GET',
+  });
+}

src/views/permission/group/data.ts

@@ -6,113 +6,6 @@ import { adapt } from '/@/utils/adapt';
 
 const adaptWidth = adapt();
 
-export const fakeTree = [
-  {
-    id: 1,
-    title: 'Dashboard',
-    status: true,
-    icon: 'ion:layers-outline',
-    create_time: '2021-01-01',
-    detail: '',
-    children: [
-      {
-        id: 2,
-        title: '工作台',
-        status: true,
-        icon: 'ion:git-compare-outline',
-        create_time: '2021-01-01',
-        detail: '',
-        children: [
-          {
-            id: 8,
-            title: '天然光',
-            status: true,
-            icon: 'ion:git-compare-outline',
-            create_time: '2021-01-01',
-            detail: '',
-          },
-          {
-            id: 9,
-            title: '小苏打粉',
-            status: false,
-            icon: 'ion:tv-outline',
-            create_time: '2021-01-01',
-            detail: '',
-          },
-          {
-            id: 22,
-            title: '士大夫',
-            status: true,
-            icon: 'ion:git-compare-outline',
-            create_time: '2021-01-01',
-            detail: '',
-          },
-          {
-            id: 95,
-            title: '小苏打粉',
-            status: false,
-            icon: 'ion:tv-outline',
-            create_time: '2021-01-01',
-            detail: '',
-          },
-        ],
-      },
-      {
-        id: 3,
-        title: '分析页',
-        status: false,
-        icon: 'ion:tv-outline',
-        create_time: '2021-01-01',
-        detail: '',
-        children: [
-          {
-            id: 10,
-            title: '略略略',
-            status: true,
-            icon: 'ion:git-compare-outline',
-            create_time: '2021-01-01',
-            detail: '',
-          },
-          {
-            id: 19,
-            title: '嘻嘻嘻',
-            status: false,
-            icon: 'ion:tv-outline',
-            create_time: '2021-01-01',
-            detail: '',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 4,
-    title: '权限管理',
-    status: true,
-    icon: 'bx:bx-lock',
-    create_time: '2021-01-01',
-    detail: '',
-    children: [
-      {
-        id: 5,
-        title: '角色管理',
-        status: true,
-        icon: 'bx:bx-lock',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-      {
-        id: 6,
-        title: '菜单管理',
-        status: true,
-        icon: 'bx:bx-lock',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-    ],
-  },
-];
-
 export const columns: BasicColumn[] = [
   {
     title: 'ID',
@@ -174,15 +67,15 @@ export const schemas: FormSchema[] = [
       span: adaptWidth.elContainer,
     },
   },
-  {
-    field: 'rules',
-    component: 'Input',
-    label: '规则',
-    labelWidth: adaptWidth.labelWidth,
-    colProps: {
-      span: adaptWidth.elContainer,
-    },
-  },
+  //   {
+  //     field: 'rules',
+  //     component: 'Input',
+  //     label: '规则',
+  //     labelWidth: adaptWidth.labelWidth,
+  //     colProps: {
+  //       span: adaptWidth.elContainer,
+  //     },
+  //   },
   {
     field: 'status',
     label: '状态',

src/views/permission/group/index.vue

@@ -32,7 +32,6 @@
   interface PopupData {
     title: string;
     treeData: object[];
-    checkedKeys: string[] | number[];
   }
 
   export default defineComponent({
@@ -43,7 +42,6 @@
       const popupData = reactive<PopupData>({
         title: '添加',
         treeData: [{}],
-        checkedKeys: [],
       });
       const [registerTable] = useTable({
         title: '角色列表',
@@ -54,7 +52,6 @@
         clickToRowSelect: false, // 点击行不勾选
         api: getGroupTree,
         afterFetch: afterFetch,
-        // dataSource: formData,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -65,7 +62,7 @@
         showIndexColumn: false,
         bordered: true,
       });
-      const [addRegister, { openModal: openAdd }] = useModal();
+      const [addRegister, { openModal: openPopup }] = useModal();
 
       function afterFetch(result) {
         console.log(`result`, result);
@@ -93,7 +90,7 @@
       function addRole() {
         console.log('添加');
         popupData.title = '添加';
-        openAdd(true, {});
+        openPopup(true, {});
       }
 
       function handleEdit(record: EditRecordRow) {
@@ -106,14 +103,14 @@
           if (item.id === record.id) {
             record = item;
           }
+          if (record.pid === 0) {
+            record.pname = null;
+          }
           if (record.pid === item.id) {
             record.pname = item.name;
-          } else {
-            record.pname = null;
           }
         });
-        popupData.checkedKeys = [2];
-        openAdd(true, record);
+        openPopup(true, record);
       }
 
       async function handleDelete(record: Recordable) {
@@ -130,26 +127,31 @@
         const data = params.data;
         const closeModel = params.closeModal;
         console.log(`data`, data);
-        // if (!data.id) {
-        //   await addGroup(data).then((res) => {
-        //     console.log(res);
-        //     getTableAction().reload();
-        //     closeModel();
-        //   });
-        //   console.log('----------add---');
-        // } else {
-        //   await editGroup(data).then((res) => {
-        //     console.log(res);
-        //     getTableAction().reload();
-        //     closeModel();
-        //   });
-        //   console.log('----------edit---');
-        // }
+        if (!data.id) {
+          await addGroup(data).then((res) => {
+            console.log(res);
+            getTableAction().reload();
+            closeModel();
+          });
+          console.log('----------add---');
+        } else {
+          await editGroup(data).then((res) => {
+            console.log(res);
+            getTableAction().reload();
+            closeModel();
+          });
+          console.log('----------edit---');
+        }
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (false) {
-          console.log(column);
+        if (record.pid === 0) {
+          return [
+            {
+              label: '',
+              icon: '',
+            },
+          ];
         }
         return [
           {

src/views/permission/group/popup.vue

@@ -6,11 +6,11 @@
       <p class="tree-label">权限</p>
       <a-tree
         checkable
-        :tree-data="fakeTree"
+        :tree-data="allowRule"
         showLine
         defaultExpandAll
         :replace-fields="replaceFields"
-        v-model:checkedKeys="checkedKeys"
+        v-model:checkedKeys="rules"
       >
       </a-tree>
     </div>
@@ -18,18 +18,21 @@
 </template>
 <script lang="ts">
   import { Tree } from 'ant-design-vue';
-  import { defineComponent, PropType, reactive, ref, toRefs, watch } from 'vue';
+  import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  import { schemas, fakeTree } from './data';
+  import { schemas } from './data';
+  import { getAllowRule } from '/@/api/sys/user';
 
   interface PopupData {
     title: string;
     treeData: object[];
-    checkedKeys: string[];
   }
-  interface Role {
-    id: string | number;
+  interface ReactData {
+    id: number | string;
+    allowRule: object[];
+    initRules: number[];
+    rules: number[];
   }
 
   export default defineComponent({
@@ -41,8 +44,11 @@
       },
     },
     setup(props, { emit }) {
-      const role = reactive<Role>({
+      const reactData = reactive<ReactData>({
         id: 0,
+        allowRule: [],
+        initRules: [],
+        rules: [],
       });
       const popupData: PopupData = props.popupData;
       console.log('======popupdata========1');
@@ -51,9 +57,9 @@
       const replaceFields = {
         key: 'id',
       };
-      watch(popupData, () => {
-        console.log('checkedKeys', popupData.checkedKeys);
-      });
+      //   watch(reactData, () => {
+      //     console.log('rules', reactData.rules);
+      //   });
 
       const [
         registerForm,
@@ -72,33 +78,59 @@
         //   setFieldsValue(data);
         // }
         if (data.id) {
-          role.id = data.id;
+          reactData.id = data.id;
+        }
+        getRuleTree(data.pid);
+        if (data.rules) {
+          reactData.initRules = data.rules.split(',');
+          reactData.initRules = reactData.initRules.map((item) => parseInt(item));
         }
+        console.log(`reactData.rules`, reactData.rules);
+
         setFieldsValue(data);
         updateSchema({
           field: 'pname',
-          componentProps: { treeData: popupData.treeData },
+          componentProps: {
+            onChange: (e: ChangeEvent) => {
+              console.log('===========onChange1====ddd===');
+              console.log(e);
+              getRuleTree(e);
+            },
+            treeData: popupData.treeData,
+          },
         });
       });
 
+      async function getRuleTree(id) {
+        console.log(`id`, id);
+        if (!id) {
+          id = 1;
+        }
+        await getAllowRule({ id }).then((res) => {
+          console.log(res);
+          reactData.allowRule = res.tree;
+          if (reactData.initRules) {
+            reactData.rules = [];
+            reactData.allowRule.map((item) => {
+              if (reactData.initRules.includes(item.id)) {
+                reactData.rules.push(item.id);
+              }
+            });
+          }
+          console.log(` reactData.rules`, reactData.rules);
+        });
+      }
+
       function confirm() {
         console.log('确定');
         const data = getFieldsValue();
-        data.menus = popupData.checkedKeys;
-        data.menus2 = [...popupData.checkedKeys];
-        if (role.id) {
-          data.id = role.id;
+        data.rules = [...reactData.rules];
+        if (reactData.id) {
+          data.id = reactData.id;
         }
         data.pid = data.pname;
         // delete data.pname;
         console.log(`data`, data);
-        // const data = {
-        //   info,
-        // }
-        // console.log(data)
-        // console.log(getFieldsValue())  // 表单数据
-        // console.log('------ 菜单key ------')
-        // console.log(popupData.checkedKeys)
         const childerData = { closeModal, data };
         emit('saveData', childerData);
       }
@@ -109,8 +141,8 @@
         replaceFields,
         model: modelRef,
         confirm,
-        fakeTree,
         ...toRefs(popupData),
+        ...toRefs(reactData),
       };
     },
   });