feat: account详情改为底部上滑

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*/
 

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-tabs">
-        <div class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div>
+        <div class="sub-list-tab-title">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</div><div
-        <div class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
+        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
-        <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
+        class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search">

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-tabs">
-        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div>
+        <div class="sub-list-tab-title">
-        <template v-if="from == 'dc'">
+          <template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
-          <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
+          <template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
-          <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
+        </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>
         </template>
       </div>
     </div>

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',//"创建时间"

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,62 +47,68 @@
                   <i class="nz-icon-create-square nz-icon"></i>
           </button>
         </div>
+      </div>-->
+        <el-table
+          class="nz-table"
+          :data="tableData"
+          border
+          v-show="mainResizeShow"
+          ref="accountTable"
+          :height="mainTableHeight"
+          v-scrollBar:el-table
+          style="width: 100%;">
+          <el-table-column
+            :resizable="false"
+            v-for="(item, index) in tablelable"
+            v-if="item.show"
+            :width="item.width"
+            :key="`col-${index}`"
+            :label="item.label"
+          >
+            <template slot-scope="scope" :column="item">
+              <div v-if="item.prop == 'option'" class="content-right-options">
+                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                &nbsp;
+                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                &nbsp;
+                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+              </div>
+              <span v-else-if="item.prop == 'lang'">
+                              {{scope.row[item.prop] == 'en' ? 'English' : ''}}
+                              {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
+                              {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
+                          </span>
+              <span v-else-if="item.prop == 'receiver'">
+                              <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
+                          </span>
+              <span v-else-if="item.prop == 'status'">
+                              <el-switch
+                                v-model="scope.row.status"
+                                active-value="1"
+                                inactive-value="0"
+                                active-color="#ee9d3f"
+                                :disabled="isCurrentUser(scope.row.username)"
+                                @change="(val)=>{statusChange(scope.row)}">
+                              </el-switch>
+                          </span>
+              <span v-else>{{scope.row[item.prop]}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column width="28">
+            <template slot="header" slot-scope="scope" :resizable="false">
+              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                <i class="nz-icon nz-icon-gear"></i>
+              </span>
+            </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>
-      <el-table
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab="targetTab" :detail="userDetail"
-        class="nz-table"
+                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
-        :data="tableData"
-        border
-        ref="accountTable"
-        :height="$tableHeight.normal"
-        v-scrollBar:el-table
-        style="width: 100%;">
-        <el-table-column
-          :resizable="false"
-          v-for="(item, index) in tablelable"
-          v-if="item.show"
-          :width="item.width"
-          :key="`col-${index}`"
-          :label="item.label"
-        >
-          <template slot-scope="scope" :column="item">
-            <div v-if="item.prop == 'option'" class="content-right-options">
-              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-              &nbsp;
-              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              &nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-            </div>
-            <span v-else-if="item.prop == 'lang'">
-                            {{scope.row[item.prop] == 'en' ? 'English' : ''}}
-                            {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
-                            {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
-                        </span>
-            <span v-else-if="item.prop == 'receiver'">
-                            <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
-                        </span>
-            <span v-else-if="item.prop == 'status'">
-                            <el-switch
-                              v-model="scope.row.status"
-                              active-value="1"
-                              inactive-value="0"
-                              active-color="#ee9d3f"
-                              :disabled="isCurrentUser(scope.row.username)"
-                              @change="(val)=>{statusChange(scope.row)}">
-                            </el-switch>
-                        </span>
-            <span v-else>{{scope.row[item.prop]}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column width="28">
-          <template slot="header" slot-scope="scope" :resizable="false">
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <transition name="right-box">
@@ -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);

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() {