huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-23 07:41:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!349 vue3 XTable 组件

Browse Source 
Merge pull request !349 from xingyu/dev
This commit is contained in:
芋道源码 2023-01-04 00:56:44 +00:00 committed by Gitee
commit 135ee3f39d
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
45 changed files with 996 additions and 597 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -223,7 +223,7 @@ ps：核心功能已经实现，正在对接微信小程序中...
|----------------------------------------------------------------------|:------------:|:------:| |----------------------------------------------------------------------|:------------:|:------:|
| [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.2.45 | | [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.2.45 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 4.0.3 | | [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 4.0.3 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.27 | | [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.28 |
| [TypeScript](https://www.typescriptlang.org/docs/) | TypeScript | 4.9.4 | | [TypeScript](https://www.typescriptlang.org/docs/) | TypeScript | 4.9.4 |
| [pinia](https://pinia.vuejs.org/) | vuex5 | 2.0.28 | | [pinia](https://pinia.vuejs.org/) | vuex5 | 2.0.28 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 | | [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |

16
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/index.vue.vm
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -43,7 +43,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="${classNameVar}Model" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"> <XModal id="${classNameVar}Model" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
@ -79,8 +79,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import { rules, allSchemas } from './${classNameVar}.data' import { rules, allSchemas } from './${classNameVar}.data'
@ -90,8 +89,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<${simpleClassName}Api.${simpleClassName}VO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: ${simpleClassName}Api.get${simpleClassName}PageApi, getListApi: ${simpleClassName}Api.get${simpleClassName}PageApi,
deleteApi: ${simpleClassName}Api.delete${simpleClassName}Api, deleteApi: ${simpleClassName}Api.delete${simpleClassName}Api,
@ -123,7 +121,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '${table.classComment}.xls') await exportList('${table.classComment}.xls')
} }
// 修改操作 // 修改操作
@ -145,7 +143,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -169,7 +167,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

22
yudao-ui-admin-vue3/README.md
View File

@ -26,19 +26,19 @@
### 前端依赖 ### 前端依赖
| 框架 | 说明 | 版本 | | 框架 | 说明 | 版本 |
| --- | --- | --- | | --- | --- |--------|
| [Vue](https://staging-cn.vuejs.org/) | vue 框架 | 3.2.45 | | [Vue](https://staging-cn.vuejs.org/) | vue 框架 | 3.2.45 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 4.0.3 | | [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 4.0.3 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.27 | | [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.28 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.9.4 | | [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.9.4 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.28 | | [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.28 |
| [vueuse](https://vueuse.org/) | 常用工具集 | 9.8.2 | | [vueuse](https://vueuse.org/) | 常用工具集 | 9.8.2 |
| [vxe-table](https://vxetable.cn/) | vue 最强表单 | 4.3.7 | | [vxe-table](https://vxetable.cn/) | vue 最强表单 | 4.3.7 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 | | [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |
| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.6 | | [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.6 |
| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 | | [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.0.0 | | [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.0.1 |
| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.23 | | [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.23 |
### 推荐 VScode 开发，插件如下 ### 推荐 VScode 开发，插件如下

26
yudao-ui-admin-vue3/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "yudao-ui-admin-vue3", "name": "yudao-ui-admin-vue3",
"version": "1.6.5.1879", "version": "1.6.5.1901",
"description": "基于vue3、vite4、element-plus、typesScript", "description": "基于vue3、vite4、element-plus、typesScript",
"author": "xingyu", "author": "xingyu",
"private": false, "private": false,
@ -30,13 +30,13 @@
"@wangeditor/editor-for-vue": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10",
"@zxcvbn-ts/core": "^2.1.0", "@zxcvbn-ts/core": "^2.1.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.2.1", "axios": "^1.2.2",
"cropperjs": "^1.5.13", "cropperjs": "^1.5.13",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"echarts": "^5.4.1", "echarts": "^5.4.1",
"echarts-wordcloud": "^2.1.0", "echarts-wordcloud": "^2.1.0",
"element-plus": "2.2.27", "element-plus": "2.2.28",
"intro.js": "^6.0.0", "intro.js": "^6.0.0",
"jsencrypt": "^3.3.1", "jsencrypt": "^3.3.1",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
@ -57,25 +57,25 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.3.0", "@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0", "@commitlint/config-conventional": "^17.3.0",
"@iconify/json": "^2.1.157", "@iconify/json": "^2.2.1",
"@intlify/unplugin-vue-i18n": "^0.8.1", "@intlify/unplugin-vue-i18n": "^0.8.1",
"@purge-icons/generated": "^0.9.0", "@purge-icons/generated": "^0.9.0",
"@types/intro.js": "^5.1.0", "@types/intro.js": "^5.1.0",
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.6",
"@types/node": "^18.11.17", "@types/node": "^18.11.18",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.0", "@types/qrcode": "^1.5.0",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.47.0", "@typescript-eslint/eslint-plugin": "^5.48.0",
"@typescript-eslint/parser": "^5.47.0", "@typescript-eslint/parser": "^5.48.0",
"@vitejs/plugin-legacy": "^3.0.1", "@vitejs/plugin-legacy": "^3.0.1",
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"consola": "^2.15.3", "consola": "^2.15.3",
"eslint": "^8.30.0", "eslint": "^8.31.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.6.0",
"eslint-define-config": "^1.12.0", "eslint-define-config": "^1.13.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.8.0", "eslint-plugin-vue": "^9.8.0",
"lint-staged": "^13.1.0", "lint-staged": "^13.1.0",
@ -84,9 +84,9 @@
"postcss-scss": "^4.0.6", "postcss-scss": "^4.0.6",
"prettier": "^2.8.1", "prettier": "^2.8.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^3.8.1", "rollup": "^3.9.1",
"sass": "^1.57.1", "sass": "^1.57.1",
"stylelint": "^14.16.0", "stylelint": "^14.16.1",
"stylelint-config-html": "^1.1.0", "stylelint-config-html": "^1.1.0",
"stylelint-config-prettier": "^9.0.4", "stylelint-config-prettier": "^9.0.4",
"stylelint-config-recommended": "^9.0.0", "stylelint-config-recommended": "^9.0.0",
@ -104,7 +104,7 @@
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0", "vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.8.10", "vite-plugin-windicss": "^1.8.10",
"vue-tsc": "^1.0.17", "vue-tsc": "^1.0.19",
"windicss": "^3.5.6" "windicss": "^3.5.6"
}, },
"engines": { "engines": {

523
yudao-ui-admin-vue3/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

3
yudao-ui-admin-vue3/src/components/XTable/index.ts Normal file
View File

@ -0,0 +1,3 @@
import XTable from './src/XTable.vue'
export { XTable }

335
yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue Normal file
View File

@ -0,0 +1,335 @@
<template>
<VxeGrid v-bind="getProps" ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar">
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
<slot :name="item" v-bind="data || {}"></slot>
</template>
</VxeGrid>
</template>
<script lang="ts" setup name="XTable">
import { computed, PropType, ref, unref, useAttrs, watch } from 'vue'
import { SizeType, VxeGridInstance } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { XTableProps } from './type'
import { isBoolean, isFunction } from '@/utils/is'
import { useMessage } from '@/hooks/web/useMessage'
import download from '@/utils/download'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const message = useMessage() // 消息弹窗
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('x-vxe-table')
const attrs = useAttrs()
const emit = defineEmits(['register'])
watch(
() => appStore.getIsDark,
() => {
if (appStore.getIsDark == true) {
import('./style/dark.scss')
}
if (appStore.getIsDark == false) {
import('./style/light.scss')
}
},
{ immediate: true }
)
const currentSize = computed(() => {
let resSize: SizeType = 'small'
const appsize = appStore.getCurrentSize
switch (appsize) {
case 'large':
resSize = 'medium'
break
case 'default':
resSize = 'small'
break
case 'small':
resSize = 'mini'
break
}
return resSize
})
const props = defineProps({
options: {
type: Object as PropType<XTableProps>,
default: () => {}
}
})
const innerProps = ref<Partial<XTableProps>>()
const getProps = computed(() => {
const options = innerProps.value || props.options
options.size = currentSize as any
options.height = 700
getOptionInitConfig(options)
getColumnsConfig(options)
getProxyConfig(options)
getPageConfig(options)
getToolBarConfig(options)
// console.log(options);
return {
...options,
...attrs
}
})
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
let proxyForm = false
const getOptionInitConfig = (options: XTableProps) => {
options.size = currentSize as any
options.rowConfig = {
isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
isHover: true // 当鼠标移到行时，是否要高亮当前行
}
}
// columns
const getColumnsConfig = (options: XTableProps) => {
const { allSchemas } = options
if (!allSchemas) return
if (allSchemas.printSchema) {
options.printConfig = {
columns: allSchemas.printSchema
}
}
if (allSchemas.formSchema) {
proxyForm = true
options.formConfig = {
enabled: true,
titleWidth: 100,
titleAlign: 'right',
items: allSchemas.searchSchema
}
}
if (allSchemas.tableSchema) {
options.columns = allSchemas.tableSchema
}
}
// 动态请求
const getProxyConfig = (options: XTableProps) => {
const { getListApi, proxyConfig, data, isList } = options
if (proxyConfig || data) return
if (getListApi && isFunction(getListApi) && !isList) {
if (!isList) {
options.proxyConfig = {
seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
form: proxyForm, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
props: { result: 'list', total: 'total' },
ajax: {
query: async ({ page, form }) => {
let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
if (options.params) {
queryParams = Object.assign(queryParams, options.params)
}
if (!options?.treeConfig) {
queryParams.pageSize = page.pageSize
queryParams.pageNo = page.currentPage
}
return new Promise(async (resolve) => {
resolve(await getListApi(queryParams))
})
},
delete: ({ body }) => {
return new Promise(async (resolve) => {
if (options.deleteApi) {
resolve(await options.deleteApi(JSON.stringify(body)))
} else {
Promise.reject('未设置deleteApi')
}
})
},
queryAll: ({ form }) => {
const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
return new Promise(async (resolve) => {
if (options.getAllListApi) {
resolve(await options.getAllListApi(queryParams))
} else {
resolve(await getListApi(queryParams))
}
})
}
}
}
} else {
options.proxyConfig = {
seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
props: { result: 'data' },
ajax: {
query: ({ form }) => {
let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
if (options?.params) {
queryParams = Object.assign(queryParams, options.params)
}
return new Promise(async (resolve) => {
resolve(await getListApi(queryParams))
})
}
}
}
}
}
if (options.exportListApi) {
options.exportConfig = {
filename: options?.exportName,
// 默认选中类型
type: 'csv',
// 自定义数据量列表
modes: options?.getAllListApi ? ['current', 'all'] : ['current'],
columns: options?.allSchemas?.printSchema
}
}
}
// 分页
const getPageConfig = (options: XTableProps) => {
const { pagination, pagerConfig, treeConfig } = options
if (treeConfig) {
options.treeConfig = options.treeConfig
return
}
if (pagerConfig) return
if (pagination) {
if (isBoolean(pagination)) {
options.pagerConfig = {
border: false, // 带边框
background: true, // 带背景颜色
perfect: false, // 配套的样式
pageSize: 10, // 每页大小
pagerCount: 7, // 显示页码按钮的数量
autoHidden: false, // 当只有一页时自动隐藏
pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
layouts: [
'PrevJump',
'PrevPage',
'JumpNumber',
'NextPage',
'NextJump',
'Sizes',
'FullJump',
'Total'
]
}
return
}
options.pagerConfig = pagination
} else {
if (pagination != false) {
options.pagerConfig = {
border: false, // 带边框
background: true, // 带背景颜色
perfect: false, // 配套的样式
pageSize: 10, // 每页大小
pagerCount: 7, // 显示页码按钮的数量
autoHidden: false, // 当只有一页时自动隐藏
pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
layouts: [
'PrevJump',
'PrevPage',
'JumpNumber',
'NextPage',
'NextJump',
'Sizes',
'FullJump',
'Total'
]
}
}
}
}
// tool bar
const getToolBarConfig = (options: XTableProps) => {
const { toolBar, toolbarConfig, topActionSlots } = options
if (toolbarConfig) return
if (toolBar) {
if (!isBoolean(toolBar)) {
options.toolbarConfig = toolBar
return
}
} else if (!topActionSlots) {
options.toolbarConfig = {
slots: { buttons: 'toolbar_buttons' }
}
}
}
// 刷新列表
const reload = () => {
const g = unref(xGrid)
if (!g) {
return
}
g.commitProxy('query')
}
// 删除
const deleteData = async (ids: string | number) => {
const g = unref(xGrid)
if (!g) {
return
}
const options = innerProps.value || props.options
if (!options.deleteApi) {
console.error('未传入delListApi')
return
}
return new Promise(async () => {
message.delConfirm().then(async () => {
await (options?.deleteApi && options?.deleteApi(ids))
message.success(t('common.delSuccess'))
// 刷新列表
reload()
})
})
}
// 导出
const exportList = async (fileName?: string) => {
const g = unref(xGrid)
if (!g) {
return
}
const options = innerProps.value || props.options
if (!options?.exportListApi) {
console.error('未传入exportListApi')
return
}
const queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form)))
message.exportConfirm().then(async () => {
const res = await (options?.exportListApi && options?.exportListApi(queryParams))
download.excel(res as unknown as Blob, fileName ? fileName : 'excel.xls')
})
}
// 获取查询参数
const getSearchData = () => {
const g = unref(xGrid)
if (!g) {
return
}
const queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form)))
return queryParams
}
const setProps = (prop: Partial<XTableProps>) => {
innerProps.value = { ...unref(innerProps), ...prop }
}
defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList })
emit('register', { reload, getSearchData, setProps, deleteData, exportList })
</script>
<style lang="scss">
@import './style/index.scss';
</style>

81
yudao-ui-admin-vue3/src/components/XTable/src/style/dark.scss Normal file
View File

@ -0,0 +1,81 @@
// 修改样式变量
//@import 'vxe-table/styles/variable.scss';
/*font*/
$vxe-font-color: #e5e7eb;
// $vxe-font-size: 14px !default;
// $vxe-font-size-medium: 16px !default;
// $vxe-font-size-small: 14px !default;
// $vxe-font-size-mini: 12px !default;
/*color*/
$vxe-primary-color: #409eff !default;
$vxe-success-color: #67c23a !default;
$vxe-info-color: #909399 !default;
$vxe-warning-color: #e6a23c !default;
$vxe-danger-color: #f56c6c !default;
$vxe-disabled-color: #bfbfbf !default;
$vxe-primary-disabled-color: #c0c4cc !default;
/*loading*/
$vxe-loading-color: $vxe-primary-color !default;
$vxe-loading-background-color: #1d1e1f !default;
$vxe-loading-z-index: 999 !default;
/*icon*/
$vxe-icon-font-family: Verdana, Arial, Tahoma !default;
$vxe-icon-background-color: #e5e7eb !default;
/*toolbar*/
$vxe-toolbar-background-color: #1d1e1f !default;
$vxe-toolbar-button-border: #dcdfe6 !default;
$vxe-toolbar-custom-active-background-color: #d9dadb !default;
$vxe-toolbar-panel-background-color: #e5e7eb !default;
$vxe-table-font-color: #e5e7eb;
$vxe-table-header-background-color: #1d1e1f;
$vxe-table-body-background-color: #141414;
$vxe-table-row-striped-background-color: #1d1d1d;
$vxe-table-row-hover-background-color: #1d1e1f;
$vxe-table-row-hover-striped-background-color: #1e1e1e;
$vxe-table-footer-background-color: #1d1e1f;
$vxe-table-row-current-background-color: #302d2d;
$vxe-table-column-current-background-color: #302d2d;
$vxe-table-column-hover-background-color: #302d2d;
$vxe-table-row-hover-current-background-color: #302d2d;
$vxe-table-row-checkbox-checked-background-color: #3e3c37 !default;
$vxe-table-row-hover-checkbox-checked-background-color: #615a4a !default;
$vxe-table-menu-background-color: #1d1e1f;
$vxe-table-border-width: 1px !default;
$vxe-table-border-color: #4c4d4f !default;
$vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px rgba(0, 0, 0, 0.12) !default;
$vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgba(0, 0, 0, 0.12) !default;
$vxe-form-background-color: #141414;
/*pager*/
$vxe-pager-background-color: #1d1e1f !default;
$vxe-pager-perfect-background-color: #262727 !default;
$vxe-pager-perfect-button-background-color: #a7a3a3 !default;
$vxe-input-background-color: #141414;
$vxe-input-border-color: #4c4d4f !default;
$vxe-select-option-hover-background-color: #262626 !default;
$vxe-select-panel-background-color: #141414 !default;
$vxe-select-empty-color: #262626 !default;
$vxe-optgroup-title-color: #909399 !default;
/*button*/
$vxe-button-default-background-color: #262626;
$vxe-button-dropdown-panel-background-color: #141414;
/*modal*/
$vxe-modal-header-background-color: #141414;
$vxe-modal-body-background-color: #141414;
$vxe-modal-border-color: #3b3b3b;
/*pulldown*/
$vxe-pulldown-panel-background-color: #262626 !default;
@import 'vxe-table/styles/index';

6
yudao-ui-admin-vue3/src/components/XTable/src/style/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import 'vxe-table/styles/variable.scss';
@import 'vxe-table/styles/modules.scss';
// @import './theme/light.scss';
i {
border-color: initial;
}

16
yudao-ui-admin-vue3/src/components/XTable/src/style/light.scss Normal file
View File

@ -0,0 +1,16 @@
// 修改样式变量
// /*font*/
// $vxe-font-size: 12px !default;
// $vxe-font-size-medium: 16px !default;
// $vxe-font-size-small: 14px !default;
// $vxe-font-size-mini: 12px !default;
/*color*/
$vxe-primary-color: #409eff !default;
$vxe-success-color: #67c23a !default;
$vxe-info-color: #909399 !default;
$vxe-warning-color: #e6a23c !default;
$vxe-danger-color: #f56c6c !default;
$vxe-disabled-color: #bfbfbf !default;
$vxe-primary-disabled-color: #c0c4cc !default;
@import 'vxe-table/styles/index.scss';

26
yudao-ui-admin-vue3/src/components/XTable/src/type.ts Normal file
View File

@ -0,0 +1,26 @@
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import type { VxeGridProps, VxeGridPropTypes, VxeTablePropTypes } from 'vxe-table'
export type XTableProps<D = any> = VxeGridProps<D> & {
allSchemas?: CrudSchema
height?: number // 高度 默认730
topActionSlots?: boolean // 是否开启表格内顶部操作栏插槽
treeConfig?: VxeTablePropTypes.TreeConfig // 树形表单配置
isList?: boolean // 是否不带分页的list
getListApi?: Function
getAllListApi?: Function
deleteApi?: Function
exportListApi?: Function
exportName?: string // 导出文件夹名称
params?: any
pagination?: boolean | VxeGridPropTypes.PagerConfig
toolBar?: boolean | VxeGridPropTypes.ToolbarConfig
afterFetch?: Function
}
export type XColumns = VxeGridPropTypes.Columns
export type VxeTableColumn = {
field: string
title?: string
children?: VxeTableColumn[]
} & Recordable

2
yudao-ui-admin-vue3/src/components/index.ts
View File

@ -4,6 +4,7 @@ import { Form } from '@/components/Form'
import { Table } from '@/components/Table' import { Table } from '@/components/Table'
import { Search } from '@/components/Search' import { Search } from '@/components/Search'
import { XModal } from '@/components/XModal' import { XModal } from '@/components/XModal'
import { XTable } from '@/components/XTable'
import { XButton, XTextButton } from '@/components/XButton' import { XButton, XTextButton } from '@/components/XButton'
import { DictTag } from '@/components/DictTag' import { DictTag } from '@/components/DictTag'
import { ContentWrap } from '@/components/ContentWrap' import { ContentWrap } from '@/components/ContentWrap'
@ -15,6 +16,7 @@ export const setupGlobCom = (app: App<Element>): void => {
app.component('Table', Table) app.component('Table', Table)
app.component('Search', Search) app.component('Search', Search)
app.component('XModal', XModal) app.component('XModal', XModal)
app.component('XTable', XTable)
app.component('XButton', XButton) app.component('XButton', XButton)
app.component('XTextButton', XTextButton) app.component('XTextButton', XTextButton)
app.component('DictTag', DictTag) app.component('DictTag', DictTag)

32
yudao-ui-admin-vue3/src/hooks/web/useXTable.ts Normal file
View File

@ -0,0 +1,32 @@
import { ref, unref } from 'vue'
import { XTableProps } from '@/components/XTable/src/type'
export interface tableMethod {
reload: () => void
setProps: (props: XTableProps) => void
deleteData: (ids: string | number) => void
exportList: (fileName?: string) => void
}
export const useXTable = (props: XTableProps): [Function, tableMethod] => {
const tableRef = ref<Nullable<tableMethod>>(null)
const register = (instance) => {
tableRef.value = instance
props && instance.setProps(props)
}
const getInstance = (): tableMethod => {
const table = unref(tableRef)
if (!table) {
console.error('表格实例不存在')
}
return table as tableMethod
}
const methods: tableMethod = {
reload: () => getInstance().reload(),
setProps: (props) => getInstance().setProps(props),
deleteData: (ids: string | number) => getInstance().deleteData(ids),
exportList: (fileName?: string) => getInstance().exportList(fileName)
}
return [register, methods]
}

19
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
View File

@ -1,9 +1,7 @@
import { App, unref, watch } from 'vue' import { App, unref } from 'vue'
import XEUtils from 'xe-utils' import XEUtils from 'xe-utils'
import './index.scss'
import './renderer' import './renderer'
import { i18n } from '@/plugins/vueI18n' import { i18n } from '@/plugins/vueI18n'
import { useAppStore } from '@/store/modules/app'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN' import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
import enUS from 'vxe-table/lib/locale/lang/en-US' import enUS from 'vxe-table/lib/locale/lang/en-US'
import { import {
@ -46,21 +44,6 @@ import {
Table Table
} from 'vxe-table' } from 'vxe-table'
const appStore = useAppStore()
watch(
() => appStore.getIsDark,
() => {
if (appStore.getIsDark) {
import('./theme/dark.scss')
} else {
import('./theme/light.scss')
}
},
{
deep: true,
immediate: true
}
)
// 全局默认参数 // 全局默认参数
VXETable.setup({ VXETable.setup({
size: 'medium', // 全局尺寸 size: 'medium', // 全局尺寸

11
yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #duration_default="{ row }"> <template #duration_default="{ row }">
<span>{{ row.duration + 'ms' }}</span> <span>{{ row.duration + 'ms' }}</span>
</template> </template>
@ -17,7 +17,7 @@
@click="handleDetail(row)" @click="handleDetail(row)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) --> <!-- 对话框(详情) -->
@ -38,15 +38,14 @@
<script setup lang="ts" name="ApiAccessLog"> <script setup lang="ts" name="ApiAccessLog">
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { allSchemas } from './apiAccessLog.data' import { allSchemas } from './apiAccessLog.data'
import * as ApiAccessLogApi from '@/api/infra/apiAccessLog' import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable] = useXTable({
const { gridOptions } = useVxeGrid<ApiAccessLogApi.ApiAccessLogVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
topActionSlots: false, topActionSlots: false,
getListApi: ApiAccessLogApi.getApiAccessLogPageApi getListApi: ApiAccessLogApi.getApiAccessLogPageApi

17
yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：导出 --> <!-- 操作：导出 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -40,7 +40,7 @@
@click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')" @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) --> <!-- 对话框(详情) -->
@ -54,18 +54,17 @@
<script setup lang="ts" name="ApiErrorLog"> <script setup lang="ts" name="ApiErrorLog">
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { allSchemas } from './apiErrorLog.data' import { allSchemas } from './apiErrorLog.data'
import * as ApiErrorLogApi from '@/api/infra/apiErrorLog' import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants' import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
const message = useMessage()
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage()
// ========== 列表相关 ========== // ========== 列表相关 ==========
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, exportList }] = useXTable({
const { gridOptions, getList, exportList } = useVxeGrid<ApiErrorLogApi.ApiErrorLogVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: ApiErrorLogApi.getApiErrorLogPageApi, getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
exportListApi: ApiErrorLogApi.exportApiErrorLogApi exportListApi: ApiErrorLogApi.exportApiErrorLogApi
@ -84,7 +83,7 @@ const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) => {
} }
// 导出 // 导出
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '错误数据.xls') await exportList('错误数据.xls')
} }
// 异常处理操作 // 异常处理操作
const handleProcessClick = ( const handleProcessClick = (
@ -100,7 +99,7 @@ const handleProcessClick = (
}) })
.finally(async () => { .finally(async () => {
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
}) })
.catch(() => {}) .catch(() => {})
} }

14
yudao-ui-admin-vue3/src/views/infra/codegen/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：导入 --> <!-- 操作：导入 -->
<XButton <XButton
@ -49,7 +49,7 @@
@click="handleGenTable(row)" @click="handleGenTable(row)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗：导入表 --> <!-- 弹窗：导入表 -->
<ImportTable ref="importRef" @ok="handleQuery()" /> <ImportTable ref="importRef" @ok="handleQuery()" />
@ -59,10 +59,9 @@
<script setup lang="ts" name="Codegen"> <script setup lang="ts" name="Codegen">
import { ref } from 'vue' import { ref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { VxeGridInstance } from 'vxe-table'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import download from '@/utils/download' import download from '@/utils/download'
import * as CodegenApi from '@/api/infra/codegen' import * as CodegenApi from '@/api/infra/codegen'
import { CodegenTableVO } from '@/api/infra/codegen/types' import { CodegenTableVO } from '@/api/infra/codegen/types'
@ -73,8 +72,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由跳转 const { push } = useRouter() // 路由跳转
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<CodegenTableVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: CodegenApi.getCodegenTablePageApi, getListApi: CodegenApi.getCodegenTablePageApi,
deleteApi: CodegenApi.deleteCodegenTableApi deleteApi: CodegenApi.deleteCodegenTableApi
@ -112,10 +110,10 @@ const handleGenTable = async (row: CodegenTableVO) => {
} }
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 查询操作 // 查询操作
const handleQuery = async () => { const handleQuery = async () => {
await getList(xGrid) await reload()
} }
</script> </script>

16
yudao-ui-admin-vue3/src/views/infra/config/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -46,7 +46,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
@ -87,8 +87,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import * as ConfigApi from '@/api/infra/config' import * as ConfigApi from '@/api/infra/config'
@ -97,8 +96,7 @@ import { rules, allSchemas } from './config.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<ConfigApi.ConfigVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: ConfigApi.getConfigPageApi, getListApi: ConfigApi.getConfigPageApi,
deleteApi: ConfigApi.deleteConfigApi, deleteApi: ConfigApi.deleteConfigApi,
@ -127,7 +125,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '配置.xls') await exportList('配置.xls')
} }
// 修改操作 // 修改操作
@ -147,7 +145,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -171,7 +169,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/infra/dataSourceConfig/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
type="primary" type="primary"
@ -34,7 +34,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -69,9 +69,8 @@
// 全局相关的 import // 全局相关的 import
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useXTable } from '@/hooks/web/useXTable'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig' import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig'
@ -80,8 +79,7 @@ import { rules, allSchemas } from './dataSourceConfig.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<DataSourceConfiggApi.DataSourceConfigVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
isList: true, isList: true,
getListApi: DataSourceConfiggApi.getDataSourceConfigListApi, getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
@ -125,7 +123,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -149,7 +147,7 @@ const submitForm = async () => {
} finally { } finally {
loading.value = false loading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

16
yudao-ui-admin-vue3/src/views/infra/fileConfig/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -44,7 +44,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -173,8 +173,7 @@ import {
} from 'element-plus' } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
// 业务相关的 import // 业务相关的 import
import * as FileConfigApi from '@/api/infra/fileConfig' import * as FileConfigApi from '@/api/infra/fileConfig'
import { rules, allSchemas } from './fileConfig.data' import { rules, allSchemas } from './fileConfig.data'
@ -183,8 +182,7 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<FileConfigApi.FileConfigVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: FileConfigApi.getFileConfigPageApi, getListApi: FileConfigApi.getFileConfigPageApi,
deleteApi: FileConfigApi.deleteFileConfigApi deleteApi: FileConfigApi.deleteFileConfigApi
@ -276,7 +274,7 @@ const handleMaster = (row: FileConfigApi.FileConfigVO) => {
.confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder')) .confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'))
.then(async () => { .then(async () => {
await FileConfigApi.updateFileConfigMasterApi(row.id) await FileConfigApi.updateFileConfigMasterApi(row.id)
await getList(xGrid) await reload()
}) })
} }
@ -287,7 +285,7 @@ const handleTest = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -308,7 +306,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false
await getList(xGrid) await reload()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/infra/fileList/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
type="primary" type="primary"
@ -24,7 +24,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) --> <!-- 对话框(详情) -->
@ -85,8 +85,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { ElUpload, ElImage, UploadInstance, UploadRawFile } from 'element-plus' import { ElUpload, ElImage, UploadInstance, UploadRawFile } from 'element-plus'
// 业务相关的 import // 业务相关的 import
import { allSchemas } from './fileList.data' import { allSchemas } from './fileList.data'
@ -98,8 +97,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<FileApi.FileVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: FileApi.getFilePageApi, getListApi: FileApi.getFilePageApi,
deleteApi: FileApi.deleteFileApi deleteApi: FileApi.deleteFileApi
@ -145,7 +143,7 @@ const handleFileSuccess = async (response: any): Promise<void> => {
message.success('上传成功') message.success('上传成功')
uploadDialogVisible.value = false uploadDialogVisible.value = false
uploadDisabled.value = false uploadDisabled.value = false
await getList(xGrid) await reload()
} }
// 文件数超出提示 // 文件数超出提示
const handleExceed = (): void => { const handleExceed = (): void => {
@ -166,7 +164,7 @@ const handleDetail = (row: FileApi.FileVO) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// ========== 复制相关 ========== // ========== 复制相关 ==========

12
yudao-ui-admin-vue3/src/views/infra/job/JobLog.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
type="warning" type="warning"
@ -29,7 +29,7 @@
@click="handleDetail(row)" @click="handleDetail(row)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) --> <!-- 对话框(详情) -->
@ -51,15 +51,13 @@
import { ref } from 'vue' import { ref } from 'vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import * as JobLogApi from '@/api/infra/jobLog' import * as JobLogApi from '@/api/infra/jobLog'
import { allSchemas } from './jobLog.data' import { allSchemas } from './jobLog.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { exportList }] = useXTable({
const { gridOptions, exportList } = useVxeGrid<JobLogApi.JobLogVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: JobLogApi.getJobLogPageApi, getListApi: JobLogApi.getJobLogPageApi,
exportListApi: JobLogApi.exportJobLogApi exportListApi: JobLogApi.exportJobLogApi
@ -81,6 +79,6 @@ const handleDetail = async (row: JobLogApi.JobLogVO) => {
} }
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '定时任务详情.xls') await exportList('定时任务详情.xls')
} }
</script> </script>

