优化结构

mock/sys/menu.ts

@@ -94,6 +94,28 @@ const testRoute = {
   ],
 };
 
+const permissionRoute = {
+  path: '/permission',
+  name: 'Permission',
+  component: 'LAYOUT',
+  redirect: '/permission/detail',
+  meta: {
+    icon: 'ant-design:lock-outlined',
+    title: 'routes.permission.management',
+  },
+  children: [
+    {
+      path: 'detail',
+      name: 'Detail',
+      component: '/permission/index',
+      meta: {
+        title: 'routes.permission.detail',
+        icon: 'bx:bx-lock',
+      },
+    },
+  ],
+};
+
 const frontRoute = {
   path: 'front',
   name: 'PermissionFrontDemo',
@@ -248,7 +270,7 @@ export default [
     response: ({ query }) => {
       const { id } = query;
       if (!id || id === '1') {
-        return resultSuccess([homeRoute, dashboardRoute, tableRoute, testRoute]);
+        return resultSuccess([homeRoute, dashboardRoute, tableRoute, permissionRoute, testRoute]);
       }
       if (id === '2') {
         return resultSuccess([dashboardRoute, authRoute1, levelRoute]);

mock/sys/user.ts

@@ -31,6 +31,20 @@ function createFakeUserList() {
         },
       ],
     },
+    {
+      userId: '2',
+      username: 'admin',
+      password: '123456',
+      realName: '测试管理员',
+      desc: '普通管理员',
+      token: 'fakeToken2',
+      roles: [
+        {
+          roleName: 'Tester',
+          value: 'test',
+        },
+      ],
+    },
   ];
 }
 

src/components/Form/src/hooks/useFormEvents.ts

