@jetlinks-web/components 2.0.2 → 2.0.3

package/es/Search/Search.js

@@ -0,0 +1,249 @@
+/* Analyzed bindings: {
+  "columns": "props",
+  "type": "props",
+  "column": "props",
+  "style": "props",
+  "class": "props",
+  "labelWidth": "props",
+  "resetText": "props",
+  "submitText": "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",
+  "termsParamsFormat": "setup-maybe-ref",
+  "SearchItem": "setup-const",
+  "optionsMapKey": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "columnOptionMap": "setup-ref",
+  "emit": "setup-const",
+  "terms": "setup-reactive-const",
+  "searchItems": "setup-ref",
+  "itemValueChange": "setup-const",
+  "handleItems": "setup-const",
+  "searchSubmit": "setup-const",
+  "resetNumber": "setup-ref",
+  "reset": "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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = n => (_pushScopeId("data-v-1712546547883"), n = n(), _popScopeId(), n);
+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 } from 'vue';
+import { termsParamsFormat } from './util';
+import SearchItem from './Item.js';
+import { optionsMapKey } from './setting';
+const __sfc_main__ = _defineComponent({
+    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,
+            default: '重置',
+        },
+        submitText: {
+            type: String,
+            default: '搜索',
+        },
+    },
+    emits: ["search"],
+    setup(__props, { emit: __emit }) {
+        const props = __props;
+        const columnOptionMap = ref(new Map());
+        const emit = __emit;
+        // 当前查询条件
+        const terms = reactive({ terms: [] });
+        const searchItems = ref([]); // 当前查询条件列表
+        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));
+        };
+        /**
+         * 重置查询
+         */
+        const resetNumber = ref(1);
+        const reset = () => {
+            resetNumber.value += 1;
+            handleItems(true);
+            if (props.type == 'object') {
+                emit('search', {});
+            }
+            else if (props.type == 'terms') {
+                emit('search', []);
+            }
+        };
+        handleItems();
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createBlock(_unref(Form), {
+                model: terms,
+                onFinish: searchSubmit
+            }, {
+                default: _withCtx(() => [
+                    _createElementVNode("div", {
+                        class: _normalizeClass(['JSearch-warp', props.class]),
+                        style: _normalizeStyle(__props.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) => {
+                                            return (_openBlock(), _createBlock(_unref(Col), {
+                                                key: index + '_' + item.column,
+                                                span: item.span || 24 / __props.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"])
+                                                ]),
+                                                _: 2 /* DYNAMIC */
+                                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["span"]));
+                                        }), 128 /* KEYED_FRAGMENT */)),
+                                        _createVNode(_unref(Col), {
+                                            span: 24 / __props.column
+                                        }, {
+                                            default: _withCtx(() => [
+                                                _renderSlot(_ctx.$slots, "footerRender", {
+                                                    reset: reset,
+                                                    submit: searchSubmit
+                                                }, () => [
+                                                    _createElementVNode("div", {
+                                                        class: "JSearch-footer--btns",
+                                                        style: _normalizeStyle({
+                                                            paddingLeft: `${__props.labelWidth + 8}px`,
+                                                        })
+                                                    }, [
+                                                        _createVNode(_unref(Button), {
+                                                            type: "stroke",
+                                                            onClick: reset
+                                                        }, {
+                                                            default: _withCtx(() => [
+                                                                _createTextVNode(_toDisplayString(__props.resetText), 1 /* TEXT */)
+                                                            ]),
+                                                            _: 1 /* STABLE */
+                                                        }),
+                                                        _createVNode(_unref(FormItemRest), null, {
+                                                            default: _withCtx(() => [
+                                                                _createVNode(_unref(Button), {
+                                                                    "html-type": "submit",
+                                                                    type: "primary"
+                                                                }, {
+                                                                    default: _withCtx(() => [
+                                                                        _createTextVNode(_toDisplayString(__props.submitText), 1 /* TEXT */)
+                                                                    ]),
+                                                                    _: 1 /* STABLE */
+                                                                })
+                                                            ]),
+                                                            _: 1 /* STABLE */
+                                                        })
+                                                    ], 4 /* STYLE */)
+                                                ])
+                                            ]),
+                                            _: 3 /* FORWARDED */
+                                        }, 8 /* PROPS */, ["span"])
+                                    ]),
+                                    _: 3 /* FORWARDED */
+                                })
+                            ])
+                        ])
+                    ], 6 /* CLASS, STYLE */)
+                ]),
+                _: 3 /* FORWARDED */
+            }, 8 /* PROPS */, ["model"]));
+        };
+    }
+});
+export default __sfc_main__;

