qushaowei
2024-01-15 017886be8a6c07ccaaf6300b8c7652ddbd41d734
src/views/mdc/common/BaseTree.vue
@@ -1,56 +1,62 @@
<template>
  <a-card class="tree_con" :loading="cardLoading" :bordered="false" >
    <a-spin :spinning="loading">
      <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px">
        <div slot="message">
          <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
          <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消</a>
          <span v-else>无</span>
        </div>
      </a-alert>
      <div class="drawer-bootom-button">
        <a-dropdown :trigger="['click']" placement="bottomCenter">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
            <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
          </a-menu>
          <a-button>
            <a-icon type="bars"/>
          </a-button>
        </a-dropdown>
      </div>
      <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 类别编码/名称" allowClear
                      v-model="searchInput" @change="handleChange"/>
      <!-- showLine -->
      <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys"
              :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
              :treeData="treeDataSource"
              :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}">
        <template slot="title" slot-scope="{ title, parentId, entity, key}">
      <div style="display: flex;flex-direction: column;height: 100%">
          <div>
            <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px">
              <div slot="message">
                <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
                <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消</a>
                <span v-else>无</span>
              </div>
            </a-alert>
            <div class="drawer-bottom-button">
              <a-dropdown :trigger="['click']" placement="bottomCenter">
                <a-menu slot="overlay">
                  <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
                  <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
                  <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
                </a-menu>
                <a-button>
                  <a-icon type="bars"/>
                </a-button>
              </a-dropdown>
            </div>
          </div>
        <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 类别编码/名称" allowClear
                        v-model="searchInput" @change="handleChange"/>
        <!-- showLine -->
        <div style="flex: 1;overflow:auto;margin-top: 10px">
          <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys"
                  :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                  :treeData="treeDataSource"
                  :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}">
            <template slot="title" slot-scope="{ title, parentId, entity, key}">
          <span v-if="title.indexOf(searchValue) > -1">
            {{ title.substr(0, title.indexOf(searchValue)) }}
            <span class="replaceSearch">{{ searchValue }}</span>
            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ title }}</span>
          <a-dropdown v-if="!editDisable && entity.parentId == -1" :trigger="['click']" placement="bottomCenter">
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleEdit(entity)">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="batchDel(entity)">
                  删除
                </a>
              </a-menu-item>
            </a-menu>
            <span :style="{position: 'absolute',right: 0}">
              <span v-else>{{ title }}</span>
              <a-dropdown v-if="!editDisable && entity.parentId == -1" :trigger="['click']" placement="bottomCenter">
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;" @click="handleEdit(entity)">编辑</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="batchDel(entity)">
                      删除
                    </a>
                  </a-menu-item>
                </a-menu>
                <span :style="{position: 'absolute',right: 0}">
              <a-icon type="down"/>
            </span>
          </a-dropdown>
        </template>
      </a-tree>
              </a-dropdown>
            </template>
          </a-tree>
        </div>
      </div>
    </a-spin>
    <tier-model ref="tierModalForm"  @ok="modalFormOk"></tier-model>
  </a-card>
@@ -356,7 +362,7 @@
    padding: 5px 15px 5px 37px;
  }
  .drawer-bootom-button {
  .drawer-bottom-button {
    position: absolute;
    top: 1px;
    /* padding: 10px 16px; */
@@ -365,34 +371,38 @@
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
  .tree_con{
    overflow: hidden;
  }
  @media screen and (min-width: 1920px){
    .tree_con{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .tree_con{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .tree_con{
      height: 600px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .tree_con{
      height: 501px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .tree_con{
      height: 501px!important;
      overflow: scroll;
    }
  }
  /deep/ .ant-card-body,/deep/ .ant-spin-nested-loading,/deep/ .ant-spin-container{
    height: 100%;
  }
</style>