From a984eac9658748134d56bb07b33958f1624dc7d4 Mon Sep 17 00:00:00 2001 From: xingyu Date: Tue, 3 Jan 2023 10:40:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84xtable=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/XTable/src/XTable.vue | 200 ++++++++++++++---- .../src/components/XTable/src/type.ts | 7 +- .../src/hooks/web/useXTable.ts | 6 +- .../src/plugins/vxeTable/index.ts | 19 +- 4 files changed, 169 insertions(+), 63 deletions(-) diff --git a/yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue b/yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue index 75b0dc132..3fbf70a44 100644 --- a/yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue +++ b/yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue @@ -12,6 +12,12 @@ 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() @@ -21,30 +27,6 @@ const prefixCls = getPrefixCls('x-vxe-table') const attrs = useAttrs() const emit = defineEmits(['register']) -const props = defineProps({ - options: { - type: Object as PropType, - default: () => {} - } -}) -const innerProps = ref>() - -const getProps = computed(() => { - const options = innerProps.value || props.options - options.size = currentSize as any - options.height = 700 - getColumnsConfig(options) - getProxyConfig(options) - getPageConfig(options) - getToolBarConfig(options) - // console.log(options); - return { - ...options, - ...attrs - } -}) - -const xGrid = ref() // 列表 Grid Ref watch( () => appStore.getIsDark, () => { @@ -57,6 +39,7 @@ watch( }, { immediate: true } ) + const currentSize = computed(() => { let resSize: SizeType = 'small' const appsize = appStore.getCurrentSize @@ -74,25 +57,42 @@ const currentSize = computed(() => { return resSize }) -const reload = () => { - const g = unref(xGrid) - if (!g) { - return +const props = defineProps({ + options: { + type: Object as PropType, + default: () => {} } - g.commitProxy('query') -} +}) +const innerProps = ref>() -const getSearchData = () => { - const g = unref(xGrid) - if (!g) { - return +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 queryParams = Object.assign({}, JSON.parse(JSON.stringify(g.getProxyInfo()?.form))) - return queryParams -} +}) + +const xGrid = ref() // 列表 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 @@ -131,21 +131,55 @@ const getProxyConfig = (options: XTableProps) => { if (options.params) { queryParams = Object.assign(queryParams, options.params) } - queryParams.pageSize = page.currentPage - queryParams.page = page.pageSize - + 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)) + } + }) } } } } + 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 } = options + const { pagination, pagerConfig, treeConfig } = options + if (treeConfig) { + options.treeConfig = options.treeConfig + return + } if (pagerConfig) return if (pagination) { if (isBoolean(pagination)) { @@ -171,6 +205,28 @@ const getPageConfig = (options: XTableProps) => { 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' + ] + } + } } } @@ -190,12 +246,70 @@ const getToolBarConfig = (options: XTableProps) => { } } +// 刷新列表 +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) => { innerProps.value = { ...unref(innerProps), ...prop } } -defineExpose({ reload, Ref: xGrid, getSearchData }) -emit('register', { reload, getSearchData, setProps }) +defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList }) +emit('register', { reload, getSearchData, setProps, deleteData, exportList })