vue-ant-patterns/biz-lib/b-search-helper/modalContent.js

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _antDesignVue = require('ant-design-vue');

var _dContainer = require('../../lib/d-container');

var _dContainer2 = _interopRequireDefault(_dContainer);

var _dLayout = require('../../lib/d-layout');

var _dLayout2 = _interopRequireDefault(_dLayout);

var _string = require('../_biz-utils/string');

var _utils = require('../../lib/_utils');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _dyCustom = require('./dyCustom');

var _dyCustom2 = _interopRequireDefault(_dyCustom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

/*
 * @Author: icy
 * @Date: 2020-05-18 13:49:38
 * @Description: 搜索助手弹框里内容的相关设置
 * @FilePath: \hcm6-patterns\biz\b-search-helper\modalContent.js
 */
var Panel = _antDesignVue.Collapse.Panel;
var Horizontal = _dContainer2['default'].Horizontal,
    Vertical = _dContainer2['default'].Vertical;
var SiderLayout = _dLayout2['default'].SiderLayout;

var root = global || window;
var API_PLATFORM = root.globalJSConfig.API_PLATFORM;
exports['default'] = {
  data: function data() {
    return {
      dynamicName: null
    };
  },

  components: {
    dyCustom: _dyCustom2['default']
  },
  methods: {
    // 根据设置的搜索助手类型，设置弹框里面的内容布局
    renderModalContent: function renderModalContent() {
      var h = this.$createElement;

      if (this.isCustomize()) {
        return h(
          Vertical,
          { props: { grow: true } },
          [this.renderDynamicCom(), this.renderSelectedTags()]
        );
        // return this.renderDynamicCom();
      }
      if (this.cType === 0) {
        // 树+列表
        return h(
          SiderLayout,
          (0, _babelHelperVueJsxMergeProps2['default'])([{ props: { grow: true, flex: true, collapsible: false } }, { 'class': 'tree-list-container' }]),
          [h(
            'template',
            { slot: 'sider' },
            [this.renderTree()]
          ), this.renderTable(), this.renderSelectedTags()]
        );
      } else if (this.cType === 1) {
        // 树
        // return this.renderTree();
        return h(
          Vertical,
          { props: { grow: true } },
          [this.renderTree(), this.renderSelectedTags()]
        );
      } else if (this.cType === 2) {
        // 列表
        // return this.renderTable();
        return h(
          Vertical,
          { props: { grow: true } },
          [this.renderTable(), this.renderSelectedTags()]
        );
      } else {}
    },
    renderMainContent: function renderMainContent() {
      var _cx;

      var h = this.$createElement;

      var bIsSingleSelect = this.isSingleSelect();
      var contentProps = {
        'class': (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, 'modal-single-content', bIsSingleSelect), (0, _defineProperty3['default'])(_cx, 'modal-multiple-content', !bIsSingleSelect), _cx))
      };
      return h(
        Vertical,
        { props: { grow: true }, 'class': contentProps },
        [this.renderModalContent()]
      );
    },

    // 动态加载自定义组件
    renderDynamicCom: function renderDynamicCom() {
      var h = this.$createElement;

      var path = this.comUrl;
      var selectedRowKeys = this.selectedRowKeys,
          selectedRows = this.selectedRows,
          treeSelectedRowKeys = this.treeSelectedRowKeys;

      var params = this.getParams();
      var isSingle = this.isSingleSelect();
      var dyProps = {
        props: {
          params: params,
          comPath: path,
          isSingle: isSingle,
          vSelectedRowKeys: selectedRowKeys,
          vSelectedRows: selectedRows,
          treeSelectedKeys: treeSelectedRowKeys
        },
        on: (0, _extends3['default'])({}, this.$listeners, {
          select: this.onDyComSelect,
          dyComMounted: this.dyComMounted
        }),
        'class': 'dynamic-com-wrapper'
      };
      return h('dyCustom', dyProps);
    },
    dyComMounted: function dyComMounted(args) {
      this.$emit('dyMounted', args);
    },

    // 自定义组件选中事件的回调
    onDyComSelect: function onDyComSelect(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
      if (this.isSingleSelect()) {
        this.handleOk();
      }
    },

    // 渲染选中项
    renderSelectedTags: function renderSelectedTags() {
      var _this = this;

      var h = this.$createElement;
      var selectedRows = this.selectedRows,
          sKey = this.sKey,
          sValue = this.sValue;

      if (this.isSingleSelect()) {
        return;
      }
      // if (selectedRows.length < 1) {
      //   return;
      // }
      // 清空选择选中项
      var clearIconProps = {
        'class': 'clear-icon-btn',
        props: {
          size: 'small'
        },
        on: {
          click: function click() {
            // 清空选择
            _this.clearTags();
          }
        }
      };
      // 标签删除
      return h(
        _antDesignVue.Collapse,
        {
          attrs: { defaultActiveKey: ['1'], bordered: false }
        },
        [h(
          Panel,
          {
            attrs: { header: '\u9009\u62E9\u9879(' + selectedRows.length + ')' },
            key: '1' },
          [h(
            'div',
            { 'class': 'selected-wrapper' },
            [h(
              'div',
              { 'class': 'selected-tags-container' },
              [selectedRows.length < 1 && h(
                'span',
                { 'class': 'no-text' },
                ['\u6682\u65E0\u9009\u4E2D\u9879']
              ), selectedRows.map(function (item, index) {
                var tmpKey = item[sKey];
                // 标签
                var tagProps = {
                  props: {
                    closable: true
                  },
                  on: {
                    close: function close(e) {
                      _this.closeTag(index);
                    }
                  }
                };
                return h(
                  _antDesignVue.Tag,
                  tagProps,
                  [item[sValue]]
                );
              })]
            ), selectedRows.length > 0 && h(
              'd-icon-button',
              clearIconProps,
              [h('d-icon', {
                attrs: { type: 'close' }
              })]
            )]
          )]
        )]
      );
    },

    // 渲染树
    renderTree: function renderTree() {
      var _this2 = this;

      var h = this.$createElement;
      var searchHelperData = this.searchHelperData,
          selectedRowKeys = this.selectedRowKeys,
          s_paramObj = this.s_paramObj,
          s_paramSubObj = this.s_paramSubObj,
          s_searchOptions = this.s_searchOptions,
          treeSelectedRowKeys = this.treeSelectedRowKeys,
          treeParams = this.treeParams;
      var _$props = this.$props,
          requestParam = _$props.requestParam,
          requestSubParam = _$props.requestSubParam,
          dateOptions = _$props.dateOptions,
          dimensionOptions = _$props.dimensionOptions,
          searchOptionsData = _$props.searchOptionsData,
          v_searchSelectOptions = _$props.searchSelectOptions;
      var treeRootInterface = searchHelperData.treeRootInterface,
          treeRootParams = searchHelperData.treeRootParams,
          subRootInterface = searchHelperData.subRootInterface,
          valueTreeRel = searchHelperData.valueTreeRel,
          displayTreeField = searchHelperData.displayTreeField,
          showDimension = searchHelperData.showDimension,
          showDate = searchHelperData.showDate,
          showSearch = searchHelperData.showSearch,
          searchParams = searchHelperData.searchParams;

      // 根节点接口

      var s_requestParam = {
        url: treeRootInterface ? this.getTreeBaseUrl(treeRootInterface) : s_paramObj.url,
        data: treeRootParams ? (0, _string.stringToObj)(treeRootParams) : {}
      };
      // 子节点接口
      var s_requestSubParam = {
        url: subRootInterface ? this.getTreeBaseUrl(subRootInterface) : s_paramSubObj.url
      };
      // 后台配置的搜索参数配置
      var s_searchParams = {
        data: searchParams ? (0, _string.stringToObj)(searchParams) : {}
      };
      // props传递
      var t_searchOptionsData = {
        data: searchOptionsData ? searchOptionsData : {}
      };

      // 父子节点关系数据
      var s_rel = this.s_rel,
          s_renderKey = this.s_renderKey;

      var t_valueTreeRelArr = [];
      if (valueTreeRel) {
        var tmp_valueTreeRel = (0, _string.strTrim)(valueTreeRel, true).split(',');
        tmp_valueTreeRel.forEach(function (item, index) {
          if (item.split('.').length > 1) {
            t_valueTreeRelArr.push(item.split('.'));
          } else {
            t_valueTreeRelArr.push(item);
          }
        });
      } else {
        t_valueTreeRelArr = s_rel;
      }
      // 处理树的显示name
      var t_renderKey = [];
      if (displayTreeField) {
        t_renderKey = displayTreeField.split('.');
      } else {
        t_renderKey = s_renderKey;
      }
      if (this.cType === 1 && !this.sKey) {
        // 只有树的情况
        this.sKey = t_valueTreeRelArr[0][1];
        this.sValue = t_renderKey[1];
      }

      // 动态设置的参数要拼接到根节点的参数上
      var params = this.cType === 1 ? this.getParams() : {};
      var newParamData = {};
      if (requestParam && requestParam.data) {
        newParamData = (0, _extends3['default'])({}, s_requestParam.data, requestParam.data, params);
      } else {
        newParamData = (0, _extends3['default'])({}, s_requestParam.data, params);
      }
      // 搜索选项默认值
      var searchOptions = null;
      if (showSearch) {
        var _searchOptions = (0, _extends3['default'])({}, s_searchParams.data, t_searchOptionsData.data);
        if (!(0, _utils.isEmptyObj)(_searchOptions)) {
          searchOptions = {};
          searchOptions.data = _searchOptions;
        }
      }
      // let searchSelectOptions;
      // searchSelectOptions = v_searchSelectOptions;
      var treeProps = {
        'class': 'modal-tree-container',
        props: (0, _extends3['default'])({
          checkable: this.cType === 1 && this.selectMode ? true : false,
          // multiple: this.cType === 1 && this.selectMode ? true : false,
          requestParam: (0, _extends3['default'])({}, s_requestParam, requestParam, { data: newParamData }),
          requestSubParam: (0, _extends3['default'])({}, s_requestSubParam, requestSubParam),
          rel: t_valueTreeRelArr,
          renderKey: t_renderKey,
          defaultOpenKeys: this.cType === 1 ? selectedRowKeys : treeSelectedRowKeys,
          // openKeys: this.cType === 1 ? selectedRowKeys : treeSelectedRowKeys,  // 这里设置openKeys，选中后不展开有问题
          checkedKeys: this.cType === 1 ? selectedRowKeys : treeSelectedRowKeys,
          defaultSelectedKeys: this.cType === 1 ? selectedRowKeys : treeSelectedRowKeys,
          selectedKeys: this.cType === 1 ? selectedRowKeys : treeSelectedRowKeys,
          dateOptions: showDate ? (0, _extends3['default'])({}, dateOptions) : null, // 日期搜索
          dimensionOptions: showDimension ? (0, _extends3['default'])({}, dimensionOptions) : null, // 维度搜索
          // searchOptions: showSearch ? Object.assign({}, s_searchParams, t_searchOptionsData) : null, // 过滤条件搜索
          searchOptions: searchOptions,
          searchSelectOptions: v_searchSelectOptions
        }, treeParams),
        on: (0, _extends3['default'])({}, this.$listeners, {
          select: this.onSelect,
          check: this.onCheck,
          'update:openKeys': function openKeys(val) {
            // console.log('openKeys', val);
          },
          dimensionChange: function dimensionChange(_ref) {
            var value = _ref.value,
                selectData = _ref.selectData;

            _this2.$emit('dimensionChange', { value: value, selectData: selectData });
          },
          search: function search(_ref2) {
            var data = _ref2.data;

            _this2.$emit('search', { data: data });
          },
          dateChange: function dateChange(_ref3) {
            var date = _ref3.date,
                dateString = _ref3.dateString;

            _this2.$emit('dateChange', { date: date, dateString: dateString });
          },
          initialEvent: function initialEvent(_ref4) {
            var dimension = _ref4.dimension,
                date = _ref4.date,
                treeData = _ref4.treeData;

            // console.log('initialEvent', arguments);
            // 加已改treeData为[]的判断
            _this2.treeSelectedRowKeys = treeData.length === 0 ? [] : [treeData[0].data.hid];
            var _selectedKeys = treeProps.props.selectedKeys;
            _this2.s_defcondition = {
              ouHid: _selectedKeys.length > 0 ? _selectedKeys[0] : treeData.length === 0 ? '' : treeData[0].data.hid,
              strDimHid: dimension,
              sysdate: date
            };
            _this2.$emit('initialEvent', { dimension: dimension, date: date, treeData: treeData });
            // 用于树的回显
            var bFirstInitialEvent = _this2.bFirstInitialEvent;

            if (!bFirstInitialEvent) {
              _this2.bFirstInitialEvent = true;
              // 如果selectedKeys有值，调用searchSelect()
              // const _selectedKeys = treeProps.props.selectedKeys;
              if (_selectedKeys.length > 0) {
                // window.selectorTree = this.$refs.selectorTree;
                // const { selectedRows } = this;
                _this2.$refs.selectorTree.searchSelect(_selectedKeys[0]).then(function () {
                  // console.log('search');
                });
              }
            }
          }
          // initialSubLoaded: ({ dimension, date, treeData }) => {
          // },
        }),
        ref: 'selectorTree'
      };

      return h(
        Vertical,
        (0, _babelHelperVueJsxMergeProps2['default'])([{ props: { grow: true } }, { 'class': 'tree-modal-wrapper' }]),
        [h('b-tree', treeProps)]
      );
    },


    // 树选择事件
    onSelect: function onSelect(args, item, items) {
      var selectedKeys = args.selectedKeys,
          selectedNodes = args.selectedNodes,
          selected = args.selected;
      var sKey = this.sKey,
          sValue = this.sValue;

      this.$emit('treeSelect', args, item, items);
      if (this.cType === 1) {
        // 只有树，并且是多选得情况，select事件不处理
        if (this.selectMode === 1) {
          return;
        }
        // 纯树的
        this.selectedRowKeys = (0, _extends3['default'])([], selectedKeys);
        var selectedRows = [];
        selectedNodes.map(function (item, index) {
          var _selectedRows$push;

          var key = item.data.key;
          var name = item.data.props.title;
          selectedRows.push((_selectedRows$push = {}, (0, _defineProperty3['default'])(_selectedRows$push, sKey, key), (0, _defineProperty3['default'])(_selectedRows$push, sValue, name), _selectedRows$push));
        });
        this.treeSelectItem = item;
        this.treeSelectItems = items;
        this.selectedRows = selectedRows;
        if (this.isSingleSelect()) {
          // 单选，
          this.handleOk();
        }
      } else {
        // 与列表组合的， 触发列表更新
        if (!selected) {
          return;
        }

        this.treeSelectedRowKeys = (0, _extends3['default'])([], selectedKeys);
        var _strDimHid = item.data.dimensionId;
        var _queryDate = item.data.queryDate.time;
        // 选中treeid, 赋值给列表做查询条件
        this.s_defcondition = { ouHid: selectedKeys[0], strDimHid: _strDimHid, sysdate: _queryDate };
      }
    },


    // 有check的选中事件
    onCheck: function onCheck(args, item, items) {
      var checkedKeys = args.checkedKeys,
          checkedNodes = args.checkedNodes,
          event = args.event,
          nativeEvent = args.nativeEvent,
          node = args.node;
      var sKey = this.sKey,
          sValue = this.sValue;

      if (this.cType === 1) {
        // 纯树的
        this.selectedRowKeys = checkedKeys;
        var selectedRows = [];
        checkedNodes.map(function (item, index) {
          var _selectedRows$push2;

          var key = item.data.key;
          var name = item.data.props.title;
          selectedRows.push((_selectedRows$push2 = {}, (0, _defineProperty3['default'])(_selectedRows$push2, sKey, key), (0, _defineProperty3['default'])(_selectedRows$push2, sValue, name), _selectedRows$push2));
        });
        this.treeSelectItem = item;
        this.treeSelectItems = items;
        this.selectedRows = selectedRows;
      }
    },


    // 渲染列表
    renderTable: function renderTable() {
      var h = this.$createElement;
      var _$props2 = this.$props,
          customServe = _$props2.customServe,
          defcondition = _$props2.defcondition,
          mode = _$props2.mode;
      var s_customTableService = this.s_customTableService,
          s_defcondition = this.s_defcondition,
          $slots = this.$slots;

      var params = this.getParams();
      // 定义列表配置查询接口，使用顺序优先级：后台配置《 props传过来的
      var customTableService = customServe ? customServe : s_customTableService;
      // 列表默认条件
      var tmpDefCondition = (0, _extends3['default'])({}, s_defcondition, defcondition, params);
      // const scrollTableH = this.isSingleSelect() ? 400 : 350;
      var tableProps = {
        props: {
          tempCode: this.listCode,
          rowKey: this.sKey,
          rowTitle: this.sValue,
          conditionList: [],
          hidenAlert: true,
          showExport: false, // 隐藏导出
          rowSelection: this.rowSelection,
          size: 'small',
          defcondition: tmpDefCondition,
          customServe: customTableService,
          scroll: { y: true }
        }
      };
      return h(
        Vertical,
        (0, _babelHelperVueJsxMergeProps2['default'])([{ props: { grow: true } }, { 'class': 'modal-table-container' }]),
        [h(
          'b-temp-table',
          tableProps,
          [h(
            'template',
            { slot: 'left-operate' },
            [$slots.customTempTopToolsLine]
          )]
        )]
      );
    },

    // 在选中项区域删除已选中的项目
    closeTag: function closeTag(index) {
      var selectedRows = this.selectedRows,
          sKey = this.sKey;

      selectedRows.splice(index, 1);
      this.selectedRowKeys = selectedRows.map(function (item) {
        return item[sKey];
      });
    },

    // 清空所有选中项
    clearTags: function clearTags() {
      this.selectedRows = [];
      this.selectedRowKeys = [];
      console.log(this.selectedRows);
    },


    // 判断搜索助手是单选还是多选
    isSingleSelect: function isSingleSelect() {
      var selectMode = this.selectMode;
      var multiple = this.$props.multiple;
      // 是客户化的也根据参数配置判断

      return multiple === true ? false : selectMode === 1 ? false : true;
      // return this.isCustomize() ? !multiple : selectMode === 0 ? true : false;
    },

    // 是否是客户化页面
    isCustomize: function isCustomize() {
      return this.bCustomize;
    }
  }
};