@meethive/components 0.0.2 → 0.0.4

package/lib/Search/Item.js

@@ -1,239 +1,211 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, computed, ref, reactive, watch, isRef } from 'vue'
-import { Select } from 'ant-design-vue'
-import { componentProps, componentType, typeOptions } from './setting'
-import { getTermOptions, getItemDefaultValue } from './util'
-import { useLocaleReceiver } from '../LocaleReciver'
-import { useColumnsMap, useDefaultValue, useOptionMap } from './hooks'
-import { isArray, isFunction } from 'lodash-es'
-import useSearchStyle from './style'
-
-export default defineComponent({
-  name: 'JSearchItem',
-  components: { Select },
-  props: {
-    column: {
-      type: String
-    },
-    value: {
-      type: String
-    },
-    termType: {
-      type: String,
-      default: 'like'
-    },
-    type: {
-      type: String,
-      default: 'or'
-    },
-    expand: {
-      type: Boolean,
-      default: false
-    },
-    onlyValue: {
-      type: Boolean,
-      default: true
-    },
-    labelWidth: {
-      type: Number,
-      default: 40
-    },
-    index: {
-      type: Number,
-      default: 1
-    }
-  },
-  emits: ['update:value', 'update:termType', 'update:type', 'update:column'],
-  setup(props, { emit }) {
-    const termsModel = reactive({
-      type: props.type || 'or',
-      value: props.value || '',
-      termType: props.termType || 'like',
-      column: props.column || undefined
-    })
-
-    const [contextLocale] = useLocaleReceiver('Search')
-    const optionsMap = useOptionMap()
-    const columnsMap = useColumnsMap()
-    const columnsValues = useDefaultValue()
-
-    const targetComponents = ref({})
-    const valueOptions = ref()
-
-    const btwKeys = computed(() => {
-      const record = findItemByColumn()
-      if (record.search.isBtw && Array.isArray(record.search.isBtw)) {
-        return [...record.search.isBtw, 'in', 'nin']
-      }
-      return ['in', 'nin']
-    })
-
-    const prefixCls = computed(() => 'JSearch')
-    const [wrapSSR, hashId] = useSearchStyle(prefixCls)
-
-    const termTypeOptions = computed(() => {
-      const columnTarget = findItemByColumn()
-      const columnSearch = _optionalChain([columnTarget, 'optionalAccess', _ => _.search])
-      let _termsOptions = getTermOptions(targetComponents.value.type, contextLocale.value)
-
-      if (_optionalChain([columnSearch, 'optionalAccess', _2 => _2.termOptions])) {
-        _termsOptions = columnSearch.termOptions
-      } else if (_optionalChain([columnSearch, 'optionalAccess', _3 => _3.termFilter, 'optionalAccess', _4 => _4.length])) {
-        _termsOptions = _termsOptions.filter(
-          (item) => !_optionalChain([columnSearch, 'access', _5 => _5.termFilter, 'optionalAccess', _6 => _6.includes, 'call', _7 => _7(item.value)])
-        )
-      }
-
-      return _termsOptions
-    })
-
-    const columnOptions = computed(() => {
-      return Object.values(columnsMap.value)
-        .sort((a, b) => a._sort_index - b._sort_index)
-        .map((item) => ({ label: item.title, value: item.dataIndex }))
-    })
-
-    const findItemByColumn = () => {
-      return columnsMap.value[termsModel.column ]
-    }
-
-    const findOptionsByColumn = () => {
-      return optionsMap.value[termsModel.column ]
-    }
-
+import { defineComponent, computed, ref, reactive, watch, isRef } from 'vue';
+import { Select } from 'ant-design-vue';
+import { componentProps, componentType, typeOptions } from './setting';
+import { getTermOptions, getItemDefaultValue } from './util';
+import { useLocaleReceiver } from '../LocaleReciver';
+import { useColumnsMap, useDefaultValue, useOptionMap } from './hooks';
+import { isArray, isFunction } from 'lodash-es';
+import useSearchStyle from './style';
+export default defineComponent({
+  name: 'JSearchItem',
+  components: {
+    Select
+  },
+  props: {
+    column: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    termType: {
+      type: String,
+      default: 'like'
+    },
+    type: {
+      type: String,
+      default: 'or'
+    },
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    onlyValue: {
+      type: Boolean,
+      default: true
+    },
+    labelWidth: {
+      type: Number,
+      default: 40
+    },
+    index: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ['update:value', 'update:termType', 'update:type', 'update:column'],
+  setup(props, {
+    emit
+  }) {
+    const termsModel = reactive({
+      type: props.type || 'or',
+      value: props.value || '',
+      termType: props.termType || 'like',
+      column: props.column || undefined
+    });
+    const [contextLocale] = useLocaleReceiver('Search');
+    const optionsMap = useOptionMap();
+    const columnsMap = useColumnsMap();
+    const columnsValues = useDefaultValue();
+    const targetComponents = ref({});
+    const valueOptions = ref();
+    const btwKeys = computed(() => {
+      const record = findItemByColumn();
+      if (record.search.isBtw && Array.isArray(record.search.isBtw)) {
+        return [...record.search.isBtw, 'in', 'nin'];
+      }
+      return ['in', 'nin'];
+    });
+    const prefixCls = computed(() => 'JSearch');
+    const [wrapSSR, hashId] = useSearchStyle(prefixCls);
+    const termTypeOptions = computed(() => {
+      const columnTarget = findItemByColumn();
+      const columnSearch = columnTarget?.search;
+      let _termsOptions = getTermOptions(targetComponents.value.type, contextLocale.value);
+      if (columnSearch?.termOptions) {
+        _termsOptions = columnSearch.termOptions;
+      } else if (columnSearch?.termFilter?.length) {
+        _termsOptions = _termsOptions.filter(item => !columnSearch.termFilter?.includes(item.value));
+      }
+      return _termsOptions;
+    });
+    const columnOptions = computed(() => {
+      return Object.values(columnsMap.value).sort((a, b) => a._sort_index - b._sort_index).map(item => ({
+        label: item.title,
+        value: item.dataIndex
+      }));
+    });
+    const findItemByColumn = () => {
+      return columnsMap.value[termsModel.column];
+    };
+    const findOptionsByColumn = () => {
+      return optionsMap.value[termsModel.column];
+    };
+
     /**
      * 处理options
      * @param _options
-     */
-    const handleColumnsOptions = async (_options) => {
-      if (isFunction(_options)) {
-        valueOptions.value = await _options()
-        optionsMap.value[props.column ] = [...valueOptions.value]
-      } else if (isArray(_options)) {
-        valueOptions.value = _options
-      } else if (isRef(_options) || (typeof _options === 'object' && 'value' in _options)) {
-        valueOptions.value = _options.value
-      }
-    }
-
-    const onTypeChange = () => {
-      emit('update:type', termsModel.type)
-    }
-
-    const onColumnChange = () => {
-      const record = findItemByColumn()
-      const defaultValue = getItemDefaultValue(record, columnsValues.value)
-
-      // 处理默认选项
-      termsModel.termType = defaultValue.termType
-      // 处理默认值
-      termsModel.value = defaultValue.value
-
-      emit('update:column', termsModel.column)
-      onTermTypeChange()
-      onValueChange()
-    }
-
-    const onTermTypeChange = () => {
-      const isBtw = btwKeys.value.includes(termsModel.termType)
-
-      if (!isBtw && termsModel.value && Array.isArray(termsModel.value)) {
-        termsModel.value = termsModel.value[0]
-        onValueChange()
-      } else if (isBtw && termsModel.value && !Array.isArray(termsModel.value)) {
-        termsModel.value = [termsModel.value]
-        onValueChange()
-      }
-
-      emit('update:termType', termsModel.termType)
-    }
-
-    const onValueChange = () => {
-      emit('update:value', termsModel.value)
-    }
-
-    const handleTermsModelValue = (isBtw) => {
-      if (isBtw) {
-        if (termsModel.value && !Array.isArray(termsModel.value)) {
-          termsModel.value = [termsModel.value]
-        } else if (!termsModel.value) {
-          termsModel.value = []
-        }
-      } else {
-        if (termsModel.value && Array.isArray(termsModel.value)) {
-          termsModel.value = termsModel.value[0]
-        } else if (!termsModel.value) {
-          termsModel.value = undefined 
-        }
-      }
-    }
-
-    watch(
-      () => [targetComponents.value.name, termsModel.termType],
-      () => {
-        const isBtw = btwKeys.value.includes(termsModel.termType)
-
-        if (targetComponents.value.type === componentType.treeSelect) {
-          targetComponents.value.props = {
-            ...targetComponents.value.props,
-            multiple: isBtw
-          }
-          handleTermsModelValue(isBtw)
-        } else if (targetComponents.value.type === componentType.select) {
-          targetComponents.value.props = {
-            ...targetComponents.value.props,
-            mode: isBtw ? 'multiple' : 'combobox'
-          }
-          handleTermsModelValue(isBtw)
-        }
-      },
-      { immediate: true, deep: true }
-    )
-
-    watch(
-      () => [termsModel.column, columnsMap.value],
-      async () => {
-        // 根据column从map中获取record，再解析search属性
-        const record = findItemByColumn()
-        if (!record) return
-
-        const options = findOptionsByColumn()
-        targetComponents.value = componentProps(record.search)
-        targetComponents.value.label = record.title
-
-        //  处理options
-        if (options) {
-          valueOptions.value = options
-        } else {
-          await handleColumnsOptions(record.search.options)
-        }
-      },
-      { immediate: true, deep: true }
-    )
-
-    watch(
-      () => [props.value, props.termType, props.column, props.type],
-      () => {
-        termsModel.value = props.value 
-        termsModel.termType = props.termType
-        termsModel.column = props.column
-        termsModel.type = props.type
-      }
-    )
-
-    return {
-      termsModel,
-      contextLocale,
-      targetComponents,
-      valueOptions,
-      hashId,
-      termTypeOptions,
-      columnOptions,
-      typeOptions,
-      onTypeChange,
-      onColumnChange,
-      onTermTypeChange,
-      onValueChange
-    }
-  }
-})
+     */
+    const handleColumnsOptions = async _options => {
+      if (isFunction(_options)) {
+        valueOptions.value = await _options();
+        optionsMap.value[props.column] = [...valueOptions.value];
+      } else if (isArray(_options)) {
+        valueOptions.value = _options;
+      } else if (isRef(_options) || typeof _options === 'object' && 'value' in _options) {
+        valueOptions.value = _options.value;
+      }
+    };
+    const onTypeChange = () => {
+      emit('update:type', termsModel.type);
+    };
+    const onColumnChange = () => {
+      const record = findItemByColumn();
+      const defaultValue = getItemDefaultValue(record, columnsValues.value);
+
+      // 处理默认选项
+      termsModel.termType = defaultValue.termType;
+      // 处理默认值
+      termsModel.value = defaultValue.value;
+      emit('update:column', termsModel.column);
+      onTermTypeChange();
+      onValueChange();
+    };
+    const onTermTypeChange = () => {
+      const isBtw = btwKeys.value.includes(termsModel.termType);
+      if (!isBtw && termsModel.value && Array.isArray(termsModel.value)) {
+        termsModel.value = termsModel.value[0];
+        onValueChange();
+      } else if (isBtw && termsModel.value && !Array.isArray(termsModel.value)) {
+        termsModel.value = [termsModel.value];
+        onValueChange();
+      }
+      emit('update:termType', termsModel.termType);
+    };
+    const onValueChange = () => {
+      emit('update:value', termsModel.value);
+    };
+    const handleTermsModelValue = isBtw => {
+      if (isBtw) {
+        if (termsModel.value && !Array.isArray(termsModel.value)) {
+          termsModel.value = [termsModel.value];
+        } else if (!termsModel.value) {
+          termsModel.value = [];
+        }
+      } else {
+        if (termsModel.value && Array.isArray(termsModel.value)) {
+          termsModel.value = termsModel.value[0];
+        } else if (!termsModel.value) {
+          termsModel.value = undefined;
+        }
+      }
+    };
+    watch(() => [targetComponents.value.name, termsModel.termType], () => {
+      const isBtw = btwKeys.value.includes(termsModel.termType);
+      if (targetComponents.value.type === componentType.treeSelect) {
+        targetComponents.value.props = {
+          ...targetComponents.value.props,
+          multiple: isBtw
+        };
+        handleTermsModelValue(isBtw);
+      } else if (targetComponents.value.type === componentType.select) {
+        targetComponents.value.props = {
+          ...targetComponents.value.props,
+          mode: isBtw ? 'multiple' : 'combobox'
+        };
+        handleTermsModelValue(isBtw);
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    watch(() => [termsModel.column, columnsMap.value], async () => {
+      // 根据column从map中获取record，再解析search属性
+      const record = findItemByColumn();
+      if (!record) return;
+      const options = findOptionsByColumn();
+      targetComponents.value = componentProps(record.search);
+      targetComponents.value.label = record.title;
+
+      //  处理options
+      if (options) {
+        valueOptions.value = options;
+      } else {
+        await handleColumnsOptions(record.search.options);
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    watch(() => [props.value, props.termType, props.column, props.type], () => {
+      termsModel.value = props.value;
+      termsModel.termType = props.termType;
+      termsModel.column = props.column;
+      termsModel.type = props.type;
+    });
+    return {
+      termsModel,
+      contextLocale,
+      targetComponents,
+      valueOptions,
+      hashId,
+      termTypeOptions,
+      columnOptions,
+      typeOptions,
+      onTypeChange,
+      onColumnChange,
+      onTermTypeChange,
+      onValueChange
+    };
+  }
+});

package/lib/Search/Search.js

@@ -1,90 +1,90 @@
-
-import { defineComponent, 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'
-
-export default defineComponent({
-  name: 'JSearch',
-  components: {
-    Button,
-    Col,
-    Form,
-    FormItemRest,
-    Row,
-    Item
-  },
-  inheritAttrs: false,
-  props: {
-    ...searchProps()
-  } ,
-  emits: ['search'],
-  setup(props, { emit, expose }) {
-    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') {
-        return { paddingLeft: `${props.labelWidth + 8}px` }
-      }
-      return {}
-    })
-
-    const searchSubmit = () => {
-      emit('search', termsParamsFormat(terms, columnsMap.value, 'low', props.type))
-    }
-
-    const reset = () => {
-      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))
-    }
-
-    expose({
-      setValues: handleDefaultValues,
-      reset
-    })
-
-    return {
-      contextLocale,
-      attrs,
-      terms,
-      hashId,
-      footerStyles,
-      searchSubmit,
-      reset
-    }
-  }
-})
+import { defineComponent, 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';
+export default defineComponent({
+  name: 'JSearch',
+  components: {
+    Button,
+    Col,
+    Form,
+    FormItemRest,
+    Row,
+    Item
+  },
+  inheritAttrs: false,
+  props: {
+    ...searchProps()
+  },
+  emits: ['search'],
+  setup(props, {
+    emit,
+    expose
+  }) {
+    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') {
+        return {
+          paddingLeft: `${props.labelWidth + 8}px`
+        };
+      }
+      return {};
+    });
+    const searchSubmit = () => {
+      emit('search', termsParamsFormat(terms, columnsMap.value, 'low', props.type));
+    };
+    const reset = () => {
+      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));
+    };
+    expose({
+      setValues: handleDefaultValues,
+      reset
+    });
+    return {
+      contextLocale,
+      attrs,
+      terms,
+      hashId,
+      footerStyles,
+      searchSubmit,
+      reset
+    };
+  }
+});