jy2025-ui/src/views/model/definition/index.vue

<template>
  <div class="app-container model-container">
    <search :addText="addText" @handle="handleSearch">
      <el-input v-model="params.name" style="width: 240px;margin-right: 10px" placeholder="请输入指标名称"/>
      <el-select v-model="params.type" style="margin-right: 10px">
        <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value"/>
      </el-select>
    </search>
    <div class="table-content">
      <el-table
          ref="multipleTableRef"
          :data="tableData"
          border
          style="width: 100%"
      >
        <el-table-column type="index" width="55" align="center" label="#"/>
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120"/>
        <el-table-column property="address" label="Address"/>
        <el-table-column label="edit" width="120">
          <template #default="scope">
            <el-button link type="primary">编辑</el-button>
            <el-button link type="info">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination :total="total" :size="params.size" @size-change="sizeChange"/>
  </div>

  <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="600"
      top="30vh"
  >
    <add-definition />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          提交
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import search from "../../component/search.vue"
import pagination from "../../component/pagination.vue"
import addDefinition from "./component/addDefinition.vue"
import {reactive, ref} from "vue";
import {ElTable} from "element-plus"

const title = ref<string>('添加指标')
const dialogVisible = ref<boolean>(false)
const total = ref<number>(100)
const params = reactive({
  name: '',
  page: 1,
  size: 10,
  type: 0
})

const typeOption = [
  {name: "全部", value: 0},
  {name: "CPU指标", value: 1},
  {name: "内存指标", value: 2},
  {name: "磁盘指标", value: 3}
]

const addText = "新建指标"

const handleSearch = (event) => {
  switch (event) {
    case "add":
      dialogVisible.value = true
      title.value = "新建指标定义"
      break;
  }
}

interface User {
  date: string
  name: string
  address: string
}

const sizeChange = (event) => {

}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>
<style lang="scss">
@import "../css/css.scss";
</style>