feat:接口联调

src/views/obj/app/index.vue

@@ -31,19 +31,24 @@
 
     <el-table v-loading="loading" :data="appList" border>
       <el-table-column label="应用ID" align="center" prop="appId" width="80" />
-      <el-table-column label="应用名称" align="left" prop="appName" />
+      <el-table-column label="应用名称" align="left" prop="appName"  width="300"/>
       <el-table-column label="应用编码" align="left" prop="appCode"  width="180" />
       <el-table-column label="IP地址" align="left" width="200">
         <template #default="scope">
             {{scope.row.appAddr}}:{{scope.row.appPort}}
         </template>
       </el-table-column>
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
+      <el-table-column label="pinpoint启动参数">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
+          <div v-html="outConfigKey(scope.row)" />
         </template>
       </el-table-column>
       <el-table-column label="备注" align="left" prop="remark"  width="180"/>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['obj:app:edit']">修改</el-button>
@@ -90,10 +95,8 @@
 </template>
 
 <script setup name="App">
-    import { listApp, getApp, delApp, addApp, updateApp } from "@/api/obj/app";
-
-    const { proxy } = getCurrentInstance();
-
+import { listApp, getApp, delApp, addApp, updateApp } from "@/api/obj/app";
+const { proxy } = getCurrentInstance();
 const appList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -105,6 +108,7 @@ const total = ref(0);
 const title = ref("");
 const daterangeCreateTime = ref([]);
 const daterangeUpdateTime = ref([]);
