diff --git a/src/api/demo/model/systemModel.ts b/src/api/demo/model/systemModel.ts index f8936c29326..06865476d29 100644 --- a/src/api/demo/model/systemModel.ts +++ b/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 = { diff --git a/src/locales/lang/en/routes/demo.json b/src/locales/lang/en/routes/demo.json index 0d0f93d5f65..3dbabec3c8f 100644 --- a/src/locales/lang/en/routes/demo.json +++ b/src/locales/lang/en/routes/demo.json @@ -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" } -} \ No newline at end of file +} diff --git a/src/locales/lang/zh-CN/routes/demo.json b/src/locales/lang/zh-CN/routes/demo.json index c73630f12b6..d71252762f3 100644 --- a/src/locales/lang/zh-CN/routes/demo.json +++ b/src/locales/lang/zh-CN/routes/demo.json @@ -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" } -} \ No newline at end of file +} diff --git a/src/router/routes/modules/demo/system.ts b/src/router/routes/modules/demo/system.ts index 66e19da23c9..36067c73236 100644 --- a/src/router/routes/modules/demo/system.ts +++ b/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', diff --git a/src/views/demo/system/account/account.data.ts b/src/views/demo/system/account/account.data.ts index 18dd12e62da..dab81523adb 100644 --- a/src/views/demo/system/account/account.data.ts +++ b/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 = ['研发部', '市场部', '商务部', '财务部']; diff --git a/src/views/demo/system/vxe-account/index.vue b/src/views/demo/system/vxe-account/index.vue new file mode 100644 index 00000000000..297c4e903a4 --- /dev/null +++ b/src/views/demo/system/vxe-account/index.vue @@ -0,0 +1,86 @@ + + + diff --git a/src/views/demo/system/vxe-account/vxeAccount.data.ts b/src/views/demo/system/vxe-account/vxeAccount.data.ts new file mode 100644 index 00000000000..9f1c7898e7a --- /dev/null +++ b/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: '重置' } }, + ], + }, + }, +];