hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-07-15 19:35:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

正式移除 VXE 表格

Browse Source
This commit is contained in:
YunaiV
2023-04-11 23:47:59 +08:00
parent fd447dc7a3
commit ebbf47f509
28 changed files with 4 additions and 1666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
src/hooks/web/useVxeCrudSchemas.ts
View File

@ -1,354 +0,0 @@
import {
FormItemRenderOptions,
VxeColumnPropTypes,
VxeFormItemProps,
VxeGridPropTypes,
VxeTableDefines
} from 'vxe-table'
import { eachTree } from 'xe-utils'
import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
import { FormSchema } from '@/types/form'
import { VxeTableColumn } from '@/types/table'
import { ComponentOptions } from '@/types/components'
import { DescriptionsSchema } from '@/types/descriptions'
export type VxeCrudSchema = {
primaryKey?: string // 主键ID
primaryTitle?: string // 主键标题 默认为序号
primaryType?: VxeColumnPropTypes.Type | 'id' // 还支持 "id" | "seq" | "radio" | "checkbox" | "expand" | "html" | null
firstColumn?: VxeColumnPropTypes.Type // 第一列显示类型
action?: boolean // 是否开启表格内右侧操作栏插槽
actionTitle?: string // 操作栏标题 默认为操作
actionWidth?: string // 操作栏插槽宽度,一般2个字带图标 text 类型按钮 50-70
columns: VxeCrudColumns[]
searchSpan?: number
}
type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
field: string // 字段名
title?: string // 标题名
formatter?: VxeColumnPropTypes.Formatter // vxe formatter格式化
isSearch?: boolean // 是否在查询显示
search?: CrudSearchParams // 查询的详细配置
isTable?: boolean // 是否在列表显示
table?: CrudTableParams // 列表的详细配置
isForm?: boolean // 是否在表单显示
form?: CrudFormParams // 表单的详细配置
isDetail?: boolean // 是否在详情显示
detail?: CrudDescriptionsParams // 详情的详细配置
print?: CrudPrintParams // vxe 打印的字段
children?: VxeCrudColumns[] // 子级
dictType?: string // 字典类型
dictClass?: 'string' | 'number' | 'boolean' // 字典数据类型 string | number | boolean
}
type CrudSearchParams = {
// 是否显示在查询项
show?: boolean
} & Omit<VxeFormItemProps, 'field'>
type CrudTableParams = {
// 是否显示表头
show?: boolean
} & Omit<VxeTableDefines.ColumnOptions, 'field'>
type CrudFormParams = {
// 是否显示表单项
show?: boolean
} & Omit<FormSchema, 'field'>
type CrudDescriptionsParams = {
// 是否显示表单项
show?: boolean
} & Omit<DescriptionsSchema, 'field'>
type CrudPrintParams = {
// 是否显示打印项
show?: boolean
} & Omit<VxeTableDefines.ColumnInfo[], 'field'>
export type VxeAllSchemas = {
searchSchema: VxeFormItemProps[]
tableSchema: VxeGridPropTypes.Columns
formSchema: FormSchema[]
detailSchema: DescriptionsSchema[]
printSchema: VxeTableDefines.ColumnInfo[]
}
// 过滤所有结构
export const useVxeCrudSchemas = (
crudSchema: VxeCrudSchema
): {
allSchemas: VxeAllSchemas
} => {
// 所有结构数据
const allSchemas = reactive<VxeAllSchemas>({
searchSchema: [],
tableSchema: [],
formSchema: [],
detailSchema: [],
printSchema: []
})
const searchSchema = filterSearchSchema(crudSchema)
allSchemas.searchSchema = searchSchema || []
const tableSchema = filterTableSchema(crudSchema)
allSchemas.tableSchema = tableSchema || []
const formSchema = filterFormSchema(crudSchema)
allSchemas.formSchema = formSchema
const detailSchema = filterDescriptionsSchema(crudSchema)
allSchemas.detailSchema = detailSchema
const printSchema = filterPrintSchema(crudSchema)
allSchemas.printSchema = printSchema
return {
allSchemas
}
}
// 过滤 Search 结构
const filterSearchSchema = (crudSchema: VxeCrudSchema): VxeFormItemProps[] => {
const { t } = useI18n()
const span = crudSchema.searchSpan ? crudSchema.searchSpan : 6
const spanLength = 24 / span
const searchSchema: VxeFormItemProps[] = []
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
// 判断是否显示
if (schemaItem?.isSearch || schemaItem.search?.show) {
let itemRenderName = schemaItem?.search?.itemRender?.name || '$input'
const options: any[] = []
let itemRender: FormItemRenderOptions = {}
if (schemaItem.dictType) {
const allOptions = { label: '全部', value: '' }
options.push(allOptions)
getDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
itemRender.options = options
if (!schemaItem?.search?.itemRender?.name) itemRenderName = '$select'
itemRender = {
name: itemRenderName,
options: options,
props: { placeholder: t('common.selectText') }
}
} else {
if (schemaItem.search?.itemRender) {
itemRender = schemaItem.search.itemRender
} else {
itemRender = {
name: itemRenderName,
props:
itemRenderName == '$input'
? { placeholder: t('common.inputText') }
: { placeholder: t('common.selectText') }
}
}
}
const searchSchemaItem = {
// 默认为 input
folding: searchSchema.length > spanLength - 1,
itemRender: schemaItem.itemRender ? schemaItem.itemRender : itemRender,
field: schemaItem.field,
title: schemaItem.search?.title || schemaItem.title,
slots: schemaItem.search?.slots,
span: span
}
searchSchema.push(searchSchemaItem)
}
})
if (searchSchema.length > 0) {
// 添加搜索按钮
const buttons: VxeFormItemProps = {
span: 24,
align: 'right',
collapseNode: searchSchema.length > spanLength,
itemRender: {
name: '$buttons',
children: [
{ props: { type: 'submit', content: t('common.query'), status: 'primary' } },
{ props: { type: 'reset', content: t('common.reset') } }
]
}
}
searchSchema.push(buttons)
}
return searchSchema
}
// 过滤 table 结构
const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns => {
const { t } = useI18n()
const tableSchema: VxeGridPropTypes.Columns = []
// 第一列
if (crudSchema.firstColumn) {
const tableSchemaItem = {
type: crudSchema.firstColumn,
width: '50px'
}
tableSchema.push(tableSchemaItem)
}
// 主键ID
if (crudSchema.primaryKey && crudSchema.primaryType) {
const primaryTitle = crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index')
const primaryWidth = primaryTitle.length * 30 + 'px'
let tableSchemaItem: { [x: string]: any } = {
title: primaryTitle,
field: crudSchema.primaryKey,
width: primaryWidth
}
if (crudSchema.primaryType != 'id') {
tableSchemaItem = {
...tableSchemaItem,
type: crudSchema.primaryType
}
}
tableSchema.push(tableSchemaItem)
}
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
// 判断是否显示
if (schemaItem?.isTable !== false && schemaItem?.table?.show !== false) {
const tableSchemaItem = {
...schemaItem.table,
field: schemaItem.field,
title: schemaItem.table?.title || schemaItem.title,
minWidth: '80px'
}
tableSchemaItem.showOverflow = 'tooltip'
if (schemaItem?.formatter) {
tableSchemaItem.formatter = schemaItem.formatter
tableSchemaItem.width = tableSchemaItem.width ? tableSchemaItem.width : 160
}
if (schemaItem?.dictType) {
tableSchemaItem.cellRender = {
name: 'XDict',
content: schemaItem.dictType
}
tableSchemaItem.width = tableSchemaItem.width ? tableSchemaItem.width : 160
}
tableSchema.push(tableSchemaItem)
}
})
// 操作栏插槽
if (crudSchema.action && crudSchema.action == true) {
const tableSchemaItem = {
title: crudSchema.actionTitle ? crudSchema.actionTitle : t('table.action'),
field: 'actionbtns',
fixed: 'right' as unknown as VxeColumnPropTypes.Fixed,
width: crudSchema.actionWidth ? crudSchema.actionWidth : '200px',
slots: {
default: 'actionbtns_default'
}
}
tableSchema.push(tableSchemaItem)
}
return tableSchema
}
// 过滤 form 结构
const filterFormSchema = (crudSchema: VxeCrudSchema): FormSchema[] => {
const formSchema: FormSchema[] = []
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
// 判断是否显示
if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) {
// 默认为 input
let component = schemaItem?.form?.component || 'Input'
let defaultValue: any = ''
if (schemaItem.form?.value) {
defaultValue = schemaItem.form?.value
} else {
if (component === 'InputNumber') {
defaultValue = 0
}
}
let comonentProps = {}
if (schemaItem.dictType) {
const options: ComponentOptions[] = []
if (schemaItem.dictClass && schemaItem.dictClass === 'number') {
getIntDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
} else if (schemaItem.dictClass && schemaItem.dictClass === 'boolean') {
getBoolDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
} else {
getDictOptions(schemaItem.dictType).forEach((dict) => {
options.push(dict)
})
}
comonentProps = {
options: options
}
if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
}
const formSchemaItem = {
component: component,
componentProps: comonentProps,
value: defaultValue,
...schemaItem.form,
field: schemaItem.field,
label: schemaItem.form?.label || schemaItem.title
}
formSchema.push(formSchemaItem)
}
})
return formSchema
}
// 过滤 descriptions 结构
const filterDescriptionsSchema = (crudSchema: VxeCrudSchema): DescriptionsSchema[] => {
const descriptionsSchema: DescriptionsSchema[] = []
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
// 判断是否显示
if (schemaItem?.isDetail !== false && schemaItem.detail?.show !== false) {
const descriptionsSchemaItem = {
...schemaItem.detail,
field: schemaItem.field,
label: schemaItem.detail?.label || schemaItem.title
}
if (schemaItem.dictType) {
descriptionsSchemaItem.dictType = schemaItem.dictType
}
if (schemaItem.detail?.dateFormat || schemaItem.formatter == 'formatDate') {
// 优先使用 detail 下的配置，如果没有默认为 YYYY-MM-DD HH:mm:ss
descriptionsSchemaItem.dateFormat = schemaItem?.detail?.dateFormat
? schemaItem?.detail?.dateFormat
: 'YYYY-MM-DD HH:mm:ss'
}
descriptionsSchema.push(descriptionsSchemaItem)
}
})
return descriptionsSchema
}
// 过滤 打印 结构
const filterPrintSchema = (crudSchema: VxeCrudSchema): any[] => {
const printSchema: any[] = []
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
// 判断是否显示
if (schemaItem?.print?.show !== false) {
const printSchemaItem = {
field: schemaItem.field
}
printSchema.push(printSchemaItem)
}
})
return printSchema
}

264
src/hooks/web/useVxeGrid.ts
View File

@ -1,264 +0,0 @@
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
}
}

39
src/hooks/web/useXTable.ts
View File

@ -1,39 +0,0 @@
import { XTableProps } from '@/components/XTable/src/type'
export interface tableMethod {
reload: () => void // 刷新表格
setProps: (props: XTableProps) => void
deleteData: (id: string | number) => void // 删除数据
deleteBatch: () => void // 批量删除
exportList: (fileName?: string) => void // 导出列表
getCurrentColumn: () => void // 获取当前列
getRadioRecord: () => void // 获取当前选中列，radio
getCheckboxRecords: () => void //获取当前选中列， checkbox
}
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: (id: string | number) => getInstance().deleteData(id),
deleteBatch: () => getInstance().deleteBatch(),
exportList: (fileName?: string) => getInstance().exportList(fileName),
getCurrentColumn: () => getInstance().getCheckboxRecords(),
getRadioRecord: () => getInstance().getRadioRecord(),
getCheckboxRecords: () => getInstance().getCheckboxRecords()
}
return [register, methods]
}