@@ -44,6 +44,7 @@ export function useFormEvents({
     clearValidate();
     emit('reset', toRaw(formModel));
     submitOnReset && handleSubmit();
+    console.log('重置按钮默认触发查询事件');
   }
 
   /**

src/components/Table/src/hooks/useTableForm.ts

@@ -30,6 +30,8 @@ export function useTableForm(
   }
 
   function handleSearchInfoChange(info: Recordable) {
+    console.log('------ 点击查询按钮 ----------');
+    console.log(info);
     const { handleSearchInfoFn } = unref(propsRef);
     if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
       info = handleSearchInfoFn(info) || info;

src/locales/lang/en/routes/permission.ts

@@ -0,0 +1,4 @@
+export default {
+  management: 'permission management',
+  detail: 'permission detail',
+};

src/locales/lang/zh_CN/routes/permission.ts

@@ -0,0 +1,4 @@
+export default {
+  management: '权限管理',
+  detail: '详情',
+};

src/router/menus/modules/permission.ts

@@ -0,0 +1,17 @@
+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const menu: MenuModule = {
+  orderNo: 1,
+  menu: {
+    path: '/permission',
+    name: t('routes.permission.management'),
+    children: [
+      {
+        path: 'detail',
+        name: t('routes.permission.detail'),
+      },
+    ],
+  },
+};
+export default menu;

src/router/routes/modules/home.ts

@@ -19,7 +19,7 @@ const dashboard: AppRouteModule = {
       component: () => import('/@/views/dashboard/welcome/index.vue'),
       meta: {
         title: t('routes.dashboard.welcome'),
-        affix: true,
+        affix: false,
         icon: 'bx:bx-home',
       },
     },

src/router/routes/modules/permission.ts

@@ -0,0 +1,29 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const dashboard: AppRouteModule = {
+  path: '/permission',
+  name: 'Permission',
+  component: LAYOUT,
+  redirect: '/permission/detail',
+  meta: {
+    icon: 'bx:bx-lock',
+    title: t('routes.permission.management'),
+  },
+  children: [
+    {
+      path: 'detail',
+      name: 'Detail',
+      component: () => import('/@/views/permission/index.vue'),
+      meta: {
+        title: t('routes.permission.detail'),
+        affix: false,
+        icon: 'bx:bx-lock',
+      },
+    },
+  ],
+};
+
+export default dashboard;

src/views/permission/add.vue

@@ -0,0 +1,89 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" title="添加xxx">
+    <BasicForm @register="registerForm" :model="model" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { adapt } from '/@/utils/adapt'
+
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    setup() {
+      const modelRef = ref({});
+      const adaptWidth = adapt()
+
+      const schemas: FormSchema[] = [
+        {
+          field: 'name',
+          component: 'Input',
+          label: '姓名',
+          labelWidth: adaptWidth.labelWidth,
+          colProps: {
+            span: adaptWidth.elContainer,
+          }
+        },
+        {
+          field: 'addr',
+          component: 'Input',
+          label: '地址',
+          labelWidth: adaptWidth.labelWidth,
+
+          colProps: {
+            span: adaptWidth.elContainer,
+          },
+        },
+      ];
+
+      const [
+        registerForm,
+        {
+          getFieldsValue,
+          // setProps
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      const [register, { closeModal } ] = useModalInner((data) => {
+        // 方式1
+        // setFieldsValue({
+        //   field2: data.data,
+        //   field1: data.info,
+        // });
+
+        // 方式2
+        modelRef.value = { name: data.data, addr: data.info };
+
+        // setProps({
+        //   model:{ field2: data.data, field1: data.info }
+        // })
+      });
+
+      function confirm() {
+        console.log('确定')
+        console.log(getFieldsValue())  // 表单数据
+
+        closeModal()  // 关闭弹窗
+      }
+      return { register, schemas, registerForm, model: modelRef,confirm, adaptWidth };
+    },
+  });
+</script>
+<style lang='less'>
+.ant-form-item-label {
+  text-align: center !important;
+}
+@media (max-width: 639px) {
+  .ant-form-item-label {
+  line-height: 2.5715 !important;
+  text-align: center !important;
+ }
+}
+</style>

src/views/permission/data.ts

@@ -0,0 +1,38 @@
+import { TreeItem } from '/@/components/Tree/index';
+
+export const treeData: TreeItem[] = [
+  {
+    title: 'parent 1parent ',
+    key: '0-0',
+    icon: 'home|svg',
+    children: [
+      { title: 'leaf', key: '0-0-0' },
+      {
+        title: 'leaf',
+        key: '0-0-1',
+        children: [
+          { title: 'leaf', key: '0-0-0-0' },
+          { title: 'leaf', key: '0-0-0-1' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'parent 2',
+    key: '1-1',
+    icon: 'home|svg',
+    children: [
+      { title: 'leaf', key: '1-1-0' },
+      { title: 'leaf', key: '1-1-1' },
+    ],
+  },
+  {
+    title: 'parent 3',
+    key: '2-2',
+    icon: 'home|svg',
+    children: [
+      { title: 'leaf', key: '2-2-0' },
+      { title: 'leaf', key: '2-2-1' },
+    ],
+  },
+];

src/views/permission/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="p-4">
+    <BasicTable
+      ref="tableRef"
+      @register="registerTable"
+      rowKey="id"
+    >
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+      <template #form-custom > custom-slot </template>
+
+      <template #toolbar>
+        <a-button type="primary" @click="addColumn" >
+          {{ '添加' }}
+        </a-button>
+      </template>
+    </BasicTable>
+    <Add @register="addRegister" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import Add from './add.vue'
+import { useModal } from '/@/components/Modal';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+    TableActionType
+  } from '/@/components/Table';
+
+
+  const columns: BasicColumn[] = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      editComponentProps: {
+        prefix: '$',
+      },
+      width: 200,
+    },
+    {
+      title: '账户名',
+      dataIndex: 'name',
+      editRow: true,
+      width: 200,
+    },
+    {
+      title: '密码',
+      dataIndex: 'password',
+      editRow: true,
+      width: 200,
+    },
+    {
+      title: '详情',
+      dataIndex: 'detail',
+      editRow: true,
+      width: 200,
+    },
+  ];
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, Add },
+    setup() {
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const currentEditKeyRef = ref('');
+      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'}],
+        showIndexColumn: false,
+        actionColumn: {
+          width: 160,
+          title: 'Action',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+      const [addRegister, { openModal: openAdd }] = useModal();
+      const rowClick = (e: any) => {
+        console.log(e)
+      }
+
+      function getTableAction() { // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+
+       function getSelectRowList() { // 获取选中行
+        console.log(getTableAction().getSelectRows());
+      }
+      function getSelectRowKeyList() { // 获取选中行的key --- id
+        console.log(getTableAction().getSelectRowKeys());
+      }
+
+      function addColumn() {
+        console.log('添加')
+        openAdd(true, {
+          data: '苏轼',
+          info: '苏州',
+        });
+      }
+
+      function handleSubmit() {
+        console.log('handleSubmit')
+        // console.log(data)
+      }
+
+      function handleEdit(record: EditRecordRow) {
+        currentEditKeyRef.value = record.id;  // record.key
+        record.onEdit?.(true);
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log('点击了删除', record);
+        const data = getTableAction().getDataSource()
+        console.log(data)
+        getTableAction().setTableData(data.map(item => item.id !== record.id))
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          return [
+            {
+              label: '编辑',
+              icon: 'ant-design:edit-outlined',
+              color: 'warning',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              color: 'error',
+              icon: 'ic:outline-delete-outline',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              onClick: handleDelete.bind(null, record),
+            },
+          ];
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+      return {
+
+        // ...toRefs(state),
+        tableRef,
+        registerTable,
+        rowClick,
+        addColumn,
+        handleEdit,
+        createActions,
+        getTableAction,
+        getSelectRowList,
+        getSelectRowKeyList,
+        addRegister,
+        handleSubmit
+
+      };
+    },
+  });
+</script>

src/views/permission/menuTree.vue

@@ -0,0 +1,36 @@
+<template>
+  <PageWrapper title="Tree基础示例">
+    <div class="flex">
+      <CollapseContainer title="基础示例" :style="{ width: '33%' }" class="mr-4">
+        <BasicTree :treeData="treeData" />
+      </CollapseContainer>
+
+      <CollapseContainer title="可勾选" class="mr-4" :style="{ width: '33%' }">
+        <BasicTree :treeData="treeData" :checkable="true" />
+      </CollapseContainer>
+
+      <CollapseContainer title="默认展开/勾选示例" :style="{ width: '33%' }">
+        <BasicTree
+          :treeData="treeData"
+          :checkable="true"
+          :expandedKeys="['0-0']"
+          :checkedKeys="['0-0']"
+        />
+      </CollapseContainer>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTree } from '/@/components/Tree/index';
+  import { treeData } from './data';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { PageWrapper } from '/@/components/Page';
+
+  export default defineComponent({
+    components: { BasicTree, CollapseContainer, PageWrapper },
+    setup() {
+      return { treeData };
+    },
+  });
+</script>

src/views/table/editTable/index.vue

@@ -5,7 +5,6 @@
       @register="registerTable"
       @edit-end="handleEditEnd"
       rowKey="id"
-      @handleSearchInfoFn="handleSubmit"
     >
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
@@ -198,12 +197,8 @@ import { useModal } from '/@/components/Modal';
         console.log('end----------------')
       }
 
-       function handleEdit(record: EditRecordRow) {
+      function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id;  // record.key
-        // console.log('=====================')
-        // console.log(currentEditKeyRef)
-        // console.log(record)
-        // console.log('=====================')
         record.onEdit?.(true);
       }
 
@@ -214,12 +209,18 @@ import { useModal } from '/@/components/Modal';
 
       async function handleSave(record: EditRecordRow) {
         const pass = await record.onEdit?.(false, true);
+        console.log('------- 保存 ----------')
+        console.log(record)
+        console.log('------- 保存 ----------')
         if (pass) {
           currentEditKeyRef.value = '';
         }
       }
        function handleDelete(record: Recordable) {
         console.log('点击了删除', record);
+        const data = getTableAction().getDataSource()
+        console.log(data)
+        getTableAction().setTableData(data.map(item => item.id !== record.id))
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
@@ -228,7 +229,7 @@ import { useModal } from '/@/components/Modal';
             {
               label: '编辑',
               icon: 'ant-design:edit-outlined',
-              // color: 'warning',
+              color: 'warning',
               disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
               onClick: handleEdit.bind(null, record),
             },