20
yudao-ui-admin-vue3/src/views/infra/job/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -83,7 +83,7 @@
</template> </template>
</el-dropdown> </el-dropdown>
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -134,8 +134,7 @@ import { useRouter } from 'vue-router'
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus' import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { Crontab } from '@/components/Crontab' import { Crontab } from '@/components/Crontab'
import * as JobApi from '@/api/infra/job' import * as JobApi from '@/api/infra/job'
@ -147,8 +146,7 @@ const message = useMessage() // 消息弹窗
const { push } = useRouter() const { push } = useRouter()
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<JobApi.JobVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: JobApi.getJobPageApi, getListApi: JobApi.getJobPageApi,
deleteApi: JobApi.deleteJobApi, deleteApi: JobApi.deleteJobApi,
@ -183,7 +181,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '定时任务.xls') await exportList('定时任务.xls')
} }
// 修改操作 // 修改操作
@ -252,7 +250,7 @@ const parseTime = (time) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
const handleChangeStatus = async (row: JobApi.JobVO) => { const handleChangeStatus = async (row: JobApi.JobVO) => {
const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭' const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
@ -267,7 +265,7 @@ const handleChangeStatus = async (row: JobApi.JobVO) => {
: InfraJobStatusEnum.STOP : InfraJobStatusEnum.STOP
await JobApi.updateJobStatusApi(row.id, status) await JobApi.updateJobStatusApi(row.id, status)
message.success(text + '成功') message.success(text + '成功')
await getList(xGrid) await reload()
}) })
.catch(() => { .catch(() => {
row.status = row.status =
@ -289,7 +287,7 @@ const handleRun = (row: JobApi.JobVO) => {
message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => { message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
await JobApi.runJobApi(row.id) await JobApi.runJobApi(row.id)
message.success('执行成功') message.success('执行成功')
await getList(xGrid) await reload()
}) })
} }
// 提交按钮 // 提交按钮
@ -312,7 +310,7 @@ const submitForm = async () => {
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false
await getList(xGrid) await reload()
} }
} }
}) })