package/es/Search/hooks/index.js

@@ -0,0 +1 @@
+export * from './useSearchItems';

package/es/Search/hooks/useSearchItems.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { ref } from 'vue';
+import { sortBy } from 'lodash-es';
+var hasDefaultValue = function hasDefaultValue(item) {
+  return item.defaultValue !== undefined || item.defaultTermType || item.defaultOnceValue;
+};
+export var useSearchItems = function useSearchItems(columns, options) {
+  var items = ref([]);
+  var optionsMap = ref(new Map());
+  var handleColumns = function handleColumns() {
+    var _items = [];
+    var values = [];
+    columns.forEach(function (item, index) {
+      var search = item.search;
+      if (search && Object.keys(search).length) {
+        optionsMap.value.set(item.dataIndex, search);
+        if (hasDefaultValue(search)) {
+          var _value = search.defaultValue || search.defaultOnceValue;
+          values.push({
+            type: 'and',
+            value: _value,
+            termType: search.defaultTermType || 'like',
+            column: item.dataIndex
+          });
+        }
+        _items.push(_objectSpread(_objectSpread({}, item.search), {}, {
+          sortIndex: item.search.first ? 0 : index + 1,
+          column: item.dataIndex
+        }));
+      }
+    });
+    items.value = sortBy(_items, 'sortIndex');
+    options === null || options === void 0 ? void 0 : options.getDefaultValue(values);
+  };
+  handleColumns();
+  return {
+    searchItems: items,
+    searchOptionsMap: optionsMap
+  };
+};

package/es/Search/index.js

@@ -0,0 +1,4 @@
+import AdvancedSearch from './Advanced/index.js';
+import Search from './Search.js';
+export { AdvancedSearch };
+export default Search;

package/es/Search/setting.js

@@ -0,0 +1,91 @@
+import 'vue';
+import './typing';
+export var optionsMapKey = Symbol('searchOptionsMap');
+export var basicSearch = {
+  columns: {
+    type: Array,
+    default: function _default() {
+      return [];
+    },
+    required: true
+  },
+  type: {
+    type: String,
+    default: 'advanced'
+  }
+};
+export var typeOptions = [{
+  label: '或者',
+  value: 'or'
+}, {
+  label: '并且',
+  value: 'and'
+}];
+export var TermTypeMap = {
+  EQ: {
+    label: '=',
+    value: 'eq'
+  },
+  NOT: {
+    label: '!=',
+    value: 'not'
+  },
+  LIKE: {
+    label: '包含',
+    value: 'like'
+  },
+  NLIKE: {
+    label: '不包含',
+    value: 'nlike'
+  },
+  GT: {
+    label: '>',
+    value: 'gt'
+  },
+  GTE: {
+    label: '>=',
+    value: 'gte'
+  },
+  LT: {
+    label: '<',
+    value: 'lt'
+  },
+  LTE: {
+    label: '<=',
+    value: 'lte'
+  },
+  IN: {
+    label: '在...之中',
+    value: 'in'
+  },
+  NIN: {
+    label: '不在...之中',
+    value: 'nin'
+  },
+  BTW: {
+    label: '在...之间',
+    value: 'btw'
+  },
+  NBTW: {
+    label: '不在...之间',
+    value: 'nbtw'
+  }
+};
+export var termType = Object.values(TermTypeMap);
+export var componentType = {
+  input: 'input',
+  inputNumber: 'inputNumber',
+  password: 'password',
+  switch: 'switch',
+  radio: 'radio',
+  checkbox: 'checkbox',
+  time: 'time',
+  date: 'date',
+  timeRange: 'timeRange',
+  rangePicker: 'rangePicker',
+  treeSelect: 'treeSelect',
+  upload: 'upload',
+  tree: 'tree',
+  select: 'select',
+  component: 'component'
+};

package/es/Search/style/Item.less

