优化格式

src/views/permission/admin/index.vue

@@ -7,9 +7,7 @@
       :pagination="{ pageSize: 2, defaultPageSize: 2, showSizeChanger: false }"
     >
       <template #toolbar>
-        <a-button type="primary" @click="addRole" >
-            添加
-        </a-button>
+        <a-button type="primary" @click="addRole"> 添加 </a-button>
       </template>
       <template #action="{ record }">
         <TableAction :actions="createActions(record)" />
@@ -20,21 +18,29 @@
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Popup from './popup.vue'
+  import Popup from './popup.vue';
   import { useModal } from '/@/components/Modal';
-//   import { getAllMenuList } from '/@/api/sys/menu';
+  //   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
-  import { getUserList, addUser, editUser,deleteUser } from '/@/api/sys/user';
-  import {BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow, TableActionType } from '/@/components/Table';
+  import { getUserList, addUser, editUser, deleteUser } from '/@/api/sys/user';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
 
-//   interface ModelData {
-//     title: string,
-//     treeData: object[],
-//     checkedKeys: string[] | number[],
-//     selectedKeys: string[] | number[],
-//     expandedKeys: string[] | number[]
-//   }
+  //   interface ModelData {
+  //     title: string,
+  //     treeData: object[],
+  //     checkedKeys: string[] | number[],
+  //     selectedKeys: string[] | number[],
+  //     expandedKeys: string[] | number[]
+  //   }
 
   const columns: BasicColumn[] = [
     {
@@ -76,26 +82,26 @@
       title: '最后登录',
       dataIndex: 'time',
       width: 150,
-    }
+    },
   ];
   const formData = [
-      {
-          id: 1,
-          username: 'test1',
-          nickname: '用户1',
-          email: 'test1@163.com',
-          status: 0,
-          time: '2020-10-20'
-      },
-      {
-          id: 2,
-          username: 'test2',
-          nickname: '用户2',
-          email: 'test2@163.com',
-          status: 1,
-          time: '2020-10-20'
-      },
-  ]
+    {
+      id: 1,
+      username: 'test1',
+      nickname: '用户1',
+      email: 'test1@163.com',
+      status: 0,
+      time: '2020-10-20',
+    },
+    {
+      id: 2,
+      username: 'test2',
+      nickname: '用户2',
+      email: 'test2@163.com',
+      status: 1,
+      time: '2020-10-20',
+    },
+  ];
 
   export default defineComponent({
     components: { BasicTable, TableAction, Popup },
@@ -105,11 +111,12 @@
       const modelData = reactive({
         title: '添加',
         treeData: [],
-      })
-      getTreeData()
+      });
+      getTreeData();
       const [registerTable] = useTable({
-        title: "角色组",
-        titleHelpMessage: "角色组可以有多个,角色有上下级层级关系,如果子角色有角色组和管理员的权限则可以派生属于自己组别的下级角色组或管理员",
+        title: '角色组',
+        titleHelpMessage:
+          '角色组可以有多个,角色有上下级层级关系,如果子角色有角色组和管理员的权限则可以派生属于自己组别的下级角色组或管理员',
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
@@ -127,7 +134,8 @@
       });
       const [addRegister, { openModal: openAdd }] = useModal();
 
