通道管理、服务器管理：移除表格页面

src/views/network/server/component/table.vue

@@ -1,211 +0,0 @@
-<template>
-    <div class="container">
-        <!-- <el-table v-loading="loading" border stripe :data="data" style="width: 100%">
-            <el-table-column align="center" prop="id" label="ID"/>
-            <el-table-column align="center" prop="server" label="服务器"/>
-            <el-table-column align="center" prop="name" label="名称"/>
-            <el-table-column align="center" prop="types" label="类型"/>
-            <el-table-column align="center" prop="addr" label="地址"/>
-            <el-table-column show-overflow-tooltip align="center" prop="createdAt" label="创建时间"/>
-            <el-table-column align="center" prop="last" label="最近上线"/>
-            <el-table-column align="center" prop="types" label="状态">
-                <template #default="scope">
-                    <el-tag v-if="!scope.row.status" class="ml-2" type="danger">离线</el-tag>
-                    <el-tag v-else class="ml-2" type="success">在线</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作" width="200">
-                <template #default="scope">
-                    <el-button size="small" type="text" @click="onRowDel(scope.row)">详情</el-button>
-
-                    <el-button size="small" type="text" @click="onOpenEditSign(scope.row)">编辑</el-button>
-                    <el-button size="small" type="text" @click="onRowDetail(scope.row)">更多</el-button>
-                </template>
-            </el-table-column>
-        </el-table> -->
-        <div class="content">
-            <!-- <section v-for="(item, index) in data" :key="index"> -->
-            <el-card class="item" @click="toDetail(item.id)" shadow="hover" v-for="(item, index) in data" :key="index">
-                <div class="top-inner-wrap">
-                    <span>通道：{{item.id}}</span>
-                    <span class="more">更多
-                        <i class="fa fa-angle-down"></i>
-                        <!-- <ele-ArrowDown /> -->
-                    </span>
-                </div>
-                <div class="content-wrap">
-                    <div class="name-and-status">
-                        <span>{{item.name}}</span>
-                        [
-                        <span>{{item.status?'启动':'未启动'}}</span>
-                        ]
-                    </div>
-                    <div class="">
-                        <span>{{item.types}}</span>
-                        <span style="margin-left: 6px;">{{item.name}}</span>
-                    </div>
-                    
-                </div>
-            </el-card>
-        </div>
-        <el-pagination
-            @size-change="onHandleSizeChange"
-            @current-change="onHandleCurrentChange"
-            class="mt15"
-            :pager-count="5"
-            :page-sizes="[10, 20, 30]"
-            v-model:current-page="param.page"
-            background
-            v-model:page-size="param.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-        >
-        </el-pagination>
-    </div>
-    
-</template>
-
-<script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-import api from '/@/api/network';
-
-// 定义接口来定义对象的类型
-interface TableDataForm {
-	id: number;
-    server: string;
-	name: string;
-	
-}
-interface TableData {
-	data:  Array<TableDataForm>;
-    total: number;
-    loading: boolean;
-    param: {
-        page: number;
-        pageSize: number;
-    };
-}
-
-export default defineComponent({
-    name: 'tunnelTable',
-	props: {
-		// 输入框前置内容
-		queryForm: {
-			type: Object,
-			default: () => {},
-		},
-    },
-    setup(props, { emit }) {
-        const router = useRouter();
-        const state = reactive<TableData>({
-			data: [],
-            total: 0,
-            loading: false,
-            param: {
-                page: 1,
-                pageSize: 10,
-            },
-            
-            
-		});
-        // 分页改变
-		const onHandleSizeChange = (val: number) => {
-			state.param.pageSize = val;
-            fetchList()
-		};
-		// 分页改变
-		const onHandleCurrentChange = (val: number) => {
-			state.param.page = val;
-            fetchList()
-		};
-        // 初始化表格数据
-		const initTableData = () => {
-            fetchList()
-
-
-		};
-        // 获取数据
-        const fetchList = () => {
-            console.log(props.queryForm.title)
-            let params = {
-                keyWord: props.queryForm.title,
-                pageNum: state.param.page,
-                PageSize: state.param.pageSize
-            }
-            api.server.getList(params).then((res: any) => {
-				console.log(res);
-                const { list, total, page } = res
-                state.data = list
-                state.total = total
-                state.param.page = page
-			});
-
-
-		};
-        const toDetail = (id: number) => {
-            router.push(`/network/server/detail/${id}`)
-        };
-        // 监听双向绑定 queryForm 的变化
-		watch(
-            () => props.queryForm,
-            // 新数据
-            () => {
-                fetchList()
-            },
-            {   deep: true,
-                immediate: true
-            },
-        );
-        // 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-        return {
-            fetchList,
-            toDetail,
-            onHandleSizeChange,
-            onHandleCurrentChange,
-            ...toRefs(state),
-        };
-    }
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-    width: 100%;
-    .content {
-        display: flex;
-        flex-flow: row wrap;
-        width: 100%;
-        .item {
-            width: calc((100% - 40px)/3);
-            cursor: pointer;
-            border-radius: 6px;
-            .top-inner-wrap {
-                font-size: 15px;
-                display: flex;
-                justify-content: space-between;
-                background: transparent;
-                border-bottom: 1px solid var(--el-card-border-color);
-                    // border: 1px solid var(--el-card-border-color);
-                .more {
-                    color: var(--el-color-primary);
-                }
-            }
-            .content-wrap {
-                .name-and-status {
-                    margin: 12px 0 8px 0;
-                }
-            }
-        }
-        .item:not(:nth-child(3n+1)) {
-            margin-left: 20px;
-        }
-        .item:nth-of-type(n+4) {
-            margin-top: 20px;
-        }
-    }
-}
-</style>

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