@@ -0,0 +1,33 @@
+.JSearch-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    .JSearch-item--type {
+        width: 90px;
+        min-width: 0;
+        > span {
+            line-height: 34px;
+            font-weight: bold;
+        }
+    }
+
+    .JSearch-item--column {
+        width: 130px;
+        min-width: 0;
+    }
+
+    .JSearch-item--termType {
+        width: 110px;
+        min-width: 0;
+    }
+    .JSearch-item--label {
+        min-width: 40px;
+    }
+
+    .JSearch-item--value {
+        display: flex;
+        width: 0;
+        flex-grow: 1;
+    }
+}

package/es/Search/style/Search.less

@@ -0,0 +1,179 @@
+@import '../../style/variable.less';
+.JSearch-warp {
+    padding: 24px;
+    background-color: #fff;
+    margin-bottom: 24px;
+
+    .pack-up {
+        .JSearch-items {
+            flex: 1 1 auto;
+
+            .left {
+                min-width: 380px;
+                max-width: 580px;
+            }
+        }
+    }
+
+    &.senior {
+        > .JSearch-content {
+            display: flex;
+            .JSearch-footer {
+                display: flex;
+                gap: 64px;
+                position: relative;
+
+                .more-btn {
+                    .more-text {
+                        padding-right: 24px;
+                    }
+                    .more-icon {
+                        transition: transform 0.3s;
+                        transform: rotateZ(90deg);
+                        font-size: 14px;
+
+                        &.more-up {
+                            transform: rotateZ(-90deg);
+                        }
+                    }
+                }
+
+                &.expand {
+                    margin-top: 16px;
+                    width: 100%;
+                    justify-content: space-between;
+                }
+
+                .JSearch-footer--btns {
+                    display: flex;
+                    gap: 12px;
+                }
+            }
+
+            .items-expand {
+                display: flex;
+                gap: 16px;
+
+                .left,
+                & .right {
+                    min-width: 0;
+                    flex: 1 1 0;
+                }
+
+                .left-items,
+                & .right-items {
+                    display: flex;
+                    gap: 16px;
+                    flex-direction: column;
+                }
+
+                .center {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                }
+
+                &.vertical {
+                    flex-direction: column;
+                    .center {
+                        flex-direction: row;
+                        justify-content: center;
+                    }
+                }
+            }
+
+            &.senior-expand {
+                flex-direction: column;
+            }
+
+            &.small {
+                gap: 12px;
+                .JSearch-footer {
+                    gap: 4px;
+                }
+            }
+        }
+    }
+
+    .JSearch-content {
+        &.simple {
+            .JSearch-footer--btns {
+                display: flex;
+                gap: 12px;
+            }
+
+            .JSearch-item {
+                gap: 8px;
+
+                .JSearch-item--label {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    .no-radius {
+        border-radius: 0;
+        border-color: #f1f1f1;
+    }
+
+    .search-history-warp {
+        position: relative;
+
+        .search-history-button {
+            padding-right: 32px;
+        }
+
+        .search-history-button-icon {
+            position: absolute;
+            width: 24px;
+            height: 18px;
+            right: 6px;
+            top: 8px;
+            color: #fff;
+            line-height: 18px;
+            text-align: center;
+            font-weight: bold;
+            > span {
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+.search-history-empty {
+    padding: 12px 12px 6px 12px;
+    background-color: #fff;
+}
+
+.search-history-items {
+    width: 120px;
+    max-height: 300px;
+    overflow-y: auto;
+    .search-history-item {
+        display: flex;
+        padding: 4px 0px 4px 4px;
+        align-items: center;
+        gap: 4px;
+
+        &:hover {
+            background-color: #f1f1f1;
+        }
+
+        .history-item--title {
+            width: calc(100% - 30px);
+            cursor: pointer;
+        }
+
+        .delete {
+            padding: 0 6px;
+            flex: 0 0 28px;
+        }
+    }
+}
+
+.search-history-list-pop {
+    .ant-popover-inner-content {
+        padding: 0;
+    }
+}

package/es/Search/style/index.js

@@ -0,0 +1,2 @@
+import './Search.less';
+import './Item.less';

package/es/Search/typing.js

@@ -0,0 +1 @@
+export {};