删除通道数据

src/api/network/index.ts

@@ -1,5 +1,6 @@
 import { get, post, del, put } from '/@/utils/request_network';
 
 export default {
-  getList: (params?: object) => get('/tunnel/list', params)
+  getList: (params?: object) => get('/tunnel/list', params),
+  deleteItem: (params?: object) => del('/tunnel/delete', params),
 }

src/views/assess/totalIndex/index.vue

@@ -162,7 +162,7 @@ export default defineComponent({
 		const onOpenDetailItem = (row: TableDataRow) => {
 			detailItemRef.value.openDialog(row);
 		};
-		// 删除用户
+		// 删除
 		const onRowDel = (row: TableDataRow) => {
 			ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.title}”，是否继续?`, '提示', {
 				confirmButtonText: '确认',

src/views/network/tunnel/component/list.vue

@@ -33,10 +33,7 @@
                         <el-divider direction="vertical" />
                         <el-button link size="small" key="warning" type="warning">禁 用</el-button>
                         <el-divider direction="vertical" />
-                        <el-button link size="small" key="danger" type="danger">删 除</el-button>
-                        <!-- <div style="text-align:center;cursor: pointer;">启 用</div>
-                        <div style="border-bottom: 1px solid #ebeef5;border-top: 1px solid #ebeef5;padding: 4px 0;text-align:center;cursor: pointer;">禁 用</div>
-                        <div style="text-align:center;cursor: pointer;">删 除</div> -->
+                        <el-button @click="onRowDel(scope.row)" link size="small" key="danger" type="danger">删 除</el-button>
                     </div>
                     </el-popover>
                 </template>
@@ -61,6 +58,8 @@
 
 <script lang="ts">
 import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+
 import api from '/@/api/network';
 
 // 定义接口来定义对象的类型
@@ -113,6 +112,10 @@ export default defineComponent({
 		};
         // 初始化表格数据
 		const initTableData = () => {
+            fetchList()
+		};
+        // 获取数据
+        const fetchList = () => {
             console.log(props.queryForm.title)
             let params = {
                 OrderBy: props.queryForm.title,
@@ -129,12 +132,27 @@ export default defineComponent({
 
 
 		};
+        // 删除
+		const onRowDel = (row: TableDataForm) => {
+			ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.name}”，是否继续?`, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					api.deleteItem({ids: [row.id]}).then((res: any) => {
+						fetchList()
+						ElMessage.success('删除成功');
+					});
+				})
+				.catch(() => {});
+		};
         // 监听双向绑定 queryForm 的变化
 		watch(
             () => props.queryForm,
             // 新数据
             () => {
-                initTableData()
+                fetchList()
             },
             {   deep: true,
                 immediate: true
@@ -145,6 +163,8 @@ export default defineComponent({
 			initTableData();
 		});
         return {
+            fetchList,
+            onRowDel,
             onHandleSizeChange,
             onHandleCurrentChange,
             ...toRefs(state),

src/views/network/tunnel/detail.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="system-dic-container">
+	 <h1>通道详情</h1>
+	</div>
+</template>
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+
+
+import { useRoute } from 'vue-router';
+
+// import api from '/@/api/device';
+
+interface TableDataState {
+	// ids: number[];
+	title: string,
+	// tableData: {
+	// 	data: [];
+	// 	total: number;
+	// 	loading: boolean;
+	// 	param: {
+	// 		pageNum: number;
+	// 		pageSize: number;
+	// 		name: string;
+	// 		deviceType: string;
+	// 		status: string;
+	// 		dateRange: string[];
+	// 	};
+	// };
+}
+export default defineComponent({
+	name: 'tunnelDetail',
+	components: {  },
+
+	setup(prop, context) {
+		const route = useRoute();
+		// const editDicRef = ref();
+		// const editAttrRef = ref();
+		// const editFunRef = ref();
+		// const editEventRef = ref();
+		// const editTabRef = ref();
+		const state = reactive<TableDataState>({
+            title: ''
+		});
+		return {
+			Edit,
+			// editDicRef,
+			// editAttrRef,
+			// editFunRef,
+			// editEventRef,
+			// editTabRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style>
+
+</style>
+
+