perf: 增强列表提醒、增加asset列表中dc弹框

1.所有列表中可操作的列文字颜色都调整为蓝色 2.增加asset搜索项：state 3.asset列表中的dc项可以点开编辑了
2020-01-09 14:57:44 +08:00
parent 14500d6a30
commit 50a8a2c878
12 changed files with 92 additions and 47 deletions
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -233,6 +233,10 @@ html {
 .content-right-option .el-icon-view {
  color: #60BEFF;
 }
+.link { /*有外联的字段*/
+  color: #1166bb;
+  cursor: pointer;
+}
 .content-right-option .el-icon-view:hover {
  color: #409EFF;
 }
--- a/nezha-fronted/src/components/common/dcConfig.vue
+++ b/nezha-fronted/src/components/common/dcConfig.vue
@@ -3,14 +3,14 @@
    <div class="pop-window-assetType-content">
      <!-- begin--顶部按钮-->
      <div class="pop-top-btns">
-        <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+        <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
          <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
        </button>
-        <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+        <button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal">
          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
        </button>

-        <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
+        <button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
          <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
        </button>
      </div>
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -47,7 +47,7 @@ export default {
  props: ["dropCol"],
  data() {
    return {
-      other: this.$t("i18n.overall.other"),
+      other: this.$t("overall.other"),
      event_positiony: 0,
      event_positionx: 0,
      eventfixedVal: {},
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -22,7 +22,8 @@ const en = {
    signOut: 'Sign Out',
    select: 'Select',
    ok: 'Ok',
-    all: 'All'
+    all: 'All',
+    other: "Other"
  },
  dashboard:{
    title:'Dashboard',
@@ -278,8 +279,8 @@ const en = {
      device: 'SN',
      host: 'Host',
      assetState: 'State',
-      module: 'Module',
-      alert: 'Alert',
+      endpoints: 'Endpoints',
+      alerts: 'Alerts',
      dataCenter: 'Data Center',
      cabinet: 'Cabinet',
      model: 'Model',
@@ -337,7 +338,7 @@ const en = {
    endAt: "End Time",
    list: {
      //表头
-      linkedId: "Linked ID",
+      linked: "Linked",
      type: "Type",
      state: "Status",
      charts: "Charts",
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -474,6 +474,8 @@
                        if(val.type == 'select'){
                            if (val.label == 'alertType' || val.label == 'promType') {
                                objectInfo.type = val.valnum;
+                            } else if (val.label == 'assetState') {
+                                objectInfo.state = val.valnum;
                            } else if(typeof(val.valnum) == "undefined"||val.valnum == ''){
                                this.selectInfoList[val.label].forEach(item=>{
                                    if(item.label == val.val){
@@ -487,7 +489,6 @@
                            }else {
                                objectInfo[val.label] = val.valnum;
                            }
-                            console.info(val)
                        } else if(val.type == 'selectSelf'){
                          objectInfo[val.label] = val.valnum;
                        } else if(val.type == 'selectAction'){ //新增日志判断
--- a/nezha-fronted/src/components/common/searchSelectInfo.vue
+++ b/nezha-fronted/src/components/common/searchSelectInfo.vue
@@ -38,6 +38,15 @@
        value: 3,
        label: i18n.t('alert.config.typeOption.asset')
      }
+    ],
+    assetState: [ //资产入库/出库状态
+      {
+        value: 1,
+        label: i18n.t('asset.createAssetTab.inStock')
+      }, {
+        value: 2,
+        label: i18n.t('asset.createAssetTab.notInStock')
+      }
    ]
  };
  export default searchSelectInfo;
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -60,8 +60,9 @@
                        </span>
 <!--                        <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
                      <div v-else-if="item.prop == 'linkObject'">
-                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
-                        <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+                        <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                        <span v-else>-</span>
                      </div>
                        <span v-else>{{scope.row[item.prop]}}</span>
                    </template>
@@ -335,6 +336,7 @@ export default {
    },
    search: function(searchObj) {
      this.searchLabel = {};
+      this.pageObj.pageNo = 1;
      for (let item in searchObj) {
        if (searchObj[item]) {
          this.$set(this.searchLabel, item, searchObj[item]);
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -41,8 +41,9 @@
                        </div>
                    </template>
                    <template slot-scope="scope" :column="item">
-                      <span v-if="item.prop == 'alertRule'" class="content-right-option" @click="viewRule(scope.row[item.prop].id)">
-                          {{scope.row[item.prop].alertName}}
+                        <span v-if="item.prop == 'alertRule'">
+                            <span class="link" @click="viewRule(scope.row[item.prop].id)" v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</span>
+                            <span v-else>-</span>
                        </span>
                        <div v-else-if="item.prop == 'type'" class="content-right-options">
                            <span v-if="scope.row[item.prop] == 1" >Project</span>
@@ -55,8 +56,9 @@
                            <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
                        </span>
                        <div v-else-if="item.prop == 'linkObject'">
-                            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
-                            <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+                            <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                            <span v-else>-</span>
                        </div>
                        <div v-else-if="item.prop == 'state'">
                            <span class="">
@@ -103,7 +105,7 @@ export default {
          prop: 'type',
          show: true,
        }, {
-          label: this.$t("alert.list.linkedId"),
+          label: this.$t("alert.list.linked"),
          prop: 'linkObject',
          show: true,
        }, {
@@ -260,6 +262,7 @@ export default {
    },
    search: function(searchObj) {
      this.searchLabel = {};
+      this.pageObj.pageNo = 1;
      for (let item in searchObj) {
        if (searchObj[item]) {
          this.$set(this.searchLabel, item, searchObj[item]);
@@ -277,7 +280,6 @@ export default {
      })
    },
    viewAlertType:function(type,typeObj){
-      console.log(typeObj)
      this.closeViews();
      switch (type) {
        case 1:
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -125,34 +125,39 @@
            <div v-if="item.prop=='HOST'">
              <span>{{scope.row.host}}</span>
            </div>
-            <div v-if="item.prop=='资产状态'">
+            <div v-if="item.prop=='state'">
              <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
            </div>
            <div v-if="item.prop=='Module'">
-              <div class="tab-input-square">{{scope.row.moduleNum}}</div>
+              <div class="tab-input-square link">{{scope.row.moduleNum}}</div>
            </div>
            <div v-if="item.prop=='Alert'">
-              <div class="tab-input-square">{{scope.row.alertNum}}</div>
+              <div class="tab-input-square link">{{scope.row.alertNum}}</div>
            </div>
-            <div v-if="item.prop=='数据中心'">
-              <span>{{scope.row.idc.name}}</span>
+            <div v-if="item.prop=='dataCenter'">
+              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
+                <template v-slot:optionZone>
+                  <span class="link">{{scope.row.idc.name}}</span>
+                </template>
+              </idc-config-box>
+              <!--<span class="link">{{scope.row.idc.name}}</span>-->
            </div>
-            <div v-if="item.prop=='机柜'">
-              <span>{{returnData(scope.row.cabinet)}}</span>
+            <div v-if="item.prop=='cabinet'">
+              <span class="link">{{returnData(scope.row.cabinet)}}</span>
            </div>
-            <div v-if="item.prop=='型号'">
+            <div v-if="item.prop=='model'">
              <span>{{scope.row.model.name}}</span>
            </div>
-            <div v-if="item.prop=='厂商'">
+            <div v-if="item.prop=='vendor'">
              <span>{{scope.row.model.vendor.value}}</span>
            </div>
            <div v-if="item.prop=='购买日期'">
              <span>{{scope.row.purchaseDate}}</span>
            </div>
-            <div v-if="item.prop=='责任人'">
+            <div v-if="item.prop=='principal'">
              <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
            </div>
-            <div v-if="item.prop=='责任人电话'">
+            <div v-if="item.prop=='tel'">
              <span>{{scope.row.idc.tel}}</span>
            </div>
            <div v-if="item.prop == 'option'" class="content-right-options">
@@ -175,7 +180,7 @@
      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
    </div>

-    <asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData"
+    <asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
                    @sendStateData="tabControl"></asset-add-unit>
    <asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
                     ref="assetEditUnit"></asset-edit-unit>
@@ -213,6 +218,12 @@
            type: 'input',
            label: 'host',
            disabled: false
+          },{
+            id: 22,
+            name: this.$t("asset.createAssetTab.state"),
+            type: 'select',
+            label: 'assetState',
+            disabled: false
          }],
        },
        searchLabel: {}, //搜索参数
@@ -240,31 +251,31 @@
            width: 130
          }, {
            label: this.$t("asset.tableTitle.assetState"),
-            prop: '资产状态',
+            prop: 'state',
            show: true,
          }, {
-            label: this.$t("asset.tableTitle.module"),
+            label: this.$t("asset.tableTitle.endpoints"),
            prop: 'Module',
            show: true,
          }, {
-            label: this.$t("asset.tableTitle.alert"),
+            label: this.$t("asset.tableTitle.alerts"),
            prop: 'Alert',
            show: true,
          }, {
            label: this.$t("asset.tableTitle.dataCenter"),
-            prop: '数据中心',
+            prop: 'dataCenter',
            show: true,
          }, {
            label: this.$t("asset.tableTitle.cabinet"),
-            prop: '机柜',
+            prop: 'cabinet',
            show: true,
          }, {
            label: this.$t("asset.tableTitle.model"),
-            prop: '型号',
+            prop: 'model',
            show: true,
          }, {
            label: this.$t("asset.tableTitle.manufacturer"),
-            prop: '厂商',
+            prop: 'vendor',
            show: true,
          }, {
            label: this.$t("asset.tableTitle.procurementDate"),
@@ -272,11 +283,11 @@
            show: true,
          }, {
            label: this.$t("asset.tableTitle.principal"),
-            prop: '责任人',
+            prop: 'principal',
            show: true,
          }, {
            label: this.$t("asset.tableTitle.principalTel"),
-            prop: '责任人电话',
+            prop: 'tel',
            show: true,
          }, {
            label: this.$t('config.account.option'),
@@ -413,14 +424,18 @@
        });
        window.open(routeData.href);
      },
-      getAssetData(data) {
-        this.searchLabel = Object.assign(this.pageObj, this.searchLabel);
+      getAssetData(data, flushRightBoxDc) {
+        this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
        this.$get('asset', this.searchLabel).then(response => {
          if (response.code === 200) {
            this.tableData = response.data.list;
            this.pageObj.total = response.data.total
          }
-        })
+        });
+        if (flushRightBoxDc) {
+          this.$refs.assetAddUnit.getIDCOptionData();
+          this.$refs.assetEditUnit.getIDCOptionData();
+        }
      },
      getIDCOptionData() {
        this.$get('idc').then(response => {
@@ -558,8 +573,10 @@
          } else {
            this.pageObj.idcIds = this.checkList.join(',');
          }
-          this.getAssetData();
+        } else {
+          this.pageObj.idcIds = '';
        }
+        this.getAssetData();
      },
      pageNo(val) {
        this.pageObj.pageNo = val;
@@ -595,6 +612,7 @@
      },
      search(searchObj) {
        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
        for (let item in searchObj) {
          if (searchObj[item]) {
            this.$set(this.searchLabel, item, searchObj[item]);
@@ -646,13 +664,12 @@
  }

  .tab-input-square {
-    border: 1px solid #aaaaaa;
+    border: 1px solid #1166bb;
    height: 25px;
    width: 65px;
    border-radius: 3px;
    text-align: center;
    line-height: 23px;
-    color: #aaaaaa;
  }

  .account-list-option {
@@ -781,4 +798,8 @@
    right: 10px;
    font-size: 16px;
  }
+  .cell .checkbox-edit {
+    position: static;
+    font-size: 14px;
+  }
 </style>
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -62,6 +62,7 @@
                              v-model="scope.row.status"
                              active-value="1"
                              inactive-value="0"
+                              active-color="#1166bb"
                              @change="(val)=>{statusChange(scope.row)}">
                            </el-switch>
                        </span>
@@ -119,7 +120,7 @@
                  </el-form-item>-->
                  <!--enable-->
                  <el-form-item :label="$t('config.account.enable')">
-                    <el-switch v-model="user.status" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
+                    <el-switch v-model="user.status" active-color="#1166bb" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
                    </el-switch>
                  </el-form-item>
                  <el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit">
@@ -449,6 +450,7 @@ export default {
    },
    search: function(searchObj) {
      this.searchLabel = {};
+      this.pageObj.pageNo = 1;
      for (let item in searchObj) {
        if (searchObj[item]) {
          this.$set(this.searchLabel, item, searchObj[item]);
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -33,7 +33,7 @@
                        </div>
                    </template>
                    <template slot-scope="scope" :column="item">
-                        <span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span>
+                        <span v-if="item.prop == 'idc'" class="link">{{scope.row[item.prop].name}}</span>
                        <span v-else-if="item.prop == 'type'">
                            {{scope.row[item.prop] == '1' ? 'Global' : ''}}
                            {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
@@ -501,6 +501,7 @@ export default {
      this.getTableData();
    },
    search: function(searchObj) {
+      this.pageObj.pageNo = 1;
      this.searchLabel = {};
      for (let item in searchObj) {
        if (searchObj[item]) {
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -90,7 +90,7 @@
            </div>
          </template>
          <template slot-scope="scope" :column="item">
-            <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="content-right-option" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+            <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
            <span v-else-if="item.prop == 'param'">
              <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
            </span>
@@ -414,6 +414,7 @@
      //搜索
      endpointSearch: function(searchObj) {
        this.endpointSearchLabel = {};
+        this.endpointPageObj.pageNo = 1;
        for (let item in searchObj) {
          if (searchObj[item]) {
            this.$set(this.endpointSearchLabel, item, searchObj[item]);
@@ -424,6 +425,7 @@
      //搜索
      metricSearch: function(searchObj) {
        this.metricSearchLabel = {};
+        this.metricPageObj.pageNo = 1;
        for (let item in searchObj) {
          if (searchObj[item]) {
            this.$set(this.metricSearchLabel, item, searchObj[item]);