@jetlinks-web/components 1.0.4 → 2.0.0

package/src/Search/util.ts

@@ -0,0 +1,263 @@
+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,102 +1,117 @@
 <!-- 参数类型输入组件 -->
 <template>
   <div class="value-item-warp">
-    <j-select
+    <Select
       v-if="typeMap.get(itemType) === 'select'"
       v-model:value="myValue"
       allowClear
-      @change="(_, options) => onChange(options)"
       v-bind="props"
+      @change="(_, options) => onChange(options)"
     />
-    <j-date-picker
+    <DatePicker
       v-else-if="typeMap.get(itemType) === 'date'"
-      :valueFormat="valueFormat || 'YYYY-MM-DD HH:mm:ss'"
       v-model:value="myValue"
+      :valueFormat="valueFormat || 'YYYY-MM-DD HH:mm:ss'"
       allowClear
       showTime
+      v-bind="props"
       @change="onChange"
     />
-    <j-input-number
-      v-else-if="typeMap.get(itemType) === 'inputNumber'"
-      v-bind="props"
+    <TimePicker
+      v-else-if="typeMap.get(itemType) === 'time'"
       v-model:value="myValue"
+      :valueFormat="valueFormat || 'HH:mm:ss'"
       allowClear
+      v-bind="props"
       @change="onChange"
     />
-    <j-input
+    <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>
-    </j-input>
-    <GeoComponent
-      v-else-if="typeMap.get(itemType) === 'geoPoint'"
-      v-model:point="myValue"
-      @change="onChange"
-      v-bind="props"
-    />
-    <j-input
+    </Input>
+    <Input
       v-else-if="typeMap.get(itemType) === 'file'"
       v-model:value="myValue"
-      placeholder="请输入链接"
       allowClear
+      placeholder="请输入链接"
+      v-bind="props"
       @change="onChange"
     >
       <template #addonAfter>
-        <j-upload
-          name="file"
+        <Upload
           :action="action"
           :headers="headers"
           :showUploadList="false"
+          name="file"
           @change="handleFileChange"
         >
           <AIcon type="UploadOutlined" />
-        </j-upload>
+        </Upload>
       </template>
-    </j-input>
-    <j-input-password
+    </Input>
+    <InputPassword
       v-else-if="typeMap.get(itemType) === 'password'"
+      v-model:value="myValue"
       allowClear
-      v-bind="props"
       type="password"
-      v-model:value="myValue"
+      v-bind="props"
       @change="onChange"
     />
-    <j-input
+    <Input
       v-else
+      v-model:value="myValue"
       allowClear
-      v-bind="props"
       type="text"
-      v-model:value="myValue"
+      v-bind="props"
       @change="onChange"
     />
 
     <!-- 代码编辑器弹窗 -->
-    <j-modal
-      title="编辑"
-      ok-text="确认"
-      cancel-text="取消"
+    <Modal
       v-model:visible="modalVisible"
+      :zIndex="1100"
+      cancel-text="取消"
+      ok-text="确认"
+      title="编辑"
       width="700px"
       @cancel="modalVisible = false"
       @ok="handleItemModalSubmit"
-      :zIndex="1100"
     >
       <div style="width: 100%; height: 300px">
-        <JMonacoEditor v-model:modelValue="objectValue" />
+        <MonacoEditor v-model:modelValue="objectValue" />
       </div>
-    </j-modal>
+    </Modal>
   </div>
 </template>
 
-<script setup lang="ts">
+<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

package/src/ValueItem/util.ts

@@ -9,7 +9,8 @@ export const componentsType = {
     enum: 'select',
     boolean: 'select',
     date: 'date',
+    time: 'time',
     object: 'object',
     geoPoint: 'geoPoint',
     file: 'file',
-}
+}

package/src/style/index.ts

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

package/src/style/variable.less

@@ -0,0 +1,4 @@
+@import 'ant-design-vue/lib/style/themes/index.less';
+
+@text-color-title: #000;
+@text-color-subtitle: #263237;

package/src/GeoComponent/GeoComponent.vue

