添加告警配置前台测试2版

src/assets/styles/self-defined.scss

@@ -185,3 +185,14 @@
         margin-left: 0px !important;
     }
 }
+
+
+.is-error {
+    border-color: red; 
+}
+
+.is-error-value{ 
+    .el-input__wrapper {
+        box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+    }
+}

src/views/model/alert/deviceparamalert.vue

@@ -230,14 +230,9 @@
             </el-row>
             <el-row>
               <el-col>
-                <el-form-item class="elFormItem" prop="policyModel">
                   <el-table ref="policyTable" v-loading="loading" :data="modelList" :row-key="getRowKey" @selection-change="handleSelectionChange">
                     <el-table-column type="selection" reserve-selection="true" width="55" align="center" />
-                    <el-table-column label="名称" align="center" prop="name">
+                    <el-table-column label="名称" align="center" prop="name"/>
-                      <template #default="scope">
-                        <el-input v-model="scope.row.name"></el-input>
-                      </template>
-                    </el-table-column>
                     <el-table-column label="符号" align="center" prop="code" :width="120"/>
                     <el-table-column label="运算符" align="center" prop="operator" :width="120">
                       <template #default="scope">
@@ -246,41 +241,44 @@
                     </el-table-column>
                     <el-table-column label="限值" align="center" prop="value">
                       <template #default="scope">
-                        <el-input v-model="scope.row.value" @change="handleValueChange(scope.row)"></el-input>
+                        <el-form-item :class="{ 'is-error': isInvalid(scope.row.value,scope.row),'is-error-value': colorValue[scope.row.sort]}" label-width="0px">
-                      </template>
+                          <el-input v-model="scope.row.value" @change="handleValueChange(scope.row)"></el-input>
-                    </el-table-column>
+                        </el-form-item>
-                    <el-table-column label="级别" align="center" prop="level">
-                      <template #default="scope">
-                        <el-input v-model="scope.row.level"></el-input>
                       </template>
                     </el-table-column>
-                    <el-table-column label="排序" align="center" prop="sort">
+                    <el-table-column label="级别" align="center" prop="level" />
+                    <el-table-column label="排序" align="center" prop="sort"/>
+                    <el-table-column label="告警方式" align="center" prop="methodIds">
                       <template #default="scope">
-                        <el-input v-model="scope.row.sort"></el-input>
+                        <el-form-item :class="{'is-error': isInvalid(scope.row.methodIds,scope.row)}" label-width="0px" >
+                          <el-select v-model="scope.row.methodIds" multiple @change="methodIdsChange" placeholder="请选择告警方式">
+                            <el-option
+                              v-for="item in methodList"
+                              :key="item.id"
+                              :label="item.methodName"
+                              :value="item.id"
+                            />
+                          </el-select>
+                        </el-form-item>
                       </template>
                     </el-table-column>
-                    <el-table-column label="告警方式" align="center" prop="methodIds">
+                    <el-table-column label="状态值" align="center" prop="statusValue">
                       <template #default="scope">
-                        <el-select v-model="scope.row.methodIds" multiple @change="methodIdsChange" placeholder="请选择告警方式">
+                        <el-select v-model="scope.row.statusValue" placeholder="请选择状态类型">
                           <el-option
-                            v-for="item in methodList"
+                            v-for="item in statusValueSelects"
-                            :key="item.id"
+                            :key="item.value"
-                            :label="item.methodName"
+                            :label="item.label"
-                            :value="item.id"
+                            :value="item.value"
                           />
                         </el-select>
                       </template>
                     </el-table-column>
-                    <el-table-column label="状态值" align="center" prop="statusValue">
-                      <template #default="scope">
-                        <el-input v-model="scope.row.statusValue"></el-input>
-                      </template>
-                    </el-table-column>
                     <el-table-column label="状态类型" align="center" prop="statusType">
                       <template #default="scope">
                         <el-select v-model="scope.row.statusType" placeholder="请选择状态类型">
                           <el-option
-                            v-for="item in status"
+                            v-for="item in statusSelects"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
@@ -289,7 +287,6 @@
                       </template>
                     </el-table-column>
                   </el-table>
-                </el-form-item>
               </el-col>
             </el-row>
             
@@ -346,14 +343,13 @@ const policyDeviceUuid = ref("");
 const paramTypeValue = ref("");
 const logicCode = ref("");
 const rowPolicySelected = ref([]);
