diantou/src_product/iam/audit/auditsource/km/knowledge-search/km-fullsearch-classify.vue

<template>
  <div :class="[$style.searchclassify, { [$style.collapse]: fold }]">
    <div :class="$style.search">
      <!-- 创建时间 -->
      <a-card
        v-for="(item, index) in KmFullsearchData"
        :key="index"
        :bordered="false"
        :title="item.title"
      >
        <a slot="extra" @click="changeexpand(item)">
          <a-icon :type="item.expand ? 'up' : 'down'" />
        </a>
        <a-radio-group
          v-show="item.key === 0 && item.expand === true"
          v-model="conditionsParams.creationTime"
          :name="item.title + 'Radio'"
          :options="item.options"
          @change="onRadioChange"
        />
        <!-- 创建时间 自定义 -->
        <a-range-picker
          v-if="item.key === 0 && isYourself"
          v-model="yourselfTime"
          @change="onDateChange"
        >
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
        <!-- 知识分类  -->
        <km-tree-select
          v-show="item.key === 1 && item.expand === true"
          v-model="conditionsParams.category"
          :class="$style.category"
          :editable="true"
          tree-data-url="api/xcoa-mobile/v1/km-knowledge-category/knowledge-category-tree?pageId=kmKnowledge"
          @change="categoryChange"
        ></km-tree-select>
        <!-- 知识标签 -->
        <km-tag-picker
          v-show="item.key === 2 && item.expand === true"
          v-model="conditionsParams.label"
          :class="$style.category"
          :editable="true"
          @change="tagChange"
        />
        <!-- 业务领域 -->
        <km-business-area-picker
          v-show="item.key === 3 && item.expand === true"
          v-model="conditionsParams.businessArea"
          :read-only="false"
          :class="$style.category"
          @change="businessAreaChange"
        />

        <!-- 搜索范围 -->
        <a-checkbox-group
          v-show="item.key === 4 && item.expand === true"
          v-model="conditionsParams.searchRange"
          :name="item.title + 'Radio'"
          :options="item.options"
          @change="(e) => onRangeChange(e, item.title)"
        />

        <!-- 搜索范围 发起人 -->
        <div v-if="item.key === 4" :class="$style.hor">
          <span :class="$style.label"> 发起人:</span>
          <sd-user-picker
            v-model="creatorArr"
            placeholder="请选择"
            @change="userChange"
          ></sd-user-picker>
        </div>
        <!-- 搜索范围 发起部门 -->
        <div v-if="item.key === 4" :class="$style.hor">
          <span :class="$style.label"> 发起部门:</span>
          <sd-group-picker v-model="createDeptArr" @change="groupChange"></sd-group-picker>
        </div>
      </a-card>

      <div :class="$style.reset">
        <a-button type="primary" @click="reset">
          重置
        </a-button>
      </div>
    </div>
    <a-button type="primary" :class="$style.fold" @click="foldClick">
      <a-icon :type="icontype" />
    </a-button>
  </div>
</template>

<script>
import KmFullsearchData from './km-fullsearch-data.js'
import components from './_import-components/km-fullsearch-classify-import'

export default {
  name: 'KmFullsearchClassify',
  components,
  props: {},
  data() {
    return {
      KmFullsearchData,
      isYourself: false,
      fold: false,
      icontype: 'left',
      conditionsParams: {
        creationTime: [],
        flowStatus: [],
        searchRange: [],
        category: '',
        label: '',
        businessArea: '',
      },
      creatorArr: [],
      createDeptArr: [],
      yourselfTime: [],
    }
  },
  methods: {
    // 展开或收起
    changeexpand(item) {
      KmFullsearchData.forEach((k) => {
        if (k.key === item.key) {
          item.expand = !item.expand
        }
      })
      this.expand = !this.expand
    },
    // 单选按钮 创建时间
    onRadioChange(e) {
      if (e.target.value === 'yourself') {
        this.isYourself = true
      } else {
        this.isYourself = false
      }
      this.$emit('onSearch', e.target.value, 'searchDateType')
    },
    // 自定义时间
    onDateChange(date, dateString) {
      this.$emit('onSearch', dateString[0], 'startDate')
      this.$emit('onSearch', dateString[1], 'endDate')
    },

    // 知识分类
    categoryChange(val) {
      let arrId = ['all']
      if (val) {
        arrId = val.map((item) => item.id)
      }
      this.$emit('onSearch', arrId, 'typeIds')
    },

    // 知识标签
    tagChange(val) {
      if (val.length === 0) {
        val = ['all']
      }
      this.$emit('onSearch', val, 'tagNames')
    },

    // 业务领域
    businessAreaChange(val) {
      let arrId = ['all']
      if (val.length > 0) {
        arrId = val.map((item) => item.id)
      }

      this.$emit('onSearch', arrId, 'domainIds')
    },

    // 搜索范围
    onRangeChange(val, title) {
      this.$emit('onSearch', val, 'searchFields')
    },

    // 发起人
    userChange(val) {
      const ids = []
      if (val.length > 0) {
        val.forEach((item) => {
          ids.push(item.code)
        })
        this.$emit('onSearch', ids, 'creatorAccounts')
      } else {
        this.$emit('onSearch', ['all'], 'creatorAccounts')
      }
    },
    // 发起部门
    groupChange(val) {
      const ids = []
      if (val.length > 0) {
        val.forEach((item) => {
          ids.push(item.code)
        })
        this.$emit('onSearch', ids, 'createDeptIds')
      } else {
        this.$emit('onSearch', ['all'], 'createDeptIds')
      }
    },
    // 重置
    reset() {
      this.conditionsParams = {}
      this.creatorArr = []
      this.createDeptArr = []
      this.yourselfTime = []
      this.$emit('onSearch', '', 'reset')
    },
    // 小箭头点击事件
    foldClick() {
      this.fold = !this.fold
      if (this.fold) {
        this.icontype = 'right'
      } else {
        this.icontype = 'left'
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.searchclassify {
  position: relative;
  display: flex;
  margin-right: 1rem;
  margin-left: 1rem;
  transition: width 0.2s;
  .search {
    width: 100%;
    :global(.ant-radio-wrapper) {
      margin: 5px 0.4rem;
    }
    :global(.ant-checkbox-wrapper) {
      min-width: 100px;
      margin: 5px 0.4rem;
    }
    .hor {
      display: flex;
      align-items: center;
      margin-top: 0.6rem;
      > div {
        width: 100%;
      }
      .label {
        min-width: 70px;
        margin-right: 0.5rem;
      }
      .label + span {
        width: 100%;
      }
      :global(.ant-select) {
        width: 100%;
      }
    }
    .reset {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      padding-bottom: 1rem;
      background: #fff;
    }

    :global(.ant-btn-primary) {
      margin-right: 15px;
    }
  }

  .fold {
    position: absolute;
    top: calc(50% - 30px);
    right: -15px;
    z-index: 2;
    width: 15px;
    height: 75px;
    padding: 0;
    border-radius: 0 10px 10px 0;
  }
  .category {
    width: 260px;
    :global(.ant-select-selection) {
      width: 260px;
    }
  }
}
.collapse {
  background: transparent;
  .search {
    display: none;
  }
}
</style>