CategorySearch 分类搜索 #

<template>
  <d-category-search
    :category="category"
    :selected-tags="selectedTags"
    search-key="basic"
    :default-search-field="defaultSearchField"
    :filter-name-rules="rules"
    placeholder="Click here to choose a filter condition"
    @search="onSearch"
    @selectedTagsChange="onSelectedTagsChange"
    @clearAll="onClearAll"
    @createFilter="onCreateFilter"
    @searchKeyChange="onSearchKeyChange"
  ></d-category-search>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const category = ref([
      {
        label: 'status',
        field: 'status',
        type: 'radio',
        group: 'Basic',
        filterKey: 'status',
        options: [
          { status: 'new' },
          { status: 'developing' },
          { status: 'completed' },
          { status: 'under acceptance' },
          { status: 'closed-loop' },
        ],
      },
      {
        label: 'checker',
        field: 'checker',
        type: 'checkbox',
        group: 'Personnel-related',
        filterKey: 'name',
        options: [
          { name: 'Jack', value: 'Jack' },
          { name: 'Tom', value: 'Tom' },
          { name: 'Jerry', value: 'Jerry' },
        ],
      },
      {
        label: 'tag',
        field: 'tag',
        type: 'label',
        group: 'Basic',
        filterKey: 'label',
        colorKey: 'color',
        options: [
          { label: 'Bug', color: '#f66f6a' },
          { label: 'Epic', color: '#5e7ce0' },
          { label: 'Story', color: '#50d4ab' },
        ],
      },
      {
        label: 'release version',
        field: 'releaseVersion',
        type: 'textInput',
        group: 'Basic',
        maxLength: 10,
        validateRules: [
          { required: true, message: '不能为空', trigger: 'change' },
          { min: 3, max: 10, message: '不小于3个字符，不大于6个字符', trigger: 'change' },
        ],
      },
      {
        label: 'commit number',
        field: 'commitNumber',
        type: 'numberRange',
        group: 'User-defined',
        min: { left: 0 },
        max: { left: 30, right: 50 },
        step: { left: 2, right: 3 },
        placeholder: { left: 'min', right: 'max' },
      },
    ]);
    const selectedTags = ref([
      {
        label: 'status',
        field: 'status',
        value: {
          status: 'developing',
          value: 'developing',
        },
      },
    ]);
    const defaultSearchField = ['creator', 'status'];
    const rules = [
      { required: true, message: '不能为空', trigger: 'change' },
      { min: 3, max: 16, message: '不小于3个字符，不大于6个字符', trigger: 'change' },
    ];

    const onSearch = (e) => {
      console.log('search items:', e);
    };
    const onSelectedTagsChange = (e) => {
      console.log('selected tags change', e);
    };
    const onClearAll = (e) => {
      console.log('clear all:', e);
    };
    const onCreateFilter = (e) => {
      console.log('create filter', e);
    };
    const onSearchKeyChange = (e) => {
      console.log('search key change:', e);
    };

    return {
      category,
      selectedTags,
      defaultSearchField,
      rules,
      onSelectedTagsChange,
      onClearAll,
      onCreateFilter,
      onSearchKeyChange,
      onSearch,
    };
  },
});
</script>

<template>
  <d-category-search
    ref="categorySearchRef"
    :category="category"
    :selected-tags="selectedTags"
    search-key="custom"
    :default-search-field="defaultSearchField"
    :text-config="textConfig"
    :tag-max-width="160"
  >
    <template #statusMenu="scope">
      <ul class="dp-dropdown-menu-template">
        <li
          v-for="(item, index) in scope.tagOption.options"
          :key="index"
          :class="['dp-dropdown-item', { active: scope.tagOption.value.status === item.status }]"
          @click="() => chooseItem(scope.tagOption, item)"
        >
          <span>Status Name: {{ item.status }}</span>
        </li>
      </ul>
    </template>
    <template #tagTag="scope">
      <span>{{ scope.tag.label }}: </span>
      <template v-for="(item, index) in scope.tag.value.cache" :key="index">
        <span style="margin:0 4px">{{ index + 1 }}.</span>
        <span :style="{ color: item.color }">{{ item.label }}</span>
      </template>
    </template>
  </d-category-search>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const category = ref([
      {
        label: 'status',
        field: 'status',
        type: 'radio',
        group: 'Basic',
        filterKey: 'status',
        options: [
          { status: 'new' },
          { status: 'developing' },
          { status: 'completed' },
          { status: 'under acceptance' },
          { status: 'closed-loop' },
        ],
      },
      {
        label: 'tag',
        field: 'tag',
        type: 'label',
        group: 'Basic',
        filterKey: 'label',
        colorKey: 'color',
        options: [
          { label: 'Bug', color: '#f66f6a' },
          { label: 'Epic', color: '#5e7ce0' },
          { label: 'Story', color: '#50d4ab' },
        ],
      },
    ]);
    const selectedTags = ref([
      {
        label: 'status',
        field: 'status',
        value: {
          status: 'developing',
          value: 'developing',
        },
      },
    ]);
    const categorySearchRef = ref();
    const defaultSearchField = ['status'];
    const textConfig = {
      keywordName: '模糊查找',
      labelConnector: '&&',
    };
    const chooseItem = (tag, item) => {
      categorySearchRef.value.chooseItem(tag, item);
    };

    return { category, selectedTags, categorySearchRef, defaultSearchField, textConfig, chooseItem };
  },
});
</script>

