feat: 前端接口联调

src/api/hl/bm.js

@@ -42,3 +42,20 @@ export function delBm(modelId) {
         method: 'delete'
     })
 }
+
+// 选择对象
+export function selectBm(modelId) {
+    return request({
+        url: '/hl/bm/obj/select/' + modelId,
+        method: 'get'
+    })
+}
+
+export function addBmModel(modelId,query) {
+    return request({
+        url: '/hl/bm/obj/add/' + modelId,
+        method: 'get',
+        params: query
+    })
+}
+

src/views/hl/bm/component/addBm.vue

@@ -1,27 +1,46 @@
 <template>
-    <component :is="activeComponent" ref="acRef" :modelId="modelId" @success="emit('success')"/>
+    <component :is="activeComponent[currentStep]" ref="acRef" :modelId="modelId" @nextStep="handleStep"/>
     <div class="btn-layout">
-      <el-button type="primary" @click="handleNext">下一步</el-button>
+      <el-button type="primary" @click="handleNext">{{currentStep === 1?'完成':'下一步'}}</el-button>
     </div>
 </template>
 <script setup lang="ts">
 import step1 from "./step1.vue"
+import step2 from "./step2.vue"
+import {nextTick} from "vue";
 const {proxy,emit} = getCurrentInstance()
-const activeComponent = ref(step1);
+const activeComponent = [step1,step2];
+const currentStep = ref(0);
 const acRef=ref(null)
 const modelId = ref(null)
 
 function handleNext() {
-  proxy.$refs['acRef'].submitForm()
+  if(currentStep.value === 1){
+    return emit('cancel')
+  }
+  nextTick(()=>{
+    proxy.$refs['acRef'].submitForm()
+  })
+}
+function handleStep(id){
+  if(currentStep.value === 0){
+    currentStep.value++
+    if(id){
+      modelId.value = id
+      emit('success')
+    }
+  }
 }
 
 function editRow(row){
   modelId.value = null
+  currentStep.value = 0
   if(row){
     modelId.value = row.modelId
   }
-  activeComponent.value = step1
-  proxy.$refs['acRef'].handleUpdate(row)
+  nextTick(()=>{
+    proxy.$refs['acRef'].handleUpdate(row)
+  })
 }
 
 defineExpose({editRow})
@@ -33,7 +52,7 @@ defineExpose({editRow})
   justify-content: center;
   border-top:1px solid #e1e1e180;
   padding-top:10px;
-  margin:10px -20px;
+  margin:20px -20px -10px -20px;
 }
 </style>
 

src/views/hl/bm/component/bmTable.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-table :data="listData" v-loading="loading" border style="margin-top:10px" max-height="450" @selection-change="handleSelectionChange">
+    <el-table-column type="selection" width="55" align="center" v-if="selection"/>
+    <el-table-column label="对象类型" width="200">
+      <template #default="scope">
+        {{biz_type.find(p=>p.value == scope.row.bizObj.objType).label}}
+      </template>
+    </el-table-column>
+    <el-table-column label="业务对象">
+      <template #default="scope">
+        {{scope.row.bizObj.objName}}
+      </template>
+    </el-table-column>
+    <el-table-column label="对象地址" width="200">
+      <template #default="scope">
+        {{scope.row.bizObj.objAddr}}:{{scope.row.bizObj.objPort}}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="100" align="center">
+      <template #default="scope">
+        <slot name="action" :row="scope.row"/>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script setup lang="ts">
+const {proxy} = getCurrentInstance()
+const {biz_type} = proxy.useDict('biz_type');
+const props = defineProps(['listData', 'loading','selection'])
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  let ids = selection.map(item => item.bizObj.objId);
+  proxy.$emit('selectObj',ids)
+}
+
+</script>
+<style scoped lang="scss">
+</style>

src/views/hl/bm/component/healthSetting.vue

@@ -0,0 +1,13 @@
+<template>
+  health
+</template>
+<script setup lang="ts">
+import {watchEffect} from "vue";
+
+const props = defineProps(['modelId'])
+watchEffect(()=>{
+  console.log(props.modelId)
+})
+</script>
+<style scoped lang="scss">
+</style>

src/views/hl/bm/component/step1.vue

