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

This commit is contained in:
黄小民 2023-11-02 09:13:48 +08:00 committed by GitHub
parent bf060376e6
commit 59145ade25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 478 additions and 296 deletions

View File

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

View File

@ -1,178 +1,179 @@
{ {
"charts": { "charts": {
"baiduMap": "Baidu map", "baiduMap": "Baidu map",
"aMap": "A map", "aMap": "A map",
"googleMap": "Google map", "googleMap": "Google map",
"charts": "Chart", "charts": "Chart",
"map": "Map", "map": "Map",
"line": "Line", "line": "Line",
"pie": "Pie" "pie": "Pie"
}, },
"comp": { "comp": {
"comp": "Component", "comp": "Component",
"basic": "Basic", "basic": "Basic",
"transition": "Animation", "transition": "Animation",
"countTo": "Count To", "countTo": "Count To",
"scroll": "Scroll", "scroll": "Scroll",
"scrollBasic": "Basic", "scrollBasic": "Basic",
"scrollAction": "Scroll Function", "scrollAction": "Scroll Function",
"virtualScroll": "Virtual Scroll", "virtualScroll": "Virtual Scroll",
"tree": "Tree", "tree": "Tree",
"treeBasic": "Basic", "treeBasic": "Basic",
"editTree": "Searchable/toolbar", "editTree": "Searchable/toolbar",
"actionTree": "Function operation", "actionTree": "Function operation",
"modal": "Modal", "modal": "Modal",
"drawer": "Drawer", "drawer": "Drawer",
"desc": "Desc", "desc": "Desc",
"verify": "Verify", "verify": "Verify",
"verifyDrag": "Drag ", "verifyDrag": "Drag ",
"verifyRotate": "Picture Restore", "verifyRotate": "Picture Restore",
"qrcode": "QR code", "qrcode": "QR code",
"strength": "Password strength", "strength": "Password strength",
"upload": "Upload", "upload": "Upload",
"loading": "Loading", "loading": "Loading",
"time": "Relative Time", "time": "Relative Time",
"cropperImage": "Cropper Image", "cropperImage": "Cropper Image",
"cardList": "Card List" "cardList": "Card List"
}, },
"editor": { "editor": {
"editor": "Editor", "editor": "Editor",
"jsonEditor": "Json editor", "jsonEditor": "Json editor",
"markdown": "Markdown editor", "markdown": "Markdown editor",
"tinymce": "Rich text", "tinymce": "Rich text",
"tinymceBasic": "Basic", "tinymceBasic": "Basic",
"tinymceForm": "embedded form" "tinymceForm": "embedded form"
}, },
"excel": { "excel": {
"excel": "Excel", "excel": "Excel",
"customExport": "Select export format", "customExport": "Select export format",
"jsonExport": "JSON data export", "jsonExport": "JSON data export",
"arrayExport": "Array data export", "arrayExport": "Array data export",
"importExcel": "Import" "importExcel": "Import"
}, },
"feat": { "feat": {
"feat": "Page Function", "feat": "Page Function",
"icon": "Icon", "icon": "Icon",
"tabs": "Tabs", "tabs": "Tabs",
"tabDetail": "Tab Detail", "tabDetail": "Tab Detail",
"sessionTimeout": "Session Timeout", "sessionTimeout": "Session Timeout",
"print": "Print", "print": "Print",
"contextMenu": "Context Menu", "contextMenu": "Context Menu",
"download": "Download", "download": "Download",
"clickOutSide": "ClickOutSide", "clickOutSide": "ClickOutSide",
"imgPreview": "Picture Preview", "imgPreview": "Picture Preview",
"copy": "Clipboard", "copy": "Clipboard",
"ellipsis": "EllipsisText", "ellipsis": "EllipsisText",
"msg": "Message prompt", "msg": "Message prompt",
"watermark": "Watermark", "watermark": "Watermark",
"ripple": "Ripple", "ripple": "Ripple",
"fullScreen": "Full Screen", "fullScreen": "Full Screen",
"errorLog": "Error Log", "errorLog": "Error Log",
"tab": "Tab with parameters", "tab": "Tab with parameters",
"tab1": "Tab with parameter 1", "tab1": "Tab with parameter 1",
"tab2": "Tab with parameter 2", "tab2": "Tab with parameter 2",
"menu": "Menu with parameters", "menu": "Menu with parameters",
"menu1": "Menu with parameters 1", "menu1": "Menu with parameters 1",
"menu2": "Menu with parameters 2", "menu2": "Menu with parameters 2",
"ws": "Websocket test", "ws": "Websocket test",
"breadcrumb": "Breadcrumbs", "breadcrumb": "Breadcrumbs",
"breadcrumbFlat": "Flat Mode", "breadcrumbFlat": "Flat Mode",
"breadcrumbFlatDetail": "Flat mode details", "breadcrumbFlatDetail": "Flat mode details",
"requestDemo": "Retry request demo", "requestDemo": "Retry request demo",
"breadcrumbChildren": "Level mode", "breadcrumbChildren": "Level mode",
"breadcrumbChildrenDetail": "Level mode detail" "breadcrumbChildrenDetail": "Level mode detail"
}, },
"flow": { "flow": {
"name": "Graphics editor", "name": "Graphics editor",
"flowChart": "FlowChart" "flowChart": "FlowChart"
}, },
"form": { "form": {
"form": "Form", "form": "Form",
"basic": "Basic", "basic": "Basic",
"useForm": "useForm", "useForm": "useForm",
"refForm": "RefForm", "refForm": "RefForm",
"advancedForm": "Shrinkable", "advancedForm": "Shrinkable",
"ruleForm": "Form validation", "ruleForm": "Form validation",
"dynamicForm": "Dynamic", "dynamicForm": "Dynamic",
"customerForm": "Custom", "customerForm": "Custom",
"appendForm": "Append", "appendForm": "Append",
"tabsForm": "TabsForm" "tabsForm": "TabsForm"
}, },
"iframe": { "iframe": {
"frame": "External", "frame": "External",
"antv": "antVue doc (embedded)", "antv": "antVue doc (embedded)",
"doc": "Project doc (embedded)", "doc": "Project doc (embedded)",
"docExternal": "Project doc (external)" "docExternal": "Project doc (external)"
}, },
"level": { "level": {
"level": "MultiMenu" "level": "MultiMenu"
}, },
"page": { "page": {
"page": "Page", "page": "Page",
"form": "Form", "form": "Form",
"formBasic": "Basic Form", "formBasic": "Basic Form",
"formStep": "Step Form", "formStep": "Step Form",
"formHigh": "Advanced Form", "formHigh": "Advanced Form",
"desc": "Details", "desc": "Details",
"descBasic": "Basic Details", "descBasic": "Basic Details",
"descHigh": "Advanced Details", "descHigh": "Advanced Details",
"result": "Result", "result": "Result",
"resultSuccess": "Success", "resultSuccess": "Success",
"resultFail": "Failed", "resultFail": "Failed",
"account": "Personal", "account": "Personal",
"accountCenter": "Personal Center", "accountCenter": "Personal Center",
"accountSetting": "Personal Settings", "accountSetting": "Personal Settings",
"exception": "Exception", "exception": "Exception",
"netWorkError": "Network Error", "netWorkError": "Network Error",
"notData": "No data", "notData": "No data",
"list": "List page", "list": "List page",
"listCard": "Card list", "listCard": "Card list",
"basic": "Basic list", "basic": "Basic list",
"listBasic": "Basic list", "listBasic": "Basic list",
"listSearch": "Search list" "listSearch": "Search list"
}, },
"permission": { "permission": {
"permission": "Permission", "permission": "Permission",
"front": "front-end", "front": "front-end",
"frontPage": "Page", "frontPage": "Page",
"frontBtn": "Button", "frontBtn": "Button",
"frontTestA": "Test page A", "frontTestA": "Test page A",
"frontTestB": "Test page B", "frontTestB": "Test page B",
"back": "background", "back": "background",
"backPage": "Page", "backPage": "Page",
"backBtn": "Button" "backBtn": "Button"
}, },
"setup": { "setup": {
"page": "Intro page" "page": "Intro page"
}, },
"system": { "system": {
"moduleName": "System management", "moduleName": "System management",
"account": "Account management", "account": "Account management",
"account_detail": "Account detail", "vxeTableAccount": "Account management(VxeTable)",
"password": "Change password", "account_detail": "Account detail",
"dept": "Department management", "password": "Change password",
"menu": "Menu management", "dept": "Department management",
"menu": "Menu management",
"role": "Role management" "role": "Role management"
}, },
"table": { "table": {
"table": "Table", "table": "Table",
"basic": "Basic", "basic": "Basic",
"treeTable": "Tree", "treeTable": "Tree",
"fetchTable": "Remote loading", "fetchTable": "Remote loading",
"fixedColumn": "Fixed column", "fixedColumn": "Fixed column",
"customerCell": "Custom column", "customerCell": "Custom column",
"formTable": "Open search", "formTable": "Open search",
"useTable": "UseTable", "useTable": "UseTable",
"refTable": "RefTable", "refTable": "RefTable",
"multipleHeader": "MultiLevel header", "multipleHeader": "MultiLevel header",
"mergeHeader": "Merge cells", "mergeHeader": "Merge cells",
"expandTable": "Expandable table", "expandTable": "Expandable table",
"fixedHeight": "Fixed height", "fixedHeight": "Fixed height",
"footerTable": "Footer", "footerTable": "Footer",
"editCellTable": "Editable cell", "editCellTable": "Editable cell",
"editRowTable": "Editable row", "editRowTable": "Editable row",
"authColumn": "Auth column", "authColumn": "Auth column",
"resizeParentHeightTable": "resizeParentHeightTable", "resizeParentHeightTable": "resizeParentHeightTable",
"vxeTable": "VxeTable" "vxeTable": "VxeTable"
} }
} }