16
yudao-ui-admin-vue3/src/views/pay/app/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -43,7 +43,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
@ -79,8 +79,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './app.data' import { rules, allSchemas } from './app.data'
import * as AppApi from '@/api/pay/app' import * as AppApi from '@/api/pay/app'
@ -89,8 +88,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<AppApi.AppVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: AppApi.getAppPageApi, getListApi: AppApi.getAppPageApi,
deleteApi: AppApi.deleteAppApi, deleteApi: AppApi.deleteAppApi,
@ -119,7 +117,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '应用信息.xls') await exportList('应用信息.xls')
} }
// 修改操作 // 修改操作
@ -139,7 +137,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -163,7 +161,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

16
yudao-ui-admin-vue3/src/views/pay/merchant/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -43,7 +43,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -78,8 +78,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './merchant.data' import { rules, allSchemas } from './merchant.data'
import * as MerchantApi from '@/api/pay/merchant' import * as MerchantApi from '@/api/pay/merchant'
@ -87,8 +86,7 @@ import * as MerchantApi from '@/api/pay/merchant'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<MerchantApi.MerchantVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: MerchantApi.getMerchantPageApi, getListApi: MerchantApi.getMerchantPageApi,
deleteApi: MerchantApi.deleteMerchantApi, deleteApi: MerchantApi.deleteMerchantApi,
@ -117,7 +115,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '商户列表.xls') await exportList('商户列表.xls')
} }
// 修改操作 // 修改操作
@ -137,7 +135,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -161,7 +159,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

