feat: 接口联调

src/api/obj/obj.js

@@ -42,3 +42,20 @@ export function delObj(objId) {
         method: 'delete'
     })
 }
+
+// 添加模板
+export function addObjTpl(objId,query) {
+    return request({
+        url: '/obj/obj/tpl/add/' + objId,
+        method: 'get',
+        params: query
+    })
+}
+
+// 删除模板
+export function delObjTpl(objId,tplId) {
+    return request({
+        url: '/obj/obj/tpl/del/' + objId + '/' + tplId,
+        method: 'get'
+    })
+}

src/assets/styles/ruoyi.scss

@@ -123,8 +123,12 @@
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+	//right: 0;
+	//position: absolute;
+	display: flex;
+	justify-content: flex-end;
+	margin-right:-20px;
+	margin-top:-10px;
 }
 
 @media ( max-width : 768px) {

src/views/ms/mstpl/index.vue

@@ -23,24 +23,26 @@
             plain
             icon="Plus"
             @click="handleAdd"
+            v-if="!selectTpl"
             v-hasPermi="['metrics:tpl:add']"
         >新增
         </el-button>
       </el-col>
     </el-row>
-    <el-table v-loading="loading" :data="tplList" border>
+    <el-table v-loading="loading" :data="tplList" border  @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" v-if="selectTpl"/>
       <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="left" prop="remark" width="350"/>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+      <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>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="280">
+      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" :width="selectTpl?200:280">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:tpl:edit']">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['metrics:tpl:edit']" v-if="!selectTpl">
             修改
           </el-button>
           <el-button link type="primary" icon="Position" v-hasPermi="['metrics:detail:list']" @click="handleDetail(scope.row)">指标管理</el-button>
@@ -84,6 +86,13 @@
 import {addTpl, delTpl, getTpl, listTpl, updateTpl} from "@/api/metrics/tpl";
 import indicatorManger from "./component/indicatorManger.vue"
 
+const props = defineProps({
+  selectTpl: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const {proxy} = getCurrentInstance();
 
 const uRef = ref(null)
@@ -118,6 +127,23 @@ const data = reactive({
 
 const {queryParams, form, rules} = toRefs(data);
 
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.tplId);
+}
+
+function emitIds(){
+  let arr=[]
+  tplList.value.forEach(p=>{
+    if(ids.value.indexOf(p.tplId)!==-1){
+      arr.push({...p})
+    }
+  })
+  return arr;
+}
+
+defineExpose({emitIds})
+
 /** 查询指标模板列表 */
 function getList() {
   loading.value = true;

src/views/obj/obj/component/addComponent.vue

@@ -5,7 +5,7 @@
     </el-steps>
   </div>
   <div class="step-content">
-    <component :is="stepArray[active]" ref="comRef" @nextStep="nextStep"/>
+    <component :is="stepArray[active]" ref="comRef" @nextStep="nextStep" @updateData="queryObjData" :rowId="rowId"/>
   </div>
   <div class="step-row">
     <el-button type="primary" @click="active--" v-if="active > 0">上一步</el-button>
@@ -21,7 +21,10 @@ import step4 from "./step4.vue"
 import {nextTick, ref} from "vue";
 const comRef = ref(null)
 
-const {proxy} = getCurrentInstance();
+const {proxy,emit} = getCurrentInstance();
+const props=defineProps({
+  rowId:{type:Number,default:null}
+})
 
 const stepArray = [step1, step2, step3, step4]
 const active = ref(0)
@@ -44,8 +47,14 @@ const handleSave=()=>{
   comRef.value.submitForm()
 }
 
+const queryObjData=(res)=>{
+  if(res.data && res.data.objId){
+    emit("changeRowId",res.data.objId)
+  }
+}
+
 const reset=()=>{
-  active.value=0
+  active.value=2
   nextTick(()=>{
     comRef.value.resetForm()
   })

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

@@ -14,7 +14,8 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="应用程序" :rules="{required: true, message: '应用程序不能为空', trigger: 'blur'}" v-if="form.objType==1">
+        <el-form-item label="应用程序" :rules="{required: true, message: '应用程序不能为空', trigger: 'blur'}"
+                      v-if="form.objType==1">
           <el-select
               v-model="form.appId"
               filterable
@@ -36,8 +37,6 @@
         </el-form-item>
       </el-col>
     </el-row>
-
-
     <el-form-item label="对象名称" prop="objName">
       <el-input v-model="form.objName" placeholder="请输入对象名称"/>
     </el-form-item>
@@ -50,17 +49,18 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { listApp } from "@/api/obj/app";
-import { addObj } from "@/api/obj/obj";
-import {ref} from "vue";
+import {listApp} from "@/api/obj/app";
+import {addObj, getObj,updateObj} from "@/api/obj/obj";
+import {nextTick, onMounted, ref} from "vue";
 
-const {proxy,emit} = getCurrentInstance();
+const props = defineProps(['rowId'])
+const {proxy, emit} = getCurrentInstance();
 const {biz_type} = proxy.useDict('biz_type');
-const form=ref({})
+const form = ref({})
 const loading = ref(false)
-const options=ref([])
+const options = ref([])
 
-const rules= {
+const rules = {
   objType: [
     {required: true, message: "业务类型不能为空", trigger: "change"}
   ],
@@ -75,7 +75,30 @@ const rules= {
   ],
 }
 
-const resetForm=()=>{
+// watchEffect(() => {
+//   if (props.rowId) {
+//     nextTick(()=>{
+//       editForm()
+//     })
+//   }
+// })
+
+onMounted(() => {
+  if (props.rowId) {
+    nextTick(() => {
+      editForm()
+    })
+  }
+})
+
+const editForm = () => {
+  getObj(props.rowId).then(res => {
+    const {objId, objType, appId, objName, objAddr, objPort} = res.data
+    form.value = {objId, objType, appId, objName, objAddr, objPort}
+  });
+}
+
+const resetForm = () => {
   form.value = {
     objId: null,
     objType: null,
@@ -87,8 +110,7 @@ const resetForm=()=>{
   proxy.resetForm("objRef");
 }
 
-const remoteMethod=(appName:string)=>{
-
+const remoteMethod = (appName: string) => {
   if (appName) {
     const params = {
       pageNum: 1,
@@ -96,8 +118,8 @@ const remoteMethod=(appName:string)=>{
       appName,
     }
     loading.value = true
-    listApp(params).then(res=>{
-      options.value = res.rows.map(item=>{
+    listApp(params).then(res => {
+      options.value = res.rows.map(item => {
         return {
           value: item.appId,
           label: item.appName
@@ -113,16 +135,20 @@ const remoteMethod=(appName:string)=>{
 const submitForm = () => {
   proxy.$refs.objRef.validate(valid => {
     if (valid) {
-      addObj(form.value).then(response => {
+      const req = form.value.objId !==null ? updateObj : addObj
+      req(form.value).then(response => {
         // proxy.$modal.msgSuccess("新增成功");
         resetForm();
-        emit("nextStep",1)
+        emit("updateData", response)
+        nextTick(()=>{
+          emit("nextStep", 1)
+        })
       });
     }
   });
 }
 
-defineExpose({resetForm,submitForm})
+defineExpose({resetForm, submitForm})
 
 </script>
 <style scoped lang="scss">

src/views/obj/obj/component/step2.vue

@@ -1,7 +1,90 @@
 <template>
-  step2
+  <el-button type="primary" @click="handleSelectTpl">选择模板</el-button>
+  <el-table :data="tplList" border style="margin-top:10px">
+    <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="200"/>
+    <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="250">
+      <template #default="scope">
+        <el-button link type="primary" icon="Position" @click="handleDetail(scope.row)">指标管理</el-button>
+        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-dialog title="选择模板" v-model="openDialog" :width="1200" append-to-body>
+    <ms-info selectTpl ref="msRef" v-if="diaType === 'ms'"/>
+    <indicator-manger v-else ref="imRef"/>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleAddTpl">添 加</el-button>
+        <el-button @click="openDialog = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 <script setup lang="ts">
+import msInfo from "../../../ms/mstpl/index.vue"
+import indicatorManger from "../../../ms/mstpl/component/indicatorManger.vue"
+import {addObjTpl,getObj,delObjTpl} from "@/api/obj/obj"
+import { ElMessage } from 'element-plus'
+import {onMounted} from "vue";
+
+const {emit} = getCurrentInstance();
+const props = defineProps(['rowId'])
+const tplList= ref([])
+const openDialog = ref(false)
+const msRef = ref(null)
+const imRef = ref(null)
+const diaType = ref("ms")
+
+const handleSelectTpl = () => {
+  diaType.value = "ms"
+  openDialog.value = true
+}
+const handleDetail=(row)=>{
+  diaType.value = "im"
+  openDialog.value = true
+  nextTick(()=>{
+    imRef.value.getSelectDetails(row.tplId)
+  })
+}
+onMounted(()=>{
+  queryObjData()
+})
+
+const queryObjData=()=>{
+  getObj(props.rowId).then(res=>{
+    tplList.value = res.data.tplList
+  })
+}
+
+const handleAddTpl=()=>{
+  const data = msRef.value.emitIds();
+  if(!data.length) return;
+  const tplIds = data.map(item=>item.tplId).join(",")
+  addObjTpl(props.rowId, {tplIds}).then(()=>{
+    queryObjData()
+  })
+  openDialog.value = false
+}
+
+const handleDelete=(row)=>{
+  delObjTpl(props.rowId,row.tplId).then(()=>{
+    queryObjData()
+  })
+}
+
+const submitForm = () => {
+  if(tplList.value.length){
+    emit("nextStep", 1)
+  }else{
+    ElMessage.error("请选择模板")
+  }
+}
+
+defineExpose({submitForm})
+
 </script>
 <style scoped lang="scss">
 </style>

src/views/obj/obj/index.vue

@@ -23,7 +23,7 @@
             type="primary"
             plain
             icon="Plus"
-            @click="handleAdd"
+            @click="handleAdd()"
             v-hasPermi="['obj:obj:add']"
         >新增
         </el-button>
@@ -78,7 +78,7 @@
 
     <!-- 添加或修改业务对象对话框 -->
     <el-dialog :title="title" v-model="open" :width="addDialogType? 1000 : 600" append-to-body>
-      <add-component v-if="addDialogType" ref="addRef"/>
+      <add-component ref="addRef" :rowId.sync="rowId" v-if="open" @changeRowId="v=>rowId=v"/>
       <template #footer v-if="false">
         <div class="dialog-footer" v-show="addDialogType">
           <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -90,7 +90,7 @@
 </template>
 
 <script setup name="Obj">
-import {addObj, delObj, getObj, listObj, updateObj} from "@/api/obj/obj";
+import {addObj, delObj, listObj, updateObj} from "@/api/obj/obj";
 import addComponent from "./component/addComponent.vue"
 
 const {proxy} = getCurrentInstance();
@@ -109,6 +109,8 @@ const daterangeUpdateTime = ref([]);
 const addDialogType = ref(true)
 const addRef=ref(null)
 
+const rowId = ref(null)
+
 const data = reactive({
   queryParams: {
     pageNum: 1,
@@ -175,10 +177,11 @@ function handleSelectionChange(selection) {
 }
 
 /** 新增按钮操作 */
-function handleAdd() {
+function handleAdd(vTitle) {
   // reset();
+  rowId.value = null;
   open.value = true;
-  title.value = "添加业务对象";
+  title.value = vTitle || "添加业务对象";
   nextTick(()=>{
     addRef.value.reset()
   })
@@ -186,13 +189,8 @@ function handleAdd() {
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  const _objId = row.objId || ids.value
-  getObj(_objId).then(response => {
-    console.log(response)
-    // form.value = response.data;
-    open.value = true;
-    title.value = "修改业务对象";
-  });
+  this.handleAdd("修改业务对象")
+  rowId.value = row.objId || ids.value
 }
 
 /** 提交按钮 */