@jetlinks-web/components 2.0.2 → 2.0.3

package/src/Search/Search.vue

@@ -1,398 +0,0 @@
-<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

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

package/src/Search/hooks/useSearchItems.ts

@@ -1,68 +0,0 @@
-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

@@ -1,57 +0,0 @@
----
-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

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

package/src/Search/setting.ts

@@ -1,55 +0,0 @@
-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

@@ -1,76 +0,0 @@
-import type { ColumnType } from 'ant-design-vue/es/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;
-}