12
yudao-ui-admin-vue3/src/views/pay/order/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -29,7 +29,7 @@
@click="handleDetail(row.id)" @click="handleDetail(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) --> <!-- 对话框(详情) -->
@ -44,15 +44,13 @@
<script setup lang="ts" name="Order"> <script setup lang="ts" name="Order">
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { allSchemas } from './order.data' import { allSchemas } from './order.data'
import * as OrderApi from '@/api/pay/order' import * as OrderApi from '@/api/pay/order'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { exportList }] = useXTable({
const { gridOptions, exportList } = useVxeGrid<OrderApi.OrderVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: OrderApi.getOrderPageApi, getListApi: OrderApi.getOrderPageApi,
exportListApi: OrderApi.exportOrderApi exportListApi: OrderApi.exportOrderApi
@ -76,7 +74,7 @@ const handleCreate = () => {
} }
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '订单数据.xls') await exportList('订单数据.xls')
} }
// 详情操作 // 详情操作

12
yudao-ui-admin-vue3/src/views/pay/refund/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：导出 --> <!-- 操作：导出 -->
<XButton <XButton
@ -21,7 +21,7 @@
@click="handleDetail(row.id)" @click="handleDetail(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="t('action.detail')"> <XModal v-model="dialogVisible" :title="t('action.detail')">
@ -36,16 +36,14 @@
<script setup lang="ts" name="Refund"> <script setup lang="ts" name="Refund">
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { allSchemas } from './refund.data' import { allSchemas } from './refund.data'
import * as RefundApi from '@/api/pay/refund' import * as RefundApi from '@/api/pay/refund'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { exportList }] = useXTable({
const { gridOptions, exportList } = useVxeGrid<RefundApi.RefundVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: RefundApi.getRefundPageApi, getListApi: RefundApi.getRefundPageApi,
exportListApi: RefundApi.exportRefundApi exportListApi: RefundApi.exportRefundApi
@ -53,7 +51,7 @@ const { gridOptions, exportList } = useVxeGrid<RefundApi.RefundVO>({
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '退款订单.xls') await exportList('退款订单.xls')
} }
// ========== CRUD 相关 ========== // ========== CRUD 相关 ==========

12
yudao-ui-admin-vue3/src/views/system/dept/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" show-overflow class="xtable-scrollbar"> <XTable @register="registerTable" show-overflow>
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -33,7 +33,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<XModal id="deptModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="deptModel" v-model="dialogVisible" :title="dialogTitle">
@ -81,7 +81,7 @@ import { VxeGridInstance } from 'vxe-table'
import { handleTree, defaultProps } from '@/utils/tree' import { handleTree, defaultProps } from '@/utils/tree'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { allSchemas, rules } from './dept.data' import { allSchemas, rules } from './dept.data'
import * as DeptApi from '@/api/system/dept' import * as DeptApi from '@/api/system/dept'
@ -119,7 +119,7 @@ const getTree = async () => {
dept.children = handleTree(res) dept.children = handleTree(res)
deptOptions.value.push(dept) deptOptions.value.push(dept)
} }
const { gridOptions, getList, deleteData } = useVxeGrid<DeptApi.DeptVO>({ const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas, allSchemas: allSchemas,
treeConfig: treeConfig, treeConfig: treeConfig,
getListApi: DeptApi.getDeptPageApi, getListApi: DeptApi.getDeptPageApi,
@ -168,7 +168,7 @@ const submitForm = async () => {
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false
await getList(xGrid) await reload()
} }
} }
}) })
@ -176,7 +176,7 @@ const submitForm = async () => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
const userNicknameFormat = (row) => { const userNicknameFormat = (row) => {

43
yudao-ui-admin-vue3/src/views/system/dict/index.vue
View File

@ -7,12 +7,7 @@
<span>字典分类</span> <span>字典分类</span>
</div> </div>
</template> </template>
<vxe-grid <XTable @register="registerType" @cell-click="cellClickEvent">
ref="xTypeGrid"
v-bind="typeGridOptions"
@cell-click="cellClickEvent"
class="xtable-scrollbar"
>
<!-- 操作：新增类型 --> <!-- 操作：新增类型 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -39,7 +34,7 @@
@click="handleTypeDelete(row.id)" @click="handleTypeDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
<!-- @星语：分页和列表重叠在一起了 --> <!-- @星语：分页和列表重叠在一起了 -->
</el-card> </el-card>
<!-- ====== 字典数据 ====== --> <!-- ====== 字典数据 ====== -->
@ -55,7 +50,7 @@
</div> </div>
<div v-if="tableTypeSelect"> <div v-if="tableTypeSelect">
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xDataGrid" v-bind="dataGridOptions" class="xtable-scrollbar"> <XTable @register="registerData">
<!-- 操作：新增数据 --> <!-- 操作：新增数据 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -82,7 +77,7 @@
@click="handleDataDelete(row.id)" @click="handleDataDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</div> </div>
</el-card> </el-card>
<XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
@ -130,8 +125,8 @@
import { ref, unref, reactive } from 'vue' import { ref, unref, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance, VxeTableEvents } from 'vxe-table' import { VxeTableEvents } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { ElInput, ElTag, ElCard } from 'element-plus' import { ElInput, ElTag, ElCard } from 'element-plus'
import * as DictTypeSchemas from './dict.type' import * as DictTypeSchemas from './dict.type'
@ -143,28 +138,18 @@ import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const xTypeGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
const {
gridOptions: typeGridOptions,
getList: typeGetList,
deleteData: typeDeleteData
} = useVxeGrid<DictTypeVO>({
allSchemas: DictTypeSchemas.allSchemas, allSchemas: DictTypeSchemas.allSchemas,
getListApi: DictTypeApi.getDictTypePageApi, getListApi: DictTypeApi.getDictTypePageApi,
deleteApi: DictTypeApi.deleteDictTypeApi deleteApi: DictTypeApi.deleteDictTypeApi
}) })
const xDataGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const queryParams = reactive({ const queryParams = reactive({
dictType: null dictType: null
}) })
const { const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
gridOptions: dataGridOptions,
getList: dataGetList,
deleteData: dataDeleteData
} = useVxeGrid<DictDataVO>({
allSchemas: DictDataSchemas.allSchemas, allSchemas: DictDataSchemas.allSchemas,
queryParams: queryParams, params: queryParams,
getListApi: DictDataApi.getDictDataPageApi, getListApi: DictDataApi.getDictDataPageApi,
deleteApi: DictDataApi.deleteDictDataApi deleteApi: DictDataApi.deleteDictDataApi
}) })
@ -199,7 +184,7 @@ const tableTypeSelect = ref(false)
const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => { const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
tableTypeSelect.value = true tableTypeSelect.value = true
queryParams.dictType = row['type'] queryParams.dictType = row['type']
await dataGetList(xDataGrid) await dataGetList()
parentType.value = row['type'] parentType.value = row['type']
} }
// 弹出框 // 弹出框
@ -219,11 +204,11 @@ const setDialogTile = (type: string) => {
// 删除操作 // 删除操作
const handleTypeDelete = async (rowId: number) => { const handleTypeDelete = async (rowId: number) => {
await typeDeleteData(xTypeGrid, rowId) await typeDeleteData(rowId)
} }
const handleDataDelete = async (rowId: number) => { const handleDataDelete = async (rowId: number) => {
await dataDeleteData(xDataGrid, rowId) await dataDeleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -247,7 +232,7 @@ const submitTypeForm = async () => {
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false
typeGetList(xTypeGrid) typeGetList()
} }
} }
}) })
@ -272,7 +257,7 @@ const submitDataForm = async () => {
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false
dataGetList(xDataGrid) dataGetList()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/system/errorCode/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：新增 --> <!-- 操作：新增 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -35,7 +35,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
@ -71,8 +71,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import { rules, allSchemas } from './errorCode.data' import { rules, allSchemas } from './errorCode.data'
@ -81,8 +80,7 @@ import * as ErrorCodeApi from '@/api/system/errorCode'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: ErrorCodeApi.getErrorCodePageApi, getListApi: ErrorCodeApi.getErrorCodePageApi,
deleteApi: ErrorCodeApi.deleteErrorCodeApi deleteApi: ErrorCodeApi.deleteErrorCodeApi
@ -125,7 +123,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交新增/修改的表单 // 提交新增/修改的表单
@ -149,7 +147,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

12
yudao-ui-admin-vue3/src/views/system/loginlog/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：导出 --> <!-- 操作：导出 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -15,7 +15,7 @@
<!-- 操作：详情 --> <!-- 操作：详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
@ -31,16 +31,14 @@
// 全局相关的 import // 全局相关的 import
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
// 业务相关的 import // 业务相关的 import
import { allSchemas } from './loginLog.data' import { allSchemas } from './loginLog.data'
import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog' import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { exportList }] = useXTable({
const { gridOptions, exportList } = useVxeGrid<LoginLogVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: getLoginLogPageApi, getListApi: getLoginLogPageApi,
exportListApi: exportLoginLogApi exportListApi: exportLoginLogApi
@ -59,6 +57,6 @@ const handleDetail = async (row: LoginLogVO) => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '登录列表.xls') await exportList('登录列表.xls')
} }
</script> </script>

