feat: vxeTable searchInfo demo (#3223) close #3011

src/api/demo/model/systemModel.ts

@@ -3,6 +3,7 @@ import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
 export type AccountParams = BasicPageParams & {
   account?: string;
   nickname?: string;
+  [key: string]: any;
 };
 
 export type RoleParams = {

src/locales/lang/en/routes/demo.json

@@ -148,6 +148,7 @@
   "system": {
     "moduleName": "System management",
     "account": "Account management",
+    "vxeTableAccount": "Account management(VxeTable)",
     "account_detail": "Account detail",
     "password": "Change password",
     "dept": "Department management",

src/locales/lang/zh-CN/routes/demo.json

@@ -147,6 +147,7 @@
   "system": {
     "moduleName": "系统管理",
     "account": "账号管理",
+    "vxeTableAccount": "账号管理(VxeTable)",
     "account_detail": "账号详情",
     "password": "修改密码",
     "dept": "部门管理",

src/router/routes/modules/demo/system.ts

@@ -23,6 +23,15 @@ const system: AppRouteModule = {
       },
       component: () => import('/@/views/demo/system/account/index.vue'),
     },
+    {
+      path: 'vxeTableAccount',
+      name: 'VxeTableAccountManagement',
+      meta: {
+        title: t('routes.demo.system.vxeTableAccount'),
+        ignoreKeepAlive: false,
+      },
+      component: () => import('/@/views/demo/system/vxe-account/index.vue'),
+    },
     {
       path: 'account_detail/:id',
       name: 'AccountDetail',

src/views/demo/system/account/account.data.ts

@@ -10,7 +10,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
  *  ...
  * }
  */
-const deptMap = (() => {
+export const deptMap = (() => {
   const pDept = ['华东分部', '华南分部', '西北分部'];
   const cDept = ['研发部', '市场部', '商务部', '财务部'];
 

src/views/demo/system/vxe-account/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <div class="m-4 vxebasic-form-container">
+      <VxeBasicTable ref="tableRef" v-bind="gridOptions">
+        <template #action="{ row }">
+          <TableAction outside :actions="createActions(row)" />
+        </template>
+      </VxeBasicTable>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { ActionItem, TableAction } from '/@/components/Table';
+  import { getAccountList } from '/@/api/demo/system';
+  import { PageWrapper } from '/@/components/Page';
+  import DeptTree from '../account/DeptTree.vue';
+  import { columns, searchFormSchema } from './vxeAccount.data';
+  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
+
+  const tableRef = ref<VxeGridInstance>();
+  const searchInfo = ref();
+  const gridOptions = reactive<BasicTableProps>({
+    id: 'VxeTable',
+    keepSource: true,
+    columns: columns,
+    formConfig: {
+      enabled: true,
+      items: searchFormSchema,
+    },
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page, form }) => {
+          return getAccountList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...form,
+            searchInfo: searchInfo.value,
+          });
+        },
+      },
+    },
+  });
+
+  const handleSelect = (deptId = '') => {
+    searchInfo.value = deptId;
+    if (tableRef.value) {
+      tableRef.value.commitProxy('query');
+    }
+  };
+
+  // 操作按钮（权限控制）
+  const createActions = (record) => {
+    const actions: ActionItem[] = [
+      {
+        label: '详情',
+        onClick: () => {
+          console.log(record);
+        },
+      },
+      {
+        label: '编辑',
+        onClick: () => {},
+      },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: () => {
+            tableRef.value?.remove(record);
+          },
+        },
+      },
+    ];
+
+    return actions;
+  };
+</script>
+<style lang="less" scope>
+  .vxebasic-form-container {
+    flex: auto;
+  }
+</style>

src/views/demo/system/vxe-account/vxeAccount.data.ts

@@ -0,0 +1,84 @@
+import { VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';
+import { deptMap } from '../account/account.data';
+
+export const columns: VxeGridPropTypes.Columns = [
+  {
+    title: '用户名',
+    field: 'account',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    field: 'nickname',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    field: 'email',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+    width: 180,
+  },
+  {
+    title: '角色',
+    field: 'role',
+    width: 200,
+  },
+  {
+    title: '所属部门',
+    field: 'dept',
+    slots: {
+      default: ({ row }) => {
+        return deptMap[row.dept];
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    width: 160,
+    title: '操作',
+    align: 'center',
+    slots: { default: 'action' },
+    fixed: 'right',
+  },
+];
+
+export const searchFormSchema: VxeFormItemProps[] = [
+  {
+    field: 'account',
+    title: '用户名',
+    itemRender: {
+      name: 'AInput',
+    },
+    span: 6,
+  },
+  {
+    field: 'nickname',
+    title: '昵称',
+    itemRender: {
+      name: 'AInput',
+    },
+    span: 6,
+  },
+  {
+    span: 12,
+    align: 'right',
+    className: '!pr-0',
+    itemRender: {
+      name: 'AButtonGroup',
+      children: [
+        {
+          props: { type: 'primary', content: '查询', htmlType: 'submit' },
+          attrs: { class: 'mr-2' },
+        },
+        { props: { type: 'default', htmlType: 'reset', content: '重置' } },
+      ],
+    },
+  },
+];