Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/api/comm.ts

@@ -0,0 +1,3 @@
+import { BASE_API_PATH } from "@/utils/variable";
+
+export const FILE_UPLOAD = `${BASE_API_PATH}/file/static`;

src/components/Search/Item.vue

@@ -142,7 +142,7 @@ const emit = defineEmits<Emit>()
 const termsModel = reactive<SearchItemData>({
   type: 'or',
   value: '',
-  termType: 'eq',
+  termType: 'like',
   column: ''
 })
 
@@ -166,6 +166,7 @@ const getTermType = (type?: ItemType) => {
   switch (type) {
     case 'select':
     case 'treeSelect':
+    case 'number':
       return 'eq'
     case 'date':
     case 'time':
@@ -221,6 +222,7 @@ const handleItemOptions = (option?: any[] | Function) => {
 
 const columnChange = (value: string, isChange: boolean) => {
   const item = columnOptionMap.get(value)
+  optionLoading.value = false
   // 设置value为undefined
   termsModel.column = value
   termsModel.termType = item.defaultTermType || getTermType(item.type)

src/components/Search/Search.vue

@@ -172,6 +172,23 @@ const addUrlParams = () => {
   urlParams.target = props.target
 }
 
+/**
+ * 处理termType为like，nlike的值
+ * @param v
+ */
+const handleLikeValue = (v: string) => {
+  let _v = v
+  return _v.split('').reduce((pre: string, next: string) => {
+    let _next = next
+    if (next === '\\') {
+      _next = '\\\\'
+    } else if (next === '%') {
+      _next = '\\%'
+    }
+    return pre + _next
+  }, '')
+}
+
 /**
  * 处理为外部使用
  */
@@ -181,7 +198,8 @@ const handleParamsFormat = () => {
   return {
     terms: cloneParams.terms.map(item => {
       if (item.terms) {
-        item.terms = item.terms.filter(iItem => iItem && iItem.value).map(iItem => {
+        item.terms = item.terms.filter(iItem => iItem && iItem.value)
+          .map(iItem => {
           // 处理handleValue和rename
           const _item = columnOptionMap.get(iItem.column)
           if (_item.rename) {
@@ -191,6 +209,10 @@ const handleParamsFormat = () => {
           if (_item.handleValue && isFunction(_item.handleValue)) {
             iItem.value = _item.handleValue(iItem.value, iItem)
           }
+
+          if (['like','nlike'].includes(iItem.termType) && !!iItem.value) {
+            iItem.value = `%${handleLikeValue(iItem.value)}%`
+          }
           return iItem
         })
       }

src/components/Search/search.md

@@ -0,0 +1,107 @@
+# Search组件
+
+- 需要结合Table使用
+
+## 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| columns | 查询下拉列表 | JColumnsProps[] | [] |
+| type | 查询模式 | 'advanced', 'simple' | 'advanced' |
+| target | 查询组件唯一key | String |  |
+| search | 查询回调事件 | Function |  |
+
+> JColumnsProps[*].search
+
+| 名称 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rename | 用来重命名查询字段值 | String |  |
+| type | 查询值组件类型 | 'select', 'number', 'string', 'treeSelect', 'date', 'time' | |
+| options | Select和TreeSelect组件下拉值 | Array, Promise |  |
+| first | 控制查询字段下拉默认值，默认为name即名称 | Boolean |  |
+| defaultTermType | 查询条件 | String |  |
+| handleValue | 处理单个查询value值 | Function |  |
+
+## 基础用法
+
+> columns中包含search属性才会出现在查询下拉中
+
+```vue
+    const columns = [
+      {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+          type: 'string',
+        }
+      }
+    ]
+  const search = (params) => {
+}
+  <Search
+    :columns='columns'
+    target='device'
+    @search='search'
+  />
+```
+
+> rename的作用在于search抛出params会根据rename修改数据中column的值
+
+```vue
+    const columns = [
+      {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+          type: 'string',
+          rename: 'TestName'
+        }
+      }
+    ]
+  const search = (params) => {
+    terms: [
+      {
+        column: 'TestName',
+        value: '',
+        termType: 'like'
+      }
+    ]
+  }
+  <Search
+    :columns='columns'
+    target='device'
+    @search='search'
+  />
+```
+
+> defaultTermType的作用在于设置查询条件,相关条件参考util中的termType
+
+```vue
+    const columns = [
+      {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+          type: 'string',
+          defaultTermType: 'gt'
+        }
+      }
+    ]
+  const search = (params) => {
+    terms: [
+      {
+        column: 'TestName',
+        value: '',
+        termType: 'gt'
+      }
+    ]
+  }
+  <Search
+    :columns='columns'
+    target='device'
+    @search='search'
+  />
+```

src/utils/comm.ts

@@ -1,4 +1,5 @@
 import { TOKEN_KEY } from '@/utils/variable'
+import { Terms } from 'components/Search/types'
 
 /**
  * 静态图片资源处理