12
yudao-ui-admin-vue3/src/views/system/menu/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" show-overflow class="xtable-scrollbar"> <XTable @register="registerTable" show-overflow>
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -34,7 +34,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
@ -201,7 +201,7 @@ import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
import { handleTree, defaultProps } from '@/utils/tree' import { handleTree, defaultProps } from '@/utils/tree'
import * as MenuApi from '@/api/system/menu' import * as MenuApi from '@/api/system/menu'
import { allSchemas, rules } from './menu.data' import { allSchemas, rules } from './menu.data'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
@ -215,7 +215,7 @@ const treeConfig = {
parentField: 'parentId', parentField: 'parentId',
expandAll: false expandAll: false
} }
const { gridOptions, getList, deleteData } = useVxeGrid<MenuApi.MenuVO>({ const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas, allSchemas: allSchemas,
treeConfig: treeConfig, treeConfig: treeConfig,
getListApi: MenuApi.getMenuListApi, getListApi: MenuApi.getMenuListApi,
@ -326,7 +326,7 @@ const submitForm = async () => {
actionLoading.value = false actionLoading.value = false
wsCache.delete(CACHE_KEY.ROLE_ROUTERS) wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
// 操作成功，重新加载列表 // 操作成功，重新加载列表
await getList(xGrid) await reload()
} }
} }
@ -338,6 +338,6 @@ const isExternal = (path: string) => {
// ========== 删除 ========== // ========== 删除 ==========
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
</script> </script>

14
yudao-ui-admin-vue3/src/views/system/notice/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：新增 --> <!-- 操作：新增 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -35,7 +35,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
@ -75,8 +75,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import * as NoticeApi from '@/api/system/notice' import * as NoticeApi from '@/api/system/notice'
@ -86,8 +85,7 @@ import { Editor } from '@/components/Editor'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<NoticeApi.NoticeVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi, getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi deleteApi: NoticeApi.deleteNoticeApi
@ -130,7 +128,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交新增/修改的表单 // 提交新增/修改的表单
@ -153,7 +151,7 @@ const submitForm = async () => {
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false
await getList(xGrid) await reload()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/system/oauth2/client/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -51,7 +51,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
@ -135,8 +135,7 @@ import { ref, unref } from 'vue'
import { ElTag } from 'element-plus' import { ElTag } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import * as ClientApi from '@/api/system/oauth2/client' import * as ClientApi from '@/api/system/oauth2/client'
@ -146,8 +145,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<ClientApi.OAuth2ClientVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: ClientApi.getOAuth2ClientPageApi, getListApi: ClientApi.getOAuth2ClientPageApi,
deleteApi: ClientApi.deleteOAuth2ClientApi deleteApi: ClientApi.deleteOAuth2ClientApi
@ -188,7 +186,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交新增/修改的表单 // 提交新增/修改的表单
@ -212,7 +210,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

12
yudao-ui-admin-vue3/src/views/system/oauth2/token/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #actionbtns_default="{ row }"> <template #actionbtns_default="{ row }">
<!-- 操作：详情 --> <!-- 操作：详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
@ -13,7 +13,7 @@
@click="handleForceLogout(row.id)" @click="handleForceLogout(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) --> <!-- 对话框(详情) -->
@ -28,8 +28,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { allSchemas } from './token.data' import { allSchemas } from './token.data'
import * as TokenApi from '@/api/system/oauth2/token' import * as TokenApi from '@/api/system/oauth2/token'
@ -37,8 +36,7 @@ import * as TokenApi from '@/api/system/oauth2/token'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload }] = useXTable({
const { gridOptions, getList } = useVxeGrid<TokenApi.OAuth2TokenVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
topActionSlots: false, topActionSlots: false,
getListApi: TokenApi.getAccessTokenPageApi getListApi: TokenApi.getAccessTokenPageApi
@ -65,7 +63,7 @@ const handleForceLogout = (rowId: number) => {
}) })
.finally(async () => { .finally(async () => {
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
}) })
} }
</script> </script>

