@jetlinks-web/components 1.0.4 → 2.0.0

package/src/Search/Search.vue

@@ -0,0 +1,398 @@
+<template>
+  <Form :model="terms" @finish="searchSubmit">
+    <div :class="['JSearch-warp', props.class]" :style="style">
+      <div class="JSearch-content simple">
+        <div class="JSearch-items">
+          <Row :gutter="[16, 16]">
+            <Col
+                v-for="(item, index) in searchItems"
+                :key="index + '_' + item.column"
+                :span="item.span || 24 / column"
+            >
+              <SearchItem
+                  :only-value="true"
+                  :expand="false"
+                  :index="index + 1"
+                  :columns="searchItems"
+                  :component-props="item.componentProps"
+                  :terms-item="terms.terms[index]"
+                  :reset="resetNumber"
+                  :label-width="labelWidth"
+                  @change="(v) => itemValueChange(v, index)"
+              />
+            </Col>
+            <Col :span="24 / column">
+              <slot
+                  name="footerRender"
+                  :reset="reset"
+                  :submit="searchSubmit"
+              >
+                <div
+                    class="JSearch-footer--btns"
+                    :style="{
+                                        paddingLeft: `${labelWidth + 8}px`,
+                                    }"
+                >
+                  <Button type="stroke" @click="reset">
+                    {{ resetText }}
+                  </Button>
+                  <FormItemRest>
+                    <Button
+                        html-type="submit"
+                        type="primary"
+                    >
+                      {{ submitText }}
+                    </Button>
+                  </FormItemRest>
+                </div>
+              </slot>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </div>
+  </Form>
+</template>
+
+<script setup lang="ts">
+import { JColumnsProps, SearchItemData, SearchProps, Terms } from './typing';
+import {
+  Button,
+  Row,
+  Col,
+  Form,
+  FormItemRest,
+} from 'ant-design-vue';
+import { set } from 'lodash-es';
+import { reactive, ref, provide } from 'vue';
+import type { PropType } from 'vue';
+import { termsParamsFormat } from './util';
+import SearchItem from './Item.vue';
+import { optionsMapKey } from './setting';
+
+interface Emit {
+  (e: 'search', data: Terms[] | {}): void;
+}
+
+type SearchType = 'terms' | 'object';
+
+const props = defineProps({
+  columns: {
+    type: Array as PropType<JColumnsProps[]>,
+    default: () => [],
+    required: true,
+  },
+  type: {
+    type: String as PropType<SearchType>,
+    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: '搜索',
+  },
+});
+
+const columnOptionMap = ref(new Map());
+
+const emit = defineEmits<Emit>();
+// 当前查询条件
+const terms = reactive<Terms>({terms: []});
+
+const searchItems = ref<SearchProps[]>([]); // 当前查询条件列表
+
+provide(optionsMapKey, columnOptionMap);
+const itemValueChange = (value: SearchItemData, index: number) => {
+  set(terms.terms, [index], value);
+};
+
+const handleItems = (reset: boolean = 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 as any,
+        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();
+</script>
+
+<style scoped lang="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;
+  }
+}
+</style>

package/src/Search/hooks/index.ts

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

package/src/Search/hooks/useSearchItems.ts

@@ -0,0 +1,68 @@
+import {  ref } from 'vue';
+import type { Ref } from 'vue';
+import type {
+    JColumnsProps,
+    SearchItemData,
+    SearchProps,
+    SearchItemProps,
+} from '../typing';
+import { sortBy } from 'lodash-es';
+
+type OptionsType = {
+    getDefaultValue: (terms: SearchItemData[]) => void;
+};
+const hasDefaultValue = (item: SearchProps) => {
+    return (
+        item.defaultValue !== undefined ||
+        item.defaultTermType ||
+        item.defaultOnceValue
+    );
+};
+export const useSearchItems = (
+    columns: JColumnsProps[],
+    options: OptionsType,
+): {
+    searchItems: Ref<SearchProps[]>;
+    searchOptionsMap: Ref<Map<string, SearchItemProps>>;
+} => {
+    const items = ref<SearchProps[]>([]);
+    const optionsMap = ref(new Map());
+    const handleColumns = () => {
+        const _items = [];
+        const values: SearchItemData[] = [];
+        columns.forEach((item, index) => {
+            const { search } = item;
+            if (search && Object.keys(search).length) {
+                optionsMap.value.set(item.dataIndex, search);
+
+                if (hasDefaultValue(search)) {
+                    const _value =
+                        search.defaultValue || search.defaultOnceValue;
+
+                    values.push({
+                        type: 'and',
+                        value: _value,
+                        termType: search.defaultTermType || 'like',
+                        column: item.dataIndex,
+                    });
+                }
+
+                _items.push({
+                    ...item.search,
+                    sortIndex: item.search.first ? 0 : index + 1,
+                    column: item.dataIndex,
+                });
+            }
+        });
+        items.value = sortBy(_items, 'sortIndex');
+
+        options?.getDefaultValue(values);
+    };
+
+    handleColumns();
+
+    return {
+        searchItems: items,
+        searchOptionsMap: optionsMap,
+    };
+};