+const configKey=ref("")
 
 const data = reactive({
   form: {},
@@ -202,11 +206,11 @@ function handleSelectionChange(selection) {
   multiple.value = !selection.length;
 }
 
+/**获取配置**/
+
+
 /** 新增按钮操作 */
 function handleAdd() {
-  proxy.getConfigKey("pp.start").then(response => {
-    console.log("xxxx",response.msg)
-  });
   reset();
   open.value = true;
   title.value = "添加应用程序管理";
@@ -262,5 +266,16 @@ function handleExport() {
   }, `app_${new Date().getTime()}.xlsx`)
 }
 
+function outConfigKey(item){
+  return configKey.value.replace(/\$\{code}/g, item.appCode);
+}
+
+function handleConfigKey() {
+    proxy.getConfigKey("pp.start").then(response => {
+      configKey.value = response.msg.replace(/\n/g, '<br/>')
+    })
+}
+
 getList();
+handleConfigKey();
 </script>

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

@@ -5,11 +5,11 @@
     </el-steps>
   </div>
   <div class="step-content">
-    <component :is="stepArray[active]"/>
+    <component :is="stepArray[active]" ref="comRef" @nextStep="nextStep"/>
   </div>
   <div class="step-row">
     <el-button type="primary" @click="active--" v-if="active > 0">上一步</el-button>
-    <el-button type="primary" @click="nextStep">{{ stepArray.length - 1 === active ? '完成' : '下一步' }}</el-button>
+    <el-button type="primary" @click="handleSave">{{ stepArray.length - 1 === active ? '完成' : '下一步' }}</el-button>
   </div>
 </template>
 <script setup lang="ts">
@@ -18,7 +18,10 @@ import step2 from "./step2.vue"
 import step3 from "./step3.vue"
 import step4 from "./step4.vue"
 
-import {ref} from "vue";
+import {nextTick, ref} from "vue";
+const comRef = ref(null)
+
+const {proxy} = getCurrentInstance();
 
 const stepArray = [step1, step2, step3, step4]
 const active = ref(0)
@@ -29,13 +32,27 @@ const stepContent = [
   {title: "数据接口配置", description: "配置数据获取接口地址"},
 ]
 
-const nextStep = () => {
+const nextStep = (step:number) => {
   if (active.value === stepArray.length - 1) {
     console.log("done")
   } else {
-    active.value++
+    active.value += step
   }
 }
+
+const handleSave=()=>{
+  comRef.value.submitForm()
+}
+
+const reset=()=>{
+  active.value=0
+  nextTick(()=>{
+    comRef.value.resetForm()
+  })
+}
+
+defineExpose({reset})
+
 </script>
 <style scoped lang="scss">
 @import "@/assets/styles/common";

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

@@ -1,7 +1,129 @@
 <template>
-  step1
+  <el-form ref="objRef" :model="form" :rules="rules" label-width="80px">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="业务类型" prop="objType">
+          <el-select v-model="form.objType" placeholder="请选择业务类型" style="width: 100%">
+            <el-option
+                v-for="dict in biz_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+            ></el-option>
+          </el-select>
+        </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-select
+              v-model="form.appId"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入应用程序名称"
+              remote-show-suffix
+              :remote-method="remoteMethod"
+              :loading="loading"
+              style="width: 100%"
+          >
+            <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+
+    <el-form-item label="对象名称" prop="objName">
+      <el-input v-model="form.objName" placeholder="请输入对象名称"/>
+    </el-form-item>
+    <el-form-item label="IP地址" prop="objAddr">
+      <el-input v-model="form.objAddr" placeholder="请输入IP地址"/>
+    </el-form-item>
+    <el-form-item label="端口" prop="objPort">
+      <el-input v-model="form.objPort" placeholder="请输入端口"/>
+    </el-form-item>
+  </el-form>
 </template>
 <script setup lang="ts">
+import { listApp } from "@/api/obj/app";
+import { addObj } from "@/api/obj/obj";
+import {ref} from "vue";
+
+const {proxy,emit} = getCurrentInstance();
+const {biz_type} = proxy.useDict('biz_type');
+const form=ref({})
+const loading = ref(false)
+const options=ref([])
+
+const rules= {
+  objType: [
+    {required: true, message: "业务类型不能为空", trigger: "change"}
+  ],
+  objName: [
+    {required: true, message: "对象名称不能为空", trigger: "blur"}
+  ],
+  objAddr: [
+    {required: true, message: "IP地址不能为空", trigger: "blur"}
+  ],
+  objPort: [
+    {required: true, message: "端口不能为空", trigger: "blur"}
+  ],
+}
+
+const resetForm=()=>{
+  form.value = {
+    objId: null,
+    objType: null,
+    appId: null,
+    objName: null,
+    objAddr: null,
+    objPort: null,
+  }
+  proxy.resetForm("objRef");
+}
+
+const remoteMethod=(appName:string)=>{
+
+  if (appName) {
+    const params = {
+      pageNum: 1,
+      pageSize: 10,
+      appName,
+    }
+    loading.value = true
+    listApp(params).then(res=>{
+      options.value = res.rows.map(item=>{
+        return {
+          value: item.appId,
+          label: item.appName
+        }
+      })
+      loading.value = false
+    })
+  } else {
+    options.value = []
+  }
+}
+
+const submitForm = () => {
+  proxy.$refs.objRef.validate(valid => {
+    if (valid) {
+      addObj(form.value).then(response => {
+        // proxy.$modal.msgSuccess("新增成功");
+        resetForm();
+        emit("nextStep",1)
+      });
+    }
+  });
+}
+
+defineExpose({resetForm,submitForm})
+
 </script>
 <style scoped lang="scss">
 </style>

src/views/obj/obj/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="app-container">
-
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="18">
         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0"
@@ -45,18 +43,24 @@
           {{ scope.row.objAddr }}:{{ scope.row.objPort }}
         </template>
       </el-table-column>
+      <el-table-column label="应用模板" align="left" width="260">
+        <template #default="scope">
+          <span v-for="(item,index) in scope.row.tplList" :key="`ip_${item.objId}`">
+            {{item.tplName}}<span v-if="index!==scope.row.tplList.length-1">,</span>
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column label="更新时间" align="left" prop="updateTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['obj:obj:edit']">
             修改
           </el-button>
-          <el-button link type="primary" icon="Position" @click="handleRunSearch(scope.row)">运行指标查询</el-button>
+          <el-button link type="primary" icon="Position">运行指标查询</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['obj:obj:remove']">
             删除
           </el-button>
@@ -73,37 +77,9 @@
     />
 
     <!-- 添加或修改业务对象对话框 -->
-    <el-dialog :title="title" v-model="open" :width="addDialogType? 600 : 1000" append-to-body>
-      <el-form ref="objRef" :model="form" :rules="rules" label-width="80px" v-if="addDialogType">
-        <el-form-item label="业务类型" prop="objType">
-          <el-select v-model="form.objType" placeholder="请选择业务类型">
-            <el-option
-                v-for="dict in biz_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="应用ID" prop="appId">
-          <el-input v-model="form.appId" placeholder="请输入应用ID"/>
-        </el-form-item>
-        <el-form-item label="对象名称" prop="objName">
-          <el-input v-model="form.objName" placeholder="请输入对象名称"/>
-        </el-form-item>
-        <el-form-item label="IP地址" prop="objAddr">
-          <el-input v-model="form.objAddr" placeholder="请输入IP地址"/>
-        </el-form-item>
-        <el-form-item label="端口" prop="objPort">
-          <el-input v-model="form.objPort" placeholder="请输入端口"/>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" show-word-limit :maxlength="300"
-                    :autosize="{minRows:4,maxRows:6}"/>
-        </el-form-item>
-      </el-form>
-      <add-component v-else/>
-      <template #footer>
+    <el-dialog :title="title" v-model="open" :width="addDialogType? 1000 : 600" append-to-body>
+      <add-component v-if="addDialogType" ref="addRef"/>
+      <template #footer v-if="false">
         <div class="dialog-footer" v-show="addDialogType">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
@@ -131,10 +107,9 @@ const total = ref(0);
 const title = ref("");
 const daterangeUpdateTime = ref([]);
 const addDialogType = ref(true)
-
+const addRef=ref(null)
 
 const data = reactive({
-  form: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -148,20 +123,6 @@ const data = reactive({
     updateBy: null,
     updateTime: null,
     remark: null
-  },
-  rules: {
-    objType: [
-      {required: true, message: "业务类型不能为空", trigger: "change"}
-    ],
-    objName: [
-      {required: true, message: "对象名称不能为空", trigger: "blur"}
-    ],
-    objAddr: [
-      {required: true, message: "IP地址不能为空", trigger: "blur"}
-    ],
-    objPort: [
-      {required: true, message: "端口不能为空", trigger: "blur"}
-    ],
   }
 });
 
@@ -182,7 +143,7 @@ function getList() {
   });
 }
 
-function handleRunSearch(row) {
+function handleRunSearch() {
   open.value = true;
   title.value = "运行指标查询";
   addDialogType.value = false
@@ -191,26 +152,6 @@ function handleRunSearch(row) {
 // 取消按钮
 function cancel() {
   open.value = false;
-  reset();
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-    objId: null,
-    objType: null,
-    appId: null,
-    objName: null,
-    objAddr: null,
-    objPort: null,
-    createBy: null,
-    createTime: null,
-    updateBy: null,
-    updateTime: null,
-    remark: null
-  };
-  proxy.resetForm("objRef");
-  addDialogType.value = true
 }
 
 /** 搜索按钮操作 */
@@ -235,17 +176,20 @@ function handleSelectionChange(selection) {
 
 /** 新增按钮操作 */
 function handleAdd() {
-  reset();
+  // reset();
   open.value = true;
   title.value = "添加业务对象";
+  nextTick(()=>{
+    addRef.value.reset()
+  })
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset();
   const _objId = row.objId || ids.value
   getObj(_objId).then(response => {
-    form.value = response.data;
+    console.log(response)
+    // form.value = response.data;
     open.value = true;
     title.value = "修改业务对象";
   });