12
yudao-ui-admin-vue3/src/views/system/operatelog/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -22,7 +22,7 @@
<!-- 操作：详情 --> <!-- 操作：详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')"> <XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')">
@ -45,16 +45,14 @@
// 全局相关的 import // 全局相关的 import
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
// 业务相关的 import // 业务相关的 import
import * as OperateLogApi from '@/api/system/operatelog' import * as OperateLogApi from '@/api/system/operatelog'
import { allSchemas } from './operatelog.data' import { allSchemas } from './operatelog.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { exportList }] = useXTable({
const { gridOptions, exportList } = useVxeGrid<OperateLogApi.OperateLogVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: OperateLogApi.getOperateLogPageApi, getListApi: OperateLogApi.getOperateLogPageApi,
exportListApi: OperateLogApi.exportOperateLogApi exportListApi: OperateLogApi.exportOperateLogApi
@ -73,6 +71,6 @@ const handleDetail = (row: OperateLogApi.OperateLogVO) => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '操作日志.xls') await exportList('操作日志.xls')
} }
</script> </script>

16
yudao-ui-admin-vue3/src/views/system/post/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -43,7 +43,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<!-- 弹窗 --> <!-- 弹窗 -->
<XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"> <XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
@ -79,8 +79,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import * as PostApi from '@/api/system/post' import * as PostApi from '@/api/system/post'
@ -89,8 +88,7 @@ import { rules, allSchemas } from './post.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<PostApi.PostVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: PostApi.getPostPageApi, getListApi: PostApi.getPostPageApi,
deleteApi: PostApi.deletePostApi, deleteApi: PostApi.deletePostApi,
@ -121,7 +119,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '岗位列表.xls') await exportList('岗位列表.xls')
} }
// 修改操作 // 修改操作
@ -143,7 +141,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交新增/修改的表单 // 提交新增/修改的表单
@ -167,7 +165,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/system/role/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：新增 --> <!-- 操作：新增 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -49,7 +49,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
@ -159,11 +159,10 @@ import {
ElSwitch, ElSwitch,
ElTag ElTag
} from 'element-plus' } from 'element-plus'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { handleTree, defaultProps } from '@/utils/tree' import { handleTree, defaultProps } from '@/utils/tree'
import { SystemDataScopeEnum } from '@/utils/constants' import { SystemDataScopeEnum } from '@/utils/constants'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@ -176,8 +175,7 @@ import * as PermissionApi from '@/api/system/permission'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<RoleApi.RoleVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: RoleApi.getRolePageApi, getListApi: RoleApi.getRolePageApi,
deleteApi: RoleApi.deleteRoleApi deleteApi: RoleApi.deleteRoleApi
@ -221,7 +219,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -245,7 +243,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

