环路管理详情页所属换热站，修复点击详情报错，删除多余按钮

src/views/heating/heatStation/loop/component/detail.vue

@@ -1,16 +1,16 @@
 <template>
-	<div class="system-edit-dic-container">
-		<el-dialog :title="'环路详情'" v-model="dialogVisible" width="950px">
-			<el-form :model="ruleForm" ref="formRef" size="default" label-width="110px">
-				<el-form-item label="环路名称" prop="name">
-					{{ ruleForm.name }}
-				</el-form-item>
-				<el-form-item label="环路编号" prop="code">
-					{{ ruleForm.code }}
-				</el-form-item>
-				<el-form-item label="所属换热站" prop="stationId">
-          {{ ruleForm.stationInfo.name }}
-					<!-- <el-tree-select
+  <div class="system-edit-dic-container">
+    <el-dialog :title="'环路详情'" v-model="dialogVisible" width="950px">
+      <el-form :model="ruleForm" ref="formRef" size="default" label-width="110px">
+        <el-form-item label="环路名称" prop="name">
+          {{ ruleForm.name }}
+        </el-form-item>
+        <el-form-item label="环路编号" prop="code">
+          {{ ruleForm.code }}
+        </el-form-item>
+        <el-form-item label="所属换热站" prop="stationId">
+          {{ ruleForm.stationInfo?.name }}
+          <!-- <el-tree-select
 						v-model="ruleForm.stationId"
 						:data="treeData"
 						:props="{
@@ -23,7 +23,7 @@
 						style="width: 100%;"
 						:render-after-expand="true"
 					/> -->
-				</el-form-item>
+        </el-form-item>
         <el-form-item label="环路类型" prop="loopTypes">
           {{ ruleForm.loopTypes === 1 ? '一网' : '二网' }}
         </el-form-item>
@@ -57,27 +57,26 @@
         <el-form-item label="环路年代" prop="decade">
           {{ ruleForm.decade }}
         </el-form-item>
-				<el-form-item label="状态" prop="status">
+        <el-form-item label="状态" prop="status">
           {{ ruleForm.status === 1 ? '启用' : '禁用' }}
-				</el-form-item>
+        </el-form-item>
         <el-form-item label="路线信息" prop="">
-					<div class="mb10" style="width: 100%">
-						<div style="display: flex;" class="mb10" v-for="(item, index) in pointList" :key="index">
-							<el-input v-model="item.position" :disabled="!item.editFalg" @keydown="onLocalChange(item, index)" @change="onLocalChange(item, index)" placeholder="请输入关键字进行搜索" clearable style="flex: 1; margin-right: 10px"></el-input>
-							<span>排序：</span>
-							<el-input-number v-model="item.sort" :controls="false" :disabled="!item.editFalg" placeholder="排序" clearable style="width: 100px; margin-right: 10px"></el-input-number>
-						</div>
-					</div>
+          <div class="mb10" style="width: 100%">
+            <div style="display: flex;" class="mb10" v-for="(item, index) in pointList" :key="index">
+              <el-input v-model="item.position" :disabled="!item.editFalg" @keydown="onLocalChange(item, index)" @change="onLocalChange(item, index)" placeholder="请输入关键字进行搜索" clearable style="flex: 1; margin-right: 10px"></el-input>
+              <span>排序：</span>
+              <el-input-number v-model="item.sort" :controls="false" :disabled="!item.editFalg" placeholder="排序" clearable style="width: 100px; margin-right: 10px"></el-input-number>
+            </div>
+          </div>
         </el-form-item>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="default">取 消</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts">
