优化角色管理tree

src/views/permission/admin/index.vue

@@ -50,12 +50,12 @@
     setup() {
       init();
       const { createMessage } = useMessage();
-      const { success } = createMessage;
+      const { success, error } = createMessage;
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
       const popupData = reactive<PopupData>({
         title: '添加',
-        treeData: [{}],
+        treeData: [],
       });
       const [registerTable] = useTable({
         title: '管理员管理',
@@ -102,17 +102,6 @@
           if (!params[k]) {
             delete params[k];
           }
-          //   else if (
-          //     k == 'id' ||
-          //     k == 'username' ||
-          //     k == 'nickname' ||
-          //     k == 'email' ||
-          //     k == 'logintime' ||
-          //     k == 'status'
-          //   ) {
-          //     params['op'][k] = params[k];
-          //     delete params[k];
-          //   }
         }
 
         console.log(params);
@@ -161,6 +150,10 @@
       }
 
       function addRole() {
+        if (!popupData.treeData[0]) {
+          error('没有访问权限!');
+          return;
+        }
         popupData.title = '添加';
         openAdd(true, {
           id: null,
@@ -173,6 +166,10 @@
       }
 
       function handleEdit(record: EditRecordRow) {
+        if (!popupData.treeData[0]) {
+          error('没有访问权限!');
+          return;
+        }
         currentEditKeyRef.value = record.id; // record.key
         popupData.title = '编辑';
         const data = getTableAction().getDataSource();

src/views/permission/group/index.vue

@@ -32,6 +32,7 @@
   interface PopupData {
     title: string;
     treeData: object[];
+    checkedKeys: string[] | number[];
   }
 
   export default defineComponent({
@@ -42,6 +43,7 @@
       const popupData = reactive<PopupData>({
         title: '添加',
         treeData: [{}],
+        checkedKeys: [],
       });
       const [registerTable] = useTable({
         title: '角色列表',
@@ -110,6 +112,7 @@
             record.pname = null;
           }
         });
+        popupData.checkedKeys = [2];
         openAdd(true, record);
       }
 
@@ -126,21 +129,22 @@
         console.log('------------save---------');
         const data = params.data;
         const closeModel = params.closeModal;
-        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---');
-        }
+        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---');
+        // }
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {

src/views/permission/group/popup.vue

@@ -10,17 +10,15 @@
         showLine
         defaultExpandAll
         :replace-fields="replaceFields"
+        v-model:checkedKeys="checkedKeys"
       >
-        <!-- v-model:expandedKeys="expandedKeys"
-        v-model:selectedKeys="selectedKeys"
-        v-model:checkedKeys="checkedKeys" -->
       </a-tree>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
   import { Tree } from 'ant-design-vue';
-  import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
+  import { defineComponent, PropType, reactive, ref, toRefs, watch } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas, fakeTree } from './data';
@@ -28,6 +26,7 @@
   interface PopupData {
     title: string;
     treeData: object[];
+    checkedKeys: string[];
   }
   interface Role {
     id: string | number;
@@ -46,11 +45,15 @@
         id: 0,
       });
       const popupData: PopupData = props.popupData;
+      console.log('======popupdata========1');
       console.log(popupData);
       const modelRef = ref({});
       const replaceFields = {
         key: 'id',
       };
+      watch(popupData, () => {
+        console.log('checkedKeys', popupData.checkedKeys);
+      });
 
       const [
         registerForm,
@@ -81,6 +84,8 @@
       function confirm() {
         console.log('确定');
         const data = getFieldsValue();
+        data.menus = popupData.checkedKeys;
+        data.menus2 = [...popupData.checkedKeys];
         if (role.id) {
           data.id = role.id;
         }
@@ -94,8 +99,8 @@
         // console.log(getFieldsValue())  // 表单数据
         // console.log('------ 菜单key ------')
         // console.log(popupData.checkedKeys)
-        const popupData = { closeModal, data };
-        emit('saveData', popupData);
+        const childerData = { closeModal, data };
+        emit('saveData', childerData);
       }
       return {
         register,

src/views/table/editTable/index.vue

@@ -12,13 +12,13 @@
       </template>
       <!-- <template #action="{ record, column }">
       </template> -->
-      <template #form-custom > custom-slot </template>
+      <template #form-custom> custom-slot </template>
 
       <template #toolbar>
-        <a-button type="primary" @click="addColumn" >
+        <a-button type="primary" @click="addColumn">
           {{ '添加' }}
         </a-button>
-        <a-button color="error" @click="deleteSelect" >
+        <a-button color="error" @click="deleteSelect">
           {{ '删除选中' }}
         </a-button>
       </template>
@@ -38,10 +38,9 @@
     BasicColumn,
     ActionItem,
     EditRecordRow,
-    TableActionType
+    TableActionType,
   } from '/@/components/Table';
-  import Model from './model.vue'
-
+  import Model from './model.vue';
 
   const columns: BasicColumn[] = [
     {
@@ -86,19 +85,19 @@
   ];
 
   interface ModelData {
-    title: string,
+    title: string;
   }
   export default defineComponent({
     components: { BasicTable, TableAction, TableImg, Model },
     setup() {
-       const modelData = reactive<ModelData>({
+      const modelData = reactive<ModelData>({
         title: '',
-      })
+      });
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
       const [registerTable] = useTable({
-        title: "基础示例",
-        titleHelpMessage: "温馨提醒",
+        title: '基础示例',
+        titleHelpMessage: '温馨提醒',
         rowSelection: { type: 'checkbox' },
         columns: columns,
         useSearchForm: true,
@@ -106,7 +105,11 @@
         // showTableSetting: true,
         formConfig: getFormConfig('hello'),
         // columns: [{title:'Id',dataIndex:'id',width:150},{title:'姓名',dataIndex:'name',width:200},{title:'地址',dataIndex:'addr',width:250}],
-        dataSource: [{id:1,name:'李白',addr:'新疆', age: 20},{id:2,name:'杜甫',addr:'北京', age: 32},{id:3,name:'贺知章',addr:'未知地点', age: 18}],
+        dataSource: [
+          { id: 1, name: '李白', addr: '新疆', age: 20 },
+          { id: 2, name: '杜甫', addr: '北京', age: 32 },
+          { id: 3, name: '贺知章', addr: '未知地点', age: 18 },
+        ],
         showIndexColumn: false,
         actionColumn: {
           width: 160,
@@ -118,10 +121,11 @@
       });
       const [addRegister, { openModal: openAdd }] = useModal();
       const rowClick = (e: any) => {
-        console.log(e)
-      }
+        console.log(e);
+      };
 
-      function getTableAction() { // 获取组件
+      function getTableAction() {
+        // 获取组件
         const tableAction = unref(tableRef);
         if (!tableAction) {
           throw new Error('tableAction is null');
@@ -129,15 +133,17 @@
         return tableAction;
       }
 
-       function getSelectRowList() { // 获取选中行
+      function getSelectRowList() {
+        // 获取选中行
         console.log(getTableAction().getSelectRows());
       }
-      function getSelectRowKeyList() { // 获取选中行的key --- id
+      function getSelectRowKeyList() {
+        // 获取选中行的key --- id
         console.log(getTableAction().getSelectRowKeys());
       }
 
       function addColumn() {
-        modelData.title = '添加'
+        modelData.title = '添加';
         openAdd(true, {
           name: '',
           age: '',
@@ -146,23 +152,23 @@
       }
 
       function handleSubmit() {
-        console.log('handleSubmit')
+        console.log('handleSubmit');
         // console.log(data)
       }
 
       function deleteSelect() {
-        console.log('删除选中行')
-        let data = getTableAction().getSelectRowKeys()
+        console.log('删除选中行');
+        let data = getTableAction().getSelectRowKeys();
         // console.log(getTableAction().getSelectRowKeys());
         data.map((item) => {
-          console.log(item)
-        })
+          console.log(item);
+        });
       }
 
       function handleEditEnd(record: EditRecordRow) {
-        console.log('编辑完成end')
-        console.log(record)
-        console.log('end----------------')
+        console.log('编辑完成end');
+        console.log(record);
+        console.log('end----------------');
       }
 
       // function handleEdit(record: EditRecordRow) {
@@ -170,7 +176,6 @@
       //   record.onEdit?.(true);
       // }
 
-
       function handleCancel(record: EditRecordRow) {
         currentEditKeyRef.value = '';
         record.onEdit?.(false, false);
@@ -178,24 +183,24 @@
 
       async function handleSave(record: EditRecordRow) {
         const pass = await record.onEdit?.(false, true);
-        console.log('------- 保存 ----------')
-        console.log(record)
-        console.log('------- 保存 ----------')
+        console.log('------- 保存 ----------');
+        console.log(record);
+        console.log('------- 保存 ----------');
         if (pass) {
           currentEditKeyRef.value = '';
         }
       }
       function handleEdit(record: EditRecordRow) {
-        console.log('编辑完成end')
-        console.log(record)
-        modelData.title = '编辑'
+        console.log('编辑完成end');
+        console.log(record);
+        modelData.title = '编辑';
         openAdd(true, record);
-        console.log('end----------------')
+        console.log('end----------------');
       }
       function handleDelete(record: Recordable) {
         console.log('点击了删除', record);
-        const data = getTableAction().getDataSource()
-        getTableAction().setTableData(data.filter(item => item.id !== record.id))
+        const data = getTableAction().getDataSource();
+        getTableAction().setTableData(data.filter((item) => item.id !== record.id));
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
@@ -249,8 +254,7 @@
         getSelectRowList,
         getSelectRowKeyList,
         addRegister,
-        handleSubmit
-
+        handleSubmit,
       };
     },
   });