From eabe5ac81bcef361f82f80f91515ba40eba47c86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Fri, 17 Apr 2020 21:00:35 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20edit-endpoint=E7=9A=84asset=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E8=BE=93=E5=85=A5=E4=B8=8B=E6=8B=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.edit-endpoint的asset改为输入下拉
2.尝试修复project、asset右上角错位问题
---
 .../common/rightBox/editEndpointBox.vue       | 67 ++++++++++++++-----
 .../src/components/page/alert/list.vue        |  8 ++-
 .../src/components/page/asset/asset.vue       |  1 -
 .../src/components/page/project/project.vue   |  1 -
 4 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 44e6d92a8..dbe8de7b2 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -37,25 +37,36 @@
           </el-form-item>
           <!--asset-->
           <el-form-item :label="$t('asset.asset')" prop="assetId">
-            <div class="right-box-form-content">
-              <el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && endpoint.asset" placeholder="" :value="endpoint.asset.host" size="small"></el-input>
+            <el-autocomplete
+              :fetch-suggestions="assetSuggestion"
+              v-model.trim="endpoint.asset.host"
+              placeholder=""
+              @select="selectAsset"
+              @change.native="inputAsset"
+              size="small"
+              value-key="host"
+              popper-class="no-style-class"
+              style="width: 100%;"
+            >
+            </el-autocomplete>
+              <!--<el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && endpoint.asset" placeholder="" :value="endpoint.asset.host" size="small"></el-input>
               <el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && !endpoint.asset" placeholder="" value="" size="small"></el-input>
               <el-popover placement="left" width="400" v-model="subBox.show" popper-class="nz-pop">
                 <div class="pop-window-assetType-content">
-                  <!-- begin--顶部按钮-->
+                  &lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;
                   <div class="pop-top-btns">
                     <button type="button" @click="subEsc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="edit-ep-subesc">
                       <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
                       <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
                     </button>
                   </div>
-                  <!-- end--顶部按钮-->
-                  <!--begin--标题-->
+                  &lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;
+                  &lt;!&ndash;begin&#45;&#45;标题&ndash;&gt;
                   <div class="pop-title">{{subBox.title}}</div>
-                  <!--end--标题-->
-                  <!---->
+                  &lt;!&ndash;end&#45;&#45;标题&ndash;&gt;
+                  &lt;!&ndash;&ndash;&gt;
                   <div class="pop-item-wider " >
-                    <!-- begin--搜索框-->
+                    &lt;!&ndash; begin&#45;&#45;搜索框&ndash;&gt;
                     <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
                       <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
                         <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
@@ -74,8 +85,8 @@
                         <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-sn">SN</div>
                       </div>
                     </div>
-                    <!-- end--搜索框-->
-                    <!-- begin--table-->
+                    &lt;!&ndash; end&#45;&#45;搜索框&ndash;&gt;
+                    &lt;!&ndash; begin&#45;&#45;table&ndash;&gt;
                     <div class="endpoint-sub-table">
                       <div class="endpoint-sub-table-head">
                         <div class="endpoint-sub-table-col">IP</div>
@@ -98,15 +109,14 @@
                         <el-pagination background :pager-count="5" layout="prev, pager, next" @current-change="(currentPage) => {getAssetList(currentPage)}" :total="assetPageObj.total"></el-pagination>
                       </div>
                     </div>
-                    <!-- end--table-->
+                    &lt;!&ndash; end&#45;&#45;table&ndash;&gt;
                   </div>
                 </div>
                 <div slot="reference" @click.prevent="" class="right-box-row-btn" v-if="rightBox.isEdit">
                   <span class="el-icon-more"></span>
                 </div>
               </el-popover>
-              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
-            </div>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>-->
           </el-form-item>
           <!--host-->
           <el-form-item :label="$t('project.endpoint.host')" prop="host">
@@ -345,9 +355,22 @@
         this.selectedAsset = obj;
         this.endpoint.host = obj.host;
         this.endpoint.assetId = obj.id;
-        this.endpoint.asset = obj;
+        this.$refs.endPointForm.validate();
+      },
+      inputAsset(e) {
+        this.endpoint.assetId = "";
+        let host = e.target.value;
+        if (host) {
+          for (let i = 0; i < this.assetList.length; i++) {
+            if (host == this.assetList[i].host) {
+              this.endpoint.assetId = this.assetList[i].id;
+              this.selectedAsset = this.assetList[i];
+              this.endpoint.host = host;
+              break;
+            }
+          }
+        }
       },
-
       // 获取endpoint弹框中module下拉框数据
       getModuleList(projectId) {
         this.$get('module', {projectId: projectId}).then(response => {
@@ -416,6 +439,20 @@
         this.assetSearch.label = label;
         this.assetSearch.dropdownShow = false;
       },
+      /*asset搜索建议*/
+      assetSuggestion(queryString, callback) {
+        let data = [];
+        if (!queryString) {
+          data = this.assetList;
+        } else {
+          for (let i = 0; i < this.assetList.length; i++) {
+            if (this.assetList[i].host.indexOf(queryString.toLowerCase()) != -1) {
+              data.push(this.assetList[i]);
+            }
+          }
+        }
+        callback(data);
+      },
     },
     created() {
       this.getProjectList();
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index c35ac80a7..75c59311e 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -29,9 +29,11 @@
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
-        <div class="el-popover alert-clean-pop" @click="toDeleteMessage" v-if="deleteBox.ids.length > 0">
-          <i style="cursor: pointer" class="el-icon-delete"></i>
-        </div>
+        <transition name="el-zoom-in-bottom">
+          <div class="el-popover alert-clean-pop" @click="toDeleteMessage" v-if="deleteBox.ids.length > 0">
+            <i style="cursor: pointer" class="el-icon-delete"></i>
+          </div>
+        </transition>
         <el-table
           class="nz-table"
           :data="tableData"
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 1b646d3e7..fca526395 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -99,7 +99,6 @@
                     export-url="/asset/export"
                     :params="searchLabel"
                     @afterImport="getAssetData"
-                    style="width: 57px;"
                     class="float-right">
                     <template slot="optionZone">
                       <div class="export-left-btn" @click.stop="tagShow('showAdd')">
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 475de26d0..37b7f1a72 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -88,7 +88,6 @@
               :params="endpointSearchLabel"
               @afterImport="getEndpointTableData"
               class="margin-l-20"
-              style="width: 57px;"
             >
               <template slot="optionZone">
                 <div class="export-left-btn" @click.stop="toCreateEndpoint">