import XEUtils from 'xe-utils'; import { renderer, getComponent } from '../../ui'; import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'; import { errLog } from '../../ui/src/log'; const componentDefaultModelProp = 'value'; /** * 已废弃 * @deprecated */ function getOldComponentName(name) { return `vxe-${name.replace('$', '')}`; } /** * 已废弃 * @deprecated */ function getOldComponent({ name }) { return getOldComponentName(name); } function getDefaultComponent({ name }) { return getComponent(name) || name; } function getNativeAttrs(renderOpts) { let { name, attrs } = renderOpts; if (name === 'input') { attrs = Object.assign({ type: 'text' }, attrs); } return attrs; } function getComponentFormItemProps(renderOpts, params, value, defaultProps) { return XEUtils.assign({}, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value }); } /** * 原生事件处理 * @param renderOpts * @param params * @param modelFunc * @param changeFunc */ function getElementOns(renderOpts, params, modelFunc, changeFunc) { const { events } = renderOpts; const modelEvent = getModelEvent(renderOpts.name); const changeEvent = getChangeEvent(renderOpts.name); const isSameEvent = changeEvent === modelEvent; const ons = {}; if (events) { XEUtils.objectEach(events, (func, key) => { ons[getOnName(key)] = function (...args) { func(params, ...args); }; }); } if (modelFunc) { ons[getOnName(modelEvent)] = function (targetEvnt) { modelFunc(targetEvnt); if (isSameEvent && changeFunc) { changeFunc(targetEvnt); } if (events && events[modelEvent]) { events[modelEvent](params, targetEvnt); } }; } if (!isSameEvent && changeFunc) { ons[getOnName(changeEvent)] = function (...args) { changeFunc(...args); if (events && events[changeEvent]) { events[changeEvent](params, ...args); } }; } return ons; } /** * 组件事件处理 * @param renderOpts * @param params * @param modelFunc * @param changeFunc */ function getComponentOns(renderOpts, params, eFns, eventOns) { const { events } = renderOpts; const { model: modelFunc, change: changeFunc } = eFns || {}; const modelEvent = getModelEvent(renderOpts.name); const changeEvent = getChangeEvent(renderOpts.name); const ons = {}; XEUtils.objectEach(events, (func, key) => { ons[getOnName(key)] = function (...args) { if (!XEUtils.isFunction(func)) { errLog('vxe.error.errFunc', [func]); } func(params, ...args); }; }); if (modelFunc) { ons[getOnName(modelEvent)] = function (targetEvnt) { modelFunc(targetEvnt); if (events && events[modelEvent]) { events[modelEvent](params, targetEvnt); } }; } if (changeFunc) { ons[getOnName(changeEvent)] = function (...args) { changeFunc(...args); if (events && events[changeEvent]) { events[changeEvent](params, ...args); } }; } return eventOns ? Object.assign(ons, eventOns) : ons; } function getItemOns(renderOpts, params) { const { $form, data, field } = params; return getComponentOns(renderOpts, params, { model(value) { // 处理 model 值双向绑定 XEUtils.set(data, field, value); }, change() { // 处理 change 事件相关逻辑 $form.updateStatus(params); } }); } function getNativeItemOns(renderOpts, params) { const { $form, data, field } = params; return getElementOns(renderOpts, params, (evnt) => { // 处理 model 值双向绑定 const itemValue = evnt.target.value; XEUtils.set(data, field, itemValue); }, () => { // 处理 change 事件相关逻辑 $form.updateStatus(params); }); } function renderNativeOptgroup(h, renderOpts, params, renderOptionsMethods) { const { optionGroups, optionGroupProps = {} } = renderOpts; const groupOptions = optionGroupProps.options || 'options'; const groupLabel = optionGroupProps.label || 'label'; if (optionGroups) { return optionGroups.map((group, gIndex) => { return h('optgroup', { key: gIndex, attrs: { label: group[groupLabel] } }, renderOptionsMethods(group[groupOptions], renderOpts, params)); }); } return []; } /** * 渲染表单-项 * 用于渲染原生的标签 */ function nativeItemRender(h, renderOpts, params) { const { data, field } = params; const { name } = renderOpts; const attrs = getNativeAttrs(renderOpts); const itemValue = XEUtils.get(data, field); return [ h(name, { class: `vxe-default-${name}`, attrs, domProps: { value: attrs && name === 'input' && (attrs.type === 'submit' || attrs.type === 'reset') ? null : itemValue }, on: getNativeItemOns(renderOpts, params) }) ]; } function defaultItemRender(h, renderOpts, params) { const { data, field } = params; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue), on: getItemOns(renderOpts, params) }) ]; } /** * 已废弃 * @deprecated */ function oldItemRender(h, renderOpts, params) { const { data, field } = params; const itemValue = XEUtils.get(data, field); return [ h(getOldComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue), on: getItemOns(renderOpts, params) }) ]; } /** * 已废弃 * @deprecated */ function oldButtonItemRender(h, renderOpts, params) { return [ h('vxe-button', { props: getComponentFormItemProps(renderOpts, params, null), on: getComponentOns(renderOpts, params) }) ]; } /** * 已废弃 * @deprecated */ function oldButtonsItemRender(h, renderOpts, params) { return renderOpts.children.map((childRenderOpts) => oldButtonItemRender(h, childRenderOpts, params)[0]); } /** * 渲染原生的 select 标签 */ function renderNativeFormOptions(h, options, renderOpts, params) { const { data, field } = params; const { optionProps = {} } = renderOpts; const labelProp = optionProps.label || 'label'; const valueProp = optionProps.value || 'value'; const disabledProp = optionProps.disabled || 'disabled'; const cellValue = XEUtils.get(data, field); if (options) { return options.map((item, oIndex) => { return h('option', { key: oIndex, props: { value: item[valueProp], disabled: item[disabledProp], /* eslint-disable eqeqeq */ selected: item[valueProp] == cellValue } }, item[labelProp]); }); } return []; } /** * 渲染表单-项 */ function defaultFormItemRender(h, renderOpts, params) { const { data, field } = params; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue), on: getItemOns(renderOpts, params) }) ]; } function formItemRadioAndCheckboxRender(h, renderOpts, params) { const { options, optionProps } = renderOpts; const { data, field } = params; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: Object.assign({ options, optionProps }, getComponentFormItemProps(renderOpts, params, itemValue)), on: getItemOns(renderOpts, params) }) ]; } /** * 已废弃 * @deprecated */ function oldFormItemRadioAndCheckboxRender(h, renderOpts, params) { const { name, options, optionProps = {} } = renderOpts; const { data, field } = params; const labelProp = optionProps.label || 'label'; const valueProp = optionProps.value || 'value'; const disabledProp = optionProps.disabled || 'disabled'; const itemValue = XEUtils.get(data, field); const compName = getOldComponentName(name); // 如果是分组 if (options) { return [ h(`${compName}-group`, { props: getComponentFormItemProps(renderOpts, params, itemValue), on: getItemOns(renderOpts, params), scopedSlots: { default: () => { return options.map((item, index) => { return h(compName, { key: index, props: { label: item[valueProp], content: item[labelProp], disabled: item[disabledProp] } }); }); } } }) ]; } return [ h(compName, { props: getComponentFormItemProps(renderOpts, params, itemValue), on: getItemOns(renderOpts, params) }) ]; } /** * 表单 - 渲染器 */ renderer.mixin({ input: { formItemAutoFocus: 'input', renderFormItemContent: nativeItemRender }, textarea: { formItemAutoFocus: 'textarea', renderFormItemContent: nativeItemRender }, select: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { return [ h('select', { class: 'vxe-default-select', attrs: Object.assign({}, getNativeAttrs(renderOpts)), on: getNativeItemOns(renderOpts, params) }, renderOpts.optionGroups ? renderNativeOptgroup(h, renderOpts, params, renderNativeFormOptions) : renderNativeFormOptions(h, renderOpts.options, renderOpts, params)) ]; } }, VxeInput: { formItemAutoFocus: 'input', renderFormItemContent: defaultItemRender }, VxeNumberInput: { formItemAutoFocus: 'input', renderFormItemContent: defaultItemRender }, VxePasswordInput: { formItemAutoFocus: 'input', renderFormItemContent: defaultItemRender }, VxeTextarea: { formItemAutoFocus: 'textarea', renderFormItemContent: defaultItemRender }, VxeDatePicker: { formItemAutoFocus: 'input', renderFormItemContent: defaultItemRender }, VxeDateRangePicker: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { startField, endField } = renderOpts; const { $form, data, field } = params; const itemValue = XEUtils.get(data, field); const seProps = {}; const seOs = {}; if (startField && endField) { seProps.startValue = XEUtils.get(data, startField); seProps.endValue = XEUtils.get(data, endField); seOs['update:startValue'] = (value) => { if (startField) { XEUtils.set(data, startField, value); } }; seOs['update:endValue'] = (value) => { if (endField) { XEUtils.set(data, endField, value); } }; } return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, seProps), on: getComponentOns(renderOpts, params, { model(value) { // 处理 model 值双向绑定 XEUtils.set(data, field, value); }, change() { // 处理 change 事件相关逻辑 $form.updateStatus(params); } }, seOs) }) ]; } }, VxeButton: { renderFormItemContent: defaultFormItemRender }, VxeButtonGroup: { renderFormItemContent(h, renderOpts, params) { const { options } = renderOpts; const { data, field } = params; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: Object.assign({ options }, getComponentFormItemProps(renderOpts, params, itemValue)), on: getItemOns(renderOpts, params) }) ]; } }, VxeSelect: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { options, optionProps, optionGroups, optionGroupProps } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps, optionGroups, optionGroupProps }), on: getItemOns(renderOpts, params) }) ]; } }, VxeTreeSelect: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { options, optionProps } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps }), on: getItemOns(renderOpts, params) }) ]; } }, VxeTableSelect: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { options, optionProps } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps }), on: getItemOns(renderOpts, params) }) ]; } }, VxeColorPicker: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { options } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, { colors: options }), on: getItemOns(renderOpts, params) }) ]; } }, VxeIconPicker: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { options } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, { icons: options }), on: getItemOns(renderOpts, params) }) ]; } }, VxeRadio: { renderFormItemContent: defaultFormItemRender }, VxeRadioGroup: { renderFormItemContent: formItemRadioAndCheckboxRender }, VxeCheckbox: { renderFormItemContent: defaultFormItemRender }, VxeCheckboxGroup: { renderFormItemContent: formItemRadioAndCheckboxRender }, VxeSwitch: { renderFormItemContent: defaultItemRender }, VxeRate: { renderFormItemContent: defaultItemRender }, VxeSlider: { renderFormItemContent: defaultItemRender }, VxeImage: { renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { props } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: Object.assign(Object.assign({}, props), { src: itemValue }), on: getItemOns(renderOpts, params) }) ]; } }, VxeImageGroup: { renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { props } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getDefaultComponent(renderOpts), { props: Object.assign(Object.assign({}, props), { urlList: itemValue }), on: getItemOns(renderOpts, params) }) ]; } }, VxeUpload: { renderFormItemContent: defaultItemRender }, // 以下已废弃 $input: { formItemAutoFocus: 'input', renderFormItemContent: oldItemRender }, $textarea: { formItemAutoFocus: 'textarea', renderFormItemContent: oldItemRender }, $button: { renderFormItemContent: oldButtonItemRender }, $buttons: { renderFormItemContent: oldButtonsItemRender }, $select: { formItemAutoFocus: 'input', renderFormItemContent(h, renderOpts, params) { const { data, field } = params; const { options, optionProps, optionGroups, optionGroupProps } = renderOpts; const itemValue = XEUtils.get(data, field); return [ h(getOldComponent(renderOpts), { props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps, optionGroups, optionGroupProps }), on: getItemOns(renderOpts, params) }) ]; } }, $radio: { renderFormItemContent: oldFormItemRadioAndCheckboxRender }, $checkbox: { renderFormItemContent: oldFormItemRadioAndCheckboxRender }, $switch: { renderFormItemContent: oldItemRender } // 以上已废弃 });