cnhis-design-vue 2.1.58 → 2.1.59

package/packages/table-filter/src/classification/Classification-com.vue

@@ -1,1756 +1,1756 @@
-<template>
-  <div :class="['classification', 'classificationIndex-' + classificationIndex, isPackUp ? 'upack-up-wrap' : '']" :style="dynamicStyle">
-    <template v-if="classificationIndex === 0">
-      <div
-        class="tree-type classify-0"
-        :style="{
-          width: classificationWidth + 'px',
-          paddingBottom: conditionType === 'keyword' ? '80px' : 0
-        }"
-        v-flexible-resize="{
-          mode: 'VR',
-          onMove: changeWidth,
-          onEnd: saveWidth
-        }"
-      >
-        <div class="header" v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1">
-          <span @click="handleModeChange" v-if="hideConditionChangeBtn != 1">
-            <a-icon type="swap" />
-            {{ '切换' }}
-          </span>
-          <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
-            <a-icon type="setting" />
-            {{ '设置' }}
-          </span>
-        </div>
-        <ul class="tree">
-          <template v-for="(item, index) in treeData">
-            <li
-              :key="index"
-              class="tree-item"
-              :class="{
-                'tree-header': index === 0 || !item.children || item.children.length === 0
-              }"
-              v-if="index === 0 || !item.children || item.children.length === 0 || (item.children && item.children.filter(i => i.isShow).length !== 0)"
-            >
-              <template v-if="index === 0 || !item.children || item.children.length === 0">
-                <span class="child-item header-item" :class="{ selected: item.selected || conditionSid.indexOf('all_data') !== -1 }" @click="handleItemClick(item)"
-                  >{{ item.name }}
-                  <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-                </span>
-              </template>
-              <template v-else>
-                <span class="parent" :class="{ open: item.open }" @click="handleFold(item)">
-                  <span>
-                    {{ item.name }}
-                    <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-                  </span>
-                  <a-icon :type="item.open ? 'down' : 'right'" />
-                </span>
-                <template v-if="item.open">
-                  <div class="children" v-for="(child, cIndex) in item.children.filter(i => i.isShow)" :key="cIndex">
-                    <a-tooltip placement="right" v-if="child.isShow">
-                      <template slot="title">
-                        <span>{{ tooltipTilte(child) }}</span>
-                      </template>
-                      <span
-                        class="child-item"
-                        :class="{
-                          selected: child.selected,
-                          disabled: !child.digital && getCondiTionDigital
-                        }"
-                        @click="handleItemClick(child, cIndex, item, index)"
-                      >
-                        <span class="child-item-name">
-                          {{ child.name | fmtChildName(child.isPublic) }}
-                        </span>
-                        <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
-                        <a-icon type="check" v-if="child.selected" />
-                      </span>
-                    </a-tooltip>
-                  </div>
-                </template>
-              </template>
-            </li>
-          </template>
-        </ul>
-        <div class="tree-type-footer" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
-          <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
-          <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
-            <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
-            清空筛选
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-if="classificationIndex === 1">
-      <div
-        class="tile-type classify-1"
-        v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1 || hideConditionChangeSetting != 1 || originConditionList.filter(item => item.isShow).length > 0"
-      >
-        <div class="header" v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1">
-          <span class="all-data" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })" :class="{ selected: conditionSid.indexOf('all_data') !== -1 }">
-            全部数据
-            <template v-if="allObj.digital || allObj.digital === 0"> ({{ allObj.digital || 0 }}) </template>
-          </span>
-          <div class="right-setting">
-            <span @click="handleModeChange" style="margin-right: 30px;" v-if="hideConditionChangeBtn != 1">
-              <a-icon type="swap" />
-              {{ '切换' }}
-            </span>
-            <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
-              <a-icon type="setting" />
-              {{ '设置' }}
-            </span>
-          </div>
-        </div>
-        <ul
-          class="tile"
-          :style="{
-            borderBottom: conditionType === 'keyword' && hideClearConditionChange != 1 ? '1px solid #d5d5d5' : 0
-          }"
-        >
-          <template v-for="(item, index) in treeData.slice(1)">
-            <li class="tile-item" :key="index" v-if="item.children && item.children.length > 0">
-              <template v-if="!item.children || item.children.length === 0">
-                <span class="child-item" style="padding-left: 17px;" :class="{ selected: item.selected }" @click="handleItemClick(item)"
-                  >{{ item.name }}
-                  {{ item.digital }}
-                  <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-                </span>
-              </template>
-              <template v-else>
-                <!-- <text-over-tooltip
-                refName="digitalTitle"
-                class="parent digitalTitle"
-                :content="
-                  item.name +
-                    (countCondition == 1 && (item.digital || item.digital === 0)
-                      ? ' (' + (item.digital || 0) + ')'
-                      : '')
-                "
-                v-if="item.children.filter(i => i.isShow).length !== 0"
-              ></text-over-tooltip> -->
-                <span class="parent ellips">{{ item.name }}</span>
-                <div class="children">
-                  <template v-for="(child, cIndex) in item.children">
-                    <span
-                      v-if="child.isShow"
-                      :key="cIndex"
-                      class="child-item"
-                      :class="{
-                        selected: child.selected,
-                        disabled: !child.digital && getCondiTionDigital
-                      }"
-                      @click="handleItemClick(child, cIndex, item, index)"
-                      >{{ child.name | fmtChildName(child.isPublic) }}
-                      <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
-                    </span>
-                  </template>
-                </div>
-              </template>
-            </li>
-          </template>
-        </ul>
-        <div class="selected-list" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
-          <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
-          <template v-for="(item, index) in treeData.slice(1)">
-            <div class="selected-item" v-if="!item.children || item.children.length === 0" :key="item.sid">
-              {{ item.name }}
-              <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-              <a-icon type="close" @click="handleItemClick(item)" />
-            </div>
-            <template v-else>
-              <template v-for="(child, cIndex) in item.children">
-                <div class="selected-item" v-if="child.selected" :key="child.sid">
-                  {{ child.name }}
-                  <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
-                  <a-icon type="close" @click="handleItemClick(child, cIndex, item, index)" />
-                </div>
-              </template>
-            </template>
-          </template>
-          <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
-            <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
-            清空筛选
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-if="classificationIndex === 2">
-      <div class="select-type classify-2" ref="selectType">
-        <span class="title" @click="() => toggleSelect()">
-          <a-tooltip placement="top">
-            <template slot="title">
-              <span>{{ titleName }}</span>
-            </template>
-            <span>{{ titleName }}</span>
-          </a-tooltip>
-          <a-icon :type="selectShow ? 'up' : 'down'" />
-        </span>
-        <div class="main-wrapper" v-if="selectShow">
-          <ul class="tree" :style="{ padding: conditionType === 'keyword' ? '40px 0' : '40px 0 0' }">
-            <template v-for="(item, index) in treeData">
-              <li
-                :key="index"
-                class="tree-item"
-                :class="{
-                  'tree-header': index === 0 || !item.children || item.children.length === 0
-                }"
-                v-if="index === 0 || !item.children || item.children.length === 0 || (item.children && item.children.filter(i => i.isShow).length !== 0)"
-              >
-                <template v-if="index === 0 || !item.children || item.children.length === 0">
-                  <span class="child-item child-header header-item" :class="{ selected: item.selected || conditionSid.indexOf('all_data') !== -1 }" @click="handleItemClick(item)"
-                    >{{ item.name }}
-                    <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-                  </span>
-                  <div class="footer">
-                    <span @click="handleModeChange" v-if="hideConditionChangeBtn != 1">
-                      <a-icon type="swap" />
-                      {{ '切换' }}
-                    </span>
-                    <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
-                      <a-icon type="setting" />
-                      {{ '设置' }}
-                    </span>
-                  </div>
-                </template>
-                <template v-else>
-                  <span class="parent" :class="{ open: item.open }" @click="handleFold(item)" v-if="item.children.filter(i => i.isShow).length !== 0">
-                    {{ item.name }}{{ item.digital || item.digital === 0 ? '(' + item.digital + ')' : '' }}
-                    <a-icon :type="item.open ? 'down' : 'right'" />
-                  </span>
-                  <template v-if="item.open">
-                    <div class="children" v-for="(child, cIndex) in item.children.filter(i => i.isShow)" :key="cIndex">
-                      <a-tooltip placement="right" v-if="child.isShow">
-                        <template slot="title">
-                          <span>{{ tooltipTilte(child) }}</span>
-                        </template>
-                        <span
-                          class="child-item"
-                          :class="{
-                            selected: child.selected,
-                            disabled: !child.digital && getCondiTionDigital
-                          }"
-                          @click="handleItemClick(child, cIndex, item, index)"
-                        >
-                          <span>
-                            {{ child.name | fmtChildName(child.isPublic) }}
-                            <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
-                          </span>
-                          <a-icon type="check" v-if="child.selected" />
-                        </span>
-                      </a-tooltip>
-                    </div>
-                  </template>
-                </template>
-              </li>
-            </template>
-          </ul>
-          <div class="select-type-footer" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
-            <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
-            <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
-              <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
-              清空筛选
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-if="classificationIndex === 3">
-      <div
-        class="group-type classify-3"
-        v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1 || hideConditionChangeSetting != 1 || originConditionList.filter(item => item.isShow).length > 0"
-      >
-        <div class="header" v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1">
-          <span class="all-data" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })" :class="{ selected: conditionSid.indexOf('all_data') !== -1 }">
-            全部数据
-            <template v-if="allObj.digital || allObj.digital === 0"> ({{ allObj.digital || 0 }}) </template>
-          </span>
-          <div class="right-setting">
-            <span @click="handleModeChange" style="margin-right: 30px;" v-if="hideConditionChangeBtn != 1">
-              <a-icon type="swap" />
-              {{ '切换' }}
-            </span>
-            <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
-              <a-icon type="setting" />
-              {{ '设置' }}
-            </span>
-          </div>
-        </div>
-        <div
-          class="group"
-          :style="{
-            borderBottom: conditionType === 'keyword' && hideClearConditionChange != 1 ? '1px solid #d5d5d5' : 0
-          }"
-        >
-          <template v-for="(item, index) in treeData.slice(1)">
-            <template v-if="!item.children || item.children.length === 0">
-              <span :key="item.sid" class="child-item" style="padding-left: 17px;" :class="{ selected: item.selected }" @click="handleItemClick(item)"
-                >{{ item.name }}
-                {{ item.digital }}
-                <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-              </span>
-            </template>
-            <template v-else>
-              <a-select
-                :key="item.sid"
-                :placeholder="item.name + (countCondition == 1 && (item.digital || item.digital === 0) ? ' (' + (item.digital || 0) + ')' : '')"
-                allowClear
-                @change="(value, option) => handleChange(value, option, item, index)"
-                :value="groupSelect(index)"
-                option-label-prop="label"
-                v-if="item.children.filter(i => i.isShow).length !== 0"
-              >
-                <a-select-option
-                  :value="0"
-                  :label="item.name + (countCondition == 1 && (item.digital || item.digital === 0) ? ' (' + (item.digital || 0) + ')' : '')"
-                  class="classiffication-select-hide"
-                >
-                  {{ item.name }}
-                  <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-                </a-select-option>
-                <a-select-option
-                  v-for="(child, cIndex) in item.children.filter(i => i.isShow)"
-                  :key="child.sid"
-                  :value="child.sid"
-                  :label="child.name + (countCondition == 1 && visibleDigital(child) ? ' (' + (child.digital || 0) + ')' : '')"
-                  :child="child"
-                  :cIndex="cIndex"
-                  :index="index"
-                  :item="item"
-                  :disabled="!child.digital && getCondiTionDigital"
-                  class="group-select-option"
-                  @click="(value, option) => conditionSid.indexOf(child.sid) !== -1 && handleItemClick(child, cIndex, item, index)"
-                >
-                  <span>
-                    {{ child.name }}
-                    <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
-                  </span>
-                  <a-icon type="check" v-if="child.selected" />
-                </a-select-option>
-              </a-select>
-            </template>
-          </template>
-        </div>
-        <div class="selected-list" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
-          <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
-          <template v-for="(item, index) in treeData.slice(1)">
-            <div class="selected-item" v-if="!item.children || item.children.length === 0" :key="item.sid">
-              {{ item.name }}
-              <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
-              <a-icon type="close" @click="handleItemClick(item)" />
-            </div>
-            <template v-else>
-              <template v-for="(child, cIndex) in item.children">
-                <div class="selected-item" :key="child.sid" v-if="child.selected">
-                  {{ child.name }}
-                  <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
-                  <a-icon type="close" @click="handleItemClick(child, cIndex, item, index)" />
-                </div>
-              </template>
-            </template>
-          </template>
-          <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
-            <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
-            清空筛选
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template v-if="classificationIndex === 4">
-      <div class="group-type classify-3 classify-4" v-if="showIconBtn || hasConditionList">
-        <div class="header" v-if="showIconBtn">
-          <!-- @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })" -->
-          <span class="all-data" :class="{ selected: conditionSid.indexOf('all_data') !== -1 }">
-            {{ showTitleName }}
-            <template v-if="allObj.digital || allObj.digital === 0"> ({{ allObj.digital || 0 }}) </template>
-          </span>
-          <div class="right-setting">
-            <span style="margin-right: 30px;" class="upack-up-btn" @click="isPackUp = !isPackUp">
-              {{ isPackUp ? '展开' : '收起' }}
-              <a-icon style="color:#2d7aff" :type="isPackUp ? 'down' : 'up'" />
-            </span>
-            <span @click="handleModeChange" style="margin-right: 30px;" v-if="hideConditionChangeBtn != 1">
-              <a-icon type="swap" />
-              <!-- {{ $t("1.1.5.2") }} -->
-              切换
-            </span>
-            <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
-              <a-icon type="setting" />
-              <!-- {{ $t("1.1.5.3") }} -->
-              设置
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="classify-4-container" :style="{ height: isPackUp ? 0 : 'auto' }">
-        <search-professional-model
-          ref="professional"
-          v-bind="$attrs"
-          v-on="$listeners"
-          :originConditionList="originConditionList"
-          :displayCategoryList="displayCategoryList"
-          :treeData="treeData"
-          :tableId="tableId"
-          :searchFieldList="searchFieldList"
-          @handleItemClick="handleItemClick"
-          @changeShowName="changeShowName"
-        />
-      </div>
-    </template>
-    <!-- searchFieldList: props -->
-    <!-- saveGetTableCondiTionList 新增，删除 -->
-    <!-- CondiTionListInit 修改？ -->
-
-    <set-classification
-      ref="search"
-      v-bind="$attrs"
-      v-on="$listeners"
-      @changeSearch="changeSearch"
-      @saveGetTableCondiTionList="saveGetTableCondiTionList"
-      @CondiTionListInit="updateTableCondiTion"
-      @setClassifyModal="setClassifyModal"
-      :searchFieldList="searchFieldList"
-      :conditionList="searchConditionList"
-      :displayCategoryList="displayCategoryList"
-      :settingId="settingId"
-      :searchDefName="searchDefName"
-      :tableId="tableId"
-      :classifyModal="classifyModal"
-      :filterApiConfig="filterApiConfig"
-    />
-  </div>
-</template>
-
-<script>
-import flexibleResize from '@/directive/flexibleResize';
-import setClassification from '../components/search-modal/set-classification';
-import { filterApiFn } from '~/table-filter/src/mixins/mixins';
-import { Icon, Tooltip, Select } from 'ant-design-vue';
-import svgIcon from '@/component/svg/index.vue';
-import searchProfessionalModel from './search-professional-model.vue';
-import create from '@/core/create';
-export default create({
-  name: 'Classification',
-  mixins: [filterApiFn],
-  provide() {
-    return {
-      root_isShowResetButton: this.isShowResetButton
-    };
-  },
-  components: {
-    // Search,
-    [Icon.name]: Icon,
-    [Tooltip.name]: Tooltip,
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option,
-    svgIcon,
-    setClassification,
-    searchProfessionalModel
-  },
-  data() {
-    return {
-      classificationWidth: 150,
-      selectShow: false,
-      treeData: [],
-      conditionList: [],
-      originConditionList: [],
-      condiTionParams: {},
-      classificationIndex: 2,
-      curTableId: '',
-      spinning: false,
-      allObj: {
-        name: '全部数据',
-        sid: 'all_data'
-      },
-
-      searchConditionList: [],
-      displayCategoryList: [],
-      settingId: '',
-      searchDefName: '', // no use ?
-      classifyModal: false, // 筛选分类的弹窗
-
-      showTitleName: '全部数据',
-      isPackUp: false // 是否收起 目前只用于 classificationIndex = 4 （专业模式）
-    };
-  },
-  props: {
-    tableId: { type: String },
-    conditionSid: { type: Array },
-    localObj: { type: Object },
-    curClassificationIndex: { type: Number },
-    curClassificationWidth: { type: Number },
-    curConditionList: { type: Array },
-    tableName: { type: String },
-    showRelatedTreeBtn: { type: Boolean }, // 平铺列表按钮
-    conditionType: { type: String }, // 筛选策略，为keyword是关键字优先，否则筛选分类优先
-    hideConditionChangeBtn: { type: Number }, // 是否隐藏切换按钮，1是
-    hideConditionChangeSetting: { type: Number }, // 是否隐藏分类设置 ，1是
-    hideClearConditionChange: { type: Number }, // 是否隐藏清空筛选分类，1是
-    countCondition: { type: Number }, // 是否统计筛选分类，1统计筛选分类，0反之
-    countTabCondition: { type: Number }, // 筛选页签是否进行数量统计，1统计筛选页签，0反之
-    keyword: { type: String },
-    isShowResetButton: { type: Boolean, default: true }, // 是否显示  恢复默认设置 按钮
-    fieldKeys: {
-      type: Array,
-      default: () => []
-    },
-    tabConditionId: { type: String },
-    conditionMap: {
-      type: Object,
-      default: () => {}
-    },
-    filterApiConfig: {
-      type: Object,
-      default: () => {}
-    },
-
-    searchFieldList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    dynamicStyle() {
-      if (this.classificationIndex === 0) {
-        return {
-          marginRight: '8px'
-        };
-      } else if (this.classificationIndex === 2) {
-        return {
-          display: 'inline-block'
-        };
-      }
-      return {};
-    },
-    titleName() {
-      let condition = this.conditionList.filter(item => this.conditionSid.indexOf(item.sid) !== -1);
-      if (this.conditionSid.indexOf('all_data') !== -1) {
-        return '全部数据';
-      } else {
-        let titleArr = [];
-        condition.map(item => {
-          titleArr.push(item.name);
-        });
-        return titleArr.join(',');
-        // return (
-        //   (condition?.displayCategory && condition?.displayCategory !== "未分类"
-        //     ? `${condition?.displayCategory}/`
-        //     : "") + condition?.name
-        // );
-      }
-    },
-    groupSelect() {
-      return function(index) {
-        let treeTemp = this.treeData.slice(1);
-        if (treeTemp[index].children) {
-          const cIndex = treeTemp[index].children.findIndex(item => item.selected);
-          if (cIndex !== -1) {
-            return treeTemp[index].children[cIndex].sid;
-          } else {
-            return 0;
-          }
-        } else {
-          return 0;
-        }
-      };
-    },
-
-    tooltipTilte() {
-      return function(item) {
-        let digitalNum = item.digital === 0 ? `(0)` : item.digital ? `(${item.digital})` : '';
-        const { name, isPublic } = item;
-        const fmtChildName = this.$options.filters.fmtChildName;
-        return fmtChildName(name, isPublic) + digitalNum;
-      };
-    },
-    handleTileAllDataDigital() {
-      if (!this.treeData || !this.treeData.length) return;
-      let item = this.treeData[0];
-      if (item.sid !== 'all_data') return;
-      if (!('digital' in item)) return;
-      return item.digital || 0;
-    },
-
-    // 这两个配置都要请求 筛选分类统计接口
-    getCondiTionDigital() {
-      return this.countCondition === 1 || this.countTabCondition === 1;
-    },
-
-    showIconBtn() {
-      return this.hideConditionChangeBtn != 1 || this.hideConditionChangeSetting != 1;
-    },
-
-    hasConditionList() {
-      return this.originConditionList.filter(item => item.isShow).length > 0;
-    }
-  },
-  mounted() {
-    document.addEventListener('click', e => {
-      let path = e.composedPath && e.composedPath();
-      if (path.includes(this.$refs.selectType)) {
-        return;
-      }
-      this.toggleSelect(false);
-    });
-  },
-  methods: {
-    handleChange(value, option, pItem = {}, pIndex) {
-      if (value) {
-        const { child, cIndex, item, index } = option.data.attrs;
-        this.handleItemClick(child, cIndex, item, index);
-      } else {
-        let cIndex = pItem.children.findIndex(item => this.conditionSid.indexOf(item.sid) !== -1);
-        if (cIndex !== -1) {
-          this.handleItemClick(pItem.children[cIndex], cIndex, pItem, pIndex);
-        }
-        // this.handleItemClick({ sid: "all_data", name: "全部数据" });
-      }
-    },
-    handleFold(item) {
-      if (item.open) {
-        item.open = false;
-      } else {
-        this.$set(item, 'open', true);
-      }
-    },
-    handleItemClick(child, i, p = {}, pi = undefined) {
-      // if (!child.selected) {
-      //   this.clearActive(child.sid, p);
-      //   this.$set(child, "selected", true);
-      // }
-      this.showTitleName = child.name;
-      if (!child.digital && this.countCondition === 1) {
-        return false;
-      }
-      let conditionSidTemp = this.getConditionSid(child.sid, this.conditionSid, p);
-      let selectList = this.initTree(conditionSidTemp);
-      this.toggleSelect(false);
-      // TODO: 选中筛选分类
-      this.$emit('changeSearch', child.sid === 'all_data' ? 'all' : '', child, p, selectList);
-    },
-    clearActive(sid, p = {}) {
-      let conditionSidTemp = this.getConditionSid(sid, this.conditionSid, p);
-
-      this.treeData.forEach(item => {
-        if (item.children) {
-          item.children.forEach(child => {
-            if (conditionSidTemp.indexOf(child.sid) !== -1) {
-              this.$set(child, 'selected', true);
-            } else {
-              this.$set(child, 'selected', false);
-            }
-          });
-        } else {
-          if (conditionSidTemp.indexOf(item.sid) !== -1) {
-            this.$set(item, 'selected', true);
-          } else {
-            this.$set(item, 'selected', false);
-          }
-        }
-      });
-    },
-    // 搜索关键字时重置树结构
-    initTree(conditionSidTemp) {
-      let selectList = [];
-      this.treeData.forEach(item => {
-        if (item.children) {
-          item.children.forEach(child => {
-            if (conditionSidTemp.indexOf(child.sid) !== -1) {
-              this.$set(child, 'selected', true);
-              selectList.push(child);
-            } else {
-              this.$set(child, 'selected', false);
-            }
-          });
-        } else {
-          if (conditionSidTemp.indexOf(item.sid) !== -1) {
-            this.$set(item, 'selected', true);
-            selectList.push(item);
-          } else {
-            this.$set(item, 'selected', false);
-          }
-        }
-      });
-      return selectList;
-    },
-    // 获取已选择的sid
-    getConditionSid(sid, conditionSid, p = {}) {
-      let conditionSidTemp = JSON.parse(JSON.stringify(conditionSid));
-      if (sid === 'all_data') {
-        conditionSidTemp = ['all_data'];
-      } else {
-        if (this.conditionType === 'keyword') {
-          // 关键字搜索多选
-          let aIndex = conditionSidTemp.findIndex(subItem => subItem === 'all_data');
-          if (aIndex !== -1) conditionSidTemp.splice(aIndex, 1); // 存在选中了全部数据，则先删除
-          // 查询是否已经存在，存在则删除一个
-          let cIndex = conditionSidTemp.findIndex(subItem => subItem === sid);
-          if (cIndex !== -1) {
-            conditionSidTemp.splice(cIndex, 1);
-            if (conditionSidTemp.length === 0) conditionSidTemp = ['all_data'];
-          } else {
-            // 查询和已选择的元素是否在同一个父级
-            if (p.children && p.children.length > 0) {
-              cIndex = conditionSidTemp.findIndex(subItem => p.children.findIndex(pItem => pItem.sid === subItem) !== -1);
-            }
-            if (cIndex !== -1) {
-              conditionSidTemp.splice(cIndex, 1);
-            }
-            conditionSidTemp.push(sid);
-          }
-        } else {
-          // 非关键字搜索单选
-          if (conditionSidTemp.indexOf(sid) !== -1) {
-            conditionSidTemp = ['all_data'];
-          } else {
-            conditionSidTemp = [sid];
-          }
-        }
-      }
-
-      return conditionSidTemp;
-    },
-
-    /**
-     * 改变展示方式
-     */
-    handleModeChange() {
-      this.$emit('setCurTreeData', this.treeData);
-      let res = '';
-      if (this.classificationIndex === 4) {
-        res = 0;
-      } else {
-        let index = this.classificationIndex;
-        res = ++index;
-      }
-      this.classificationWidth = 150;
-      this.saveListPersonaSetting(res);
-    },
-
-    // 保存
-    async saveListPersonaSetting(classificationIndex, classificationWidth) {
-      let params = {
-        tableId: this.tableId,
-        setting: JSON.stringify({
-          classificationIndex,
-          classificationWidth
-        })
-      };
-
-      try {
-        let res = await this.handleGetConfigApi(params, 'requestSaveListPersonaSetting');
-        // TODO: 切换筛选分类
-        res && this.$emit('setClassificationIndex', classificationIndex);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-
-    /**
-     * 打开设置弹窗
-     */
-    handleSettingShow() {
-      this.classifyModal = true;
-      // this.$emit("setClassifyModal", true);
-      this.toggleSelect(false);
-    },
-
-    setClassifyModal(val) {
-      this.classifyModal = val;
-    },
-
-    toggleSelect(flag) {
-      if (flag !== undefined) {
-        this.selectShow = flag;
-        return;
-      }
-      this.selectShow = !this.selectShow;
-    },
-
-    getTableCondiTionList(options) {
-      // 删除当前
-      if (options !== undefined && options.type === 'delete' && this.conditionSid.indexOf(options.item.sid) !== -1) {
-        this.$emit('changeSearch', 'all', {
-          name: '全部数据',
-          sid: 'all_data'
-        });
-      }
-      if (!this.tableId) return;
-      if (Object.keys(this.conditionMap).length > 0) {
-        this.treeData = [];
-        let { displayCategoryList = [], conditionList = [] } = this.conditionMap;
-        this.originConditionList = JSON.parse(JSON.stringify(conditionList));
-        this.displayCategoryList = displayCategoryList || [];
-        this.conditionList = JSON.parse(JSON.stringify(conditionList));
-        this.conditionList.unshift({
-          name: '全部数据',
-          sid: 'all_data'
-        });
-        let treeData = [];
-        if (displayCategoryList.length === 0) {
-          displayCategoryList = ['未分类'];
-        }
-        displayCategoryList.forEach(item => {
-          let map = { name: item, children: [] };
-          conditionList.forEach(condition => {
-            if (condition.displayCategory === item || (!condition.displayCategory && item === '未分类' && condition.sid !== 'all_data')) {
-              if (this.conditionSid.indexOf(condition.sid) !== -1) {
-                condition.selected = true;
-                map.open = true;
-              }
-              if (condition.isShow) {
-                map.children.push(condition);
-              }
-            }
-          });
-          if (map.children.length > 0) {
-            treeData.push(map);
-          }
-        });
-        treeData.unshift({
-          name: '全部数据',
-          sid: 'all_data'
-        });
-        this.$set(this, 'treeData', treeData);
-        // 0 模式展开所有分类
-        if (this.classificationIndex === 0) {
-          this.setOpenStatus(true);
-        }
-      }
-    },
-    // 设置分类展开
-    setOpenStatus(value) {
-      this.treeData.forEach(item => {
-        if (item.children && item.children.length) {
-          this.$set(item, 'open', value);
-        }
-      });
-    },
-    async getTableCondiTionDigital(setConditionId = false, keyword = '', fieldKeys = [], tabConditionId = '', countTabCondition) {
-      try {
-        if (!this.countCondition && !this.countTabCondition) {
-          this.$set(this.allObj, 'digital', '');
-          return Promise.resolve();
-        }
-        if (!this.tableId) return Promise.resolve();
-        let params = { tableId: this.tableId, countCondition: this.countCondition };
-        // if (setConditionId && this.conditionSid) {
-        //   params.conditionId = this.conditionSid == "all_data" ? "ALL" : this.conditionSid;
-        // }
-        if (keyword) params.keyword = keyword;
-        if (tabConditionId) params.tabConditionId = tabConditionId;
-        if (countTabCondition) params.countTabCondition = countTabCondition;
-        if (fieldKeys.length > 0) params.fieldKeys = JSON.stringify(fieldKeys);
-        Object.assign(params, this.handleParams()); // 额外条件暂时隐藏，需要等后端确定是否需要该额外条件
-        let res = await this.handleGetConfigApi(params, 'requestTableCondiTionDigital');
-        this.handleConditionDiaital(res);
-        return Promise.resolve(res);
-      } catch (error) {
-        console.log(error, 'getTableCondiTionDigital');
-      }
-    },
-
-    /**
-     * 处理检索分类的统计
-     */
-    handleConditionDiaital(map) {
-      // TODO: 统计分类更新
-      if (this.countTabCondition == 1) this.$emit('setTabConditionNumObj', map);
-      if (!map || Object.keys(map).length === 0) return;
-      // children
-      let resList = [];
-      this.handlePlatTree(this.treeData, resList);
-      for (let key in map) {
-        let useKey = key === 'ALL' ? 'all_data' : key;
-        let matchItem = resList.find(v => v.sid == useKey);
-        if (matchItem) {
-          if (matchItem.sid == 'all_data' && this.countCondition == 1) {
-            this.$set(this.allObj, 'digital', map[key] || 0);
-          }
-          this.$set(matchItem, 'digital', map[key] || 0);
-        }
-      }
-      let conditionSid = this.conditionSid.indexOf('all_data') !== -1 ? ['ALL'] : this.conditionSid;
-      let changeNum = 0;
-      if (this.conditionType === 'keyword') {
-        let num = 0;
-        conditionSid.map(item => {
-          return (num += parseInt(map[item]));
-        });
-        changeNum = num;
-      } else {
-        changeNum = map[conditionSid[0]];
-      }
-      return changeNum;
-    },
-
-    handlePlatTree(list, res) {
-      if (list.length) {
-        list.forEach(item => {
-          if (item.children?.length) {
-            item.children.forEach(v => {
-              res.push(v);
-            });
-          } else {
-            res.push(item);
-          }
-        });
-      }
-    },
-    async tableCondiTionPromise(options) {
-      try {
-        await this.getTableCondiTionList(options);
-        // 查count后台sql太慢，先注释
-        if (this.countCondition === 1 || this.countTabCondition === 1) await this.getTableCondiTionDigital(false, this.keyword, this.fieldKeys, this.tabConditionId, this.countTabCondition); // 开启统计筛选分类
-      } catch (err) {
-        console.log(err);
-      }
-    },
-    handleParams() {
-      if (!this.localObj && Object.keys(this.localObj).length === 0) return {};
-      let obj = {};
-      if (Array.isArray(this.localObj.params)) {
-        this.localObj.params.map(item => {
-          obj[item.p_name] = item.p_value;
-        });
-      }
-      if (Object.keys(this.localObj.extendParams || {}).length) {
-        Object.assign(obj, this.localObj.extendParams);
-        obj.extraParams = JSON.stringify(this.localObj.extendParams);
-      }
-      return obj;
-    },
-    changeWidth({ distance }) {
-      const w = this.classificationWidth + distance;
-      this.classificationWidth = Math.min(Math.max(w, 50), 650);
-    },
-    saveWidth() {
-      const i = this.classificationIndex;
-      const w = this.classificationWidth;
-      this.saveListPersonaSetting(i, w);
-    },
-
-    // =======================
-    async updateTableCondiTion() {
-      await this.getTableCondiTionListNew(this.tableId);
-      this.getTableCondiTionListRequest();
-    },
-
-    async saveGetTableCondiTionList(options) {
-      await this.getTableCondiTionListNew(this.tableId);
-      this.handleGetTableCondiTionList();
-      // 删除，编辑筛选完成后 刷新数据
-      this.$emit('getClassification', options);
-    },
-
-    changeSearch(key, item) {
-      if (key == 'all') {
-        this.searchDefName = '全部数据';
-      } else {
-        this.searchDefName = item.name;
-      }
-      this.$emit('changeSearch', key, item);
-    },
-
-    getTableCondiTionListRequest(first) {
-      this.handleGetTableCondiTionList(first).then(checked => {
-        this.reloadList(checked);
-      });
-    },
-
-    reloadList(item) {
-      // 新增筛选分类后刷新
-      this.$emit('reloadList', item);
-    },
-
-    handleGetTableCondiTionList(first, conditionMap = {}) {
-      let tableId = this.tableId;
-      if (!tableId) return new Promise(resolve => resolve(false));
-      let conditionMapTemp = Object.keys(conditionMap).length > 0 ? conditionMap : this.conditionMap;
-      return new Promise((resolve, reject) => {
-        if (Object.keys(conditionMapTemp).length > 0) {
-          this.searchConditionList = conditionMapTemp.conditionList || [];
-          this.displayCategoryList = conditionMapTemp.displayCategoryList || [];
-          let obj = {
-            conditionList: this.searchConditionList,
-            displayCategoryList: this.displayCategoryList
-          };
-          this.$emit('getQuickSearchListObj', obj);
-          this.settingId = conditionMapTemp.settingId;
-          const checked = this.searchConditionList.find(item => item.isDefault) || {
-            name: '全部数据',
-            sid: 'all_data'
-          };
-          this.searchDefName = checked.name;
-          // if (this.conditionType === "keyword") {
-          this.tabConditionList = conditionMapTemp.tabConditionList || []; // 获取页签tab
-          this.tabIndex = conditionMapTemp.tabConditionList && conditionMapTemp.tabConditionList.findIndex(item => item.isDefault); // 查询默认选中的标签
-          // }
-          // TODO:
-          // this.getTableCondiTionList()
-          if (this.$attrs.tableOptions?.filterCondition?.displayCategory && first) {
-            resolve({
-              name: this.$attrs.tableOptions?.filterCondition?.name,
-              sid: this.$attrs.tableOptions?.filterCondition?.displayCategory
-            });
-          }
-          resolve(checked);
-        } else {
-          resolve({});
-        }
-      });
-    },
-
-    async getTableCondiTionListNew(tableId) {
-      try {
-        if (!tableId) return new Promise(resolve => resolve(false));
-        let params = { tableId };
-        let res = await this.handleGetConfigApi(params, 'requestTableCondiTionList');
-        this.$emit('setConditionMap', res);
-        return Promise.resolve(res);
-      } catch (error) {
-        return Promise.resolve(false);
-      }
-    },
-    /*  */
-    visibleDigital(item) {
-      if (this.countCondition !== 1) return false;
-      return item.digital || item.digital === 0;
-    },
-
-    changeShowName(name) {
-      this.showTitleName = name;
-    },
-
-    /**
-     * 清空专业模式设置的条件
-     */
-    handleClearClassConObj(...arg) {
-      let fn = this?.$refs?.professional?.handleClearConObj;
-      if (typeof fn === 'function') {
-        fn(...arg);
-      }
-    }
-  },
-  filters: {
-    fmtChildName(name, isPublic) {
-      return name && isPublic === '1' ? name.replace(/\(公共\)$/, '') : name;
-    }
-  },
-  activated() {
-    this.tableCondiTionPromise();
-  },
-  watch: {
-    tableId: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val) return;
-        this.getTableCondiTionListRequest(true);
-        if (this.curTableId === val) return;
-        this.curTableId = val;
-        // this.$nextTick(() => {
-        //   console.log("---------watch----------tableCondiTionPromise")
-        //   this.tableCondiTionPromise();
-        // });
-      }
-    },
-    curClassificationIndex: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val === undefined) return;
-        this.classificationIndex = val;
-      }
-    },
-    curClassificationWidth: {
-      immediate: true,
-      handler(val) {
-        this.classificationWidth = Number(val) || 150;
-      }
-    },
-    curConditionList: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val || !val.length || this.treeData === val) return;
-        this.treeData = JSON.parse(JSON.stringify(val));
-      }
-    }
-  },
-  directives: {
-    flexibleResize
-  }
-});
-</script>
-<style lang="less">
-.classiffication-select-hide {
-  display: none !important;
-}
-.group-select-option {
-  display: flex !important;
-  align-items: center;
-  justify-content: space-between;
-}
-.group-select-option.ant-select-dropdown-menu-item-selected {
-  color: #2474ff !important;
-}
-.group-select-option.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
-  color: #2474ff !important;
-}
-
-.classificationIndex-4 {
-  margin-bottom: 10px;
-  border: 1px solid #d5d5d5;
-  border-radius: 4px;
-
-  &.upack-up-wrap {
-    border-bottom: none;
-  }
-}
-</style>
-<style lang="less" scoped>
-.classification {
-  // margin-top: 4px;
-  cursor: pointer;
-  .tree-type {
-    height: 100%;
-    border: 1px solid #d5d5d5;
-    width: 150px;
-    margin-top: 8px;
-    border-radius: 4px;
-    line-height: 32px;
-    padding-bottom: 80px;
-    .tree {
-      height: calc(100% - 32px);
-      overflow: auto;
-      &::-webkit-scrollbar {
-        width: 5px;
-      }
-    }
-    .header {
-      display: flex;
-      justify-content: space-between;
-      padding: 0 10px;
-      font-size: 14px;
-      border-bottom: 1px solid #e6eaef;
-    }
-    .tree-item {
-      border-bottom: 1px solid #d5d5d5;
-      &.tree-header {
-        padding: 0 10px;
-        box-sizing: border-box;
-      }
-      cursor: pointer;
-      .parent {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 10px;
-        font-weight: 600;
-        &.open {
-          background-color: #f2f2f2;
-          border-bottom: 1px solid #d5d5d5;
-        }
-      }
-      .header-item {
-        color: rgba(0, 0, 0, 0.6);
-        box-sizing: border-box;
-        border-bottom: 1px solid transparent;
-        line-height: 1.4;
-        &.selected {
-          color: #2d7aff;
-        }
-        &:hover {
-          color: #2d7aff;
-          // border-color: #2d7aff;
-        }
-        &:active {
-          color: #000000;
-          border-color: transparent;
-        }
-      }
-      .children {
-        display: flex;
-        align-items: center;
-        padding-left: 23px;
-        padding-right: 10px;
-        height: 32px;
-        .child-item {
-          display: flex;
-          align-items: center;
-          // display: inline-block;
-          max-width: 100%;
-          color: #7c7c7c;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: 1.5;
-          border-bottom: 1px solid transparent;
-
-          &:hover {
-            color: #2d7aff;
-            // border-color: #2d7aff;
-          }
-          &.selected {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            color: #2d7aff;
-          }
-          &:active {
-            color: #000000;
-            border-color: transparent;
-          }
-          &.disabled {
-            color: rgba(0, 0, 0, 0.2);
-          }
-          .child-item-content {
-            display: flex;
-            align-items: center;
-          }
-          .child-item-name {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          .digital-span {
-            flex: 1;
-            margin-left: 5px;
-            text-align: left;
-          }
-        }
-      }
-    }
-    .tree-type-footer {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      padding-left: 16px;
-      background: #fff;
-      .selected-num {
-        margin-bottom: 9px;
-      }
-      .selected-item-del {
-        margin-left: 0;
-        margin-bottom: 15px;
-      }
-    }
-  }
-  .tile-type {
-    border: 1px solid #d5d5d5;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    padding: 0 17px;
-    .header {
-      width: 100%;
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
-      // padding: 0 14px;
-      line-height: 44px;
-      border-bottom: 1px solid #d5d5d5;
-      .all-data {
-        margin-right: auto;
-        border-bottom: 1px solid transparent;
-        line-height: 1.4;
-        color: #000;
-        font-size: 14px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        &:hover {
-          color: #2d7aff;
-          // border-color: #2d7aff;
-        }
-        &:active {
-          color: #000000;
-          border-color: transparent;
-        }
-      }
-      .selected {
-        color: #2d7aff;
-      }
-      .right-setting {
-        color: #000;
-        .anticon {
-          color: rgba(0, 0, 0, 0.6);
-          margin-right: 6px;
-        }
-        .upack-up-btn {
-          color: #2d7aff;
-        }
-      }
-    }
-    .tile {
-      border-bottom: 1px solid #d5d5d5;
-      padding: 9px 0;
-    }
-    .tile-item {
-      display: flex;
-      line-height: 38px;
-      cursor: pointer;
-      .parent {
-        width: 135px;
-        padding-right: 16px;
-        color: #000;
-        font-size: 14px;
-        font-weight: 600;
-        font-family: PingFangSC-Medium, PingFang SC;
-        // background: rgba(213, 213, 213, 0.12);
-        // border-right: 1px solid #d5d5d5;
-        max-width: 135px;
-        box-sizing: border-box;
-      }
-      .children {
-        // padding: 0 15px;
-        flex: 1;
-        .child-item {
-          margin: 0 5px;
-          padding: 1px 6px;
-          color: #7c7c7c;
-          font-size: 14px;
-          line-height: 1.5;
-          border-bottom: 1px solid transparent;
-          border-radius: 4px;
-          display: inline-block;
-          &:hover {
-            color: #2d7aff;
-            background-color: rgba(45, 122, 255, 0.1);
-            // border-color: #2d7aff;
-          }
-          &.selected {
-            color: #2d7aff;
-            background-color: rgba(45, 122, 255, 0.1);
-          }
-          &:active {
-            color: #000000;
-            border-color: transparent;
-          }
-          &.disabled {
-            color: rgba(0, 0, 0, 0.2);
-          }
-        }
-      }
-      .child-item {
-        &.selected {
-          color: #2d7aff;
-        }
-      }
-    }
-    .tile-item + .tile-item {
-      // border-top: 1px solid #d5d5d5;
-    }
-  }
-  .select-type {
-    position: relative;
-    width: 100px;
-    line-height: 32px;
-    height: 32px;
-    margin-right: 8px;
-    margin-bottom: 8px;
-    .title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: 0 8px;
-      border: 1px solid #d5d5d5;
-      border-radius: 4px;
-      color: #969696;
-      font-size: 12px;
-      box-sizing: border-box;
-      > span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: #212121;
-        font-size: 14px;
-      }
-      i {
-        font-size: 12px;
-      }
-    }
-    .main-wrapper {
-      position: absolute;
-      z-index: 3000;
-      width: 100%;
-      min-width: 270px;
-      // max-height: 300px;
-      // overflow-y: auto;
-      border: 1px solid #d5d5d5;
-      background-color: #fff;
-      border-radius: 4px;
-      // padding-top: 5px;
-      // padding-bottom: 10px;
-      top: 39px;
-      &::-webkit-scrollbar {
-        width: 5px;
-      }
-      .footer {
-        display: flex;
-        align-items: center;
-        // flex-direction: column;
-        // padding: 0 10px;
-        // border-top: 1px solid #d5d5d5;
-        span:first-child {
-          margin-right: 16px;
-        }
-      }
-    }
-    .tree {
-      padding: 32px 0;
-      /* position: relative; */
-      max-height: 300px;
-      overflow: auto;
-    }
-    .tree-item {
-      border-bottom: 1px solid #d5d5d5;
-      &.tree-header {
-        padding: 0 10px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        position: absolute;
-        width: 100%;
-        background-color: #fff;
-        top: 0;
-        height: 40px;
-      }
-      .child-header {
-        flex: 1;
-      }
-      cursor: pointer;
-      .parent {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 10px;
-        font-weight: 600;
-        &.open {
-          background-color: #f2f2f2;
-          border-bottom: 1px solid #d5d5d5;
-        }
-      }
-      .header-item {
-        color: rgba(0, 0, 0, 0.6);
-        border-bottom: 1px solid transparent;
-        &.selected {
-          color: #2d7aff;
-        }
-        &:hover {
-          color: #2d7aff;
-          // border-color: #2d7aff;
-        }
-        &:active {
-          color: #000000;
-          border-color: transparent;
-        }
-      }
-      .children {
-        display: flex;
-        align-items: center;
-        padding-left: 23px;
-        padding-right: 10px;
-        height: 32px;
-        line-height: 32px;
-        .child-item {
-          display: inline-block;
-          max-width: 100%;
-          color: #7c7c7c;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: 1.5;
-          border-bottom: 1px solid transparent;
-          &.child-header {
-            padding: 0 10px;
-          }
-          &.header-item {
-            color: rgba(0, 0, 0, 0.6);
-            border-bottom: 1px solid transparent;
-            &.selected {
-              color: #2d7aff;
-            }
-            &:hover {
-              color: #2d7aff;
-              // border-color: #2d7aff;
-            }
-            &:active {
-              color: #000000;
-              border-color: transparent;
-            }
-          }
-          &:hover {
-            color: #2d7aff;
-            // border-color: #2d7aff;
-          }
-          &.selected {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            color: #2d7aff;
-          }
-          &:active {
-            color: #000000;
-            border-color: transparent;
-          }
-          &.disabled {
-            color: rgba(0, 0, 0, 0.2);
-          }
-        }
-      }
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-    .select-type-footer {
-      position: absolute;
-      width: 100%;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 40px;
-      padding: 0 12px;
-      background-color: #fff;
-      border-top: 1px solid #d5d5d5;
-    }
-  }
-  .group-type {
-    border: 1px solid #d5d5d5;
-    padding: 0 16px;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    .header {
-      width: 100%;
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
-      // padding: 0 14px;
-      line-height: 44px;
-      // border-bottom: 1px solid #d5d5d5;
-      padding-left: 4px;
-      .all-data {
-        margin-right: auto;
-        color: rgba(0, 0, 0, 0.6);
-        border-bottom: 1px solid transparent;
-        // line-height: 1.4;
-        &:hover {
-          color: #2d7aff;
-          // border-color: #2d7aff;
-        }
-        &:active {
-          color: #000000;
-          border-color: transparent;
-        }
-      }
-      .selected {
-        color: #2d7aff;
-      }
-      .right-setting {
-        color: #000;
-        .anticon {
-          color: rgba(0, 0, 0, 0.6);
-          margin-right: 6px;
-        }
-        .upack-up-btn {
-          color: #2d7aff;
-        }
-      }
-    }
-    .group {
-      padding: 16px 0;
-      border-bottom: 1px solid #d5d5d5;
-      .child-item {
-        color: #7c7c7c;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        border-bottom: 1px solid transparent;
-        margin-right: 8px;
-
-        &:hover {
-          color: #2d7aff;
-          border-color: transparent;
-        }
-        &.selected {
-          color: #2d7aff;
-        }
-        &:active {
-          color: #000000;
-          border-color: transparent;
-        }
-        &.disabled {
-          color: rgba(0, 0, 0, 0.2);
-        }
-      }
-      /deep/ .ant-select {
-        width: 130px;
-        margin-right: 8px;
-        margin-bottom: 8px;
-      }
-    }
-    .select-type-footer {
-      position: absolute;
-      width: 100%;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 32px;
-      padding: 0 12px;
-      background-color: #fff;
-    }
-  }
-  .group-type {
-    border: 1px solid #d5d5d5;
-    padding: 0 16px;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    .header {
-      width: 100%;
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
-      // padding: 0 14px;
-      line-height: 44px;
-      border-bottom: 1px solid #d5d5d5;
-      padding-left: 4px;
-      .all-data {
-        margin-right: auto;
-        color: rgba(0, 0, 0, 0.6);
-        border-bottom: 1px solid transparent;
-        // line-height: 1.4;
-        &:hover {
-          color: #2d7aff;
-          // border-color: #2d7aff;
-          border-color: transparent;
-        }
-        &:active {
-          color: #2d7aff;
-          border-color: transparent;
-        }
-      }
-      .selected {
-        color: #2d7aff;
-      }
-      .right-setting {
-        color: #000;
-        .anticon {
-          color: rgba(0, 0, 0, 0.6);
-          margin-right: 6px;
-        }
-      }
-    }
-    .group {
-      padding: 16px 0;
-      border-bottom: 1px solid #d5d5d5;
-      /deep/ .ant-select {
-        width: 130px;
-        margin-right: 8px;
-        margin-bottom: 8px;
-      }
-    }
-  }
-  .selected-list {
-    padding: 11.5px 6px;
-    display: flex;
-    align-items: center;
-    .selected-item {
-      display: flex;
-      align-items: center;
-      color: #2d7aff;
-      padding: 1px 6.5px 1px 8px;
-      background-color: rgba(45, 122, 255, 0.1);
-      border-radius: 4px;
-      margin-left: 8px;
-      /deep/ .anticon-close {
-        margin-left: 13px;
-        font-size: 12px;
-        color: #2474ff;
-      }
-    }
-  }
-  .selected-num {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
-    line-height: 20px;
-    margin-right: 8px;
-  }
-  .selected-item-del {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: #2474ff;
-    margin-left: 22px;
-    line-height: 20px;
-    .svg-icon-btn {
-      margin-right: 6px;
-    }
-  }
-  .selected-item-del:hover {
-    color: rgba(36, 116, 255, 0.8);
-  }
-  .selected-list {
-    padding: 11.5px 6px;
-    display: flex;
-    align-items: center;
-    .selected-item {
-      display: flex;
-      align-items: center;
-      color: #2d7aff;
-      padding: 1px 6.5px 1px 8px;
-      background-color: rgba(45, 122, 255, 0.1);
-      border-radius: 4px;
-      margin-left: 8px;
-      /deep/ .anticon-close {
-        margin-left: 13px;
-        font-size: 12px;
-        color: #2474ff;
-      }
-    }
-  }
-  .selected-num {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
-    line-height: 20px;
-    margin-right: 8px;
-  }
-  .selected-item-del {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: #2474ff;
-    margin-left: 22px;
-    line-height: 20px;
-    .svg-icon-btn {
-      margin-right: 6px;
-    }
-  }
-  .selected-item-del:hover {
-    color: rgba(36, 116, 255, 0.8);
-  }
-  .disabled {
-    pointer-events: none;
-  }
-
-  .classify-4-container {
-    overflow: hidden;
-    transition: height ease-in 0.2s;
-  }
-  div.classify-4 {
-    margin-bottom: 0px;
-    border: none;
-    border-bottom: 1px solid #d5d5d5;
-    .header {
-      border-bottom: none !important;
-    }
-  }
-}
-</style>
+<template>
+  <div :class="['classification', 'classificationIndex-' + classificationIndex, isPackUp ? 'upack-up-wrap' : '']" :style="dynamicStyle">
+    <template v-if="classificationIndex === 0">
+      <div
+        class="tree-type classify-0"
+        :style="{
+          width: classificationWidth + 'px',
+          paddingBottom: conditionType === 'keyword' ? '80px' : 0
+        }"
+        v-flexible-resize="{
+          mode: 'VR',
+          onMove: changeWidth,
+          onEnd: saveWidth
+        }"
+      >
+        <div class="header" v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1">
+          <span @click="handleModeChange" v-if="hideConditionChangeBtn != 1">
+            <a-icon type="swap" />
+            {{ '切换' }}
+          </span>
+          <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
+            <a-icon type="setting" />
+            {{ '设置' }}
+          </span>
+        </div>
+        <ul class="tree">
+          <template v-for="(item, index) in treeData">
+            <li
+              :key="index"
+              class="tree-item"
+              :class="{
+                'tree-header': index === 0 || !item.children || item.children.length === 0
+              }"
+              v-if="index === 0 || !item.children || item.children.length === 0 || (item.children && item.children.filter(i => i.isShow).length !== 0)"
+            >
+              <template v-if="index === 0 || !item.children || item.children.length === 0">
+                <span class="child-item header-item" :class="{ selected: item.selected || conditionSid.indexOf('all_data') !== -1 }" @click="handleItemClick(item)"
+                  >{{ item.name }}
+                  <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+                </span>
+              </template>
+              <template v-else>
+                <span class="parent" :class="{ open: item.open }" @click="handleFold(item)">
+                  <span>
+                    {{ item.name }}
+                    <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+                  </span>
+                  <a-icon :type="item.open ? 'down' : 'right'" />
+                </span>
+                <template v-if="item.open">
+                  <div class="children" v-for="(child, cIndex) in item.children.filter(i => i.isShow)" :key="cIndex">
+                    <a-tooltip placement="right" v-if="child.isShow">
+                      <template slot="title">
+                        <span>{{ tooltipTilte(child) }}</span>
+                      </template>
+                      <span
+                        class="child-item"
+                        :class="{
+                          selected: child.selected,
+                          disabled: !child.digital && getCondiTionDigital
+                        }"
+                        @click="handleItemClick(child, cIndex, item, index)"
+                      >
+                        <span class="child-item-name">
+                          {{ child.name | fmtChildName(child.isPublic) }}
+                        </span>
+                        <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
+                        <a-icon type="check" v-if="child.selected" />
+                      </span>
+                    </a-tooltip>
+                  </div>
+                </template>
+              </template>
+            </li>
+          </template>
+        </ul>
+        <div class="tree-type-footer" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
+          <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
+          <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
+            <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
+            清空筛选
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="classificationIndex === 1">
+      <div
+        class="tile-type classify-1"
+        v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1 || hideConditionChangeSetting != 1 || originConditionList.filter(item => item.isShow).length > 0"
+      >
+        <div class="header" v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1">
+          <span class="all-data" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })" :class="{ selected: conditionSid.indexOf('all_data') !== -1 }">
+            全部数据
+            <template v-if="allObj.digital || allObj.digital === 0"> ({{ allObj.digital || 0 }}) </template>
+          </span>
+          <div class="right-setting">
+            <span @click="handleModeChange" style="margin-right: 30px;" v-if="hideConditionChangeBtn != 1">
+              <a-icon type="swap" />
+              {{ '切换' }}
+            </span>
+            <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
+              <a-icon type="setting" />
+              {{ '设置' }}
+            </span>
+          </div>
+        </div>
+        <ul
+          class="tile"
+          :style="{
+            borderBottom: conditionType === 'keyword' && hideClearConditionChange != 1 ? '1px solid #d5d5d5' : 0
+          }"
+        >
+          <template v-for="(item, index) in treeData.slice(1)">
+            <li class="tile-item" :key="index" v-if="item.children && item.children.length > 0">
+              <template v-if="!item.children || item.children.length === 0">
+                <span class="child-item" style="padding-left: 17px;" :class="{ selected: item.selected }" @click="handleItemClick(item)"
+                  >{{ item.name }}
+                  {{ item.digital }}
+                  <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+                </span>
+              </template>
+              <template v-else>
+                <!-- <text-over-tooltip
+                refName="digitalTitle"
+                class="parent digitalTitle"
+                :content="
+                  item.name +
+                    (countCondition == 1 && (item.digital || item.digital === 0)
+                      ? ' (' + (item.digital || 0) + ')'
+                      : '')
+                "
+                v-if="item.children.filter(i => i.isShow).length !== 0"
+              ></text-over-tooltip> -->
+                <span class="parent ellips">{{ item.name }}</span>
+                <div class="children">
+                  <template v-for="(child, cIndex) in item.children">
+                    <span
+                      v-if="child.isShow"
+                      :key="cIndex"
+                      class="child-item"
+                      :class="{
+                        selected: child.selected,
+                        disabled: !child.digital && getCondiTionDigital
+                      }"
+                      @click="handleItemClick(child, cIndex, item, index)"
+                      >{{ child.name | fmtChildName(child.isPublic) }}
+                      <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
+                    </span>
+                  </template>
+                </div>
+              </template>
+            </li>
+          </template>
+        </ul>
+        <div class="selected-list" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
+          <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
+          <template v-for="(item, index) in treeData.slice(1)">
+            <div class="selected-item" v-if="!item.children || item.children.length === 0" :key="item.sid">
+              {{ item.name }}
+              <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+              <a-icon type="close" @click="handleItemClick(item)" />
+            </div>
+            <template v-else>
+              <template v-for="(child, cIndex) in item.children">
+                <div class="selected-item" v-if="child.selected" :key="child.sid">
+                  {{ child.name }}
+                  <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
+                  <a-icon type="close" @click="handleItemClick(child, cIndex, item, index)" />
+                </div>
+              </template>
+            </template>
+          </template>
+          <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
+            <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
+            清空筛选
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="classificationIndex === 2">
+      <div class="select-type classify-2" ref="selectType">
+        <span class="title" @click="() => toggleSelect()">
+          <a-tooltip placement="top">
+            <template slot="title">
+              <span>{{ titleName }}</span>
+            </template>
+            <span>{{ titleName }}</span>
+          </a-tooltip>
+          <a-icon :type="selectShow ? 'up' : 'down'" />
+        </span>
+        <div class="main-wrapper" v-if="selectShow">
+          <ul class="tree" :style="{ padding: conditionType === 'keyword' ? '40px 0' : '40px 0 0' }">
+            <template v-for="(item, index) in treeData">
+              <li
+                :key="index"
+                class="tree-item"
+                :class="{
+                  'tree-header': index === 0 || !item.children || item.children.length === 0
+                }"
+                v-if="index === 0 || !item.children || item.children.length === 0 || (item.children && item.children.filter(i => i.isShow).length !== 0)"
+              >
+                <template v-if="index === 0 || !item.children || item.children.length === 0">
+                  <span class="child-item child-header header-item" :class="{ selected: item.selected || conditionSid.indexOf('all_data') !== -1 }" @click="handleItemClick(item)"
+                    >{{ item.name }}
+                    <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+                  </span>
+                  <div class="footer">
+                    <span @click="handleModeChange" v-if="hideConditionChangeBtn != 1">
+                      <a-icon type="swap" />
+                      {{ '切换' }}
+                    </span>
+                    <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
+                      <a-icon type="setting" />
+                      {{ '设置' }}
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  <span class="parent" :class="{ open: item.open }" @click="handleFold(item)" v-if="item.children.filter(i => i.isShow).length !== 0">
+                    {{ item.name }}{{ item.digital || item.digital === 0 ? '(' + item.digital + ')' : '' }}
+                    <a-icon :type="item.open ? 'down' : 'right'" />
+                  </span>
+                  <template v-if="item.open">
+                    <div class="children" v-for="(child, cIndex) in item.children.filter(i => i.isShow)" :key="cIndex">
+                      <a-tooltip placement="right" v-if="child.isShow">
+                        <template slot="title">
+                          <span>{{ tooltipTilte(child) }}</span>
+                        </template>
+                        <span
+                          class="child-item"
+                          :class="{
+                            selected: child.selected,
+                            disabled: !child.digital && getCondiTionDigital
+                          }"
+                          @click="handleItemClick(child, cIndex, item, index)"
+                        >
+                          <span>
+                            {{ child.name | fmtChildName(child.isPublic) }}
+                            <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
+                          </span>
+                          <a-icon type="check" v-if="child.selected" />
+                        </span>
+                      </a-tooltip>
+                    </div>
+                  </template>
+                </template>
+              </li>
+            </template>
+          </ul>
+          <div class="select-type-footer" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
+            <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
+            <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
+              <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
+              清空筛选
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="classificationIndex === 3">
+      <div
+        class="group-type classify-3"
+        v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1 || hideConditionChangeSetting != 1 || originConditionList.filter(item => item.isShow).length > 0"
+      >
+        <div class="header" v-if="hideConditionChangeBtn != 1 || hideConditionChangeSetting != 1">
+          <span class="all-data" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })" :class="{ selected: conditionSid.indexOf('all_data') !== -1 }">
+            全部数据
+            <template v-if="allObj.digital || allObj.digital === 0"> ({{ allObj.digital || 0 }}) </template>
+          </span>
+          <div class="right-setting">
+            <span @click="handleModeChange" style="margin-right: 30px;" v-if="hideConditionChangeBtn != 1">
+              <a-icon type="swap" />
+              {{ '切换' }}
+            </span>
+            <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
+              <a-icon type="setting" />
+              {{ '设置' }}
+            </span>
+          </div>
+        </div>
+        <div
+          class="group"
+          :style="{
+            borderBottom: conditionType === 'keyword' && hideClearConditionChange != 1 ? '1px solid #d5d5d5' : 0
+          }"
+        >
+          <template v-for="(item, index) in treeData.slice(1)">
+            <template v-if="!item.children || item.children.length === 0">
+              <span :key="item.sid" class="child-item" style="padding-left: 17px;" :class="{ selected: item.selected }" @click="handleItemClick(item)"
+                >{{ item.name }}
+                {{ item.digital }}
+                <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+              </span>
+            </template>
+            <template v-else>
+              <a-select
+                :key="item.sid"
+                :placeholder="item.name + (countCondition == 1 && (item.digital || item.digital === 0) ? ' (' + (item.digital || 0) + ')' : '')"
+                allowClear
+                @change="(value, option) => handleChange(value, option, item, index)"
+                :value="groupSelect(index)"
+                option-label-prop="label"
+                v-if="item.children.filter(i => i.isShow).length !== 0"
+              >
+                <a-select-option
+                  :value="0"
+                  :label="item.name + (countCondition == 1 && (item.digital || item.digital === 0) ? ' (' + (item.digital || 0) + ')' : '')"
+                  class="classiffication-select-hide"
+                >
+                  {{ item.name }}
+                  <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+                </a-select-option>
+                <a-select-option
+                  v-for="(child, cIndex) in item.children.filter(i => i.isShow)"
+                  :key="child.sid"
+                  :value="child.sid"
+                  :label="child.name + (countCondition == 1 && visibleDigital(child) ? ' (' + (child.digital || 0) + ')' : '')"
+                  :child="child"
+                  :cIndex="cIndex"
+                  :index="index"
+                  :item="item"
+                  :disabled="!child.digital && getCondiTionDigital"
+                  class="group-select-option"
+                  @click="(value, option) => conditionSid.indexOf(child.sid) !== -1 && handleItemClick(child, cIndex, item, index)"
+                >
+                  <span>
+                    {{ child.name }}
+                    <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
+                  </span>
+                  <a-icon type="check" v-if="child.selected" />
+                </a-select-option>
+              </a-select>
+            </template>
+          </template>
+        </div>
+        <div class="selected-list" v-if="conditionType === 'keyword' && hideClearConditionChange != 1">
+          <div class="selected-num">已选择{{ conditionSid.filter(item => item !== 'all_data').length }}项</div>
+          <template v-for="(item, index) in treeData.slice(1)">
+            <div class="selected-item" v-if="!item.children || item.children.length === 0" :key="item.sid">
+              {{ item.name }}
+              <span class="digital-span" v-if="visibleDigital(item)"> ({{ item.digital || 0 }}) </span>
+              <a-icon type="close" @click="handleItemClick(item)" />
+            </div>
+            <template v-else>
+              <template v-for="(child, cIndex) in item.children">
+                <div class="selected-item" :key="child.sid" v-if="child.selected">
+                  {{ child.name }}
+                  <span class="digital-span" v-if="visibleDigital(child)"> ({{ child.digital || 0 }}) </span>
+                  <a-icon type="close" @click="handleItemClick(child, cIndex, item, index)" />
+                </div>
+              </template>
+            </template>
+          </template>
+          <div class="selected-item-del" @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })">
+            <svg-icon class-name="svg-icon-btn" icon-class="xitongtubiaoliebiaocaozuoanniushanchu" />
+            清空筛选
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="classificationIndex === 4">
+      <div class="group-type classify-3 classify-4" v-if="showIconBtn || hasConditionList">
+        <div class="header" v-if="showIconBtn">
+          <!-- @click="handleItemClick({ sid: 'all_data', name: '全部数据', digital: allObj.digital })" -->
+          <span class="all-data" :class="{ selected: conditionSid.indexOf('all_data') !== -1 }">
+            {{ showTitleName }}
+            <template v-if="allObj.digital || allObj.digital === 0"> ({{ allObj.digital || 0 }}) </template>
+          </span>
+          <div class="right-setting">
+            <span style="margin-right: 30px;" class="upack-up-btn" @click="isPackUp = !isPackUp">
+              {{ isPackUp ? '展开' : '收起' }}
+              <a-icon style="color:#2d7aff" :type="isPackUp ? 'down' : 'up'" />
+            </span>
+            <span @click="handleModeChange" style="margin-right: 30px;" v-if="hideConditionChangeBtn != 1">
+              <a-icon type="swap" />
+              <!-- {{ $t("1.1.5.2") }} -->
+              切换
+            </span>
+            <span @click="handleSettingShow" v-if="hideConditionChangeSetting != 1">
+              <a-icon type="setting" />
+              <!-- {{ $t("1.1.5.3") }} -->
+              设置
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="classify-4-container" :style="{ height: isPackUp ? 0 : 'auto' }">
+        <search-professional-model
+          ref="professional"
+          v-bind="$attrs"
+          v-on="$listeners"
+          :originConditionList="originConditionList"
+          :displayCategoryList="displayCategoryList"
+          :treeData="treeData"
+          :tableId="tableId"
+          :searchFieldList="searchFieldList"
+          @handleItemClick="handleItemClick"
+          @changeShowName="changeShowName"
+        />
+      </div>
+    </template>
+    <!-- searchFieldList: props -->
+    <!-- saveGetTableCondiTionList 新增，删除 -->
+    <!-- CondiTionListInit 修改？ -->
+
+    <set-classification
+      ref="search"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @changeSearch="changeSearch"
+      @saveGetTableCondiTionList="saveGetTableCondiTionList"
+      @CondiTionListInit="updateTableCondiTion"
+      @setClassifyModal="setClassifyModal"
+      :searchFieldList="searchFieldList"
+      :conditionList="searchConditionList"
+      :displayCategoryList="displayCategoryList"
+      :settingId="settingId"
+      :searchDefName="searchDefName"
+      :tableId="tableId"
+      :classifyModal="classifyModal"
+      :filterApiConfig="filterApiConfig"
+    />
+  </div>
+</template>
+
+<script>
+import flexibleResize from '@/directive/flexibleResize';
+import setClassification from '../components/search-modal/set-classification';
+import { filterApiFn } from '~/table-filter/src/mixins/mixins';
+import { Icon, Tooltip, Select } from 'ant-design-vue';
+import svgIcon from '@/component/svg/index.vue';
+import searchProfessionalModel from './search-professional-model.vue';
+import create from '@/core/create';
+export default create({
+  name: 'Classification',
+  mixins: [filterApiFn],
+  provide() {
+    return {
+      root_isShowResetButton: this.isShowResetButton
+    };
+  },
+  components: {
+    // Search,
+    [Icon.name]: Icon,
+    [Tooltip.name]: Tooltip,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+    svgIcon,
+    setClassification,
+    searchProfessionalModel
+  },
+  data() {
+    return {
+      classificationWidth: 150,
+      selectShow: false,
+      treeData: [],
+      conditionList: [],
+      originConditionList: [],
+      condiTionParams: {},
+      classificationIndex: 2,
+      curTableId: '',
+      spinning: false,
+      allObj: {
+        name: '全部数据',
+        sid: 'all_data'
+      },
+
+      searchConditionList: [],
+      displayCategoryList: [],
+      settingId: '',
+      searchDefName: '', // no use ?
+      classifyModal: false, // 筛选分类的弹窗
+
+      showTitleName: '全部数据',
+      isPackUp: false // 是否收起 目前只用于 classificationIndex = 4 （专业模式）
+    };
+  },
+  props: {
+    tableId: { type: String },
+    conditionSid: { type: Array },
+    localObj: { type: Object },
+    curClassificationIndex: { type: Number },
+    curClassificationWidth: { type: Number },
+    curConditionList: { type: Array },
+    tableName: { type: String },
+    showRelatedTreeBtn: { type: Boolean }, // 平铺列表按钮
+    conditionType: { type: String }, // 筛选策略，为keyword是关键字优先，否则筛选分类优先
+    hideConditionChangeBtn: { type: Number }, // 是否隐藏切换按钮，1是
+    hideConditionChangeSetting: { type: Number }, // 是否隐藏分类设置 ，1是
+    hideClearConditionChange: { type: Number }, // 是否隐藏清空筛选分类，1是
+    countCondition: { type: Number }, // 是否统计筛选分类，1统计筛选分类，0反之
+    countTabCondition: { type: Number }, // 筛选页签是否进行数量统计，1统计筛选页签，0反之
+    keyword: { type: String },
+    isShowResetButton: { type: Boolean, default: true }, // 是否显示  恢复默认设置 按钮
+    fieldKeys: {
+      type: Array,
+      default: () => []
+    },
+    tabConditionId: { type: String },
+    conditionMap: {
+      type: Object,
+      default: () => {}
+    },
+    filterApiConfig: {
+      type: Object,
+      default: () => {}
+    },
+
+    searchFieldList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    dynamicStyle() {
+      if (this.classificationIndex === 0) {
+        return {
+          marginRight: '8px'
+        };
+      } else if (this.classificationIndex === 2) {
+        return {
+          display: 'inline-block'
+        };
+      }
+      return {};
+    },
+    titleName() {
+      let condition = this.conditionList.filter(item => this.conditionSid.indexOf(item.sid) !== -1);
+      if (this.conditionSid.indexOf('all_data') !== -1) {
+        return '全部数据';
+      } else {
+        let titleArr = [];
+        condition.map(item => {
+          titleArr.push(item.name);
+        });
+        return titleArr.join(',');
+        // return (
+        //   (condition?.displayCategory && condition?.displayCategory !== "未分类"
+        //     ? `${condition?.displayCategory}/`
+        //     : "") + condition?.name
+        // );
+      }
+    },
+    groupSelect() {
+      return function(index) {
+        let treeTemp = this.treeData.slice(1);
+        if (treeTemp[index].children) {
+          const cIndex = treeTemp[index].children.findIndex(item => item.selected);
+          if (cIndex !== -1) {
+            return treeTemp[index].children[cIndex].sid;
+          } else {
+            return 0;
+          }
+        } else {
+          return 0;
+        }
+      };
+    },
+
+    tooltipTilte() {
+      return function(item) {
+        let digitalNum = item.digital === 0 ? `(0)` : item.digital ? `(${item.digital})` : '';
+        const { name, isPublic } = item;
+        const fmtChildName = this.$options.filters.fmtChildName;
+        return fmtChildName(name, isPublic) + digitalNum;
+      };
+    },
+    handleTileAllDataDigital() {
+      if (!this.treeData || !this.treeData.length) return;
+      let item = this.treeData[0];
+      if (item.sid !== 'all_data') return;
+      if (!('digital' in item)) return;
+      return item.digital || 0;
+    },
+
+    // 这两个配置都要请求 筛选分类统计接口
+    getCondiTionDigital() {
+      return this.countCondition === 1 || this.countTabCondition === 1;
+    },
+
+    showIconBtn() {
+      return this.hideConditionChangeBtn != 1 || this.hideConditionChangeSetting != 1;
+    },
+
+    hasConditionList() {
+      return this.originConditionList.filter(item => item.isShow).length > 0;
+    }
+  },
+  mounted() {
+    document.addEventListener('click', e => {
+      let path = e.composedPath && e.composedPath();
+      if (path.includes(this.$refs.selectType)) {
+        return;
+      }
+      this.toggleSelect(false);
+    });
+  },
+  methods: {
+    handleChange(value, option, pItem = {}, pIndex) {
+      if (value) {
+        const { child, cIndex, item, index } = option.data.attrs;
+        this.handleItemClick(child, cIndex, item, index);
+      } else {
+        let cIndex = pItem.children.findIndex(item => this.conditionSid.indexOf(item.sid) !== -1);
+        if (cIndex !== -1) {
+          this.handleItemClick(pItem.children[cIndex], cIndex, pItem, pIndex);
+        }
+        // this.handleItemClick({ sid: "all_data", name: "全部数据" });
+      }
+    },
+    handleFold(item) {
+      if (item.open) {
+        item.open = false;
+      } else {
+        this.$set(item, 'open', true);
+      }
+    },
+    handleItemClick(child, i, p = {}, pi = undefined) {
+      // if (!child.selected) {
+      //   this.clearActive(child.sid, p);
+      //   this.$set(child, "selected", true);
+      // }
+      this.showTitleName = child.name;
+      if (!child.digital && this.countCondition === 1) {
+        return false;
+      }
+      let conditionSidTemp = this.getConditionSid(child.sid, this.conditionSid, p);
+      let selectList = this.initTree(conditionSidTemp);
+      this.toggleSelect(false);
+      // TODO: 选中筛选分类
+      this.$emit('changeSearch', child.sid === 'all_data' ? 'all' : '', child, p, selectList);
+    },
+    clearActive(sid, p = {}) {
+      let conditionSidTemp = this.getConditionSid(sid, this.conditionSid, p);
+
+      this.treeData.forEach(item => {
+        if (item.children) {
+          item.children.forEach(child => {
+            if (conditionSidTemp.indexOf(child.sid) !== -1) {
+              this.$set(child, 'selected', true);
+            } else {
+              this.$set(child, 'selected', false);
+            }
+          });
+        } else {
+          if (conditionSidTemp.indexOf(item.sid) !== -1) {
+            this.$set(item, 'selected', true);
+          } else {
+            this.$set(item, 'selected', false);
+          }
+        }
+      });
+    },
+    // 搜索关键字时重置树结构
+    initTree(conditionSidTemp) {
+      let selectList = [];
+      this.treeData.forEach(item => {
+        if (item.children) {
+          item.children.forEach(child => {
+            if (conditionSidTemp.indexOf(child.sid) !== -1) {
+              this.$set(child, 'selected', true);
+              selectList.push(child);
+            } else {
+              this.$set(child, 'selected', false);
+            }
+          });
+        } else {
+          if (conditionSidTemp.indexOf(item.sid) !== -1) {
+            this.$set(item, 'selected', true);
+            selectList.push(item);
+          } else {
+            this.$set(item, 'selected', false);
+          }
+        }
+      });
+      return selectList;
+    },
+    // 获取已选择的sid
+    getConditionSid(sid, conditionSid, p = {}) {
+      let conditionSidTemp = JSON.parse(JSON.stringify(conditionSid));
+      if (sid === 'all_data') {
+        conditionSidTemp = ['all_data'];
+      } else {
+        if (this.conditionType === 'keyword') {
+          // 关键字搜索多选
+          let aIndex = conditionSidTemp.findIndex(subItem => subItem === 'all_data');
+          if (aIndex !== -1) conditionSidTemp.splice(aIndex, 1); // 存在选中了全部数据，则先删除
+          // 查询是否已经存在，存在则删除一个
+          let cIndex = conditionSidTemp.findIndex(subItem => subItem === sid);
+          if (cIndex !== -1) {
+            conditionSidTemp.splice(cIndex, 1);
+            if (conditionSidTemp.length === 0) conditionSidTemp = ['all_data'];
+          } else {
+            // 查询和已选择的元素是否在同一个父级
+            if (p.children && p.children.length > 0) {
+              cIndex = conditionSidTemp.findIndex(subItem => p.children.findIndex(pItem => pItem.sid === subItem) !== -1);
+            }
+            if (cIndex !== -1) {
+              conditionSidTemp.splice(cIndex, 1);
+            }
+            conditionSidTemp.push(sid);
+          }
+        } else {
+          // 非关键字搜索单选
+          if (conditionSidTemp.indexOf(sid) !== -1) {
+            conditionSidTemp = ['all_data'];
+          } else {
+            conditionSidTemp = [sid];
+          }
+        }
+      }
+
+      return conditionSidTemp;
+    },
+
+    /**
+     * 改变展示方式
+     */
+    handleModeChange() {
+      this.$emit('setCurTreeData', this.treeData);
+      let res = '';
+      if (this.classificationIndex === 4) {
+        res = 0;
+      } else {
+        let index = this.classificationIndex;
+        res = ++index;
+      }
+      this.classificationWidth = 150;
+      this.saveListPersonaSetting(res);
+    },
+
+    // 保存
+    async saveListPersonaSetting(classificationIndex, classificationWidth) {
+      let params = {
+        tableId: this.tableId,
+        setting: JSON.stringify({
+          classificationIndex,
+          classificationWidth
+        })
+      };
+
+      try {
+        let res = await this.handleGetConfigApi(params, 'requestSaveListPersonaSetting');
+        // TODO: 切换筛选分类
+        res && this.$emit('setClassificationIndex', classificationIndex);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    /**
+     * 打开设置弹窗
+     */
+    handleSettingShow() {
+      this.classifyModal = true;
+      // this.$emit("setClassifyModal", true);
+      this.toggleSelect(false);
+    },
+
+    setClassifyModal(val) {
+      this.classifyModal = val;
+    },
+
+    toggleSelect(flag) {
+      if (flag !== undefined) {
+        this.selectShow = flag;
+        return;
+      }
+      this.selectShow = !this.selectShow;
+    },
+
+    getTableCondiTionList(options) {
+      // 删除当前
+      if (options !== undefined && options.type === 'delete' && this.conditionSid.indexOf(options.item.sid) !== -1) {
+        this.$emit('changeSearch', 'all', {
+          name: '全部数据',
+          sid: 'all_data'
+        });
+      }
+      if (!this.tableId) return;
+      if (Object.keys(this.conditionMap).length > 0) {
+        this.treeData = [];
+        let { displayCategoryList = [], conditionList = [] } = this.conditionMap;
+        this.originConditionList = JSON.parse(JSON.stringify(conditionList));
+        this.displayCategoryList = displayCategoryList || [];
+        this.conditionList = JSON.parse(JSON.stringify(conditionList));
+        this.conditionList.unshift({
+          name: '全部数据',
+          sid: 'all_data'
+        });
+        let treeData = [];
+        if (displayCategoryList.length === 0) {
+          displayCategoryList = ['未分类'];
+        }
+        displayCategoryList.forEach(item => {
+          let map = { name: item, children: [] };
+          conditionList.forEach(condition => {
+            if (condition.displayCategory === item || (!condition.displayCategory && item === '未分类' && condition.sid !== 'all_data')) {
+              if (this.conditionSid.indexOf(condition.sid) !== -1) {
+                condition.selected = true;
+                map.open = true;
+              }
+              if (condition.isShow) {
+                map.children.push(condition);
+              }
+            }
+          });
+          if (map.children.length > 0) {
+            treeData.push(map);
+          }
+        });
+        treeData.unshift({
+          name: '全部数据',
+          sid: 'all_data'
+        });
+        this.$set(this, 'treeData', treeData);
+        // 0 模式展开所有分类
+        if (this.classificationIndex === 0) {
+          this.setOpenStatus(true);
+        }
+      }
+    },
+    // 设置分类展开
+    setOpenStatus(value) {
+      this.treeData.forEach(item => {
+        if (item.children && item.children.length) {
+          this.$set(item, 'open', value);
+        }
+      });
+    },
+    async getTableCondiTionDigital(setConditionId = false, keyword = '', fieldKeys = [], tabConditionId = '', countTabCondition) {
+      try {
+        if (!this.countCondition && !this.countTabCondition) {
+          this.$set(this.allObj, 'digital', '');
+          return Promise.resolve();
+        }
+        if (!this.tableId) return Promise.resolve();
+        let params = { tableId: this.tableId, countCondition: this.countCondition };
+        // if (setConditionId && this.conditionSid) {
+        //   params.conditionId = this.conditionSid == "all_data" ? "ALL" : this.conditionSid;
+        // }
+        if (keyword) params.keyword = keyword;
+        if (tabConditionId) params.tabConditionId = tabConditionId;
+        if (countTabCondition) params.countTabCondition = countTabCondition;
+        if (fieldKeys.length > 0) params.fieldKeys = JSON.stringify(fieldKeys);
+        Object.assign(params, this.handleParams()); // 额外条件暂时隐藏，需要等后端确定是否需要该额外条件
+        let res = await this.handleGetConfigApi(params, 'requestTableCondiTionDigital');
+        this.handleConditionDiaital(res);
+        return Promise.resolve(res);
+      } catch (error) {
+        console.log(error, 'getTableCondiTionDigital');
+      }
+    },
+
+    /**
+     * 处理检索分类的统计
+     */
+    handleConditionDiaital(map) {
+      // TODO: 统计分类更新
+      if (this.countTabCondition == 1) this.$emit('setTabConditionNumObj', map);
+      if (!map || Object.keys(map).length === 0) return;
+      // children
+      let resList = [];
+      this.handlePlatTree(this.treeData, resList);
+      for (let key in map) {
+        let useKey = key === 'ALL' ? 'all_data' : key;
+        let matchItem = resList.find(v => v.sid == useKey);
+        if (matchItem) {
+          if (matchItem.sid == 'all_data' && this.countCondition == 1) {
+            this.$set(this.allObj, 'digital', map[key] || 0);
+          }
+          this.$set(matchItem, 'digital', map[key] || 0);
+        }
+      }
+      let conditionSid = this.conditionSid.indexOf('all_data') !== -1 ? ['ALL'] : this.conditionSid;
+      let changeNum = 0;
+      if (this.conditionType === 'keyword') {
+        let num = 0;
+        conditionSid.map(item => {
+          return (num += parseInt(map[item]));
+        });
+        changeNum = num;
+      } else {
+        changeNum = map[conditionSid[0]];
+      }
+      return changeNum;
+    },
+
+    handlePlatTree(list, res) {
+      if (list.length) {
+        list.forEach(item => {
+          if (item.children?.length) {
+            item.children.forEach(v => {
+              res.push(v);
+            });
+          } else {
+            res.push(item);
+          }
+        });
+      }
+    },
+    async tableCondiTionPromise(options) {
+      try {
+        await this.getTableCondiTionList(options);
+        // 查count后台sql太慢，先注释
+        if (this.countCondition === 1 || this.countTabCondition === 1) await this.getTableCondiTionDigital(false, this.keyword, this.fieldKeys, this.tabConditionId, this.countTabCondition); // 开启统计筛选分类
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    handleParams() {
+      if (!this.localObj && Object.keys(this.localObj).length === 0) return {};
+      let obj = {};
+      if (Array.isArray(this.localObj.params)) {
+        this.localObj.params.map(item => {
+          obj[item.p_name] = item.p_value;
+        });
+      }
+      if (Object.keys(this.localObj.extendParams || {}).length) {
+        Object.assign(obj, this.localObj.extendParams);
+        obj.extraParams = JSON.stringify(this.localObj.extendParams);
+      }
+      return obj;
+    },
+    changeWidth({ distance }) {
+      const w = this.classificationWidth + distance;
+      this.classificationWidth = Math.min(Math.max(w, 50), 650);
+    },
+    saveWidth() {
+      const i = this.classificationIndex;
+      const w = this.classificationWidth;
+      this.saveListPersonaSetting(i, w);
+    },
+
+    // =======================
+    async updateTableCondiTion() {
+      await this.getTableCondiTionListNew(this.tableId);
+      this.getTableCondiTionListRequest();
+    },
+
+    async saveGetTableCondiTionList(options) {
+      await this.getTableCondiTionListNew(this.tableId);
+      this.handleGetTableCondiTionList();
+      // 删除，编辑筛选完成后 刷新数据
+      this.$emit('getClassification', options);
+    },
+
+    changeSearch(key, item) {
+      if (key == 'all') {
+        this.searchDefName = '全部数据';
+      } else {
+        this.searchDefName = item.name;
+      }
+      this.$emit('changeSearch', key, item);
+    },
+
+    getTableCondiTionListRequest(first) {
+      this.handleGetTableCondiTionList(first).then(checked => {
+        this.reloadList(checked);
+      });
+    },
+
+    reloadList(item) {
+      // 新增筛选分类后刷新
+      this.$emit('reloadList', item);
+    },
+
+    handleGetTableCondiTionList(first, conditionMap = {}) {
+      let tableId = this.tableId;
+      if (!tableId) return new Promise(resolve => resolve(false));
+      let conditionMapTemp = Object.keys(conditionMap).length > 0 ? conditionMap : this.conditionMap;
+      return new Promise((resolve, reject) => {
+        if (Object.keys(conditionMapTemp).length > 0) {
+          this.searchConditionList = conditionMapTemp.conditionList || [];
+          this.displayCategoryList = conditionMapTemp.displayCategoryList || [];
+          let obj = {
+            conditionList: this.searchConditionList,
+            displayCategoryList: this.displayCategoryList
+          };
+          this.$emit('getQuickSearchListObj', obj);
+          this.settingId = conditionMapTemp.settingId;
+          const checked = this.searchConditionList.find(item => item.isDefault) || {
+            name: '全部数据',
+            sid: 'all_data'
+          };
+          this.searchDefName = checked.name;
+          // if (this.conditionType === "keyword") {
+          this.tabConditionList = conditionMapTemp.tabConditionList || []; // 获取页签tab
+          this.tabIndex = conditionMapTemp.tabConditionList && conditionMapTemp.tabConditionList.findIndex(item => item.isDefault); // 查询默认选中的标签
+          // }
+          // TODO:
+          // this.getTableCondiTionList()
+          if (this.$attrs.tableOptions?.filterCondition?.displayCategory && first) {
+            resolve({
+              name: this.$attrs.tableOptions?.filterCondition?.name,
+              sid: this.$attrs.tableOptions?.filterCondition?.displayCategory
+            });
+          }
+          resolve(checked);
+        } else {
+          resolve({});
+        }
+      });
+    },
+
+    async getTableCondiTionListNew(tableId) {
+      try {
+        if (!tableId) return new Promise(resolve => resolve(false));
+        let params = { tableId };
+        let res = await this.handleGetConfigApi(params, 'requestTableCondiTionList');
+        this.$emit('setConditionMap', res);
+        return Promise.resolve(res);
+      } catch (error) {
+        return Promise.resolve(false);
+      }
+    },
+    /*  */
+    visibleDigital(item) {
+      if (this.countCondition !== 1) return false;
+      return item.digital || item.digital === 0;
+    },
+
+    changeShowName(name) {
+      this.showTitleName = name;
+    },
+
+    /**
+     * 清空专业模式设置的条件
+     */
+    handleClearClassConObj(...arg) {
+      let fn = this?.$refs?.professional?.handleClearConObj;
+      if (typeof fn === 'function') {
+        fn(...arg);
+      }
+    }
+  },
+  filters: {
+    fmtChildName(name, isPublic) {
+      return name && isPublic === '1' ? name.replace(/\(公共\)$/, '') : name;
+    }
+  },
+  activated() {
+    this.tableCondiTionPromise();
+  },
+  watch: {
+    tableId: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (!val) return;
+        this.getTableCondiTionListRequest(true);
+        if (this.curTableId === val) return;
+        this.curTableId = val;
+        // this.$nextTick(() => {
+        //   console.log("---------watch----------tableCondiTionPromise")
+        //   this.tableCondiTionPromise();
+        // });
+      }
+    },
+    curClassificationIndex: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val === undefined) return;
+        this.classificationIndex = val;
+      }
+    },
+    curClassificationWidth: {
+      immediate: true,
+      handler(val) {
+        this.classificationWidth = Number(val) || 150;
+      }
+    },
+    curConditionList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (!val || !val.length || this.treeData === val) return;
+        this.treeData = JSON.parse(JSON.stringify(val));
+      }
+    }
+  },
+  directives: {
+    flexibleResize
+  }
+});
+</script>
+<style lang="less">
+.classiffication-select-hide {
+  display: none !important;
+}
+.group-select-option {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+}
+.group-select-option.ant-select-dropdown-menu-item-selected {
+  color: #2474ff !important;
+}
+.group-select-option.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+  color: #2474ff !important;
+}
+
+.classificationIndex-4 {
+  margin-bottom: 10px;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+
+  &.upack-up-wrap {
+    border-bottom: none;
+  }
+}
+</style>
+<style lang="less" scoped>
+.classification {
+  // margin-top: 4px;
+  cursor: pointer;
+  .tree-type {
+    height: 100%;
+    border: 1px solid #d5d5d5;
+    width: 150px;
+    margin-top: 8px;
+    border-radius: 4px;
+    line-height: 32px;
+    padding-bottom: 80px;
+    .tree {
+      height: calc(100% - 32px);
+      overflow: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+      }
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
+      font-size: 14px;
+      border-bottom: 1px solid #e6eaef;
+    }
+    .tree-item {
+      border-bottom: 1px solid #d5d5d5;
+      &.tree-header {
+        padding: 0 10px;
+        box-sizing: border-box;
+      }
+      cursor: pointer;
+      .parent {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        font-weight: 600;
+        &.open {
+          background-color: #f2f2f2;
+          border-bottom: 1px solid #d5d5d5;
+        }
+      }
+      .header-item {
+        color: rgba(0, 0, 0, 0.6);
+        box-sizing: border-box;
+        border-bottom: 1px solid transparent;
+        line-height: 1.4;
+        &.selected {
+          color: #2d7aff;
+        }
+        &:hover {
+          color: #2d7aff;
+          // border-color: #2d7aff;
+        }
+        &:active {
+          color: #000000;
+          border-color: transparent;
+        }
+      }
+      .children {
+        display: flex;
+        align-items: center;
+        padding-left: 23px;
+        padding-right: 10px;
+        height: 32px;
+        .child-item {
+          display: flex;
+          align-items: center;
+          // display: inline-block;
+          max-width: 100%;
+          color: #7c7c7c;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: 1.5;
+          border-bottom: 1px solid transparent;
+
+          &:hover {
+            color: #2d7aff;
+            // border-color: #2d7aff;
+          }
+          &.selected {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #2d7aff;
+          }
+          &:active {
+            color: #000000;
+            border-color: transparent;
+          }
+          &.disabled {
+            color: rgba(0, 0, 0, 0.2);
+          }
+          .child-item-content {
+            display: flex;
+            align-items: center;
+          }
+          .child-item-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .digital-span {
+            flex: 1;
+            margin-left: 5px;
+            text-align: left;
+          }
+        }
+      }
+    }
+    .tree-type-footer {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding-left: 16px;
+      background: #fff;
+      .selected-num {
+        margin-bottom: 9px;
+      }
+      .selected-item-del {
+        margin-left: 0;
+        margin-bottom: 15px;
+      }
+    }
+  }
+  .tile-type {
+    border: 1px solid #d5d5d5;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    padding: 0 17px;
+    .header {
+      width: 100%;
+      display: inline-flex;
+      justify-content: space-between;
+      align-items: center;
+      // padding: 0 14px;
+      line-height: 44px;
+      border-bottom: 1px solid #d5d5d5;
+      .all-data {
+        margin-right: auto;
+        border-bottom: 1px solid transparent;
+        line-height: 1.4;
+        color: #000;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        &:hover {
+          color: #2d7aff;
+          // border-color: #2d7aff;
+        }
+        &:active {
+          color: #000000;
+          border-color: transparent;
+        }
+      }
+      .selected {
+        color: #2d7aff;
+      }
+      .right-setting {
+        color: #000;
+        .anticon {
+          color: rgba(0, 0, 0, 0.6);
+          margin-right: 6px;
+        }
+        .upack-up-btn {
+          color: #2d7aff;
+        }
+      }
+    }
+    .tile {
+      border-bottom: 1px solid #d5d5d5;
+      padding: 9px 0;
+    }
+    .tile-item {
+      display: flex;
+      line-height: 38px;
+      cursor: pointer;
+      .parent {
+        width: 135px;
+        padding-right: 16px;
+        color: #000;
+        font-size: 14px;
+        font-weight: 600;
+        font-family: PingFangSC-Medium, PingFang SC;
+        // background: rgba(213, 213, 213, 0.12);
+        // border-right: 1px solid #d5d5d5;
+        max-width: 135px;
+        box-sizing: border-box;
+      }
+      .children {
+        // padding: 0 15px;
+        flex: 1;
+        .child-item {
+          margin: 0 5px;
+          padding: 1px 6px;
+          color: #7c7c7c;
+          font-size: 14px;
+          line-height: 1.5;
+          border-bottom: 1px solid transparent;
+          border-radius: 4px;
+          display: inline-block;
+          &:hover {
+            color: #2d7aff;
+            background-color: rgba(45, 122, 255, 0.1);
+            // border-color: #2d7aff;
+          }
+          &.selected {
+            color: #2d7aff;
+            background-color: rgba(45, 122, 255, 0.1);
+          }
+          &:active {
+            color: #000000;
+            border-color: transparent;
+          }
+          &.disabled {
+            color: rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+      .child-item {
+        &.selected {
+          color: #2d7aff;
+        }
+      }
+    }
+    .tile-item + .tile-item {
+      // border-top: 1px solid #d5d5d5;
+    }
+  }
+  .select-type {
+    position: relative;
+    width: 100px;
+    line-height: 32px;
+    height: 32px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: 0 8px;
+      border: 1px solid #d5d5d5;
+      border-radius: 4px;
+      color: #969696;
+      font-size: 12px;
+      box-sizing: border-box;
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #212121;
+        font-size: 14px;
+      }
+      i {
+        font-size: 12px;
+      }
+    }
+    .main-wrapper {
+      position: absolute;
+      z-index: 3000;
+      width: 100%;
+      min-width: 270px;
+      // max-height: 300px;
+      // overflow-y: auto;
+      border: 1px solid #d5d5d5;
+      background-color: #fff;
+      border-radius: 4px;
+      // padding-top: 5px;
+      // padding-bottom: 10px;
+      top: 39px;
+      &::-webkit-scrollbar {
+        width: 5px;
+      }
+      .footer {
+        display: flex;
+        align-items: center;
+        // flex-direction: column;
+        // padding: 0 10px;
+        // border-top: 1px solid #d5d5d5;
+        span:first-child {
+          margin-right: 16px;
+        }
+      }
+    }
+    .tree {
+      padding: 32px 0;
+      /* position: relative; */
+      max-height: 300px;
+      overflow: auto;
+    }
+    .tree-item {
+      border-bottom: 1px solid #d5d5d5;
+      &.tree-header {
+        padding: 0 10px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        width: 100%;
+        background-color: #fff;
+        top: 0;
+        height: 40px;
+      }
+      .child-header {
+        flex: 1;
+      }
+      cursor: pointer;
+      .parent {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        font-weight: 600;
+        &.open {
+          background-color: #f2f2f2;
+          border-bottom: 1px solid #d5d5d5;
+        }
+      }
+      .header-item {
+        color: rgba(0, 0, 0, 0.6);
+        border-bottom: 1px solid transparent;
+        &.selected {
+          color: #2d7aff;
+        }
+        &:hover {
+          color: #2d7aff;
+          // border-color: #2d7aff;
+        }
+        &:active {
+          color: #000000;
+          border-color: transparent;
+        }
+      }
+      .children {
+        display: flex;
+        align-items: center;
+        padding-left: 23px;
+        padding-right: 10px;
+        height: 32px;
+        line-height: 32px;
+        .child-item {
+          display: inline-block;
+          max-width: 100%;
+          color: #7c7c7c;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: 1.5;
+          border-bottom: 1px solid transparent;
+          &.child-header {
+            padding: 0 10px;
+          }
+          &.header-item {
+            color: rgba(0, 0, 0, 0.6);
+            border-bottom: 1px solid transparent;
+            &.selected {
+              color: #2d7aff;
+            }
+            &:hover {
+              color: #2d7aff;
+              // border-color: #2d7aff;
+            }
+            &:active {
+              color: #000000;
+              border-color: transparent;
+            }
+          }
+          &:hover {
+            color: #2d7aff;
+            // border-color: #2d7aff;
+          }
+          &.selected {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #2d7aff;
+          }
+          &:active {
+            color: #000000;
+            border-color: transparent;
+          }
+          &.disabled {
+            color: rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+    .select-type-footer {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 12px;
+      background-color: #fff;
+      border-top: 1px solid #d5d5d5;
+    }
+  }
+  .group-type {
+    border: 1px solid #d5d5d5;
+    padding: 0 16px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    .header {
+      width: 100%;
+      display: inline-flex;
+      justify-content: space-between;
+      align-items: center;
+      // padding: 0 14px;
+      line-height: 44px;
+      // border-bottom: 1px solid #d5d5d5;
+      padding-left: 4px;
+      .all-data {
+        margin-right: auto;
+        color: rgba(0, 0, 0, 0.6);
+        border-bottom: 1px solid transparent;
+        // line-height: 1.4;
+        &:hover {
+          color: #2d7aff;
+          // border-color: #2d7aff;
+        }
+        &:active {
+          color: #000000;
+          border-color: transparent;
+        }
+      }
+      .selected {
+        color: #2d7aff;
+      }
+      .right-setting {
+        color: #000;
+        .anticon {
+          color: rgba(0, 0, 0, 0.6);
+          margin-right: 6px;
+        }
+        .upack-up-btn {
+          color: #2d7aff;
+        }
+      }
+    }
+    .group {
+      padding: 16px 0;
+      border-bottom: 1px solid #d5d5d5;
+      .child-item {
+        color: #7c7c7c;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-bottom: 1px solid transparent;
+        margin-right: 8px;
+
+        &:hover {
+          color: #2d7aff;
+          border-color: transparent;
+        }
+        &.selected {
+          color: #2d7aff;
+        }
+        &:active {
+          color: #000000;
+          border-color: transparent;
+        }
+        &.disabled {
+          color: rgba(0, 0, 0, 0.2);
+        }
+      }
+      /deep/ .ant-select {
+        width: 130px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+      }
+    }
+    .select-type-footer {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      padding: 0 12px;
+      background-color: #fff;
+    }
+  }
+  .group-type {
+    border: 1px solid #d5d5d5;
+    padding: 0 16px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    .header {
+      width: 100%;
+      display: inline-flex;
+      justify-content: space-between;
+      align-items: center;
+      // padding: 0 14px;
+      line-height: 44px;
+      border-bottom: 1px solid #d5d5d5;
+      padding-left: 4px;
+      .all-data {
+        margin-right: auto;
+        color: rgba(0, 0, 0, 0.6);
+        border-bottom: 1px solid transparent;
+        // line-height: 1.4;
+        &:hover {
+          color: #2d7aff;
+          // border-color: #2d7aff;
+          border-color: transparent;
+        }
+        &:active {
+          color: #2d7aff;
+          border-color: transparent;
+        }
+      }
+      .selected {
+        color: #2d7aff;
+      }
+      .right-setting {
+        color: #000;
+        .anticon {
+          color: rgba(0, 0, 0, 0.6);
+          margin-right: 6px;
+        }
+      }
+    }
+    .group {
+      padding: 16px 0;
+      border-bottom: 1px solid #d5d5d5;
+      /deep/ .ant-select {
+        width: 130px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+  .selected-list {
+    padding: 11.5px 6px;
+    display: flex;
+    align-items: center;
+    .selected-item {
+      display: flex;
+      align-items: center;
+      color: #2d7aff;
+      padding: 1px 6.5px 1px 8px;
+      background-color: rgba(45, 122, 255, 0.1);
+      border-radius: 4px;
+      margin-left: 8px;
+      /deep/ .anticon-close {
+        margin-left: 13px;
+        font-size: 12px;
+        color: #2474ff;
+      }
+    }
+  }
+  .selected-num {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 20px;
+    margin-right: 8px;
+  }
+  .selected-item-del {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #2474ff;
+    margin-left: 22px;
+    line-height: 20px;
+    .svg-icon-btn {
+      margin-right: 6px;
+    }
+  }
+  .selected-item-del:hover {
+    color: rgba(36, 116, 255, 0.8);
+  }
+  .selected-list {
+    padding: 11.5px 6px;
+    display: flex;
+    align-items: center;
+    .selected-item {
+      display: flex;
+      align-items: center;
+      color: #2d7aff;
+      padding: 1px 6.5px 1px 8px;
+      background-color: rgba(45, 122, 255, 0.1);
+      border-radius: 4px;
+      margin-left: 8px;
+      /deep/ .anticon-close {
+        margin-left: 13px;
+        font-size: 12px;
+        color: #2474ff;
+      }
+    }
+  }
+  .selected-num {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 20px;
+    margin-right: 8px;
+  }
+  .selected-item-del {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #2474ff;
+    margin-left: 22px;
+    line-height: 20px;
+    .svg-icon-btn {
+      margin-right: 6px;
+    }
+  }
+  .selected-item-del:hover {
+    color: rgba(36, 116, 255, 0.8);
+  }
+  .disabled {
+    pointer-events: none;
+  }
+
+  .classify-4-container {
+    overflow: hidden;
+    transition: height ease-in 0.2s;
+  }
+  div.classify-4 {
+    margin-bottom: 0px;
+    border: none;
+    border-bottom: 1px solid #d5d5d5;
+    .header {
+      border-bottom: none !important;
+    }
+  }
+}
+</style>