From 9d5d816aa73287d192513b52413b7f5e7ee05379 Mon Sep 17 00:00:00 2001
From: wanghaoyu <825151728@qq.com>
Date: Thu, 26 Dec 2019 17:39:30 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20header=E5=86=B2=E7=AA=81=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          | 237 ++++++++++++++++--
 1 file changed, 222 insertions(+), 15 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 2c341fce7..d99f196ea 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -48,16 +48,80 @@
             </el-menu-item>
           </template>
         </el-submenu>
-        <el-submenu index="3" popper-class="nz-submenu">
-          <template slot="title">
-            <div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
-          </template>
-          <template v-for="(item, index) in assetData">
-            <el-menu-item :index="'3-' + index">
-              <div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
-            </el-menu-item>
-          </template>
-        </el-submenu>
+          <el-submenu index="3">
+              <template slot="title">
+                  <div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
+              </template>
+              <template v-for="(item, index) in assetData">
+                  <el-menu-item :index="'3-' + index">
+                      <div @click="jumpToAsset('asset',item.id)">
+                          <span>{{item.name}}</span>
+                          <el-popover
+                                  placement="bottom"
+                                  v-model="item[item.name]"
+                                  trigger="click"
+                          >
+                              <div class="pop-window-assetType-content">
+                                  <div class="right-box-top-btns">
+                                      <div class="right-box-top-btn right-box-top-btn-full"
+                                           @click="item[item.name] = false">
+                                          <div class="right-box-btn-icon">
+                                              <i class="el-icon-close"></i>
+                                          </div>
+                                          <span>{{$t('overall.esc')}}</span>
+                                      </div>
+                                  </div>
+                                  <div class="pop-window">
+                                      <span style="display: block;padding-bottom: 20px">标题</span>
+                                      <div style="padding-top: 10px;padding-left: 20px">
+                                          <div>
+                                              <label style="font-size: 12px">DN name</label>
+                                              <input class='sidebar-pop-input' v-model="addIdcData.name"/>
+                                          </div>
+                                          <div style="padding-top: 40px">
+                                              <label style="font-size: 12px">Loaction</label>
+                                              <input class='sidebar-pop-input' v-model="addIdcData.location"/>
+                                          </div>
+                                          <div style="padding-top: 40px">
+                                              <label style="font-size: 12px;padding-right: 20px">负责人</label>
+                                              <select class='sidebar-pop-input-select'
+                                                      style="margin-left:-40px "
+                                                      v-model="addIdcData.principal"
+                                                      clearable>
+                                                  <option
+                                                          v-for="item in idcUserData"
+                                                          :key="item.key"
+                                                          :label="item.username"
+                                                          :value="item.userId"
+                                                  >
+                                                  </option>
+                                              </select>
+                                          </div>
+                                          <div style="padding-top: 40px">
+                                              <label style="font-size: 12px">Tel</label>
+                                              <input class='sidebar-pop-input' v-model="addIdcData.tel"/>
+                                          </div>
+                                      </div>
+                                  </div>
+                              </div>
+                              <div class="right-box-bottom-btns">
+                                  <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
+                                       @click.stop="item[item.name]= false">
+                                      {{$t('overall.cancel')}}
+                                  </div>
+                                  <div class="right-box-bottom-btn right-box-bottom-btn-50"
+                                       @click="editData('idc',item.id)">
+                                      {{$t('overall.save')}}
+                                  </div>
+                              </div>
+                              <div @click.stop="getIDCOptionData(item.id)" slot="reference" class="menu-edit">
+                                  <i class="el-icon-edit-outline"></i>
+                              </div>
+                          </el-popover>
+                      </div>
+                  </el-menu-item>
+              </template>
+          </el-submenu>
         <el-submenu index="4-0" popper-class="nz-submenu">
           <template slot="title">
             <div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
@@ -211,7 +275,16 @@
             url: 'alertConfig',
             type: 5
           }
-        ]
+        ],
+        addIdcData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        idcUserData: '',
+        IDCOptionData: [],
       }
     },
     methods: {
@@ -223,6 +296,7 @@
           }
         });
       },
