perf: endpoint弹框/asset列表

1.endpoint弹框样式，包含校验 2.asset列表页（部分）
2020-01-02 18:13:01 +08:00
parent a536f53f64
commit f5cbf317ce
9 changed files with 1595 additions and 805 deletions
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -12,6 +12,7 @@
  "dependencies": {
    "axios": "^0.19.0",
    "element-ui": "^2.13.0",
+    "node-sass": "^4.13.0",
    "vue": "^2.5.2",
    "vue-i18n": "^8.15.1",
    "vue-router": "^3.0.1",
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -174,21 +174,26 @@ html {
  width: 100%;
  padding-top: 10px;
 }
-.sidebar-info-item {
+.content-left .sidebar-info-item {
  line-height: 1.5rem;
  padding: 0 10px 0 10px;
  cursor: pointer;
  color: #444444;
  margin: 0 0 7px;
+  display: block;
 }
 .side-bar-menu-edit {
  line-height: 1.5rem;
  float: right;
 }
-.sidebar-info-item-active {
+.content-left .sidebar-info-item-active {
  border-left: 3px solid #e07700;
  font-weight: bold;
 }
+.content-left .el-checkbox-group .sidebar-info-item-active {
+  font-weight: bold;
+  border-left: none;
+}
 /* end--左侧列表*/

 /* begin--右侧内容*/
@@ -336,7 +341,7 @@ html {
 .right-box-add-endpoint .right-box-form {
  height: 100%;
 }
-.right-box-form .el-form-item {
+.right-box-form>.el-form-item {
  margin-bottom: 15px;
 }
 .right-box-form .el-select {
@@ -417,6 +422,9 @@ html {
  color: #DCDFE6;
  cursor: pointer;
 }
+.param-box .param-box-row .is-error {
+  padding-bottom: 10px;
+}
 /* end--param*/
 .right-box-form-content .el-select {
  width: 100%;
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
@@ -9,7 +9,7 @@

 .nz-icon {
  font-family: "nz-icon" !important;
-  font-size: 16px;
+  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -501,6 +501,7 @@

  .nz-submenu .el-menu--popup-bottom-start {
    margin-top: 0;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
  }

  .nz-submenu.el-menu--horizontal .el-menu .el-menu-item {
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -95,12 +95,13 @@
                <button type="button" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square module-info module-info-cover">{{$t('overall.cover')}}</button>
              </div>
              <!--endpoints-->
-              <div class="endpoints-box-endpoints">
+              <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
                <el-table
                  :data="endpointList"
                  ref="endpointTable"
                  style="width: 100%;border-radius: 4px;"
                  height="calc(100% - 36px)"
+                  :row-class-name="setRowIndex"
                  empty-text=" ">
                  <el-table-column
                    type="selection"
@@ -119,6 +120,7 @@
                      <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
                      <span v-else-if="title.prop == 'param'">
                        <el-popover
+                          v-if="!scope.row.isEdit"
                          placement="bottom"
                          width="200"
                          trigger="hover"
@@ -127,10 +129,14 @@
                            <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
                          </div>
                          <span slot="reference">
-                            <span @mousedown.stop v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
-                            <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param input-x-mini" v-model="scope.row.param"></el-input></span>
+                            <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
                          </span>
                        </el-popover>
+                        <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input readonly class="endpoint-info endpoint-info-param input-x-mini" v-model="scope.row.param"></el-input>
+                          </el-form-item>
+                        </span>
                      </span>
                      <span v-else-if="title.prop == 'path'">
                        <el-popover
@@ -138,33 +144,47 @@
                          width="100"
                          trigger="hover"
                          :content="scope.row[title.prop]"
+                          v-if="!scope.row.isEdit"
                        >
                          <span slot="reference">
-                          <span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
-                          <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.path"></el-input></span>
+                            <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
                          </span>
                        </el-popover>
+                        <span @mousedown.stop v-else>
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input class="endpoint-info input-x-mini" v-model="scope.row.path"></el-input>
+                          </el-form-item>
+                        </span>
                      </span>
                      <span v-else-if="title.prop == 'port'">
                        <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
-                      <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.port"></el-input></span>
+                        <span @mousedown.stop v-else>
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input class="endpoint-info input-x-mini" v-model="scope.row.port"></el-input>
+                          </el-form-item>
+                        </span>
                      </span>
                      <span v-else-if="title.prop == 'host'">
                        <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
-                      <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.host"></el-input></span>
+                        <span @mousedown.stop v-else>
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                            <el-input class="endpoint-info input-x-mini" v-model="scope.row.host"></el-input>
+                          </el-form-item>
+                        </span>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="" width="56">
                    <template slot-scope="scope" :column="title">
                      <div>
-                        <span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
+                        <span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
                        <span v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
                        <span class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
+                <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
                <div>
                  <button type="button" @click="clearSelection" class="nz-btn nz-btn-size-small nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
                  <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
@@ -214,10 +234,13 @@
            {required: true, message: this.$t('validate.required'), trigger: 'change'}
          ],
        },
+        paramBorderColor: '#dcdfe6',
+        endpointTouch: false,
        endpointForm: {projectId: '', moduleId: '', endpointList: []},
        currentModuleCopy: {},
        tempParamObj: [],
        tempEndpoint: {},
+        tempEndpoint2: {},
        rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
        editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
        moduleParamShow: false, //module默认参数param悬浮窗
@@ -247,12 +270,12 @@
          },{
            label: this.$t("project.endpoint.param"),
            prop: 'param',
-            width: 93,
+            width: 90,
            show: true,
          },{
            label: this.$t("project.endpoint.path"),
            prop: 'path',
-            width: 63,
+            width: 66,
            show: true,
          }
        ],
@@ -282,14 +305,15 @@
            this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
          }
        } else {
-          if (this.endpointList.length > 0) {
-            for (let i = 0; i < this.endpointList.length; i++) {
-              this.endpointList[i].isEdit = false;
-            }
-          }
          if (!this.editParamBox.show) {
            return;
          }
+          for (let i = 0; i < this.tempParamObj.length; i++) {
+            if (!this.tempParamObj[i].key || !this.tempParamObj[i].value) {
+              this.tempParamObj.splice(i, 1);
+              i--;
+            }
+          }
          if (this.editParamBox.type == 1) {
            this.currentModuleCopy.paramObj = this.tempParamObj;
            this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
@@ -311,6 +335,7 @@
      esc() {
        this.rightBox.show = false;
        this.editParamBox.show = false;
+        this.endpointTouch = false;
      },

      // 新增param
@@ -325,12 +350,26 @@

      //编辑endpoint
      toEditEndpoint(endpoint) {
-        console.info(1)
+        for (let i = 0; i < this.endpointList.length; i++) {
+          if (this.endpointList[i].isEdit) {
+            this.endpointList.splice(i, 1, JSON.parse(JSON.stringify(this.tempEndpoint2)));
+            this.endpointList[i].isEdit = false;
+            break;
+          }
+        }
        endpoint.isEdit = true;
+        this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint));
      },
      editEndpoint(endpoint) {
-        console.info(2)
+        this.$refs.addEndpointForm.validate((valid) => {
+          if (valid) {
            endpoint.isEdit = false;
+            this.tempEndpoint2 = {};
+          } else {
+            return false;
+          }
+        });
+
      },

      //移除endpoint
@@ -431,6 +470,9 @@
          moduleId: this.currentModuleCopy.id
        });
        this.assetList.splice(index, 1);
+        this.endpointTouch = true;
+        this.endpointForm.projectId = this.currentProject.id;
+        this.endpointForm.moduleId = this.currentModuleCopy.id;
      },

      //将param转为json字符串格式
