测试计划相关接口

test-ui/src/api/test/testPlan.js

@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+const api = {
+  testPlanList: 'test/testPlan/testPlanList',
+  addTestPlan: 'test/testPlan/addPlan',
+  delTestPlan: 'test/testPlan/deletePlan'
+}
+
+export function getTestPlanList(data) {
+  return request({
+    url: api.testPlanList,
+    method: 'get',
+    params: data
+  })
+}
+
+export function addTestPlan(data) {
+  return request({
+    url: api.addTestPlan,
+    method: 'post',
+    data: data
+  })
+}
+
+export function delTestPlan(id) {
+  return request({
+    url: api.delTestPlan,
+    method: 'post',
+    data: {id}
+  })
+}

test-ui/src/router/index.js

@@ -228,6 +228,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/testplan/overview',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/test/testplan/overview'),
+        name: 'overview',
+        noCache: true,
+        meta: { title: '测试计划', activeMenu: '/testplan' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

test-ui/src/views/test/testplan/index.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部导航 -->
+    <el-row :gutter="10">
+      <el-col :span="24">
+        <el-header class="header">
+          <div class="head1">
+            <span style="font-size: 18px; font-weight: bold; margin-right: 20px;">测试计划</span>
+          </div>
+          <div class="head2">
+            <el-input placeholder="请输入测试计划名称搜索" v-model="query" class="input-with-select" clearable>
+              <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
+            </el-input>
+            <el-button
+              type="primary"
+              size="medium"
+              style="margin-right: 10px;"
+              @click="handleCollapse(!activeNames.includes('1'))"
+            >高级筛选
+            </el-button>
+            <el-button icon="el-icon-plus" type="primary" size="medium" style="margin-left: 10px;" @click="addProjectVue">
+              新建计划
+            </el-button>
+          </div>
+        </el-header>
+      </el-col>
+    </el-row>
+
+    <el-collapse v-model="activeNames">
+      <el-collapse-item class="collapse-search" name="1">
+        <el-form :inline="true" ref="queryForm" :model="queryParams" label-width="110px">
+          <el-row :gutter="10" class="high-search">
+            <el-form-item label="状态">
+              <el-select v-model="queryParams.status" placeholder="请选择" clearable>
+                <simple-options :options="dict.type.status"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="负责人">
+              <el-select v-model="queryParams.manager" placeholder="请选择" clearable filterable>
+                <simple-options :options="managerList"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="开始时间范围">
+              <el-date-picker
+                v-model="queryParams.startTime"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              ></el-date-picker>
+            </el-form-item>
+          </el-row>
+          <el-row :gutter="10" class="high-search">
+            <el-col :span="12">
+              <el-form-item label="截止时间范围">
+                <el-date-picker
+                  v-model="queryParams.endTime"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                ></el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" style="text-align: right">
+              <el-form-item>
+                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleAdvancedSearch">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetAdvancedFilter">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
+
+    <el-row :gutter="10" class="mb8" style="padding-top: 20px">
+      <right-toolbar @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 标签页 -->
+    <el-tabs v-model="activeTab" @tab-click="handleTabClick" style="margin-top: 10px;">
+      <el-Table v-loading="loading" :data="list" @row-click="handleRowClick">
+        <el-table-column prop="name" label="计划名称" align="left"/>
+        <el-table-column prop="version" label="测试进度" align="left">
+          <template slot-scope="scope">
+            <el-row :gutter="10">
+              <el-col :span="24">
+                <el-row :gutter="10" class="label-progress">
+                  <el-col :span="10" class="label-text">冒烟测试</el-col>
+                  <el-col :span="14">
+                    <el-popover
+                      placement="top-start"
+                      trigger="hover"
+                      content="暂无关联用例"
+                    >
+                      <el-progress slot="reference" :percentage="80" :show-text="false"></el-progress>
+                    </el-popover>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="label-progress">
+                  <el-col :span="10" class="label-text">功能测试</el-col>
+                  <el-col :span="14">
+                    <el-progress :percentage="scope.row.functionalTestProgress" :show-text="false"></el-progress>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="label-progress">
+                  <el-col :span="10" class="label-text">回归测试</el-col>
+                  <el-col :span="14">
+                    <el-progress :percentage="scope.row.regressionTestProgress" :show-text="false"></el-progress>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="label-progress">
+                  <el-col :span="10" class="label-text">准生产验证</el-col>
+                  <el-col :span="14">
+                    <el-progress :percentage="scope.row.preProductionValidationProgress" :show-text="false"></el-progress>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="label-progress">
+                  <el-col :span="10" class="label-text">生产验证</el-col>
+                  <el-col :span="14">
+                    <el-progress :percentage="scope.row.productionValidationProgress" :show-text="false"></el-progress>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" align="center">
+          <template #default="{ row }">
+            <dict-tag :options="dict.type.status" :value="row.status"/>
+          </template>
+        </el-table-column>
+        <el-table-column prop="timeStartToEnd" label="起止时间" align="left">
+          <template slot-scope="scope">
+            <div>
+              开始：{{ scope.row.startPlanTime }}
+            </div>
+            <div>
+              截止：{{ scope.row.endPlanTime }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="manager" label="负责人" align="left"/>
+        <el-table-column prop="defectNum" label="缺陷数" align="left"/>
+        <el-table-column label="操作" align="left" fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row.id)">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-Table>
+    </el-tabs>
+
+    <!-- 操作按钮 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog title="新建计划" :visible.sync="addOpen" width="40%">
+      <el-form ref="form" :rules="rules" :model="form" label-width="110px" label-position="right">
+        <el-form-item label="测试计划编码" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="计划名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="起止时间" prop="timeStartToEnd">
+          <el-date-picker
+            v-model="form.timeStartToEnd"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="关联需求" prop="projectId">
+          <el-select v-model="form.projectId" placeholder="请选择需求" clearable filterable>
+            <Simple-options :options="projectList"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="负责人" prop="manager">
+          <el-select v-model="form.manager" style="width: 50%" placeholder="请选择负责人" clearable filterable>
+            <Simple-options :options="managerList"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addOpen = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addProject, delProject, getProjectList, managerList, updateProject} from "@/api/test/project";
+import SimpleOptions from "@/components/FormItem/option/SimpleOptions.vue";
+import {addTestPlan, delTestPlan, getTestPlanList} from "@/api/test/testPlan";
+
+export default {
+  name: 'testplan',
+  components: {SimpleOptions},
+  dicts: ['priority_level', 'project_source', 'project_type', 'status'],
+  data() {
+    return {
+      query: '',
+      rules: {
+        serialNumber: [{required: true, message: '请输入需求ID', trigger: 'blur'}],
+        name: [{required: true, message: '请输入需求名称', trigger: 'blur'}],
+        manager: [{required: true, message: '请选择负责人', trigger: 'blur'}],
+        timeStartToEnd: [{required: true, message: '请选择起止时间', trigger: 'blur'}],
+        projectId: [{required: true, message: '请选择关联需求', trigger: 'blur'}],
+      },
+      searchKeyword: '',
+      activeTab: 'all',
+      total: 0,
+      list: [],
+      title: '',
+      // 遮罩层
+      loading: false,
+      editSubmitLoading: false,
+      submitLoading: false,
+      //新增弹窗
+      addOpen: false,
+      //编辑弹窗
+      editOpen: false,
+      managerList: [],
+      projectList: [],
+      queryParams: {
+        status: '',
+        manager: '',
+        name: '',
+        startTime: [],
+        endTime: [],
+        pageNum: 1,
+        pageSize: 10,
+      },
+      activeNames: [], // 控制 collapse 的展开状态
+      form: {
+        serialNumber: '',
+        name: '',
+        manager: '',
+        projectId: '',
+        timeStartToEnd: [],
+        version: ''
+      },
+      editForm: {},
+    };
+  },
+  created() {
+    this.getList();
+    this.getManagerList();
+    this.ProjectList();
+  },
+  computed: {},
+  methods: {
+    handleRowClick(row) {
+      this.$tab.openPage(`测试计划概览`, "/testplan/overview", {id: row.id});
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab.name;
+      this.getList();
+    },
+    // 获取负责人列表
+    getManagerList() {
+      managerList()
+      .then((list) => {
+        this.managerList = (list.rows || []).map((e) => ({value: e.userId, label: e.userName}))
+      })
+    },
+    // 获取需求列表
+    ProjectList() {
+      getProjectList()
+      .then((list) => {
+        this.projectList = (list.rows || []).map((e) => ({value: e.id, label: e.name}))
+      })
+    },
+    // 搜索
+    handleQuery() {
+      this.queryParams.name = this.query;
+      this.getList();
+    },
+    addProjectVue() {
+      this.addOpen = true;
+      this.reset();
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true
+      const [startPlanTime, endPlanTime] = this.queryParams.startTime || []
+      const [startDeadline, endDeadline] = this.queryParams.endTime || []
+      const queryParams = {
+        ...this.queryParams,
+        startPlanTime,
+        endPlanTime,
+        startDeadline,
+        endDeadline,
+      }
+      getTestPlanList(queryParams).then(list => {
+        this.list = list.rows.map(item => ({
+          ...item,
+          startPlanTime: item.startTime, // 确保字段名正确
+          endPlanTime: item.endTime }));
+        this.total = list.total;
+        this.loading = false
+      })
+    },
+    // 表单重置
+    reset() {
+      const form = {}
+      Object.keys(this.form).forEach((key) => {
+        form[key] = ''
+      })
+      this.form = form
+      this.resetForm('form')
+    },
+    // 展开/折叠
+    handleCollapse(val) {
+      this.activeNames = val ? ['1'] : [];
+    },
+    handleAdvancedSearch() {
+      // 高级筛选条件搜索
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetAdvancedFilter() {
+      // 重置高级筛选条件
+      this.resetForm('queryFrom')
+      this.handleAdvancedSearch()
+    },
+    submitForm() {
+      const [startTime, endTime] = this.form.timeStartToEnd || []
+      const form = {
+        ...this.form,
+        startTime,
+        endTime,
+      }
+      this.$refs?.form.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        this.submitLoading = true
+        addTestPlan(form)
+        .then(() => {
+          this.$message.success('添加成功')
+          this.addOpen = false
+          this.getList()
+        })
+        .catch(() => {
+          this.$message.error('添加失败')
+        })
+        .finally(() => {
+          this.submitLoading = false
+        })
+      })
+    },
+    handleDelete(id) {
+      this.$modal.confirm('是否确认删除测试计划？').then(function () {
+        return delTestPlan(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      });
+    },
+    editSubmitForm() {
+      const form = {
+        ...this.editForm,
+      }
+      this.$refs?.editForm.validate((valid) => {
+        if (!valid) {
+          return
+        }
+      })
+      this.editSubmitLoading = true
+      updateProject(form)
+      .then(() => {
+        this.$message.success('编辑成功')
+        this.editSubmitLoading = false
+        this.editOpen = false
+        this.getList()
+      })
+      .catch(() => {
+        this.$message.error('编辑失败')
+        this.editSubmitLoading = false
+      })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-with-select {
+  background-color: #ffffff;
+  width: 300px;
+}
+
+.collapse-search {
+  ::v-deep .el-collapse-item__header {
+    display: none;
+  }
+}
+
+.high-search {
+  padding-top: 40px;
+  background-color: rgb(248, 248, 249);
+}
+
+.header {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.head1 {
+  display: flex;
+  align-items: center;
+}
+
+.head2 {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+  column-gap: 10px;
+}
+
+.el-dialog .el-form {
+  width: 100%;
+}
+
+.el-dialog .el-form-item {
+  margin-bottom: 20px;
+}
+
+.el-dialog .el-textarea {
+  width: 100%;
+}
+
+.basic-information {
+  background-color: rgb(248, 248, 249) !important;
+}
+
+.label-text {
+  display: flex;
+  align-items: flex-start;
+}
+
+.label-progress {
+  display: flex;
+  align-items: center;
+}
+</style>

test-ui/src/views/test/testplan/overview.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="app-container">
+    <!-- 页面标题 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item>测试计划</el-breadcrumb-item>
+          <el-breadcrumb-item>概览</el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-col>
+    </el-row>
+
+    <!-- 测试计划详情 -->
+    <el-card class="box-card">
+
+    </el-card>
+
+    <!-- 测试用例 -->
+    <el-card class="box-card">
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+import LineChart from '@/views/dashboard/LineChart';
+
+export default {
+  name: 'overview',
+  components: {
+    LineChart,
+  },
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    // 可以在这里添加更多的方法来处理数据或事件
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+</style>