@@ -6,16 +6,21 @@
     <el-form-item label="业务类型" prop="modelType">
       <el-input v-model="form.modelType" placeholder="请输入业务类型" />
     </el-form-item>
+    <el-form-item label="备注">
+      <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
+    </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">
 import { addBm, updateBm,getBm } from "@/api/hl/bm";
-const {proxy,emit} = getCurrentInstance()
+const {proxy} = getCurrentInstance()
 const bmRef=ref(null)
+const emit=defineEmits(["success","changeModelId"])
 const data=reactive({
   form:{
     modelName:"",
-    modelType:""
+    modelType:"",
+    remark:""
   },
   rules:{
     modelName:[
@@ -31,24 +36,28 @@ const { form, rules} = toRefs(data)
 const submitForm = () => {
   proxy.$refs["bmRef"].validate(valid => {
     if (valid) {
-      if (form.value.modelId != null) {
-        updateBm(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功")
-        });
-      } else {
-        addBm(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功")
-        });
-      }
-      emit("success")
+      handleSubmit()
     }
   });
 }
 
+async function handleSubmit(){
+  let modelId=0
+  if (form.value.modelId != null) {
+    await updateBm(form.value);
+  } else {
+    const res =  await addBm(form.value)
+    modelId = res.data.modelId
+  }
+  emit("nextStep",modelId)
+
+}
+
 const reset=()=>{
   form.value = {
     modelName: null,
-    modelType: null
+    modelType: null,
+    remark:""
   };
   proxy.resetForm("bmRef");
 }
@@ -59,6 +68,7 @@ const handleUpdate=(row)=>{
     getBm(row.modelId).then(res=>{
       form.value.modelName = res.data.modelName
       form.value.modelType = res.data.modelType
+      form.value.remark = res.data.remark
       form.value.modelId = res.data.modelId
     })
   }

src/views/hl/bm/component/step2.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="24">
+      <el-button type="primary" plain @click="selectBmObj">选择对象</el-button>
+    </el-col>
+    <el-col :span="24">
+      <bm-table :listData="listData" :loading="loading" :selection="false">
+        <template #action="scope">
+          <el-popconfirm title="是否要删除该条对象?" @confirm="delBm({...scope.row})" width="auto">-->
+            <template #reference>
+            <el-button type="text" size="small" icon="delete">删除</el-button>-->
+            </template>
+            </el-popconfirm>
+        </template>
+      </bm-table>
+    </el-col>
+  </el-row>
+
+  <el-dialog title="选择对象" v-model="open" width="800px" append-to-body>
+    <bm-table :listData="selectBmData" :loading="loading" @selectObj="selectObj" :selection="true" />
+    <template #footer>
+      <div style="text-align: center">
+        <el-button type="primary" @click="handleAddBm">添加</el-button>
+        <el-button  @click="open = false">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import {listBd,delBd} from "@/api/hl/bd"
+import {selectBm,addBmModel} from "@/api/hl/bm"
+import {getCurrentInstance, watchEffect} from "vue";
+import bmTable from "./bmTable.vue"
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  modelId:{type:Number,default:null}
+})
+const {biz_type} = proxy.useDict('biz_type');
+const listData = ref([])
+const loading = ref(false)
+const open = ref(false)
+const selectBmData = ref([])
+const objIds = ref([])
+
+watchEffect(()=>{
+  getList()
+})
+
+function selectObj(ids){
+  objIds.value = ids
+}
+
+function getList(){
+  loading.value = true
+  listBd({modelId:props.modelId}).then(res=>{
+    listData.value = res.rows
+    loading.value = false
+  })
+}
+
+function delBm(row){
+  delBd(row.bizDetailId).then(res=>{
+    proxy.$modal.msgSuccess(res.msg);
+    getList()
+  })
+}
+
+function handleAddBm(){
+  if(!objIds.value.length){
+    return proxy.$modal.msgError("请选择对象")
+  }
+  addBmModel(props.modelId,{objIds:objIds.value.join(",")}).then(res=>{
+      proxy.$modal.msgSuccess("添加成功")
+      open.value = false
+      getList()
+
+  })
+}
+
+function selectBmObj(){
+  open.value = true
+  loading.value = true
+  objIds.value = []
+  selectBm(props.modelId).then(res=>{
+    selectBmData.value = res.rows.map(p=>{
+      return {bizObj:p}
+    })
+    loading.value = false
+  })
+}
+</script>
+<style scoped lang="scss">
+</style>

