jy2025-ui/src/views/business/appManage/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="请输入应用程序名称"/>
      <template #afterBtn>
        <el-button icon="Download">下载Agent</el-button>
      </template>
    </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-app-manage />
    <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 addAppManage from "./component/addAppManage.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 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 "../../model/css/css.scss";
</style>