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 & {
account?: string;
nickname?: string;
[key: string]: any;
};
export type RoleParams = {

View File

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

View File

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

View File

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

View File

@ -10,7 +10,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
* ...
* }
*/
const deptMap = (() => {
export const deptMap = (() => {
const pDept = ['华东分部', '华南分部', '西北分部'];
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: '重置' } },
],
},
},
];