feat: 只标模版开发

src/views/ms/mstpl/component/editIndicator.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-form :model="form" label-width="120" label-suffix=":" :rules="rules" ref="fRef">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-form-item label="指标名称">{{ rowsInfo.metricsDef.metricsName }}</el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="指标类型">
+          <dict-tag :options="metrics_category" :value="rowsInfo.metricsDef.metricsType"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="自动发现" prop="findFlag">
+          <el-select v-model="form.findFlag">
+            <el-option v-for="item in sys_yes_no" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="指标编码">{{ rowsInfo.metricsDef.metricsCode }}</el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item label="数据接口配置" prop="dataExp">
+      <el-input type="textarea" v-model="form.dataExp" placeholder="请输入数据接口配置" :autosize="{minRows: 3}"
+                style="width:342px;margin-right:10px;"/>
+      <el-button type="primary">公式组装</el-button>
+    </el-form-item>
+    <el-form-item label="自动发现规则" prop="findRule">
+      <el-input v-model="form.findRule" type="textarea" :autosize="{minRows: 3}" placeholder="请输入自动发现规则"/>
+    </el-form-item>
+    <el-form-item label="关键字" prop="findKey">
+      <el-input v-model="form.findKey" placeholder="请输入关键字"/>
+    </el-form-item>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-form-item label="告警-低">
+          <el-input v-model="form.alarmLow" @change="checkInput"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="告警-中">
+          <el-input v-model="form.alarmMid" @change="checkInput"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="告警-高">
+          <el-input v-model="form.alarmHigh" @change="checkInput"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="健康事件">
+          <el-input v-model="form.event" @change="checkInput"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+  <div class="food-btn">
+    <el-button type="primary" @click="handleSubmit">提交</el-button>
+    <el-button @click="emit('close')">取消</el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import {updateDetail} from "@/api/metrics/detail";
+
+const {proxy, emit} = getCurrentInstance()
+const {metrics_category, sys_yes_no} = proxy.useDict("metrics_category", "sys_yes_no")
+const props = defineProps(["rowsInfo"])
+const form = ref({
+  dataExp: "",
+  findFlag: "",
+  findRule: "",
+  findKey: "",
+  alarmLow: "",
+  alarmMid: "",
+  alarmHigh: "",
+  event: ""
+})
+const passValidate = ref(true)
+const rules = {
+  dataExp: {required: true, message: '请输入数据接口配置', trigger: 'change'},
+  findRule: {required: true, message: '请选择自动发现规则', trigger: 'change'},
+  findKey: {required: true, message: '请输入关键字', trigger: 'change'},
+  findFlag: {required: true, message: '请选择自动发现', trigger: 'change'}
+}
+
+const checkInput = (range) => {
+  passValidate.value = validateRange(range)
+  if (!passValidate.value) {
+    proxy.$message.error("请输入正确的区间格式！")
+  }
+}
+const validateRange = (range) => {
+  // 正则表达式匹配各种区间的格式
+  const regex = /^(\[|\()\s*([0-9]+(\.[0-9]+)?|)\s*,\s*([0-9]+(\.[0-9]+)?|)\s*(\]|\))$/;
+  const match = range.match(regex);
+
+  if (!match) {
+    return false; // 如果格式不正确，则返回false
+  }
+
+  // 提取括号类型和两个数值
+  const openBracket = match[1];// 开始的括号
+  const num1Str = match[2]; // 第一个数
+  const num2Str = match[4]; // 第二个数
+  const closeBracket = match[7]; // 结束的括号
+
+  let num1 = num1Str ? parseFloat(num1Str) : -Infinity;
+  let num2 = num2Str ? parseFloat(num2Str) : Infinity;
+
+  // 检查区间的有效性
+  if (openBracket === '[' && num1 > num2) return false; // [x,y] 要求 x <= y
+  if (openBracket === '(' && num1 >= num2) return false; // (x,y) 要求 x < y
+  if (closeBracket === ']' && num1 > num2) return false; // (x,y] 要求 x < y
+  if (closeBracket === ')' && num1 >= num2) return false; // [x,y) 要求 x < y
+
+  return true;
+}
+
+const editData = (row) => {
+  const keys = Object.keys(form.value)
+  keys.forEach(p => {
+    form.value[p] = row[p]
+  })
+  proxy.$nextTick(() => {
+    proxy.resetForm("fRef");
+  })
+}
+
+const handleSubmit = () => {
+  proxy.$refs.fRef.validate(valid => {
+    if (valid) {
+      handleUpdate({...props.rowsInfo, ...form.value})
+    }
+  })
+}
+
+// 更新
+const handleUpdate = (row) => {
+  if (!passValidate.value) return proxy.$message.error("区间无效,请检查")
+  updateDetail({...row}).then(res => {
+    proxy.$modal.msgSuccess("修改成功");
+    emit("reload")
+  })
+}
+
+defineExpose({editData})
+
+</script>
+<style scoped lang="scss">
+.food-btn {
+  text-align: center;
+  margin-top: 10px;
+  border-top: 1px solid #F9F9F9;
+  padding-top: 10px;
+}
+</style>

src/views/ms/mstpl/component/indicatorManger.vue

@@ -21,43 +21,29 @@
         <el-table-column label="指标编码" align="left" prop="metricsCode" width="160"/>
         <el-table-column label="告警-低" align="center" width="80">
           <template #default="scope">
