封装检索组件

创建search/index.vue

<template>
  <div class="search-index">
    <el-form v-show="showHide" ref="form" label-width="110px">
      <div v-for="(item, index) in translationSearchList" v-show="!item.show" :key="index" class="item-search" :class="[item.class, item.required ? 'required' : '']">
        <el-form-item :label="item.label">
          <!-- 渠道多选下拉类型 -->
          <div v-if="item.type === 'dropdown'" class="dropdown">
            <span v-if="item.All" :class="{'all_active': formData[item.name].length <= 0}" class="all" @click="channelAll(item)">
              全部
            </span>
            <div
              v-for="(j, dropdownIndex) in item.options"
              :key="dropdownIndex"
              class="dropdown-item"
              style="display: inline-block; margin-right: 10px"
              :class="formData[item.name].some(obj => Object.values(obj).includes(j.name)) ? 'active' : ''"
            >
              <el-dropdown
                v-if="j.children && j.children.length > 0"
                :hide-on-click="false"
                @click.native="dropdownClick(j, item.name)"
              >
                <span class="el-dropdown-link">
                  <dataIcon :icon-name="j.name" style="width: 12px; height: 12px; display: inline-block; margin-right: 5px" />
                  {{ j.name }}
                  <span v-if="j.total">({{ j.total }})</span>
                  <i v-if="j.children.length > 0" class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(c, dropdownItemIndex) in j.children"
                    :key="dropdownItemIndex"
                    :class="itemActive.indexOf(c.name) !== -1 ? 'active_item' : ''"
                    @click.native="dropdownItemClick(j, c, item.name)"
                  >
                    {{ c.name }}
                    <span v-if="c.total">({{ c.total }})</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span v-else class="el-dropdown-link" @click="dropdownClick(j, item.name)">
                <dataIcon :icon-name="j.name" style="width: 12px; height: 12px; display: inline-block; margin-right: 5px" />
                {{ j.name }}
                <span v-if="j.total">({{ j.total }})</span>
              </span>
            </div>
          </div>
          <!-- 多选类型 -->
          <div v-if="item.type === 'manyChoose'" class="manyChoose">
            <span v-if="item.All" :class="{'all_active': formData[item.name].length <= 0}" class="all" @click="allClick(item, 'manyChoose')">
              全部
            </span>
            <span class="manyChoose-span" style="white-space: nowrap;">
              <template v-if="item.tooltip">
                <el-tooltip
                  v-for="(i, index) in item.options"
                  :key="index"
                  class="item"
                  effect="dark"
                  content="Top Left 提示文字"
                  placement="top-start"
                >
                  <div slot="content">
                    <div
                      style="
                      max-width: 200px;
                      max-height: 100px;
                      overflow-y: auto;
                      padding-right: 10px;"
                    >
                      {{ i.tooltip }}
                    </div>
                  </div>
                  <span
                    v-show="item.TC ? index <= 10 : true && i.label"
                    class="btnText"
                    :class="{
                      'active': formData[item.name].indexOf(i.value) !== -1
                    }"
                    @click="changeMultiple(i.value, item.name)"
                  >
                    <!-- <svg-icon slot="prefix" :icon-class="i.icon" v-if="i.icon" class="dropdown-icon" /> -->
                    <dataIcon v-if="i.icon" :icon-name="i.label" class="dropdown-icon" />
                    {{ i.label }}
                    <i v-if="item.delete" class="el-icon-circle-close" @click.stop.prevent="removeItem(i, index)" />
                  </span>
                </el-tooltip>
              </template>
              <template v-else>
                <span
                  v-for="(i, index) in item.options"
                  v-show="item.TC ? index <= 7 : true && i.label"
                  :key="index"
                  class="btnText"
                  :class="{
                    'active': formData[item.name].indexOf(i.value) !== -1
                  }"
                  @click="changeMultiple(i.value, item.name)"
                >
                  <!-- <svg-icon slot="prefix" :icon-class="i.icon" v-if="i.icon" class="dropdown-icon" /> -->
                  <dataIcon v-if="i.icon" :icon-name="i.label" class="dropdown-icon" />
                  {{ i.label }}
                  <i v-if="item.delete" class="el-icon-circle-close" @click.stop.prevent="removeItem(i, index)" />
                </span>
              </template>
            </span>
            <div v-if="item.TC" class="right" style="display: inline-block;">
              <el-popover
                placement="bottom"
                width="400"
                popper-class="popover"
                trigger="click"
              >
                <div class="popover">
                  <div class="title">
                    请选择
                  </div>
                  <el-input
                    v-model.trim="item.retrievalInput"
                    placeholder="请输入关键词后回车检索"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="enterSearch(item.retrievalInput, item.options, index)"
                  />
                  <el-row v-if="item.optionsTC.length > 0" :gutter="5">
                    <el-col v-for="(i, index) in item.optionsTC" :key="index" :span="6">
                      <span
                        v-show="item.retrievalTC ? index > 7 : index >= 0"
                        class="btnText"
                        :title="i.label"
                        :class="{'active': formData[item.name].indexOf(i.value) !== -1}"
                        @click="changeMultiple(i.value, item.name)"
                      >
                        {{ i.label }}
                      </span>
                    </el-col>
                  </el-row>
                  <el-empty v-else description="暂无数据" />
                </div>
                <span slot="reference" class="gengduo">
                  {{
                    findObjectIndexesWithValues(formData[item.name], item.options, 'value').filter(J => { return J > 10 }).length > 0 ?
                      `已选${findObjectIndexesWithValues(formData[item.name], item.options, 'value').filter(J => { return J > 10 }).length}项` :
                      '更多'
                  }}
                </span>
              </el-popover>
            </div>
            <span v-if="item.Add" class="gengduo" @click="addClickHandler(item)">+ 新增</span>
          </div>
          <div v-if="item.type === 'manyChoose-media'" class="manyChoose">
            <span v-if="item.All" :class="{'all_active': formData[item.name].length <= 0}" class="all" @click="allClick(item, 'manyChoose')">
              全部
            </span>
            <span class="manyChoose-span" style="white-space: nowrap;">
              <template v-if="item.tooltip">
                <el-tooltip
                  v-for="(i, index) in item.options"
                  :key="index"
                  class="item"
                  effect="dark"
                  content="Top Left 提示文字"
                  placement="top-start"
                >
                  <div slot="content">
                    {{ i.tooltip }}
                  </div>
                  <span
                    v-show="item.TC ? index <= 6 : true && i.label"
                    class="btnText"
                    :class="{
                      'active': formData[item.name].indexOf(i.value) !== -1
                    }"
                    @click="changeMultiple(i.value, item.name)"
                  >
                    <!-- <svg-icon slot="prefix" :icon-class="i.icon" v-if="i.icon" class="dropdown-icon" /> -->
                    <dataIcon v-if="i.icon" :icon-name="i.label" class="dropdown-icon" />
                    {{ i.label }}
                    <i v-if="item.delete" class="el-icon-circle-close" @click.stop.prevent="removeItem(i, index)" />
                  </span>
                </el-tooltip>
              </template>
              <template v-else>
                <span
                  v-for="(i, index) in mediaGounpList"
                  v-show="item.TC ? index <= 6 : true && i.label"
                  :key="index"
                  class="btnText"
                  :class="{
                    'active': formData[item.name].indexOf(i.value) !== -1
                  }"
                  @click="changeMultiple(i.value, item.name)"
                >
                  <!-- <svg-icon slot="prefix" :icon-class="i.icon" v-if="i.icon" class="dropdown-icon" /> -->
                  <dataIcon v-if="i.icon" :icon-name="i.label" class="dropdown-icon" />
                  {{ i.label }}
                  <i v-if="item.delete" class="el-icon-circle-close" @click.stop.prevent="removeItem(i, index)" />
                </span>
              </template>
            </span>
            <div v-if="item.TC&&mediaGounpList.length>7" class="right" style="display: inline-block;">
              <el-popover
                placement="bottom"
                width="400"
                popper-class="popover"
                trigger="click"
              >
                <div class="popover">
                  <div class="title">
                    请选择
                  </div>
                  <el-input
                    v-model.trim="item.retrievalInput"
                    placeholder="请输入关键词后回车检索"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="enterSearchMedia(item.retrievalInput, mediaGounpList, index)"
                  />
                  <el-row v-if="mediaGounpListTC.length > 0" :gutter="5">
                    <el-col v-for="(i, index) in mediaGounpListTC" :key="index" :span="6">
                      <span
                        v-show="item.retrievalTC ? index > 6 : index >= 0"
                        class="btnText"
                        :title="i.label"
                        :class="{'active': formData[item.name].indexOf(i.value) !== -1}"
                        @click="changeMultiple(i.value, item.name)"
                      >
                        {{ i.label }}
                      </span>
                    </el-col>
                  </el-row>
                  <el-empty v-else description="暂无数据" />
                </div>
                <span slot="reference" class="gengduo">
                  {{
                    findObjectIndexesWithValues(formData[item.name], mediaGounpList, 'value').filter(J => { return J > 10 }).length > 0 ?
                      `已选${findObjectIndexesWithValues(formData[item.name], mediaGounpList, 'value').filter(J => { return J > 10 }).length}项` :
                      '更多'
                  }}
                </span>
              </el-popover>
            </div>
            <span v-if="item.Add" class="gengduo" @click="addClickHandler(item)">+ 新增</span>
          </div>
          <!-- 多选类型 -->
          <div v-if="item.type === 'cascaderSelect'" class="cascaderSelect">
            <el-cascader
              v-model="formData[item.name]"
              :props="item.props"
              :show-all-levels="item.showAllLevels"
              :options="item.options"
            />
          </div>
          <!-- 单选类型 -->
          <div v-if="item.type === 'singleChoice'" class="singleChoice">
            <span v-if="item.All" :class="{'all_active': !formData[item.name]}" class="all" @click="allClick(item)">
              全部
            </span>
            <span
              v-for="(i, index) in item.options"
              :key="index"
              class="btnText"
              :class="{'active': formData[item.name] == i.value}"
              @click="dateType(i.value, item.name, item.empty)"
            >
              {{ i.label }}
            </span>
            <!-- <span class="gengduo" v-if="item.history" >历史专题 <i style="color: #4E5969;" class="el-icon-arrow-down"></i> </span> -->
          </div>
          <!-- 时间类型 -->
          <div v-if="item.type === 'date'" class="date" :class="item.itemCLass">
            <el-date-picker
              v-model="item.vModel[item.vModelName]"
              :disabled="item.disabled"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              @change="dataChange($event, item.end, item.start)"
            />
          </div>
          <!-- 输入框类型 -->
          <div v-if="item.type === 'input'" class="input">
            <el-input
              v-model.trim="item.vModel[item.vModelName]"
              :disabled="item.disabled"
              :placeholder="item.placeholder"
              :maxlength="item.maxlength"
              :show-word-limit="item.showWordLimit"
              @change="inputChange($event, item.name)"
            />
          </div>
          <!-- 下拉框类型 -->
          <div v-if="item.type === 'select'" :class="item.itemCLass" class="select">
            <el-select
              v-model="item.vModel[item.vModelName]"
              :disabled="item.disabled"
              :multiple="item.multiple"
              :clearable="item.clearable"
              :collapse-tags="!item.collapse"
              :placeholder="item.placeholder"
              @change="inputChange($event, item.name)"
            >
              <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span v-if="item.Add" class="gengduo" @click="addClickHandler(item)">
              <i v-if="item.tagLen > 0">{{ item.tagLen ? `已添加${item.tagLen}标签 ` : 0 }}</i>
              {{ item.text ? `+ ${item.text}` : '+ 新增' }}
            </span>
          </div>
          <div v-if="item.type === 'select-media'" :class="item.itemCLass" class="select select-media">
            <el-select
              v-model="item.vModel[item.vModelName]"
              style="width: 100%;"
              :disabled="item.disabled"
              :multiple="item.multiple"
              :clearable="item.clearable"
              :placeholder="item.placeholder"
              filterable
              remote
              :loading="loadingSelectMedia"
              :remote-method="remoteMethod"
              @change="inputChange($event, item.name)"
            >
              <el-option
                v-for="itemo in mediaList"
                :key="itemo.uuid"
                :label="mediaChannel=='NEWSWEBSITE'?itemo.websiteName:itemo.userName"
                :value="itemo.uuid"
              />
            </el-select>
          </div>
          <!-- 下拉框-树结构 -->
          <!-- <div v-if="item.type === 'selectTree'" :class="item.itemCLass" class="select">
            <el-select
              :multiple="item.multiple"
              :clearable="item.clearable"
              collapse-tags
              v-model="item.vModel[item.vModelName]"
              @clear="treeClear()"
              @remove-tag="(val) => { removeTag(val, item)}"
              :popper-append-to-body="false"
              class='tree_select'
              :placeholder="item.placeholder">
              <el-option :value="item.selectTree" disabled>
                <el-tree :data="item.treeList" :props="item.treeProps" ref="tree" node-key="user_id" show-checkbox
                  :expand-on-click-node="false" check-on-click-node @check-change="checkChangeClick(item)"></el-tree>
              </el-option>
            </el-select>
          </div> -->
          <div v-if="item.type === 'numberInput'" :class="item.itemCLass">
            <el-input-number
              v-model="item.vModel[item.vModelName]"
              :min="0"
              :max="item.vModel2[item.vModelName2] === 0 ? Infinity : item.vModel2[item.vModelName2]"
              :placeholder="item.placeholder"
              @change="validateValues(item.vModel[item.vModelName], item.vModel2[item.vModelName2],item)"
            />
            至
            <el-input-number
              v-model="item.vModel2[item.vModelName2]"
              :min="item.vModel[item.vModelName] ? item.vModel[item.vModelName] : 0"
              :placeholder="item.placeholder"
              @change="validateValues(item.vModel[item.vModelName], item.vModel2[item.vModelName2],item)"
            />

          </div>
          <div v-if="item.type === 'selectTree'" :class="item.itemCLass" class="select">
            <el-cascader
              v-model="item.vModel[item.vModelName]"
              :disabled="item.disabled"
              :options="item.treeList"
              :props="item.props"
              collapse-tags
              clearable
              @change="selectTreeChange($event, item.name)"
            />
          </div>
          <!-- 单选框类型 -->
          <div v-if="item.type === 'radio'" class="radio-box-type">
            <el-radio-group v-model="item.vModel[item.vModelName]" :disabled="item.disabled" @change="inputChange($event, item.name)">
              <el-radio
                v-for="(i, index) in item.options"
                :key="index"
                :label="i.value"
              >
                {{ i.label }}
              </el-radio>
            </el-radio-group>
          </div>
          <!-- 文本框类型 -->
          <div v-if="item.type === 'textarea'" class="textarea">
            <el-input
              v-model="item.vModel[item.vModelName]"
              :disabled="item.disabled"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              :placeholder="item.placeholder"
              @change="inputChange($event, item.name)"
            />
          </div>
          <!-- 输入框 -->
          <div v-if="item.type === 'normalInput'" class="normal-input">
            <el-input
              v-model="formData[item.name]"
              :disabled="item.disabled"
              size="small"
              placeholder="请输入"
            />
          </div>
          <!-- 下拉多选 -->
          <div v-if="item.type === 'multipleSelect'" class="multiple-select">
            <el-select
              v-model="formData[item.name]"
              :disabled="item.disabled"
              multiple
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div v-if="!showHide" class="searchLits">
      <div v-for="(item, index) in JSON.parse(JSON.stringify(searchList))" :key="index" class="searchLits_item">
        <div>
          <!-- 渠道多选下拉类型 -->
          <div v-if="item.type === 'dropdown'" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              <span v-if="formData[item.name].length <= 0">
                全部
              </span>
              <span v-else>
                <span v-for="(i, indexQ) in JSON.parse(JSON.stringify(formData[item.name]))" :key="indexQ">
                  {{ i.name }}<i v-if="indexQ + 1 != formData[item.name].length">，</i>
                </span>
              </span>
            </span>
          </div>
          <!-- 多选类型 -->
          <div v-if="(item.type === 'manyChoose' && formData[item.name].length > 0) || (item.type === 'manyChoose' && item.All)" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              {{ formData[item.name].length <= 0 && item.All ? '全部' : filterArr(formData[item.name], item).map(i => {return i.label}).join('，') }}
            </span>
          </div>
          <!-- 多选类型 -->
          <div v-if="(item.type === 'manyChoose-media' && formData[item.name].length > 0) || (item.type === 'manyChoose-media' && item.All)" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              {{ formData[item.name].length <= 0 && item.All ? '全部' : filterArrMedia(formData[item.name]).map(i => {return i.label}).join('，') }}
            </span>
          </div>
          <!-- 单选类型 -->
          <div v-if="item.type === 'singleChoice'" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              <!-- {{formData[item.name]}} -->
              {{ formData[item.name].length <= 0 && item.All ? '全部' : filterArr(formData[item.name], item).map(i => {return i.label}).join('，') }}
            </span>
          </div>
          <!-- 时间类型 -->
          <div v-if="item.type === 'date' && formData[item.end]" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              {{ formData[item.end] ? `${formData[item.start]} 至 ${formData[item.end]}` : '' }}
            </span>
          </div>
          <!-- 输入框 -->
          <div
            v-if="(item.type === 'normalInput' && formData[item.name] && formData[item.name].length > 0)"
            class="item"
          >
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              {{ formData[item.name] }}
            </span>
          </div>
          <!-- 下拉多选 -->
          <div v-if="(item.type === 'multipleSelect' && formData[item.name] && formData[item.name].length > 0)" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              {{ filterArr(formData[item.name], item).map(i => {return i.label}).join('，') }}
            </span>
          </div>
          <!-- 级联菜单 -->
          <div v-if="(item.type === 'cascaderSelect' && formData[item.name] && formData[item.name].length > 0)" class="item">
            <span class="name">
              {{ item.label }}
            </span>
            <span class="value">
              {{ formData[item.name].map(item => item[item.length - 1]).join(',') }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataIcon from '../dataIcon/index.vue'
import store from '../../../store/index'
import { getAccount } from '@/api/comprehensiveSearch/index.js'
export default {
  components: {
    dataIcon
  },
  props: {
    formData: {
      type: Object,
      require: false,
      default() {
        return {}
      }
    },
    searchList: {
      type: Array,
      default: () => []
    },
    showHide: {
      type: Boolean,
      default: true
    },
    mediaChannel: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      searchForm: {},
      itemActive: [],
      translationSearchList: JSON.parse(JSON.stringify(this.searchList)),
      date: [],
      loadingSelectMedia: false, // 下拉框筛选loading
      mediaList: [], // 媒体列表
      mediaSelectCheckedList: [],
      mediaCheckedList: [],
      mediaGounpListTC: []
    }
  },
  computed: {
    dateValue: {
      get() {
        return this[this.dynamicModel + 'Value']
      },
      set(value) {
        this[this.dynamicModel + 'Value'] = value
      }
    },
    mediaGounpList() {
      return store.getters.mediaGounpList
    }
  },
  watch: {
    formData: {
      handler: function(newValue, oldValue) {
        this.$emit('change', newValue)
      },
      deep: true
    },
    searchList: {
      handler: async function(newValue, oldValue) {
        this.translationSearchList = JSON.parse(JSON.stringify(this.searchList))
        if (this.searchList && this.searchList[7] && this.searchList[7].vModel && this.searchList[7].vModel.mediaInfos && this.searchList[7].vModel.mediaInfos.length > 0) {
          const params = {
            dataSourceType: [this.searchList[7].mediaChannel],
            uuidList: this.searchList[7].vModel.mediaInfos
          }
          const mediaListTemp = await getAccount(params)
          this.mediaList = mediaListTemp.data ? mediaListTemp.data : []
        }
      },
      deep: true,
      immediate: true
    },
    mediaGounpList: {
      handler: function(newValue, oldValue) {
        this.mediaGounpListTC = newValue
        this.translationSearchList.forEach(i => {
          if (i.name == 'mediaIds') {
            i.options = newValue
          }
        })
      },
      deep: true,
      immediate: true
    },
    mediaChannel: {
      handler: function(newValue, oldValue) {
        this.mediaList = []
        this.mediaCheckedList = []
        if ((newValue && oldValue) || (!newValue && oldValue)) {
          this.translationSearchList[7].vModel.mediaInfos = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 媒体检索
    remoteMethod(v) {
      if (!this.mediaChannel) {
        this.$message({
          type: 'warning',
          message: '请先选择数据渠道！'
        })
        return
      }
      if (v !== '') {
        this.getMediaList(v)
      }
    },
    // 查询媒体
    getMediaList(v) {
      this.loadingSelectMedia = true
      const params = {
        currentPage: 1,
        pageSize: 100,
        dataSourceType: [this.mediaChannel],
        matchText: v,
        approveStatus: 2
      }
      getAccount(params, { pageNum: 1, pageSize: 100 }).then(res => {
        this.loadingSelectMedia = false
        if (res && res.data) {
          this.mediaList = res.data
        }
      })
    },
    itemActiveList(val) {
      this.itemActive = val
      this.$forceUpdate()
    },
    enterSearch(input, arr, index) {
      // console.log(input);
      let filterArray = []
      if (input) {
        var regex = new RegExp(input, 'i')
        filterArray = arr.filter(i => {
          return regex.test(i.label)
        })
        this.translationSearchList[index].retrievalTC = false
      } else {
        filterArray = arr
        this.translationSearchList[index].retrievalTC = true
      }
      this.translationSearchList[index].optionsTC = filterArray
      this.$forceUpdate()
    },
    enterSearchMedia(input, arr, index) {
      // console.log(input);
      let filterArray = []
      if (input) {
        var regex = new RegExp(input, 'i')
        filterArray = arr.filter(i => {
          return regex.test(i.label)
        })
        this.translationSearchList[index].retrievalTC = false
      } else {
        filterArray = arr
        this.translationSearchList[index].retrievalTC = true
      }
      this.mediaGounpListTC = filterArray
      this.$forceUpdate()
    },
    removeItem(i, index) {
      this.$confirm(`此操作将永久删除“${i.label}”, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('removeItem', i, index)
      }).catch(() => {

      })
    },
    filterArr(A, B) {
      const newArr = B.options.filter(itemB => {
        return A.includes(itemB.value)
      })
      return newArr
    },
    filterArrMedia(A) {
      const newArr = this.mediaGounpList.filter(itemB => {
        return A.includes(itemB.value)
      })
      return newArr
    },
    selectTreeChange(val, name) {
      console.log(val)
      const arr = []
      val.forEach(i => {
        arr.push(`${i[0]}-${i[1]}`)
      })
      this.formData[name] = arr
    },
    dataChange(val, end, start) {
      if (val) {
        val[1] = val[1].substr(0, 10) + ' 23:59:59'
        this.formData[start] = val[0]
        this.formData[end] = val[1]
      } else {
        this.formData[start] = ''
        this.formData[end] = ''
      }
    },
    inputChange(val, name) {
      this.formData[name] = val
      this.$emit('upSearchList', this.translationSearchList)
    },
    selectChangeMedia(val, name) {
      if (val.length > 0) {
        this.mediaList.forEach(i => {
          for (const j of val) {
            if (i.uuid == j) {
              this.mediaCheckedList.push(i)
            }
          }
        })
        this.mediaCheckedList = Array.from(new Set(this.mediaCheckedList))
      } else {
        this.mediaCheckedList = []
      }

      this.formData[name] = this.mediaCheckedList
      this.$emit('upSearchList', this.translationSearchList)
    },
    validateValues(min, max, item) {
      this.formData[item.name] = min
      this.formData[item.name2] = max
      this.$emit('upSearchList', this.translationSearchList)
    },
    allClick(item, type) {
      if (type === 'manyChoose') {
        this.formData[item.name] = []
      } else {
        this.formData[item.name] = undefined
      }
    },
    dropdownClick(j, name) {
      if (this.formData[name].some(obj => Object.values(obj).includes(j.name))) {
        // 已存在点击删除
        this.formData[name].forEach(i => {
          if (i.name === j.name) {
            if (i.children.length === j.children.length) {
              i.children.forEach(x => {
                this.itemActive.splice(this.itemActive.indexOf(x.name), 1)
              })
              this.formData[name].forEach((i, index) => {
                if (i.name === j.name) {
                  this.formData[name].splice(index, 1)
                }
              })
            } else {
              this.formData[name].forEach((i, index) => {
                if (i.name === j.name) {
                  i.children = j.children
                  i.children.forEach(x => {
                    if (this.itemActive.indexOf(x.name) === -1) {
                      this.itemActive.push(x.name)
                    }
                  })
                }
              })
            }
          }
        })
      } else {
        // 不存在
        this.formData[name].push(JSON.parse(JSON.stringify(j)))
        this.formData[name].forEach(i => {
          if (i.name === j.name) {
            i.children.forEach(x => {
              this.itemActive.push(x.name)
            })
          }
        })
      }
    },
    channelAll(item) {
      this.formData[item.name] = []
      this.itemActive = []
    },
    dropdownItemClick(j, c, name) {
      if (this.formData[name].some(obj => Object.values(obj).includes(j.name))) {
        // 存在
        this.formData[name].forEach(i => {
          if (i.name === j.name) {
            if (i.children.findIndex(object => { return object.name === c.name }) === -1) {
              i.children.push(c)
            } else {
              i.children.splice(i.children.findIndex(object => { return object.name === c.name }), 1)
            }
          }
        })
      } else {
        // 不存在
        this.formData[name].push(
          {
            name: j.name,
            icon: j.icon,
            children: [c]
          }
        )
      }
      if (this.itemActive.indexOf(c.name) === -1) {
        this.itemActive.push(c.name)
      } else {
        this.itemActive.splice(this.itemActive.indexOf(c.name), 1)
      }
      if (j.children.length > 0) {
        this.formData[name].forEach((i, index) => {
          if (j.name === i.name && i.children.length <= 0) {
            this.formData[name].splice(index, 1)
          }
        })
      }
    },
    findObjectIndexesWithValues(A, B, propertyKey) {
      return A.flatMap((value) => {
        const indexes = []
        for (let i = 0; i < B.length; i++) {
          if (B[i][propertyKey] === value) {
            console.log(i)
            indexes.push(i)
          }
        }
        return indexes.length > 0 ? indexes : null
      })
    },
    // 多选
    changeMultiple(v, name) {
      if (v == '全部') {
        this.formData[name] = []
      } else {
        if (this.formData[name].indexOf(v) == -1) {
          this.formData[name].push(v)
        } else {
          this.formData[name].splice(this.formData[name].indexOf(v), 1)
        }
        if (this.formData[name].indexOf('全部') != -1) {
          this.formData[name].splice(0, 1)
        }
      }
      this.$forceUpdate()
    },
    // 单选
    dateType(value, name, Bo) {
      if (this.formData[name] === value) {
        if (Bo) {
          this.formData[name] = null
        }
      } else {
        this.formData[name] = value
      }
      console.log(this.formData[name])
    },

    addClickHandler(item) {
      this.$emit('addClick', item)
    },

    // 选择树
    checkChangeClick(data) {
      const datalist = this.$refs.tree[0].getCheckedNodes()
      data.vModel[data.vModelName] = []
      data.selectTree = []
      datalist.forEach((item) => {
        if (item.parent_id) {
          data.vModel[data.vModelName].push(item.user_name)
          data.selectTree.push(item)
        }
      })
      this.formData[data.name] = data.vModel[data.vModelName]
      // data.assigner_A = []
      // data.assigner_A = data.selectTree.map((item) => {
      //   if (item.parent_id) return item.parent_id + '-' + item.user_id
      //   else return null
      // }).filter(Boolean).join(',')
    },
    // 清空树形结构
    treeClear() {
      this.$refs.tree[0].setCheckedNodes([])
    },
    // 移除标注员
    removeTag(delName, item) {
      item.selectTree = this.selectTree.filter(item => item.user_name !== delName)
      this.$refs.tree.setCheckedNodes(item.selectTree)
    }
  }
}
</script>
<style lang="scss">
.popover {
  ::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 5px;
  }
  ::-webkit-scrollbar {
      width: 8px;
  }
  ::-webkit-scrollbar-track {
    background-color: #F5F5F5;
    border-radius: 5px;
  }
  .el-input {
    margin-bottom: 20px;
  }
  .btnText {
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    width: 100% !important;
    height: 38px;
    padding: 0 10px;
    text-align: center;
    line-height: 38px;
    overflow: hidden; /* 确保溢出的内容会被隐藏 */
    white-space: nowrap; /* 确保文本在一行内显示，不换行 */
    text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
    cursor: pointer;
    margin-right: 20px;
    color: #86909C;
    font-size: 14px;
  }
  .active {
    color: #3b70ff; // 主题配置
    background-color: #dee7ff;
  }
  .el-button--primary {
    background: #1294AF; // 主题配置
    border: 1px solid #1294AF;
    padding: 0;
    font-size: 16px;
    width: 76px;
    height: 36px;
  }
  .el-button--default {
    padding: 0;
    width: 76px;
    height: 36px;
    border: 1px solid #1294AF; // 主题配置
    background-color: #fff;
    color: #3b70ff; // 主题配置
    font-size: 16px;
    margin-left: 20px;
  }
  .el-row {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #585858;
    margin-bottom: 15px;
  }
}
</style>
<style lang="scss" scoped>
.search-index {
  ::v-deep .el-form-item {
    margin-bottom: 16px !important;
  }
  ::v-deep .el-form-item__label {
    line-height: 32px !important;
  }
  ::v-deep .el-form-item__content {
    line-height: 32px !important;
  }
  .all {
    display: inline-block;
    padding: 0px 10px;
    height: 33px;
    line-height: 33px;
    cursor: pointer;
    color: #4E5969;
    text-align: center;
    margin-right: 10px;
    border-radius: 2px;
  }
  .all_active {
    background: #dee7ff;
    color: #165DFF;
  }
  .dropdown {
    .dropdown-item {
      margin-bottom: 16px;
    }
    .el-dropdown-link {
      padding: 0 10px;
      display: inline-block;
      cursor: pointer;
      color: #4E5969;
      font-size: 14px;
    }
    .dropdown-icon {
      font-size: 16px;
      float: left;
      position: relative;
      top: 1px;
    }
    .active {
      background-color: #dee7ff;
      line-height: 28px;
      border-radius: 3px;
      .el-dropdown-link {
        color: #3b70ff !important;
      }
    }
  }
  ::v-deep .el-dropdown {
    .el-dropdown-link {
       cursor: pointer;
       color: #4E5969;
       font-size: 14px;
    }
    .dropdown-icon {
      float: left;
      font-size: 16px;
      position: relative;
      top: 1px;
    }
  }
}
.el-dropdown-menu {
  box-sizing: border-box;
  padding: 5px 10px 10px 10px;
}
::v-deep .el-dropdown-menu__item {
  padding: 0 10px;
  margin-top: 5px;
  &:hover {
    color: #606266 !important;
    background-color: #fff;
  }
  &:focus {
      background-color: #fff;
      color: #606266 !important;
  }
}
::v-deep .active_item {
  background-color: #dee7ff !important;
  color: #3b70ff !important;
  line-height: 28px;
  border-radius: 3px;
  padding: 0 10px;
  &:hover {
    color: #3b70ff !important;
    background-color: #dee7ff;
  }
  &:focus {
      background-color: #dee7ff;
      color: #3b70ff !important;
  }
}
.manyChoose, .singleChoice {
  .dropdown-icon {
    // float: left;
    display: inline-block;
    width: 12px !important;
    height: 12px !important;
  }
  .btnText {
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    font-size: 14px;
    color: #4E5969;
    padding: 0px 10px;
    height: 33px;
    line-height: 33px;
    margin-right: 10px;
    ::v-deep .el-icon-circle-close {
      display: none;
    }
    &:hover {
      ::v-deep .el-icon-circle-close {
        display: inline-block;
      }
    }
  }
  .active {
    background: #dee7ff;
    color: #165DFF;
  }
}
.gengduo {
  color: #165DFF;
  cursor: pointer;
  margin-left: 10px;
  i{
    display: inline-block;
    font-style: normal;
    margin-right: 10px;
    cursor:default;
    background: #4066ff;
    color: #fff;
    padding: 0 5px;
    height: 32px;
    border-radius: 4px;
  }
}
.searchLits {
  .searchLits_item {
    display: inline-block;
  }
  .item {
    display: inline-block;
    background-color: #e7f2ff;
    margin-right: 10px;
    padding: 3px 10px;
    margin-bottom: 10px;
    .name {
      font-size: 14px;
    }
    .value {
      font-size: 14px;
      color: #2c7efb;
    }

  }
}
::v-deep .date {
  height: 32px !important;
  line-height: 32px !important;
  .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
    position: relative;
    top: 1px;
  }
  .el-input__icon {
    line-height: 26px !important;
  }
  .el-range-separator {
    line-height: 26px !important;
  }
}
::v-deep .input {
  height: 32px !important;
  line-height: 32px !important;
  .el-input__inner {
    width: 240px;
    height: 32px !important;
    line-height: 32px !important;
    position: relative;
    top: 1px;
  }
}
::v-deep .select {
  height: 32px !important;
  line-height: 32px !important;
  .el-input__inner {
    width: 240px;
    height: 32px !important;
    line-height: 32px !important;
    position: relative;
    top: 1px;
  }
  .el-input__icon {
    line-height: 32px !important;
  }
}
::v-deep .select-media {
  .el-input__inner {
    width: 100%;
  }
}
::v-deep .tree_select{
  .el-select-dropdown__item{
    height: auto;
    padding-bottom: 10px;
  }
}
::v-deep .required {
  .el-form-item__label {
    position: relative;
    &::before {
      content: '*';
      left: 100px;
      top: 0;
      color: #f56c6c;
      position: absolute;
    }
  }
}

.cascaderSelect {
  ::v-deep .el-input__inner {
    width: 300px;
    max-height: 82px !important;
    overflow-y: auto;
  }
  ::v-deep .el-cascader__tags {
    max-height: 80px;
    overflow-y: auto;
  }
}
</style>

父组件中引用：

<template>
    <searchForm
      ref="searchList"
      :show-hide="show"
      :form-data="formData.articleQuerySaveParams"
      :search-list="searchListLeft"
      @change="formDatdcCange"
    />
</template>
data() {
    show: true,
    formData: {
        articleQuerySaveParams: {
          keywordsText: '', // 热词
          mentalityMinSocre: '', // 心态最小分值
          mentalityType: '', // 心态分类
          mentalitymaxSocre: '', // 心态最小分值
          keywordExps: [], // 表达式关键词
          dataChannelSave: [], // 数据渠道
          dataCountry: [], // 国家
          dataLanguages: [], // 语种
          dataMark: [], // 命中位置
          isForeignMedia: "", // 媒体类别
          dataMmotion: [], // 情感倾向
          dataType: [], // 数据类型,
          dataSensitive: [], // 敏感分类
          dataSH: [], // 涉华类别
          chineseStance: [], // 涉华立场
          mediaIds: [],
          searchDesignatedLabelIds: [], // 指定媒体组
          esInertStartDate: '', // 入库时间-开始
          esInertEndDate: '', // 入库时间-结束
          hotKeywords: '', // 热点主题关键词
          // endDate: this.$utils.formatDate(new Date()), // 结束时间
          // startDate: this.$utils.getNextDate(new Date(), -30) // 开始时间
          endDate: '', // 结束时间
          startDate: '', // 开始时间
          websitename: '', // 站点名称
          username: '', //账号名称

        },
        similarityDeduplication: false, // 不看重复
        isAsc: 'desc', // 排序类型/升降asc:正序，desc:倒序
        orderByColumn: '', // 二次检索排序类型
        keywordType: '', // 二次检索类型
        keyword: '', // 二次检索关键词
        pageNum: 1, // 当前页数
        pageSize: 30 // 当前页数条数
      },
    searchList: [
        {
        type: 'dropdown',
        label: '数据渠道：',
        name: 'dataChannelSave',
        All: true,
        active: 'itemActive',
        options: [
        {
            "id": 9046,
            "pid": 0,
            "name": "新闻网站",
            "code": "NEWSWEBSITE",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "xwwz-index",
                "id": 9046,
                "channelName": "新闻网站",
                "channelCode": "NEWSWEBSITE",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 1,
                "children": null
            },
            "num": 1,
            "type": null,
            "children": null
        },
        {
            "id": 9049,
            "pid": 0,
            "name": "论坛",
            "code": "",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "lt-index",
                "id": 9049,
                "channelName": "论坛",
                "channelCode": "",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 6,
                "children": null
            },
            "num": 2,
            "type": null,
            "children": [
                {
                    "id": 9094,
                    "pid": 9049,
                    "name": "常规论坛",
                    "code": "LT_REGULARFORUMS",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9094,
                        "channelName": "常规论坛",
                        "channelCode": "LT_REGULARFORUMS",
                        "pid": "9049",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 6,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9097,
                    "pid": 9049,
                    "name": "Reddit",
                    "code": "LT_REDDIT",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9097,
                        "channelName": "Reddit",
                        "channelCode": "LT_REDDIT",
                        "pid": "9049",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 6,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9100,
                    "pid": 9049,
                    "name": "品葱",
                    "code": "LT_SCALLIONS",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9100,
                        "channelName": "品葱",
                        "channelCode": "LT_SCALLIONS",
                        "pid": "9049",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 6,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9103,
                    "pid": 9049,
                    "name": "Threads",
                    "code": "LT_THREADS",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9103,
                        "channelName": "Threads",
                        "channelCode": "LT_THREADS",
                        "pid": "9049",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 6,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                }
            ]
        },
        {
            "id": 9052,
            "pid": 0,
            "name": "Twitter",
            "code": "TWITTER",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "Twitter-index",
                "id": 9052,
                "channelName": "Twitter",
                "channelCode": "TWITTER",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 15,
                "children": null
            },
            "num": 3,
            "type": null,
            "children": null
        },
        {
            "id": 9055,
            "pid": 0,
            "name": "Facebook",
            "code": "FACEBOOK",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "Facebook-index",
                "id": 9055,
                "channelName": "Facebook",
                "channelCode": "FACEBOOK",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 16,
                "children": null
            },
            "num": 4,
            "type": null,
            "children": null
        },
        {
            "id": 9058,
            "pid": 0,
            "name": "微博",
            "code": "WEIBO",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "wb-index",
                "id": 9058,
                "channelName": "微博",
                "channelCode": "WEIBO",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 5,
                "children": null
            },
            "num": 5,
            "type": null,
            "children": null
        },
        {
            "id": 9061,
            "pid": 0,
            "name": "Telegram",
            "code": "TELEGRAM",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "Telegram-index",
                "id": 9061,
                "channelName": "Telegram",
                "channelCode": "TELEGRAM",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 17,
                "children": null
            },
            "num": 6,
            "type": null,
            "children": null
        },
        {
            "id": 9064,
            "pid": 0,
            "name": "音视图",
            "code": "",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "yst-index",
                "id": 9064,
                "channelName": "音视图",
                "channelCode": "",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 7,
                "children": null
            },
            "num": 7,
            "type": null,
            "children": [
                {
                    "id": 9127,
                    "pid": 9064,
                    "name": "Tiktok",
                    "code": "YST_TIKTOK",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9127,
                        "channelName": "Tiktok",
                        "channelCode": "YST_TIKTOK",
                        "pid": "9064",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 7,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9130,
                    "pid": 9064,
                    "name": "抖音",
                    "code": "YST_DOUYIN",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9130,
                        "channelName": "抖音",
                        "channelCode": "YST_DOUYIN",
                        "pid": "9064",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 7,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9133,
                    "pid": 9064,
                    "name": "快手",
                    "code": "YST_KUAISHOU",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9133,
                        "channelName": "快手",
                        "channelCode": "YST_KUAISHOU",
                        "pid": "9064",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 7,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9136,
                    "pid": 9064,
                    "name": "YouTube",
                    "code": "YST_YOUTUBE",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9136,
                        "channelName": "YouTube",
                        "channelCode": "YST_YOUTUBE",
                        "pid": "9064",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 7,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9139,
                    "pid": 9064,
                    "name": "Instagram",
                    "code": "YST_INSTAGRAM",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9139,
                        "channelName": "Instagram",
                        "channelCode": "YST_INSTAGRAM",
                        "pid": "9064",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 7,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                }
            ]
        },
        {
            "id": 9067,
            "pid": 0,
            "name": "智库",
            "code": "",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "zk-index",
                "id": 9067,
                "channelName": "智库",
                "channelCode": "",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 2,
                "children": null
            },
            "num": 8,
            "type": null,
            "children": [
                {
                    "id": 9142,
                    "pid": 9067,
                    "name": "报告",
                    "code": "ZK_REPORTS",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9142,
                        "channelName": "报告",
                        "channelCode": "ZK_REPORTS",
                        "pid": "9067",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 2,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9145,
                    "pid": 9067,
                    "name": "专家",
                    "code": "ZK_EXPERT",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9145,
                        "channelName": "专家",
                        "channelCode": "ZK_EXPERT",
                        "pid": "9067",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 2,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9148,
                    "pid": 9067,
                    "name": "大事记",
                    "code": "ZK_EVENT",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9148,
                        "channelName": "大事记",
                        "channelCode": "ZK_EVENT",
                        "pid": "9067",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 2,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                }
            ]
        },
        {
            "id": 9070,
            "pid": 0,
            "name": "知识类",
            "code": "",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "zsl-index",
                "id": 9070,
                "channelName": "知识类",
                "channelCode": "",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 18,
                "children": null
            },
            "num": 9,
            "type": null,
            "children": [
                {
                    "id": 9151,
                    "pid": 9070,
                    "name": "CSDN",
                    "code": "ZSL_CSDN",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9151,
                        "channelName": "CSDN",
                        "channelCode": "ZSL_CSDN",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9154,
                    "pid": 9070,
                    "name": "道客巴巴",
                    "code": "ZSL_DOCBB",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9154,
                        "channelName": "道客巴巴",
                        "channelCode": "ZSL_DOCBB",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9157,
                    "pid": 9070,
                    "name": "豆丁网",
                    "code": "ZSL_DOCIN",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9157,
                        "channelName": "豆丁网",
                        "channelCode": "ZSL_DOCIN",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9160,
                    "pid": 9070,
                    "name": "知识星球",
                    "code": "ZSL_ZSXQ",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9160,
                        "channelName": "知识星球",
                        "channelCode": "ZSL_ZSXQ",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9163,
                    "pid": 9070,
                    "name": "微博问答",
                    "code": "ZSL_WEIBOWENDA",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9163,
                        "channelName": "微博问答",
                        "channelCode": "ZSL_WEIBOWENDA",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9166,
                    "pid": 9070,
                    "name": "悟空问答",
                    "code": "ZSL_WUKONG",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9166,
                        "channelName": "悟空问答",
                        "channelCode": "ZSL_WUKONG",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9169,
                    "pid": 9070,
                    "name": "得到",
                    "code": "ZSL_DEDAO",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9169,
                        "channelName": "得到",
                        "channelCode": "ZSL_DEDAO",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9172,
                    "pid": 9070,
                    "name": "豆瓣",
                    "code": "ZSL_DOUBAN",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9172,
                        "channelName": "豆瓣",
                        "channelCode": "ZSL_DOUBAN",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9175,
                    "pid": 9070,
                    "name": "百度百科",
                    "code": "ZSL_BAIKE",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9175,
                        "channelName": "百度百科",
                        "channelCode": "ZSL_BAIKE",
                        "pid": "9070",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 18,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                }
            ]
        },
        {
            "id": 9073,
            "pid": 0,
            "name": "暗网",
            "code": "DARKWEB",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "aw-index",
                "id": 9073,
                "channelName": "暗网",
                "channelCode": "DARKWEB",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 19,
                "children": null
            },
            "num": 10,
            "type": null,
            "children": null
        },
        {
            "id": 9076,
            "pid": 0,
            "name": "区块链",
            "code": "BLOCKCHAIN",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "qkl-index",
                "id": 9076,
                "channelName": "区块链",
                "channelCode": "BLOCKCHAIN",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 20,
                "children": null
            },
            "num": 11,
            "type": null,
            "children": null
        },
        {
            "id": 9079,
            "pid": 0,
            "name": "网盘类网站",
            "code": "",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "wpl-index",
                "id": 9079,
                "channelName": "网盘类网站",
                "channelCode": "",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 21,
                "children": null
            },
            "num": 12,
            "type": null,
            "children": [
                {
                    "id": 9184,
                    "pid": 9079,
                    "name": "百度网盘",
                    "code": "WPL_BAIDUDISK",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9184,
                        "channelName": "百度网盘",
                        "channelCode": "WPL_BAIDUDISK",
                        "pid": "9079",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 21,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9187,
                    "pid": 9079,
                    "name": "新浪网盘",
                    "code": "WPL_XINLANGDISK",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9187,
                        "channelName": "新浪网盘",
                        "channelCode": "WPL_XINLANGDISK",
                        "pid": "9079",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 21,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                },
                {
                    "id": 9190,
                    "pid": 9079,
                    "name": "阿里网盘",
                    "code": "WPL_ALIDISK",
                    "data": {
                        "createBy": "1",
                        "createTime": "2024-05-30 10:59:00",
                        "updateBy": "1",
                        "updateTime": "2024-05-30 10:59:00",
                        "remark": "",
                        "id": 9190,
                        "channelName": "阿里网盘",
                        "channelCode": "WPL_ALIDISK",
                        "pid": "9079",
                        "delFlag": "0",
                        "parentName": null,
                        "sortNum": 21,
                        "children": null
                    },
                    "num": 0,
                    "type": null,
                    "children": null
                }
            ]
        },
        {
            "id": 9082,
            "pid": 0,
            "name": "电子报纸",
            "code": "NEWSPAPER",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "dzbz-index",
                "id": 9082,
                "channelName": "电子报纸",
                "channelCode": "NEWSPAPER",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 2,
                "children": null
            },
            "num": 13,
            "type": null,
            "children": null
        },
        {
            "id": 9085,
            "pid": 0,
            "name": "APP",
            "code": "APP",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "app-index",
                "id": 9085,
                "channelName": "APP",
                "channelCode": "APP",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 3,
                "children": null
            },
            "num": 14,
            "type": null,
            "children": null
        },
        {
            "id": 9088,
            "pid": 0,
            "name": "微信公众号",
            "code": "WECHAT",
            "data": {
                "createBy": "1",
                "createTime": "2024-05-30 10:59:00",
                "updateBy": "1",
                "updateTime": "2024-05-30 10:59:00",
                "remark": "wxgzh-index",
                "id": 9088,
                "channelName": "微信公众号",
                "channelCode": "WECHAT",
                "pid": "0",
                "delFlag": "0",
                "parentName": null,
                "sortNum": 4,
                "children": null
            },
            "num": 15,
            "type": null,
            "children": null
        }
    ]
      },
      // 语种：
      {
        type: 'manyChoose',
        label: '语种：',
        name: 'dataLanguages',
        All: true,
        TC: true,
        retrievalInput: '',
        retrievalTC: true,
        optionsTC: this.dict.type.article_data_languages,
        options: this.dict.type.article_data_languages
      },
      // 敏感分类：
      {
        type: 'manyChoose',
        label: '敏感分类：',
        name: 'dataSensitive',
        All: true,
        options: this.dict.type.article_data_sensitive
      },
      // 情感倾向：
      {
        type: 'manyChoose',
        label: '情感倾向：',
        name: 'dataMmotion',
        All: true,
        options: this.dict.type.article_data_emotion
      },
      // 媒体类别：
      {
        type: 'singleChoice',
        label: '媒体类别：',
        name: 'isForeignMedia',
        All: true,
        options: [
          {
            label: '境内',
            value: '0'
          },
          {
            label: '境外',
            value: '1'
          },
        ]
      },
      // 国家：
      {
        type: 'manyChoose',
        label: '国家地区：',
        TC: true,
        All: true,
        retrievalInput: '',
        name: 'dataCountry',
        retrievalTC: true,
        optionsTC: this.dict.type.article_data_country,
        options: this.dict.type.article_data_country
      },
      // 发布时间：
      {
        type: 'date',
        label: '发布时间：',
        end: 'endDate',
        start: 'startDate',
        vModel: { releaseTime: [开始时间, 结束时间] },
        vModelName: 'releaseTime',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      },
      // 数据类型：
      {
        type: 'manyChoose',
        label: '数据类型：',
        name: 'dataType',
        All: true,
        options: this.dict.type.article_data_type
      },
      // 涉华类别：
      {
        type: 'manyChoose',
        label: '涉华类别：',
        name: 'dataSH',
        All: true,
        options: this.dict.type.article_data_sh
      },
      // 涉华立场：
      {
        type: 'manyChoose',
        label: '涉华立场：',
        name: 'chineseStance',
        All: true,
        options: this.dict.type.sys_chinese_stance
      },
      // 指定媒体组：
      {
        type: 'manyChoose-media',
        label: '指定媒体组：',
        name: 'searchDesignatedLabelIds',
        Add: true,
        All: true,
        options: [],
        TC: true,
        retrievalInput: '',
        retrievalTC: true,
        optionsTC: []
      },
      // 命中位置：
      {
        type: 'manyChoose',
        label: '命中位置：',
        name: 'dataMark',
        All: true,
        options: this.dict.type.article_data_mark
      }
    ]
}
methods: {
    formDatdcCange(value) {
      console.log('搜索参数变化时', value)
    },
}

注意事项：

searchList中的每一项name要与form-data对象中的字段key值对应，show-hide设为false为收起状态。

效果图：

收起状态