@jetlinks-web/components 2.0.2 → 2.0.4-1

package/src/Search/util.ts

@@ -1,263 +0,0 @@
-import { cloneDeep, isArray, isFunction, isString } from 'lodash-es';
-import type { SearchItemData } from './typing';
-import { termType } from './setting';
-import { SearchProps } from './typing';
-
-/**
- * 处理like，nlike特殊值
- * @param v
- */
-export const handleLikeValue = (v: string) => {
-    if (isString(v)) {
-        return v.split('').reduce((pre: string, next: string) => {
-            let _next = next;
-            if (next === '\\') {
-                _next = '\\\\';
-            } else if (next === '%') {
-                _next = '\\%';
-            }
-            return pre + _next;
-        }, '');
-    }
-    return v;
-};
-
-const handleItemValue = (item, columnOptionMap) => {
-    const _item = columnOptionMap.get(item.column);
-
-    if (!_item) return item;
-    if (_item.rename) {
-        item.column = _item.rename;
-    }
-
-    if (_item.handleValue && isFunction(_item.handleValue)) {
-        item.value = _item.handleValue(item.value, item);
-    }
-
-    if (['like', 'nlike'].includes(item.termType) && !!item.value) {
-        item.value = `%${handleLikeValue(item.value)}%`;
-    }
-
-    return item;
-};
-
-const isEmpty = (v) => {
-    return (
-        v === undefined ||
-        v === null ||
-        v === '' ||
-        (isArray(v) && v.length === 0)
-    );
-};
-
-const handleArrayToTerms = (terms: any[], columnOptionMap) => {
-    return terms
-        .map((item) => {
-            if (item.terms) {
-                const filterTerms = item.terms.filter((filterItem) => {
-                    return (
-                        filterItem &&
-                        !isEmpty(filterItem.value) &&
-                        filterItem.termType !== undefined &&
-                        filterItem.column !== undefined
-                    );
-                });
-                item.terms = filterTerms.map((result) =>
-                    handleItemValue(result, columnOptionMap),
-                );
-            }
-            return item;
-        })
-        .filter((item) => item.terms?.length);
-};
-
-/**
- * 处理为外部使用
- * @terms {Array} 表单数据
- * @columnOptionMap {Map} column的Map对象
- */
-export const termsParamsFormat = (
-    terms,
-    columnOptionMap,
-    type: string = 'adv',
-    searchType: string = 'terms',
-) => {
-    // 过滤掉terms中value无效的item
-    const cloneParams = cloneDeep(terms);
-    if (searchType === 'terms') {
-        return type === 'adv'
-            ? { terms: handleArrayToTerms(cloneParams.terms, columnOptionMap) }
-            : cloneParams
-                  .filter(
-                      (item) =>
-                          item &&
-                          !isEmpty(item.value) &&
-                          item.column !== undefined,
-                  )
-                  .map((item) => handleItemValue(item, columnOptionMap));
-    } else if (searchType == 'object') {
-        const result = {};
-        cloneParams
-            .filter(
-                (item) => item && item.value !== undefined && item.value !== '',
-            )
-            .forEach((item) => {
-                Object.assign(result, { [item.column]: item.value });
-            });
-        return result;
-    }
-};
-
-/**
- * TreeSelect过滤
- * @param value 过滤值
- * @param treeNode
- * @param key
- */
-export const filterTreeSelectNode = (
-    value: string,
-    treeNode: any,
-    key: string = 'name',
-): boolean => {
-    return treeNode[key]?.includes(value);
-};
-
-/**
- * Select过滤
- * @param value 过滤值
- * @param option
- * @param key
- */
-export const filterSelectNode = (
-    value: string,
-    option: any,
-    key: string = 'label',
-): boolean => {
-    return option[key]?.includes(value);
-};
-
-export const handleQData = (terms: any): any => {
-    // 排序, null 往后放
-    terms.terms.forEach((a) => {
-        for (let i = 0; i < a.terms.length; i++) {
-            for (let j = 0; j < a.terms.length - i - 1; j++) {
-                if (!a.terms[j] && a.terms[j + 1]) {
-                    const temp = a.terms[j];
-                    a.terms[j] = a.terms[j + 1];
-                    a.terms[j + 1] = temp;
-                }
-            }
-        }
-    });
-
-    return terms;
-};
-
-export const hasExpand = (terms): boolean => {
-    let itemCount = 0;
-    terms.forEach((a) => {
-        a.terms.forEach((b) => {
-            if (b) {
-                itemCount += 1;
-            }
-        });
-    });
-    return itemCount >= 2;
-};
-
-export const compatibleOldTerms = (q: string) => {
-    const _terms = [
-        { terms: [null, null, null] },
-        { terms: [null, null, null], type: 'and' },
-    ];
-
-    try {
-        const terms = JSON.parse(q || '{}');
-        terms.terms?.forEach((a, aIndex) => {
-            a?.terms?.forEach((b, bIndex) => {
-                _terms[aIndex].terms[bIndex] = b;
-            });
-            if (a.type) {
-                _terms[aIndex].type = a.type;
-            }
-        });
-        return { terms: _terms };
-    } catch (e) {
-        return { terms: _terms };
-    }
-};
-
-export const handleParamsToString = (
-    terms: SearchItemData[] = [],
-    type: string = 'and',
-) => {
-    const _terms = [
-        { terms: [null, null, null] },
-        { terms: [null, null, null], type: type },
-    ];
-    let termsIndex = 0;
-    let termsStar = 0;
-    terms.forEach((item, index) => {
-        if (index > 2) {
-            termsIndex = 1;
-            termsStar = 4;
-        }
-        _terms[termsIndex].terms[index - termsStar] = item;
-    });
-
-    return JSON.stringify({ terms: _terms });
-};
-
-export const getTermTypeFn = (type?: SearchProps['type'], column?: string) => {
-    // if (column?.includes('id') && type === 'string') {
-    //     // 默认id为 eq
-    //     return 'eq';
-    // }
-
-    switch (type) {
-        case 'select':
-        case 'treeSelect':
-        case 'number':
-            return 'eq';
-        case 'date':
-        case 'time':
-            return 'gt';
-        case 'timeRange':
-        case 'rangePicker':
-            return 'btw';
-        default:
-            return 'like';
-    }
-};
-
-export const getTermTypes = (types: string[]) => {
-    return termType.filter((item) => types.includes(item.value));
-};
-
-export const getTermOptions = (type?: SearchProps['type'], column?: string) => {
-    let keys: string[] = [];
-    switch (type) {
-        case 'select':
-        case 'treeSelect':
-            keys = ['not', 'eq', 'in', 'nin'];
-            break;
-        case 'time':
-        case 'date':
-            keys = ['gt', 'lt', 'gte', 'lte'];
-            break;
-        case 'timeRange':
-        case 'rangePicker':
-            keys = ['btw', 'nbtw'];
-            break;
-        case 'number':
-            keys = ['eq', 'not', 'gt', 'lt', 'gte', 'lte'];
-            break;
-        default:
-            keys = ['like', 'nlike'];
-            // column?.includes('id') && type === 'string'
-            //     ? ['eq']
-            //     : ['like', 'nlike'];
-            break;
-    }
-    return keys.length ? getTermTypes(keys) : termType;
-};