package/src/Search/index.md

@@ -0,0 +1,57 @@
+---
+category: Components
+subtitle: 搜索
+cols: 1
+type: 高阶组件
+title: Search
+cover:
+---
+
+## API
+
+```html
+<j-search></j-search>
+```
+
+可结合 ProTable 使用
+
+| Property | Description         | Type      | Default Value |
+| -------- | ------------------- | --------- | ------------- |
+| columns  | 同`Table` `columns` | Columns[] | []            |
+| labelWidth | label最小宽度 | Number | 40 |
+
+### Columns
+
+| Property  | Description                          | Type     | Default Value |
+| --------- | ------------------------------------ | -------- | ------------- |
+| dataIndex | 同`Table` `columns`中的 dataIndex    |          |
+| title     | 同`Table` `columns`中的 title        |          |
+| search    | 查询属性, 不传则不会出现在查询组件中 | Search[] |
+
+### Search
+
+| Property        | Description                                  | Type                                         | Default Value         |
+| --------------- | -------------------------------------------- | -------------------------------------------- | --------------------- |
+| first           | 是否提升为第一个查询字段                     | Boolean                                      | ''                    |
+| rename          | 重命名查询字段，可以覆盖 Terms.column 中的值 |                                              |
+| type            | 组件类型                                     | `select` `number` `treeSelect` `date` `time` | `string`              |
+| componentProps  | 组件的 props                                 | `{}`                                         | {}                    |
+| format          | `date` `time` 时生效                         | String                                       | `YYYY-MM-DD HH:mm:ss` |
+| options         | `treeSelect` `select` 时生效                 | `Option[]` `Promise`                         | []                    |
+| defaultTermType | 修改 Terms.termType 的默认值                 | String                                       | 'eq'                  |
+| handleValue     | 处理 Terms.value                             | Function                                     | Function(item)        |
+
+### 事件
+
+| Property | Description | 回调参数                                                                                      |
+| -------- | ----------- | --------------------------------------------------------------------------------------------- |
+| search   | 搜索事件    | `AdvancedSearch`组件 Function({ terms: [{ terms: Terms[]] })； `Search`组件 Function(Terms[]) |
+
+### Terms
+
+| Property | Description      | Type                       |
+| -------- | ---------------- | -------------------------- |
+| column   | 查询字段         | string                     |
+| type     | 两组查询间的关系 | `and` `or`                 |
+| termType | 查询条件         | `eq` `like` `btw` 等       |
+| value    | 查询值           | `string` `number` `Object` |

package/src/Search/index.ts

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

package/src/Search/setting.ts

@@ -0,0 +1,55 @@
+import { PropType } from 'vue';
+import { JColumnsProps } from './typing';
+
+export const optionsMapKey = Symbol('searchOptionsMap');
+export const basicSearch = {
+    columns: {
+        type: Array as PropType<JColumnsProps[]>,
+        default: () => [],
+        required: true,
+    },
+    type: {
+        type: String,
+        default: 'advanced',
+    },
+};
+
+export const typeOptions = [
+    { label: '或者', value: 'or' },
+    { label: '并且', value: 'and' },
+];
+
+export const 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 const termType = Object.values(TermTypeMap);
+
+export const 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/src/Search/typing.ts

@@ -0,0 +1,76 @@
+import type { ColumnType } from 'ant-design-vue/lib/table';
+
+export interface SearchBaseProps {
+    rename?: string;
+    type?:
+        | 'select'
+        | 'number'
+        | 'string'
+        | 'treeSelect'
+        | 'date'
+        | 'time'
+        | 'rangePicker'
+        | 'component'
+        | 'timeRange';
+    format?: string;
+    options?: any[] | Function;
+    first?: boolean;
+    defaultTermType?: string; // 默认 eq
+    defaultValue?: any; // 默认值
+    defaultOnceValue?: any; // 会被重置掉的默认值
+    title?: ColumnType['title'];
+    sortIndex?: number;
+
+    span?: number;
+    componentProps?: any;
+
+    termFilter?: string[];
+
+    termOptions?: Array<{ label: string; value: string }>;
+
+    handleValue?: (value: SearchItemData) => any;
+}
+
+export interface SearchItemProps {
+    rename?: SearchBaseProps['rename'];
+    title: string;
+    column: string | number | ColumnType['dataIndex'];
+}
+
+export interface SearchItemData {
+    column: string | number | ColumnType['dataIndex'];
+    value: any;
+    termType: string;
+    type?: string;
+}
+
+export interface TermsItem {
+    terms: SearchItemData[];
+    type?: string;
+}
+
+export interface Terms {
+    terms: TermsItem[];
+}
+
+export interface SortItem {
+    name: string;
+    order?: 'desc' | 'asc';
+    value?: any;
+}
+
+export interface SearchHistoryList {
+    content?: string;
+    name: string;
+    id: string;
+    key: string;
+}
+
+export interface SearchProps
+    extends Omit<SearchBaseProps, 'title'>,
+        SearchItemProps {}
+
+export interface JColumnsProps extends ColumnType {
+    scopedSlots?: boolean;
+    search: SearchProps;
+}