27
yudao-ui-admin-vue3/src/views/system/sensitiveWord/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -53,7 +53,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
@ -106,8 +106,7 @@
import { onMounted, ref, unref } from 'vue' import { onMounted, ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { ElTag, ElSelect, ElOption } from 'element-plus' import { ElTag, ElSelect, ElOption } from 'element-plus'
import * as SensitiveWordApi from '@/api/system/sensitiveWord' import * as SensitiveWordApi from '@/api/system/sensitiveWord'
@ -116,14 +115,12 @@ import { rules, allSchemas } from './sensitiveWord.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = allSchemas: allSchemas,
useVxeGrid<SensitiveWordApi.SensitiveWordVO>({ getListApi: SensitiveWordApi.getSensitiveWordPageApi,
allSchemas: allSchemas, deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
getListApi: SensitiveWordApi.getSensitiveWordPageApi, exportListApi: SensitiveWordApi.exportSensitiveWordApi
deleteApi: SensitiveWordApi.deleteSensitiveWordApi, })
exportListApi: SensitiveWordApi.exportSensitiveWordApi
})
const actionLoading = ref(false) // 遮罩层 const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型 const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层 const dialogVisible = ref(false) // 是否显示弹出层
@ -152,7 +149,7 @@ const handleCreate = () => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '敏感词数据.xls') await exportList('敏感词数据.xls')
} }
// 修改操作 // 修改操作
@ -172,7 +169,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -196,7 +193,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/system/sms/smsChannel/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：新增 --> <!-- 操作：新增 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -35,7 +35,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal id="smsChannel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="smsChannel" v-model="dialogVisible" :title="dialogTitle">
@ -72,8 +72,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
// 业务相关的 import // 业务相关的 import
import * as SmsChannelApi from '@/api/system/sms/smsChannel' import * as SmsChannelApi from '@/api/system/sms/smsChannel'
@ -83,8 +82,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<SmsChannelApi.SmsChannelVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: SmsChannelApi.getSmsChannelPageApi, getListApi: SmsChannelApi.getSmsChannelPageApi,
deleteApi: SmsChannelApi.deleteSmsChannelApi deleteApi: SmsChannelApi.deleteSmsChannelApi
@ -127,7 +125,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -151,7 +149,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

12
yudao-ui-admin-vue3/src/views/system/sms/smsLog/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：导出 --> <!-- 操作：导出 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -14,7 +14,7 @@
<template #actionbtns_default="{ row }"> <template #actionbtns_default="{ row }">
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal id="smsLog" v-model="dialogVisible" :title="dialogTitle"> <XModal id="smsLog" v-model="dialogVisible" :title="dialogTitle">
@ -34,15 +34,13 @@
// 全局相关的 import // 全局相关的 import
import { ref } from 'vue' import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { allSchemas } from './sms.log.data' import { allSchemas } from './sms.log.data'
import * as SmsLoglApi from '@/api/system/sms/smsLog' import * as SmsLoglApi from '@/api/system/sms/smsLog'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { exportList }] = useXTable({
const { gridOptions, exportList } = useVxeGrid<SmsLoglApi.SmsLogVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: SmsLoglApi.getSmsLogPageApi, getListApi: SmsLoglApi.getSmsLogPageApi,
exportListApi: SmsLoglApi.exportSmsLogApi exportListApi: SmsLoglApi.exportSmsLogApi
@ -62,6 +60,6 @@ const handleDetail = (row: SmsLoglApi.SmsLogVO) => {
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '短信日志.xls') await exportList('短信日志.xls')
} }
</script> </script>

