265 lines
7.4 KiB
TypeScript
265 lines
7.4 KiB
TypeScript
import { computed, nextTick, reactive } from 'vue'
|
||
import { SizeType, VxeGridProps, VxeTablePropTypes } from 'vxe-table'
|
||
import { useAppStore } from '@/store/modules/app'
|
||
import { VxeAllSchemas } from './useVxeCrudSchemas'
|
||
|
||
import download from '@/utils/download'
|
||
|
||
const { t } = useI18n()
|
||
const message = useMessage() // 消息弹窗
|
||
|
||
interface UseVxeGridConfig<T = any> {
|
||
allSchemas: VxeAllSchemas
|
||
height?: number // 高度 默认730
|
||
topActionSlots?: boolean // 是否开启表格内顶部操作栏插槽
|
||
treeConfig?: VxeTablePropTypes.TreeConfig // 树形表单配置
|
||
isList?: boolean // 是否不带分页的list
|
||
getListApi: (option: any) => Promise<T> // 获取列表接口
|
||
getAllListApi?: (option: any) => Promise<T> // 获取全部数据接口 用于VXE导出
|
||
deleteApi?: (option: any) => Promise<T> // 删除接口
|
||
exportListApi?: (option: any) => Promise<T> // 导出接口
|
||
exportName?: string // 导出文件夹名称
|
||
queryParams?: any // 其他查询参数
|
||
}
|
||
|
||
const appStore = useAppStore()
|
||
|
||
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
|
||
})
|
||
|
||
export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
|
||
/**
|
||
* grid options 初始化
|
||
*/
|
||
const gridOptions = reactive<VxeGridProps<any>>({
|
||
loading: true,
|
||
size: currentSize as any,
|
||
height: config?.height ? config.height : 730,
|
||
rowConfig: {
|
||
isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
|
||
isHover: true // 当鼠标移到行时，是否要高亮当前行
|
||
},
|
||
toolbarConfig: {
|
||
slots:
|
||
!config?.topActionSlots && config?.topActionSlots != false
|
||
? { buttons: 'toolbar_buttons' }
|
||
: {}
|
||
},
|
||
printConfig: {
|
||
columns: config?.allSchemas.printSchema
|
||
},
|
||
formConfig: {
|
||
enabled: true,
|
||
titleWidth: 100,
|
||
titleAlign: 'right',
|
||
items: config?.allSchemas.searchSchema
|
||
},
|
||
columns: config?.allSchemas.tableSchema,
|
||
proxyConfig: {
|
||
seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
|
||
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
|
||
props: { result: 'list', total: 'total' },
|
||
ajax: {
|
||
query: ({ page, form }) => {
|
||
let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
|
||
if (config?.queryParams) {
|
||
queryParams = Object.assign(queryParams, config.queryParams)
|
||
}
|
||
if (!config?.treeConfig) {
|
||
queryParams.pageSize = page.pageSize
|
||
queryParams.pageNo = page.currentPage
|
||
}
|
||
gridOptions.loading = false
|
||
return new Promise(async (resolve) => {
|
||
resolve(await config?.getListApi(queryParams))
|
||
})
|
||
},
|
||
delete: ({ body }) => {
|
||
return new Promise(async (resolve) => {
|
||
if (config?.deleteApi) {
|
||
resolve(await config?.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 (config?.getAllListApi) {
|
||
resolve(await config?.getAllListApi(queryParams))
|
||
} else {
|
||
resolve(await config?.getListApi(queryParams))
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
exportConfig: {
|
||
filename: config?.exportName,
|
||
// 默认选中类型
|
||
type: 'csv',
|
||
// 自定义数据量列表
|
||
modes: config?.getAllListApi ? ['current', 'all'] : ['current'],
|
||
columns: config?.allSchemas.printSchema
|
||
}
|
||
})
|
||
|
||
if (config?.treeConfig) {
|
||
gridOptions.treeConfig = config.treeConfig
|
||
} else if (config?.isList) {
|
||
gridOptions.proxyConfig = {
|
||
seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
|
||
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
|
||
props: { result: 'data' },
|
||
ajax: {
|
||
query: ({ form }) => {
|
||
let queryParams: any = Object.assign({}, JSON.parse(JSON.stringify(form)))
|
||
if (config?.queryParams) {
|
||
queryParams = Object.assign(queryParams, config.queryParams)
|
||
}
|
||
gridOptions.loading = false
|
||
return new Promise(async (resolve) => {
|
||
resolve(await config?.getListApi(queryParams))
|
||
})
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
gridOptions.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'
|
||
]
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 刷新列表
|
||
* @param ref
|
||
* @returns
|
||
*/
|
||
const getList = async (ref) => {
|
||
if (!ref) {
|
||
console.error('未传入gridRef')
|
||
return
|
||
}
|
||
await nextTick()
|
||
ref.value.commitProxy('query')
|
||
}
|
||
|
||
// 获取查询参数
|
||
const getSearchData = async (ref) => {
|
||
if (!ref) {
|
||
console.error('未传入gridRef')
|
||
return
|
||
}
|
||
await nextTick()
|
||
const queryParams = Object.assign(
|
||
{},
|
||
JSON.parse(JSON.stringify(ref.value.getProxyInfo()?.form))
|
||
)
|
||
return queryParams
|
||
}
|
||
|
||
/**
|
||
* 删除
|
||
* @param ref
|
||
* @param ids rowid
|
||
* @returns
|
||
*/
|
||
const deleteData = async (ref, ids: string | number) => {
|
||
if (!ref) {
|
||
console.error('未传入gridRef')
|
||
return
|
||
}
|
||
if (!config?.deleteApi) {
|
||
console.error('未传入delListApi')
|
||
return
|
||
}
|
||
await nextTick()
|
||
return new Promise(async () => {
|
||
message.delConfirm().then(async () => {
|
||
await (config?.deleteApi && config?.deleteApi(ids))
|
||
message.success(t('common.delSuccess'))
|
||
// 刷新列表
|
||
ref.value.commitProxy('query')
|
||
})
|
||
})
|
||
}
|
||
/**
|
||
* 导出
|
||
* @param ref
|
||
* @param fileName 文件名，默认excel.xls
|
||
* @returns
|
||
*/
|
||
const exportList = async (ref, fileName?: string) => {
|
||
if (!ref) {
|
||
console.error('未传入gridRef')
|
||
return
|
||
}
|
||
if (!config?.exportListApi) {
|
||
console.error('未传入exportListApi')
|
||
return
|
||
}
|
||
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')
|
||
})
|
||
}
|
||
/**
|
||
* 表格最大/最小化
|
||
* @param ref
|
||
* @returns
|
||
*/
|
||
const zoom = async (ref) => {
|
||
if (!ref) {
|
||
console.error('未传入gridRef')
|
||
return
|
||
}
|
||
await nextTick()
|
||
ref.value.zoom(!ref.value.isMaximized())
|
||
}
|
||
|
||
return {
|
||
gridOptions,
|
||
getList,
|
||
getSearchData,
|
||
deleteData,
|
||
exportList,
|
||
zoom
|
||
}
|
||
}
|