src/views/hl/bm/index.vue

@@ -37,8 +37,9 @@
           <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" class-name="small-padding fixed-width" align="left"  width="180">
+      <el-table-column label="操作" class-name="small-padding fixed-width" align="left" >
         <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleHealthSet(scope.row)">健康度配置</el-button>
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['hl:bm:edit']">修改</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['hl:bm:remove']">删除</el-button>
         </template>
@@ -55,7 +56,8 @@
 
     <!-- 添加或修改业务模型对话框 -->
     <el-dialog :title="title" v-model="open" width="800px" append-to-body>
-      <add-bm-info ref="bmRef" @success="getList"/>
+      <add-bm-info ref="bmRef" @cancel="open = false" @success="getList" v-if="dialogType==='add'"/>
+      <health-setting v-if="dialogType==='health'" :modelId="modelId"/>
     </el-dialog>
   </div>
 </template>
@@ -64,6 +66,7 @@
 
 import { listBm, getBm, delBm, addBm, updateBm } from "@/api/hl/bm";
 import addBmInfo from "./component/addBm.vue"
+import healthSetting from "./component/healthSetting.vue"
 const { proxy } = getCurrentInstance();
 
 const bmList = ref([]);
@@ -75,6 +78,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const dialogType = ref("add")
+const modelId = ref(0)
 
 const data = reactive({
   form: {},
@@ -97,6 +102,13 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data);
 
+function handleHealthSet(row){
+  modelId.value = row.modelId
+  dialogType.value = "health"
+  open.value = true
+  title.value = "健康度配置"
+}
+
 /** 查询业务模型列表 */
 function getList() {
   loading.value = true;
@@ -152,6 +164,7 @@ function handleSelectionChange(selection) {
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
+  dialogType.value ="add"
   open.value = true;
   title.value = "添加业务模型";
   proxy.$nextTick(() => {
@@ -161,16 +174,12 @@ function handleAdd() {
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  // reset();
-  // const _modelId = row.modelId || ids.value
-  // getBm(_modelId).then(response => {
-  //   form.value = response.data;
+    dialogType.value ="add"
     open.value = true;
     title.value = "修改业务模型";
     proxy.$nextTick(() => {
       proxy.$refs["bmRef"].editRow(row)
     })
-  // });
 }
 
 /** 提交按钮 */

src/views/ms/def/index.vue

@@ -123,6 +123,9 @@
         <el-form-item label="告警-高" prop="alarmHigh">
           <el-input v-model="form.alarmHigh" placeholder="请输入告警-高数值"/>
         </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">

src/views/ms/mstpl/index.vue

@@ -66,6 +66,9 @@
         <el-form-item label="模板名称" prop="tplName">
           <el-input v-model="form.tplName" placeholder="请输入模板名称"/>
         </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
+        </el-form-item>
       </el-form>
       <indicator-manger v-else ref="uRef" @updateList="getList"/>
       <template #footer>

src/views/ms/type/index.vue

@@ -53,6 +53,9 @@
         <el-form-item label="分类名称" prop="typeName">
           <el-input v-model="form.typeName" placeholder="请输入分类名称" />
         </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">

src/views/obj/app/index.vue

@@ -79,6 +79,9 @@
         <el-form-item label="端口号" prop="appPort">
           <el-input v-model="form.appPort" placeholder="请输入端口号" />
         </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">

src/views/obj/obj/component/step1.vue

@@ -46,6 +46,9 @@
     <el-form-item label="端口" prop="objPort">
       <el-input v-model="form.objPort" placeholder="请输入端口"/>
     </el-form-item>
+    <el-form-item label="备注">
+      <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :autosize="{maxRows:6,minRows:3}" maxlength="300" show-word-limit/>
+    </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">

src/views/obj/obj/component/step4.vue

@@ -50,7 +50,7 @@ const handleConfigMetrics=(row)=>{
 }
 
 const queryList=()=>{
-  listMetrics({objId:props.rowId,tplId:-1}).then(res=>{
+  listMetrics({objId:props.rowId}).then(res=>{
     listData.value = res.rows
   })
 }