修复因样式导致的登出账号后登录页面样式混乱问题

zhuzhuanzhuan

2024-04-18 b417dc5912e77367694095411121fddf665c1d7e

 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>
@@ -112,21 +118,23 @@
      ...mapActions(['QueryProduction']),
      getCurrSelectedTitle() {
        return !this.currSelected.title ? '' : this.currSelected.title
      }
      ,
      },
      /**
       * 取消车间选中项
       */
      onClearSelected() {
        this.hiding = true
        this.currSelected = {}
        this.selectedKeys = []
        // console.log('发送')
        // this.$bus.$emit('treeClearSelected','重置列表')
        this.$emit('sendSelectBaseTree', '')
      },

      onSelect(selectedKeys, e) {
        this.hiding = false
        let record = e.node.dataRef
        this.currSelected = Object.assign({}, record)
        this.selectedKeys = [record.key]
        console.log(this.selectedKeys)
        this.$emit('sendSelectBaseTree', this.selectedKeys)
      },
      handleEdit(entity) {
@@ -147,6 +155,7 @@
            this.allTreeKeys = []
            this.treeDataSource = res.result
            this.generateList(res.result)
            this.expandedKeys=this.allTreeKeys
          } else {
            this.$message.warn(res.message)
          }
@@ -167,8 +176,7 @@
        //   this.loading = false
        //   this.cardLoading = false
        // })
      }
      ,
      },
      handleChange() {
        let search = this.searchInput
        let expandedKeys = this.dataList
@@ -186,8 +194,7 @@
          searchValue: search,
          autoExpandParent: true
        })
      }
      ,
      },
      handleSearch(value) {
        let search = value
        let expandedKeys = this.dataList
@@ -206,8 +213,7 @@
          searchValue: search,
          autoExpandParent: true
        })
      }
      ,
      },
      getParentKey(key, tree) {
        let parentKey
        for (let i = 0; i < tree.length; i++) {
@@ -223,7 +229,6 @@
        }
        return parentKey
      },

      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i]
@@ -288,9 +293,7 @@
        this.queryTreeData()
        // 新增/修改 成功时，重载列表
      }

    }
    ,
    },
    //监听
    watch: {
      currSelected(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
@@ -346,10 +349,6 @@
    overflow-y: hidden;
  }

  #app .desktop {
    height: auto !important;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px;
@@ -359,7 +358,7 @@
    padding: 5px 15px 5px 37px;
  }

  .drawer-bootom-button {
  .drawer-bottom-button {
    position: absolute;
    top: 1px;
    /* padding: 10px 16px; */
@@ -368,34 +367,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>