NEZ-789 fix：添加报错提示

2021-07-02 14:03:17 +08:00
parent 08fa556310
commit 132b5f927c
8 changed files with 98 additions and 29 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -7,7 +7,7 @@
    <div class="resize-box resize-box-alert" ref="resizeBox">
      <div class="chart-alert-info table-container" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
+        <div v-if="showTitle" class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
          <el-popover
            v-if="isError"
            :close-delay=10
@@ -159,6 +159,10 @@ export default {
      type: Number,
      default: 0
    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
    editChartId: {
      type: String,
      default: 'editChartId'
@@ -233,7 +237,6 @@ export default {
          label: this.$t('alert.alertName'),
          prop: 'alertRule',
          show: true,
-          width: 180
        }, /* {
          label: this.$t("alert.list.type"),
          prop: 'type',
@@ -905,3 +908,8 @@ export default {
  }
 }
 </script>
+<style scoped>
+.table-container{
+  height: calc(100% - 40px);
+}
+</style>
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -168,7 +168,7 @@
        </div>
      </template>

-      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart"  class="height-100"></chart-alert-list>
+      <chart-alert-list v-if="chart.type === 'alertList'" :showTitle="false" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart"  class="height-100"></chart-alert-list>

      <template v-if="chart.type==='text'">
          <div  id="chartTextPreview" class="chart-text-preview height-100">
@@ -178,6 +178,14 @@
          </div>
      </template>

+        <template v-if="chart.type==='diagram'">
+          <div  id="chartDiagramPreview" class="chart-text-preview height-100">
+            <div style="height: 100%; overflow: auto;">
+                <diagram :topoData="chart.param.topo" :fromChartBox="true" :topologyIndexF="-3"/>
+            </div>
+          </div>
+      </template>
+
      <loading  ref="loadingPreview"  class="height-100"></loading>
    </el-dialog>
 </template>
@@ -190,12 +198,14 @@ import chartDataFormat from './chartDataFormat'
 import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartAlertList from './chart-alert-list'
 import chartConfig from '../page/dashboard/overview/chartConfig'
+import diagram from '@/components/common/ChartDiagram/diagram'
 import moment from 'moment-timezone'
 export default {
  name: 'chartPreview',
  components: {
    loading: loading,
-    'chart-alert-list': chartAlertList
+    'chart-alert-list': chartAlertList,
+    diagram
  },
  props: {
    panelId: Number,
@@ -288,6 +298,8 @@ export default {
        chartContainerId = 'chartAlertListPreview'
      } else if (chartType == 'text') {
        chartContainerId = 'chartTextPreview'
+      } else if (chartType == 'diagram') {
+        chartContainerId = 'chartDiagramPreview'
      }

      // 设置高度 chart-table
@@ -356,7 +368,7 @@ export default {
        //
      }
      // 后台获得数据
-      if (this.chart.type !== 'url' && this.chart.type !== 'text') {
+      if (this.chart.type !== 'url' && this.chart.type !== 'text' && this.chart.type !== 'diagram') {
        this.$refs.loadingPreview.startLoading()
        this.getChartData()
      } else if (this.chart.type == 'url') {
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
 import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect2, null)
+registerNode('rectangleImg', myShape, myAnchors, myIconRect2, myTextRect2)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)

 const canvasOptions = {
--- a/nezha-fronted/src/components/common/nzTransfer.vue
+++ b/nezha-fronted/src/components/common/nzTransfer.vue
@@ -59,7 +59,7 @@
        </button>
      </div>
    </div>
-    <div :style="calcStyle" class="nz-transfer__box nz-transfer__box--right">
+    <div :style="calcStyle" class="nz-transfer__box nz-transfer__box--right" :class="showError?'error' : ''">
      <div class="box__header">
        <slot name="title"></slot>
        <slot></slot>
@@ -131,6 +131,10 @@ export default {
    },
    tableTitle: {
      type: Array
+    },
+    showError: {
+      type: Boolean,
+      default: false
    }
  },
  data () {
@@ -315,4 +319,7 @@ export default {
 .hide-row {
  display: none !important;
 }
+.error{
+  border-color: #F56C6C !important;
+}
 </style>
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -252,6 +252,7 @@ export function myIconRect2 (node) {
  node.fullIconRect = node.rect
 }
 export function myTextRect2 (node) {
+  node.data.text = ''
  node.textRect = new Rect(
    node.rect.x + node.paddingLeft,
    node.rect.y + node.rect.height - 20 - node.paddingBottom,
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -119,7 +119,7 @@
              </div>
            </div>
            <!--endpoint-->
-            <div class="right-box-endpoint-table">
+            <div class="right-box-endpoint-table"  :class="showError?'error' : ''">
              <div class="search-box" style="display: flex;justify-content: flex-end">
                <el-button class="top-tool-btn" type="button" @click="showRightBox">
                  <i class="nz-icon-gear nz-icon"></i>
@@ -181,6 +181,7 @@
              </span>
              </div>
            </div>
+            <div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
          </div>
        </el-form>
      </div>
@@ -432,7 +433,8 @@ export default {
          label: 'state',
          disabled: false
        }]
-      }
+      },
+      showError: false,
    }
  },
  methods: {
@@ -565,8 +567,11 @@ export default {
        }
        endpointList.push(endpoint)
      })
+      if (endpointList.length === 0) {
+        this.showError = true
+      }
      this.$refs.addEndpoint.validate((valid) => {
-        if (valid) {
+        if (valid && !this.showError) {
          this.$post('monitor/endpoint', endpointList).then(response => {
            this.prevent_opt.save = false
            if (response.code === 200) {
@@ -606,6 +611,7 @@ export default {
      })
    },
    addEndpoint () {
+      this.showError = false
      const arr = []
      this.assetSelection.forEach(item => {
        if (this.endpointTableData.find(endpoint => endpoint.assetId === item.id)) {
@@ -1230,4 +1236,7 @@ export default {
      }
    }
  }
+  .error{
+    border-color: #F56C6C !important;
+  }
 </style>
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -188,7 +188,9 @@

          <!-- 选择资产，穿梭框 -->
          <div class="form__sub-title">{{$t('overall.select')}}</div>
+          <div style="position: relative">
            <nz-transfer ref="transfer"
+                         :showError="showError"
                         style="margin-bottom: 20px;"
                         :page-obj="transfer.pageObj"
                         :search-msg="transfer.searchMsg"
@@ -200,6 +202,8 @@
                         @rightToLeft="removeAsset">
              <template v-slot:title>Selected</template>
            </nz-transfer>
+            <div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
+          </div>
        </el-form>
      </div>
    </div>
@@ -330,8 +334,28 @@ export default {
          total: 0
        }
      },
-      rules: {},
-      metaData: []
+      rules: {
+        editType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authProtocol: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authUsername: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authPin: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authUserTip: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authPinTip: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      metaData: [],
+      showError: false
    }
  },
  methods: {
@@ -345,12 +369,19 @@ export default {
    },
    save () {
      this.editData.ids = this.transfer.selectedData.map(d => d.id)
+      if (this.editData.ids.length === 0) {
+        this.showError = true
+      }
+      this.$refs.assetEditForm.validate((valid) => {
+        if (valid && !this.showError) {
          this.$put('asset/asset/bulkEdit', this.editData).then(res => {
            if (res.code === 200) {
              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
              this.esc(true)
            }
          })
+        }
+      })
    },
    addLabel ([groupId, metaId]) {
      const label = this.metaData.find(m => m.id === metaId)
@@ -411,6 +442,7 @@ export default {
      this.transfer.tableData.forEach(d => {
        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
      })
+      this.showError = false
    },
    removeAsset (toRemove) {
      this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -116,7 +116,7 @@
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
-                                <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                                <li v-for="(item,key) in groupSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'project'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">