-      function getTableAction() { // 获取组件
+      function getTableAction() {
+        // 获取组件
         const tableAction = unref(tableRef);
         if (!tableAction) {
           throw new Error('tableAction is null');
@@ -135,44 +143,46 @@
         return tableAction;
       }
 
-       function getSelectRowList() { // 获取选中行
+      function getSelectRowList() {
+        // 获取选中行
         console.log(getTableAction().getSelectRows());
       }
-      function getSelectRowKeyList() { // 获取选中行的key --- id
+      function getSelectRowKeyList() {
+        // 获取选中行的key --- id
         console.log(getTableAction().getSelectRowKeys());
       }
 
       function addRole() {
-        modelData.title = '添加'
+        modelData.title = '添加';
         openAdd(true, {
           id: null,
           username: '',
           nickname: '',
           email: '',
-          status: 1
+          status: 1,
         });
       }
 
       function handleEdit(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id;  // record.key
-        modelData.title = '编辑'
+        currentEditKeyRef.value = record.id; // record.key
+        modelData.title = '编辑';
 
-        const data = getTableAction().getDataSource()
-        data.map(item => {
+        const data = getTableAction().getDataSource();
+        data.map((item) => {
           if (item.id === record.id) {
-            record = item
+            record = item;
           }
-        })
+        });
         openAdd(true, record);
       }
 
       async function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
-        console.log(record)
-        await deleteUser({id:record.id}).then(res => {
-          console.log(res)
-          getTableAction().reload()
-        })
+        console.log(record);
+        await deleteUser({ id: record.id }).then((res) => {
+          console.log(res);
+          getTableAction().reload();
+        });
         // const data = getTableAction().getDataSource()
         // console.log(data)
         // getTableAction().setTableData(data.filter(item => item.id !== record.id))
@@ -181,31 +191,30 @@
       async function saveData(data: any) {
         // const datas = getTableAction().getDataSource()
         // const info = reactive({...data.info})
-        console.log('------------save---------')
-        console.log(data)
-        if(!data.id) {
-          await addUser(data).then(res => {
-            console.log(res)
-            getTableAction().reload()
-          })
-          console.log('----------add---')
-        }else {
-          await editUser(data).then(res => {
-            console.log(res)
-            getTableAction().reload()
-          })
-          console.log('----------edit---')
-
+        console.log('------------save---------');
+        console.log(data);
+        if (!data.id) {
+          await addUser(data).then((res) => {
+            console.log(res);
+            getTableAction().reload();
+          });
+          console.log('----------add---');
+        } else {
+          await editUser(data).then((res) => {
+            console.log(res);
+            getTableAction().reload();
+          });
+          console.log('----------edit---');
         }
       }
       async function getTreeData() {
         // let treeData = await getAllMenuList()
         // modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
 
-        console.log(modelData.treeData)
+        console.log(modelData.treeData);
       }
 
-      function createActions(record: EditRecordRow,): ActionItem[] {
+      function createActions(record: EditRecordRow): ActionItem[] {
         return [
           {
             label: '编辑',
@@ -237,7 +246,7 @@
         addRegister,
         saveData,
         getUserList,
-        getTreeData
+        getTreeData,
       };
     },
   });

src/views/permission/admin/popup.vue

@@ -5,18 +5,17 @@
   </BasicModal>
 </template>
 <script lang="ts">
-
   import { Tree } from 'ant-design-vue';
   import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { adapt } from '/@/utils/adapt'
+  import { adapt } from '/@/utils/adapt';
 
   interface ModelData {
-    title: string,
+    title: string;
   }
   interface Role {
-    id: string|number
+    id: string | number;
   }
 
   export default defineComponent({
@@ -29,11 +28,11 @@
     },
     setup(props, { emit }) {
       const role = reactive<Role>({
-        id:0
-      })
-      const modelData:ModelData = props.modelData
+        id: 0,
+      });
+      const modelData: ModelData = props.modelData;
       const modelRef = ref({});
-      const adaptWidth = adapt()
+      const adaptWidth = adapt();
 
       const schemas: FormSchema[] = [
         {
@@ -43,7 +42,7 @@
           labelWidth: adaptWidth.labelWidth,
           colProps: {
             span: adaptWidth.elContainer,
-          }
+          },
         },
         {
           field: 'nickname',
@@ -52,7 +51,7 @@
           labelWidth: adaptWidth.labelWidth,
           colProps: {
             span: adaptWidth.elContainer,
-          }
+          },
         },
         {
           field: 'email',
@@ -103,7 +102,7 @@
           span: 24,
         },
       });
-      const [register, { closeModal } ] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner((data) => {
         // 方式1
         // setFieldsValue({
         //   field2: data.data,
@@ -118,23 +117,23 @@
         //   menus: data.menus
         //   };
 
-        modelRef.value = data
+        modelRef.value = data;
 
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
 
-        role.id = data.id
+        role.id = data.id;
       });
 
       function confirm() {
-        console.log('确定')
-        const data = getFieldsValue()
-        if(role.id) {
-          data.id = role.id
+        console.log('确定');
+        const data = getFieldsValue();
+        if (role.id) {
+          data.id = role.id;
         }
-        emit('saveData', data)
-        closeModal()  // 关闭弹窗
+        emit('saveData', data);
+        closeModal(); // 关闭弹窗
       }
       return {
         register,
@@ -143,34 +142,34 @@
         model: modelRef,
         confirm,
         adaptWidth,
-        ...toRefs(modelData)
+        ...toRefs(modelData),
       };
     },
   });
 </script>
-<style lang='less'>
-.ant-form-item-label {
-  text-align: center !important;
-}
-
-.tree-label {
-  width: 20.6%;
-  margin-top: 8px;
-  margin-bottom: 1em;
-  text-align: center;
-}
-
-@media (max-width: 639px) {
+<style lang="less">
   .ant-form-item-label {
-  line-height: 2.5715 !important;
-  text-align: center !important;
- }
+    text-align: center !important;
+  }
 
   .tree-label {
-  width: 33%;
-  margin-top: 8px;
-  margin-bottom: 1em;
-  text-align: center;
-}
-}
+    width: 20.6%;
+    margin-top: 8px;
+    margin-bottom: 1em;
+    text-align: center;
+  }
+
+  @media (max-width: 639px) {
+    .ant-form-item-label {
+      line-height: 2.5715 !important;
+      text-align: center !important;
+    }
+
+    .tree-label {
+      width: 33%;
+      margin-top: 8px;
+      margin-bottom: 1em;
+      text-align: center;
+    }
+  }
 </style>

src/views/permission/admin_log/index.vue

@@ -7,9 +7,7 @@
       :pagination="{ pageSize: 2, defaultPageSize: 2, showSizeChanger: false }"
     >
       <template #toolbar>
-        <a-button type="danger" >
-            删除
-        </a-button>
+        <a-button type="danger"> 删除 </a-button>
       </template>
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
@@ -20,18 +18,26 @@
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Popup from './popup.vue'
+  import Popup from './popup.vue';
   import { useModal } from '/@/components/Modal';
   import { getUserList, deleteUser } from '/@/api/sys/user';
