@jetlinks-web/components 3.0.0-rc → 3.0.0

package/es/Search/Search.js

@@ -1,112 +1,73 @@
 /* Analyzed bindings: {
-  "columns": "props",
-  "type": "props",
-  "column": "props",
-  "style": "props",
-  "class": "props",
-  "labelWidth": "props",
-  "resetText": "props",
-  "submitText": "props",
-  "align": "props",
-  "JColumnsProps": "setup-maybe-ref",
-  "SearchItemData": "setup-maybe-ref",
-  "SearchProps": "setup-maybe-ref",
-  "Terms": "setup-maybe-ref",
-  "Button": "setup-maybe-ref",
-  "Row": "setup-maybe-ref",
-  "Col": "setup-maybe-ref",
-  "Form": "setup-maybe-ref",
-  "FormItemRest": "setup-maybe-ref",
-  "set": "setup-maybe-ref",
   "reactive": "setup-const",
   "ref": "setup-const",
-  "provide": "setup-const",
-  "watch": "setup-const",
   "computed": "setup-const",
   "inject": "setup-const",
-  "termsParamsFormat": "setup-maybe-ref",
-  "SearchItem": "setup-const",
-  "optionsMapKey": "setup-maybe-ref",
-  "SearchConfig": "setup-maybe-ref",
+  "useAttrs": "setup-const",
+  "searchProps": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
+  "Button": "setup-maybe-ref",
+  "Col": "setup-maybe-ref",
+  "Form": "setup-maybe-ref",
+  "FormItemRest": "setup-maybe-ref",
+  "Row": "setup-maybe-ref",
+  "SearchConfig": "setup-maybe-ref",
+  "Item": "setup-const",
+  "useHandleColumns": "setup-maybe-ref",
+  "useOptionMapContent": "setup-maybe-ref",
+  "termsParamsFormat": "setup-maybe-ref",
+  "useSearchStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
-  "contextLocale": "setup-maybe-ref",
-  "columnOptionMap": "setup-ref",
   "emit": "setup-const",
+  "contextLocale": "setup-maybe-ref",
+  "attrs": "setup-maybe-ref",
+  "columnsOptionMap": "setup-ref",
   "terms": "setup-reactive-const",
-  "searchItems": "setup-ref",
   "context": "setup-maybe-ref",
+  "initValues": "setup-maybe-ref",
+  "columnsMap": "setup-maybe-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "footerStyles": "setup-ref",
-  "itemValueChange": "setup-const",
-  "handleItems": "setup-const",
   "searchSubmit": "setup-const",
-  "resetNumber": "setup-ref",
-  "reset": "setup-const"
+  "reset": "setup-const",
+  "handleDefaultValues": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createVNode as _createVNode, unref as _unref, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = { class: "JSearch-content simple" };
 const _hoisted_2 = { class: "JSearch-items" };
-import { Button, Row, Col, Form, FormItemRest, } from 'ant-design-vue';
-import { set } from 'lodash-es';
-import { reactive, ref, provide, watch, computed, inject } from 'vue';
-import { termsParamsFormat } from './util';
-import SearchItem from './Item.js';
-import { optionsMapKey } from './setting';
-import { SearchConfig } from '../utils/constants';
-import { useLocaleReceiver } from "../LocaleReciver/index";
+import { reactive, ref, computed, inject, useAttrs } from 'vue';
+import { searchProps } from "./setting";
+import { useLocaleReceiver } from "../LocaleReciver";
+import { Button, Col, Form, FormItemRest, Row } from "ant-design-vue";
+import { SearchConfig } from "../utils/constants";
+import Item from './Item.js';
+import { useHandleColumns, useOptionMapContent } from "./hooks";
+import { termsParamsFormat } from "./util";
+import useSearchStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JSearch',
+        inheritAttrs: false
     },
     props: {
-        columns: {
-            type: Array,
-            default: () => [],
-            required: true,
-        },
-        type: {
-            type: String,
-            default: 'terms',
-            required: true,
-        },
-        column: {
-            type: Number,
-            default: 4,
-        },
-        style: {
-            type: [String, Object],
-            default: undefined,
-        },
-        class: {
-            type: String,
-            default: '',
-        },
-        labelWidth: {
-            type: Number,
-            default: 40,
-        },
-        resetText: {
-            type: String,
-        },
-        submitText: {
-            type: String,
-        },
-        align: {
-            type: String,
-            default: 'value'
-        }
+        ...searchProps()
     },
-    emits: ["search"],
+    emits: ['search'],
     setup(__props, { expose: __expose, emit: __emit }) {
         const props = __props;
-        const [contextLocale] = useLocaleReceiver('Search');
-        const columnOptionMap = ref(new Map());
         const emit = __emit;
-        // 当前查询条件
-        const terms = reactive({ terms: [] });
-        const searchItems = ref([]); // 当前查询条件列表
+        const [contextLocale] = useLocaleReceiver('Search');
+        const attrs = useAttrs();
+        const columnsOptionMap = ref({}); // 存储每个columnItem的option
+        const terms = reactive({ terms: [] }); // 当前查询条件
         const context = inject(SearchConfig, { align: props.align });
+        const { initValues, columnsMap } = useHandleColumns(props, terms);
+        const prefixCls = computed(() => 'JSearch');
+        const [wrapSSR, hashId] = useSearchStyle(prefixCls);
+        useOptionMapContent(columnsOptionMap);
         const footerStyles = computed(() => {
             const align = context.align || props.align;
             if (align === 'value') {
@@ -114,76 +75,25 @@ const __sfc_main__ = _defineComponent({
             }
             return {};
         });
-        provide(optionsMapKey, columnOptionMap);
-        const itemValueChange = (value, index) => {
-            set(terms.terms, [index], value);
-        };
-        const handleItems = (reset = false) => {
-            searchItems.value = [];
-            terms.terms = [];
-            columnOptionMap.value.clear();
-            let hasSearch = false;
-            props.columns.forEach((item, index) => {
-                if (item.search && Object.keys(item.search).length) {
-                    columnOptionMap.value.set(item.dataIndex, item.search);
-                    // 默认值
-                    const { search } = item;
-                    let defaultTerms = null;
-                    // 包含defaultValue 或者 defaultOnceValue
-                    if (search.defaultValue !== undefined ||
-                        search.defaultTermType ||
-                        search.defaultOnceValue) {
-                        const _value = search.defaultValue || reset
-                            ? search.defaultValue
-                            : search.defaultOnceValue;
-                        defaultTerms = {
-                            type: 'and',
-                            value: _value,
-                            termType: search.defaultTermType || 'like',
-                            column: item.dataIndex,
-                        };
-                    }
-                    if (search.defaultValue !== undefined ||
-                        search.defaultOnceValue !== undefined) {
-                        hasSearch = true;
-                    }
-                    terms.terms.push(defaultTerms);
-                    searchItems.value.push({
-                        ...item.search,
-                        sortIndex: item.search.first ? 0 : index + 1,
-                        title: item.title,
-                        column: item.dataIndex,
-                    });
-                }
-            });
-            if (hasSearch) {
-                searchSubmit();
-            }
-        };
-        /**
-         * 提交
-         */
         const searchSubmit = () => {
-            emit('search', termsParamsFormat(terms.terms, columnOptionMap.value, 'low', props.type));
+            emit('search', termsParamsFormat(terms, columnsMap.value, 'low', props.type));
         };
