yx lin
3 years ago
committed by
GitHub
GitHub
70 changed files with 2209 additions and 104 deletions
@ -0,0 +1,12 @@ |
|||
import { withInstall } from '/@/utils'; |
|||
import vxeBasicTable from './src/VxeBasicTable'; |
|||
import { VXETable } from 'vxe-table'; |
|||
import VXETablePluginAntd from './src/components'; |
|||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'; |
|||
import './src/setting'; |
|||
|
|||
export const VxeBasicTable = withInstall(vxeBasicTable); |
|||
export * from 'vxe-table'; |
|||
export * from './src/types'; |
|||
|
|||
VXETable.use(VXETablePluginAntd).use(VXETablePluginExportXLSX); |
|||
@ -0,0 +1,108 @@ |
|||
import { defineComponent } from 'vue'; |
|||
import { computed, ref } from 'vue'; |
|||
import { BasicTableProps } from './types'; |
|||
import { omit } from 'lodash-es'; |
|||
import { basicProps } from './props'; |
|||
import { ignorePropKeys } from './const'; |
|||
import { basicEmits } from './emits'; |
|||
import XEUtils from 'xe-utils'; |
|||
import type { VxeGridInstance, VxeGridEventProps, GridMethods, TableMethods } from 'vxe-table'; |
|||
import { Grid as VxeGrid } from 'vxe-table'; |
|||
|
|||
import { extendSlots } from '/@/utils/helper/tsxHelper'; |
|||
import { gridComponentMethodKeys } from './methods'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'VxeBasicTable', |
|||
props: basicProps, |
|||
emits: basicEmits, |
|||
setup(props, { emit, attrs }) { |
|||
const tableElRef = ref<VxeGridInstance>(); |
|||
const emitEvents: VxeGridEventProps = {}; |
|||
|
|||
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; |
|||
|
|||
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> |
|||
); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,59 @@ |
|||
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, |
|||
Button, |
|||
Empty, |
|||
} from 'ant-design-vue'; |
|||
|
|||
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 }; |
|||
@ -0,0 +1,22 @@ |
|||
export type ComponentType = |
|||
| 'AInput' |
|||
| 'AInputNumber' |
|||
| 'ASelect' |
|||
| 'AApiSelect' |
|||
| 'ATreeSelect' |
|||
| 'AApiTreeSelect' |
|||
| 'ARadioGroup' |
|||
| 'ACheckboxGroup' |
|||
| 'AAutoComplete' |
|||
| 'ACascader' |
|||
| 'ADatePicker' |
|||
| 'AMonthPicker' |
|||
| 'ARangePicker' |
|||
| 'AWeekPicker' |
|||
| 'ATimePicker' |
|||
| 'AYearPicker' |
|||
| 'ASwitch' |
|||
| 'ARate' |
|||
| 'AInputSearch' |
|||
| 'AButton' |
|||
| 'AEmpty'; |
|||
@ -0,0 +1,20 @@ |
|||
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'), |
|||
}; |
|||
}), |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
import { |
|||
createEditRender, |
|||
createDefaultRender, |
|||
createFilterRender, |
|||
createDefaultFilterRender, |
|||
createFormItemRender, |
|||
} from './common'; |
|||
|
|||
export default { |
|||
autofocus: 'input.ant-input', |
|||
renderDefault: createDefaultRender(), |
|||
renderEdit: createEditRender(), |
|||
renderFilter: createFilterRender(), |
|||
defaultFilterMethod: createDefaultFilterRender(), |
|||
renderItemContent: createFormItemRender(), |
|||
}; |
|||
@ -0,0 +1,120 @@ |
|||
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(), |
|||
}; |
|||
@ -0,0 +1,59 @@ |
|||
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(), |
|||
}; |
|||
@ -0,0 +1,42 @@ |
|||
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), |
|||
}; |
|||
@ -0,0 +1,5 @@ |
|||
import { createFormItemRender } from './common'; |
|||
|
|||
export default { |
|||
renderItemContent: createFormItemRender(), |
|||
}; |
|||
@ -0,0 +1,33 @@ |
|||
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']; |
|||
}), |
|||
}; |
|||
@ -0,0 +1,27 @@ |
|||
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(), |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
import { |
|||
createEditRender, |
|||
createDefaultRender, |
|||
createFilterRender, |
|||
createDefaultFilterRender, |
|||
createFormItemRender, |
|||
} from './common'; |
|||
|
|||
export default { |
|||
autofocus: 'input.ant-input', |
|||
renderDefault: createDefaultRender(), |
|||
renderEdit: createEditRender(), |
|||
renderFilter: createFilterRender(), |
|||
defaultFilterMethod: createDefaultFilterRender(), |
|||
renderItemContent: createFormItemRender(), |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
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(), |
|||
}; |
|||
@ -0,0 +1,17 @@ |
|||
import { |
|||
createEditRender, |
|||
createDefaultRender, |
|||
createFilterRender, |
|||
createDefaultFilterRender, |
|||
createFormItemRender, |
|||
createToolbarToolRender, |
|||
} from './common'; |
|||
|
|||
export default { |
|||
renderDefault: createDefaultRender(), |
|||
renderEdit: createEditRender(), |
|||
renderFilter: createFilterRender(), |
|||
defaultFilterMethod: createDefaultFilterRender(), |
|||
renderItemContent: createFormItemRender(), |
|||
renderToolbarTool: createToolbarToolRender(), |
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
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']; |
|||
}), |
|||
}; |
|||
@ -0,0 +1,5 @@ |
|||
import { createFormItemRender } from './common'; |
|||
|
|||
export default { |
|||
renderItemContent: createFormItemRender(), |
|||
}; |
|||
@ -0,0 +1,30 @@ |
|||
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), |
|||
}; |
|||
@ -0,0 +1,15 @@ |
|||
import { |
|||
createEditRender, |
|||
createDefaultRender, |
|||
createFilterRender, |
|||
createDefaultFilterRender, |
|||
createFormItemRender, |
|||
} from './common'; |
|||
|
|||
export default { |
|||
renderDefault: createDefaultRender(), |
|||
renderEdit: createEditRender(), |
|||
renderFilter: createFilterRender(), |
|||
defaultFilterMethod: createDefaultFilterRender(), |
|||
renderItemContent: createFormItemRender(), |
|||
}; |
|||
@ -0,0 +1,271 @@ |
|||
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), |
|||
}; |
|||
@ -0,0 +1,53 @@ |
|||
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(), |
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
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']; |
|||
}), |
|||
}; |
|||
@ -0,0 +1,35 @@ |
|||
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), |
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
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周']; |
|||
}), |
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
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']; |
|||
}), |
|||
}; |
|||
@ -0,0 +1,427 @@ |
|||
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 } 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 (targetEvnt: any) { |
|||
inputFunc(targetEvnt); |
|||
if (events && events[modelEvent]) { |
|||
events[modelEvent](params, targetEvnt); |
|||
} |
|||
if (isSameEvent && changeFunc) { |
|||
changeFunc(targetEvnt); |
|||
} |
|||
}; |
|||
} |
|||
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, 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), |
|||
}), |
|||
]; |
|||
}; |
|||
} |
|||
@ -0,0 +1,112 @@ |
|||
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 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, |
|||
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; |
|||
@ -0,0 +1,4 @@ |
|||
/** |
|||
* @description: 传给vxe-table 时需要忽略的prop |
|||
*/ |
|||
export const ignorePropKeys = ['tableClass', 'tableStyle']; |
|||
@ -0,0 +1,8 @@ |
|||
*, |
|||
::before, |
|||
::after { |
|||
box-sizing: border-box; |
|||
border-width: 0; |
|||
border-style: solid; |
|||
border-color: initial; |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
%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 { |
|||
// border-color: $vxe-table-validate-error-color; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
.vxe-table.cell--highlight { |
|||
.vxe-cell, |
|||
.vxe-tree-cell { |
|||
& > .ant-input, |
|||
& > .ant-input-number { |
|||
padding: 0; |
|||
@extend %ResetBorder; |
|||
} |
|||
& > .ant-select { |
|||
.ant-input { |
|||
padding: 0; |
|||
@extend %ResetBorder; |
|||
} |
|||
} |
|||
& > .ant-input-number { |
|||
.ant-input-number-input { |
|||
padding: 0; |
|||
} |
|||
.ant-input-number-handler-wrap, |
|||
.ant-input-number-handler-down { |
|||
@extend %ResetBorder; |
|||
} |
|||
} |
|||
& > .ant-select { |
|||
.ant-select-selection { |
|||
@extend %ResetBorder; |
|||
.ant-select-selection__rendered { |
|||
margin: 0; |
|||
} |
|||
} |
|||
} |
|||
& > .ant-cascader-picker { |
|||
.ant-input { |
|||
@extend %ResetBorder; |
|||
} |
|||
.ant-cascader-picker-label { |
|||
padding: 0; |
|||
} |
|||
} |
|||
& > .ant-calendar-picker { |
|||
.ant-calendar-picker-input { |
|||
padding: 0; |
|||
@extend %ResetBorder; |
|||
} |
|||
} |
|||
& > .ant-time-picker { |
|||
.ant-time-picker-input { |
|||
padding: 0; |
|||
@extend %ResetBorder; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
@import './common.scss'; |
|||
@import './variable.scss'; |
|||
@import './scrollbar.scss'; |
|||
@import './toolbar.scss'; |
|||
@import './component.scss'; |
|||
@import 'vxe-table/styles/index.scss'; |
|||
@ -0,0 +1,24 @@ |
|||
.vxe-grid_scrollbar { |
|||
::-webkit-scrollbar { |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
::-webkit-scrollbar-track { |
|||
background-color: #ffffff; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
border: 1px solid #f1f1f1; |
|||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); |
|||
} |
|||
::-webkit-scrollbar-thumb:hover { |
|||
background-color: #a8a8a8; |
|||
} |
|||
::-webkit-scrollbar-thumb:active { |
|||
background-color: #a8a8a8; |
|||
} |
|||
::-webkit-scrollbar-corner { |
|||
background-color: #ffffff; |
|||
} |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
.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; |
|||
} |
|||
|
|||
.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 button:first-child { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.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: 1px; |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
$vxe-primary-color: rgb(9, 96, 189) !default; |
|||
$vxe-table-row-current-background-color: rgba(9, 96, 189, 0.3); |
|||
$vxe-table-row-hover-current-background-color: rgba(9, 96, 189, 0.2); |
|||
$vxe-table-column-hover-background-color: rgba(9, 96, 189, 0.3); |
|||
$vxe-table-column-current-background-color: rgba(9, 96, 189, 0.2); |
|||
$vxe-table-validate-error-color: #f56c6c; |
|||
@ -0,0 +1,17 @@ |
|||
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
|
|||
]; |
|||
@ -0,0 +1,19 @@ |
|||
import { ComponentType } from './componentType'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
|
|||
const { t } = useI18n(); |
|||
|
|||
/** |
|||
* @description: 生成placeholder |
|||
*/ |
|||
export function createPlaceholderMessage(component: ComponentType) { |
|||
if (!component) return; |
|||
if (component.includes('RangePicker')) { |
|||
return [t('common.chooseText'), t('common.chooseText')]; |
|||
} |
|||
if (component.includes('Input') || component.includes('Complete') || component.includes('Rate')) { |
|||
return t('common.inputText'); |
|||
} else { |
|||
return t('common.chooseText'); |
|||
} |
|||
} |
|||
@ -0,0 +1,131 @@ |
|||
import { GridMethods, TableMethods } from 'vxe-table'; |
|||
|
|||
export const gridComponentMethodKeys: (keyof GridMethods | keyof TableMethods)[] = [ |
|||
// vxe-grid 部分
|
|||
'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', |
|||
|
|||
//... 如有缺少在此处追加
|
|||
// xxx
|
|||
]; |
|||
@ -0,0 +1,52 @@ |
|||
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: () => ({}), |
|||
}, |
|||
}; |
|||
@ -0,0 +1,4 @@ |
|||
import { VXETable } from '..'; |
|||
import componentSetting from '/@/settings/componentSetting'; |
|||
|
|||
VXETable.setup(componentSetting.vxeTable); |
|||
@ -0,0 +1,7 @@ |
|||
import { CSSProperties } from 'vue'; |
|||
import { VxeGridProps } from 'vxe-table'; |
|||
|
|||
export type BasicTableProps = VxeGridProps & { |
|||
tableClass?: string; |
|||
tableStyle?: CSSProperties; |
|||
}; |
|||
Loading…
Reference in new issue