-  import {BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow, TableActionType } from '/@/components/Table';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
 
-//   interface ModelData {
-//     title: string,
-//     treeData: object[],
-//     checkedKeys: string[] | number[],
-//     selectedKeys: string[] | number[],
-//     expandedKeys: string[] | number[]
-//   }
+  //   interface ModelData {
+  //     title: string,
+  //     treeData: object[],
+  //     checkedKeys: string[] | number[],
+  //     selectedKeys: string[] | number[],
+  //     expandedKeys: string[] | number[]
+  //   }
 
   const columns: BasicColumn[] = [
     {
@@ -71,28 +77,28 @@
       title: '创建时间',
       dataIndex: 'time',
       width: 150,
-    }
+    },
   ];
   const formData = [
-      {
-          id: 1,
-          username: 'test1',
-          title: '日志1',
-          url: 'http://localhost:3100/#/permission/admin',
-          ip: '0.0.0.0',
-          browser: 'Mozilla/5.0',
-          time: '2020-10-20'
-      },
-      {
-          id: 2,
-          username: 'test2',
-          title: '日志2',
-          url: 'http://localhost:3100/#/permission/admin',
-          ip: '0.0.0.0',
-          browser: 'Mozilla/5.0',
-          time: '2020-10-21'
-      },
-  ]
+    {
+      id: 1,
+      username: 'test1',
+      title: '日志1',
+      url: 'http://localhost:3100/#/permission/admin',
+      ip: '0.0.0.0',
+      browser: 'Mozilla/5.0',
+      time: '2020-10-20',
+    },
+    {
+      id: 2,
+      username: 'test2',
+      title: '日志2',
+      url: 'http://localhost:3100/#/permission/admin',
+      ip: '0.0.0.0',
+      browser: 'Mozilla/5.0',
+      time: '2020-10-21',
+    },
+  ];
 
   export default defineComponent({
     components: { BasicTable, TableAction, Popup },
@@ -101,10 +107,10 @@
       const currentEditKeyRef = ref('');
       const modelData = reactive({
         title: '详情',
-      })
+      });
       const [registerTable] = useTable({
-        title: "管理员日志",
-        titleHelpMessage: "管理员可以查看自己所拥有的权限的管理员日志",
+        title: '管理员日志',
+        titleHelpMessage: '管理员可以查看自己所拥有的权限的管理员日志',
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
@@ -122,7 +128,8 @@
       });
       const [addRegister, { openModal: openAdd }] = useModal();
 