+
       createBox(item) {
         if (item.type == 1) {
           this.$refs.projectBox.show(true);
@@ -247,19 +321,80 @@
         this.$store.commit('setProject', p);
         this.jumpTo('project');
       },
-      changeLocal(lang) {
-        if (lang != localStorage.getItem("nz-language")) {
-          localStorage.setItem("nz-language", lang);
-          window.location.reload();
+      getUserData() {
+        this.$get('sys/user/list').then(response => {
+          if (response.code === 200) {
+            this.idcUserData = response.data.list
+          }
+        })
+      },
+      getIDCOptionData(data) {
+        this.$get('idc?id=' + data).then(response => {
+          if (response.code === 200) {
+            this.addIdcData = response.data.list[0];
+            this.clickFlush(this.addIdcData)
+          }
+        })
+      },
+      editData(data, Id) {
+        let idcData = {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        }
+        if (data === 'idc') {
+          idcData.id = Id
+          idcData.name = this.addIdcData.name
+          idcData.location = this.addIdcData.location
+          idcData.principal = this.addIdcData.principal
+          idcData.tel = this.addIdcData.tel
+        }
+        this.$put(data, idcData).then(res => {
+          const h = this.$createElement;
+          if (res.code === 200) {
+            this.$notify({
+              message: h('i', {style: 'color: teal'}, '修改成功'),
+              duration: 2000
+            })
+            this.$store.state.flushDataSign = true
+          }else{
+            this.$notify({
+              message: h('i', {style: 'color: teal'}, res.msg),
+              duration: 2000
+            })
+          }
+        })
+      },
+      clickFlush(itemData) {
+        for (let i = 0; i < this.assetData.length; i++) {
+          const element = this.assetData[i];
+          if (element.id === itemData.id) {
+            setTimeout(() => {
+              element[element.name] = true;
+            }, 100)
+          } else {
+            element[element.name] = false
+          }
         }
       },
       getAssetData() {
         this.$get('idc', this.pageObj).then(response => {
           if (response.code == 200) {
             this.assetData = response.data.list
+            this.assetData.forEach(item => {
+              this.$set(item, item.name, false)
+            })
           }
         })
       },
+      changeLocal(lang) {
+        if (lang != localStorage.getItem("nz-language")) {
+          localStorage.setItem("nz-language", lang);
+          window.location.reload();
+        }
+      },
       getProjectList() {
         this.$get('project', {}).then(response => {
           if (response.code == 200) {
@@ -298,6 +433,7 @@
       this.language = localStorage.getItem("nz-language");
     },
     mounted() {
+      this.getUserData();
       this.getAssetData();
       this.getProjectList();
     },
@@ -467,4 +603,75 @@
     line-height: 36px;
     float: right;
   }
+  .pop-window-assetType-content {
+      padding: 1px 15px 15px 20px;
+  }
+
+  .pop-window {
+      height: 370px;
+      width: 400px;
+  }
+  .sidebar-pop-input {
+      position: absolute;
+      right: 50px;
+      width: 200px;
+      height: 26px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      color: #606266;
+      display: inline-block;
+      padding: 0px 15px;
+  }
+
+  .sidebar-pop-input-select {
+      position: absolute;
+      right: 83px;
+      width: 200px;
+      height: 26px;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      color: #606266;
+      display: inline-block;
+      padding: 0px 15px;
+  }
+
+  .right-box-top-btn {
+      border-radius: 0 0 9px 9px;
+      float: right;
+      color: #656565;
+      height: 30px;
+      font-size: 12px;
+      padding: 3px 8px 1px 8px;
+      border: 1px solid #aaaaaa;
+      border-top: none;
+      cursor: pointer;
+      margin-left: 20px;
+  }
+
+  .right-box-bottom-btns {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      text-align: center;
+  }
+
+  .right-box-bottom-btn-cancel {
+      background-color: #DADADA;
+      color: #656565;
+      width: 50%;
+      border-bottom-left-radius: 8px;
+  }
+
+  .right-box-top-btn-full {
+      background-color: #656565;
+      border: 1px solid #656565;
+      border-top: none;
+      color: white;
+  }
+
+  .right-box-bottom-btn-50 {
+      width: 50%;
+      float: right;
+      border-bottom-right-radius: 8px;
+  }
 </style>