cnhis-design-vue 0.2.63-beta → 0.3.1-beta

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

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