|
@@ -1,57 +1,142 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-table v-loading="loading" :data="data" style="width: 100%">
|
|
|
- <el-table-column align="center" prop="id" label="ID" width="80"/>
|
|
|
- <!-- <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="创建时间" width="170"/>
|
|
|
- <!-- <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="info">未启动</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 @click="toDetail(scope.row.id)" size="small" type="text">详情</el-button>
|
|
|
- <el-button size="small" link key="info" type="info" @click="toEdit(scope.row.id)">编辑</el-button>
|
|
|
-
|
|
|
- <el-popover placement="bottom" :width="160" trigger="click">
|
|
|
- <template #reference>
|
|
|
- <el-button size="small" type="text" class="more-btn" @click="isShowMore = !isShowMore">更多
|
|
|
- <i style="margin-left: 2px;" :class="isShowMore ? 'fa fa-angle-down':'fa fa-angle-up'"></i>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- <div class="more-opearte-wrap">
|
|
|
- <el-button @click="onChangeStatus(scope.row.id, 1)" :disabled="scope.row.status" link size="small" key="success" type="success">启 用</el-button>
|
|
|
- <el-divider direction="vertical" />
|
|
|
- <el-button @click="onChangeStatus(scope.row.id, 0)" :disabled="!scope.row.status" link size="small" key="warning" type="warning">禁 用</el-button>
|
|
|
- <el-divider direction="vertical" />
|
|
|
- <el-button @click="onRowDel(scope.row)" link size="small" key="danger" type="danger">删 除</el-button>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <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>
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="id"
|
|
|
+ label="ID"
|
|
|
+ width="80"
|
|
|
+ />
|
|
|
+ <!-- <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="创建时间"
|
|
|
+ width="170"
|
|
|
+ />
|
|
|
+ <!-- <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="info"
|
|
|
+ >未启动</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
|
|
|
+ @click="toDetail(scope.row.id)"
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ >详情</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ link
|
|
|
+ key="info"
|
|
|
+ type="info"
|
|
|
+ @click="toEdit(scope.row.id)"
|
|
|
+ >编辑</el-button>
|
|
|
+
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ :width="160"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ class="more-btn"
|
|
|
+ @click="isShowMore = !isShowMore"
|
|
|
+ >更多
|
|
|
+ <i
|
|
|
+ style="margin-left: 2px;"
|
|
|
+ :class="isShowMore ? 'fa fa-angle-down':'fa fa-angle-up'"
|
|
|
+ ></i>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <div class="more-opearte-wrap">
|
|
|
+ <el-button
|
|
|
+ @click="onChangeStatus(scope.row.id, 1)"
|
|
|
+ :disabled="scope.row.status"
|
|
|
+ link
|
|
|
+ size="small"
|
|
|
+ key="success"
|
|
|
+ type="success"
|
|
|
+ >启 用</el-button>
|
|
|
+ <el-divider direction="vertical" />
|
|
|
+ <el-button
|
|
|
+ @click="onChangeStatus(scope.row.id, 0)"
|
|
|
+ :disabled="!scope.row.status"
|
|
|
+ link
|
|
|
+ size="small"
|
|
|
+ key="warning"
|
|
|
+ type="warning"
|
|
|
+ >禁 用</el-button>
|
|
|
+ <el-divider direction="vertical" />
|
|
|
+ <el-button
|
|
|
+ @click="onRowDel(scope.row)"
|
|
|
+ link
|
|
|
+ size="small"
|
|
|
+ key="danger"
|
|
|
+ type="danger"
|
|
|
+ >删 除</el-button>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <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">
|
|
@@ -63,145 +148,142 @@ import api from '/@/api/network';
|
|
|
|
|
|
// 定义接口来定义对象的类型
|
|
|
interface TableDataForm {
|
|
|
- id: number;
|
|
|
- server: string;
|
|
|
- name: string;
|
|
|
-
|
|
|
+ id: number;
|
|
|
+ server: string;
|
|
|
+ name: string;
|
|
|
+
|
|
|
}
|
|
|
interface TableData {
|
|
|
- data: Array<TableDataForm>;
|
|
|
- total: number;
|
|
|
- loading: boolean;
|
|
|
- param: {
|
|
|
- page: number;
|
|
|
- pageSize: number;
|
|
|
- };
|
|
|
- isShowMore: boolean
|
|
|
+ data: Array<TableDataForm>;
|
|
|
+ total: number;
|
|
|
+ loading: boolean;
|
|
|
+ param: {
|
|
|
+ page: number;
|
|
|
+ pageSize: number;
|
|
|
+ };
|
|
|
+ isShowMore: boolean
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: 'tunnel',
|
|
|
- props: {
|
|
|
- // 输入框前置内容
|
|
|
- keyWord: {
|
|
|
- type: Object,
|
|
|
- default: () => {},
|
|
|
- },
|
|
|
+ name: 'tunnel',
|
|
|
+ props: {
|
|
|
+ // 输入框前置内容
|
|
|
+ keyWord: {
|
|
|
+ type: Object,
|
|
|
+ default: () => { },
|
|
|
},
|
|
|
- setup(props, { emit }) {
|
|
|
- const router = useRouter();
|
|
|
- const state = reactive<TableData>({
|
|
|
- data: [],
|
|
|
- total: 0,
|
|
|
- loading: false,
|
|
|
- param: {
|
|
|
- page: 1,
|
|
|
- pageSize: 10,
|
|
|
- },
|
|
|
- isShowMore: true
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
- // 改变状态
|
|
|
- const onChangeStatus = (id: number, status: number) => {
|
|
|
- api.server.changeServerStatus({id: id, status: status}).then((res:any) => {
|
|
|
- ElMessage.success(status?'已开启':'已关闭');
|
|
|
- fetchList();
|
|
|
- })
|
|
|
- };
|
|
|
- // 分页改变
|
|
|
- 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.keyWord)
|
|
|
- state.loading = true
|
|
|
- let params = {
|
|
|
- keyWord: props.keyWord,
|
|
|
- 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
|
|
|
- state.loading = false
|
|
|
- });
|
|
|
+ },
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const router = useRouter();
|
|
|
+ const state = reactive<TableData>({
|
|
|
+ data: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ param: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ isShowMore: true
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+ // 改变状态
|
|
|
+ const onChangeStatus = (id: number, status: number) => {
|
|
|
+ api.server.changeServerStatus({ id: id, status: status }).then((res: any) => {
|
|
|
+ ElMessage.success(status ? '已开启' : '已关闭');
|
|
|
+ fetchList();
|
|
|
+ })
|
|
|
+ };
|
|
|
+ // 分页改变
|
|
|
+ const onHandleSizeChange = (val: number) => {
|
|
|
+ state.param.pageSize = val;
|
|
|
+ fetchList()
|
|
|
+ };
|
|
|
+ // 分页改变
|
|
|
+ const onHandleCurrentChange = (val: number) => {
|
|
|
+ state.param.page = val;
|
|
|
+ fetchList()
|
|
|
+ };
|
|
|
+ // 初始化表格数据
|
|
|
+ const initTableData = () => {
|
|
|
+ fetchList()
|
|
|
+ };
|
|
|
+ // 获取数据
|
|
|
+ const fetchList = () => {
|
|
|
+ state.loading = true
|
|
|
+ let params = {
|
|
|
+ keyWord: props.keyWord,
|
|
|
+ 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
|
|
|
+ state.loading = false
|
|
|
+ });
|
|
|
|
|
|
|
|
|
- };
|
|
|
- // 删除
|
|
|
- const onRowDel = (row: TableDataForm) => {
|
|
|
- ElMessageBox.confirm(`此操作将永久删除“${row.name}”,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- api.server.deleteItem({ids: [row.id]}).then((res: any) => {
|
|
|
- fetchList()
|
|
|
- ElMessage.success('删除成功');
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- };
|
|
|
- const toDetail = (id: number) => {
|
|
|
- router.push(`/network/server/detail/${id}`)
|
|
|
- };
|
|
|
- const toEdit = (id: number) => {
|
|
|
- router.push(`/network/server/edit/${id}`)
|
|
|
- };
|
|
|
- // 监听双向绑定 keyWord 的变化
|
|
|
- watch(
|
|
|
- () => props.keyWord,
|
|
|
- // 新数据
|
|
|
- () => {
|
|
|
- fetchList()
|
|
|
- },
|
|
|
- { deep: true,
|
|
|
- immediate: true
|
|
|
- },
|
|
|
- );
|
|
|
- // 页面加载时
|
|
|
- onMounted(() => {
|
|
|
- initTableData();
|
|
|
- });
|
|
|
- return {
|
|
|
- fetchList,
|
|
|
- toDetail,
|
|
|
- toEdit,
|
|
|
- onChangeStatus,
|
|
|
- onRowDel,
|
|
|
- onHandleSizeChange,
|
|
|
- onHandleCurrentChange,
|
|
|
- ...toRefs(state),
|
|
|
- };
|
|
|
- }
|
|
|
+ };
|
|
|
+ // 删除
|
|
|
+ const onRowDel = (row: TableDataForm) => {
|
|
|
+ ElMessageBox.confirm(`此操作将永久删除“${row.name}”,是否继续?`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ api.server.deleteItem({ ids: [row.id] }).then((res: any) => {
|
|
|
+ fetchList()
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ };
|
|
|
+ const toDetail = (id: number) => {
|
|
|
+ router.push(`/network/server/detail/${id}`)
|
|
|
+ };
|
|
|
+ const toEdit = (id: number) => {
|
|
|
+ router.push(`/network/server/edit/${id}`)
|
|
|
+ };
|
|
|
+ // 监听双向绑定 keyWord 的变化
|
|
|
+ watch(
|
|
|
+ () => props.keyWord,
|
|
|
+ // 新数据
|
|
|
+ () => {
|
|
|
+ fetchList()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ },
|
|
|
+ );
|
|
|
+ // 页面加载时
|
|
|
+ onMounted(() => {
|
|
|
+ initTableData();
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ fetchList,
|
|
|
+ toDetail,
|
|
|
+ toEdit,
|
|
|
+ onChangeStatus,
|
|
|
+ onRowDel,
|
|
|
+ onHandleSizeChange,
|
|
|
+ onHandleCurrentChange,
|
|
|
+ ...toRefs(state),
|
|
|
+ };
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
::v-deep div.more-opearte-wrap {
|
|
|
- flex-direction: row;
|
|
|
- background-color: pink;
|
|
|
- // padding: 4px!important;
|
|
|
- div {
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: pink;
|
|
|
+ // padding: 4px!important;
|
|
|
+ div {
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
</style>
|