mirror of
https://gitee.com/bootx/dax-pay-ui.git
synced 2025-10-14 22:27:05 +00:00
feat vxetable集成优化
This commit is contained in:
@@ -83,7 +83,8 @@
|
||||
"vue-router": "^4.4.0",
|
||||
"vue-types": "^5.1.2",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vxe-table": "^4.7.40",
|
||||
"vxe-table": "^v4.7",
|
||||
"vxe-pc-ui": "^4.0.51",
|
||||
"xe-utils": "^3.5.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
59
pnpm-lock.yaml
generated
59
pnpm-lock.yaml
generated
@@ -95,8 +95,11 @@ importers:
|
||||
vuedraggable:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0(vue@3.4.31(typescript@5.5.3))
|
||||
vxe-pc-ui:
|
||||
specifier: ^4.0.51
|
||||
version: 4.0.51
|
||||
vxe-table:
|
||||
specifier: ^4.7.40
|
||||
specifier: ^v4.7
|
||||
version: 4.7.40
|
||||
xe-utils:
|
||||
specifier: ^3.5.28
|
||||
@@ -6586,8 +6589,8 @@ packages:
|
||||
peerDependencies:
|
||||
vue: ^3.0.1
|
||||
|
||||
vxe-pc-ui@4.0.44:
|
||||
resolution: {integrity: sha512-wiauFMmSvEkVKa/AsKGb5CMi91Ojts+Ydcn+iespgl3xMBD01BR/CGzeCI478P3XAFBsiN4gWlgxHmGP5TR8UA==}
|
||||
vxe-pc-ui@4.0.51:
|
||||
resolution: {integrity: sha512-h3rMvvbcABq4GIu6AbsIFVR4RhgfM4rMoCpi8gekRPce13kSCVoWNFPiu1rKWSyqePErP6o8fbLgs226KnasZQ==}
|
||||
|
||||
vxe-table@4.7.40:
|
||||
resolution: {integrity: sha512-y9VC3oLJgusxFj3xZ28G4gU+YClBuDIV8oM75Dx3doYJ7vanXZnSf70XJ+W5xEKflamUmjGre66XZ2b4XuqtMw==}
|
||||
@@ -6825,7 +6828,7 @@ snapshots:
|
||||
'@babel/traverse': 7.24.1
|
||||
'@babel/types': 7.24.0
|
||||
convert-source-map: 2.0.0
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
gensync: 1.0.0-beta.2
|
||||
json5: 2.2.3
|
||||
semver: 6.3.1
|
||||
@@ -7203,7 +7206,7 @@ snapshots:
|
||||
'@babel/helper-split-export-declaration': 7.22.6
|
||||
'@babel/parser': 7.24.7
|
||||
'@babel/types': 7.24.0
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
globals: 11.12.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -7590,7 +7593,7 @@ snapshots:
|
||||
'@eslint/eslintrc@2.1.4':
|
||||
dependencies:
|
||||
ajv: 6.12.6
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
espree: 9.6.1
|
||||
globals: 13.24.0
|
||||
ignore: 5.3.1
|
||||
@@ -7606,7 +7609,7 @@ snapshots:
|
||||
'@humanwhocodes/config-array@0.11.14':
|
||||
dependencies:
|
||||
'@humanwhocodes/object-schema': 2.0.3
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
minimatch: 3.1.2
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -7639,7 +7642,7 @@ snapshots:
|
||||
'@antfu/install-pkg': 0.1.1
|
||||
'@antfu/utils': 0.7.7
|
||||
'@iconify/types': 2.0.0
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
kolorist: 1.8.0
|
||||
local-pkg: 0.5.0
|
||||
mlly: 1.6.1
|
||||
@@ -7806,7 +7809,7 @@ snapshots:
|
||||
|
||||
'@pm2/pm2-version-check@1.0.4':
|
||||
dependencies:
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -7815,8 +7818,8 @@ snapshots:
|
||||
'@purge-icons/core@0.10.0':
|
||||
dependencies:
|
||||
'@iconify/iconify': 2.1.2
|
||||
axios: 0.26.1(debug@4.3.4)
|
||||
debug: 4.3.4
|
||||
axios: 0.26.1(debug@4.3.5)
|
||||
debug: 4.3.5
|
||||
fast-glob: 3.3.2
|
||||
fs-extra: 10.1.0
|
||||
transitivePeerDependencies:
|
||||
@@ -8236,7 +8239,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@typescript-eslint/typescript-estree': 7.7.0(typescript@5.5.3)
|
||||
'@typescript-eslint/utils': 7.7.0(eslint@8.57.0)(typescript@5.5.3)
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
eslint: 8.57.0
|
||||
ts-api-utils: 1.3.0(typescript@5.5.3)
|
||||
optionalDependencies:
|
||||
@@ -8250,7 +8253,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 7.7.0
|
||||
'@typescript-eslint/visitor-keys': 7.7.0
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
globby: 11.1.0
|
||||
is-glob: 4.0.3
|
||||
minimatch: 9.0.4
|
||||
@@ -8827,7 +8830,7 @@ snapshots:
|
||||
|
||||
agent-base@7.1.1:
|
||||
dependencies:
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -9050,15 +9053,15 @@ snapshots:
|
||||
dependencies:
|
||||
possible-typed-array-names: 1.0.0
|
||||
|
||||
axios@0.26.1(debug@4.3.4):
|
||||
axios@0.26.1(debug@4.3.5):
|
||||
dependencies:
|
||||
follow-redirects: 1.15.6(debug@4.3.4)
|
||||
follow-redirects: 1.15.6(debug@4.3.5)
|
||||
transitivePeerDependencies:
|
||||
- debug
|
||||
|
||||
axios@1.7.2:
|
||||
dependencies:
|
||||
follow-redirects: 1.15.6(debug@4.3.4)
|
||||
follow-redirects: 1.15.6(debug@4.3.5)
|
||||
form-data: 4.0.0
|
||||
proxy-from-env: 1.1.0
|
||||
transitivePeerDependencies:
|
||||
@@ -10371,6 +10374,10 @@ snapshots:
|
||||
optionalDependencies:
|
||||
debug: 4.3.4
|
||||
|
||||
follow-redirects@1.15.6(debug@4.3.5):
|
||||
optionalDependencies:
|
||||
debug: 4.3.5
|
||||
|
||||
for-each@0.3.3:
|
||||
dependencies:
|
||||
is-callable: 1.2.7
|
||||
@@ -10472,7 +10479,7 @@ snapshots:
|
||||
dependencies:
|
||||
basic-ftp: 5.0.5
|
||||
data-uri-to-buffer: 6.0.2
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
fs-extra: 11.2.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -10729,14 +10736,14 @@ snapshots:
|
||||
http-proxy-agent@7.0.2:
|
||||
dependencies:
|
||||
agent-base: 7.1.1
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
https-proxy-agent@7.0.4:
|
||||
dependencies:
|
||||
agent-base: 7.1.1
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -11747,7 +11754,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@tootallnate/quickjs-emscripten': 0.23.0
|
||||
agent-base: 7.1.1
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
get-uri: 6.0.3
|
||||
http-proxy-agent: 7.0.2
|
||||
https-proxy-agent: 7.0.4
|
||||
@@ -12244,7 +12251,7 @@ snapshots:
|
||||
proxy-agent@6.3.1:
|
||||
dependencies:
|
||||
agent-base: 7.1.1
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
http-proxy-agent: 7.0.2
|
||||
https-proxy-agent: 7.0.4
|
||||
lru-cache: 7.18.3
|
||||
@@ -12341,7 +12348,7 @@ snapshots:
|
||||
|
||||
require-in-the-middle@5.2.0:
|
||||
dependencies:
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
module-details-from-path: 1.0.3
|
||||
resolve: 1.22.8
|
||||
transitivePeerDependencies:
|
||||
@@ -12642,7 +12649,7 @@ snapshots:
|
||||
socks-proxy-agent@8.0.3:
|
||||
dependencies:
|
||||
agent-base: 7.1.1
|
||||
debug: 4.3.4
|
||||
debug: 4.3.5
|
||||
socks: 2.8.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -13690,13 +13697,13 @@ snapshots:
|
||||
sortablejs: 1.14.0
|
||||
vue: 3.4.31(typescript@5.5.3)
|
||||
|
||||
vxe-pc-ui@4.0.44:
|
||||
vxe-pc-ui@4.0.51:
|
||||
dependencies:
|
||||
'@vxe-ui/core': 1.0.12
|
||||
|
||||
vxe-table@4.7.40:
|
||||
dependencies:
|
||||
vxe-pc-ui: 4.0.44
|
||||
vxe-pc-ui: 4.0.51
|
||||
|
||||
warning@4.0.3:
|
||||
dependencies:
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-form class="page-query" layout="inline">
|
||||
<a-form class="page-query">
|
||||
<a-row :gutter="gutter">
|
||||
<query-item
|
||||
:key="i"
|
||||
|
@@ -1,7 +1,57 @@
|
||||
import { withInstall } from '@/utils'
|
||||
import vxeBasicTable from './src/VxeBasicTable'
|
||||
import './src/setting'
|
||||
import { App } from 'vue'
|
||||
import 'xe-utils'
|
||||
import VXETable from 'vxe-table'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import VxeUI from 'vxe-pc-ui'
|
||||
import 'vxe-pc-ui/lib/style.css'
|
||||
|
||||
export const VxeBasicTable = withInstall(vxeBasicTable)
|
||||
export * from 'vxe-table'
|
||||
export * from './src/types'
|
||||
/**
|
||||
* 加载vxe-table
|
||||
* @param app
|
||||
*/
|
||||
export function useTable(app: App) {
|
||||
app.use(VXETable).use(VxeUI)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否设置暗黑模式
|
||||
* @param dark
|
||||
*/
|
||||
export function setDark(dark: boolean) {
|
||||
if (dark) {
|
||||
VXETable.setTheme('dark')
|
||||
VxeUI.setTheme('dark')
|
||||
} else {
|
||||
VXETable.setTheme('light')
|
||||
VxeUI.setTheme('light')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 配置
|
||||
*/
|
||||
VXETable.setConfig({
|
||||
// 表格配置
|
||||
table: {
|
||||
resizable: true,
|
||||
border: true,
|
||||
stripe: true,
|
||||
showOverflow: true,
|
||||
showHeaderOverflow: true,
|
||||
size: 'medium',
|
||||
tooltipConfig: {
|
||||
enterable: true,
|
||||
},
|
||||
},
|
||||
// 工具条配置
|
||||
toolbar: {
|
||||
custom: true,
|
||||
buttons: [],
|
||||
tools: [],
|
||||
},
|
||||
// 分页配置
|
||||
pager: {
|
||||
border: true,
|
||||
size: 'medium',
|
||||
},
|
||||
})
|
||||
|
@@ -1,126 +0,0 @@
|
||||
import { defineComponent, computed, ref, watch } from 'vue'
|
||||
import { BasicTableProps } from './types'
|
||||
import { basicProps } from './props'
|
||||
import { ignorePropKeys } from './const'
|
||||
import { basicEmits } from './emits'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
VxeGridInstance,
|
||||
VxeGridEventProps,
|
||||
GridMethods,
|
||||
TableMethods,
|
||||
TableEditMethods,
|
||||
TableValidatorMethods,
|
||||
VxeUI,
|
||||
VxeGlobalThemeName,
|
||||
VxeGrid,
|
||||
} from 'vxe-table'
|
||||
|
||||
import { extendSlots } from '@/utils/helper/tsxHelper'
|
||||
import { gridComponentMethodKeys } from './methods'
|
||||
import { omit } from 'lodash-es'
|
||||
import { useRootSetting } from '@/hooks/setting/useRootSetting'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VxeBasicTable',
|
||||
props: basicProps,
|
||||
emits: basicEmits,
|
||||
setup(props, { emit, attrs }) {
|
||||
const tableElRef = ref<VxeGridInstance>()
|
||||
const emitEvents: VxeGridEventProps = {}
|
||||
const { getDarkMode } = useRootSetting()
|
||||
watch(
|
||||
() => getDarkMode.value,
|
||||
() => {
|
||||
VxeUI.setTheme(getDarkMode.value as VxeGlobalThemeName)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
const extendTableMethods = (methodKeys) => {
|
||||
const funcs: any = {}
|
||||
methodKeys.forEach((name) => {
|
||||
funcs[name] = (...args: any[]) => {
|
||||
const $vxegrid: any = tableElRef.value
|
||||
if ($vxegrid && $vxegrid[name]) {
|
||||
return $vxegrid[name](...args)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return funcs
|
||||
}
|
||||
|
||||
const gridExtendTableMethods = extendTableMethods(gridComponentMethodKeys) as GridMethods &
|
||||
TableMethods &
|
||||
TableEditMethods &
|
||||
TableValidatorMethods
|
||||
|
||||
basicEmits.forEach((name) => {
|
||||
const type = XEUtils.camelCase(`on-${name}`) as keyof VxeGridEventProps
|
||||
|
||||
emitEvents[type] = (...args: any[]) => emit(name, ...args)
|
||||
})
|
||||
|
||||
/**
|
||||
* @description: 二次封装需要的所有属性
|
||||
* 1.部分属性需要和全局属性进行合并
|
||||
*/
|
||||
const getBindValues = computed<BasicTableProps>(() => {
|
||||
const propsData: BasicTableProps = {
|
||||
...attrs,
|
||||
...props,
|
||||
}
|
||||
|
||||
return propsData
|
||||
})
|
||||
|
||||
/**
|
||||
* @description: Table 所有属性
|
||||
*/
|
||||
const getBindGridValues = computed(() => {
|
||||
const omitProps = omit(getBindValues.value, ignorePropKeys)
|
||||
|
||||
return {
|
||||
...omitProps,
|
||||
...getBindGridEvent,
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* @description: 组件外层class
|
||||
*/
|
||||
const getWrapperClass = computed(() => {
|
||||
return [attrs.class]
|
||||
})
|
||||
|
||||
/**
|
||||
* @description: 重写Vxe-table 方法
|
||||
*/
|
||||
const getBindGridEvent: VxeGridEventProps = {
|
||||
...emitEvents,
|
||||
}
|
||||
|
||||
return {
|
||||
getWrapperClass,
|
||||
getBindGridValues,
|
||||
tableElRef,
|
||||
...gridExtendTableMethods,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { tableClass, tableStyle } = this.$props
|
||||
|
||||
return (
|
||||
<div class={`h-full flex flex-col bg-white ${this.getWrapperClass}`}>
|
||||
<VxeGrid
|
||||
ref="tableElRef"
|
||||
class={`vxe-grid_scrollbar px-6 py-4 ${tableClass}`}
|
||||
style={tableStyle}
|
||||
{...this.getBindGridValues}
|
||||
>
|
||||
{extendSlots(this.$slots)}
|
||||
</VxeGrid>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
@@ -1,59 +0,0 @@
|
||||
import type { Component } from 'vue'
|
||||
|
||||
import type { ComponentType } from './componentType'
|
||||
import { ApiSelect, ApiTreeSelect } from '@/components/Form'
|
||||
import {
|
||||
Input,
|
||||
Select,
|
||||
Radio,
|
||||
Checkbox,
|
||||
AutoComplete,
|
||||
Cascader,
|
||||
DatePicker,
|
||||
InputNumber,
|
||||
Switch,
|
||||
TimePicker,
|
||||
TreeSelect,
|
||||
Rate,
|
||||
Empty,
|
||||
} from 'ant-design-vue'
|
||||
import { Button } from '@/components/Button'
|
||||
|
||||
const componentMap = new Map<ComponentType, Component>()
|
||||
|
||||
componentMap.set('AButton', Button)
|
||||
|
||||
componentMap.set('AInput', Input)
|
||||
componentMap.set('AInputSearch', Input.Search)
|
||||
componentMap.set('AInputNumber', InputNumber)
|
||||
componentMap.set('AAutoComplete', AutoComplete)
|
||||
|
||||
componentMap.set('ASelect', Select)
|
||||
componentMap.set('ATreeSelect', TreeSelect)
|
||||
componentMap.set('ASwitch', Switch)
|
||||
componentMap.set('ARadioGroup', Radio.Group)
|
||||
componentMap.set('ACheckboxGroup', Checkbox.Group)
|
||||
componentMap.set('ACascader', Cascader)
|
||||
componentMap.set('ARate', Rate)
|
||||
|
||||
componentMap.set('ADatePicker', DatePicker)
|
||||
componentMap.set('AMonthPicker', DatePicker.MonthPicker)
|
||||
componentMap.set('ARangePicker', DatePicker.RangePicker)
|
||||
componentMap.set('AWeekPicker', DatePicker.WeekPicker)
|
||||
componentMap.set('AYearPicker', DatePicker.YearPicker)
|
||||
componentMap.set('ATimePicker', TimePicker)
|
||||
|
||||
componentMap.set('AApiSelect', ApiSelect)
|
||||
componentMap.set('AApiTreeSelect', ApiTreeSelect)
|
||||
|
||||
componentMap.set('AEmpty', Empty)
|
||||
|
||||
export function add(compName: ComponentType, component: Component) {
|
||||
componentMap.set(compName, component)
|
||||
}
|
||||
|
||||
export function del(compName: ComponentType) {
|
||||
componentMap.delete(compName)
|
||||
}
|
||||
|
||||
export { componentMap }
|
@@ -1,22 +0,0 @@
|
||||
export type ComponentType =
|
||||
| 'AInput'
|
||||
| 'AInputNumber'
|
||||
| 'ASelect'
|
||||
| 'AApiSelect'
|
||||
| 'ATreeSelect'
|
||||
| 'AApiTreeSelect'
|
||||
| 'ARadioGroup'
|
||||
| 'ACheckboxGroup'
|
||||
| 'AAutoComplete'
|
||||
| 'ACascader'
|
||||
| 'ADatePicker'
|
||||
| 'AMonthPicker'
|
||||
| 'ARangePicker'
|
||||
| 'AWeekPicker'
|
||||
| 'ATimePicker'
|
||||
| 'AYearPicker'
|
||||
| 'ASwitch'
|
||||
| 'ARate'
|
||||
| 'AInputSearch'
|
||||
| 'AButton'
|
||||
| 'AEmpty'
|
@@ -1,20 +0,0 @@
|
||||
import XEUtils from 'xe-utils'
|
||||
import { createDefaultRender, createEditRender, createFormItemRender } from './common'
|
||||
|
||||
export default {
|
||||
renderDefault: createDefaultRender({}, (_, params) => {
|
||||
return {
|
||||
params: XEUtils.get(params, 'row'),
|
||||
}
|
||||
}),
|
||||
renderEdit: createEditRender({}, (_, params) => {
|
||||
return {
|
||||
params: XEUtils.get(params, 'row'),
|
||||
}
|
||||
}),
|
||||
renderItemContent: createFormItemRender({}, (_, params) => {
|
||||
return {
|
||||
params: XEUtils.get(params, 'row'),
|
||||
}
|
||||
}),
|
||||
}
|
@@ -1,20 +0,0 @@
|
||||
import XEUtils from 'xe-utils'
|
||||
import { createDefaultRender, createEditRender, createFormItemRender } from './common'
|
||||
|
||||
export default {
|
||||
renderDefault: createDefaultRender({}, (_, params) => {
|
||||
return {
|
||||
params: XEUtils.get(params, 'row'),
|
||||
}
|
||||
}),
|
||||
renderEdit: createEditRender({}, (_, params) => {
|
||||
return {
|
||||
params: XEUtils.get(params, 'row'),
|
||||
}
|
||||
}),
|
||||
renderItemContent: createFormItemRender({}, (_, params) => {
|
||||
return {
|
||||
params: XEUtils.get(params, 'row'),
|
||||
}
|
||||
}),
|
||||
}
|
@@ -1,16 +0,0 @@
|
||||
import {
|
||||
createEditRender,
|
||||
createDefaultRender,
|
||||
createFilterRender,
|
||||
createDefaultFilterRender,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
autofocus: 'input.ant-input',
|
||||
renderDefault: createDefaultRender(),
|
||||
renderEdit: createEditRender(),
|
||||
renderFilter: createFilterRender(),
|
||||
defaultFilterMethod: createDefaultFilterRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,120 +0,0 @@
|
||||
import { h } from 'vue'
|
||||
import {
|
||||
FormItemContentRenderParams,
|
||||
FormItemRenderOptions,
|
||||
VxeGlobalRendererHandles,
|
||||
} from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { cellText, createEvents, createProps, getComponent } from './common'
|
||||
|
||||
const COMPONENT_NAME = 'AButton'
|
||||
|
||||
export function createEditRender() {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderEditOptions,
|
||||
params: VxeGlobalRendererHandles.RenderEditParams,
|
||||
) {
|
||||
const { attrs } = renderOpts
|
||||
const Component = getComponent(COMPONENT_NAME)
|
||||
|
||||
return [
|
||||
h(Component, {
|
||||
...attrs,
|
||||
...createProps(renderOpts, null),
|
||||
...createEvents(renderOpts, params),
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export function createDefaultRender() {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderEditOptions,
|
||||
params: VxeGlobalRendererHandles.RenderEditParams,
|
||||
) {
|
||||
const { attrs } = renderOpts
|
||||
const Component = getComponent(COMPONENT_NAME)
|
||||
|
||||
return [
|
||||
h(
|
||||
Component,
|
||||
{
|
||||
...attrs,
|
||||
...createProps(renderOpts, null),
|
||||
...createEvents(renderOpts, params),
|
||||
},
|
||||
cellText(renderOpts.content),
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export function createFormItemRender() {
|
||||
return function (renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
|
||||
const { attrs, content } = renderOpts
|
||||
const { property, $form, data } = params
|
||||
const props = createProps(renderOpts, null)
|
||||
const Component = getComponent(COMPONENT_NAME)
|
||||
|
||||
return [
|
||||
h(
|
||||
Component,
|
||||
{
|
||||
...attrs,
|
||||
...props,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
XEUtils.set(data, property, value)
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
$form.updateStatus({
|
||||
...params,
|
||||
field: property,
|
||||
})
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
default: () => cellText(content || props.content),
|
||||
},
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function createToolbarButtonRender() {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderToolOptions,
|
||||
params: VxeGlobalRendererHandles.RenderButtonParams,
|
||||
) {
|
||||
const { attrs } = renderOpts
|
||||
const { button } = params
|
||||
const props = createProps(renderOpts, null)
|
||||
const Component = getComponent(COMPONENT_NAME)
|
||||
|
||||
return [
|
||||
h(
|
||||
Component,
|
||||
{
|
||||
...attrs,
|
||||
...props,
|
||||
...createEvents(renderOpts, params),
|
||||
},
|
||||
{
|
||||
default: () => cellText(button?.content || props.content),
|
||||
},
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderDefault: createDefaultRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
renderToolbarButton: createToolbarButtonRender(),
|
||||
}
|
@@ -1,59 +0,0 @@
|
||||
import {
|
||||
FormItemContentRenderParams,
|
||||
FormItemRenderOptions,
|
||||
VxeGlobalRendererHandles,
|
||||
} from 'vxe-table'
|
||||
import { createDefaultRender, createEditRender, createFormItemRender } from './AButton'
|
||||
|
||||
function createEditButtonRender() {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderEditOptions,
|
||||
params: VxeGlobalRendererHandles.RenderEditParams,
|
||||
) {
|
||||
const buttonEditRender = createEditRender()
|
||||
const { children } = renderOpts
|
||||
if (children) {
|
||||
return children.map(
|
||||
(childRenderOpts: VxeGlobalRendererHandles.RenderEditOptions) =>
|
||||
buttonEditRender(childRenderOpts, params)[0],
|
||||
)
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function createDefaultButtonRender() {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions,
|
||||
params: VxeGlobalRendererHandles.RenderDefaultParams,
|
||||
) {
|
||||
const buttonDefaultRender = createDefaultRender()
|
||||
const { children } = renderOpts
|
||||
if (children) {
|
||||
return children.map(
|
||||
(childRenderOpts: VxeGlobalRendererHandles.RenderDefaultOptions) =>
|
||||
buttonDefaultRender(childRenderOpts, params)[0],
|
||||
)
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function createButtonItemRender() {
|
||||
return function (renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
|
||||
const buttonItemRender = createFormItemRender()
|
||||
const { children } = renderOpts
|
||||
if (children) {
|
||||
return children.map(
|
||||
(childRenderOpts: FormItemRenderOptions) => buttonItemRender(childRenderOpts, params)[0],
|
||||
)
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditButtonRender(),
|
||||
renderDefault: createDefaultButtonRender(),
|
||||
renderItemContent: createButtonItemRender(),
|
||||
}
|
@@ -1,42 +0,0 @@
|
||||
import { VxeGlobalRendererHandles } from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
createEditRender,
|
||||
createCellRender,
|
||||
createFormItemRender,
|
||||
createExportMethod,
|
||||
} from './common'
|
||||
|
||||
function matchCascaderData(index: number, list: any[], values: any[], labels: any[]) {
|
||||
const val = values[index]
|
||||
if (list && values.length > index) {
|
||||
XEUtils.each(list, (item) => {
|
||||
if (item.value === val) {
|
||||
labels.push(item.label)
|
||||
matchCascaderData(++index, item.children, values, labels)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function getCascaderCellValue(
|
||||
renderOpts: VxeGlobalRendererHandles.RenderOptions,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams,
|
||||
) {
|
||||
const { props = {} } = renderOpts
|
||||
const { row, column } = params
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
const values = cellValue || []
|
||||
const labels: Array<any> = []
|
||||
matchCascaderData(0, props.options, values, labels)
|
||||
return (
|
||||
props.showAllLevels === false ? labels.slice(labels.length - 1, labels.length) : labels
|
||||
).join(` ${props.separator || '/'} `)
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getCascaderCellValue),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getCascaderCellValue),
|
||||
}
|
@@ -1,5 +0,0 @@
|
||||
import { createFormItemRender } from './common'
|
||||
|
||||
export default {
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,33 +0,0 @@
|
||||
import { VxeGlobalRendererHandles } from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
createCellRender,
|
||||
createEditRender,
|
||||
createExportMethod,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
export function getDatePickerCellValue(
|
||||
renderOpts: VxeGlobalRendererHandles.RenderOptions,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams,
|
||||
defaultFormat: string,
|
||||
) {
|
||||
const { props = {} } = renderOpts
|
||||
const { row, column } = params
|
||||
let cellValue = XEUtils.get(row, column.field as string)
|
||||
if (cellValue) {
|
||||
cellValue = cellValue.format(props.format || defaultFormat)
|
||||
}
|
||||
return cellValue
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getDatePickerCellValue, () => {
|
||||
return ['YYYY-MM-DD']
|
||||
}),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getDatePickerCellValue, () => {
|
||||
return ['YYYY-MM-DD']
|
||||
}),
|
||||
}
|
@@ -1,27 +0,0 @@
|
||||
import { h } from 'vue'
|
||||
import { VxeGlobalRendererHandles } from 'vxe-table'
|
||||
import { getComponent } from './common'
|
||||
|
||||
function createEmptyRender() {
|
||||
return function (renderOpts: VxeGlobalRendererHandles.RenderEmptyOptions) {
|
||||
const { name, attrs, props } = renderOpts
|
||||
|
||||
const Component = getComponent(name)
|
||||
return [
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'flex items-center justify-center',
|
||||
},
|
||||
h(Component, {
|
||||
...attrs,
|
||||
...props,
|
||||
}),
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEmpty: createEmptyRender(),
|
||||
}
|
@@ -1,16 +0,0 @@
|
||||
import {
|
||||
createEditRender,
|
||||
createDefaultRender,
|
||||
createFilterRender,
|
||||
createDefaultFilterRender,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
autofocus: 'input.ant-input',
|
||||
renderDefault: createDefaultRender(),
|
||||
renderEdit: createEditRender(),
|
||||
renderFilter: createFilterRender(),
|
||||
defaultFilterMethod: createDefaultFilterRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,16 +0,0 @@
|
||||
import {
|
||||
createEditRender,
|
||||
createFilterRender,
|
||||
createFormItemRender,
|
||||
createDefaultFilterRender,
|
||||
createDefaultRender,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
autofocus: 'input.ant-input-number-input',
|
||||
renderDefault: createDefaultRender(),
|
||||
renderEdit: createEditRender(),
|
||||
renderFilter: createFilterRender(),
|
||||
defaultFilterMethod: createDefaultFilterRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,17 +0,0 @@
|
||||
import {
|
||||
createEditRender,
|
||||
createDefaultRender,
|
||||
createFilterRender,
|
||||
createDefaultFilterRender,
|
||||
createFormItemRender,
|
||||
createToolbarToolRender,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderDefault: createDefaultRender(),
|
||||
renderEdit: createEditRender(),
|
||||
renderFilter: createFilterRender(),
|
||||
defaultFilterMethod: createDefaultFilterRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
renderToolbarTool: createToolbarToolRender(),
|
||||
}
|
@@ -1,18 +0,0 @@
|
||||
import { getDatePickerCellValue } from './ADatePicker'
|
||||
import {
|
||||
createCellRender,
|
||||
createEditRender,
|
||||
createExportMethod,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getDatePickerCellValue, () => {
|
||||
return ['YYYY-MM']
|
||||
}),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getDatePickerCellValue, () => {
|
||||
return ['YYYY-MM']
|
||||
}),
|
||||
}
|
@@ -1,5 +0,0 @@
|
||||
import { createFormItemRender } from './common'
|
||||
|
||||
export default {
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,30 +0,0 @@
|
||||
import { VxeColumnPropTypes, VxeGlobalRendererHandles } from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
createCellRender,
|
||||
createEditRender,
|
||||
createExportMethod,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
function getRangePickerCellValue(
|
||||
renderOpts: VxeColumnPropTypes.EditRender,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams,
|
||||
) {
|
||||
const { props = {} } = renderOpts
|
||||
const { row, column } = params
|
||||
let cellValue = XEUtils.get(row, column.field as string)
|
||||
if (cellValue) {
|
||||
cellValue = XEUtils.map(cellValue, (date: any) =>
|
||||
date.format(props.format || 'YYYY-MM-DD'),
|
||||
).join(' ~ ')
|
||||
}
|
||||
return cellValue
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getRangePickerCellValue),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getRangePickerCellValue),
|
||||
}
|
@@ -1,15 +0,0 @@
|
||||
import {
|
||||
createEditRender,
|
||||
createDefaultRender,
|
||||
createFilterRender,
|
||||
createDefaultFilterRender,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderDefault: createDefaultRender(),
|
||||
renderEdit: createEditRender(),
|
||||
renderFilter: createFilterRender(),
|
||||
defaultFilterMethod: createDefaultFilterRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,271 +0,0 @@
|
||||
import { ComponentOptions, h, resolveComponent } from 'vue'
|
||||
import { VxeColumnPropTypes, VxeGlobalRendererHandles } from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
cellText,
|
||||
createCellRender,
|
||||
createEvents,
|
||||
createProps,
|
||||
isEmptyValue,
|
||||
createExportMethod,
|
||||
createFormItemRender,
|
||||
} from './common'
|
||||
|
||||
function renderOptions(options: any[], optionProps: VxeGlobalRendererHandles.RenderOptionProps) {
|
||||
const labelProp = optionProps.label || 'label'
|
||||
const valueProp = optionProps.value || 'value'
|
||||
return XEUtils.map(options, (item, oIndex) => {
|
||||
return h(
|
||||
resolveComponent('a-select-option') as ComponentOptions,
|
||||
{
|
||||
key: oIndex,
|
||||
value: item[valueProp],
|
||||
disabled: item.disabled,
|
||||
},
|
||||
{
|
||||
default: () => cellText(item[labelProp]),
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
function createEditRender() {
|
||||
return function (
|
||||
renderOpts: VxeColumnPropTypes.EditRender,
|
||||
params: VxeGlobalRendererHandles.RenderEditParams,
|
||||
) {
|
||||
const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
|
||||
const { row, column, $table } = params
|
||||
const { attrs } = renderOpts
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
const props = createProps(renderOpts, cellValue)
|
||||
const ons = createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
XEUtils.set(row, column.field as string, value)
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
$table.updateStatus(params)
|
||||
},
|
||||
)
|
||||
if (optionGroups) {
|
||||
const groupOptions = optionGroupProps.options || 'options'
|
||||
const groupLabel = optionGroupProps.label || 'label'
|
||||
return [
|
||||
h(
|
||||
resolveComponent('a-select') as ComponentOptions,
|
||||
{
|
||||
...attrs,
|
||||
...props,
|
||||
...ons,
|
||||
},
|
||||
{
|
||||
default: () => {
|
||||
return XEUtils.map(optionGroups, (group, gIndex) => {
|
||||
return h(
|
||||
resolveComponent('a-select-opt-group') as ComponentOptions,
|
||||
{
|
||||
key: gIndex,
|
||||
},
|
||||
{
|
||||
label: () => {
|
||||
return h('span', {}, group[groupLabel])
|
||||
},
|
||||
default: () => renderOptions(group[groupOptions], optionProps),
|
||||
},
|
||||
)
|
||||
})
|
||||
},
|
||||
},
|
||||
),
|
||||
]
|
||||
}
|
||||
return [
|
||||
h(
|
||||
resolveComponent('a-select') as ComponentOptions,
|
||||
{
|
||||
...props,
|
||||
...attrs,
|
||||
...ons,
|
||||
},
|
||||
{
|
||||
default: () => renderOptions(options, optionProps),
|
||||
},
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectCellValue(
|
||||
renderOpts: VxeGlobalRendererHandles.RenderCellOptions,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams,
|
||||
) {
|
||||
const {
|
||||
options = [],
|
||||
optionGroups,
|
||||
props = {},
|
||||
optionProps = {},
|
||||
optionGroupProps = {},
|
||||
} = renderOpts
|
||||
const { row, column } = params
|
||||
const labelProp = optionProps.label || 'label'
|
||||
const valueProp = optionProps.value || 'value'
|
||||
const groupOptions = optionGroupProps.options || 'options'
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
if (!isEmptyValue(cellValue)) {
|
||||
return XEUtils.map(
|
||||
props.mode === 'multiple' ? cellValue : [cellValue],
|
||||
optionGroups
|
||||
? (value) => {
|
||||
let selectItem
|
||||
for (let index = 0; index < optionGroups.length; index++) {
|
||||
selectItem = XEUtils.find(
|
||||
optionGroups[index][groupOptions],
|
||||
(item) => item[valueProp] === value,
|
||||
)
|
||||
if (selectItem) {
|
||||
break
|
||||
}
|
||||
}
|
||||
return selectItem ? selectItem[labelProp] : value
|
||||
}
|
||||
: (value) => {
|
||||
const selectItem = XEUtils.find(options, (item) => item[valueProp] === value)
|
||||
return selectItem ? selectItem[labelProp] : value
|
||||
},
|
||||
).join(', ')
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function createFilterRender() {
|
||||
return function (
|
||||
renderOpts: VxeColumnPropTypes.FilterRender,
|
||||
params: VxeGlobalRendererHandles.RenderFilterParams,
|
||||
) {
|
||||
const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
|
||||
const groupOptions = optionGroupProps.options || 'options'
|
||||
const groupLabel = optionGroupProps.label || 'label'
|
||||
const { column } = params
|
||||
const { attrs } = renderOpts
|
||||
|
||||
return [
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'vxe-table--filter-antd-wrapper',
|
||||
},
|
||||
optionGroups
|
||||
? column.filters.map((option, oIndex) => {
|
||||
const optionValue = option.data
|
||||
const props = createProps(renderOpts, optionValue)
|
||||
|
||||
return h(
|
||||
resolveComponent('a-select') as ComponentOptions,
|
||||
{
|
||||
key: oIndex,
|
||||
...attrs,
|
||||
...props,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
option.data = value
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
const { $panel } = params
|
||||
$panel.changeOption(
|
||||
null,
|
||||
props.mode === 'multiple'
|
||||
? option.data && option.data.length > 0
|
||||
: !XEUtils.eqNull(option.data),
|
||||
option,
|
||||
)
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
default: () => {
|
||||
return XEUtils.map(optionGroups, (group, gIndex) => {
|
||||
return h(
|
||||
resolveComponent('a-select-opt-group') as ComponentOptions,
|
||||
{
|
||||
key: gIndex,
|
||||
},
|
||||
{
|
||||
label: () => {
|
||||
return h('span', {}, group[groupLabel])
|
||||
},
|
||||
default: () => renderOptions(group[groupOptions], optionProps),
|
||||
},
|
||||
)
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
: column.filters.map((option, oIndex) => {
|
||||
const optionValue = option.data
|
||||
const props = createProps(renderOpts, optionValue)
|
||||
return h(
|
||||
resolveComponent('a-select') as ComponentOptions,
|
||||
{
|
||||
key: oIndex,
|
||||
...attrs,
|
||||
...props,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
option.data = value
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
const { $panel } = params
|
||||
$panel.changeOption(
|
||||
null,
|
||||
props.mode === 'multiple'
|
||||
? option.data && option.data.length > 0
|
||||
: !XEUtils.eqNull(option.data),
|
||||
option,
|
||||
)
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
default: () => renderOptions(options, optionProps),
|
||||
},
|
||||
)
|
||||
}),
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getSelectCellValue),
|
||||
renderFilter: createFilterRender(),
|
||||
defaultFilterMethod(params) {
|
||||
const { option, row, column } = params
|
||||
const { data } = option
|
||||
const { field, filterRender: renderOpts } = column
|
||||
const { props = {} } = renderOpts
|
||||
const cellValue = XEUtils.get(row, field)
|
||||
if (props.mode === 'multiple') {
|
||||
if (XEUtils.isArray(cellValue)) {
|
||||
return XEUtils.includeArrays(cellValue, data)
|
||||
}
|
||||
return data.indexOf(cellValue) > -1
|
||||
}
|
||||
return cellValue == data
|
||||
},
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getSelectCellValue),
|
||||
}
|
@@ -1,53 +0,0 @@
|
||||
import { h } from 'vue'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
createEditRender,
|
||||
createDefaultRender,
|
||||
createProps,
|
||||
createEvents,
|
||||
createDefaultFilterRender,
|
||||
createFormItemRender,
|
||||
getComponent,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderDefault: createDefaultRender(),
|
||||
renderEdit: createEditRender(),
|
||||
renderFilter(renderOpts, params) {
|
||||
const { column } = params
|
||||
const { name, attrs } = renderOpts
|
||||
const Component = getComponent(name)
|
||||
|
||||
return [
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'vxe-table--filter-antd-wrapper',
|
||||
},
|
||||
column.filters.map((option, oIndex) => {
|
||||
const optionValue = option.data
|
||||
return h(Component, {
|
||||
key: oIndex,
|
||||
...attrs,
|
||||
...createProps(renderOpts, optionValue),
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
option.data = value
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
const { $panel } = params
|
||||
$panel.changeOption(null, XEUtils.isBoolean(option.data), option)
|
||||
},
|
||||
),
|
||||
})
|
||||
}),
|
||||
),
|
||||
]
|
||||
},
|
||||
defaultFilterMethod: createDefaultFilterRender(),
|
||||
renderItemContent: createFormItemRender(),
|
||||
}
|
@@ -1,18 +0,0 @@
|
||||
import { getDatePickerCellValue } from './ADatePicker'
|
||||
import {
|
||||
createEditRender,
|
||||
createCellRender,
|
||||
createFormItemRender,
|
||||
createExportMethod,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getDatePickerCellValue, () => {
|
||||
return ['HH:mm:ss']
|
||||
}),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getDatePickerCellValue, () => {
|
||||
return ['HH:mm:ss']
|
||||
}),
|
||||
}
|
@@ -1,35 +0,0 @@
|
||||
import { VxeGlobalRendererHandles } from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import {
|
||||
createEditRender,
|
||||
createCellRender,
|
||||
isEmptyValue,
|
||||
createFormItemRender,
|
||||
createExportMethod,
|
||||
} from './common'
|
||||
|
||||
function getTreeSelectCellValue(
|
||||
renderOpts: VxeGlobalRendererHandles.RenderOptions,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams,
|
||||
) {
|
||||
const { props = {} } = renderOpts
|
||||
const { treeData, treeCheckable } = props
|
||||
const { row, column } = params
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
if (!isEmptyValue(cellValue)) {
|
||||
return XEUtils.map(treeCheckable ? cellValue : [cellValue], (value) => {
|
||||
const matchObj = XEUtils.findTree(treeData, (item: any) => item.value === value, {
|
||||
children: 'children',
|
||||
})
|
||||
return matchObj ? matchObj.item.title : value
|
||||
}).join(', ')
|
||||
}
|
||||
return cellValue
|
||||
}
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getTreeSelectCellValue),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getTreeSelectCellValue),
|
||||
}
|
@@ -1,18 +0,0 @@
|
||||
import { getDatePickerCellValue } from './ADatePicker'
|
||||
import {
|
||||
createEditRender,
|
||||
createCellRender,
|
||||
createFormItemRender,
|
||||
createExportMethod,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getDatePickerCellValue, () => {
|
||||
return ['YYYY-WW周']
|
||||
}),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getDatePickerCellValue, () => {
|
||||
return ['YYYY-WW周']
|
||||
}),
|
||||
}
|
@@ -1,18 +0,0 @@
|
||||
import { getDatePickerCellValue } from './ADatePicker'
|
||||
import {
|
||||
createEditRender,
|
||||
createCellRender,
|
||||
createFormItemRender,
|
||||
createExportMethod,
|
||||
} from './common'
|
||||
|
||||
export default {
|
||||
renderEdit: createEditRender(),
|
||||
renderCell: createCellRender(getDatePickerCellValue, () => {
|
||||
return ['YYYY']
|
||||
}),
|
||||
renderItemContent: createFormItemRender(),
|
||||
exportMethod: createExportMethod(getDatePickerCellValue, () => {
|
||||
return ['YYYY']
|
||||
}),
|
||||
}
|
@@ -1,427 +0,0 @@
|
||||
import { ComponentOptions, h } from 'vue'
|
||||
import {
|
||||
FormItemContentRenderParams,
|
||||
FormItemRenderOptions,
|
||||
VxeGlobalRendererHandles,
|
||||
} from 'vxe-table'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { componentMap } from '../componentMap'
|
||||
import { ComponentType } from '../componentType'
|
||||
import { createPlaceholderMessage, sanitizeInputWhitespace } from '../helper'
|
||||
|
||||
/**
|
||||
* @description: 获取组件
|
||||
*/
|
||||
export function getComponent(componentName) {
|
||||
const Component = componentMap.get(componentName as ComponentType)
|
||||
if (!Component) throw `您还没注册此组件 ${componentName}`
|
||||
return Component as ComponentOptions
|
||||
}
|
||||
|
||||
export function isEmptyValue(cellValue: any) {
|
||||
return cellValue === null || cellValue === undefined || cellValue === ''
|
||||
}
|
||||
|
||||
export function formatText(cellValue: any) {
|
||||
return '' + (isEmptyValue(cellValue) ? '' : cellValue)
|
||||
}
|
||||
|
||||
export function cellText(cellValue: any): string[] {
|
||||
return [formatText(cellValue)]
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 方法名转换
|
||||
*/
|
||||
export function getOnName(type: string) {
|
||||
return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 获取组件传值所接受的属性
|
||||
*/
|
||||
function getModelKey(renderOpts: VxeGlobalRendererHandles.RenderOptions) {
|
||||
let prop = 'value'
|
||||
switch (renderOpts.name) {
|
||||
case 'ASwitch':
|
||||
prop = 'checked'
|
||||
break
|
||||
}
|
||||
return prop
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 回去双向更新的方法
|
||||
*/
|
||||
function getModelEvent(renderOpts: VxeGlobalRendererHandles.RenderOptions) {
|
||||
let type = 'update:value'
|
||||
switch (renderOpts.name) {
|
||||
case 'ASwitch':
|
||||
type = 'update:checked'
|
||||
break
|
||||
}
|
||||
return type
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: chang值改变方法
|
||||
* @param {}
|
||||
* @return {*}
|
||||
* @author: *
|
||||
*/
|
||||
function getChangeEvent() {
|
||||
return 'change'
|
||||
}
|
||||
|
||||
function getClickEvent() {
|
||||
return 'click'
|
||||
}
|
||||
/**
|
||||
* @description: 获取方法
|
||||
* @param {}
|
||||
* @return {*}
|
||||
* @author: *
|
||||
*/
|
||||
export function createEvents(
|
||||
renderOpts: VxeGlobalRendererHandles.RenderOptions,
|
||||
params: VxeGlobalRendererHandles.RenderParams,
|
||||
inputFunc?: Function,
|
||||
changeFunc?: Function,
|
||||
clickFunc?: Function,
|
||||
) {
|
||||
const { events } = renderOpts
|
||||
const modelEvent = getModelEvent(renderOpts)
|
||||
const changeEvent = getChangeEvent()
|
||||
const clickEvent = getClickEvent()
|
||||
const isSameEvent = changeEvent === modelEvent
|
||||
const ons: { [type: string]: Function } = {}
|
||||
|
||||
XEUtils.objectEach(events, (func: Function, key: string) => {
|
||||
ons[getOnName(key)] = function (...args: any[]) {
|
||||
func(params, ...args)
|
||||
}
|
||||
})
|
||||
if (inputFunc) {
|
||||
ons[getOnName(modelEvent)] = function (targetEvent: any) {
|
||||
inputFunc(targetEvent)
|
||||
if (events && events[modelEvent]) {
|
||||
events[modelEvent](params, targetEvent)
|
||||
}
|
||||
if (isSameEvent && changeFunc) {
|
||||
changeFunc(targetEvent)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!isSameEvent && changeFunc) {
|
||||
ons[getOnName(changeEvent)] = function (...args: any[]) {
|
||||
changeFunc(...args)
|
||||
if (events && events[changeEvent]) {
|
||||
events[changeEvent](params, ...args)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (clickFunc) {
|
||||
ons[getOnName(clickEvent)] = function (...args: any[]) {
|
||||
clickFunc(...args)
|
||||
if (events && events[clickEvent]) {
|
||||
events[clickEvent](params, ...args)
|
||||
}
|
||||
}
|
||||
}
|
||||
return ons
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 获取属性
|
||||
*/
|
||||
export function createProps(
|
||||
renderOpts: VxeGlobalRendererHandles.RenderOptions,
|
||||
value: any,
|
||||
defaultProps?: { [prop: string]: any },
|
||||
) {
|
||||
const name = renderOpts.name as ComponentType
|
||||
return XEUtils.assign(
|
||||
{
|
||||
placeholder: createPlaceholderMessage(name),
|
||||
allowClear: true,
|
||||
},
|
||||
defaultProps,
|
||||
renderOpts.props,
|
||||
{
|
||||
[getModelKey(renderOpts)]: value,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 创建单元格默认显示内容
|
||||
*/
|
||||
export function createDefaultRender(
|
||||
defaultProps?: { [key: string]: any },
|
||||
callBack?: (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions,
|
||||
params: VxeGlobalRendererHandles.RenderDefaultParams,
|
||||
) => Record<string, any>,
|
||||
) {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions,
|
||||
params: VxeGlobalRendererHandles.RenderDefaultParams,
|
||||
) {
|
||||
const { row, column, $table } = params
|
||||
const { name, attrs } = renderOpts
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
const args = (callBack && callBack(renderOpts, params)) ?? {}
|
||||
|
||||
const Component = getComponent(name)
|
||||
return [
|
||||
h(Component, {
|
||||
...attrs,
|
||||
...createProps(renderOpts, cellValue, defaultProps),
|
||||
...args,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => XEUtils.set(row, column.field as string, value),
|
||||
() => $table.updateStatus(params),
|
||||
),
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 创建编辑单元格
|
||||
*/
|
||||
export function createEditRender(
|
||||
defaultProps?: { [key: string]: any },
|
||||
callBack?: (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderEditOptions,
|
||||
params: VxeGlobalRendererHandles.RenderEditParams,
|
||||
) => Record<string, any>,
|
||||
) {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderEditOptions,
|
||||
params: VxeGlobalRendererHandles.RenderEditParams,
|
||||
) {
|
||||
const { row, column, $table } = params
|
||||
const { name, attrs } = renderOpts
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
const args = (callBack && callBack(renderOpts, params)) ?? {}
|
||||
|
||||
const Component = getComponent(name)
|
||||
return [
|
||||
h(Component, {
|
||||
...attrs,
|
||||
...createProps(renderOpts, cellValue, defaultProps),
|
||||
...args,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => XEUtils.set(row, column.field as string, value),
|
||||
() => $table.updateStatus(params),
|
||||
),
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 创建筛选渲染内容
|
||||
*/
|
||||
export function createFilterRender(
|
||||
defaultProps?: { [key: string]: any },
|
||||
callBack?: (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderFilterOptions,
|
||||
params: VxeGlobalRendererHandles.RenderFilterParams,
|
||||
) => Record<string, any>,
|
||||
) {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderFilterOptions,
|
||||
params: VxeGlobalRendererHandles.RenderFilterParams,
|
||||
) {
|
||||
const { column } = params
|
||||
const { name, attrs } = renderOpts
|
||||
const args = (callBack && callBack(renderOpts, params)) ?? {}
|
||||
|
||||
const Component = getComponent(name)
|
||||
return [
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'vxe-table--filter-antd-wrapper',
|
||||
},
|
||||
column.filters.map((option, oIndex) => {
|
||||
const optionValue = option.data
|
||||
const checked = !!option.data
|
||||
|
||||
return h(Component, {
|
||||
key: oIndex,
|
||||
...attrs,
|
||||
...createProps(renderOpts, optionValue, defaultProps),
|
||||
...args,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
option.data = value
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
const { $panel } = params
|
||||
$panel.changeOption(null, checked, option)
|
||||
},
|
||||
),
|
||||
})
|
||||
}),
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 默认过滤
|
||||
* @param {}
|
||||
* @return {*}
|
||||
* @author: *
|
||||
*/
|
||||
|
||||
export function createDefaultFilterRender() {
|
||||
return function (params: VxeGlobalRendererHandles.FilterMethodParams) {
|
||||
const { option, row, column } = params
|
||||
const { data } = option
|
||||
const cellValue = XEUtils.get(row, column.field as string)
|
||||
return cellValue === data
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 创建 form表单渲染
|
||||
*/
|
||||
export function createFormItemRender(
|
||||
defaultProps?: { [key: string]: any },
|
||||
callBack?: (
|
||||
renderOpts: FormItemRenderOptions,
|
||||
params: FormItemContentRenderParams,
|
||||
) => Record<string, any>,
|
||||
) {
|
||||
return function (renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
|
||||
const args = (callBack && callBack(renderOpts, params)) ?? {}
|
||||
const { data, property, $form } = params
|
||||
const { name } = renderOpts
|
||||
const { attrs } = renderOpts
|
||||
const itemValue = XEUtils.get(data, property)
|
||||
|
||||
const Component = getComponent(name)
|
||||
return [
|
||||
h(Component, {
|
||||
...attrs,
|
||||
...createProps(renderOpts, itemValue, defaultProps),
|
||||
...args,
|
||||
...createEvents(
|
||||
renderOpts,
|
||||
params,
|
||||
(value: any) => {
|
||||
// 处理 model 值双向绑定
|
||||
XEUtils.set(data, property, sanitizeInputWhitespace(name as ComponentType, value))
|
||||
},
|
||||
() => {
|
||||
// 处理 change 事件相关逻辑
|
||||
$form.updateStatus({
|
||||
...params,
|
||||
field: property,
|
||||
})
|
||||
},
|
||||
),
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: cell渲染
|
||||
*/
|
||||
export function createCellRender(
|
||||
getSelectCellValue: Function,
|
||||
callBack?: (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderCellOptions,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams,
|
||||
) => Array<any>,
|
||||
) {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderCellOptions,
|
||||
params: VxeGlobalRendererHandles.RenderCellParams,
|
||||
) {
|
||||
const args = (callBack && callBack(renderOpts, params)) ?? []
|
||||
const cellLabel = getSelectCellValue && getSelectCellValue(renderOpts, params, ...args)
|
||||
const { placeholder } = renderOpts
|
||||
|
||||
return [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: 'vxe-cell--label',
|
||||
},
|
||||
placeholder && isEmptyValue(cellLabel)
|
||||
? [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: 'vxe-cell--placeholder',
|
||||
},
|
||||
formatText(placeholder),
|
||||
),
|
||||
]
|
||||
: formatText(cellLabel),
|
||||
),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 创建 导出渲染
|
||||
* @param {}
|
||||
* @return {*}
|
||||
* @author: *
|
||||
*/
|
||||
export function createExportMethod(
|
||||
getExportCellValue: Function,
|
||||
callBack?: (params: VxeGlobalRendererHandles.ExportMethodParams) => Array<any>,
|
||||
) {
|
||||
return function (params: VxeGlobalRendererHandles.ExportMethodParams) {
|
||||
const { row, column, options } = params
|
||||
const args = (callBack && callBack(params)) ?? []
|
||||
return options && options.original
|
||||
? XEUtils.get(row, column.field as string)
|
||||
: getExportCellValue(column.editRender || column.cellRender, params, ...args)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 创建单元格默认显示内容
|
||||
*/
|
||||
export function createToolbarToolRender(
|
||||
defaultProps?: { [key: string]: any },
|
||||
callBack?: (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderToolOptions,
|
||||
params: VxeGlobalRendererHandles.RenderToolParams,
|
||||
) => Record<string, any>,
|
||||
) {
|
||||
return function (
|
||||
renderOpts: VxeGlobalRendererHandles.RenderToolOptions,
|
||||
params: VxeGlobalRendererHandles.RenderToolParams,
|
||||
) {
|
||||
const { name, attrs } = renderOpts
|
||||
const args = (callBack && callBack(renderOpts, params)) ?? {}
|
||||
|
||||
const Component = getComponent(name)
|
||||
return [
|
||||
h(Component, {
|
||||
...attrs,
|
||||
...createProps(renderOpts, null, defaultProps),
|
||||
...args,
|
||||
...createEvents(renderOpts, params),
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
@@ -1,114 +0,0 @@
|
||||
import { VXETableCore, VxeGlobalInterceptorHandles } from 'vxe-table'
|
||||
import AAutoComplete from './AAutoComplete'
|
||||
import AInput from './AInput'
|
||||
import AInputNumber from './AInputNumber'
|
||||
import ASelect from './ASelect'
|
||||
import ACascader from './ACascader'
|
||||
import ADatePicker from './ADatePicker'
|
||||
import AMonthPicker from './AMonthPicker'
|
||||
import ARangePicker from './ARangePicker'
|
||||
import AWeekPicker from './AWeekPicker'
|
||||
import ATreeSelect from './ATreeSelect'
|
||||
import ATimePicker from './ATimePicker'
|
||||
import ARate from './ARate'
|
||||
import ASwitch from './ASwitch'
|
||||
import ARadioGroup from './ARadioGroup'
|
||||
import ACheckboxGroup from './ACheckboxGroup'
|
||||
import AButton from './AButton'
|
||||
import AButtonGroup from './AButtonGroup'
|
||||
import AApiSelect from './AApiSelect'
|
||||
import AApiTreeSelect from './AApiTreeSelect'
|
||||
import AEmpty from './AEmpty'
|
||||
import AInputSearch from './AInputSearch'
|
||||
import AYearPicker from './AYearPicker'
|
||||
|
||||
/**
|
||||
* 检查触发源是否属于目标节点
|
||||
*/
|
||||
function getEventTargetNode(evnt: any, container: HTMLElement, className: string) {
|
||||
let targetElem
|
||||
let target = evnt.target
|
||||
while (target && target.nodeType && target !== document) {
|
||||
if (
|
||||
className &&
|
||||
target.className &&
|
||||
target.className.split &&
|
||||
target.className.split(' ').indexOf(className) > -1
|
||||
) {
|
||||
targetElem = target
|
||||
} else if (target === container) {
|
||||
return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
|
||||
}
|
||||
target = target.parentNode
|
||||
}
|
||||
return { flag: false }
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件兼容性处理
|
||||
*/
|
||||
function handleClearEvent(
|
||||
params:
|
||||
| VxeGlobalInterceptorHandles.InterceptorClearFilterParams
|
||||
| VxeGlobalInterceptorHandles.InterceptorClearActivedParams
|
||||
| VxeGlobalInterceptorHandles.InterceptorClearAreasParams,
|
||||
) {
|
||||
const { $event } = params
|
||||
const bodyElem = document.body
|
||||
if (
|
||||
// 下拉框
|
||||
getEventTargetNode($event, bodyElem, 'ant-select-dropdown').flag ||
|
||||
// 级联
|
||||
getEventTargetNode($event, bodyElem, 'ant-cascader-menus').flag ||
|
||||
// 日期
|
||||
getEventTargetNode($event, bodyElem, 'ant-calendar-picker-container').flag ||
|
||||
// 时间选择
|
||||
getEventTargetNode($event, bodyElem, 'ant-time-picker-panel').flag
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 基于 vxe-table 表格的适配插件,用于兼容 ant-design-vue 组件库
|
||||
*/
|
||||
export const VXETablePluginAntd = {
|
||||
install(vxetablecore: VXETableCore) {
|
||||
const { interceptor, renderer } = vxetablecore
|
||||
|
||||
renderer.mixin({
|
||||
AAutoComplete,
|
||||
AInput,
|
||||
AInputNumber,
|
||||
ASelect,
|
||||
ACascader,
|
||||
ADatePicker,
|
||||
AMonthPicker,
|
||||
ARangePicker,
|
||||
AWeekPicker,
|
||||
ATimePicker,
|
||||
ATreeSelect,
|
||||
ARate,
|
||||
ASwitch,
|
||||
ARadioGroup,
|
||||
ACheckboxGroup,
|
||||
AButton,
|
||||
AButtonGroup,
|
||||
AApiSelect,
|
||||
AApiTreeSelect,
|
||||
AEmpty,
|
||||
AInputSearch,
|
||||
AYearPicker,
|
||||
})
|
||||
|
||||
interceptor.add('event.clearFilter', handleClearEvent)
|
||||
interceptor.add('event.clearActived', handleClearEvent)
|
||||
interceptor.add('event.clearAreas', handleClearEvent)
|
||||
},
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && window.VXETable && window.VXETable.use) {
|
||||
window.VXETable.use(VXETablePluginAntd)
|
||||
}
|
||||
|
||||
export default VXETablePluginAntd
|
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* @description: 传给vxe-table 时需要忽略的prop
|
||||
*/
|
||||
export const ignorePropKeys = ['tableClass', 'tableStyle']
|
||||
|
||||
/**
|
||||
* @description: 需要忽略内容首尾空格的输入组件列表
|
||||
*/
|
||||
export const ignoreTrimInputComponents = ['AInput', 'ATextarea']
|
@@ -1,8 +0,0 @@
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: initial;
|
||||
}
|
@@ -1,123 +0,0 @@
|
||||
/* stylelint-disable scss/percent-placeholder-pattern */
|
||||
%ResetBorder {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
%CompWidth {
|
||||
& > .ant-input,
|
||||
& > .ant-input-number,
|
||||
& > .ant-select,
|
||||
& > .ant-cascader-picker,
|
||||
& > .ant-calendar-picker,
|
||||
& > .ant-time-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vxe-form {
|
||||
.vxe-form--item-content {
|
||||
@extend %CompWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.vxe-table--filter-antd-wrapper {
|
||||
& > .ant-input,
|
||||
& > .ant-input-number,
|
||||
& > .ant-select,
|
||||
& > .ant-rate {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.vxe-cell,
|
||||
.vxe-tree-cell {
|
||||
@extend %CompWidth;
|
||||
|
||||
& > .ant-rate {
|
||||
vertical-align: bottom;
|
||||
|
||||
.anticon-star {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col--valid-error {
|
||||
& > .vxe-cell,
|
||||
& > .vxe-tree-cell {
|
||||
& > .ant-input,
|
||||
& > .ant-select .ant-input,
|
||||
& > .ant-select .ant-select-selection,
|
||||
& > .ant-input-number,
|
||||
& > .ant-cascader-picker .ant-cascader-input,
|
||||
& > .ant-calendar-picker .ant-calendar-picker-input {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vxe-table.cell--highlight {
|
||||
.vxe-cell,
|
||||
.vxe-tree-cell {
|
||||
& > .ant-input,
|
||||
& > .ant-input-number {
|
||||
@extend %ResetBorder;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > .ant-select {
|
||||
.ant-input {
|
||||
@extend %ResetBorder;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-select-selection {
|
||||
@extend %ResetBorder;
|
||||
|
||||
.ant-select-selection__rendered {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-input-number {
|
||||
.ant-input-number-input {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-input-number-handler-wrap,
|
||||
.ant-input-number-handler-down {
|
||||
@extend %ResetBorder;
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-cascader-picker {
|
||||
.ant-input {
|
||||
@extend %ResetBorder;
|
||||
}
|
||||
|
||||
.ant-cascader-picker-label {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-calendar-picker {
|
||||
.ant-calendar-picker-input {
|
||||
@extend %ResetBorder;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-time-picker {
|
||||
.ant-time-picker-input {
|
||||
@extend %ResetBorder;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@@ -1,5 +0,0 @@
|
||||
@import './common';
|
||||
@import './variable';
|
||||
@import './toolbar';
|
||||
@import './component';
|
||||
@import 'vxe-table/styles/all';
|
@@ -1,26 +0,0 @@
|
||||
.vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vxe-toolbar .vxe-tools--wrapper,
|
||||
.vxe-toolbar .vxe-tools--operate button:first-child {
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.vxe-toolbar .vxe-tools--wrapper,
|
||||
.vxe-toolbar .vxe-tools--operate .vxe-button {
|
||||
margin-left: 1px;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.vxe-toolbar .vxe-tools--wrapper,
|
||||
.vxe-toolbar .vxe-tools--operate .vxe-custom--wrapper {
|
||||
margin-left: 1px;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.vxe-toolbar .vxe-tools--wrapper,
|
||||
.vxe-toolbar .vxe-tools--operate .vxe-custom--wrapper .vxe-button {
|
||||
margin-left: 10px;
|
||||
}
|
@@ -1,54 +0,0 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
html[data-theme='dark'] {
|
||||
// $bg-color: #151515;
|
||||
// $tooltip-bg-color: #303133;
|
||||
// $text-color: #c9d1d9;
|
||||
// $border-color: #303030;
|
||||
// $selected-bg-color: #1e1e1e;
|
||||
// $striped-bg-color: #1e1e1e;
|
||||
|
||||
--vxe-form-background-color: #151515;
|
||||
--vxe-toolbar-background-color: #151515;
|
||||
--vxe-pager-background-color: #151515;
|
||||
--vxe-button-default-background-color: lighten(#151515, 15%);
|
||||
--vxe-table-header-background-color: lighten(#151515, 5%);
|
||||
--vxe-font-color: darken(#c9d1d9, 12%);
|
||||
--vxe-table-header-font-color: #c9d1d9;
|
||||
--vxe-table-footer-font-color: #c9d1d9;
|
||||
--vxe-table-body-background-color: #151515;
|
||||
--vxe-table-footer-background-color: #151515;
|
||||
--vxe-table-row-striped-background-color: #1e1e1e;
|
||||
--vxe-table-border-color: #303030;
|
||||
--vxe-table-row-hover-background-color: #1e1e1e;
|
||||
--vxe-table-row-hover-striped-background-color: darken(#1e1e1e, 10%);
|
||||
--vxe-table-row-current-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-column-hover-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-column-current-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%);
|
||||
--vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-menu-background-color: lighten(#303133, 10%);
|
||||
--vxe-table-filter-panel-background-color: lighten(#151515, 5%);
|
||||
--vxe-grid-maximize-background-color: #151515;
|
||||
--vxe-pager-perfect-background-color: #151515;
|
||||
--vxe-pager-perfect-button-background-color: lighten(#151515, 15%);
|
||||
--vxe-input-background-color: #151515;
|
||||
--vxe-input-border-color: #303030;
|
||||
--vxe-select-panel-background-color: #151515;
|
||||
--vxe-table-popup-border-color: #303030;
|
||||
--vxe-select-option-hover-background-color: lighten(#1e1e1e, 15%);
|
||||
--vxe-pulldown-panel-background-color: #151515;
|
||||
--vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px rgb(255 255 255 / 12%);
|
||||
--vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px rgb(255 255 255 / 12%);
|
||||
--vxe-loading-background-color: rgb(0 0 0 / 50%);
|
||||
--vxe-tooltip-dark-background-color: lighten(#303133, 25%);
|
||||
--vxe-modal-header-background-color: #1e1e1e;
|
||||
--vxe-modal-body-background-color: #303133;
|
||||
--vxe-modal-border-color: #303030;
|
||||
--vxe-toolbar-panel-background-color: #151515;
|
||||
--vxe-input-disabled-color: lighten(#1e1e1e, 20%);
|
||||
--vxe-input-disabled-background-color: lighten(#1e1e1e, 25%);
|
||||
--vxe-checkbox-icon-background-color: lighten(#1e1e1e, 15%);
|
||||
--vxe-checkbox-checked-icon-border-color: #303030;
|
||||
--vxe-checkbox-indeterminate-icon-background-color: lighten(#1e1e1e, 15%);
|
||||
}
|
@@ -1,17 +0,0 @@
|
||||
import tableEmits from 'vxe-table/es/table/src/emits'
|
||||
|
||||
export const basicEmits = [
|
||||
...tableEmits,
|
||||
'page-change',
|
||||
'form-submit',
|
||||
'form-submit-invalid',
|
||||
'form-reset',
|
||||
'form-collapse',
|
||||
'form-toggle-collapse',
|
||||
'toolbar-button-click',
|
||||
'toolbar-tool-click',
|
||||
'zoom',
|
||||
|
||||
//... 如有缺少在此处追加
|
||||
// xxx
|
||||
]
|
@@ -1,29 +0,0 @@
|
||||
import { ComponentType } from './componentType'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { ignoreTrimInputComponents } from './const'
|
||||
|
||||
/**
|
||||
* @description: 生成placeholder
|
||||
*/
|
||||
export function createPlaceholderMessage(component: ComponentType) {
|
||||
if (!component) return
|
||||
if (component.includes('RangePicker')) {
|
||||
return ['请选择', '请选择']
|
||||
}
|
||||
if (component.includes('Input') || component.includes('Complete') || component.includes('Rate')) {
|
||||
return '请输入'
|
||||
} else {
|
||||
return '请选择'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @description: 对输入值进行首尾空格的清理
|
||||
*/
|
||||
export function sanitizeInputWhitespace(component: ComponentType, value: string) {
|
||||
if (ignoreTrimInputComponents.includes(component)) {
|
||||
return XEUtils.trim(value)
|
||||
}
|
||||
return value
|
||||
}
|
@@ -1,171 +0,0 @@
|
||||
import {
|
||||
GridMethods,
|
||||
TableMethods,
|
||||
TableEditMethods,
|
||||
TableValidatorMethods,
|
||||
VxeGridConstructor,
|
||||
} from 'vxe-table'
|
||||
|
||||
export const gridComponentMethodKeys: (
|
||||
| keyof GridMethods
|
||||
| keyof TableMethods
|
||||
| keyof TableEditMethods
|
||||
| keyof TableValidatorMethods
|
||||
| keyof VxeGridConstructor
|
||||
)[] = [
|
||||
// vxe-grid 部分
|
||||
'getRefMaps',
|
||||
'getComputeMaps',
|
||||
'dispatchEvent',
|
||||
'commitProxy',
|
||||
'getFormItems',
|
||||
'getPendingRecords',
|
||||
'zoom',
|
||||
'isMaximized',
|
||||
'maximize',
|
||||
'revert',
|
||||
'getProxyInfo',
|
||||
|
||||
// vxe-table和vxe-grid公共部分
|
||||
'clearAll',
|
||||
'syncData',
|
||||
'updateData',
|
||||
'loadData',
|
||||
'reloadData',
|
||||
'reloadRow',
|
||||
'loadColumn',
|
||||
'reloadColumn',
|
||||
'getRowNode',
|
||||
'getColumnNode',
|
||||
'getRowIndex',
|
||||
'getVTRowIndex',
|
||||
'getVMRowIndex',
|
||||
'getColumnIndex',
|
||||
'getVTColumnIndex',
|
||||
'getVMColumnIndex',
|
||||
'createData',
|
||||
'createRow',
|
||||
'revertData',
|
||||
'clearData',
|
||||
'isInsertByRow',
|
||||
'isUpdateByRow',
|
||||
'getColumns',
|
||||
'getColumnById',
|
||||
'getColumnByField',
|
||||
'getTableColumn',
|
||||
'getData',
|
||||
'getCheckboxRecords',
|
||||
'getParentRow',
|
||||
'getRowSeq',
|
||||
'getRowById',
|
||||
'getRowid',
|
||||
'getTableData',
|
||||
'hideColumn',
|
||||
'showColumn',
|
||||
'resetColumn',
|
||||
'refreshColumn',
|
||||
'refreshScroll',
|
||||
'recalculate',
|
||||
'closeTooltip',
|
||||
'isAllCheckboxChecked',
|
||||
'isAllCheckboxIndeterminate',
|
||||
'getCheckboxIndeterminateRecords',
|
||||
'setCheckboxRow',
|
||||
'isCheckedByCheckboxRow',
|
||||
'isIndeterminateByCheckboxRow',
|
||||
'toggleCheckboxRow',
|
||||
'setAllCheckboxRow',
|
||||
'getRadioReserveRecord',
|
||||
'clearRadioReserve',
|
||||
'getCheckboxReserveRecords',
|
||||
'clearCheckboxReserve',
|
||||
'toggleAllCheckboxRow',
|
||||
'clearCheckboxRow',
|
||||
'setCurrentRow',
|
||||
'isCheckedByRadioRow',
|
||||
'setRadioRow',
|
||||
'clearCurrentRow',
|
||||
'clearRadioRow',
|
||||
'getCurrentRecord',
|
||||
'getRadioRecord',
|
||||
'getCurrentColumn',
|
||||
'setCurrentColumn',
|
||||
'clearCurrentColumn',
|
||||
'sort',
|
||||
'clearSort',
|
||||
'isSort',
|
||||
'getSortColumns',
|
||||
'closeFilter',
|
||||
'isFilter',
|
||||
'isRowExpandLoaded',
|
||||
'clearRowExpandLoaded',
|
||||
'reloadRowExpand',
|
||||
'reloadRowExpand',
|
||||
'toggleRowExpand',
|
||||
'setAllRowExpand',
|
||||
'setRowExpand',
|
||||
'isExpandByRow',
|
||||
'clearRowExpand',
|
||||
'clearRowExpandReserve',
|
||||
'getRowExpandRecords',
|
||||
'getTreeExpandRecords',
|
||||
'isTreeExpandLoaded',
|
||||
'clearTreeExpandLoaded',
|
||||
'reloadTreeExpand',
|
||||
'reloadTreeChilds',
|
||||
'toggleTreeExpand',
|
||||
'setAllTreeExpand',
|
||||
'setTreeExpand',
|
||||
'isTreeExpandByRow',
|
||||
'clearTreeExpand',
|
||||
'clearTreeExpandReserve',
|
||||
'getScroll',
|
||||
'scrollTo',
|
||||
'scrollToRow',
|
||||
'scrollToColumn',
|
||||
'clearScroll',
|
||||
'updateFooter',
|
||||
'updateStatus',
|
||||
'setMergeCells',
|
||||
'removeInsertRow',
|
||||
'removeMergeCells',
|
||||
'getMergeCells',
|
||||
'clearMergeCells',
|
||||
'setMergeFooterItems',
|
||||
'removeMergeFooterItems',
|
||||
'getMergeFooterItems',
|
||||
'clearMergeFooterItems',
|
||||
'openTooltip',
|
||||
'focus',
|
||||
'blur',
|
||||
'connect',
|
||||
|
||||
// vxe-table-edit部分
|
||||
'insert',
|
||||
'insertAt',
|
||||
'insertNextAt',
|
||||
'remove',
|
||||
'removeCheckboxRow',
|
||||
'removeRadioRow',
|
||||
'removeCurrentRow',
|
||||
'getRecordset',
|
||||
'getInsertRecords',
|
||||
'getRemoveRecords',
|
||||
'getUpdateRecords',
|
||||
'getEditRecord',
|
||||
'getSelectedCell',
|
||||
'clearSelected',
|
||||
'isEditByRow',
|
||||
'setEditRow',
|
||||
'setEditCell',
|
||||
'setSelectCell',
|
||||
'clearEdit',
|
||||
|
||||
// vxe-table-validator
|
||||
'clearValidate',
|
||||
'fullValidate',
|
||||
'validate',
|
||||
|
||||
//... 如有缺少在此处追加
|
||||
// xxx
|
||||
]
|
@@ -1,52 +0,0 @@
|
||||
import { VxeGridPropTypes, VxeTablePropTypes } from 'vxe-table'
|
||||
import tableProps from 'vxe-table/es/table/src/props'
|
||||
import { CSSProperties } from 'vue'
|
||||
|
||||
/**
|
||||
* @description: table二次开发需要后,需要接受的所有prop属性
|
||||
*/
|
||||
export const basicProps = {
|
||||
...tableProps,
|
||||
columns: Array as PropType<VxeGridPropTypes.Columns>,
|
||||
pagerConfig: {
|
||||
type: Object as PropType<VxeGridPropTypes.PagerConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
proxyConfig: {
|
||||
type: Object as PropType<VxeGridPropTypes.ProxyConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
toolbarConfig: {
|
||||
type: Object as PropType<VxeGridPropTypes.ToolbarConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
formConfig: {
|
||||
type: Object as PropType<VxeGridPropTypes.FormConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
zoomConfig: {
|
||||
type: Object as PropType<VxeGridPropTypes.ZoomConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
printConfig: {
|
||||
type: Object as PropType<VxeTablePropTypes.PrintConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
exportConfig: {
|
||||
type: Object as PropType<VxeTablePropTypes.ExportConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
importConfig: {
|
||||
type: Object as PropType<VxeTablePropTypes.ImportConfig>,
|
||||
default: () => ({}),
|
||||
},
|
||||
size: String as PropType<VxeGridPropTypes.Size>,
|
||||
tableClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
tableStyle: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
default: () => ({}),
|
||||
},
|
||||
}
|
@@ -1,4 +0,0 @@
|
||||
import { VxeUI } from '..'
|
||||
import componentSetting from '@/settings/componentSetting'
|
||||
|
||||
VxeUI.setConfig(componentSetting.vxeTable)
|
@@ -1,7 +0,0 @@
|
||||
import { CSSProperties } from 'vue'
|
||||
import { VxeGridProps } from 'vxe-table'
|
||||
|
||||
export type BasicTableProps = VxeGridProps & {
|
||||
tableClass?: string
|
||||
tableStyle?: CSSProperties
|
||||
}
|
22
src/design/components/antdv.less
Normal file
22
src/design/components/antdv.less
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
/* 表单项间隔(超级小) */
|
||||
.mini-from-item {
|
||||
.ant-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
/* 表单项间隔(小) */
|
||||
.small-from-item {
|
||||
.ant-form-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
/* 分页列表搜索栏 */
|
||||
.page-query {
|
||||
.ant-form-item {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
.ant-row {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
16
src/design/components/global.less
Normal file
16
src/design/components/global.less
Normal file
@@ -0,0 +1,16 @@
|
||||
/* 抽屉样式按钮 */
|
||||
.drawer-button {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
.ant-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
3
src/design/components/index.less
Normal file
3
src/design/components/index.less
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "antdv.less";
|
||||
@import "global.less";
|
||||
@import "vxeTable.less";
|
28
src/design/components/vxeTable.less
Normal file
28
src/design/components/vxeTable.less
Normal file
@@ -0,0 +1,28 @@
|
||||
// vxe模态框样式
|
||||
.vxe-modal--wrapper{
|
||||
// 层级与保持antdv一致
|
||||
z-index: 1000 !important;
|
||||
.vxe-modal--box{
|
||||
.vxe-modal--footer{
|
||||
padding: .8em 1em;
|
||||
border-top: 1px solid #ebeef5;
|
||||
.ant-btn{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// vxe表格相关
|
||||
.vxe-custom--option-wrapper{
|
||||
// 需要低于顶栏
|
||||
z-index: 8 !important;
|
||||
}
|
||||
.vxe-table--border-line{
|
||||
// 需要低于顶栏
|
||||
z-index: 8 !important;
|
||||
}
|
||||
|
||||
// 工具栏自定义列配置, 强制限制最低高度
|
||||
.vxe-table-custom-wrapper.is--active {
|
||||
min-height: 280px !important;
|
||||
}
|
@@ -5,6 +5,7 @@
|
||||
@import 'ant/index.less';
|
||||
@import 'theme.less';
|
||||
@import 'entry.css';
|
||||
@import './components/index.less';
|
||||
|
||||
input:-webkit-autofill {
|
||||
box-shadow: 0 0 0 1000px transparent inset;
|
||||
|
@@ -1,4 +1,6 @@
|
||||
import { addClass, hasClass, removeClass } from '@/utils/domUtils'
|
||||
import { setDark } from '@/components/VxeTable'
|
||||
|
||||
|
||||
export type CustomColorType = {
|
||||
name: string
|
||||
@@ -13,11 +15,13 @@ export async function updateDarkTheme(mode: string | null = 'light') {
|
||||
}
|
||||
const hasDarkClass = hasClass(htmlRoot, 'dark')
|
||||
if (mode === 'dark') {
|
||||
setDark(true)
|
||||
htmlRoot.setAttribute('data-theme', 'dark')
|
||||
if (!hasDarkClass) {
|
||||
addClass(htmlRoot, 'dark')
|
||||
}
|
||||
} else {
|
||||
setDark(false)
|
||||
htmlRoot.setAttribute('data-theme', 'light')
|
||||
if (hasDarkClass) {
|
||||
removeClass(htmlRoot, 'dark')
|
||||
|
@@ -1,6 +1,5 @@
|
||||
import 'uno.css'
|
||||
import '@/design/index.less'
|
||||
import '@/components/VxeTable/src/css/index.scss'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
// Register icon sprite
|
||||
import 'virtual:svg-icons-register'
|
||||
@@ -12,6 +11,7 @@ import { setupGlobDirectives } from '@/directives'
|
||||
import { initAppConfigStore } from '@/logics/initAppConfig'
|
||||
import { router, setupRouter } from '@/router'
|
||||
import { setupRouterGuard } from '@/router/guard'
|
||||
import { useTable } from '@/components/VxeTable'
|
||||
import { setupStore } from '@/store'
|
||||
|
||||
import App from './App.vue'
|
||||
@@ -31,6 +31,9 @@ async function bootstrap() {
|
||||
// 注册全局组件
|
||||
registerGlobComp(app)
|
||||
|
||||
// add vxe-table
|
||||
useTable(app)
|
||||
|
||||
// Configure routing
|
||||
// 配置路由
|
||||
setupRouter(app)
|
||||
|
@@ -1,7 +1,5 @@
|
||||
// Used to configure the general configuration of some components without modifying the components
|
||||
|
||||
import type { SorterResult } from '../components/Table'
|
||||
|
||||
export default {
|
||||
// basic-table setting
|
||||
table: {
|
||||
@@ -24,70 +22,10 @@ export default {
|
||||
// Default Size
|
||||
defaultSize: 'middle',
|
||||
// Custom general sort function
|
||||
defaultSortFn: (sortInfo: SorterResult) => {
|
||||
const { field, order } = sortInfo
|
||||
if (field && order) {
|
||||
return {
|
||||
// The sort field passed to the backend you
|
||||
field,
|
||||
// Sorting method passed to the background asc/desc
|
||||
order,
|
||||
}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// Custom general filter function
|
||||
defaultFilterFn: (data: Partial<Recordable<string[]>>) => {
|
||||
return data
|
||||
},
|
||||
},
|
||||
vxeTable: {
|
||||
table: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
columnConfig: {
|
||||
resizable: true,
|
||||
isCurrent: true,
|
||||
isHover: true,
|
||||
},
|
||||
rowConfig: {
|
||||
isCurrent: true,
|
||||
isHover: true,
|
||||
},
|
||||
emptyRender: {
|
||||
name: 'AEmpty',
|
||||
},
|
||||
printConfig: {},
|
||||
exportConfig: {},
|
||||
customConfig: {
|
||||
storage: true,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
toolbarConfig: {
|
||||
enabled: true,
|
||||
export: true,
|
||||
zoom: true,
|
||||
print: true,
|
||||
refresh: true,
|
||||
custom: true,
|
||||
},
|
||||
pagerConfig: {
|
||||
pageSizes: [20, 50, 100, 500],
|
||||
pageSize: 20,
|
||||
autoHidden: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
form: true,
|
||||
props: {
|
||||
result: 'items',
|
||||
total: 'total',
|
||||
},
|
||||
},
|
||||
zoomConfig: {},
|
||||
},
|
||||
},
|
||||
// scrollbar setting
|
||||
scrollbar: {
|
||||
// Whether to use native scroll bar
|
||||
|
Reference in New Issue
Block a user