feat: account详情改为底部上滑

2020-03-27 17:20:55 +08:00
parent 25f837dde0
commit 7fba024efd
6 changed files with 269 additions and 72 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -380,6 +380,7 @@ li{
 /* begin--二级页面tab*/
 .sub-list-tabs {
  margin-top: 0 !important;
+  position: relative;
  height: 100%;
  background-color: #f5f7fa;
 }
@@ -401,10 +402,14 @@ li{
  background-color: white;
  border-top: solid 2px #ee9d3f;
 }
-.sub-list-tab-txt {
+.sub-list-tab-title {
  font-size: 14px;
  color: #666666;
-  padding-left: 8px;
+  padding: 0 8px;
+  height: 100%;
+  display: inline-block;
+  background-color: #eeeeee;
+  line-height: 30px;
 }
 /* end--二级页面tab*/

--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -1,10 +1,10 @@
 <template>
  <span>
    <div class="sub-top-tools">
-      <div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
-        <div class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div>
-        <div class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
-        <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
+      <div class="sub-list-tabs">
+        <div class="sub-list-tab-title">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</div><div
+        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
      </div>
      <div class="top-tool-right">
        <div class="top-tool-search">
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
@@ -1,11 +1,12 @@
 <template>
  <span>
    <div class="sub-top-tools">
-      <div class="sub-list-tabs margin-l-20">
-        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div>
-        <template v-if="from == 'dc'">
+      <div class="sub-list-tabs">
+        <div class="sub-list-tab-title">
+          <template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
+          <template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
+        </div><div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
        <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
-          <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
        </template>
      </div>
    </div>
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -440,7 +440,7 @@ const en = {
    account: {
      accountList: 'Account list',//"用户列表"
      //列表表头
-      account: 'Account',//"用户"
+      account: 'Username',//"用户"
      language: 'Language',//"语言"
      receiver: 'Account group',//"用户组"
      createTime: 'Create time',//"创建时间"
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -24,7 +24,20 @@
      </div>
    </div>
    <div class="content-right">
-      <div class="top-tools">
+      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+        <div class="top-tools" v-show="mainResizeShow">
+          <div class="top-tool-main-right margin-r-20" :class="{'top-tool-main-right-to-left': showSubList}">
+            <div class="top-tool-search">
+              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+            </div>
+            <button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
+              <i class="nz-icon-create-square nz-icon"></i>
+            </button>
+          </div>
+          <div class="pagination-top pagination-top-hide display-none"></div>
+        </div>
+      <!--<div class="top-tools">
        <div class="top-tool-main-right">
          <div class="top-tool-search margin-r-20">
            <search-input :searchMsg="searchMsg" @search="search"></search-input>
@@ -34,13 +47,14 @@
                  <i class="nz-icon-create-square nz-icon"></i>
          </button>
        </div>
-      </div>
+      </div>-->
        <el-table
          class="nz-table"
          :data="tableData"
          border
+          v-show="mainResizeShow"
          ref="accountTable"
-        :height="$tableHeight.normal"
+          :height="mainTableHeight"
          v-scrollBar:el-table
          style="width: 100%;">
          <el-table-column
@@ -88,9 +102,14 @@
            </template>
          </el-table-column>
        </el-table>
+        <div class="pagination-bottom" v-show="!showSubList">
          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        </div>
       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
      </div>
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab="targetTab" :detail="userDetail"
+                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+    </div>

    <transition name="right-box">
      <div class="right-box right-box-account" v-if="rightBox.show" v-clickoutside="clickos">
@@ -179,6 +198,14 @@
    name: "account",
    data() {
      return {
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        targetTab: '', //展示二级列表中的哪个页签
+        showElementSet: false, //控制自定义列的弹框
+        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        mainResizeShow: true, //dom高度改变时部分内容是否展示
+        subResizeShow: true,
+        isFullScreen: false,
+        showSubList: false, //是否展示二级列表
        tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
        showTopBtn: false,
        rightBox: { //弹出框相关
@@ -195,6 +222,7 @@
          receiver: [],
          lang: ''
        },
+        userDetail: [],
        pageObj: {
          pageNo: 1,
          pageSize: 20,
@@ -288,6 +316,119 @@
      }
    },
    methods: {
+      // 鼠标拖动二级列表
+      listResize(e) {
+        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
+        let subListDom = document.querySelector(".sub-list"); //副列表
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        //得到点击时俩dom的初始高度：
+        let mainInitialHeight = mainListDom.offsetHeight;
+        let subInitialHeight = subListDom.offsetHeight;
+        //点击时鼠标的Y轴位置
+        let mouseInitialY = e.clientY;
+
+        let _this = this;
+
+        document.onmousemove = (e) => {
+          e.preventDefault();
+          //得到鼠标拖动的距离
+          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
+
+          //往上方拖动：
+          if (e.clientY < mouseInitialY) {
+            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
+            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
+          }
+          //往下方拖动：
+          if (e.clientY > mouseInitialY) {
+            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
+            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
+          }
+
+          // 主、副列表最小高度限制为15px
+          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
+            mainListDom.style.height = contentRightHeight-15+'px';
+          }
+          if(parseInt(mainListDom.style.height) <= 15){
+            mainListDom.style.height = 15+'px';
+          }
+          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
+            subListDom.style.height = contentRightHeight-15+'px';
+          }
+          if(parseInt(subListDom.style.height) <= 15){
+            subListDom.style.height = 15+'px';
+          }
+          //当主副列表可视区域小于一定值时，不展示内容
+          if(parseInt(mainListDom.style.height) <= 100){
+            if (_this.mainResizeShow) {
+              _this.mainResizeShow = false;
+            }
+          } else {
+            if (!_this.mainResizeShow) {
+              _this.mainResizeShow = true;
+            }
+          }
+          if(parseInt(subListDom.offsetHeight) <= 100){
+            if (_this.subResizeShow) {
+              _this.subResizeShow = false;
+            }
+          } else {
+            if (!_this.subResizeShow) {
+              _this.subResizeShow = true;
+            }
+          }
+        };
+        document.onmouseup = () => {
+          document.onmousemove = null;
+        }
+      },
+      exitFullScreen() {
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        //主列表
+        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
+
+        //副列表
+        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
+        setTimeout(() => {
+          this.isFullScreen = false;
+          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
+            this.mainResizeShow = true;
+          }
+          if (document.querySelector(".sub-list").offsetHeight >= 100) {
+            this.subResizeShow = true;
+          }
+        }, 210);
+      },
+      fullScreen() {
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        this.isFullScreen = true;
+        //主列表
+        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
+        document.querySelector(".main-list-with-sub").style.height = '0';
+        this.mainResizeShow = false;
+        //副列表
+        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+      },
+      jumpTo(data, id) {
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+      convertToDetail(obj) {
+        let detail = [];
+        detail.push({label: this.$t("config.account.account"), value: obj.username});
+        detail.push({label: "E-mail", value: obj.email});
+        let available = obj.status == 1 ? this.$t("tip.yes") : this.$t("tip.no");
+        detail.push({label: this.$t("config.account.enable"), value: available});
+        detail.push({label: this.$t("config.account.createTime"), value: obj.createTime});
+        return detail;
+      },
      elementsetShow(s, e) {
        var eventfixed = {
          shezhi: 0,
@@ -347,9 +488,11 @@
      },
      detail: function (u) {
        this.user = Object.assign({}, u);
-        this.rightBox.isEdit = false;
+        /*this.rightBox.isEdit = false;
        this.rightBox.title = this.$t("config.account.account") + "  ID：" + u.userId;
-        this.rightBox.show = true;
+        this.rightBox.show = true;*/
+        this.targetTab = "detail";
+        this.showSubList = true;
      },
      getTableData: function () {
        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
@@ -516,6 +659,55 @@
        }
      }
    },
+    watch: {
+      user: {
+        deep: true,
+        handler(n) {
+          this.userDetail = this.convertToDetail(n);
+        }
+      },
+      showSubList(n) {
+        this.inTransform = n;
+        if (!n) {
+          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
+          this.isFullScreen = false;
+          //移动分页组件的位置
+          let paginationTop = document.querySelector(".pagination-top");
+          let paginationBottom = document.querySelector(".pagination-bottom");
+          paginationTop.classList.remove("display-none");
+          if (paginationTop.classList.contains("pagination-top-show")) {
+            paginationTop.classList.remove("pagination-top-show");
+          }
+          if (!paginationTop.classList.contains("pagination-top-hide")) {
+            paginationTop.classList.add("pagination-top-hide");
+          }
+          setTimeout(() => {
+            paginationTop.classList.add("display-none");
+            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
+          }, 210);
+
+          // 主列表恢复全屏
+          this.mainResizeShow = this.subResizeShow = true;
+          document.querySelector('.main-list').style.height = "";
+          //副列表高度清空
+          document.querySelector(".sub-list").style.height = '';
+        } else {
+          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
+          //移动分页组件的位置
+          let paginationTop = document.querySelector(".pagination-top");
+          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
+          paginationTop.classList.remove("display-none");
+          setTimeout(() => {
+            if (paginationTop.classList.contains("pagination-top-hide")) {
+              paginationTop.classList.remove("pagination-top-hide");
+            }
+            if (!paginationTop.classList.contains("pagination-top-show")) {
+              paginationTop.classList.add("pagination-top-show");
+            }
+          }, 210);
+        }
+      }
+    },
    mounted() {
      //是否存在分页缓存
      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -178,7 +178,7 @@
            name: ''
          }
        },
-        cabinetDc: {},
+        cabinetDc: {}, // 用在二级cabinet列表页里
        dcDetail: [], //dc的详情信息，包含标题
        pageObj: {
          pageNo: 1,
@@ -414,7 +414,6 @@
        }
        detail.push({label: this.$t("asset.createAssetTab.principal"), value: principal});
        detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
-        console.info(detail)
        return detail;
      },
      toAdd() {