菜单权限表格显示优化

src/components/Basic/src/BasicHelp.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
   import type { CSSProperties, PropType } from 'vue';
-  import { defineComponent, computed, unref, h } from 'vue';
+  import { defineComponent, computed, unref, } from 'vue';
 
   import { Tooltip } from 'ant-design-vue';
   import { InfoCircleOutlined } from '@ant-design/icons-vue';

src/views/permission/add.vue

@@ -1,28 +1,64 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" title="添加xxx">
+  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title">
     <BasicForm @register="registerForm" :model="model" />
     <!-- <MenuTree /> -->
     <div style="display: flex;">
       <p class="tree-label">菜单</p>
-      <Tree :treeData="treeData" :arr="arr" />
+      <a-tree
+      checkable
+      :tree-data="treeData"
+      v-model:expandedKeys="expandedKeys"
+      v-model:selectedKeys="selectedKeys"
+      v-model:checkedKeys="checkedKeys"
+      >
+        <!-- <template #title0010><span style="color: #1890ff;">sss</span></template> -->
+      </a-tree>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref,  } from 'vue';
+
+  import { Tree } from 'ant-design-vue';
+  import { defineComponent, PropType, reactive, ref, toRefs, watch } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { treeData } from './data';
-  import Tree from './tree.vue'
   import { adapt } from '/@/utils/adapt'
 
+  interface ModelData {
+    title: string,
+    treeData: object[],
+    checkedKeys: string[],
+    selectedKeys: string[],
+    expandedKeys: string[]
+  }
+  interface Role {
+    id: string|number
+  }
 
   export default defineComponent({
-    components: { BasicModal, BasicForm, Tree },
-    setup() {
+    components: { BasicModal, BasicForm, [Tree.name]: Tree },
+    props: {
+      modelData: {
+        type: Object as PropType<ModelData>,
+        default: {},
+      },
+    },
+    setup(props, { emit }) {
+      const role = reactive<Role>({
+        id:0
+      })
+      const modelData:ModelData = props.modelData
+
       const modelRef = ref({});
       const adaptWidth = adapt()
-      const arr:string[] = ['0-0-0-1', '0-0-0']
+      // const checkedKeys = ref<string[]>(['0-1']); // 勾选节点复选框
+      // const selectedKeys = ref<string[]>([]); // 点击选中节点,
+      // const expandedKeys = ref<string[]>(['0-1']); // 展开树节点
+      watch(modelData, () => {
+        console.log('expandedKeys', modelData.expandedKeys);
+        console.log('selectedKeys', modelData.selectedKeys);
+        console.log('checkedKeys', modelData.checkedKeys);
+      });
 
       const schemas: FormSchema[] = [
         {
@@ -83,11 +119,22 @@
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
+
+        role.id = data.id
       });
 
       function confirm() {
         console.log('确定')
-        console.log(getFieldsValue())  // 表单数据
+        const info = getFieldsValue()
+        info.id = role.id
+        const data = {
+          info,
+          MenuChecked: modelData.checkedKeys
+        }
+        // console.log(getFieldsValue())  // 表单数据
+        // console.log('------ 菜单key ------')
+        // console.log(modelData.checkedKeys)
+        emit('saveData', data)
         closeModal()  // 关闭弹窗
       }
       return {
@@ -97,8 +144,7 @@
         model: modelRef,
         confirm,
         adaptWidth,
-        treeData,
-        arr
+        ...toRefs(modelData)
       };
     },
   });

src/views/permission/data.ts

@@ -2,38 +2,33 @@ import { TreeItem } from '/@/components/Tree/index';
 
 export const treeData: TreeItem[] = [
   {
-    title: 'parent 1parent ',
-    key: '0-0',
+    title: 'Dashboard ',
+    key: '0-1',
     icon: 'home|svg',
     children: [
-      { title: 'leaf', key: '0-0-0' },
-      { title: 'leaf', key: '0-0-2' },
-      {
-        title: 'leaf',
-        key: '0-0-1',
-        children: [
-          { title: 'leaf', key: '0-0-0-0' },
-          { title: 'leafadsada', key: '0-0-0-1' },
-        ],
-      },
+      { title: '工作台', key: '0-1-1' },
+      { title: '分析页', key: '0-1-2' },
     ],
   },
   {
-    title: 'parent 2',
+    title: '表格',
     key: '1-1',
     icon: 'home|svg',
     children: [
-      { title: 'leaf', key: '1-1-0' },
-      { title: 'leaf', key: '1-1-1' },
+      { title: '表格', key: '1-1-1' },
+      { title: '表格模板', key: '1-1-2' },
     ],
   },
   {
-    title: 'parent 3',
-    key: '2-2',
+    title: '权限管理',
+    key: '2-1',
     icon: 'home|svg',
-    children: [
-      { title: 'leaf', key: '2-2-0' },
-      { title: 'leaf', key: '2-2-1' },
-    ],
+    children: [{ title: '详情', key: '2-1-1' }],
+  },
+  {
+    title: '测试',
+    key: '3-1',
+    icon: 'home|svg',
+    children: [{ title: '测试功能', key: '3-1-1' }],
   },
 ];

src/views/permission/index.vue

@@ -16,13 +16,15 @@
         </a-button>
       </template>
     </BasicTable>
-    <Add @register="addRegister" />
+    <Add @register="addRegister" :modelData="modelData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+  import { defineComponent, reactive, ref, unref } from 'vue';
   import Add from './add.vue'
-import { useModal } from '/@/components/Modal';
+  import { useModal } from '/@/components/Modal';
+  import { treeData } from './data';
+
   import {
     BasicTable,
     useTable,
@@ -33,6 +35,13 @@ import { useModal } from '/@/components/Modal';
     TableActionType
   } from '/@/components/Table';
 
+  interface ModelData {
+    title: string,
+    treeData: object[],
+    checkedKeys: string[],
+    selectedKeys: string[],
+    expandedKeys: string[]
+  }
 
   const columns: BasicColumn[] = [
     {
@@ -64,17 +73,28 @@ import { useModal } from '/@/components/Modal';
   ];
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Add },
+    components: { BasicTable, TableAction, Add, treeData },
     setup() {
+      console.log(treeData)
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
+      const modelData = reactive<ModelData>({
+        title: '添加',
+        treeData: treeData,
+        checkedKeys: ['0-1'],
+        selectedKeys: ['0-1'],
+        expandedKeys: ['0-1']
+      })
       const [registerTable] = useTable({
         title: "基础示例",
         titleHelpMessage: "温馨提醒",
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        dataSource: [{id:1,name:'vben',detail:'super admin', password: '123456'},{id:2,name:'test',detail:'test admin', password: '123456'}],
+        dataSource: [
+          { id: 1, name: 'vben', detail: 'super admin', password: '123456' },
+          { id:2,name:'test', detail: 'test admin', password: '123456' }
+        ],
         showIndexColumn: false,
         actionColumn: {
           width: 160,
@@ -105,38 +125,76 @@ import { useModal } from '/@/components/Modal';
 
       function addColumn() {
         console.log('添加')
+        modelData.title = '添加'
+        modelData.checkedKeys = []
+        modelData.selectedKeys = []
+        modelData.expandedKeys = []
         openAdd(true, {
-          // name: '',
-          // password: '',
-          // detail: '',
-          // tree: '',
+          id: 0,
+          name: '',
+          password: '',
+          detail: '',
           isUpdate: true,
         });
       }
 
-      function handleSubmit() {
-        console.log('handleSubmit')
-        // console.log(data)
-      }
-
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id;  // record.key
         console.log(record)
+        modelData.title = '编辑'
+        modelData.checkedKeys = ['0-1']
+        if (record.id === 2) {
+          modelData.checkedKeys = []
+        }
+        console.log(record.id)
+        const data = getTableAction().getDataSource()
+        data.map(item => {
+          if (item.id === record.id) {
+            record = item
+          }
+        })
         openAdd(true, {
-          name: record.name,
-          password: record.password,
-          detail: record.detail,
-          tree: 'none',
+          // id: record.id,
+          // name: record.name,
+          // password: record.password,
+          // detail: record.detail,
+          ...record
         });
       }
 
       function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
+        console.log(record)
         const data = getTableAction().getDataSource()
         console.log(data)
         getTableAction().setTableData(data.filter(item => item.id !== record.id))
       }
 
+      function saveData(data: any) {
+        const datas = getTableAction().getDataSource()
+        const info = reactive({...data.info})
+        if (modelData.title === "添加") {
+          datas.map(item => {
+            if (info.id === 0 || info.id === item.id) {
+              info.id = item.id + 1
+            }
+          })
+          datas.push(info)
+          getTableAction().setTableData(datas)
+        } else {
+          console.log('编辑')
+          // getTableAction().setTableData(datas.filter(item => item.id !== info.id))
+          let dataArr:object[] = []
+          datas.map(item => {
+            if (item.id === info.id) {
+              item = info
+            }
+            dataArr.push(item)
+          })
+          getTableAction().setTableData(dataArr)
+        }
+      }
+
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
         column
         return [
@@ -158,8 +216,8 @@ import { useModal } from '/@/components/Modal';
         ];
       }
       return {
-
-        // ...toRefs(state),
+        modelData,
+        treeData,
         tableRef,
         registerTable,
         rowClick,
@@ -170,8 +228,7 @@ import { useModal } from '/@/components/Modal';
         getSelectRowList,
         getSelectRowKeyList,
         addRegister,
-        handleSubmit
-
+        saveData
       };
     },
   });