package/src/ValueItem/ValueItem.vue

@@ -1,192 +0,0 @@
-<!-- 参数类型输入组件 -->
-<template>
-  <div class="value-item-warp">
-    <Select
-      v-if="typeMap.get(itemType) === 'select'"
-      v-model:value="myValue"
-      allowClear
-      v-bind="props"
-      @change="(_, options) => onChange(options)"
-    />
-    <DatePicker
-      v-else-if="typeMap.get(itemType) === 'date'"
-      v-model:value="myValue"
-      :valueFormat="valueFormat || 'YYYY-MM-DD HH:mm:ss'"
-      allowClear
-      showTime
-      v-bind="props"
-      @change="onChange"
-    />
-    <TimePicker
-      v-else-if="typeMap.get(itemType) === 'time'"
-      v-model:value="myValue"
-      :valueFormat="valueFormat || 'HH:mm:ss'"
-      allowClear
-      v-bind="props"
-      @change="onChange"
-    />
-    <InputNumber
-      v-else-if="typeMap.get(itemType) === 'inputNumber'"
-      v-model:value="myValue"
-      allowClear
-      v-bind="props"
-      @change="onChange"
-    />
-    <Input
-      v-else-if="typeMap.get(itemType) === 'object'"
-      v-model:value="myValue"
-      allowClear
-      v-bind="props"
-      @change="onChange"
-    >
-      <template #addonAfter>
-        <AIcon type="FormOutlined" @click="modalVisible = true" />
-      </template>
-    </Input>
-    <Input
-      v-else-if="typeMap.get(itemType) === 'file'"
-      v-model:value="myValue"
-      allowClear
-      placeholder="请输入链接"
-      v-bind="props"
-      @change="onChange"
-    >
-      <template #addonAfter>
-        <Upload
-          :action="action"
-          :headers="headers"
-          :showUploadList="false"
-          name="file"
-          @change="handleFileChange"
-        >
-          <AIcon type="UploadOutlined" />
-        </Upload>
-      </template>
-    </Input>
-    <InputPassword
-      v-else-if="typeMap.get(itemType) === 'password'"
-      v-model:value="myValue"
-      allowClear
-      type="password"
-      v-bind="props"
-      @change="onChange"
-    />
-    <Input
-      v-else
-      v-model:value="myValue"
-      allowClear
-      type="text"
-      v-bind="props"
-      @change="onChange"
-    />
-
-    <!-- 代码编辑器弹窗 -->
-    <Modal
-      v-model:visible="modalVisible"
-      :zIndex="1100"
-      cancel-text="取消"
-      ok-text="确认"
-      title="编辑"
-      width="700px"
-      @cancel="modalVisible = false"
-      @ok="handleItemModalSubmit"
-    >
-      <div style="width: 100%; height: 300px">
-        <MonacoEditor v-model:modelValue="objectValue" />
-      </div>
-    </Modal>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { CSSProperties, PropType, ref, watch } from 'vue'
-import { componentsType } from './util'
-import { MonacoEditor } from '../../'
-import {
-  Select,
-  DatePicker,
-  TimePicker,
-  Input,
-  InputNumber,
-  InputPassword,
-  Upload,
-  Modal,
-} from 'ant-design-vue'
-
-type Emits = {
-  (e: 'update:modelValue', data: string | number | boolean): void
-  (e: 'change', data: any, item?: any): void
-}
-
-interface ItemProps {
-  style?: CSSProperties
-  class?: string
-}
-
-const emit = defineEmits<Emits>()
-
-const props = defineProps({
-  // 组件双向绑定的值
-  modelValue: {
-    type: [Number, String],
-    default: '',
-  },
-  // 组件类型
-  itemType: {
-    type: String,
-    default: () => 'string',
-  },
-  // 多选框
-  mode: {
-    type: String as PropType<'multiple' | 'tags' | 'combobox' | ''>,
-    default: '',
-  },
-  placeholder: String,
-  options: Array, // 下拉选择框下拉数据
-  style: Object as PropType<ItemProps['style']>,
-  class: String,
-  valueFormat: String,
-  action: [String, Promise],
-  headers: Object,
-})
-
-const typeMap = new Map(Object.entries(componentsType))
-
-const myValue = ref<any>(undefined)
-const modalVisible = ref<boolean>(false)
-const objectValue = ref<string>('')
-
-const handleItemModalSubmit = () => {
-  myValue.value = objectValue.value.replace(/[\r\n]\s*/g, '')
-  modalVisible.value = false
-  emit('update:modelValue', objectValue.value)
-  emit('change', objectValue.value)
-}
-
-const onChange = (e) => {
-  emit('update:modelValue', myValue.value)
-  emit('change', e)
-}
-
-const handleFileChange = (info: any) => {
-  if (info.file.status === 'done') {
-    const url = info.file.response?.result
-    myValue.value = url
-    emit('update:modelValue', url)
-    emit('change', url)
-  }
-}
-
-watch(
-  () => props.modelValue,
-  () => {
-    myValue.value = props.modelValue
-    if (props.itemType === 'object') {
-      objectValue.value = props.modelValue as string
-    }
-  },
-  { immediate: true },
-)
-</script>
-
-<style lang="less" scoped></style>

package/src/ValueItem/index.ts

@@ -1,3 +0,0 @@
-import ValueItem from './ValueItem.vue'
-
-export default ValueItem

package/src/ValueItem/util.ts

@@ -1,16 +0,0 @@
-export const componentsType = {
-    int: 'inputNumber',
-    long: 'inputNumber',
-    float: 'inputNumber',
-    double: 'inputNumber',
-    string: 'input',
-    array: 'input',
-    password: 'password',
-    enum: 'select',
-    boolean: 'select',
-    date: 'date',
-    time: 'time',
-    object: 'object',
-    geoPoint: 'geoPoint',
-    file: 'file',
-}

package/src/style/index.ts

@@ -1,3 +0,0 @@
-import '../ProLayout/style'
-import '../ProTable/style'
-import '../ProLayout/style'