vxe-pc-ui/lib/form-design/widget-row/row-form.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WidgetRowFormComponent = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _use = require("../../form-design/src/use");
var _form = _interopRequireDefault(require("../../form/src/form"));
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _row = _interopRequireDefault(require("../../row/src/row"));
var _col = _interopRequireDefault(require("../../row/src/col"));
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const WidgetRowFormComponent = exports.WidgetRowFormComponent = (0, _vue.defineComponent)({
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      computeKebabCaseName
    } = (0, _use.useWidgetName)(props);
    const spanOptions = (0, _vue.ref)([{
      label: (0, _core.getI18n)('vxe.formDesign.widgetProp.rowProp.col2'),
      value: 2,
      list: [{
        value: '12,12',
        spans: [12, 12]
      }, {
        value: '8,16',
        spans: [8, 16]
      }, {
        value: '16,8',
        spans: [16, 8]
      }, {
        value: '6,18',
        spans: [6, 18]
      }, {
        value: '18,6',
        spans: [18, 6]
      }]
    }, {
      label: (0, _core.getI18n)('vxe.formDesign.widgetProp.rowProp.col3'),
      value: 3,
      list: [{
        value: '8,8,8',
        spans: [8, 8, 8]
      }, {
        value: '6,6,12',
        spans: [6, 6, 12]
      }, {
        value: '12,6,6',
        spans: [12, 6, 6]
      }, {
        value: '6,12,6',
        spans: [6, 12, 6]
      }]
    }, {
      label: (0, _core.getI18n)('vxe.formDesign.widgetProp.rowProp.col4'),
      value: 4,
      list: [{
        value: '6,6,6,6',
        spans: [6, 6, 6, 6]
      }]
    }, {
      label: (0, _core.getI18n)('vxe.formDesign.widgetProp.rowProp.col6'),
      value: 6,
      list: [{
        value: '4,4,4,4,4,4',
        spans: [4, 4, 4, 4, 4, 4]
      }]
    }]);
    const labelMaps = {
      18: '3/4',
      16: '2/3',
      12: '1/2',
      8: '1/3',
      6: '1/4',
      4: '1/6'
    };
    const computeSelectSpanItem = (0, _vue.computed)(() => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        options
      } = widget;
      return spanOptions.value.find(item => item.value === options.colSize);
    });
    const changeColSpan = item => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        options
      } = widget;
      const {
        reactData: formDesignReactData
      } = $xeFormDesign;
      const {
        widgetObjList
      } = formDesignReactData;
      const oldChildList = widget.children.filter(item => item.name);
      const overList = oldChildList.slice(options.colSize);
      if (overList.length) {
        const rest = _xeUtils.default.findTree(widgetObjList, obj => obj.id === widget.id, {
          children: 'children'
        });
        if (rest) {
          const {
            items,
            index
          } = rest;
          if (index >= items.length - 1) {
            items.push(...overList);
          } else {
            items.splice(index + 1, 0, ...overList);
          }
        }
      }
      options.colSpan = item.value;
      widget.children = _xeUtils.default.range(0, options.colSize).map((num, index) => {
        return oldChildList[index] || $xeFormDesign.createEmptyWidget();
      });
    };
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const kebabCaseName = computeKebabCaseName.value;
      return (0, _vue.h)(_form.default, {
        class: `vxe-form-design--widget-${kebabCaseName}-form`,
        vertical: true,
        span: 24,
        titleBold: true,
        titleOverflow: true,
        data: widget.options
      }, {
        default() {
          return [(0, _vue.h)(_formItem.default, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.rowProp.colSize'),
            field: 'colSize',
            itemRender: {
              name: 'VxeRadioGroup',
              options: spanOptions.value,
              props: {
                type: 'button'
              }
            }
          }), (0, _vue.h)(_formItem.default, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.rowProp.layout')
          }, {
            default() {
              const selectSpanItem = computeSelectSpanItem.value;
              if (selectSpanItem) {
                return selectSpanItem.list.map((item, rIndex) => {
                  return (0, _vue.h)(_row.default, {
                    key: rIndex,
                    class: [`vxe-form-design--widget-${kebabCaseName}-form-row`, {
                      'is--active': item.value === widget.options.colSpan
                    }],
                    onClick() {
                      changeColSpan(item);
                    }
                  }, {
                    default() {
                      return item.spans.map((span, sIndex) => {
                        return (0, _vue.h)(_col.default, {
                          key: `${rIndex}${sIndex}`,
                          class: `vxe-form-design--widget-${kebabCaseName}-form-col`,
                          span
                        }, {
                          default() {
                            return (0, _vue.h)('div', {}, `${labelMaps[span]}`);
                          }
                        });
                      });
                    }
                  });
                });
              }
              return [];
            }
          })];
        }
      });
    };
  }
});