Files
ipms-sjy/yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts

224 lines
5.7 KiB
TypeScript
Raw Normal View History

import { computed, nextTick, reactive } from 'vue'
2022-11-10 13:15:55 +08:00
import { SizeType, VxeGridProps } from 'vxe-table'
2022-11-07 13:25:23 +08:00
import { useAppStore } from '@/store/modules/app'
2022-11-07 18:13:04 +08:00
import { VxeAllSchemas } from './useVxeCrudSchemas'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
2022-11-15 14:51:39 +08:00
import download from '@/utils/download'
2022-11-07 18:13:04 +08:00
const { t } = useI18n()
const message = useMessage() // 消息弹窗
interface UseVxeGridConfig<T = any> {
allSchemas: VxeAllSchemas
getListApi: (option: any) => Promise<T>
delListApi?: (option: any) => Promise<T>
exportListApi?: (option: any) => Promise<T>
2022-11-13 13:16:11 +08:00
exportName?: string
2022-11-07 18:13:04 +08:00
}
2022-11-07 13:25:23 +08:00
const appStore = useAppStore()
const currentSize = computed(() => {
2022-11-10 13:15:55 +08:00
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
2022-11-07 13:25:23 +08:00
}
2022-11-10 13:15:55 +08:00
return resSize
2022-11-07 13:25:23 +08:00
})
2022-11-03 14:33:30 +08:00
2022-11-07 18:13:04 +08:00
export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
2022-11-15 15:22:31 +08:00
/**
* grid options
*/
2022-11-03 14:33:30 +08:00
const gridOptions = reactive<VxeGridProps>({
2022-11-07 18:13:04 +08:00
loading: true,
2022-11-10 13:15:55 +08:00
size: currentSize as any,
2022-11-10 14:38:16 +08:00
height: 700,
2022-11-03 14:33:30 +08:00
rowConfig: {
2022-11-07 18:13:04 +08:00
isCurrent: true, // 当鼠标点击行时,是否要高亮当前行
isHover: true // 当鼠标移到行时,是否要高亮当前行
},
2022-11-03 14:33:30 +08:00
toolbarConfig: {
slots: { buttons: 'toolbar_buttons' }
},
printConfig: {
2022-11-07 18:13:04 +08:00
columns: config?.allSchemas.printSchema
2022-11-03 14:33:30 +08:00
},
formConfig: {
2022-11-13 14:40:51 +08:00
enabled: true,
2022-11-03 14:33:30 +08:00
titleWidth: 100,
titleAlign: 'right',
2022-11-07 18:13:04 +08:00
items: config?.allSchemas.searchSchema
2022-11-03 14:33:30 +08:00
},
2022-11-07 18:13:04 +08:00
columns: config?.allSchemas.tableSchema,
2022-11-03 14:33:30 +08:00
pagerConfig: {
2022-11-07 18:13:04 +08:00
border: false, // 带边框
background: true, // 带背景颜色
perfect: true, // 配套的样式
pageSize: 10, // 每页大小
pagerCount: 7, // 显示页码按钮的数量
autoHidden: true, // 当只有一页时自动隐藏
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500], // 每页大小选项列表
2022-11-03 14:33:30 +08:00
layouts: [
'PrevJump',
'PrevPage',
'Jump',
'PageCount',
'NextPage',
'NextJump',
'Sizes',
'Total'
]
},
proxyConfig: {
seq: true, // 启用动态序号代理(分页之后索引自动计算为当前页的起始序号)
form: true, // 启用表单代理,当点击表单提交按钮时会自动触发 reload 行为
props: { result: 'list', total: 'total' },
ajax: {
query: ({ page, form }) => {
2022-11-12 16:46:24 +08:00
const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
2022-11-03 14:33:30 +08:00
queryParams.pageSize = page.pageSize
queryParams.pageNo = page.currentPage
2022-11-07 15:10:48 +08:00
gridOptions.loading = false
2022-11-03 14:33:30 +08:00
return new Promise(async (resolve) => {
2022-11-07 18:13:04 +08:00
resolve(await config?.getListApi(queryParams))
2022-11-03 14:33:30 +08:00
})
2022-11-13 13:16:11 +08:00
},
queryAll: ({ form }) => {
const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
return new Promise(async (resolve) => {
if (config?.exportListApi) {
resolve(await config?.exportListApi(queryParams))
} else {
resolve(await config?.getListApi(queryParams))
}
})
2022-11-03 14:33:30 +08:00
}
}
2022-11-13 13:16:11 +08:00
},
exportConfig: {
filename: config?.exportName,
// 默认选中类型
type: 'csv',
// 自定义数据量列表
modes: ['current', 'all'],
columns: config?.allSchemas.printSchema
2022-11-03 14:33:30 +08:00
}
})
2022-11-13 13:16:11 +08:00
2022-11-15 15:22:31 +08:00
/**
*
* @param ref
* @returns
*/
2022-11-15 14:39:39 +08:00
const reloadList = async (ref) => {
2022-11-15 15:22:31 +08:00
if (!ref) {
console.error('未传入gridRef')
return
}
await nextTick()
2022-11-15 15:22:31 +08:00
ref.value.commitProxy('query')
}
// 获取查询参数
const getSearchData = async (ref) => {
2022-11-15 15:22:31 +08:00
if (!ref) {
console.error('未传入gridRef')
return
}
await nextTick()
const queryParams = Object.assign(
{},
2022-11-15 15:22:31 +08:00
JSON.parse(JSON.stringify(ref.value.getProxyInfo()?.form))
)
return queryParams
}
2022-11-15 15:22:31 +08:00
/**
*
* @param ref
* @param ids rowid
* @returns
*/
const delList = async (ref, ids: string | number | string[] | number[]) => {
2022-11-15 15:22:31 +08:00
if (!ref) {
console.error('未传入gridRef')
return
}
if (!config?.delListApi) {
console.error('未传入delListApi')
return
}
await nextTick()
2022-11-10 14:38:16 +08:00
return new Promise(async () => {
message
.delConfirm()
.then(() => {
config?.delListApi && config?.delListApi(ids)
message.success(t('common.delSuccess'))
})
.finally(async () => {
// 刷新列表
2022-11-15 15:22:31 +08:00
ref.value.commitProxy('query')
})
2022-11-07 18:13:04 +08:00
})
}
2022-11-15 15:22:31 +08:00
/**
*
* @param ref
* @param fileName excel.xls
* @returns
*/
2022-11-15 14:51:39 +08:00
const exportList = async (ref, fileName?: string) => {
2022-11-15 15:22:31 +08:00
if (!ref) {
console.error('未传入gridRef')
return
}
if (!config?.exportListApi) {
console.error('未传入exportListApi')
return
}
2022-11-15 14:51:39 +08:00
await nextTick()
const queryParams = Object.assign(
{},
JSON.parse(JSON.stringify(ref.value?.getProxyInfo()?.form))
)
message.exportConfirm().then(async () => {
const res = await (config?.exportListApi && config?.exportListApi(queryParams))
download.excel(res as unknown as Blob, fileName ? fileName : 'excel.xls')
})
}
2022-11-15 15:22:31 +08:00
/**
* /
* @param ref
* @returns
*/
const zoom = async (ref) => {
if (!ref) {
console.error('未传入gridRef')
return
}
await nextTick()
ref.value.zoom(!ref.value.isMaximized())
}
2022-11-13 14:40:51 +08:00
2022-11-07 18:13:04 +08:00
return {
gridOptions,
2022-11-15 14:39:39 +08:00
reloadList,
getSearchData,
2022-11-15 14:51:39 +08:00
delList,
2022-11-15 15:22:31 +08:00
exportList,
zoom
2022-11-07 18:13:04 +08:00
}
2022-11-03 14:33:30 +08:00
}