vxe-pc-ui
Version:
A vue based PC component library
728 lines (727 loc) • 27.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DefaultParameterSettingFormComponent = exports.DefaultFieldSettingFormComponent = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _util = require("../render/util");
var _form = _interopRequireDefault(require("../../form/src/form"));
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _text = _interopRequireDefault(require("../../text/src/text"));
var _select = _interopRequireDefault(require("../../select/src/select"));
var _switch = _interopRequireDefault(require("../../switch/src/switch"));
var _group = _interopRequireDefault(require("../../radio/src/group"));
var _button = _interopRequireDefault(require("../../button/src/button"));
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// 控件原始配置信息，带响应
const refWidgetReactConfigMaps = (0, _vue.ref)({});
const DefaultFieldSettingFormComponent = exports.DefaultFieldSettingFormComponent = (0, _vue.defineComponent)({
name: 'DefaultFieldSettingForm',
props: {},
emits: [],
setup() {
const $xeListDesign = (0, _vue.inject)('$xeListDesign', null);
if (!$xeListDesign) {
return () => [];
}
const {
reactData: listDesignReactData
} = $xeListDesign;
const refIsAllChecked = (0, _vue.ref)(false);
const refIsAllIndeterminate = (0, _vue.ref)(false);
const changeVisible = item => {
item.visible = !item.visible;
listDesignReactData.listTableColumns = listDesignReactData.listTableColumns.slice(0);
};
const removeSearchItem = item => {
const {
searchFormItems
} = listDesignReactData;
listDesignReactData.searchFormItems = searchFormItems.filter(obj => obj.field !== item.field);
};
const addSearchEvent = () => {
const {
listTableColumns,
searchFormItems
} = listDesignReactData;
const widgetReactConfigMaps = refWidgetReactConfigMaps.value;
const allFormItemList = [];
listTableColumns.forEach(item => {
const {
cellRender
} = item;
if (cellRender) {
const conf = searchFormItems.find(conf => conf.field === item.field);
const name = cellRender.name || '';
let widgetConfig = widgetReactConfigMaps[name];
if (!widgetConfig) {
const compConf = _core.renderer.get(name);
if (compConf) {
const createWidgetFormConfig = compConf.createFormDesignWidgetConfig;
if (createWidgetFormConfig) {
const params = {
name,
$formDesign: null
};
widgetConfig = createWidgetFormConfig(params) || {};
widgetReactConfigMaps[name] = widgetConfig;
}
}
}
if (widgetConfig.query) {
allFormItemList.push(Object.assign(Object.assign({}, item), {
checked: !!conf,
isHalf: false,
folding: conf ? !!conf.folding : false
}));
}
}
});
refWidgetReactConfigMaps.value = Object.assign({}, widgetReactConfigMaps);
const refAllFormItemList = (0, _vue.ref)(allFormItemList);
// const foldOptions = ref([
// { label: '展开', value: false },
// { label: '折叠', value: true }
// ])
const checkOptionStatus = () => {
const allFormItemList = refAllFormItemList.value;
refIsAllChecked.value = allFormItemList.every(item => item.checked);
refIsAllIndeterminate.value = !refIsAllChecked.value && allFormItemList.some(item => item.checked || item.isHalf);
};
const handleOptionCheck = item => {
const allFormItemList = refAllFormItemList.value;
const matchObj = _xeUtils.default.findTree(allFormItemList, obj => obj === item);
if (matchObj && matchObj.parent) {
const {
parent
} = matchObj;
if (parent.children && parent.children.length) {
parent.checked = parent.children.every(obj => obj.checked);
parent.isHalf = !parent.checked && parent.children.some(obj => obj.checked || obj.isHalf);
handleOptionCheck(parent);
}
}
};
const changeCheckboxOption = item => {
const isChecked = !item.checked;
_xeUtils.default.eachTree([item], obj => {
obj.checked = isChecked;
obj.isHalf = false;
});
handleOptionCheck(item);
checkOptionStatus();
};
const allOptionEvent = () => {
const allFormItemList = refAllFormItemList.value;
const isAll = !refIsAllChecked.value;
_xeUtils.default.eachTree(allFormItemList, item => {
item.checked = isAll;
item.isHalf = false;
});
refIsAllChecked.value = isAll;
checkOptionStatus();
};
const confirmEvent = () => {
const allFormItemList = refAllFormItemList.value;
const searchItems = [];
allFormItemList.forEach(item => {
if (item.checked) {
searchItems.push({
field: item.field,
title: item.title,
folding: item.folding,
itemRender: Object.assign({}, item.cellRender)
});
}
});
$xeListDesign.setSearchItems(searchItems);
};
_core.VxeUI.modal.open({
title: (0, _core.getI18n)('vxe.listDesign.search.editPopupTitle'),
width: 680,
height: 500,
showFooter: true,
escClosable: true,
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: (0, _core.getI18n)('vxe.listDesign.searchPopup.saveBtn'),
showZoom: true,
resize: true,
onConfirm: confirmEvent,
slots: {
default() {
const isAllChecked = refIsAllChecked.value;
const isAllIndeterminate = refIsAllIndeterminate.value;
const allFormItemList = refAllFormItemList.value;
return (0, _vue.h)('div', {
class: 'vxe-list-design--field-search-popup'
}, [(0, _vue.h)('table', {}, [(0, _vue.h)('colgroup', {}, [(0, _vue.h)('col', {
style: {
width: '80px'
}
}), (0, _vue.h)('col')
// h('col', {
// style: {
// width: '140px'
// }
// })
]), (0, _vue.h)('thead', {}, [(0, _vue.h)('th', {}, [(0, _vue.h)('div', {
class: ['vxe-list-design--field-search-checkbox-option', {
'is--checked': isAllChecked,
'is--indeterminate': isAllIndeterminate
}],
title: (0, _core.getI18n)('vxe.table.allTitle'),
onClick: allOptionEvent
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isAllIndeterminate ? (0, _core.getIcon)().CHECKBOX_INDETERMINATE : isAllChecked ? (0, _core.getIcon)().CHECKBOX_CHECKED : (0, _core.getIcon)().CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, (0, _core.getI18n)('vxe.toolbar.customAll'))])]), (0, _vue.h)('th', {}, (0, _core.getI18n)('vxe.listDesign.searchPopup.colTitle'))
// h('th', {}, '展开/折叠')
]), (0, _vue.h)('tbody', {}, allFormItemList.map(item => {
const isChecked = item.checked;
const isIndeterminate = item.isHalf;
return (0, _vue.h)('tr', {}, [(0, _vue.h)('td', {
class: 'vxe-list-design--field-search-option-item col--visible'
}, [(0, _vue.h)('div', {
class: ['vxe-list-design--field-search-checkbox-option', {
'is--checked': isChecked,
'is--indeterminate': isIndeterminate
}],
title: (0, _core.getI18n)('vxe.custom.setting.colVisible'),
onClick: () => {
changeCheckboxOption(item);
}
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isIndeterminate ? (0, _core.getIcon)().CHECKBOX_INDETERMINATE : isChecked ? (0, _core.getIcon)().CHECKBOX_CHECKED : (0, _core.getIcon)().CHECKBOX_UNCHECKED]
})])]), (0, _vue.h)('td', {
class: 'vxe-list-design--field-search-option-item'
}, `${item.title || ''}`)
// h('td', {}, [
// h(VxeRadioGroupComponent, {
// modelValue: item.folding,
// type: 'button',
// options: foldOptions.value,
// size: 'mini',
// 'onUpdate:modelValue' (val) {
// item.folding = val
// }
// })
// ])
]);
}))])]);
}
}
});
};
const renderChildOptions = item => {
const {
children
} = item;
if (children && children.length) {
return (0, _vue.h)('div', {
class: 'vxe-list-design--field-option-inner'
}, [(0, _vue.h)('div', {
class: 'vxe-list-design--field-sub-option',
onClick() {
changeVisible(item);
}
}, children.map(child => {
const {
title,
visible: isChecked
} = child;
return (0, _vue.h)('div', {
class: ['vxe-list-design--field-checkbox-option', {
'is--checked': isChecked
}],
onClick() {
changeVisible(child);
}
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isChecked ? (0, _core.getIcon)().CHECKBOX_CHECKED : (0, _core.getIcon)().CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, `${title}`)]);
}))]);
}
return (0, _vue.createCommentVNode)();
};
const renderFieldOptions = () => {
const {
listTableColumns
} = listDesignReactData;
return listTableColumns.map(item => {
const {
title,
visible: isChecked
} = item;
return (0, _vue.h)('div', {
class: 'vxe-list-design--field-option'
}, [(0, _vue.h)('div', {
class: 'vxe-list-design--field-option-inner'
}, [(0, _vue.h)('div', {
class: ['vxe-list-design--field-checkbox-option', {
'is--checked': isChecked
}],
onClick() {
changeVisible(item);
}
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isChecked ? (0, _core.getIcon)().CHECKBOX_CHECKED : (0, _core.getIcon)().CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, `${title}`)])]), renderChildOptions(item)]);
});
};
return () => {
return (0, _vue.h)(_form.default, {
span: 24,
vertical: true,
titleBold: true
}, {
default() {
return [(0, _vue.h)(_formItem.default, {
title: (0, _core.getI18n)('vxe.listDesign.searchField')
}, {
extra() {
return (0, _vue.h)(_button.default, {
mode: 'text',
status: 'primary',
icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_EDIT,
content: (0, _core.getI18n)('vxe.listDesign.search.addBtn'),
onClick: addSearchEvent
});
},
default() {
const {
searchFormItems
} = listDesignReactData;
return [searchFormItems.length ? (0, _vue.h)('div', {
class: 'vxe-list-design--search-item-wrapper'
}, [(0, _vue.h)('div', {
class: 'vxe-list-design--search-item-list'
}, searchFormItems.map(item => {
return (0, _vue.h)('div', {
key: item.field,
class: 'vxe-list-design--search-item'
}, [(0, _vue.h)('div', {
class: 'vxe-list-design--search-item-title'
}, `${item.title || ''}`), (0, _vue.h)('div', {
class: 'vxe-list-design--search-item-btn'
}, [(0, _vue.h)(_button.default, {
icon: (0, _core.getIcon)().LIST_DESIGN_LIST_SETTING_SEARCH_DELETE,
mode: 'text',
status: 'error',
onClick() {
removeSearchItem(item);
}
})])]);
}))]) : (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-empty-data'
}, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.listDesign.search.emptyText'))])];
}
}), (0, _vue.h)(_formItem.default, {
title: (0, _core.getI18n)('vxe.listDesign.listField')
}, {
default() {
return renderFieldOptions();
}
})];
}
});
};
}
});
const DefaultParameterSettingFormComponent = exports.DefaultParameterSettingFormComponent = (0, _vue.defineComponent)({
name: 'DefaultListSettingTabComponent',
props: {},
emits: [],
setup() {
const $xeListDesign = (0, _vue.inject)('$xeListDesign', null);
if (!$xeListDesign) {
return () => [];
}
const {
props: listDesignProps,
reactData: listDesignReactData
} = $xeListDesign;
const systemConfigList = [];
const customConfigList = [];
_core.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 renderViewList = (0, _vue.ref)([{
label: '列表视图',
value: 'list',
isExpand: false
}]);
// const refFoldOpts = ref([
// { label: '显示', value: true },
// { label: '隐藏', value: false }
// ])
const refSeqOpts = (0, _vue.ref)([{
label: '显示',
value: true
}, {
label: '隐藏',
value: false
}]);
const refCheckboxOpts = (0, _vue.ref)([{
label: '默认',
value: 'auto'
}, {
label: '允许',
value: true
}, {
label: '不允许',
value: false
}]);
const disableView = (0, _vue.computed)(() => {
const {
formData
} = listDesignReactData;
return [formData.listView.enabled, formData.ganttView.enabled, formData.chartView.enabled].filter(enabled => enabled).length <= 1;
});
const openActiveBtnPopup = activeBtnObj => {
const {
formData
} = listDesignReactData;
const {
actionCodes
} = listDesignProps;
let btnList = formData.actionButtonList;
if (!btnList) {
btnList = [];
}
const activeBtnItem = (0, _vue.reactive)((0, _util.createListDesignActionButton)(activeBtnObj));
const systemBtnList = systemConfigList.filter(item => {
if (actionCodes && actionCodes.length) {
if (!actionCodes.some(conf => _xeUtils.default.isString(conf) ? item.code === conf : conf.code === item.code)) {
return false;
}
}
return !btnList.some(obj => obj.code === item.code);
});
const customBtnList = customConfigList.filter(item => !btnList.some(obj => obj.code === item.code));
const btOptions = [];
if (systemBtnList.length) {
if (!activeBtnItem.type) {
activeBtnItem.type = '';
}
btOptions.push({
value: '',
label: '系统按钮'
});
}
if (customBtnList.length) {
if (!activeBtnItem.type) {
activeBtnItem.type = 'custom';
}
btOptions.push({
value: 'custom',
label: '自定义按钮'
});
}
const refSystemConfigOptions = (0, _vue.computed)(() => {
return systemBtnList.map(item => {
const nameConfig = item.name;
return {
label: _xeUtils.default.toValueString(_xeUtils.default.isFunction(nameConfig) ? nameConfig({
name: item.code || ''
}) : nameConfig),
value: item.code
};
});
});
const refBtnTypeOptions = (0, _vue.ref)(btOptions);
_core.VxeUI.modal.open({
title: '添加按钮',
width: 600,
height: 400,
showFooter: true,
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: '保存',
onConfirm() {
if (activeBtnItem.type === 'custom') {
btnList.push(activeBtnItem);
} else {
btnList.push(activeBtnItem);
}
formData.actionButtonList = [...btnList];
},
slots: {
default() {
return (0, _vue.h)(_form.default, {
vertical: true,
titleBold: true
}, {
default() {
return [(0, _vue.h)(_formItem.default, {
title: '按钮类型',
span: 24
}, {
default() {
return (0, _vue.h)(_select.default, {
modelValue: activeBtnItem.type,
options: refBtnTypeOptions.value,
'onUpdate:modelValue'(val) {
activeBtnItem.type = val;
}
});
}
}), (0, _vue.h)(_formItem.default, {
title: '选择系统按钮',
span: 24
}, {
default() {
return (0, _vue.h)(_select.default, {
modelValue: activeBtnItem.code,
options: refSystemConfigOptions.value,
'onUpdate:modelValue'(val) {
activeBtnItem.code = val;
}
});
}
})
// h(VxeFormItemComponent, {
// title: '按钮位置',
// span: 24
// }, {
// default () {
// return h(VxeSelectComponent, {
// modelValue: activeBtnItem.classify,
// options: refBtnClassifyOptions.value,
// 'onUpdate:modelValue' (val) {
// activeBtnItem.classify = val
// }
// })
// }
// })
];
}
});
}
}
});
};
const renderDefaultCellActionButton = () => {
return (0, _vue.h)(_formItem.default, {
title: '功能按钮'
}, {
extra() {
return (0, _vue.h)(_button.default, {
mode: 'text',
status: 'primary',
icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_ADD,
content: '新增',
onClick() {
openActiveBtnPopup();
}
});
},
default() {
const {
formData
} = listDesignReactData;
const btnList = formData.actionButtonList;
return btnList && btnList.length ? (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-wrapper'
}, btnList.map(btnItem => {
let btnIcon = '';
let btnName = '';
if (btnItem.type === 'custom') {
btnIcon = btnItem.icon;
btnName = btnItem.name;
} else {
const btnConfig = systemConfigList.find(item => item.code === btnItem.code);
if (btnConfig) {
const nameConfig = btnConfig.name;
btnIcon = btnConfig.icon || '';
btnName = _xeUtils.default.toValueString(_xeUtils.default.isFunction(nameConfig) ? nameConfig({
name: btnConfig.code || ''
}) : nameConfig);
}
}
return (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-item'
}, [btnIcon ? (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-item-icon'
}, [(0, _vue.h)('i', {
class: btnIcon
})]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-item-title'
}, `${btnName || ''}`), (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-item-btn'
}, [(0, _vue.h)(_button.default, {
icon: (0, _core.getIcon)().LIST_DESIGN_LIST_SETTING_ACTIVE_DELETE,
mode: 'text',
status: 'error',
onClick() {
formData.actionButtonList = btnList.filter(item => item !== btnItem);
}
})])]);
})) : (0, _vue.h)('div', {
class: 'vxe-list-design--field-configs-empty-data'
}, [(0, _vue.h)('span', {}, '无操作按钮')]);
}
});
};
return () => {
const {
showPc,
showMobile
} = listDesignProps;
const {
formData
} = listDesignReactData;
return (0, _vue.h)(_form.default, {
span: 24,
vertical: true,
titleBold: true
}, {
default() {
return [(0, _vue.h)(_formItem.default, {
title: '视图配置'
}, {
default() {
return (0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-render-view'
}, renderViewList.value.map(item => {
return (0, _vue.h)('div', {
key: item.value,
class: 'vxe-form-design--widget-form-item-render-view-item'
}, [(0, _vue.h)(_switch.default, {
modelValue: formData.listView.enabled,
disabled: disableView.value,
'onUpdate:modelValue'(val) {
formData.listView.enabled = val;
}
}), (0, _vue.h)(_text.default, {
content: item.label,
icon: 'vxe-icon-table'
})]);
}));
}
}), (0, _vue.h)(_formItem.default, {
title: '默认视图'
}, {
default() {
return [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-devices'
}, [showPc ? (0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-devices-item'
}, [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-devices-left'
}, [(0, _vue.h)(_text.default, {
icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_PC,
content: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.pc')
})]), (0, _vue.h)(_select.default, {
modelValue: formData.pcDefaultView,
className: 'vxe-form-design--widget-form-item-devices-select',
options: renderViewList.value,
'onUpdate:modelValue'(val) {
formData.pcDefaultView = val;
}
})]) : (0, _vue.createCommentVNode)(), showMobile ? (0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-devices-item'
}, [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-devices-left'
}, [(0, _vue.h)(_text.default, {
icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_MOBILE,
content: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.mobile')
})]), (0, _vue.h)(_select.default, {
modelValue: formData.mobileDefaultView,
className: 'vxe-form-design--widget-form-item-devices-select',
options: renderViewList.value,
'onUpdate:modelValue'(val) {
formData.mobileDefaultView = val;
}
})]) : (0, _vue.createCommentVNode)()])];
}
}),
// h(VxeFormItemComponent, {
// title: '查询配置'
// }, {
// default () {
// const { formData } = listDesignReactData
// return [
// h('div', {
// class: 'vxe-list-design--widget-form-item-prop-list'
// }, [
// h('span', {}, '折叠字段'),
// h(VxeRadioGroupComponent, {
// modelValue: formData.autoFoldFilter,
// options: refFoldOpts.value,
// 'onUpdate:modelValue' (val) {
// formData.autoFoldFilter = val
// }
// })
// ])
// ]
// }
// }),
(0, _vue.h)(_formItem.default, {
title: '列配置'
}, {
default() {
const {
formData
} = listDesignReactData;
return [(0, _vue.h)('div', {
class: 'vxe-list-design--widget-form-item-prop-list'
}, [(0, _vue.h)('span', {}, '显示序号'), (0, _vue.h)(_group.default, {
modelValue: formData.showSeq,
options: refSeqOpts.value,
'onUpdate:modelValue'(val) {
formData.showSeq = val;
}
})]), (0, _vue.h)('div', {
class: 'vxe-list-design--widget-form-item-prop-list'
}, [(0, _vue.h)('span', {}, '表尾统计'), (0, _vue.h)(_group.default, {
modelValue: formData.showStatistics,
options: refSeqOpts.value,
'onUpdate:modelValue'(val) {
formData.showStatistics = val;
}
})])];
}
}), (0, _vue.h)(_formItem.default, {
title: '批量操作'
}, {
default() {
const {
formData
} = listDesignReactData;
return (0, _vue.h)(_group.default, {
modelValue: formData.showCheckbox,
options: refCheckboxOpts.value,
'onUpdate:modelValue'(val) {
formData.showCheckbox = val;
}
});
}
}), systemConfigList.length || customConfigList.length ? renderDefaultCellActionButton() : (0, _vue.createCommentVNode)()];
}
});
};
}
});