权限更新

src/views/permission/menu/data.ts

@@ -33,8 +33,8 @@ export const formSchema: FormSchema[] = [
     componentProps: {
       replaceFields: {
         title: 'menuName',
-        key: 'id',
-        value: 'id',
+        key: 'key',
+        value: 'key',
       },
       getPopupContainer: () => document.body,
     },

src/views/permission/menu/index.vue

@@ -12,17 +12,17 @@
       <template #form-custom > custom-slot </template>
 
       <template #toolbar>
-        <a-button type="primary" @click="addColumn" >
+        <a-button type="primary" @click="addMenu" >
           {{ '新增菜单' }}
         </a-button>
       </template>
     </BasicTable>
-    <Add @register="addRegister"  @saveData="saveData" />
+    <Model @register="addRegister"  @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, unref } from 'vue';
-  import Add from './add.vue'
+  import Model from './model.vue'
   import { useModal } from '/@/components/Modal';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
@@ -39,7 +39,6 @@
   } from '/@/components/Table';
 
 
-
   const columns: BasicColumn[] = [
     {
       title: '菜单名称',
@@ -85,11 +84,12 @@
   ];
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Add,  },
+    components: { BasicTable, TableAction, Model,  },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
 
+
       const [registerTable] = useTable({
         title: "菜单列表",
         titleHelpMessage: "温馨提醒",
@@ -125,8 +125,7 @@
         console.log(getTableAction().getSelectRowKeys());
       }
 
-      function addColumn() {
-
+      function addMenu() {
         openAdd(true, {
           id: 0,
           menuName: '',
@@ -164,7 +163,33 @@
       }
 
       function saveData(data: any) {
-        console.log(data)
+        console.log('saveDate--------')
+        if (!data.key) {
+          console.log('添加菜单')
+          console.log(data)
+          return
+        }
+
+        const mapTree = org => {
+          const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+          if (org.key === data.key) {
+            org.menuName = data.menuName
+            org.icon = data.icon
+            org.status = data.status
+            org.detail = data.detail
+            return
+          }
+          if (haveChildren) {
+            org.children.map(item => mapTree(item))
+          }
+        }
+
+        const dataSource = getTableAction().getDataSource()
+
+        if (Array.isArray(dataSource)) {
+          dataSource.map(item => mapTree(item))
+        }
+        getTableAction().setTableData(dataSource)
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
@@ -191,14 +216,14 @@
         tableRef,
         registerTable,
         rowClick,
-        addColumn,
+        addMenu,
         handleEdit,
         createActions,
         getTableAction,
         getSelectRowList,
         getSelectRowKeyList,
         addRegister,
-        saveData
+        saveData,
       };
     },
   });

src/views/permission/menu/add.vue → src/views/permission/menu/model.vue

@@ -1,22 +1,29 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" title="菜单编辑" >
+  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="getTitle" >
     <BasicForm @register="registerForm" :model="model" />
   </BasicModal>
 </template>
 <script lang="ts">
 
-  import { defineComponent, ref, unref } from 'vue';
+  import { computed, defineComponent, reactive, ref, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { adapt } from '/@/utils/adapt'
   import { formSchema, dataSource } from './data'
 
+  interface Menu {
+    key: string|number
+  }
 
   export default defineComponent({
     components: { BasicModal, BasicForm,  },
 
-    setup() {
 
+    setup(_, { emit }) {
+
+      const menu = reactive<Menu>({
+        key: ''
+      })
 
       const modelRef = ref({});
       const adaptWidth = adapt()
@@ -54,27 +61,28 @@
             ...data
           });
         }
-
+        menu.key = data.key
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
         updateSchema({
           field: 'parentMenu',
-          componentProps: { dataSource },
+          componentProps: { treeData: dataSource },
         });
-
       });
 
-      function confirm() {
-        console.log('确定')
-        const info = getFieldsValue()
-        console.log(info)
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
 
+      function confirm() {
+        const data = getFieldsValue()
+        data.key = menu.key
+        emit('saveData', data)
         closeModal()  // 关闭弹窗
       }
       return {
         register,
         registerForm,
+        getTitle,
         model: modelRef,
         confirm,
         adaptWidth,

src/views/permission/role/index.vue

@@ -6,7 +6,7 @@
       rowKey="id"
     >
       <template #toolbar>
-        <a-button type="primary" @click="addColumn" >
+        <a-button type="primary" @click="addRole" >
           {{ '新增角色' }}
         </a-button>
       </template>
@@ -135,7 +135,7 @@
         console.log(getTableAction().getSelectRowKeys());
       }
 
-      function addColumn() {
+      function addRole() {
         console.log('添加')
         modelData.title = '添加'
         modelData.checkedKeys = []
@@ -234,7 +234,7 @@
         treeData,
         tableRef,
         registerTable,
-        addColumn,
+        addRole,
         handleEdit,
         createActions,
         getTableAction,