View File

@ -1,177 +1,178 @@
{ {
"charts": { "charts": {
"baiduMap": "百度地图", "baiduMap": "百度地图",
"aMap": "高德地图", "aMap": "高德地图",
"googleMap": "谷歌地图", "googleMap": "谷歌地图",
"charts": "图表", "charts": "图表",
"map": "地图", "map": "地图",
"line": "折线图", "line": "折线图",
"pie": "饼图" "pie": "饼图"
}, },
"comp": { "comp": {
"comp": "组件", "comp": "组件",
"basic": "基础组件", "basic": "基础组件",
"transition": "动画组件", "transition": "动画组件",
"countTo": "数字动画", "countTo": "数字动画",
"scroll": "滚动组件", "scroll": "滚动组件",
"scrollBasic": "基础滚动", "scrollBasic": "基础滚动",
"scrollAction": "滚动函数", "scrollAction": "滚动函数",
"virtualScroll": "虚拟滚动", "virtualScroll": "虚拟滚动",
"tree": "Tree", "tree": "Tree",
"treeBasic": "基础树", "treeBasic": "基础树",
"editTree": "可搜索/工具栏", "editTree": "可搜索/工具栏",
"actionTree": "函数操作示例", "actionTree": "函数操作示例",
"modal": "弹窗扩展", "modal": "弹窗扩展",
"drawer": "抽屉扩展", "drawer": "抽屉扩展",
"desc": "详情组件", "desc": "详情组件",
"verify": "验证组件", "verify": "验证组件",
"verifyDrag": "拖拽校验", "verifyDrag": "拖拽校验",
"verifyRotate": "图片还原", "verifyRotate": "图片还原",
"qrcode": "二维码组件", "qrcode": "二维码组件",
"strength": "密码强度组件", "strength": "密码强度组件",
"upload": "上传组件", "upload": "上传组件",
"loading": "Loading", "loading": "Loading",
"time": "相对时间", "time": "相对时间",
"cropperImage": "图片裁剪", "cropperImage": "图片裁剪",
"cardList": "卡片列表" "cardList": "卡片列表"
}, },
"editor": { "editor": {
"editor": "编辑器", "editor": "编辑器",
"jsonEditor": "Json编辑器", "jsonEditor": "Json编辑器",
"markdown": "markdown编辑器", "markdown": "markdown编辑器",
"tinymce": "富文本", "tinymce": "富文本",
"tinymceBasic": "基础使用", "tinymceBasic": "基础使用",
"tinymceForm": "嵌入form" "tinymceForm": "嵌入form"
}, },
"excel": { "excel": {
"excel": "Excel", "excel": "Excel",
"customExport": "选择导出格式", "customExport": "选择导出格式",
"jsonExport": "JSON数据导出", "jsonExport": "JSON数据导出",
"arrayExport": "Array数据导出", "arrayExport": "Array数据导出",
"importExcel": "导入" "importExcel": "导入"
}, },
"feat": { "feat": {
"feat": "功能", "feat": "功能",
"icon": "图标", "icon": "图标",
"sessionTimeout": "登录过期", "sessionTimeout": "登录过期",
"tabs": "标签页操作", "tabs": "标签页操作",
"tabDetail": "标签详情页", "tabDetail": "标签详情页",
"print": "打印", "print": "打印",
"contextMenu": "右键菜单", "contextMenu": "右键菜单",
"download": "文件下载", "download": "文件下载",
"clickOutSide": "ClickOutSide组件", "clickOutSide": "ClickOutSide组件",
"imgPreview": "图片预览", "imgPreview": "图片预览",
"copy": "剪切板", "copy": "剪切板",
"ellipsis": "文本省略", "ellipsis": "文本省略",
"msg": "消息提示", "msg": "消息提示",
"watermark": "水印", "watermark": "水印",
"ripple": "水波纹", "ripple": "水波纹",
"fullScreen": "全屏", "fullScreen": "全屏",
"errorLog": "错误日志", "errorLog": "错误日志",
"tab": "Tab带参", "tab": "Tab带参",
"tab1": "Tab带参1", "tab1": "Tab带参1",
"tab2": "Tab带参2", "tab2": "Tab带参2",
"menu": "Menu带参", "menu": "Menu带参",
"menu1": "Menu带参1", "menu1": "Menu带参1",
"menu2": "Menu带参2", "menu2": "Menu带参2",
"ws": "websocket测试", "ws": "websocket测试",
"breadcrumb": "面包屑导航", "breadcrumb": "面包屑导航",
"breadcrumbFlat": "平级模式", "breadcrumbFlat": "平级模式",
"requestDemo": "测试请求重试", "requestDemo": "测试请求重试",
"breadcrumbFlatDetail": "平级详情", "breadcrumbFlatDetail": "平级详情",
"breadcrumbChildren": "层级模式", "breadcrumbChildren": "层级模式",
"breadcrumbChildrenDetail": "层级详情" "breadcrumbChildrenDetail": "层级详情"
}, },
"flow": { "flow": {
"name": "图形编辑器", "name": "图形编辑器",
"flowChart": "流程图" "flowChart": "流程图"
}, },
"form": { "form": {
"form": "Form", "form": "Form",
"basic": "基础表单", "basic": "基础表单",
"useForm": "useForm", "useForm": "useForm",
"refForm": "RefForm", "refForm": "RefForm",
"advancedForm": "可收缩表单", "advancedForm": "可收缩表单",
"ruleForm": "表单验证", "ruleForm": "表单验证",
"dynamicForm": "动态表单", "dynamicForm": "动态表单",
"customerForm": "自定义组件", "customerForm": "自定义组件",
"appendForm": "表单增删示例", "appendForm": "表单增删示例",
"tabsForm": "标签页+多级field" "tabsForm": "标签页+多级field"
}, },
"iframe": { "iframe": {
"frame": "外部页面", "frame": "外部页面",
"antv": "antVue文档(内嵌)", "antv": "antVue文档(内嵌)",
"doc": "项目文档(内嵌)", "doc": "项目文档(内嵌)",
"docExternal": "项目文档(外链)" "docExternal": "项目文档(外链)"
}, },
"level": { "level": {
"level": "多级菜单" "level": "多级菜单"
}, },
"page": { "page": {
"page": "页面", "page": "页面",
"form": "表单页", "form": "表单页",
"formBasic": "基础表单", "formBasic": "基础表单",
"formStep": "分步表单", "formStep": "分步表单",
"formHigh": "高级表单", "formHigh": "高级表单",
"desc": "详情页", "desc": "详情页",
"descBasic": "基础详情页", "descBasic": "基础详情页",
"descHigh": "高级详情页", "descHigh": "高级详情页",
"result": "结果页", "result": "结果页",
"resultSuccess": "成功页", "resultSuccess": "成功页",
"resultFail": "失败页", "resultFail": "失败页",
"account": "个人页", "account": "个人页",
"accountCenter": "个人中心", "accountCenter": "个人中心",
"accountSetting": "个人设置", "accountSetting": "个人设置",
"exception": "异常页", "exception": "异常页",
"netWorkError": "网络错误", "netWorkError": "网络错误",
"notData": "无数据", "notData": "无数据",
"list": "列表页", "list": "列表页",
"listCard": "卡片列表", "listCard": "卡片列表",
"listBasic": "标准列表", "listBasic": "标准列表",
"listSearch": "搜索列表" "listSearch": "搜索列表"
}, },
"permission": { "permission": {
"permission": "权限管理", "permission": "权限管理",
"front": "基于前端权限", "front": "基于前端权限",
"frontPage": "页面权限", "frontPage": "页面权限",
"frontBtn": "按钮权限", "frontBtn": "按钮权限",
"frontTestA": "权限测试页A", "frontTestA": "权限测试页A",
"frontTestB": "权限测试页B", "frontTestB": "权限测试页B",
"back": "基于后台权限", "back": "基于后台权限",
"backPage": "页面权限", "backPage": "页面权限",
"backBtn": "按钮权限" "backBtn": "按钮权限"
}, },
"setup": { "setup": {
"page": "引导页" "page": "引导页"
}, },
"system": { "system": {
"moduleName": "系统管理", "moduleName": "系统管理",
"account": "账号管理", "account": "账号管理",
"account_detail": "账号详情", "vxeTableAccount": "账号管理(VxeTable)",
"password": "修改密码", "account_detail": "账号详情",
"dept": "部门管理", "password": "修改密码",
"menu": "菜单管理", "dept": "部门管理",
"menu": "菜单管理",
"role": "角色管理" "role": "角色管理"
}, },
"table": { "table": {
"table": "Table", "table": "Table",
"basic": "基础表格", "basic": "基础表格",
"treeTable": "树形表格", "treeTable": "树形表格",
"fetchTable": "远程加载示例", "fetchTable": "远程加载示例",
"fixedColumn": "固定列", "fixedColumn": "固定列",
"customerCell": "自定义列", "customerCell": "自定义列",
"formTable": "开启搜索区域", "formTable": "开启搜索区域",
"useTable": "UseTable", "useTable": "UseTable",
"refTable": "RefTable", "refTable": "RefTable",
"multipleHeader": "多级表头", "multipleHeader": "多级表头",
"mergeHeader": "合并单元格", "mergeHeader": "合并单元格",
"expandTable": "可展开表格", "expandTable": "可展开表格",
"fixedHeight": "定高/头部自定义", "fixedHeight": "定高/头部自定义",
"footerTable": "表尾行合计", "footerTable": "表尾行合计",
"editCellTable": "可编辑单元格", "editCellTable": "可编辑单元格",
"editRowTable": "可编辑行", "editRowTable": "可编辑行",
"authColumn": "权限列", "authColumn": "权限列",
"resizeParentHeightTable": "继承父元素高度", "resizeParentHeightTable": "继承父元素高度",
"vxeTable": "VxeTable" "vxeTable": "VxeTable"
} }
} }

View File

@ -23,6 +23,15 @@ const system: AppRouteModule = {
}, },
component: () => import('/@/views/demo/system/account/index.vue'), 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', path: 'account_detail/:id',
name: 'AccountDetail', name: 'AccountDetail',

View File

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

View File

@ -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>

View File

@ -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: '重置' } },
],
},
},
];