<template>
  <d-category-search
    ref="categorySearchRef"
    :category="category"
    :selected-tags="selectedTags"
    :default-search-field="defaultSearchField"
    :text-config="textConfig"
    :extend-config="extendConfig"
    :show-search-category="showSearchCategory"
    @selectedTagsChange="onSelectedTagsChange"
  >
    <template #operation>
      <div :class="['dp-category-search-icon reset', { disabled: !extendConfig.save.disabled }]" @click="reset">
        <svg width="14px" height="14px" viewBox="0 0 16 16">
          <title>reset status</title>
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M2.21674752,9.5653401 C3.07840863,12.7589841 6.38381399,14.6542343 9.59957703,13.7985 C11.2074586,13.3706328 12.4884935,12.3360318 13.2598504,11.0091921 L15,12.0069575 C13.9715241,13.7760771 12.2634775,15.1555451 10.1196355,15.7260346 C5.83195146,16.8670137 1.42474431,14.3400134 0.275862827,10.0818215 C-0.0982576084,8.69518874 -0.0807292122,7.29596891 0.261105679,6 L5.12807455,8.79061807 L2.21674752,9.5653401 L2.21674752,9.5653401 Z M15.7241372,5.91817855 C16.0982576,7.30481126 16.0807292,8.70403109 15.7388943,10 L10.8719255,7.20938193 L13.7832525,6.4346599 C12.9215914,3.24101592 9.61618601,1.34576568 6.40042297,2.20150001 C4.79254145,2.62936717 3.51150652,3.66396818 2.74014961,4.99080789 L1,3.99304254 C2.02847588,2.22392292 3.73652245,0.844454904 5.88036448,0.273965353 C10.1680485,-0.867013747 14.5752557,1.65998658 15.7241372,5.91817855 L15.7241372,5.91817855 Z"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
      </div>
    </template>
  </d-category-search>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  setup() {
    const category = ref([
      {
        label: 'status',
        field: 'status',
        type: 'radio',
        group: 'Basic',
        filterKey: 'status',
        options: [
          { status: 'new' },
          { status: 'developing' },
          { status: 'completed' },
          { status: 'under acceptance' },
          { status: 'closed-loop' },
        ],
      },
    ]);
    const selectedTags = ref([
      {
        label: 'status',
        field: 'status',
        value: {
          status: 'developing',
          value: 'developing',
        },
      },
    ]);
    const categorySearchRef = ref();
    const extendConfig = reactive({
      show: true,
      save: { disabled: false },
      customTemplate: undefined,
    });
    const defaultSearchField = ['status'];
    const textConfig = {
      createFilter: '自定义过滤器',
      filterTitle: '自定义过滤器标题',
      noCategoriesAvailable: '自定义无可用分类',
    };
    const showSearchCategory = reactive({
      keyword: false,
      fieldDescription: (label) => `添加至 ${label} `,
      category: false,
    });
    const onSelectedTagsChange = (event) => {
      console.log('selected tag', event);
      extendConfig.save.disabled = true;
    };
    const reset = () => {
      selectedTags.value = [
        {
          label: 'status',
          field: 'status',
          value: {
            status: 'developing',
            value: 'developing',
          },
        },
      ];
      extendConfig.save.disabled = false;
    };

    return {
      category,
      selectedTags,
      categorySearchRef,
      defaultSearchField,
      textConfig,
      extendConfig,
      showSearchCategory,
      onSelectedTagsChange,
      reset,
    };
  },
});
</script>