mt-ui-components-vue3/es/Search/Advanced/index.js

玛果添实UI组件库(Vue3)

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import useStyle from '../style/Search.style';
import SearchItem from '../Item.js';
import { typeOptions } from '../setting';
import { useElementSize } from '@vueuse/core';
import { useRouteQuery } from '@vueuse/router';
import { ref, reactive, defineComponent } from 'vue';
import SaveHistory from './SaveHistory.js';
import History from './History.js';
import { compatibleOldTerms, getTermTypeFn, handleQData, hasExpand, termsParamsFormat } from '../util';
import { Select as JSelect, Button as JButton, AIcon, Form, FormItemRest } from '../../components';
import { cloneDeep } from 'lodash-es';
// import { JTableProps } from '../../ProTable/src/j-table';
import '../../ProTable/src/proTableTypes';
import useConfigInject from 'ant-design-vue/es/config-provider/hooks/useConfigInject';
import classNames from 'ant-design-vue/es/_util/classNames';
var advancedSearchProps = function advancedSearchProps() {
  return {
    columns: {
      type: Array,
      default: function _default() {
        return [];
      },
      required: true
    },
    type: {
      type: String,
      default: 'advanced'
    },
    target: {
      type: String,
      default: '',
      required: true
    },
    class: {
      type: String,
      default: ''
    },
    request: {
      type: Function,
      default: undefined
    },
    historyRequest: {
      type: Function,
      default: undefined
    },
    deleteRequest: {
      type: Function,
      default: null
    },
    deleteKey: {
      type: String,
      default: 'key'
    },
    routerMode: {
      type: String,
      default: 'hash'
    },
    style: {
      type: [String, Object],
      default: undefined
    }
  };
};
var AdvancedSearch = defineComponent({
  name: 'AdvancedSearch',
  emits: ['search'],
  props: advancedSearchProps(),
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var searchRef = ref(null);
    var searchRefContentRef = ref(null);
    var _useElementSize = useElementSize(searchRef),
      width = _useElementSize.width;
    var q = useRouteQuery('q');
    var target = useRouteQuery('target');
    // const q = ref('');
    // const target = ref('');
    var hasOnceSearch = ref(false);
    // 是否展开更多筛选
    var expand = ref(false);
    //
    // 组件方向
    var layout = ref('horizontal');
    var compatible = ref(false);
    // 当前组件宽度 true 大于1000
    var screenSize = ref(true);
    var resetNumber = ref(1);
    var columnOptionMap = new Map();
    var searchItems = ref([]); // 当前查询条件
    var termsData = reactive({
      terms: [{
        terms: [null, null, null]
      }, {
        terms: [null, null, null],
        type: 'and'
      }]
    });
    var historyItemClick = function historyItemClick(content) {
      try {
        var _handleQData;
        termsData.terms = ((_handleQData = handleQData(compatibleOldTerms(content))) === null || _handleQData === void 0 ? void 0 : _handleQData.terms) || [];
        expand.value = hasExpand(termsData.terms);
        searchSubmit();
      } catch (e) {
        console.warn("Search\u7EC4\u4EF6\u4E2DhandleUrlParams\u5904\u7406JSON\u65F6\u5F02\u5E38\uFF1A\u3010".concat(e, "\u3011"));
      }
    };
    /**
     * 处理URL中的查询参数
     * @param _params
     */
    var handleUrlParams = function handleUrlParams(_params) {
      // URL中的target和props的一致，则还原查询参数
      if (props.target && _params.target === props.target && _params.q) {
        var _handleQData2;
        termsData.terms = ((_handleQData2 = handleQData(compatibleOldTerms(_params.q))) === null || _handleQData2 === void 0 ? void 0 : _handleQData2.terms) || [];
        expand.value = hasExpand(termsData.terms);
        emit('search', termsParamsFormat(termsData, columnOptionMap));
      }
    };
    var expandChange = function expandChange() {
      expand.value = !expand.value;
      if (!expand.value) {
        // 收起
        var firstItem = termsData.terms[0].terms[0];
        termsData.terms = [{
          terms: [firstItem, null, null]
        }, {
          terms: [null, null, null]
        }];
      }
    };
    var itemValueChange = function itemValueChange(value, index) {
      if (index < 4) {
        // 第一组数据
        termsData.terms[0].terms[index - 1] = value;
      } else {
        // 第二组数据
        termsData.terms[1].terms[index - 4] = value;
      }
    };
    /**
     * 重置查询
     */
    var reset = function reset() {
      termsData.terms = [{
        terms: [null, null, null]
      }, {
        terms: [null, null, null],
        type: 'and'
      }];
      expand.value = false;
      if (props.type === 'advanced') {
        q.value = null;
        target.value = null;
      }
      resetNumber.value += 1;
      emit('search', {
        terms: []
      });
    };
    /**
     * 提交
     */
    var searchSubmit = function searchSubmit() {
      submitData();
      if (props.type === 'advanced') {
        addUrlParams();
      }
    };
    var addUrlParams = function addUrlParams() {
      q.value = JSON.stringify(termsData);
      target.value = props.target;
    };
    var submitData = function submitData() {
      emit('search', termsParamsFormat(termsData, columnOptionMap));
    };
    /**
     * 处理每项的key为Item组件所需要的key
     */
    var handleItems = function handleItems() {
      searchItems.value = [];
      columnOptionMap.clear();
      props.columns.forEach(function (item, index) {
        var _item = cloneDeep(item);
        if (_item.search && Object.keys(_item.search).length) {
          columnOptionMap.set(
          // _item.search?.rename || _item.dataIndex,
          _item.dataIndex, _item.search);
          // 默认值
          var search = _item.search;
          var defaultTerms = null;
          // 包含defaultValue 或者 defaultOnceValue
          if (search.defaultValue !== undefined || search.defaultOnceValue) {
            var _value = search.defaultValue || search.defaultOnceValue;
            defaultTerms = {
              type: 'and',
              value: _value,
              termType: search.defaultTermType || getTermTypeFn(search.type),
              column: _item.dataIndex
            };
          }
          if (search.defaultValue !== undefined || search.defaultOnceValue !== undefined) {
            hasOnceSearch.value = true;
          }
          searchItems.value.push(_objectSpread(_objectSpread({}, _item.search), {}, {
            sortIndex: _item.search.first ? 0 : index + 1,
            title: _item.title,
            // column: _item.search?.rename || _item.dataIndex,
            column: _item.dataIndex
          }));
          if (defaultTerms) {
            itemValueChange(defaultTerms, search.first ? 1 : index + 1);
          }
        }
      });
      submitData();
      handleUrlParams({
        q: q.value,
        target: target.value
      });
    };
    handleItems();
    //  const { resetAction, submitAction } = useFormContext();
    var _useConfigInject = useConfigInject('advanced-search', props),
      prefixCls = _useConfigInject.prefixCls;
    var _useStyle = useStyle(prefixCls),
      _useStyle2 = _slicedToArray(_useStyle, 2),
      wrapSSR = _useStyle2[0],
      hashId = _useStyle2[1];
    var prefixClsValue = prefixCls.value;
    var rootCls = classNames(prefixClsValue, _defineProperty({}, hashId.value, true));
    return function () {
      return wrapSSR(_createVNode(Form, {
        "class": [rootCls],
        "model": termsData,
        "onFinish": searchSubmit
      }, {
        default: function _default() {
          return [_createVNode("div", {
            "class": "".concat(prefixClsValue, "-warp senior ").concat(props.class),
            "style": props.style
          }, [props.type === 'advanced' ? _createVNode("div", {
            "ref": searchRefContentRef,
            "class": "\n              JSearch-content \n              ".concat(expand.value || compatible.value ? 'senior-expand' : 'pack-up', " \n              ").concat(screenSize.value ? 'big' : 'small', "\n            ")
          }, [_createVNode("div", {
            "class": "\n                    JSearch-items \n                    ".concat(expand.value ? 'items-expand' : '', " \n                    layout\n                ")
          }, [_createVNode("div", {
            "class": "JSearch-left"
          }, [_createVNode("div", {
            "class": "left-items"
          }, [_createVNode(SearchItem, {
            "expand": expand.value,
            "index": 1,
            "columns": searchItems.value,
            "terms-item": termsData.terms[0].terms[0],
            "reset": resetNumber.value,
            "onChange": function onChange(v) {
              return itemValueChange(v, 1);
            }
          }, null), expand.value ? [_createVNode(SearchItem, {
            "expand": expand.value,
            "index": 2,
            "columns": searchItems.value,
            "terms-item": termsData.terms[0].terms[1],
            "reset": resetNumber.value,
            "onChange": function onChange(v) {
              return itemValueChange(v, 2);
            }
          }, null), _createVNode(SearchItem, {
            "expand": expand.value,
            "index": 3,
            "columns": searchItems.value,
            "terms-item": termsData.terms[0].terms[2],
            "reset": resetNumber.value,
            "onChange": function onChange(v) {
              return itemValueChange(v, 3);
            }
          }, null)] : null])]), expand.value ? [_createVNode("div", {
            "class": "JSearch-center"
          }, [_createVNode(JSelect, {
            "value": termsData.terms[1].type,
            "onUpdate:value": function onUpdateValue($event) {
              return termsData.terms[1].type = $event;
            },
            "class": "center-select",
            "style": "width: 100px",
            "options": typeOptions
          }, null)]), _createVNode("div", {
            "class": "JSearch-right"
          }, [_createVNode("div", {
            "class": "right-items"
          }, [[4, 5, 6].map(function (item) {
            return _createVNode(SearchItem, {
              "key": "search_item_".concat(item),
              "expand": expand,
              "index": item,
              "columns": searchItems,
              "terms-item": termsData.terms[1].terms[item - 4],
              "reset": resetNumber,
              "onChange": function onChange(v) {
                return itemValueChange(v, item);
              }
            }, null);
          })])])] : null]), _createVNode("div", {
            "class": "JSearch-footer\n                  ".concat(expand.value || compatible.value ? 'expand' : '')
          }, [_createVNode("div", {
            "class": "JSearch-footer--btns"
          }, [_createVNode(JButton, {
            "type": "stroke",
            "onClick": reset
          }, {
            default: function _default() {
              return [' ', _createTextVNode("\u91CD\u7F6E"), ' '];
            }
          }), _createVNode(SaveHistory, {
            "terms": termsData,
            "target": props.target,
            "request": props.request
          }, null), _createVNode(History, {
            "target": props.target,
            "request": props.historyRequest,
            "delete-request": props.deleteRequest,
            "delete-key": props.deleteKey,
            "onClick": searchSubmit,
            "onItemClick": historyItemClick
          }, null)]), _createVNode(JButton, {
            "type": "link",
            "class": "more-btn",
            "onClick": expandChange
          }, {
            default: function _default() {
              return [_createVNode("span", {
                "class": "more-text"
              }, [' ', _createTextVNode("\u66F4\u591A\u7B5B\u9009"), ' ']), _createVNode(AIcon, {
                "type": "DoubleRightOutlined",
                "class": "more-icon\n                                ".concat(expand.value ? 'more-up' : 'more-down')
              }, null)];
            }
          })])]) : _createVNode("div", {
            "class": "JSearch-content single big pack-up"
          }, [_createVNode("div", {
            "class": "JSearch-items"
          }, [_createVNode("div", {
            "class": "JSearch-left"
          }, [_createVNode(SearchItem, {
            "expand": false,
            "index": 1,
            "columns": searchItems.value,
            "terms-item": termsData.terms[0].terms[0],
            "reset": resetNumber.value,
            "onChange": function onChange(v) {
              return itemValueChange(v, 1);
            }
          }, null)])]), _createVNode("div", {
            "class": "JSearch-footer"
          }, [_createVNode("div", {
            "class": "JSearch-footer--btns"
          }, [_createVNode(FormItemRest, null, {
            default: function _default() {
              return [_createVNode(JButton, {
                "type": "stroke",
                "onClick": reset
              }, {
                default: function _default() {
                  return [_createTextVNode("\u91CD\u7F6E")];
                }
              }), _createVNode(JButton, {
                "html-type": "submit",
                "type": "primary"
              }, {
                default: function _default() {
                  return [_createTextVNode("\u641C\u7D22")];
                }
              })];
            }
          })])])])])];
        }
      }));
    };
  }
});
export default AdvancedSearch;