feat: 步骤栏添加详情页

web/src/views/https/api/components/detail.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="header-container">
+  <div class="app-container" >
+    <div class="header-container" v-if="!isView">
       <div class="card-head-title">
         <div class="card-description">
           <CardHeader
@@ -244,6 +244,15 @@ import {showErrMessage} from "@/utils/element";
 import ResponseReport from "@/views/https/api/components/responseReport.vue";
 import CardHeader from "@/components/CardHeader/index.vue";
 
+const props = defineProps({
+  isView: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+});
+
 const route = useRoute()
 
 const router = useRouter()
@@ -384,8 +393,10 @@ const getMethodColor = (method: any) => {
 }
 
 const methodChange = (method: any) => {
-  let selectInputEl = methodRef.value.$el.getElementsByTagName("input")
-  if (selectInputEl.length > 0) selectInputEl[0].style.color = getMethodColor(method)
+  if (methodRef.value && methodRef.value.$el) {
+    let selectInputEl = methodRef.value.$el.getElementsByTagName("input")
+    if (selectInputEl.length > 0) selectInputEl[0].style.color = getMethodColor(method)
+  }
 }
 
 const setData = (form: any) => {
@@ -542,14 +553,19 @@ const Snapshot = () => {
 
 
 const initApi = () => {
-  let api_id = route.query.id
-  if(api_id){
-    state.api_id = api_id
-  }
+
+  // let api_id = route.query.id
+  // if(api_id){
+  //   state.api_id = api_id
+  // }
+  let api_id = 1145
   console.log("api_id------>", api_id)
   if (api_id) {
     getHttpDetail({id: api_id}).then((response) => {
       const {data, code, msg} = response.data
+      console.log("测试")
+      console.log(data)
+      console.log("测试")
       ruleForm.url = data.url
       ruleForm.method = data.method
       ruleForm.name = data.name

web/src/views/https/case/components/apiInfoController.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-drawer
+    v-model="state.openApiInfoPage"
+    size="70%"
+    append-to-body
+    direction="rtl"
+    destroy-on-close
+    :with-header="true">
+    <template #header>
+      <strong>步骤详情</strong>
+    </template>
+    <ApiDetail :isView="true" :api_id="state.data.id"></ApiDetail>
+  </el-drawer>
+
+</template>
+
+<script setup name="apiInfoController">
+import {reactive} from 'vue';
+import ApiDetail from "@/views/https/api/components/detail.vue";
+
+const state = reactive({
+  openApiInfoPage: false,
+  data: null
+})
+
+const onOpenApiInfoPage = (data) => {
+  state.data = data
+  state.openApiInfoPage = !state.openApiInfoPage
+}
+
+defineExpose({
+  onOpenApiInfoPage,
+})
+</script>
+
+<style lang="scss" scoped>
+
+.controller-content {
+  padding: 5px 10px;
+}
+</style>

web/src/views/https/case/components/detail.vue

@@ -62,13 +62,18 @@
                           </div>
                         </template>
                       </el-table-column>
-                      <el-table-column fixed="right" width="50px">
+                      <el-table-column fixed="right" width="100px">
                         <template #default="scope">
                           <el-button type="danger" circle size="small" @click="del(scope)">
                             <el-icon>
                               <Delete/>
                             </el-icon>
                           </el-button>
+                          <el-button type="primary" circle size="small" @click="nodeClick(scope.row)">
+                            <el-icon>
+                              <Setting/>
+                            </el-icon>
+                          </el-button>
                         </template>
                       </el-table-column>
                     </el-table>
@@ -179,20 +184,22 @@
         </el-col>
       </el-row>
     </div>
+    <api-info-controller ref="ApiInfoControllerRef"></api-info-controller>
   </div>
 </template>
 
 <script setup lang="ts">
-import {Delete} from "@element-plus/icons-vue";
+import {Delete, Setting} from "@element-plus/icons-vue";
 import {useRoute, useRouter} from "vue-router";
 import {computed, onMounted, reactive, ref, watch, nextTick} from "vue";
 import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
 import { saveCaseOrUpdate, runCase, getCaseDetail, getHttpDetail, deleteCase } from "@/api/http";
 import {showErrMessage} from "@/utils/element";
 import {getStepTypesByUse, getStepTypeInfo, parseTime} from '@/utils/index'
 import Step from "@/views/https/case/components/step.vue";
-import Sortable from "sortablejs"
+import ApiInfoController from "@/views/https/case/components/apiInfoController.vue";
 import CardHeader from "@/components/CardHeader/index.vue";
+import Sortable from "sortablejs"
 
 const route = useRoute()
 const router = useRouter()
@@ -208,6 +215,8 @@ const SettingActiveName =  ref('TestConfiguration')
 
 const loading = ref(false)
 
+const ApiInfoControllerRef = ref()
+
 const createForm = () => {
   return {
     name: '',
@@ -364,8 +373,6 @@ const initDropTable = () => {
 
     onEnd(evt: any) {
       const { newIndex, oldIndex } = evt
-      console.log(newIndex)
-      console.log(oldIndex)
       const currRow = tableData.splice(oldIndex, 1)[0]
       tableData.splice(newIndex, 0, currRow)
     }
@@ -396,6 +403,11 @@ const del = (scope) => {
   })
 }
 
+const nodeClick = (data) => {
+  ApiInfoControllerRef.value.onOpenApiInfoPage(data)
+}
+
+
 onMounted(() => {
   initApi()
   nextTick(() => {