src/views/permission/tree.vue

@@ -1,49 +0,0 @@
-<template>
-  <a-tree
-    checkable
-    :tree-data="treeData"
-    v-model:expandedKeys="expandedKeys"
-    v-model:selectedKeys="selectedKeys"
-    v-model:checkedKeys="checkedKeys"
-  >
-    <!-- <template #title0010><span style="color: #1890ff;">sss</span></template> -->
-  </a-tree>
-</template>
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
-import { Tree } from 'ant-design-vue';
-
-export default defineComponent({
-  components: { [Tree.name]: Tree },
-  props: {
-    treeData: Object,
-    arr: Array
-  },
-  setup(props) {
-    const { treeData } = props
-    const arr:any = props.arr
-    console.log(arr)
-    console.log(props)
-    const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']); // 展开树节点
-    const selectedKeys = ref<string[]>(['0-0-0', '0-0-0']); // 点击节点,
-    const checkedKeys = ref<string[]>(arr); // 勾选节点复选框
-    console.log(checkedKeys)
-    watch(expandedKeys, () => {
-      console.log('expandedKeys', expandedKeys);
-    });
-    watch(selectedKeys, () => {
-      console.log('selectedKeys', selectedKeys);
-    });
-    watch(checkedKeys, () => {
-      console.log('checkedKeys', checkedKeys);
-    });
-
-    return {
-      treeData,
-      expandedKeys,
-      selectedKeys,
-      checkedKeys,
-    };
-  },
-});
-</script>