vxe-pc-ui
Version:
A vue based PC component library
517 lines (516 loc) • 14.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _ui = require("../../ui");
var _log = require("../../ui/src/log");
var _dom = require("../../ui/src/dom");
var _vn = require("../../ui/src/vn");
var _util = require("../render/util");
var _loading = _interopRequireDefault(require("../../loading/src/loading"));
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
name: 'VxeListView',
props: {
size: {
type: String,
default: () => (0, _ui.getConfig)().listView.size || (0, _ui.getConfig)().size
},
config: Object,
height: {
type: [String, Number],
default: () => (0, _ui.getConfig)().listView.height
},
loading: Boolean,
formData: Object,
actionButtons: Array,
gridOptions: Object,
gridEvents: Object,
viewRender: Object
},
emits: ['cell-action', 'update:formData', 'update:actionButtons'],
setup(props, context) {
const VxeTableGridComponent = _ui.VxeUI.getComponent('VxeGrid');
const {
emit,
slots
} = context;
const xID = _xeUtils.default.uniqueId();
const refElem = (0, _vue.ref)();
const refGrid = (0, _vue.ref)();
const {
computeSize
} = (0, _ui.useSize)(props);
const reactData = (0, _vue.reactive)({
formConfig: {},
searchFormData: {},
searchFormItems: [],
listTableColumns: [],
tableColumns: [],
footerData: [{} // 默认一行合计
]
});
const computeGridOptions = (0, _vue.computed)(() => {
const {
gridOptions
} = props;
const {
formConfig,
tableColumns,
searchFormData,
searchFormItems,
footerData
} = reactData;
const {
showStatistics
} = formConfig;
const gridOpts = gridOptions || {};
const columnOpts = Object.assign({
minWidth: 120
}, gridOpts.columnConfig);
let proxyOpts;
if (gridOpts.proxyConfig) {
proxyOpts = Object.assign({
autoLoad: false
}, gridOpts.proxyConfig);
}
return Object.assign({}, gridOpts, {
columns: tableColumns,
columnConfig: columnOpts,
showFooter: showStatistics,
footerData: showStatistics ? footerData : null,
formConfig: {
data: searchFormData,
items: searchFormItems
},
proxyConfig: proxyOpts
});
});
const computeGridEvents = (0, _vue.computed)(() => {
const {
gridEvents
} = props;
const ons = {};
_xeUtils.default.each(gridEvents, (fn, key) => {
ons[_xeUtils.default.camelCase(`on-${key}`)] = fn;
});
return ons;
});
const refMaps = {
refElem,
refGrid
};
const computeMaps = {
computeSize
};
const $xeListView = {
xID,
props,
context,
reactData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps
};
const systemConfigList = [];
const customConfigList = [];
_ui.renderer.forEach((item, name) => {
const {
createListDesignSettingActionButtonConfig
} = item;
if (createListDesignSettingActionButtonConfig) {
const params = {
name
};
const btnConfig = Object.assign((0, _util.createListDesignActionButton)({
code: name
}), createListDesignSettingActionButtonConfig(params));
if (btnConfig.type === 'custom') {
customConfigList.push(btnConfig);
} else {
systemConfigList.push(btnConfig);
}
}
});
const configToSearchItems = searchItems => {
if (searchItems && searchItems.length) {
const data = {};
const items = searchItems.map(item => {
data[item.field] = null;
return {
field: item.field,
title: item.title,
folding: item.folding,
itemRender: item.itemRender
};
});
items.push({
field: 'active',
title: '',
folding: false,
collapseNode: searchItems.some(item => item.folding),
itemRender: {
name: 'VxeButtonGroup',
options: [{
content: '查询',
icon: 'vxe-icon-search',
status: 'primary',
type: 'submit'
}, {
content: '重置',
icon: 'vxe-icon-repeat',
type: 'reset'
}]
}
});
return {
items,
data
};
}
return {
items: [],
data: {}
};
};
const configToListColumns = listColumns => {
if (listColumns) {
return listColumns.map(item => {
return {
field: item.field,
title: item.title,
visible: !!item.visible,
width: item.width,
cellRender: _xeUtils.default.clone(item.cellRender)
};
});
}
return [];
};
const clearConfig = () => {
emit('update:formData', {});
Object.assign(reactData, {
formConfig: {},
searchFormData: {},
searchFormItems: [],
listTableColumns: [],
tableColumns: [],
footerData: [{} // 默认一行合计
]
});
return (0, _vue.nextTick)();
};
const loadConfig = config => {
if (config) {
const {
formConfig,
searchItems,
listColumns
} = config;
reactData.formConfig = formConfig || {};
setSearchItems(searchItems || []);
loadListColumns(listColumns || []);
}
return (0, _vue.nextTick)();
};
const parseForm = searchItems => {
return configToSearchItems(searchItems || []);
};
const parseTableColumn = (listColumns, formConfig) => {
const formOpts = Object.assign({}, formConfig);
const {
showSeq,
actionButtonList
} = formOpts;
const columns = [];
const rowRecord = {};
const cellActionSlot = slots.cellAction;
const footerCellSlot = slots.footerCell;
if (showSeq) {
columns.push({
type: 'seq',
field: '_seq',
fixed: 'left',
width: 70
});
}
configToListColumns(listColumns || []).forEach(conf => {
const columnConf = Object.assign({}, conf);
if (formOpts.showStatistics && footerCellSlot) {
columnConf.slots = {
footer: params => {
return footerCellSlot(Object.assign({}, params));
}
};
}
if (columnConf.field) {
rowRecord[columnConf.field] = null;
}
columns.push(columnConf);
});
if (actionButtonList && actionButtonList.length) {
const actionColumn = {
field: '_active',
title: (0, _ui.getI18n)('vxe.table.actionTitle'),
fixed: 'right',
width: 'auto'
};
const btnOptions = [];
actionButtonList.forEach(btnItem => {
if (btnItem.type === 'custom') {
return {
content: btnItem.name,
name: btnItem.code,
icon: btnItem.icon
};
}
const btnConfig = systemConfigList.find(item => item.code === btnItem.code);
let btnName = btnItem.name;
let btnIcon = btnItem.icon;
let btnStatus = btnItem.status;
let btnPermissionCode = btnItem.permissionCode;
let btnClassify = btnItem.classify;
if (btnConfig) {
const nameConfig = btnConfig.name;
btnIcon = btnConfig.icon || '';
btnStatus = btnConfig.status || '';
btnPermissionCode = btnConfig.permissionCode || '';
btnClassify = btnConfig.classify || '';
btnName = _xeUtils.default.toValueString(_xeUtils.default.isFunction(nameConfig) ? nameConfig({
name: btnConfig.code || ''
}) : nameConfig);
}
if (!btnClassify || btnClassify === 'cellButton') {
btnOptions.push({
content: btnName,
name: btnItem.code,
icon: btnIcon,
status: btnStatus,
permissionCode: btnPermissionCode
});
}
});
if (cellActionSlot) {
actionColumn.slots = {
default(params) {
return cellActionSlot(Object.assign(Object.assign({}, params), {
buttons: btnOptions
}));
}
};
} else {
actionColumn.cellRender = {
name: 'VxeButtonGroup',
props: {
mode: 'text'
},
options: btnOptions,
events: {
click(params, btnParams) {
const {
option
} = btnParams;
dispatchEvent('cell-action', Object.assign(Object.assign({}, params), {
button: option
}), btnParams.$event);
}
}
};
}
columns.push(actionColumn);
}
return {
rowRecord,
columns,
actionButtons: actionButtonList
};
};
const parseConfig = config => {
const {
formConfig,
searchItems,
listColumns
} = config || {};
const {
columns,
rowRecord,
actionButtons
} = parseTableColumn(listColumns || [], formConfig || reactData.formConfig);
const {
data,
items
} = parseForm(searchItems || []);
return {
formData: data,
formItems: items,
tableColumns: columns,
tableRecord: rowRecord,
actionButtons
};
};
const getTableRecord = configOrListColumns => {
if (_xeUtils.default.isArray(configOrListColumns)) {
const {
rowRecord
} = parseTableColumn(configOrListColumns, reactData.formConfig);
return rowRecord;
}
if (configOrListColumns) {
const {
formConfig,
listColumns
} = configOrListColumns;
const {
rowRecord
} = parseTableColumn(listColumns || [], formConfig || reactData.formConfig);
return rowRecord;
}
return {};
};
const getQueryFilter = () => {
const {
searchFormData,
searchFormItems
} = reactData;
const items = [];
const rest = {
items,
type: 'and'
};
const $grid = refGrid.value;
if (!$grid) {
return rest;
}
searchFormItems.forEach(item => {
const {
field
} = item;
const itemValue = searchFormData[field];
if (itemValue) {
const condition = [];
condition.push({
field,
value: itemValue,
match: 'exact',
type: _xeUtils.default.isArray(itemValue) ? 'array' : ''
});
items.push({
condition,
type: 'and'
});
}
});
return rest;
};
const commitProxy = (code, ...args) => {
const $grid = refGrid.value;
if ($grid) {
return $grid.commitProxy(code, ...args);
}
return Promise.resolve();
};
const loadListColumns = listColumns => {
const {
formConfig
} = reactData;
const listTableColumns = listColumns || [];
const {
columns,
actionButtons
} = parseTableColumn(listTableColumns, formConfig);
reactData.listTableColumns = listTableColumns;
reactData.tableColumns = columns;
emit('update:actionButtons', actionButtons);
(0, _vue.nextTick)(() => {
const gridOptions = computeGridOptions.value;
if (gridOptions.proxyConfig) {
commitProxy('reload');
}
});
};
const setSearchItems = searchItems => {
const {
data,
items
} = configToSearchItems(searchItems);
reactData.searchFormData = data;
reactData.searchFormItems = items;
emit('update:formData', data);
return (0, _vue.nextTick)();
};
const dispatchEvent = (type, params, evnt) => {
emit(type, (0, _ui.createEvent)(evnt, {
$listView: $xeListView
}, params));
};
const listViewMethods = {
dispatchEvent,
clearConfig,
loadConfig,
parseConfig,
getTableRecord,
getQueryFilter,
commitProxy
};
const listViewPrivateMethods = {};
Object.assign($xeListView, listViewMethods, listViewPrivateMethods);
const renderVN = () => {
const {
height,
loading
} = props;
const vSize = computeSize.value;
const gridSlot = slots.grid;
const gridOptions = computeGridOptions.value;
const gridEvents = computeGridEvents.value;
return (0, _vue.h)('div', {
ref: refElem,
class: ['vxe-list-view', {
[`size--${vSize}`]: vSize,
'is--loading': loading
}],
style: height ? {
height: (0, _dom.toCssUnit)(height)
} : null
}, [(0, _vue.h)('div', {
class: 'vxe-list-view--body'
}, [gridSlot ? (0, _vue.h)('div', {
class: 'vxe-list-view--grid-wrapper'
}, (0, _vn.getSlotVNs)(gridSlot({
$listView: $xeListView
}))) : VxeTableGridComponent ? (0, _vue.h)(VxeTableGridComponent, Object.assign({}, gridOptions, gridEvents, {
ref: refGrid
}), Object.assign({}, slots, {
default: undefined
})) : (0, _vue.createCommentVNode)()]),
/**
* 加载中
*/
(0, _vue.h)(_loading.default, {
class: 'vxe-list-view--loading',
modelValue: loading
})]);
};
(0, _vue.watch)(() => props.config, value => {
loadConfig(value || {});
});
if (props.config) {
loadConfig(props.config);
}
(0, _vue.provide)('$xeListView', $xeListView);
if (process.env.NODE_ENV === 'development') {
(0, _vue.nextTick)(() => {
if (!VxeTableGridComponent) {
(0, _log.errLog)('vxe.error.reqComp', ['vxe-grid']);
}
});
}
$xeListView.renderVN = renderVN;
return $xeListView;
},
render() {
return this.renderVN();
}
});