test-case-app/src/views/test/index.vue

<template>
  <div class="table-box">
    <div class="card table-search">
      <el-form :model="formInline" label-width="120">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="用例名称">
              <el-input v-model="formInline.user" placeholder="请输入用例名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="用例类型">
              <el-select v-model="formInline.region" placeholder="请选择类型" clearable>
                <el-option label="故障注入" value="1" />
                <el-option label="普通测试" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-card table-main">
      <div class="table-header">
        <div class="header-button-lf">
          <el-button type="primary" icon="CirclePlus" @click="openDialog('新增')"> 新增 </el-button>
          <el-button type="danger" icon="Delete" plain> 删除 </el-button>
        </div>
      </div>
      <el-table :data="tableData" border ref="tableRef" show-overflow-tooltip>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="id" label="用例编号" width="300" />
        <el-table-column prop="name" label="用例名称" width="180" />
        <el-table-column prop="type" label="用例类型" width="180" />

        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="openDialog('编辑', row)"
              >详情
            </el-button>
            <el-button link type="primary" size="small" @click="detail(row)">流程查看</el-button>
            <el-button link type="primary" size="small" @click="designFlow(row)">
              流程设计
            </el-button>
            <el-button link type="primary" size="small" @click="openDialog('编辑', row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div> -->
      <!-- 分页组件 -->
      <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <!-- </div> -->
    <AddDialog ref="dialogRef" />
  </div>
</template>
<script setup lang="ts">
import { CaseVO } from '@/api/interface/case'
import AddDialog from './components/index.vue'
import data from '../data'
const router = useRouter()
const tableRef = ref()
const pageable = {
  // 当前页数
  pageNum: 1,
  // 每页显示条数
  pageSize: 10,
  // 总条数
  total: 0
}
const formInline = reactive({
  user: '',
  region: '',
  date: ''
})

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const handleSizeChange = (_val: number) => {}

/**
 * @description 当前页改变
 * @param {Number} val 当前页
 * @return void
 * */
const handleCurrentChange = (_val: number) => {}

const onSubmit = () => {
  console.log('submit!')
}
const tableData: CaseVO[] = data.list

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof AddDialog> | null>(null)
const openDialog = (title: string, row: Partial<CaseVO> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === '查看'
  }
  dialogRef.value?.acceptParams(params)
}

const designFlow = (row: Partial<CaseVO> = {}) => {
  router.push(`/flow/${row.id}`)
}
const detail = (row: Partial<CaseVO> = {}) => {
  router.push(`/detail/${row.id}`)
}
</script>
<style lang="scss" scoped></style>