-      function getTableAction() { // 获取组件
+      function getTableAction() {
+        // 获取组件
         const tableAction = unref(tableRef);
         if (!tableAction) {
           throw new Error('tableAction is null');
@@ -130,34 +137,34 @@
         return tableAction;
       }
 
-       function getSelectRowList() { // 获取选中行
+      function getSelectRowList() {
+        // 获取选中行
         console.log(getTableAction().getSelectRows());
       }
-      function getSelectRowKeyList() { // 获取选中行的key --- id
+      function getSelectRowKeyList() {
+        // 获取选中行的key --- id
         console.log(getTableAction().getSelectRowKeys());
       }
 
-
-
       function handleDetail(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id;  // record.key
+        currentEditKeyRef.value = record.id; // record.key
 
-        const data = getTableAction().getDataSource()
-        data.map(item => {
+        const data = getTableAction().getDataSource();
+        data.map((item) => {
           if (item.id === record.id) {
-            record = item
+            record = item;
           }
-        })
+        });
         openAdd(true, record);
       }
 
       async function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
-        console.log(record)
-        await deleteUser({id:record.id}).then(res => {
-          console.log(res)
-          getTableAction().reload()
-        })
+        console.log(record);
+        await deleteUser({ id: record.id }).then((res) => {
+          console.log(res);
+          getTableAction().reload();
+        });
         // const data = getTableAction().getDataSource()
         // console.log(data)
         // getTableAction().setTableData(data.filter(item => item.id !== record.id))
@@ -165,7 +172,7 @@
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
         if (false) {
-          console.log(column)
+          console.log(column);
         }
         return [
           {

src/views/permission/admin_log/popup.vue

@@ -96,15 +96,20 @@
 
 @media (max-width: 639px) {
   .ant-form-item-label {
-  line-height: 2.5715 !important;
-  text-align: center !important;
+    line-height: 2.5715 !important;
+    text-align: center !important;
  }
 
   .tree-label {
-  width: 33%;
-  margin-top: 8px;
-  margin-bottom: 1em;
-  text-align: center;
+    width: 33%;
+    margin-top: 8px;
+    margin-bottom: 1em;
+    text-align: center;
+}
+
+.ant-descriptions-item-content {
+  font-size: 12px !important;
+
 }
 }
 </style>

src/views/permission/group/data.ts

@@ -0,0 +1,54 @@
+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: '',
+      },
+      {
+        id: 3,
+        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: '',
+      },
+    ],
+  },
+];

src/views/permission/group/index.vue

@@ -77,7 +77,7 @@
   const formData = [
       {
           id: 1,
-          parent: 0,
+          parent: null,
           uname: '超级管理员',
           status: 1
       },
@@ -146,12 +146,7 @@
       function addRole() {
         console.log('添加')
         modelData.title = '添加'
-        openAdd(true, {
-          id: null,
-          parent: null,
-          uname: '',
-          status: 1
-        });
+        openAdd(true, {});
       }
 
       function handleEdit(record: EditRecordRow) {

src/views/permission/group/popup.vue

@@ -6,7 +6,7 @@
       <p class="tree-label">权限</p>
       <a-tree
       checkable
-      :tree-data="treeData"
+      :tree-data="fakeTree"
       v-model:expandedKeys="expandedKeys"
       v-model:selectedKeys="selectedKeys"
       v-model:checkedKeys="checkedKeys"
@@ -23,6 +23,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { adapt } from '/@/utils/adapt'
+  import { fakeTree } from './data'
 
   interface ModelData {
     title: string,
@@ -64,7 +65,7 @@
             component: 'TreeSelect',
             componentProps: {
             replaceFields: {
-                title: 'menuName',
+                title: 'title',
                 key: 'id',
                 value: 'id',
             },
@@ -88,6 +89,7 @@
           field: 'status',
           label: '状态',
           component: 'RadioButtonGroup',
+          defaultValue: 1,
           componentProps: {
             options: [
               { label: '启用', value: 1 },
@@ -101,42 +103,24 @@
         },
       ];
 
-      const [
-        registerForm,
-        {
-          getFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
+      const [registerForm, { getFieldsValue, updateSchema, setFieldsValue, resetFields/* validate*/ }] = useForm({
+        labelWidth: 100,
         schemas,
         showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
+        actionColOptions: { span: 24 },
       });
-      const [register, { closeModal } ] = useModalInner((data) => {
-        // 方式1
-        // setFieldsValue({
-        //   field2: data.data,
-        //   field1: data.info,
-        // });
-
-        // 方式2
-        modelRef.value = {
-          username: data.username,
-          nickname: data.nickname,
-          password: data.password,
-          status: data.status,
-          detail: data.detail,
-          menus: data.menus
-          };
-
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
-
-        role.id = data.id
+      const [register, { closeModal } ] = useModalInner(data => {
+        console.log('-------------------data---------------')
+        console.log(data)
+        resetFields()
+        // if (unref(isUpdate)) {
+        //   setFieldsValue(data);
+        // }
+        setFieldsValue(data);
+        updateSchema({
+          field: 'parent',
+          componentProps: { treeData: fakeTree },
+        });
       });
 
       function confirm() {
@@ -158,6 +142,7 @@
       return {
         register,
         schemas,
+        fakeTree,
         registerForm,
         model: modelRef,
         confirm,

src/views/permission/menu/data.ts

@@ -39,19 +39,11 @@ export const formSchema: FormSchema[] = [
       getPopupContainer: () => document.body,
     },
   },
-
-  // {
-  //   field: 'orderNo',
-  //   label: '排序',
-  //   component: 'InputNumber',
-  //   required: true,
-  // },
   {
     field: 'icon',
     label: '图标',
     component: 'IconPicker',
     required: true,
-    // show: ({ values }) => !isButton(values.type),
   },
 
   {
@@ -59,39 +51,28 @@ export const formSchema: FormSchema[] = [
     label: '路由地址',
     component: 'Input',
     required: true,
-    // show: ({ values }) => !isButton(values.type),
   },
   {
     field: 'name',
     label: '路径名',
     component: 'Input',
-    // show: ({ values }) => !isButton(values.type),
   },
   {
     field: 'redirect',
     label: '重定向',
     component: 'Input',
-    // show: ({ values }) => !isButton(values.type),
   },
   {
     field: 'component',
     label: '组件路径',
     component: 'Input',
     required: true,
-    // show: ({ values }) => isMenu(values.type),
   },
   {
     field: 'detail',
     label: '详情',
     component: 'Input',
-    // show: ({ values }) => isMenu(values.type),
   },
-  // {
-  //   field: 'permission',
-  //   label: '权限标识',
-  //   component: 'Input',
-  //   // show: ({ values }) => !isDir(values.type),
-  // },
   {
     field: 'status',
     label: '状态',

src/views/permission/menu/index.vue

@@ -1,28 +1,23 @@
 <template>
   <div class="p-4">
-    <BasicTable
-      ref="tableRef"
-      @register="registerTable"
-      rowKey="id"
-      isTreeTable
-    >
+    <BasicTable ref="tableRef" @register="registerTable" rowKey="id" isTreeTable>
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
       </template>
-      <template #form-custom > custom-slot </template>
+      <template #form-custom> custom-slot </template>
 
       <template #toolbar>
-        <a-button type="primary" @click="addMenuModel" >
+        <a-button type="primary" @click="addMenuModel">
           {{ '新增菜单' }}
         </a-button>
       </template>
     </BasicTable>
-    <Model @register="addRegister"  @saveData="saveData" />
+    <Model @register="addRegister" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, unref } from 'vue';
-  import Model from './model.vue'
+  import Model from './model.vue';
   import { useModal } from '/@/components/Modal';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
@@ -35,10 +30,9 @@
     BasicColumn,
     ActionItem,
     EditRecordRow,
-    TableActionType
+    TableActionType,
   } from '/@/components/Table';
 
-
   const columns: BasicColumn[] = [
     {
       title: '菜单名称',
@@ -85,7 +79,7 @@
         return h(Tag, { color: color }, () => text);
       },
     },
-     {
+    {
       title: '详情',
       dataIndex: 'detail',
       width: 200,
@@ -93,17 +87,16 @@
   ];
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Model,  },
+    components: { BasicTable, TableAction, Model },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
 
-
       const [registerTable] = useTable({
-        title: "菜单列表",
-        titleHelpMessage: "温馨提醒",
+        title: '菜单列表',
+        titleHelpMessage: '温馨提醒',
         columns: columns,
-        api:getAllMenuList,
+        api: getAllMenuList,
         bordered: true,
         showIndexColumn: false,
         actionColumn: {
@@ -116,10 +109,11 @@
       });
       const [addRegister, { openModal: openAddModel }] = 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');
@@ -127,10 +121,12 @@
         return tableAction;
       }
 
-       function getSelectRowList() { // 获取选中行
+      function getSelectRowList() {
+        // 获取选中行
         console.log(getTableAction().getSelectRows());
       }
-      function getSelectRowKeyList() { // 获取选中行的key --- id
+      function getSelectRowKeyList() {
+        // 获取选中行的key --- id
         console.log(getTableAction().getSelectRowKeys());
       }
 
@@ -149,23 +145,23 @@
           treeData: getTableAction().getDataSource(),
         });
       }
-      let selectData = {}
-      function updataSelectData(data,id) {
-          data.map(item => {
-            if (item.id === id) {
-              selectData = item
-            }else {
-              if(item.children) {
-                updataSelectData(item.children,id)
-              }
+      let selectData = {};
+      function updataSelectData(data, id) {
+        data.map((item) => {
+          if (item.id === id) {
+            selectData = item;
+          } else {
+            if (item.children) {
+              updataSelectData(item.children, id);
+            }
           }
-        })
+        });
       }
 
       function handleEdit(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id;  // record.key
-        const data = getTableAction().getDataSource()
-        updataSelectData(data,record.id)
+        currentEditKeyRef.value = record.id; // record.key
+        const data = getTableAction().getDataSource();
+        updataSelectData(data, record.id);
         openAddModel(true, {
           ...selectData,
           treeData: data,
@@ -176,29 +172,30 @@
       async function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
 
-        await deleteMenu({id:record.id}).then(res => {
-          console.log(res)
-          getTableAction().reload()
-        })
+        await deleteMenu({ id: record.id }).then((res) => {
+          console.log(res);
+          getTableAction().reload();
+        });
       }
 
       async function saveData(data: any) {
-        if (!data.id) { //判断id
-          console.log('-----------添加菜单----------')
-          await addMenu(data).then(res => {
-            console.log(res)
-          })
-        }else {
-            console.log('---------编辑菜单----------')
-           await editMenu(data).then(res => {
-            console.log(res)
-          })
+        if (!data.id) {
+          //判断id
+          console.log('-----------添加菜单----------');
+          await addMenu(data).then((res) => {
+            console.log(res);
+          });
+        } else {
+          console.log('---------编辑菜单----------');
+          await editMenu(data).then((res) => {
+            console.log(res);
+          });
         }
-        getTableAction().reload()
+        getTableAction().reload();
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        column
+        column;
         return [
           {
             label: '编辑',

src/views/permission/menu/model.vue

@@ -36,7 +36,7 @@
         showActionButtonGroup: false,
         actionColOptions: { span: 24 },
       });
-      const [register, { closeModal } ] = useModalInner((data) => {
+      const [register, { closeModal } ] = useModalInner(data => {
         console.log('-------------------data---------------')
         console.log(data)
         resetFields()

src/views/permission/role/add.vue

@@ -2,14 +2,14 @@
   <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title">
     <BasicForm @register="registerForm" :model="model" />
     <!-- <MenuTree /> -->
-    <div style="display: flex;">
+    <div class="tree-wrap">
       <p class="tree-label">菜单</p>
       <a-tree
-      checkable
-      :tree-data="treeData"
-      v-model:expandedKeys="expandedKeys"
-      v-model:selectedKeys="selectedKeys"
-      v-model:checkedKeys="checkedKeys"
+        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>
@@ -17,22 +17,21 @@
   </BasicModal>
 </template>
 <script lang="ts">
-
   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 { adapt } from '/@/utils/adapt'
+  import { adapt } from '/@/utils/adapt';
 
   interface ModelData {
-    title: string,
-    treeData: object[],
-    checkedKeys: string[],
-    selectedKeys: string[],
-    expandedKeys: string[]
+    title: string;
+    treeData: object[];
+    checkedKeys: string[];
+    selectedKeys: string[];
+    expandedKeys: string[];
   }
   interface Role {
-    id: string|number
+    id: string | number;
   }
 
   export default defineComponent({
@@ -45,12 +44,12 @@
     },
     setup(props, { emit }) {
       const role = reactive<Role>({
-        id:0
-      })
-      const modelData:ModelData = props.modelData
-      console.log(modelData)
+        id: 0,
+      });
+      const modelData: ModelData = props.modelData;
+      console.log(modelData);
       const modelRef = ref({});
-      const adaptWidth = adapt()
+      const adaptWidth = adapt();
       watch(modelData, () => {
         console.log('expandedKeys', modelData.expandedKeys);
         console.log('selectedKeys', modelData.selectedKeys);
@@ -65,7 +64,7 @@
           labelWidth: adaptWidth.labelWidth,
           colProps: {
             span: adaptWidth.elContainer,
-          }
+          },
         },
         {
           field: 'nickname',
@@ -74,7 +73,7 @@
           labelWidth: adaptWidth.labelWidth,
           colProps: {
             span: adaptWidth.elContainer,
-          }
+          },
         },
         {
           field: 'password',
@@ -126,7 +125,7 @@
           span: 24,
         },
       });
-      const [register, { closeModal } ] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner((data) => {
         // 方式1
         // setFieldsValue({
         //   field2: data.data,
@@ -140,32 +139,32 @@
           password: data.password,
           status: data.status,
           detail: data.detail,
-          menus: data.menus
-          };
+          menus: data.menus,
+        };
 
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
 
-        role.id = data.id
+        role.id = data.id;
       });
 
       function confirm() {
-        console.log('确定')
-        const data = getFieldsValue()
-        if(role.id) {
-          data.id = role.id
+        console.log('确定');
+        const data = getFieldsValue();
+        if (role.id) {
+          data.id = role.id;
         }
         // const data = {
         //   info,
-          data.menus = [...modelData.checkedKeys]
+        data.menus = [...modelData.checkedKeys];
         // }
         // console.log(data)
         // console.log(getFieldsValue())  // 表单数据
         // console.log('------ 菜单key ------')
         // console.log(modelData.checkedKeys)
-        emit('saveData', data)
-        closeModal()  // 关闭弹窗
+        emit('saveData', data);
+        closeModal(); // 关闭弹窗
       }
       return {
         register,
@@ -174,34 +173,38 @@
         model: modelRef,
         confirm,
         adaptWidth,
-        ...toRefs(modelData)
+        ...toRefs(modelData),
       };
     },
   });
 </script>
-<style lang='less'>
-.ant-form-item-label {
-  text-align: center !important;
-}
-
-.tree-label {
-  width: 20.6%;
-  margin-top: 8px;
-  margin-bottom: 1em;
-  text-align: center;
-}
-
-@media (max-width: 639px) {
+<style lang="less">
   .ant-form-item-label {
-  line-height: 2.5715 !important;
-  text-align: center !important;
- }
+    text-align: center !important;
+  }
+
+  .tree-wrap {
+    display: flex;
+  }
 
   .tree-label {
-  width: 33%;
-  margin-top: 8px;
-  margin-bottom: 1em;
-  text-align: center;
-}
-}
+    width: 20.6%;
+    margin-top: 8px;
+    margin-bottom: 1em;
+    text-align: center;
+  }
+
+  @media (max-width: 639px) {
+    .ant-form-item-label {
+      line-height: 2.5715 !important;
+      text-align: center !important;
+    }
+
+    .tree-label {
+      width: 33%;
+      margin-top: 8px;
+      margin-bottom: 1em;
+      text-align: center;
+    }
+  }
 </style>

src/views/permission/role/index.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="p-4">
-    <BasicTable
-      ref="tableRef"
-      @register="registerTable"
-      rowKey="id"
-    >
+    <BasicTable ref="tableRef" @register="registerTable" rowKey="id">
       <template #toolbar>
-        <a-button type="primary" @click="addRole" >
+        <a-button type="primary" @click="addRole">
           {{ '新增角色' }}
         </a-button>
       </template>
@@ -15,26 +11,34 @@
       </template>
       <!-- <template #form-custom > custom-slot </template> -->
     </BasicTable>
-    <Add @register="addRegister" :modelData = "modelData" @saveData="saveData" />
+    <Add @register="addRegister" :modelData="modelData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Add from './add.vue'
+  import Add from './add.vue';
   import { useModal } from '/@/components/Modal';
   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
-  import { getUserList, addUser, editUser,deleteUser } from '/@/api/sys/user';
-  import {BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow, TableActionType } from '/@/components/Table';
+  import { getUserList, addUser, editUser, deleteUser } from '/@/api/sys/user';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
 
-//   interface ModelData {
-//     title: string,
-//     treeData: object[],
-//     checkedKeys: string[] | number[],
-//     selectedKeys: string[] | number[],
-//     expandedKeys: string[] | number[]
-//   }
+  //   interface ModelData {
+  //     title: string,
+  //     treeData: object[],
+  //     checkedKeys: string[] | number[],
+  //     selectedKeys: string[] | number[],
+  //     expandedKeys: string[] | number[]
+  //   }
 
   const columns: BasicColumn[] = [
     {
@@ -80,7 +84,7 @@
       dataIndex: 'detail',
       // editRow: true,
       width: 150,
-    }
+    },
   ];
 
   export default defineComponent({
@@ -93,12 +97,12 @@
         treeData: [],
         checkedKeys: [],
         selectedKeys: [],
-        expandedKeys: []
-      })
-      getTreeData()
+        expandedKeys: [],
+      });
+      getTreeData();
       const [registerTable] = useTable({
-        title: "角色列表",
-        titleHelpMessage: "温馨提醒",
+        title: '角色列表',
+        titleHelpMessage: '温馨提醒',
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
@@ -115,7 +119,8 @@
       });
       const [addRegister, { openModal: openAdd }] = useModal();
 
-      function getTableAction() { // 获取组件
+      function getTableAction() {
+        // 获取组件
         const tableAction = unref(tableRef);
         if (!tableAction) {
           throw new Error('tableAction is null');
@@ -123,19 +128,21 @@
         return tableAction;
       }
 
-       function getSelectRowList() { // 获取选中行
+      function getSelectRowList() {
+        // 获取选中行
         console.log(getTableAction().getSelectRows());
       }
-      function getSelectRowKeyList() { // 获取选中行的key --- id
+      function getSelectRowKeyList() {
+        // 获取选中行的key --- id
         console.log(getTableAction().getSelectRowKeys());
       }
 
       function addRole() {
-        console.log('添加')
-        modelData.title = '添加'
-        modelData.checkedKeys = []
-        modelData.selectedKeys = []
-        modelData.expandedKeys = []
+        console.log('添加');
+        modelData.title = '添加';
+        modelData.checkedKeys = [];
+        modelData.selectedKeys = [];
+        modelData.expandedKeys = [];
         openAdd(true, {
           username: '',
           password: '',
@@ -143,34 +150,34 @@
           menus: [],
           roleName: '',
           nickname: '',
-          status: true
+          status: true,
         });
       }
 
       function handleEdit(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id;  // record.key
-        console.log(record)
-        modelData.title = '编辑'
+        currentEditKeyRef.value = record.id; // record.key
+        console.log(record);
+        modelData.title = '编辑';
 
-        const data = getTableAction().getDataSource()
-        data.map(item => {
+        const data = getTableAction().getDataSource();
+        data.map((item) => {
           if (item.id === record.id) {
-            record = item
+            record = item;
           }
-        })
-        modelData.checkedKeys = record.menus
-        modelData.selectedKeys = []
-        modelData.expandedKeys = []
+        });
+        modelData.checkedKeys = record.menus;
+        modelData.selectedKeys = [];
+        modelData.expandedKeys = [];
         openAdd(true, record);
       }
 
       async function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
-        console.log(record)
-        await deleteUser({id:record.id}).then(res => {
-          console.log(res)
-          getTableAction().reload()
-        })
+        console.log(record);
+        await deleteUser({ id: record.id }).then((res) => {
+          console.log(res);
+          getTableAction().reload();
+        });
         // const data = getTableAction().getDataSource()
         // console.log(data)
         // getTableAction().setTableData(data.filter(item => item.id !== record.id))
@@ -179,21 +186,20 @@
       async function saveData(data: any) {
         // const datas = getTableAction().getDataSource()
         // const info = reactive({...data.info})
-        console.log('------------save---------')
-        console.log(data)
-        if(!data.id) {
-          await addUser(data).then(res => {
-            console.log(res)
-            getTableAction().reload()
-          })
-          console.log('----------add---')
-        }else {
-          await editUser(data).then(res => {
-            console.log(res)
-            getTableAction().reload()
-          })
-          console.log('----------edit---')
-
+        console.log('------------save---------');
+        console.log(data);
+        if (!data.id) {
+          await addUser(data).then((res) => {
+            console.log(res);
+            getTableAction().reload();
+          });
+          console.log('----------add---');
+        } else {
+          await editUser(data).then((res) => {
+            console.log(res);
+            getTableAction().reload();
+          });
+          console.log('----------edit---');
         }
         // if (modelData.title === "添加") {
         //   datas.map(item => {
@@ -217,15 +223,19 @@
         // }
       }
       async function getTreeData() {
-        let treeData = await getAllMenuList() as any
-        modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
+        let treeData = (await getAllMenuList()) as any;
+        modelData.treeData = JSON.parse(
+          JSON.stringify(treeData)
+            .replace(/menuName/g, 'title')
+            .replace(/id/g, 'key')
+        );
 
-        console.log(modelData.treeData)
+        console.log(modelData.treeData);
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
         if (false) {
-          console.log(column)
+          console.log(column);
         }
         return [
           {
@@ -258,7 +268,7 @@
         addRegister,
         saveData,
         getUserList,
-        getTreeData
+        getTreeData,
       };
     },
   });

src/views/permission/rule/data.ts

@@ -5,21 +5,6 @@ import { FormSchema } from '/@/components/Table';
 // const isButton = (type: string) => type === '2';
 
 export const formSchema: FormSchema[] = [
-  // {
-  //   field: 'type',
-  //   label: '菜单类型',
-  //   component: 'RadioButtonGroup',
-  //   defaultValue: '0',
-  //   componentProps: {
-  //     options: [
-  //       { label: '目录', value: '0' },
-  //       { label: '菜单', value: '1' },
-  //       { label: '按钮', value: '2' },
-  //     ],
-  //   },
-  //   colProps: { lg: 24, md: 24 },
-  // },
-
   {
     field: 'parent',
     label: '父级',
@@ -32,7 +17,6 @@ export const formSchema: FormSchema[] = [
       },
       getPopupContainer: () => document.body,
     },
-    required: true,
   },
   {
     field: 'uri',
@@ -83,3 +67,58 @@ export const formSchema: FormSchema[] = [
     },
   },
 ];
+
+export const fakeTree = [
+  {
+    id: 1,
+    menuName: 'Dashboard',
+    status: true,
+    icon: 'ion:layers-outline',
+    create_time: '2021-01-01',
+    detail: '',
+    children: [
+      {
+        id: 2,
+        menuName: '工作台',
+        status: true,
+        icon: 'ion:git-compare-outline',
+        create_time: '2021-01-01',
+        detail: '',
+      },
+      {
+        id: 3,
+        menuName: '分析页',
+        status: false,
+        icon: 'ion:tv-outline',
+        create_time: '2021-01-01',
+        detail: '',
+      },
+    ],
+  },
+  {
+    id: 4,
+    menuName: '权限管理',
+    status: true,
+    icon: 'bx:bx-lock',
+    create_time: '2021-01-01',
+    detail: '',
+    children: [
+      {
+        id: 5,
+        menuName: '角色管理',
+        status: true,
+        icon: 'bx:bx-lock',
+        create_time: '2021-01-01',
+        detail: '',
+      },
+      {
+        id: 6,
+        menuName: '菜单管理',
+        status: true,
+        icon: 'bx:bx-lock',
+        create_time: '2021-01-01',
+        detail: '',
+      },
+    ],
+  },
+];

src/views/permission/rule/index.vue

@@ -17,7 +17,6 @@
       <template #action="{ record }">
         <TableAction :actions="createActions(record)" />
       </template>
-      <!-- <template #form-custom > custom-slot </template> -->
     </BasicTable>
     <Popup @register="addRegister" :modelData = "modelData" @saveData="saveData" />
   </div>
@@ -28,6 +27,7 @@
   import { useModal } from '/@/components/Modal';
 //   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
+  import { Icon } from '/@/components/Icon';
   import { Tag } from 'ant-design-vue';
   import { getUserList, addUser, editUser,deleteUser } from '/@/api/sys/user';
   import {BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow, TableActionType } from '/@/components/Table';
@@ -55,6 +55,14 @@
       width: 150,
     },
     {
+      title: '图标',
+      dataIndex: 'icon',
+      width: 50,
+      customRender: ({ record }) => {
+        return h(Icon, { icon: record.icon });
+      },
+    },
+    {
       title: '规则',
       dataIndex: 'uri',
       width: 150,
@@ -82,14 +90,16 @@
       {
           id: 1,
           title: '菜单1',
+          icon: 'ant-design:smile-outlined',
           uri: 'admin.index',
-          parent: 0,
+          parent: null,
           order: 1,
           status: 1,
       },
       {
           id: 2,
           title: '菜单2',
+          icon: 'ant-design:apple-outlined',
           uri: 'admin.log',
           parent: 1,
           order: 2,
@@ -98,6 +108,7 @@
       {
           id: 3,
           title: '菜单3',
+          icon: 'ant-design:qq-outlined',
           uri: 'admin.auth',
           parent: 2,
           order: 2,
@@ -158,14 +169,7 @@
         modelData.checkedKeys = []
         modelData.selectedKeys = []
         modelData.expandedKeys = []
-        openAdd(true, {
-          id: null,
-          parent: null,
-          uri: '',
-          icon: '',
-          order: '',
-          status: 1
-        });
+        openAdd(true, {});
       }
 
       function handleEdit(record: EditRecordRow) {

src/views/permission/rule/popup.vue

@@ -11,7 +11,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { adapt } from '/@/utils/adapt'
-  import { formSchema } from './data'
+  import { formSchema, fakeTree } from './data'
 
 
   interface ModelData {
@@ -49,36 +49,28 @@
 
       const schemas: FormSchema[] = formSchema
 
-      const [
-        registerForm,
-        {
-          getFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
+      const [registerForm, { getFieldsValue, updateSchema, setFieldsValue, resetFields/* validate*/ }] = useForm({
+        labelWidth: 100,
+        schemas: formSchema,
         showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
+        actionColOptions: { span: 24 },
       });
-      const [register, { closeModal } ] = useModalInner((data) => {
-        // 方式1
-        // setFieldsValue({
-        //   field2: data.data,
-        //   field1: data.info,
-        // });
-
-        // 方式2
-        modelRef.value = data;
-
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
 
+      const [register, { closeModal } ] = useModalInner(data => {
+        console.log('-------------------data---------------')
+        console.log(data)
+        resetFields()
+        // if (unref(isUpdate)) {
+        //   setFieldsValue(data);
+        // }
+        setFieldsValue(data);
+        updateSchema({
+          field: 'parent',
+          componentProps: { treeData: fakeTree },
+        });
       });
 
+
       function confirm() {
         console.log('确定')
         const data = getFieldsValue()