@@ -1,139 +0,0 @@
-<!-- 坐标点拾取组件 -->
-<template>
-  <div class="page-container">
-    <j-input allowClear v-bind="props" v-model:value="inputPoint">
-      <template #addonAfter>
-        <AIcon type="EnvironmentOutlined" @click="modalVisible = true" />
-      </template>
-    </j-input>
-    <j-modal
-      title="地理位置"
-      ok-text="确认"
-      cancel-text="取消"
-      v-model:visible="modalVisible"
-      width="700px"
-      @cancel="modalVisible = false"
-      @ok="handleModalSubmit"
-      destroyOnClose
-    >
-      <div style="width: 100%; height: 400px">
-        <div style="margin-bottom: 10px;">地理位置：{{ mapPoint }}</div>
-        <el-amap
-          :center="_center"
-          :zoom="_zoom"
-          @init="initMap"
-          @click="clickMap"
-        >
-          <el-amap-search-box visible @select="selectPosition" />
-          <el-amap-marker :position="position" />
-        </el-amap>
-      </div>
-    </j-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { store } from '@jetlinks-web/stores'
-import { initAMapApiLoader } from '@vuemap/vue-amap'
-import '@vuemap/vue-amap/dist/style.css'
-import { computed, CSSProperties, PropType, ref } from 'vue'
-
-interface AMapProps {
-  style?: CSSProperties
-  class?: string
-  AMapUI?: string | boolean
-  plugins?: string[]
-}
-
-const systemStore = store.SystemStore
-
-const amapKey = systemStore.systemInfo.apiKey
-
-interface EmitProps {
-  (e: 'update:point', data: string): void
-  (e: 'change', data: string): void
-}
-const props = defineProps({
-  style: Object as PropType<AMapProps['style']>,
-  class: String as PropType<AMapProps['class']>,
-  AMapUI: [String, Boolean],
-  center: Array as PropType<number[]>,
-  plugin: Array,
-  zoom: {
-    type: Number,
-    default: 12,
-  },
-  securityJsCode: String,
-  point: { type: [Number, String], default: '' },
-})
-const emit = defineEmits<EmitProps>()
-
-
-initAMapApiLoader({
-  key: amapKey,
-  securityJsCode: props.securityJsCode
-})
-
-// 手动输入的坐标点(经纬度字符串)
-const inputPoint = computed({
-  get: () => {
-    return props.point
-  },
-  set: (val: any) => {
-    mapPoint.value = val
-    emit('update:point', val)
-    emit('change', val)
-  },
-})
-
-// 地图弹窗
-const modalVisible = ref<boolean>(false)
-
-const handleModalSubmit = () => {
-  inputPoint.value = mapPoint.value
-  modalVisible.value = false
-}
-
-// 地图拾取的坐标点(经纬度字符串)
-const mapPoint = ref('')
-
-const _zoom = ref<number>(props.zoom)
-const _center = ref<number[]>(props?.center || [])
-let map: any = null
-
-// 地图经纬度
-const position = ref<number[] | string[]>([])
-
-/**
- * 地图初始化
- * @param e
- */
-const initMap = (e: any) => {
-  map = e
-
-  const pointStr = mapPoint.value as string
-  position.value = pointStr ? pointStr.split(',') : _center.value
-}
-
-/**
- * 地图点击
- * @param e
- */
-const clickMap = (e: any) => {
-  mapPoint.value = `${e.lnglat.lng},${e.lnglat.lat}`
-  position.value = [e.lnglat.lng, e.lnglat.lat]
-}
-
-/**
- * 选择搜索结果
- * @param e
- */
-const selectPosition = (e: any) => {
-  const selectPoint = [e.poi.location.lng, e.poi.location.lat]
-  map.setCenter(selectPoint)
-  mapPoint.value = selectPoint.join(',')
-  position.value = selectPoint
-}
-</script>
-
-<style lang="less" scoped></style>

package/src/GeoComponent/index.ts

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

package/src/PermissionButton/hooks.ts

@@ -1,20 +0,0 @@
-import {watch, ref} from 'vue'
-import type { Ref } from 'vue'
-import { store } from '@jetlinks-web/stores'
-import {isBoolean} from "lodash-es";
-
-export const usePermission = (code?: string | string[] | boolean): {
-  hasPerm: Ref<boolean>
-} => {
-  const hasPerm = ref(false)
-
-  watch(() => code, () => {
-    if (code) {
-      hasPerm.value = isBoolean(code) ? code : store.AuthStore.hasPermission(code)
-    }
-  }, { immediate: true })
-
-  return {
-    hasPerm
-  }
-}