@@ -85,35 +84,35 @@ import { reactive, toRefs, defineComponent, ref } from 'vue';
 import api from '/@/api/heatStation';
 import { ElMessage } from 'element-plus';
 interface Point {
-	sort?: number;
-	lnt: number;
-	lat: number
+  sort?: number;
+  lnt: number;
+  lat: number
 }
 interface RuleFormState {
-	id?: number;
-	name: string;
-	code: string;
-	stationId: string;
-	loopTypes: string;
-	energyTypes: string;
-	heatingObject: string;
-	heatingTypes: string;
-	heatingArea: string;
-	forRealArea: string;
-	viaPoint: Array<Point>;
-	decade: string;
-	status: number;
+  id?: number;
+  name: string;
+  code: string;
+  stationId: string;
+  loopTypes: string;
+  energyTypes: string;
+  heatingObject: string;
+  heatingTypes: string;
+  heatingArea: string;
+  forRealArea: string;
+  viaPoint: Array<Point>;
+  decade: string;
+  status: number;
 }
 
 export default defineComponent({
-	name: 'headStationLoop',
-	setup(prop, { emit }) {
-		const formRef = ref<HTMLElement | null>(null);
-		const state = reactive({
-			dialogVisible: false,
-			ruleForm: {
-				id: 0,
-				name: '',
+  name: 'headStationLoop',
+  setup(prop, { emit }) {
+    const formRef = ref<HTMLElement | null>(null);
+    const state = reactive({
+      dialogVisible: false,
+      ruleForm: {
+        id: 0,
+        name: '',
         code: '',
         stationId: '',
         loopTypes: '',
@@ -123,26 +122,26 @@ export default defineComponent({
         heatingArea: '',
         forRealArea: '',
         decade: '',
-				viaPoint: [],
+        viaPoint: [],
         status: 1
-			},
-			treeData: [],
+      },
+      treeData: [],
       pointList: [] as any
-		})
-		// 打开弹窗
-		const openDialog = (row: RuleFormState | null) => {
-			resetForm()
-			queryTree()
-			if (row) {
-				(state.ruleForm as any).id = row.id
-				getDetail()
-			}
-			state.dialogVisible = true
-		}
-		const resetForm = () => {
-			state.ruleForm = {
-				id: 0,
-				name: '',
+    })
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null) => {
+      resetForm()
+      queryTree()
+      if (row) {
+        (state.ruleForm as any).id = row.id
+        getDetail()
+      }
+      state.dialogVisible = true
+    }
+    const resetForm = () => {
+      state.ruleForm = {
+        id: 0,
+        name: '',
         code: '',
         stationId: '',
         loopTypes: '',
@@ -151,50 +150,50 @@ export default defineComponent({
         heatingTypes: '',
         heatingArea: '',
         forRealArea: '',
-				viaPoint: [],
+        viaPoint: [],
         decade: '',
         status: 1
-			}
-		}
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.dialogVisible = false
-		}
-		// 取消
-		const onCancel = () => {
-			closeDialog()
-			state.pointList = []
-		}
-		const queryTree = () => {
-			api.heatStation.getList({
-					name: '',
-					code: '',
-					status: -1
-				})
-				.then((res: any) => {
-					state.treeData = res || [];
-				});
-		};
-		const getDetail = () => {
-			api.loop.detail(state.ruleForm.id)
-				.then((res: any) => {
-					state.ruleForm = {
-						...res
-					}
-					state.pointList = state.ruleForm.viaPoint.map((item: any) => ({
-						...item,
-						editFlag: false
-					}))
-				})
-		}
+      }
+    }
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.dialogVisible = false
+    }
+    // 取消
+    const onCancel = () => {
+      closeDialog()
+      state.pointList = []
+    }
+    const queryTree = () => {
+      api.heatStation.getList({
+        name: '',
+        code: '',
+        status: -1
+      })
+        .then((res: any) => {
+          state.treeData = res || [];
+        });
+    };
+    const getDetail = () => {
+      api.loop.detail(state.ruleForm.id)
+        .then((res: any) => {
+          state.ruleForm = {
+            ...res
+          }
+          state.pointList = state.ruleForm.viaPoint.map((item: any) => ({
+            ...item,
+            editFlag: false
+          }))
+        })
+    }
 
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			formRef,
-			...toRefs(state)
-		}
-	}
+    return {
+      openDialog,
+      closeDialog,
+      onCancel,
+      formRef,
+      ...toRefs(state)
+    }
+  }
 })
 </script>

src/views/system/api/index.vue

@@ -2,11 +2,11 @@
   <div class="page">
     <el-card shadow="hover">
       <div class="search">
-        <el-form :inline="true">
-          <el-form-item label="接口名称">
+        <el-form :model="params" :inline="true" ref="queryRef">
+          <el-form-item label="接口名称" prop="name">
             <el-input v-model="params.name" placeholder="请输入接口名称" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
           </el-form-item>
-          <el-form-item label="接口地址">
+          <el-form-item label="接口地址" prop="address">
             <el-input v-model="params.address" placeholder="请输入接口地址" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
           </el-form-item>
           <el-form-item label="状态" prop="status" style="width: 200px">
@@ -23,6 +23,12 @@
               </el-icon>
               查询
             </el-button>
+            <el-button size="default" @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
             <el-button type="success" @click="addOrEdit()" v-auth="'add'">
               <el-icon>
                 <ele-FolderAdd />
@@ -64,6 +70,7 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
 
 const editFormRef = ref();
+const queryRef = ref();
 
 const { params, tableData, getList, loading } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '', types: -1 });
 
@@ -79,6 +86,12 @@ const addOrEdit = async (row?: ApiRow) => {
   }
 };
 
+// 重置表单
+const resetQuery = () => {
+  queryRef.value.resetFields();
+  getList(1);
+};
+
 const onDel = (row: ApiRow) => {
   ElMessageBox.confirm(`此操作将删除接口：“${row.name}”，是否继续?`, '提示', {
     confirmButtonText: '确认',