vxe-pc-ui/lib/list-design/src/layout-preview.js

A vue based PC component library

"use strict";

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 _form = _interopRequireDefault(require("../../form/src/form"));
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'ListDesignLayoutView',
  props: {},
  emits: [],
  setup() {
    const VxeTableGridComponent = _ui.VxeUI.getComponent('VxeGrid');
    const $xeListDesign = (0, _vue.inject)('$xeListDesign', null);
    if (!$xeListDesign) {
      return () => [];
    }
    const {
      reactData: listDesignReactData
    } = $xeListDesign;
    const refGrid = (0, _vue.ref)();
    const tableData = (0, _vue.ref)([]);
    const computeFormItems = (0, _vue.computed)(() => {
      const {
        searchFormItems
      } = listDesignReactData;
      if (searchFormItems.length) {
        return searchFormItems.concat([{
          field: 'active',
          title: '',
          folding: false,
          collapseNode: searchFormItems.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 searchFormItems;
    });
    const computeTableColumn = (0, _vue.computed)(() => {
      const {
        formData,
        listTableColumns
      } = listDesignReactData;
      const {
        showSeq,
        actionButtonList
      } = formData;
      const columns = [];
      if (showSeq) {
        columns.push({
          type: 'seq',
          field: '_seq',
          width: 70
        });
      }
      listTableColumns.forEach(item => {
        columns.push({
          field: item.field,
          title: item.title,
          visible: item.visible,
          width: item.width
        });
      });
      if (actionButtonList && actionButtonList.length) {
        columns.push({
          field: '_active',
          title: (0, _ui.getI18n)('vxe.table.actionTitle'),
          fixed: 'right',
          width: 'auto',
          cellRender: {
            name: 'VxeButtonGroup',
            options: []
          }
        });
      }
      return columns;
    });
    const updateColumnWidthEvent = ({
      column,
      resizeWidth
    }) => {
      const {
        listTableColumns
      } = listDesignReactData;
      const rest = _xeUtils.default.findTree(listTableColumns, item => item.field === column.field, {
        children: 'children'
      });
      if (rest) {
        const {
          item
        } = rest;
        item.width = resizeWidth;
      }
    };
    const updateTableData = () => {
      const {
        listTableColumns
      } = listDesignReactData;
      const data = [{}, {}];
      data.forEach(row => {
        listTableColumns.forEach(column => {
          row[column.field] = '-';
        });
      });
      tableData.value = data;
    };
    const dataFlag = (0, _vue.ref)(0);
    (0, _vue.watch)(() => listDesignReactData.listTableColumns ? listDesignReactData.listTableColumns.length : -1, () => {
      dataFlag.value++;
    });
    (0, _vue.watch)(() => listDesignReactData.listTableColumns, () => {
      dataFlag.value++;
    });
    (0, _vue.watch)(dataFlag, () => {
      updateTableData();
    });
    (0, _vue.onMounted)(() => {
      updateTableData();
    });
    if (process.env.NODE_ENV === 'development') {
      (0, _vue.nextTick)(() => {
        if (!VxeTableGridComponent) {
          (0, _log.errLog)('vxe.error.reqComp', ['vxe-grid']);
        }
      });
    }
    return () => {
      const {
        searchFormData,
        searchFormItems
      } = listDesignReactData;
      const formItems = computeFormItems.value;
      const tableColumn = computeTableColumn.value;
      return (0, _vue.h)('div', {
        class: 'vxe-list-design--preview'
      }, [(0, _vue.h)('div', {
        class: 'vxe-list-design--preview-wrapper'
      }, [(0, _vue.h)('div', {
        class: 'vxe-list-design--preview-search'
      }, [(0, _vue.h)('div', {
        class: 'vxe-list-design--preview-title'
      }, (0, _ui.getI18n)('vxe.listDesign.searchTitle')), searchFormItems.length ? (0, _vue.h)(_form.default, {
        data: searchFormData,
        items: formItems
      }) : (0, _vue.h)('div', {
        class: 'vxe-list-design--field-configs-empty-data'
      }, [(0, _vue.h)('span', {}, (0, _ui.getI18n)('vxe.listDesign.search.emptyText'))])]), (0, _vue.h)('div', {
        class: 'vxe-list-design--preview-table'
      }, [(0, _vue.h)('div', {
        class: 'vxe-list-design--preview-title'
      }, (0, _ui.getI18n)('vxe.listDesign.listTitle')), VxeTableGridComponent ? (0, _vue.h)(VxeTableGridComponent, {
        ref: refGrid,
        columns: tableColumn,
        data: tableData.value,
        showOverflow: true,
        border: true,
        columnConfig: {
          minWidth: 'auto',
          resizable: true
        },
        rowConfig: {
          isHover: true
        },
        scrollX: {
          enabled: false
        },
        scrollY: {
          enabled: false
        },
        onResizableChange: updateColumnWidthEvent
      }) : (0, _vue.createCommentVNode)()])])]);
    };
  }
});