|
@@ -2,21 +2,34 @@
|
|
|
<div>
|
|
<div>
|
|
|
<Breadcrumb />
|
|
<Breadcrumb />
|
|
|
<TabFilter v-model="activeTab" :options="options" @change="handleTabChange" />
|
|
<TabFilter v-model="activeTab" :options="options" @change="handleTabChange" />
|
|
|
- <TableCard :data="tableData" :columns="columns" v-model:page-no="queryParams.pageNo"
|
|
|
|
|
- v-model:page-size="queryParams.pageSize" @change="handleChange" :total="total"
|
|
|
|
|
- @selection-change="handleSelectionChange">
|
|
|
|
|
|
|
+ <TableCard
|
|
|
|
|
+ v-model:page-no="queryParams.pageNo"
|
|
|
|
|
+ v-model:page-size="queryParams.pageSize"
|
|
|
|
|
+ :data="tableData"
|
|
|
|
|
+ :columns="columns"
|
|
|
|
|
+ :total="total"
|
|
|
|
|
+ @change="handleChange"
|
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
|
+ >
|
|
|
<template #toolbar-left>
|
|
<template #toolbar-left>
|
|
|
- <el-button type="primary" :icon="CirclePlus" size="large" class="is-solid"
|
|
|
|
|
- @click="dialogForm.visible = true">添加实例</el-button>
|
|
|
|
|
- <el-button type="primary" disabled :icon="Delete" size="large" class="is-solid">删除</el-button>
|
|
|
|
|
- <el-button type="primary" disabled :icon="MoreFilled" size="large" class="is-solid">更多</el-button>
|
|
|
|
|
- <el-button type="primary" :icon="Refresh" size="large" class="is-solid">刷新</el-button>
|
|
|
|
|
|
|
+ <el-button :icon="CirclePlus" size="large" @click="dialogForm.visible = true"
|
|
|
|
|
+ >添加实例</el-button
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-button disabled :icon="Delete" size="large">删除</el-button>
|
|
|
|
|
+ <el-button disabled :icon="MoreFilled" size="large">更多</el-button>
|
|
|
|
|
+ <el-button :icon="Refresh" size="large">刷新</el-button>
|
|
|
</template>
|
|
</template>
|
|
|
<template #toolbar-right>
|
|
<template #toolbar-right>
|
|
|
- <el-input :prefix-icon="Search" v-model="searchKeyword" size="large" placeholder="请输入关键词搜索" style="width: 300px"
|
|
|
|
|
- clearable />
|
|
|
|
|
- <el-button :icon="Search" type="primary" class="is-solid" size="large">搜索</el-button>
|
|
|
|
|
- <el-button :icon="Upload" type="primary" class="is-solid" size="large">导出</el-button>
|
|
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="searchKeyword"
|
|
|
|
|
+ :prefix-icon="Search"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ placeholder="请输入关键词搜索"
|
|
|
|
|
+ style="width: 300px"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-button :icon="Search" size="large">搜索</el-button>
|
|
|
|
|
+ <el-button :icon="Upload" size="large">导出</el-button>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<template #column-status="{ row }">
|
|
<template #column-status="{ row }">
|
|
@@ -35,7 +48,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<template #column-operation="{ row }">
|
|
<template #column-operation="{ row }">
|
|
|
- <el-button @click="btnClickHandler('detail', row)" type="primary" link>管理详情</el-button>
|
|
|
|
|
|
|
+ <el-button type="primary" link @click="btnClickHandler('detail', row)">管理详情</el-button>
|
|
|
<el-button type="primary" link>升级</el-button>
|
|
<el-button type="primary" link>升级</el-button>
|
|
|
<el-button type="primary" link>编辑</el-button>
|
|
<el-button type="primary" link>编辑</el-button>
|
|
|
<el-button type="warning" link>续费</el-button>
|
|
<el-button type="warning" link>续费</el-button>
|
|
@@ -47,97 +60,96 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import SDKModal from './components/SDKModal.vue'
|
|
|
|
|
-import TabFilter from '@/components/TabFilter/index.vue'
|
|
|
|
|
-import TableCard from '@/components/TableCard/index.vue'
|
|
|
|
|
-import { CirclePlus, Delete, MoreFilled, Refresh, Search, Upload } from '@element-plus/icons-vue'
|
|
|
|
|
-
|
|
|
|
|
-const activeTab = ref('all')
|
|
|
|
|
-const searchKeyword = ref('')
|
|
|
|
|
-const selectedRows = ref<any[]>([])
|
|
|
|
|
-
|
|
|
|
|
-const router = useRouter()
|
|
|
|
|
-
|
|
|
|
|
-const state = reactive({
|
|
|
|
|
- queryParams: {
|
|
|
|
|
- pageNo: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- searchKeyword: '',
|
|
|
|
|
- },
|
|
|
|
|
- total: 20
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-const dialogForm = reactive({
|
|
|
|
|
- visible: false
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-const { queryParams, total } = toRefs(state)
|
|
|
|
|
-
|
|
|
|
|
-const options = [
|
|
|
|
|
- { label: '全部', value: 'all' },
|
|
|
|
|
- { label: '正常', value: 'normal' },
|
|
|
|
|
- { label: '即将到期', value: 'expiring' },
|
|
|
|
|
- { label: '禁用', value: 'disabled' }
|
|
|
|
|
-]
|
|
|
|
|
-
|
|
|
|
|
-const columns = [
|
|
|
|
|
- { type: 'selection' as const, width: 55 },
|
|
|
|
|
- { prop: 'name', label: '实例唯一标识', minWidth: 120 },
|
|
|
|
|
- { prop: 'userId', label: '所属用户', },
|
|
|
|
|
- { prop: 'address', label: '实例名称', },
|
|
|
|
|
- { prop: 'expireTime', label: '到期时间', },
|
|
|
|
|
- { prop: 'instanceType', label: '实例类型', },
|
|
|
|
|
- { prop: 'status', label: '状态', },
|
|
|
|
|
- { prop: 'noHeartbeat', label: '无心跳通讯', minWidth: 120 },
|
|
|
|
|
- { prop: 'noDataTimeout', label: '无数据超时时间', minWidth: 130 },
|
|
|
|
|
- { prop: 'enableLTS', label: '是否启用LTS', minWidth: 120 },
|
|
|
|
|
- { prop: 'autoReconnect', label: '断线自动重连', minWidth: 120 },
|
|
|
|
|
- { prop: 'maxConcurrent', label: '客户端最大并发数', minWidth: 150 },
|
|
|
|
|
- { prop: 'createTime', label: '创建时间', minWidth: 150 },
|
|
|
|
|
- { prop: 'operation', label: '操作', minWidth: 280, isAction: true }
|
|
|
|
|
-]
|
|
|
|
|
-
|
|
|
|
|
-const tableData = ref([
|
|
|
|
|
- {
|
|
|
|
|
- name: '实例1',
|
|
|
|
|
- userId: '用户1',
|
|
|
|
|
- address: '实例1',
|
|
|
|
|
- expireTime: '2023-12-31',
|
|
|
|
|
- instanceType: '普通实例',
|
|
|
|
|
- status: '正常',
|
|
|
|
|
- noHeartbeat: true,
|
|
|
|
|
- noDataTimeout: '10秒',
|
|
|
|
|
- enableLTS: true,
|
|
|
|
|
- autoReconnect: false,
|
|
|
|
|
- maxConcurrent: '100',
|
|
|
|
|
- createTime: '2023-01-01 10:00:00'
|
|
|
|
|
- }
|
|
|
|
|
-])
|
|
|
|
|
-
|
|
|
|
|
-const btnClickHandler = (type: string, row: any) => {
|
|
|
|
|
- const typeMap: Record<string, () => void> = {
|
|
|
|
|
- detail() {
|
|
|
|
|
- router.push({
|
|
|
|
|
- path: "/sdk/detail",
|
|
|
|
|
- query: row
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ import SDKModal from './components/SDKModal.vue'
|
|
|
|
|
+ import TabFilter from '@/components/TabFilter/index.vue'
|
|
|
|
|
+ import TableCard from '@/components/TableCard/index.vue'
|
|
|
|
|
+ import { CirclePlus, Delete, MoreFilled, Refresh, Search, Upload } from '@element-plus/icons-vue'
|
|
|
|
|
+
|
|
|
|
|
+ const activeTab = ref('all')
|
|
|
|
|
+ const searchKeyword = ref('')
|
|
|
|
|
+ const selectedRows = ref<any[]>([])
|
|
|
|
|
+
|
|
|
|
|
+ const router = useRouter()
|
|
|
|
|
+
|
|
|
|
|
+ const state = reactive({
|
|
|
|
|
+ queryParams: {
|
|
|
|
|
+ pageNo: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ searchKeyword: '',
|
|
|
|
|
+ },
|
|
|
|
|
+ total: 20,
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ const dialogForm = reactive({
|
|
|
|
|
+ visible: false,
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ const { queryParams, total } = toRefs(state)
|
|
|
|
|
+
|
|
|
|
|
+ const options = [
|
|
|
|
|
+ { label: '全部', value: 'all' },
|
|
|
|
|
+ { label: '正常', value: 'normal' },
|
|
|
|
|
+ { label: '即将到期', value: 'expiring' },
|
|
|
|
|
+ { label: '禁用', value: 'disabled' },
|
|
|
|
|
+ ]
|
|
|
|
|
+
|
|
|
|
|
+ const columns = [
|
|
|
|
|
+ { type: 'selection' as const, width: 55 },
|
|
|
|
|
+ { prop: 'name', label: '实例唯一标识', minWidth: 120 },
|
|
|
|
|
+ { prop: 'userId', label: '所属用户' },
|
|
|
|
|
+ { prop: 'address', label: '实例名称' },
|
|
|
|
|
+ { prop: 'expireTime', label: '到期时间' },
|
|
|
|
|
+ { prop: 'instanceType', label: '实例类型' },
|
|
|
|
|
+ { prop: 'status', label: '状态' },
|
|
|
|
|
+ { prop: 'noHeartbeat', label: '无心跳通讯', minWidth: 120 },
|
|
|
|
|
+ { prop: 'noDataTimeout', label: '无数据超时时间', minWidth: 130 },
|
|
|
|
|
+ { prop: 'enableLTS', label: '是否启用LTS', minWidth: 120 },
|
|
|
|
|
+ { prop: 'autoReconnect', label: '断线自动重连', minWidth: 120 },
|
|
|
|
|
+ { prop: 'maxConcurrent', label: '客户端最大并发数', minWidth: 150 },
|
|
|
|
|
+ { prop: 'createTime', label: '创建时间', minWidth: 150 },
|
|
|
|
|
+ { prop: 'operation', label: '操作', minWidth: 280, isAction: true },
|
|
|
|
|
+ ]
|
|
|
|
|
+
|
|
|
|
|
+ const tableData = ref([
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '实例1',
|
|
|
|
|
+ userId: '用户1',
|
|
|
|
|
+ address: '实例1',
|
|
|
|
|
+ expireTime: '2023-12-31',
|
|
|
|
|
+ instanceType: '普通实例',
|
|
|
|
|
+ status: '正常',
|
|
|
|
|
+ noHeartbeat: true,
|
|
|
|
|
+ noDataTimeout: '10秒',
|
|
|
|
|
+ enableLTS: true,
|
|
|
|
|
+ autoReconnect: false,
|
|
|
|
|
+ maxConcurrent: '100',
|
|
|
|
|
+ createTime: '2023-01-01 10:00:00',
|
|
|
},
|
|
},
|
|
|
|
|
+ ])
|
|
|
|
|
+
|
|
|
|
|
+ const btnClickHandler = (type: string, row: any) => {
|
|
|
|
|
+ const typeMap: Record<string, () => void> = {
|
|
|
|
|
+ detail() {
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: '/sdk/detail',
|
|
|
|
|
+ query: row,
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+ typeMap[type]?.()
|
|
|
}
|
|
}
|
|
|
- typeMap[type]?.()
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-function handleTabChange(value: string | number) {
|
|
|
|
|
- console.log('切换到:', value)
|
|
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
-function handleChange(page: number, size: number) {
|
|
|
|
|
- console.log('分页变化:', page, size)
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ function handleTabChange(value: string | number) {
|
|
|
|
|
+ console.log('切换到:', value)
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-function handleSelectionChange(selection: any[]) {
|
|
|
|
|
- selectedRows.value = selection
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ function handleChange(page: number, size: number) {
|
|
|
|
|
+ console.log('分页变化:', page, size)
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ function handleSelectionChange(selection: any[]) {
|
|
|
|
|
+ selectedRows.value = selection
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
|
<style lang="scss" scoped></style>
|