-        /**
-         * 重置查询
-         */
-        const resetNumber = ref(1);
         const reset = () => {
-            resetNumber.value += 1;
-            handleItems(true);
-            if (props.type == 'object') {
-                emit('search', {});
-            }
-            else if (props.type == 'terms') {
-                emit('search', []);
-            }
+            initValues();
+        };
+        const handleDefaultValues = (value) => {
+            const isObject = Object.prototype.toString.call(value) === '[object Object]';
+            let _params = isObject ? Object.keys(value).map((key) => ({ column: key, value: value[key], termType: 'eq' })) : [...value];
+            terms.terms.forEach((item) => {
+                const paramsItem = _params.find(paramsItem => paramsItem.column === item.column);
+                if (paramsItem) {
+                    item.value = paramsItem.value;
+                }
+            });
+            emit('search', termsParamsFormat(terms, columnsMap.value));
         };
-        watch(() => props.columns, () => {
-            handleItems();
-        }, { immediate: true, deep: true });
         __expose({
+            setValues: handleDefaultValues,
             reset
         });
         return (_ctx, _cache) => {
@@ -193,36 +103,35 @@ const __sfc_main__ = _defineComponent({
             }, {
                 default: _withCtx(() => [
                     _createElementVNode("div", {
-                        class: _normalizeClass(['JSearch-warp', props.class]),
-                        style: _normalizeStyle(__props.style)
+                        class: _normalizeClass(["JSearch-warp", [_unref(attrs).class, _unref(hashId)]]),
+                        style: _normalizeStyle(_unref(attrs).style)
                     }, [
                         _createElementVNode("div", _hoisted_1, [
                             _createElementVNode("div", _hoisted_2, [
                                 _createVNode(_unref(Row), { gutter: [16, 16] }, {
                                     default: _withCtx(() => [
-                                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(searchItems.value, (item, index) => {
+                                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(terms.terms, (item, index) => {
                                             return (_openBlock(), _createBlock(_unref(Col), {
-                                                key: index + '_' + item.column,
-                                                span: item.span || 24 / __props.column
+                                                span: item._span || 24 / _ctx.column
                                             }, {
                                                 default: _withCtx(() => [
-                                                    _createVNode(SearchItem, {
-                                                        "only-value": true,
-                                                        expand: false,
-                                                        index: index + 1,
-                                                        columns: searchItems.value,
-                                                        "component-props": item.componentProps,
-                                                        "terms-item": terms.terms[index],
-                                                        reset: resetNumber.value,
-                                                        "label-width": __props.labelWidth,
-                                                        onChange: (v) => itemValueChange(v, index)
-                                                    }, null, 8 /* PROPS */, ["index", "columns", "component-props", "terms-item", "reset", "label-width", "onChange"])
+                                                    _createVNode(Item, {
+                                                        value: item.value,
+                                                        "onUpdate:value": ($event) => ((item.value) = $event),
+                                                        termType: item.termType,
+                                                        "onUpdate:termType": ($event) => ((item.termType) = $event),
+                                                        column: item.column,
+                                                        "onUpdate:column": ($event) => ((item.column) = $event),
+                                                        type: item.type,
+                                                        "onUpdate:type": ($event) => ((item.type) = $event),
+                                                        labelWidth: _ctx.labelWidth
+                                                    }, null, 8 /* PROPS */, ["value", "onUpdate:value", "termType", "onUpdate:termType", "column", "onUpdate:column", "type", "onUpdate:type", "labelWidth"])
                                                 ]),
                                                 _: 2 /* DYNAMIC */
                                             }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["span"]));
-                                        }), 128 /* KEYED_FRAGMENT */)),
+                                        }), 256 /* UNKEYED_FRAGMENT */)),
                                         _createVNode(_unref(Col), {
-                                            span: 24 / __props.column
+                                            span: 24 / _ctx.column
                                         }, {
                                             default: _withCtx(() => [
                                                 _renderSlot(_ctx.$slots, "footerRender", {
@@ -233,12 +142,9 @@ const __sfc_main__ = _defineComponent({
                                                         class: "JSearch-footer--btns",
                                                         style: _normalizeStyle(footerStyles.value)
                                                     }, [
-                                                        _createVNode(_unref(Button), {
-                                                            type: "stroke",
-                                                            onClick: reset
-                                                        }, {
+                                                        _createVNode(_unref(Button), { onClick: reset }, {
                                                             default: _withCtx(() => [
-                                                                _createTextVNode(_toDisplayString(__props.resetText || _unref(contextLocale).search.reset), 1 /* TEXT */)
+                                                                _createTextVNode(_toDisplayString(_ctx.resetText || _unref(contextLocale).search.reset), 1 /* TEXT */)
                                                             ]),
                                                             _: 1 /* STABLE */
                                                         }),
@@ -249,7 +155,7 @@ const __sfc_main__ = _defineComponent({
                                                                     type: "primary"
                                                                 }, {
                                                                     default: _withCtx(() => [
-                                                                        _createTextVNode(_toDisplayString(__props.submitText || _unref(contextLocale).search.search), 1 /* TEXT */)
+                                                                        _createTextVNode(_toDisplayString(_ctx.submitText || _unref(contextLocale).search.search), 1 /* TEXT */)
                                                                     ]),
                                                                     _: 1 /* STABLE */
                                                                 })

package/es/Search/hooks/index.js

@@ -1 +1,108 @@
-export * from './useSearchItems';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { provide, inject, watchEffect, ref } from 'vue';
+import { getItemDefaultValue } from "../util";
+export * from './useSearchItems';
+export * from './useRouteQuery';
+var optionMapKey = Symbol('optionMapKey');
+var columnsMapKey = Symbol('columnMapKey');
+var columnsValues = Symbol('columnsValues');
+export var useOptionMapContent = function useOptionMapContent(optionsMap) {
+  provide(optionMapKey, optionsMap);
+};
+export var useOptionMap = function useOptionMap() {
+  return inject(optionMapKey);
+};
+export var useColumnsMapContent = function useColumnsMapContent(columnsMap) {
+  provide(columnsMapKey, columnsMap);
+};
+export var useColumnsMap = function useColumnsMap() {
+  return inject(columnsMapKey);
+};
+export var useDefaultValue = function useDefaultValue() {
+  return inject(columnsValues);
+};
+export var useHandleColumns = function useHandleColumns(props, terms) {
+  var columnsMap = ref({}); // 存储每个column
+  var defaultCacheValues = ref({});
+  useColumnsMapContent(columnsMap);
+  /**
+   * 处理search.first为true的排序
+   * @param arr
+   */
+  var moveFirstElementsToFront = function moveFirstElementsToFront(arr) {
+    // 提取所有 first: true 的元素
+    var firstElements = arr.filter(function (item) {
+      return item.search.first === true;
+    });
+    // 提取剩余的元素
+    var otherElements = arr.filter(function (item) {
+      return item.search.first !== true;
+    });
+    // 合并并返回
+    return [].concat(_toConsumableArray(firstElements), _toConsumableArray(otherElements));
+  };
+  /**
+   * 处理默认值
+   * @param arr
+   */
+  var handleDefaultValue = function handleDefaultValue(arr) {
+    var _iterator = _createForOfIteratorHelper(arr),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        var search = item.search;
+        var _data = {
+          defaultValue: undefined,
+          defaultTermType: undefined
+        };
+        _data.defaultValue = search.defaultValue;
+        _data.defaultTermType = search.defaultTermType;
+        defaultCacheValues.value[item.dataIndex] = _data;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    provide(columnsValues, defaultCacheValues);
+  };
+  var initValues = function initValues() {
+    var arr = Object.values(columnsMap.value);
+    if (props.mode === 'advanced') {
+      //  设置第一位
+      terms.terms = [getItemDefaultValue(arr[0], defaultCacheValues.value)];
+    } else {
+      terms.terms = arr.map(function (item) {
+        return getItemDefaultValue(item, defaultCacheValues.value);
+      });
+    }
+  };
+  var handleColumns = function handleColumns(columns) {
+    var columnsSearch = columns.filter(function (item) {
+      return item.hasOwnProperty('search') && Object.keys(item.search).length;
+    });
+    // 排序
+    var columnsSort = moveFirstElementsToFront(columnsSearch);
+    columnsSort.forEach(function (item, index) {
+      columnsMap.value[item.dataIndex] = _objectSpread(_objectSpread({}, item), {}, {
+        _sort_index: index
+      });
+    });
+    handleDefaultValue(columnsSort);
+    if (terms.terms.length === 0) {
+      // 高级模式处理数据
+      initValues();
+    }
+  };
+  watchEffect(function () {
+    handleColumns(props.columns);
+  });
+  return {
+    initValues: initValues,
+    columnsMap: columnsMap,
+    defaultCacheValues: defaultCacheValues
+  };
+};

package/es/Search/hooks/useRouteQuery.js

@@ -0,0 +1,57 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { customRef, nextTick, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+var _queue = new WeakMap();
+export var useRouteQuery = function useRouteQuery(name) {
+  var router = useRouter();
+  var route = useRoute();
+  var transformGet = function transformGet(value) {
+    return value;
+  };
+  var transformSet = function transformSet(value) {
+    return value;
+  };
+  if (!_queue.has(router)) _queue.set(router, new Map());
+  var _queriesQueue = _queue.get(router);
+  var query = route.query[name];
+  var _trigger;
+  var proxy = customRef(function (track, trigger) {
+    _trigger = trigger;
+    return {
+      get: function get() {
+        track();
+        return transformGet(query !== undefined ? query : undefined);
+      },
+      set: function set(v) {
+        v = transformSet(v);
+        if (query === v) return;
+        query = v === undefined ? undefined : v;
+        _queriesQueue.set(name, v === undefined ? undefined : v);
+        trigger();
+        nextTick(function () {
+          if (_queriesQueue.size === 0) return;
+          var newQueries = Object.fromEntries(_queriesQueue.entries());
+          _queriesQueue.clear();
+          var params = route.params,
+            query = route.query,
+            hash = route.hash;
+          router.replace({
+            params: params,
+            query: _objectSpread(_objectSpread({}, query), newQueries),
+            hash: hash
+          });
+        });
+      }
+    };
+  });
+  watch(function () {
+    return route.query[name];
+  }, function (v) {
+    if (query === transformGet(v)) return;
+    query = v;
+    _trigger();
+  }, {
+    flush: 'sync'
+  });
+  return proxy;
+};

package/es/Search/setting.js

@@ -1,18 +1,43 @@
-import 'vue';
-import './typing';
+import { TreeSelect, Select, Input, InputNumber, DatePicker, TimePicker, InputPassword, RangePicker, TimeRangePicker } from 'ant-design-vue';
+import { filterSelectNode, filterTreeSelectNode } from "./util";
 export var optionsMapKey = Symbol('searchOptionsMap');
-export var basicSearch = {
-  columns: {
-    type: Array,
-    default: function _default() {
-      return [];
-    },
-    required: true
-  },
-  type: {
-    type: String,
-    default: 'advanced'
-  }
+export var searchProps = function searchProps() {
+  return {
+    columns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      },
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'terms',
+      required: true
+    },
+    mode: {
+      type: String,
+      default: 'default'
+    },
+    column: {
+      type: Number,
+      default: 4
+    },
+    labelWidth: {
+      type: Number,
+      default: 40
+    },
+    resetText: {
+      type: String
+    },
+    submitText: {
+      type: String
+    },
+    align: {
+      type: String,
+      default: 'value'
+    }
+  };
 };
 export var typeOptions = function typeOptions(locale) {
   return [{
@@ -94,4 +119,97 @@ export var componentType = {
   tree: 'tree',
   select: 'select',
   component: 'component'
+};
+export var componentProps = function componentProps(record) {
+  var type = record.type;
+  switch (type) {
+    case 'string':
+    case componentType.input:
+      return {
+        type: type,
+        name: Input
+      };
+    case componentType.inputNumber:
+      return {
+        type: type,
+        name: InputNumber
+      };
+    case componentType.password:
+      return {
+        type: type,
+        name: InputPassword
+      };
+    case componentType.time:
+      return {
+        type: type,
+        name: TimePicker,
+        props: {
+          valueFormat: 'HH:mm:ss'
+        }
+      };
+    case componentType.date:
+      return {
+        type: type,
+        name: DatePicker,
+        props: {
+          valueFormat: 'YYYY-MM-DD HH:mm:ss'
+        }
+      };
+    case componentType.timeRange:
+      return {
+        type: type,
+        name: TimeRangePicker,
+        props: {
+          valueFormat: 'HH:mm:ss'
+        }
+      };
+    case componentType.rangePicker:
+      return {
+        type: type,
+        name: RangePicker,
+        props: {
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          showTime: true
+        }
+      };
+    case componentType.treeSelect:
+      return {
+        type: type,
+        name: TreeSelect,
+        props: {
+          showSearch: true,
+          height: 350,
+          fieldNames: {
+            label: 'name',
+            value: 'id'
+          },
+          filterTreeNode: function filterTreeNode(v, option) {
+            return filterTreeSelectNode(v, option);
+          }
+        }
+      };
+    case componentType.select:
+      return {
+        type: type,
+        name: Select,
+        props: {
+          showSearch: true,
+          // mode: isBtw ? 'multiple' : 'combobox',
+          filterOption: function filterOption(v, option) {
+            return filterSelectNode(v, option, 'label');
+          },
+          style: {
+            width: '100%',
+            minWidth: '80px'
+          }
+        }
+      };
+    case componentType.component:
+      return {
+        type: type,
+        name: record.components
+      };
+    default:
+      return {};
+  }
 };

package/es/Search/style/index.js

@@ -1,2 +1,4 @@
-import './Search.less';
-import './Item.less';
+import genCompoentStyle from "../../style/styleRegister";
+import { genSearchStyle } from "./search";
+import { genItemStyle } from "./item";
+export default genCompoentStyle([genSearchStyle, genItemStyle]);