14
yudao-ui-admin-vue3/src/views/system/sms/smsTemplate/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<!-- 操作：新增 --> <!-- 操作：新增 -->
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
@ -41,7 +41,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal id="smsTemplate" v-model="dialogVisible" :title="dialogTitle"> <XModal id="smsTemplate" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -113,8 +113,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { ElForm, ElFormItem, ElInput } from 'element-plus' import { ElForm, ElFormItem, ElInput } from 'element-plus'
// 业务相关的 import // 业务相关的 import
@ -125,8 +124,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData }] = useXTable({
const { gridOptions, getList, deleteData } = useVxeGrid<SmsTemplateApi.SmsTemplateVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: SmsTemplateApi.getSmsTemplatePageApi, getListApi: SmsTemplateApi.getSmsTemplatePageApi,
deleteApi: SmsTemplateApi.deleteSmsTemplateApi deleteApi: SmsTemplateApi.deleteSmsTemplateApi
@ -170,7 +168,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -194,7 +192,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

16
yudao-ui-admin-vue3/src/views/system/tenant/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -49,7 +49,7 @@
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
/> />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -89,8 +89,7 @@
import { ref, unref } from 'vue' import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { ElTag } from 'element-plus' import { ElTag } from 'element-plus'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import * as TenantApi from '@/api/system/tenant' import * as TenantApi from '@/api/system/tenant'
@ -99,8 +98,7 @@ import { rules, allSchemas, tenantPackageOption } from './tenant.data'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<TenantApi.TenantVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: TenantApi.getTenantPageApi, getListApi: TenantApi.getTenantPageApi,
deleteApi: TenantApi.deleteTenantApi, deleteApi: TenantApi.deleteTenantApi,
@ -153,12 +151,12 @@ const handleDetail = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 导出操作 // 导出操作
const handleExport = async () => { const handleExport = async () => {
await exportList(xGrid, '租户列表.xls') await exportList('租户列表.xls')
} }
// 提交按钮 // 提交按钮
@ -183,7 +181,7 @@ const submitForm = async () => {
} finally { } finally {
actionLoading.value = false actionLoading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

14
yudao-ui-admin-vue3/src/views/system/tenantPackage/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<XButton <XButton
type="primary" type="primary"
@ -14,7 +14,7 @@
<XTextButton preIcon="ep:edit" :title="t('action.edit')" @click="handleUpdate(row.id)" /> <XTextButton preIcon="ep:edit" :title="t('action.edit')" @click="handleUpdate(row.id)" />
<XTextButton preIcon="ep:delete" :title="t('action.del')" @click="handleDelete(row.id)" /> <XTextButton preIcon="ep:delete" :title="t('action.del')" @click="handleDelete(row.id)" />
</template> </template>
</vxe-grid> </XTable>
</ContentWrap> </ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
@ -69,8 +69,7 @@ import { onMounted, ref, unref } from 'vue'
import { handleTree, defaultProps } from '@/utils/tree' import { handleTree, defaultProps } from '@/utils/tree'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { ElCard, ElSwitch, ElTree } from 'element-plus' import { ElCard, ElSwitch, ElTree } from 'element-plus'
// 业务相关的 import // 业务相关的 import
@ -86,7 +85,6 @@ const menuExpand = ref(false)
const menuNodeAll = ref(false) const menuNodeAll = ref(false)
const treeRef = ref<InstanceType<typeof ElTree>>() const treeRef = ref<InstanceType<typeof ElTree>>()
const treeNodeAll = ref(false) const treeNodeAll = ref(false)
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const formRef = ref<FormExpose>() // 表单 Ref const formRef = ref<FormExpose>() // 表单 Ref
const loading = ref(false) // 遮罩层 const loading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型 const actionType = ref('') // 操作按钮的类型
@ -102,7 +100,7 @@ const getTree = async () => {
menuOptions.value = handleTree(res) menuOptions.value = handleTree(res)
} }
const { gridOptions, getList, deleteData } = useVxeGrid<TenantPackageApi.TenantPackageVO>({ const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: TenantPackageApi.getTenantPackageTypePageApi, getListApi: TenantPackageApi.getTenantPackageTypePageApi,
deleteApi: TenantPackageApi.deleteTenantPackageTypeApi deleteApi: TenantPackageApi.deleteTenantPackageTypeApi
@ -136,7 +134,7 @@ const handleUpdate = async (rowId: number) => {
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
@ -162,7 +160,7 @@ const submitForm = async () => {
} finally { } finally {
loading.value = false loading.value = false
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
} }
} }
}) })

22
yudao-ui-admin-vue3/src/views/system/user/index.vue
View File

@ -27,7 +27,7 @@
</div> </div>
</template> </template>
<!-- 列表 --> <!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> <XTable @register="registerTable">
<template #toolbar_buttons> <template #toolbar_buttons>
<!-- 操作：新增 --> <!-- 操作：新增 -->
<XButton <XButton
@ -119,7 +119,7 @@
</template> </template>
</el-dropdown> </el-dropdown>
</template> </template>
</vxe-grid> </XTable>
</el-card> </el-card>
</div> </div>
<XModal v-model="dialogVisible" :title="dialogTitle"> <XModal v-model="dialogVisible" :title="dialogTitle">
@ -283,14 +283,13 @@ import {
UploadRawFile UploadRawFile
} from 'element-plus' } from 'element-plus'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { VxeGridInstance } from 'vxe-table'
import { handleTree, defaultProps } from '@/utils/tree' import { handleTree, defaultProps } from '@/utils/tree'
import download from '@/utils/download' import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import { getAccessToken, getTenantId } from '@/utils/auth' import { getAccessToken, getTenantId } from '@/utils/auth'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './user.data' import { rules, allSchemas } from './user.data'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
@ -312,10 +311,9 @@ const queryParams = reactive({
// ========== 列表相关 ========== // ========== 列表相关 ==========
const tableTitle = ref('用户列表') const tableTitle = ref('用户列表')
// 列表相关的变量 // 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref const [registerTable, { reload, deleteData, exportList }] = useXTable({
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<UserApi.UserVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
queryParams: queryParams, params: queryParams,
getListApi: UserApi.getUserPageApi, getListApi: UserApi.getUserPageApi,
deleteApi: UserApi.deleteUserApi, deleteApi: UserApi.deleteUserApi,
exportListApi: UserApi.exportUserApi exportListApi: UserApi.exportUserApi
@ -334,7 +332,7 @@ const filterNode = (value: string, data: Tree) => {
} }
const handleDeptNodeClick = async (row: { [key: string]: any }) => { const handleDeptNodeClick = async (row: { [key: string]: any }) => {
queryParams.deptId = row.id queryParams.deptId = row.id
await getList(xGrid) await reload()
} }
const { push } = useRouter() const { push } = useRouter()
const handleDeptEdit = () => { const handleDeptEdit = () => {
@ -409,7 +407,7 @@ const handleDetail = async (rowId: number) => {
} }
// 删除操作 // 删除操作
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId) await deleteData(rowId)
} }
// 提交按钮 // 提交按钮
const submitForm = async () => { const submitForm = async () => {
@ -428,7 +426,7 @@ const submitForm = async () => {
} finally { } finally {
// unref(formRef)?.setSchema(allSchemas.formSchema) // unref(formRef)?.setSchema(allSchemas.formSchema)
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
loading.value = false loading.value = false
} }
} }
@ -443,7 +441,7 @@ const handleStatusChange = async (row: UserApi.UserVO) => {
await UserApi.updateUserStatusApi(row.id, row.status) await UserApi.updateUserStatusApi(row.id, row.status)
message.success(text + '成功') message.success(text + '成功')
// 刷新列表 // 刷新列表
await getList(xGrid) await reload()
}) })
.catch(() => { .catch(() => {
row.status = row.status =
@ -544,7 +542,7 @@ const handleFileSuccess = async (response: any): Promise<void> => {
text += '< ' + username + ': ' + data.failureUsernames[username] + ' >' text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
} }
message.alert(text) message.alert(text)
await getList(xGrid) await reload()
} }
// 文件数超出提示 // 文件数超出提示
const handleExceed = (): void => { const handleExceed = (): void => {