ddac-front/src/views/sdk/index.vue

<template>
  <div>
    <Breadcrumb />
    <TabFilter v-model="activeTab" :options="options" @change="handleTabChange" />
    <TableCard :data="tableData" :columns="columns" v-model:page-no="pageNo" v-model:page-size="pageSize"
      @change="handleChange" :total="total" @selection-change="handleSelectionChange">
      <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>
      </template>
      <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>
      </template>

      <template #column-status="{ row }">
        <el-tag :type="row.status === '正常' ? 'success' : 'danger'">
          {{ row.status }}
        </el-tag>
      </template>
      <template #column-noHeartbeat="{ row }">
        <el-switch v-model="row.noHeartbeat"></el-switch>
      </template>
      <template #column-enableLTS="{ row }">
        <el-switch v-model="row.enableLTS"></el-switch>
      </template>
      <template #column-autoReconnect="{ row }">
        <el-switch v-model="row.autoReconnect"></el-switch>
      </template>

      <template #column-operation="{ row }">
        <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="danger" link>删除</el-button>
      </template>
    </TableCard>
    <AddOrEdit v-model:visible="dialogForm.visible" />
  </div>
</template>

<script setup lang="ts">
import AddOrEdit from './components/AddOrEdit.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 state = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 20
})

const dialogForm = reactive({
  visible: false
})

const { pageNo, pageSize, 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'
  }
])

function handleTabChange(value: string | number) {
  console.log('切换到:', value)
}

function handleChange(page: number, size: number) {
  console.log('分页变化:', page, size)
}

function handleSelectionChange(selection: any[]) {
  selectedRows.value = selection
}

</script>

<style lang="scss" scoped></style>