+const colorValue = ref({});
 const enabledFlagTable = ref([
   {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
   {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
 ]);
-const status = ref([
+const statusSelects = ref([]);
-  {label: '状态1', value: '1', elTagType: 'default', elTagClass: null}, 
+const statusValueSelects = ref([]);
-  {label: '状态2', value: '2', elTagType: 'default', elTagClass: null}
-]);
 const data = reactive({
   form: {},
   formPolicy: {},
@@ -627,26 +623,17 @@ function submitFormPolicy() {
       if (formPolicy.value.id != null) {
         //根据参数类型区分
         if(logicCode.value == 'B' ){
-          // if(proxy.$refs.policyTable.getSelectionRows().length==0){
-          //   ElMessageBox.alert('请确保至少勾选了一条告警算法', '提示', {
-          //     confirmButtonText: '确定',
-          //     center: true,
-          //   })
-          //   return;
-          // }
           if(!judgeIfRightValue()){
+            ElMessageBox.alert('请确认目前已勾选的告警策略配置是否合理', '提示', {
+              confirmButtonText: '确定',
+              center: true,
+            })
             return;
           };
           mapFormTableUpdate();
           computeDelPolicy();
           computeAddPolicy();
           updatePolicyBatch(policyParams.value,deletePolicyRows.value,addPolicyRows.value).then(response => {
-            // if(deletePolicyRows.value.length>0){
-            //   newHandleDeletePolicy();
-            // }
-            // if(addPolicyRows.value.length>0){
-            //   handleAddPolicy();
-            // }
             proxy.$modal.msgSuccess("修改成功");
             openPolicy.value = false;
             getList();
@@ -661,14 +648,11 @@ function submitFormPolicy() {
       } else {
         //根据参数类型区分
         if(logicCode.value == 'B' ){
-          // if(proxy.$refs.policyTable.getSelectionRows().length==0){
-          //   ElMessageBox.alert('请确保至少勾选了一条告警算法', '提示', {
-          //     confirmButtonText: '确定',
-          //     center: true,
-          //   })
-          //   return;
-          // }
           if(!judgeIfRightValue()){
+            ElMessageBox.alert('请确认目前已勾选的告警策略配置是否正确', '提示', {
+              confirmButtonText: '确定',
+              center: true,
+            })
             return;
           };
           mapFormTable();
@@ -725,18 +709,14 @@ function getModelList(row){
     formPolicy.value.alertId = row.id;
     formPolicy.value.deviceId = row.deviceUuid;
     proxy.$refs.policyTable.clearSelection();
-    console.log(queryPolicy.value);
     listPolicyInfo(queryPolicy.value).then(responsePolicy=>{
       //修改界面初始化
       if(responsePolicy.data && responsePolicy.data.length>0){
-        console.log(responsePolicy.data);
         oldPolicyRows.value = responsePolicy.data;
         formPolicy.value.alertId = responsePolicy.data[0].alertId;
         formPolicy.value.deviceId = responsePolicy.data[0].deviceId;
         formPolicy.value.id = responsePolicy.data[0].id;
-        console.log('modle');
         modelList.value.map(element=>{
-          console.log('response');
           responsePolicy.data.forEach(item=>{
             if(item.alertModelId == element.id){
               policyDeviceUuid.value = item.deviceId;
@@ -750,8 +730,6 @@ function getModelList(row){
               }
               element.level = item.level;
               element.name = item.name;
-              console.log('item.id');
-              console.log(item.id);
               element.policyId = item.id;
               element.statusValue = item.statusValue;
               element.statusType = item.statusType;
@@ -913,10 +891,13 @@ function handleValueChange(row){
     })
   }
   if(!flag){
-    ElMessageBox.alert('请确认目前已勾选的告警限值配置是否合理', '提示', {
+    colorValue.value[row.sort] = true;
+    ElMessageBox.alert('已勾选的告警策略限值填写不合理', '提示', {
       confirmButtonText: '确定',
       center: true,
     })
+  }else{
+    colorValue.value[row.sort] = false;
   }
   return flag;
 }
@@ -929,6 +910,9 @@ function judgeIfRightValue(){
       if(!handleValueChangeSub(item)){
         flag = false;
       };
+      if(item.value === '' || item.methodIds.length === 0){
+        flag = false;
+      }
     })
   }
   return flag;
@@ -955,6 +939,57 @@ function handleValueChangeSub(row){
 }
 
 
+const validateCell = (data) => {
+  if(data === undefined || data === null){
+    return false;
+  }
+  if(typeof data === 'object' && data.value !== undefined){
+    // 自定义校验逻辑，根据需求进行修改
+    if (typeof data.value === 'number') {
+      return data.value !== undefined && data !== null;
+    } else if (typeof data.value === 'string') {
+      return data.value !== '';
+    } else if (typeof data.value === 'boolean') {
+      return data.value !== undefined && data.value !== null;
+    } else if (Array.isArray(data.value)) {
+      return data.value !== [];
+    } else if (typeof data.value === 'object') {
+      return data.value !== {};
+    } else {
+      return data.value !== undefined && data.value !== null;
+    }
+  }else{
+    // 自定义校验逻辑，根据需求进行修改
+    if (typeof data === 'number') {
+      return data !== undefined && data !== null;
+    } else if (typeof data === 'string') {
+      return data !== '';
+    } else if (typeof data === 'boolean') {
+      return data !== undefined && data !== null;
+    } else if (typeof data === 'object') {
+      return data.length !== 0;
+    } else if (Array.isArray(data)) {
+      return data.length !== 0;
+    } else {
+      return data !== undefined && data !== null;
+    }
+  }
+ 
+};
+const isInvalid = (value,row) => {
+  const rowHadSelected = proxy.$refs.policyTable.getSelectionRows();
+  let flag = false;
+  rowHadSelected.forEach(item=>{
+    if(item.id===row.id){
+      flag = true;
+    }
+  })
+  if(!flag){
+    return false;
+  }
+  return !validateCell(value);
+};
+    
 getList();
 
 </script>