@@ -1,211 +0,0 @@
-<template>
-    <div class="container">
-        <!-- <el-table v-loading="loading" border stripe :data="data" style="width: 100%">
-            <el-table-column align="center" prop="id" label="ID"/>
-            <el-table-column align="center" prop="server" label="服务器"/>
-            <el-table-column align="center" prop="name" label="名称"/>
-            <el-table-column align="center" prop="types" label="类型"/>
-            <el-table-column align="center" prop="addr" label="地址"/>
-            <el-table-column show-overflow-tooltip align="center" prop="createdAt" label="创建时间"/>
-            <el-table-column align="center" prop="last" label="最近上线"/>
-            <el-table-column align="center" prop="types" label="状态">
-                <template #default="scope">
-                    <el-tag v-if="!scope.row.status" class="ml-2" type="danger">离线</el-tag>
-                    <el-tag v-else class="ml-2" type="success">在线</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作" width="200">
-                <template #default="scope">
-                    <el-button size="small" type="text" @click="onRowDel(scope.row)">详情</el-button>
-
-                    <el-button size="small" type="text" @click="onOpenEditSign(scope.row)">编辑</el-button>
-                    <el-button size="small" type="text" @click="onRowDetail(scope.row)">更多</el-button>
-                </template>
-            </el-table-column>
-        </el-table> -->
-        <div class="content">
-            <!-- <section v-for="(item, index) in data" :key="index"> -->
-            <el-card class="item" @click="toDetail(item.id)" shadow="hover" v-for="(item, index) in data" :key="index">
-                <div class="top-inner-wrap">
-                    <span>通道：{{item.id}}</span>
-                    <span class="more">更多
-                        <i class="fa fa-angle-down"></i>
-                        <!-- <ele-ArrowDown /> -->
-                    </span>
-                </div>
-                <div class="content-wrap">
-                    <div class="name-and-status">
-                        <span>{{item.name}}</span>
-                        [
-                        <span>{{item.status?'启动':'未启动'}}</span>
-                        ]
-                    </div>
-                    <div class="">
-                        <span>{{item.types}}</span>
-                        <span style="margin-left: 6px;">{{item.name}}</span>
-                    </div>
-                    
-                </div>
-            </el-card>
-        </div>
-        <el-pagination
-            @size-change="onHandleSizeChange"
-            @current-change="onHandleCurrentChange"
-            class="mt15"
-            :pager-count="5"
-            :page-sizes="[10, 20, 30]"
-            v-model:current-page="param.page"
-            background
-            v-model:page-size="param.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-        >
-        </el-pagination>
-    </div>
-    
-</template>
-
-<script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-import api from '/@/api/network';
-
-// 定义接口来定义对象的类型
-interface TableDataForm {
-	id: number;
-    server: string;
-	name: string;
-	
-}
-interface TableData {
-	data:  Array<TableDataForm>;
-    total: number;
-    loading: boolean;
-    param: {
-        page: number;
-        pageSize: number;
-    };
-}
-
-export default defineComponent({
-    name: 'tunnelTable',
-	props: {
-		// 输入框前置内容
-		queryForm: {
-			type: Object,
-			default: () => {},
-		},
-    },
-    setup(props, { emit }) {
-        const router = useRouter();
-        const state = reactive<TableData>({
-			data: [],
-            total: 0,
-            loading: false,
-            param: {
-                page: 1,
-                pageSize: 10,
-            },
-            
-            
-		});
-        // 分页改变
-		const onHandleSizeChange = (val: number) => {
-			state.param.pageSize = val;
-            fetchList()
-		};
-		// 分页改变
-		const onHandleCurrentChange = (val: number) => {
-			state.param.page = val;
-            fetchList()
-		};
-        // 初始化表格数据
-		const initTableData = () => {
-            fetchList()
-
-
-		};
-        // 获取数据
-        const fetchList = () => {
-            console.log(props.queryForm.title)
-            let params = {
-                keyWord: props.queryForm.title,
-                pageNum: state.param.page,
-                PageSize: state.param.pageSize
-            }
-            api.tunnel.getList(params).then((res: any) => {
-				console.log(res);
-                const { list, total, page } = res
-                state.data = list
-                state.total = total
-                state.param.page = page
-			});
-
-
-		};
-        const toDetail = (id: number) => {
-            router.push(`/network/tunnel/detail/${id}`)
-        };
-        // 监听双向绑定 queryForm 的变化
-		watch(
-            () => props.queryForm,
-            // 新数据
-            () => {
-                fetchList()
-            },
-            {   deep: true,
-                immediate: true
-            },
-        );
-        // 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-        return {
-            fetchList,
-            toDetail,
-            onHandleSizeChange,
-            onHandleCurrentChange,
-            ...toRefs(state),
-        };
-    }
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-    width: 100%;
-    .content {
-        display: flex;
-        flex-flow: row wrap;
-        width: 100%;
-        .item {
-            width: calc((100% - 40px)/3);
-            cursor: pointer;
-            border-radius: 6px;
-            .top-inner-wrap {
-                font-size: 15px;
-                display: flex;
-                justify-content: space-between;
-                background: transparent;
-                border-bottom: 1px solid var(--el-card-border-color);
-                    // border: 1px solid var(--el-card-border-color);
-                .more {
-                    color: var(--el-color-primary);
-                }
-            }
-            .content-wrap {
-                .name-and-status {
-                    margin: 12px 0 8px 0;
-                }
-            }
-        }
-        .item:not(:nth-child(3n+1)) {
-            margin-left: 20px;
-        }
-        .item:nth-of-type(n+4) {
-            margin-top: 20px;
-        }
-    }
-}
-</style>