@@ -471,6 +513,11 @@
      save() {
        this.endpointForm.projectId = this.currentProject.id;
        this.endpointForm.moduleId = this.currentModuleCopy.id;
+        if (this.endpointList.length == 0) {
+          this.endpointTouch = true;
+          this.$refs.addEndpointForm.validate();
+          return false;
+        }
        this.$refs.addEndpointForm.validate((valid) => {
          if (valid) {
            this.$post('endpoint', this.endpointList).then(response => {
@@ -528,6 +575,10 @@
      clearEndpoints() {
        this.getAssetList();
        this.endpointList = [];
+      },
+
+      setRowIndex({row, rowIndex}) {
+        row.index = rowIndex;
      }
    },
    computed: {
@@ -543,12 +594,23 @@
      this.getAssetList();
    },
    watch: {
+      endpointList(n, o) {
+        this.endpointForm.endpointList = n;
+        if (n.length > 0) {
+          this.paramBorderColor = '#dcdfe6';
+        } else {
+          this.paramBorderColor = '#F56C6C';
+        }
+
+      },
      currentProject(n, o) {
+        this.endpointForm.projectId = n.id;
        this.getModuleList(n.id);
      },
      currentModule: {
        immediate: true,
        handler(n, o) {
+          this.endpointForm.moduleId = n.id;
          this.currentModuleCopy = JSON.parse(JSON.stringify(n));
        }
      },
@@ -616,7 +678,7 @@

  /* begin--小盒子*/
  .right-child-boxes {
-    height: calc(100% - 196px);
+    height: calc(100% - 216px);
    position: relative;
  }
  .endpoint-to-right-symbol {
@@ -695,6 +757,7 @@
    border: 1px solid #dcdfe6;
    height: calc(100% - 39px);
    margin-top: 6px;
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .endpoint-param-pop{
    max-height: 200px;
@@ -840,4 +903,11 @@
  .endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
    border-color: #c0c4cc;
  }
+
+  .endpoints-box-endpoints .el-form-item {
+    margin-bottom: 0;
+  }
+  .endpoints-box-endpoints .el-form-item.is-error {
+    margin-bottom: 22px;
+  }
 </style>
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -41,7 +41,7 @@
      <!-- begin--表单-->
      <el-scrollbar class="right-box-form-box">
        <el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm">
-          <el-form-item :label='$t("project.project.project")' prop="project.id">
+          <el-form-item :label='$t("project.project.project")' prop="project">
            <el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
@@ -187,7 +187,7 @@
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          project: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+            {required: true, message: this.$t('validate.required'), trigger: 'change'}
          ],
          port: [
            {type: 'number', message: this.$t('validate.number'), trigger: 'blur'}
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,13 +1,12 @@
 <template>
  <div class="asset">
    <div class="content-left">
-            <div class="sidebar-title">
-                <div>Asset</div>
+      <div class="sidebar-title">Asset</div>
      <div class="sidebar-info">
-                    <div class="sidebar-info-header">ALL</div>
-                    <div class="sidebar-info-footer">
+        <!--<div class="sidebar-info-header">ALL</div>-->
        <el-checkbox-group v-model="checkList" size="small" @change="getSingleAsset(checkList)">
-                            <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>
+          <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': checkList.indexOf(item.id) != -1}"
+                       v-for="(item,key) in checkListData" :key="key" :label=item.id>
            {{item.name}}
            <el-popover
              placement="left"
@@ -74,25 +73,18 @@
        </el-checkbox-group>
      </div>
    </div>
-            </div>
-        </div>
    <div class="content-right">
-            <div>
-                <button style="float: right;margin-top: 10px;width: 100px;height: 32px;margin-left: 10px"
-                        @click.stop="tagShow('showAdd')">+ADD
+      <div class="top-tools">
+        <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
+          <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
        </button>
-                <el-input
-                        type="text"
-                        :placeholder="$t('overall.search')"
-                        size="small"
-                        style="width: 200px;float: right;padding-top: 10px"
-                >
-                </el-input>
+        <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
      </div>
-            <div>
      <el-table
-                        :height="tableHeight"
-                        :data="this.tableData"
+        height="calc(100% - 65px)"
+        style="width: 100%;"
+        :data="tableData"
+        border
      >
        <el-table-column
          v-for="(item, index) in tableTitle"
@@ -197,7 +189,6 @@
                       ref="assetEditUnit"></asset-edit-unit>
    </div>
  </div>
-    </div>
 </template>

 <script>
@@ -588,49 +579,11 @@ export default {
    padding: 0 15px;
  }

-.content-left {
-    float: left;
-    width: 370px;
-    height: 100%;
-}
-
-.content-right {
-    margin-left: 370px;
-}
-
-.sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
-}
-
-.sidebar-info {
-
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 8px);
-}
-
-.sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-}
-
-.sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-}

  .checkbox-edit {
    position: absolute;
-    top: 8px;
-    left: 230px;
+    right: 10px;
+    font-size: 16px;
  }

  .tab-input-square {
@@ -748,3 +701,19 @@ export default {
    animation: slide-out-to-right 0.4s;
  }
 </style>
+<style>
+  .asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner,
+  .asset .content-left .el-checkbox__input .el-checkbox__inner:hover,
+  .asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner,
+  .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    border-color: #e07700;
+  }
+
+  .asset .content-left .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #444;
+  }
+
+  .asset .content-left .el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #e07700;
+  }
+</style>
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -471,7 +471,6 @@
 <style scoped  lang="scss">
  .project {
    height: 100%;
-    background: $color-red;
  }
  .content-right-option {
    cursor: pointer;