-            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
-              {{ scope.row.alarmLow }}
-            </span>
-            <el-input v-model="scope.row.alarmLow" v-else size="small" @change="checkInput"/>
+            {{ scope.row.alarmLow }}
           </template>
         </el-table-column>
         <el-table-column label="告警-中" align="center" width="80">
           <template #default="scope">
-            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
-              {{ scope.row.alarmMid }}
-            </span>
-            <el-input v-model="scope.row.alarmMid" v-else size="small" @change="checkInput"/>
+            {{ scope.row.alarmMid }}
           </template>
         </el-table-column>
         <el-table-column label="告警-高" align="center" width="80">
           <template #default="scope">
-            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
-              {{ scope.row.alarmHigh }}
-            </span>
-            <el-input v-model="scope.row.alarmHigh" v-else size="small" @change="checkInput"/>
+            {{ scope.row.alarmHigh }}
           </template>
         </el-table-column>
         <el-table-column label="健康事件" align="center" width="80">
           <template #default="scope">
-            <span v-if="editRow.indexOf(scope.row.metricsId) === -1">
-              {{ scope.row.event }}
-            </span>
-            <el-input v-model="scope.row.event" v-else size="small" @change="checkInput"/>
+            {{ scope.row.event }}
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)"
-                       v-if="editRow.indexOf(scope.row.metricsId) === -1">
+            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">
               修改
             </el-button>
-            <el-button link type="primary" icon="Check" @click="handleUpdate(scope.row)" v-else>保存</el-button>
             <el-popconfirm title="确定要删除吗?删除后无法恢复！" @confirm="handleDelete(scope.row)" width="260">
               <template #reference>
                 <el-button link type="primary" icon="Delete">删除</el-button>
@@ -124,10 +110,13 @@
     </template>
   </el-dialog>
 
+  <el-dialog title="指标修改" v-model="visible" width="600" append-to-body>
+    <edit-indicator :rowsInfo="rowsInfo" ref="eiRef" @close="visible=false" @reload="getSelectData"/>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import {addDetailByTplId, delDetail, listDetail, selectDetails, updateDetail} from "@/api/metrics/detail";
-
+import editIndicator from "./editIndicator.vue";
 const {proxy, emit} = getCurrentInstance();
 
 const listData = ref([]);
@@ -140,39 +129,10 @@ const ids = ref([]);
 const total = ref(0);
 const adTotal = ref(0);
 const passValidate = ref(true)
+const visible = ref(false);
+const rowsInfo = ref({})
 
-const checkInput = (range) => {
-  passValidate.value = validateRange(range)
-  if (!passValidate.value) {
-    proxy.$message.error("请输入正确的区间格式！")
-  }
-}
-const validateRange = (range) => {
-  // 正则表达式匹配各种区间的格式
-  const regex = /^(\[|\()\s*([0-9]+(\.[0-9]+)?|)\s*,\s*([0-9]+(\.[0-9]+)?|)\s*(\]|\))$/;
-  const match = range.match(regex);
-
-  if (!match) {
-    return false; // 如果格式不正确，则返回false
-  }
-
-  // 提取括号类型和两个数值
-  const openBracket = match[1];// 开始的括号
-  const num1Str = match[2]; // 第一个数
-  const num2Str = match[4]; // 第二个数
-  const closeBracket = match[7]; // 结束的括号
-
-  let num1 = num1Str ? parseFloat(num1Str) : -Infinity;
-  let num2 = num2Str ? parseFloat(num2Str) : Infinity;
 
-  // 检查区间的有效性
-  if (openBracket === '[' && num1 > num2) return false; // [x,y] 要求 x <= y
-  if (openBracket === '(' && num1 >= num2) return false; // (x,y) 要求 x < y
-  if (closeBracket === ']' && num1 > num2) return false; // (x,y] 要求 x < y
-  if (closeBracket === ')' && num1 >= num2) return false; // [x,y) 要求 x < y
-
-  return true;
-}
 
 const adParams = reactive({
   pageNum: 1,
@@ -203,10 +163,12 @@ const getSelectDetails = (tplId: number) => {
 }
 
 // 修改
-const handleEdit = ({metricsId}) => {
-  if (editRow.value.indexOf(metricsId) === -1) {
-    editRow.value.push(metricsId)
-  }
+const handleEdit = (row) => {
+  visible.value = true
+  rowsInfo.value = {...row}
+  proxy.$nextTick(()=>{
+    proxy.$refs.eiRef.editData(row)
+  })
 }
 
 // 多选框选中数据
@@ -252,6 +214,7 @@ const handleAdd = () => {
 }
 
 const getSelectData = () => {
+  visible.value = false
   selectDetails(rowTplId.value, adParams).then(res => {
     addListData.value = res.rows
     adTotal.value = res.total

src/views/ms/mstpl/index.vue

@@ -34,6 +34,11 @@
       <el-table-column label="模板ID" align="center" prop="tplId" width="80"/>
       <el-table-column label="模板名称" align="left" prop="tplName"/>
       <el-table-column label="指标数量" align="left" prop="num" width="150"/>
+      <el-table-column label="完成配置" align="center" width="120">
+        <template #default="scope">
+          <dict-tag :options="sys_yes_no" :value="scope.row.confStatus" />
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="200" v-if="!selectTpl">
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
@@ -93,6 +98,7 @@ const props = defineProps({
 })
 
 const {proxy} = getCurrentInstance();
+const { sys_yes_no } = proxy.useDict("sys_yes_no");
 
 const uRef = ref(null)
 const tplList = ref([]);