vxe-pc-ui
Version:
A vue based PC component library
349 lines (348 loc) • 9.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _dom = require("../../ui/src/dom");
var _ui = require("../../ui");
var _util = require("../render/util");
var _defaultSettingData = require("./default-setting-data");
var _layoutPreview = _interopRequireDefault(require("./layout-preview"));
var _layoutSetting = _interopRequireDefault(require("./layout-setting"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
name: 'VxeListDesign',
props: {
size: {
type: String,
default: () => (0, _ui.getConfig)().listDesign.size || (0, _ui.getConfig)().size
},
height: {
type: [String, Number],
default: () => (0, _ui.getConfig)().listDesign.height
},
config: Object,
showPc: {
type: Boolean,
default: () => (0, _ui.getConfig)().listDesign.showPc
},
showMobile: {
type: Boolean,
default: () => (0, _ui.getConfig)().listDesign.showMobile
},
actionCodes: Array,
formRender: Object
},
emits: [],
setup(props, context) {
const {
emit,
slots
} = context;
const xID = _xeUtils.default.uniqueId();
const refElem = (0, _vue.ref)();
const {
computeSize
} = (0, _ui.useSize)(props);
const reactData = (0, _vue.reactive)({
formData: {},
searchFormData: {},
searchFormItems: [],
listTableColumns: []
});
const refMaps = {
refElem
};
const computeMaps = {
computeSize
};
const $xeListDesign = {
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 parseWidgetColumn = widget => {
return {
title: widget.title,
field: widget.field,
visible: !widget.hidden,
width: '',
cellRender: {
name: widget.name,
props: widget.options
}
};
};
/**
* 解析表单设计 JSON
*/
const parseFormDesignColumns = config => {
const tableColumns = [];
if (config) {
const {
widgetData
} = config;
if (widgetData) {
widgetData.forEach(item => {
const {
name
} = item;
if (name) {
// 如果是行列
if (name === 'row') {
item.children.forEach(childItem => {
if (childItem.name) {
tableColumns.push(parseWidgetColumn(childItem));
}
});
} else if (name === 'subtable') {
// 如果是子表
} else {
tableColumns.push(parseWidgetColumn(item));
}
}
});
}
}
return tableColumns;
};
const configToSearchItems = searchItems => {
if (searchItems) {
const data = {};
const items = searchItems.map(item => {
data[item.field] = null;
return {
field: item.field,
title: item.title,
folding: item.folding,
itemRender: item.itemRender
};
});
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 loadConfig = config => {
const {
formConfig,
searchItems,
listColumns
} = config;
if (formConfig) {
loadFormConfig(formConfig);
}
if (searchItems) {
setSearchItems(searchItems);
}
if (listColumns) {
reactData.listTableColumns = parseColumnConfigs(listColumns);
}
return (0, _vue.nextTick)();
};
const parseColumnConfigs = listColumns => {
return configToListColumns(listColumns);
};
const loadFormConfig = data => {
reactData.formData = Object.assign({}, createSettingForm(), data);
return (0, _vue.nextTick)();
};
const getSearchItems = () => {
return reactData.searchFormItems;
};
const setSearchItems = searchItems => {
const {
data,
items
} = configToSearchItems(searchItems);
reactData.searchFormData = data;
reactData.searchFormItems = items;
return (0, _vue.nextTick)();
};
const getListColumns = () => {
return reactData.listTableColumns;
};
const setListColumns = listColumns => {
reactData.listTableColumns = parseColumnConfigs(listColumns);
return (0, _vue.nextTick)();
};
const createSettingForm = () => {
const {
actionCodes,
formRender
} = props;
let conf = (0, _defaultSettingData.getDefaultSettingFormData)();
// 处理默认按钮
if (actionCodes && actionCodes.length) {
if (!conf.actionButtonList || !conf.actionButtonList.length) {
const defActionBtnList = [];
actionCodes.forEach(item => {
if (_xeUtils.default.isObject(item) && item.default) {
const sysItem = systemConfigList.find(obj => obj.code === item.code);
if (sysItem) {
defActionBtnList.push((0, _util.createListDesignActionButton)({
type: sysItem.type,
code: sysItem.code
}));
}
}
});
conf.actionButtonList = defActionBtnList;
}
}
// 如果为自定义渲染
if (formRender && formRender.name) {
const compConf = _ui.renderer.get(formRender.name);
const createFormConfig = compConf ? compConf.createListDesignSettingFormConfig : null;
const params = {
name: formRender.name
};
conf = (createFormConfig ? createFormConfig(params) : {}) || {};
}
return conf;
};
const initSettingForm = () => {
reactData.formData = createSettingForm();
};
const clearConfig = () => {
loadConfig({
searchItems: [],
listColumns: []
});
initSettingForm();
return (0, _vue.nextTick)();
};
const listDesignMethods = {
dispatchEvent(type, params, evnt) {
emit(type, (0, _ui.createEvent)(evnt, {
$listDesign: $xeListDesign
}, params));
},
loadFormDesignConfig(config) {
const {
listTableColumns
} = reactData;
const oldMaps = {};
_xeUtils.default.eachTree(listTableColumns, item => {
oldMaps[item.field] = item;
}, {
children: 'children'
});
const columns = parseFormDesignColumns(config);
_xeUtils.default.eachTree(columns, item => {
const oldItem = oldMaps[item.field];
if (oldItem) {
if (oldItem.width) {
item.width = oldItem.width;
}
item.visible = oldItem.visible;
}
}, {
children: 'children'
});
reactData.listTableColumns = columns;
return (0, _vue.nextTick)();
},
reloadFormDesignConfig(config) {
reactData.listTableColumns = parseFormDesignColumns(config);
return (0, _vue.nextTick)();
},
getSearchItems,
setSearchItems,
getListColumns,
setListColumns,
getConfig() {
return {
formConfig: reactData.formData,
searchItems: getSearchItems(),
listColumns: getListColumns()
};
},
loadConfig,
reloadConfig(config) {
clearConfig();
return loadConfig(config);
},
clearConfig
};
const listDesignPrivateMethods = {};
Object.assign($xeListDesign, listDesignMethods, listDesignPrivateMethods);
const renderVN = () => {
const {
height
} = props;
const vSize = computeSize.value;
const headerSlot = slots.header;
return (0, _vue.h)('div', {
ref: refElem,
class: ['vxe-list-design', {
[`size--${vSize}`]: vSize
}],
style: height ? {
height: (0, _dom.toCssUnit)(height)
} : null
}, [(0, _vue.h)('div', {
class: 'vxe-list-design--header'
}, headerSlot ? headerSlot({}) : []), (0, _vue.h)('div', {
class: 'vxe-list-design--body'
}, [(0, _vue.h)(_layoutPreview.default), (0, _vue.h)(_layoutSetting.default)])]);
};
(0, _vue.provide)('$xeListDesign', $xeListDesign);
(0, _vue.watch)(() => props.config, value => {
loadConfig(value || {});
});
initSettingForm();
if (props.config) {
loadConfig(props.config);
}
$xeListDesign.renderVN = renderVN;
return $xeListDesign;
},
render() {
return this.renderVN();
}
});