Merge remote-tracking branch 'origin/master'
# Conflicts: # test-test/src/main/java/com/test/test/domain/TestTask.java # test-test/src/main/java/com/test/test/mapper/TestTaskMapper.java # test-test/src/main/java/com/test/test/service/ITestTaskService.java # test-test/src/main/java/com/test/test/service/impl/TestTaskServiceImpl.java # test-test/src/main/resources/mapper/test/TestTaskMapper.xml
This commit is contained in:
liangdaliang
@@ -4,7 +4,7 @@ import java.util.List;
|
||||
|
||||
import com.test.common.utils.DateUtils;
|
||||
import com.test.test.domain.qo.IDQO;
|
||||
import com.test.test.domain.qo.TestCaseListQO;
|
||||
import com.test.test.domain.qo.GroupIdQO;
|
||||
import jakarta.annotation.Resource;
|
||||
import org.springframework.validation.annotation.Validated;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
@@ -33,7 +33,7 @@ public class TestCaseController extends BaseController {
|
||||
* 查询用例列表
|
||||
*/
|
||||
@GetMapping("/list")
|
||||
public TableDataInfo list(@Validated TestCaseListQO qo) {
|
||||
public TableDataInfo list(@Validated GroupIdQO qo) {
|
||||
startPage();
|
||||
List<TestCase> list = testCaseService.selectTestCaseList(qo);
|
||||
return getDataTable(list);
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
package com.test.test.controller;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
import com.test.common.utils.DateUtils;
|
||||
import com.test.test.domain.qo.GroupIdQO;
|
||||
import com.test.test.domain.qo.IDQO;
|
||||
import jakarta.annotation.Resource;
|
||||
import jakarta.servlet.http.HttpServletResponse;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.PutMapping;
|
||||
import org.springframework.web.bind.annotation.DeleteMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import com.test.common.annotation.Log;
|
||||
import com.test.common.core.controller.BaseController;
|
||||
import com.test.common.core.domain.AjaxResult;
|
||||
import com.test.common.enums.BusinessType;
|
||||
import com.test.test.domain.TestTask;
|
||||
import com.test.test.service.ITestTaskService;
|
||||
import com.test.common.utils.poi.ExcelUtil;
|
||||
import com.test.common.core.page.TableDataInfo;
|
||||
|
||||
/**
|
||||
* 自动化测试Controller
|
||||
*/
|
||||
@RestController
|
||||
@RequestMapping("/test/task")
|
||||
public class TestTaskController extends BaseController {
|
||||
@Resource
|
||||
private ITestTaskService testTaskService;
|
||||
|
||||
/**
|
||||
* 查询自动化测试列表
|
||||
*/
|
||||
@GetMapping("/list")
|
||||
public TableDataInfo list(GroupIdQO qo) {
|
||||
startPage();
|
||||
List<TestTask> list = testTaskService.selectTestTaskList(qo);
|
||||
return getDataTable(list);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取自动化测试详细信息
|
||||
*/
|
||||
@PostMapping(value = "/detail")
|
||||
public AjaxResult getInfo(@RequestBody IDQO qo) {
|
||||
return success(testTaskService.selectTestTaskById(qo.getId()));
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增自动化测试
|
||||
*/
|
||||
@Log(title = "自动化测试", businessType = BusinessType.INSERT)
|
||||
@PostMapping("/add")
|
||||
public AjaxResult add(@RequestBody TestTask testTask) {
|
||||
testTask.setCreateBy(getLoginUser().getUsername());
|
||||
testTask.setCreateTime(DateUtils.getNowDate());
|
||||
testTask.setStatus(0);
|
||||
return toAjax(testTaskService.insertTestTask(testTask));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改自动化测试
|
||||
*/
|
||||
@Log(title = "自动化测试", businessType = BusinessType.UPDATE)
|
||||
@PostMapping("/edit")
|
||||
public AjaxResult edit(@RequestBody TestTask testTask) {
|
||||
return toAjax(testTaskService.updateTestTask(testTask));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除自动化测试
|
||||
*/
|
||||
@Log(title = "自动化测试", businessType = BusinessType.DELETE)
|
||||
@PostMapping("/del")
|
||||
public AjaxResult remove(@RequestBody IDQO qo) {
|
||||
return toAjax(testTaskService.deleteTestTaskById(qo.getId()));
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import jakarta.validation.constraints.NotNull;
|
||||
import lombok.Data;
|
||||
|
||||
@Data
|
||||
public class TestCaseListQO {
|
||||
public class GroupIdQO {
|
||||
@NotNull(message = "父节点id不能为空")
|
||||
private Long groupId;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
package com.test.test.mapper;
|
||||
|
||||
import com.test.test.domain.TestCase;
|
||||
import com.test.test.domain.qo.TestCaseListQO;
|
||||
import com.test.test.domain.qo.GroupIdQO;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@@ -18,7 +18,7 @@ public interface TestCaseMapper
|
||||
/**
|
||||
* 查询用例列表
|
||||
*/
|
||||
List<TestCase> selectTestCaseList(TestCaseListQO qo);
|
||||
List<TestCase> selectTestCaseList(GroupIdQO qo);
|
||||
|
||||
/**
|
||||
* 新增用例
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
package com.test.test.service;
|
||||
|
||||
import com.test.test.domain.TestCase;
|
||||
import com.test.test.domain.qo.TestCaseListQO;
|
||||
import com.test.test.domain.qo.GroupIdQO;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@@ -27,7 +27,7 @@ public interface ITestCaseService
|
||||
* @param qo 用例
|
||||
* @return 用例集合
|
||||
*/
|
||||
public List<TestCase> selectTestCaseList(TestCaseListQO qo);
|
||||
public List<TestCase> selectTestCaseList(GroupIdQO qo);
|
||||
|
||||
/**
|
||||
* 新增用例
|
||||
|
||||
@@ -68,7 +68,7 @@ public class TestCaseServiceImpl implements ITestCaseService
|
||||
* @return 用例
|
||||
*/
|
||||
@Override
|
||||
public List<TestCase> selectTestCaseList(TestCaseListQO qo) {
|
||||
public List<TestCase> selectTestCaseList(GroupIdQO qo) {
|
||||
return testCaseMapper.selectTestCaseList(qo);
|
||||
}
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
from test_case
|
||||
</sql>
|
||||
|
||||
<select id="selectTestCaseList" parameterType="TestCaseListQO" resultMap="TestCaseResult">
|
||||
<select id="selectTestCaseList" parameterType="GroupIdQO" resultMap="TestCaseResult">
|
||||
<include refid="selectTestCaseVo"/>
|
||||
<where>
|
||||
group_id = #{groupId}
|
||||
|
||||
BIN
test-ui/src/assets/images/header.png
Normal file
BIN
test-ui/src/assets/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -62,7 +62,7 @@ export default {
|
||||
});
|
||||
},
|
||||
handleAdd() {
|
||||
this.$prompt('请输入名称', '提示', {
|
||||
this.$prompt('请输入名称', '新增', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /^(?!\s*$).+/,
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
});
|
||||
},
|
||||
handleRowClick(row) {
|
||||
this.$tab.openPage("用例 - " + row.name, "/case/detail", {id: row.id});
|
||||
this.$tab.openPage(`用例[${row.name}]`, "/case/detail", {id: row.id});
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$modal.confirm('是否确认删除用例？').then(function () {
|
||||
|
||||
18
test-ui/src/views/test/task/edit/clickOutside.js
Normal file
18
test-ui/src/views/test/task/edit/clickOutside.js
Normal file
@@ -0,0 +1,18 @@
|
||||
// clickOutside.js
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
el.clickOutsideEvent = function (event) {
|
||||
// 检查点击事件的目标元素是否是绑定指令的元素或其子元素
|
||||
if (!(el === event.target || el.contains(event.target))) {
|
||||
// 如果不是，则调用传递给指令的方法
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
};
|
||||
// 添加事件监听器
|
||||
document.body.addEventListener("click", el.clickOutsideEvent);
|
||||
},
|
||||
unbind(el) {
|
||||
// 移除事件监听器
|
||||
document.body.removeEventListener("click", el.clickOutsideEvent);
|
||||
},
|
||||
};
|
||||
256
test-ui/src/views/test/task/edit/executionRecord.vue
Normal file
256
test-ui/src/views/test/task/edit/executionRecord.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="button">
|
||||
<el-button type="primary" icon="el-icon-video-play">搜索</el-button>
|
||||
<i class="el-icon-setting"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="refresh">
|
||||
<div class="refresh-icon">
|
||||
<i class="el-icon-refresh"></i>
|
||||
<span>刷新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-instance">
|
||||
<div>定时任务执行记录</div>
|
||||
<lineChart />
|
||||
</div>
|
||||
<div class="chart-instance">
|
||||
<div class="trend-chart">
|
||||
<span>覆盖率趋势图</span>
|
||||
<div>
|
||||
<span class="select">选择应用</span>
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<lineChartCover />
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="triggerTime" label="触发时间"> </el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间"> </el-table-column>
|
||||
<el-table-column prop="triggerMethod" label="触发方式">
|
||||
</el-table-column>
|
||||
<el-table-column prop="environment" label="执行环境"> </el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<div class="status-cell">
|
||||
<span class="status-icon success"></span>
|
||||
<span class="status-text">{{ scope.row.status }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发送状态">
|
||||
<template slot-scope="scope">
|
||||
<div class="status-cell">
|
||||
<span class="status-icon pending"></span>
|
||||
<span class="status-text">{{ scope.row.sendStatus }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="executionTime" label="执行耗时">
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" type="text" size="small"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button type="text" size="small">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineChart from "./lineChart.vue";
|
||||
import lineChartCover from "./lineChartCover.vue";
|
||||
// import executiveReport from "./executiveReport.vue";
|
||||
export default {
|
||||
components: {
|
||||
lineChart,
|
||||
lineChartCover,
|
||||
// executiveReport,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
options: [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "黄金糕",
|
||||
},
|
||||
{
|
||||
value: "选项2",
|
||||
label: "双皮奶",
|
||||
},
|
||||
{
|
||||
value: "选项3",
|
||||
label: "蚵仔煎",
|
||||
},
|
||||
{
|
||||
value: "选项4",
|
||||
label: "龙须面",
|
||||
},
|
||||
{
|
||||
value: "选项5",
|
||||
label: "北京烤鸭",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
triggerTime: "2025-02-19 10:00:00",
|
||||
startTime: "2025-02-29 10:00:00",
|
||||
triggerMethod: "定时",
|
||||
environment: "中移商业保理平台",
|
||||
status: "成功",
|
||||
sendStatus: "未发送",
|
||||
executionTime: "111s",
|
||||
},
|
||||
{
|
||||
triggerTime: "2025-02-19 10:00:00",
|
||||
startTime: "2025-02-29 10:00:00",
|
||||
triggerMethod: "定时",
|
||||
environment: "中移商业保理平台",
|
||||
status: "成功",
|
||||
sendStatus: "未发送",
|
||||
executionTime: "111s",
|
||||
},
|
||||
{
|
||||
triggerTime: "2025-02-19 10:00:00",
|
||||
startTime: "2025-02-29 10:00:00",
|
||||
triggerMethod: "定时",
|
||||
environment: "中移商业保理平台",
|
||||
status: "成功",
|
||||
sendStatus: "未发送",
|
||||
executionTime: "111s",
|
||||
},
|
||||
// 可以添加更多数据
|
||||
],
|
||||
currentPage: 1,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(row) {
|
||||
this.$router.push({
|
||||
name: "Report",
|
||||
});
|
||||
},
|
||||
handleSizeChange() {},
|
||||
handleCurrentChange() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.row {
|
||||
border-bottom: 1px solid #e3e8f2;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0 24px 8px 24px;
|
||||
.button {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
.el-icon-setting {
|
||||
font-size: 14px;
|
||||
color: #343434;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.refresh {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 16px 24px;
|
||||
.refresh-icon {
|
||||
font-size: 12px;
|
||||
color: #343434;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #343434;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.chart-container {
|
||||
display: flex;
|
||||
|
||||
.chart-instance {
|
||||
width: 50%;
|
||||
padding: 16px;
|
||||
border: 1px solid #e9f3fb;
|
||||
margin-right: 16px;
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.trend-chart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.select {
|
||||
color: #4f597f;
|
||||
font-size: 12px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.table-content {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.status-icon.success {
|
||||
background-color: green; // 成功状态图标颜色
|
||||
}
|
||||
|
||||
.status-icon.pending {
|
||||
background-color: gray; // 未发送状态图标颜色
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
125
test-ui/src/views/test/task/edit/index.vue
Normal file
125
test-ui/src/views/test/task/edit/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="header" @click="handleOutClick">
|
||||
<div class="back">
|
||||
<span><i class="el-icon-arrow-left"></i></span>
|
||||
<span>返回列表</span>
|
||||
</div>
|
||||
<div class="task">
|
||||
<span class="collect"><i class="el-icon-star-off"></i></span>
|
||||
<span class="name">任务名称</span>
|
||||
<el-input :class="isEdit ? 'black' : 'red'" type="text" placeholder="请输入内容" v-model="text" maxlength="64" show-word-limit @click.native.stop="isEdit = true"/>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="任务详情" name="first">
|
||||
<taskDetails />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="执行记录" name="second">
|
||||
<executionRecord />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="操作记录" name="third">
|
||||
<operationRecords />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import taskDetails from "./taskDetails.vue";
|
||||
import executionRecord from "./executionRecord.vue";
|
||||
import operationRecords from "./operationRecords.vue";
|
||||
export default {
|
||||
components: {
|
||||
taskDetails,
|
||||
executionRecord,
|
||||
operationRecords,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: "111", // 输入框内容
|
||||
isEdit: false, // 是否禁用
|
||||
activeName: "first",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOutClick() {
|
||||
this.isEdit = false; // 聚焦时设置为 true
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
background-color: #fef9f1;
|
||||
background-image: url(../../../../assets/images/header.png);
|
||||
background-position-x: right;
|
||||
background-position-y: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 16px 100px 16px 24px;
|
||||
}
|
||||
.back span {
|
||||
color: rgb(50, 114, 254);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.task {
|
||||
color: #4f597f;
|
||||
font-size: 12px;
|
||||
margin: 0 8px 0 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.collect {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
::v-deep .red {
|
||||
.el-input__inner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: red;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
::v-deep .black {
|
||||
.el-input__inner {
|
||||
background: #fff;
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
/* 修改 tab 标签的字体大小 */
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e0e5f0;
|
||||
border: none; /* 去掉默认的边框 */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
font-size: 12px; /* 字体大小为 12px */
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
159
test-ui/src/views/test/task/edit/lineChart.vue
Normal file
159
test-ui/src/views/test/task/edit/lineChart.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<!-- 修改为正确的闭合标签 -->
|
||||
<div :class="className" :style="{ height: height, width: width }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "680px",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "350px",
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val);
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["执行用例总数", "执行用例成功率"],
|
||||
// 修改图例颜色
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
// 去掉背景保留背景线条
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"2025-01-21 10:00:00",
|
||||
"2025-01-25 10:00:00",
|
||||
"2025-01-29 10:00:00",
|
||||
"2025-02-02 10:00:00",
|
||||
"2025-02-06 10:00:00",
|
||||
"2025-02-10 10:00:00",
|
||||
"2025-02-14 10:00:00",
|
||||
"2025-02-18 10:00:00",
|
||||
],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// 去掉坐标轴名称
|
||||
name: "",
|
||||
min: 0,
|
||||
max: 2,
|
||||
interval: 0.5,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// 去掉坐标轴名称
|
||||
name: "",
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25,
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "执行用例总数",
|
||||
type: "line",
|
||||
yAxisIndex: 0, // 使用左边的纵坐标
|
||||
data: [0.5, 1.2, 1.8, 1.5, 1.0, 0.8, 1.3, 1.7],
|
||||
itemStyle: {
|
||||
color: "blue", // 设置为蓝色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "执行用例成功率",
|
||||
type: "line",
|
||||
yAxisIndex: 1, // 使用右边的纵坐标
|
||||
data: [25, 50, 75, 60, 40, 30, 70, 90],
|
||||
itemStyle: {
|
||||
color: "green", // 设置为绿色
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
168
test-ui/src/views/test/task/edit/lineChartCover.vue
Normal file
168
test-ui/src/views/test/task/edit/lineChartCover.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<!-- 修改为正确的闭合标签 -->
|
||||
<div :class="className" :style="{ height: height, width: width }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "680px",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "350px",
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val);
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["分支覆盖率", "方法覆盖率", "行覆盖率"],
|
||||
// 修改图例颜色
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
// 去掉背景保留背景线条
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"2025-01-21 10:00:00",
|
||||
"2025-01-25 10:00:00",
|
||||
"2025-01-29 10:00:00",
|
||||
"2025-02-02 10:00:00",
|
||||
"2025-02-06 10:00:00",
|
||||
"2025-02-10 10:00:00",
|
||||
"2025-02-14 10:00:00",
|
||||
"2025-02-18 10:00:00",
|
||||
],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// 去掉坐标轴名称
|
||||
name: "",
|
||||
min: 0,
|
||||
max: 2,
|
||||
interval: 0.5,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// 去掉坐标轴名称
|
||||
name: "",
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25,
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
textStyle: {
|
||||
color: "#686868",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "分支覆盖率",
|
||||
type: "line",
|
||||
yAxisIndex: 0, // 使用左边的纵坐标
|
||||
data: [0.5, 1.2, 1.8, 1.5, 1.0, 0.8, 1.3, 1.7],
|
||||
itemStyle: {
|
||||
color: "red", // 设置为蓝色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "方法覆盖率",
|
||||
type: "line",
|
||||
yAxisIndex: 1, // 使用右边的纵坐标
|
||||
data: [25, 50, 75, 90, 40, 30, 70, 90],
|
||||
itemStyle: {
|
||||
color: "green", // 设置为绿色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "行覆盖率",
|
||||
type: "line",
|
||||
yAxisIndex: 1, // 使用右边的纵坐标
|
||||
data: [25, 50, 75, 60, 40, 30, 70, 90],
|
||||
itemStyle: {
|
||||
color: "gray", // 设置为绿色
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
92
test-ui/src/views/test/task/edit/operationRecords.vue
Normal file
92
test-ui/src/views/test/task/edit/operationRecords.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 时间选择组件 -->
|
||||
<div class="filter-container">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="～"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
:default-value="['2025-02-16', '2025-02-19']"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column type="index" label="序号"> </el-table-column>
|
||||
<el-table-column prop="operationTime" label="操作时间"> </el-table-column>
|
||||
<el-table-column prop="operator" label="操作人"> </el-table-column>
|
||||
<el-table-column>
|
||||
<template #header>
|
||||
<span>ID</span>
|
||||
<i class="el-icon-warning-outline" style="margin-left: 10px"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
<el-tooltip content="ID提示信息" placement="top">
|
||||
<i
|
||||
class="el-icon-info"
|
||||
style="margin-left: 6px; color: #909399"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<template #header>
|
||||
<span>名称</span>
|
||||
<i class="el-icon-warning-outline" style="margin-left: 10px"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
<el-tooltip content="名称提示信息" placement="top">
|
||||
<i
|
||||
class="el-icon-info"
|
||||
style="margin-left: 6px; color: #909399"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operationType" label="操作类型"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "operationRecords",
|
||||
data() {
|
||||
return {
|
||||
// 时间选择组件的默认值
|
||||
dateRange: ["2025-02-16", "2025-02-19"],
|
||||
// 表格数据（暂时为空）
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(row) {
|
||||
console.log(row);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.el-icon-info {
|
||||
cursor: pointer;
|
||||
}
|
||||
.table-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
}
|
||||
</style>
|
||||
111
test-ui/src/views/test/task/edit/report/components/pieChart.vue
Normal file
111
test-ui/src/views/test/task/edit/report/components/pieChart.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<!-- 修改为正确的闭合标签 -->
|
||||
<div :class="className" :style="{ height: height, width: width }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "430px",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "200px",
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val);
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
this.setOptions();
|
||||
},
|
||||
setOptions() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
grid: {
|
||||
left: "20",
|
||||
},
|
||||
legend: {
|
||||
right: "0",
|
||||
top: "center",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: "Search Engine" },
|
||||
// { value: 735, name: "Direct" },
|
||||
// { value: 580, name: "Email" },
|
||||
// { value: 484, name: "Union Ads" },
|
||||
// { value: 300, name: "Video Ads" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
292
test-ui/src/views/test/task/edit/report/index.vue
Normal file
292
test-ui/src/views/test/task/edit/report/index.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="task-page">
|
||||
<div class="task-header">
|
||||
<div class="task-header-left">
|
||||
<i class="el-icon-back"></i>
|
||||
<span class="task-header-title">任务信息</span>
|
||||
</div>
|
||||
<el-button type="primary" class="task-header-button">关联应用</el-button>
|
||||
</div>
|
||||
<div class="task-content">
|
||||
<div class="task-left-panel">
|
||||
<div class="task-panel-title">用例执行分布</div>
|
||||
<pieChart />
|
||||
</div>
|
||||
<div class="task-right-panel">
|
||||
<div class="task-panel-title">定时任务执行信息</div>
|
||||
<div class="task-panel-content">
|
||||
<div class="task-stats">
|
||||
<div class="task-stats-total-cases">
|
||||
<span class="task-stats-label">用例总数</span>
|
||||
<span class="task-stats-value">2</span>
|
||||
</div>
|
||||
<div class="task-stats-step-count">
|
||||
<span class="task-stats-label">用例步骤数</span>
|
||||
<span class="task-stats-value">9</span>
|
||||
</div>
|
||||
<div class="task-stats-success-rate">
|
||||
<span class="task-stats-label">成功率</span>
|
||||
<span class="task-stats-value">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-details">
|
||||
<div class="task-details-execution-time">
|
||||
<div class="task-details-label">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>执行耗时</span>
|
||||
</div>
|
||||
<div class="task-details-value">111s</div>
|
||||
</div>
|
||||
<div class="task-details-start-time">
|
||||
<div class="task-details-label">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>开始执行时间</span>
|
||||
</div>
|
||||
<div class="task-details-value">2025-02-19 10:00:00</div>
|
||||
</div>
|
||||
<div class="task-details-environment">
|
||||
<div class="task-details-label">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>环境</span>
|
||||
</div>
|
||||
<div class="task-details-value">
|
||||
中移商业保理平台-云龙测试-测试环境
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="任务详情(2)" name="first">
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item>
|
||||
<template slot="title">
|
||||
一致性 Consistency<i class="header-icon el-icon-info"></i>
|
||||
</template>
|
||||
<div>
|
||||
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
|
||||
</div>
|
||||
<div>
|
||||
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="反馈 Feedback">
|
||||
<div>
|
||||
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
|
||||
</div>
|
||||
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="效率 Efficiency">
|
||||
<div>简化流程：设计简洁直观的操作流程；</div>
|
||||
<div>
|
||||
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
|
||||
</div>
|
||||
<div>
|
||||
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可控 Controllability">
|
||||
<div>
|
||||
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
|
||||
</div>
|
||||
<div>
|
||||
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="执行记录(2)" name="second"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pieChart from "./components/pieChart.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
pieChart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(event, tab) {
|
||||
console.log(event, tab);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// .task-page {
|
||||
// /* 可根据需要添加全局样式 */
|
||||
// }
|
||||
|
||||
.task-header {
|
||||
border-bottom: 1px solid #e3e8f2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.task-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-header-title {
|
||||
color: #4f597f;
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.el-icon-back {
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 50%;
|
||||
color: #346fff;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-header-button {
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.task-left-panel {
|
||||
border: 1px solid #f4f5fc;
|
||||
border-radius: 2px;
|
||||
height: 250px;
|
||||
padding: 16px 24px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.task-right-panel {
|
||||
width: 100%;
|
||||
border: 1px solid #f4f5fc;
|
||||
border-radius: 2px;
|
||||
height: 250px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.task-panel-title {
|
||||
color: #4f597f;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.task-panel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 198px;
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 54px;
|
||||
}
|
||||
|
||||
.task-stats-total-cases,
|
||||
.task-stats-step-count,
|
||||
.task-stats-success-rate {
|
||||
font-size: 12px;
|
||||
color: #4f597f;
|
||||
}
|
||||
|
||||
.task-stats-value {
|
||||
font-size: 24px;
|
||||
color: #4f597f;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.task-stats-total-cases {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.task-stats-step-count {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.task-stats-success-rate {
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
.task-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 54px;
|
||||
}
|
||||
|
||||
.task-details-execution-time,
|
||||
.task-details-start-time,
|
||||
.task-details-environment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-details-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9c9c9c;
|
||||
font-size: 12px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.task-details-label i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.task-details-value {
|
||||
color: #4f597f;
|
||||
}
|
||||
|
||||
.task-details-execution-time {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.task-details-start-time {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.task-details-environment {
|
||||
width: 330px;
|
||||
}
|
||||
/* 修改 tab 标签的字体大小 */
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e0e5f0;
|
||||
border: none; /* 去掉默认的边框 */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
font-size: 12px; /* 字体大小为 12px */
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
735
test-ui/src/views/test/task/edit/taskDetails.vue
Normal file
735
test-ui/src/views/test/task/edit/taskDetails.vue
Normal file
@@ -0,0 +1,735 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="spread">
|
||||
<span class="headline" @click="handlecollapse">
|
||||
<span>任务信息</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
|
||||
<div class="mission" v-show="collapse">
|
||||
<div class="mission_left">
|
||||
<div class="min">
|
||||
<div class="execute">执行频率</div>
|
||||
<div class="wrapper">
|
||||
<div class="expression">
|
||||
<!-- 上 -->
|
||||
<div class="expression-top">
|
||||
<span>crontab表达式</span>
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
</div>
|
||||
<!-- 中 -->
|
||||
<div class="expression-centre">
|
||||
<div class="time">
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
v-model="inputItem.value"
|
||||
v-for="(inputItem, index) in inputGroup"
|
||||
:key="index"
|
||||
>
|
||||
<template slot="suffix">{{ inputItem.label }}</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下 -->
|
||||
<div class="expression-below">
|
||||
<span>crontab表达式展示 0 0 10 * * ？</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="executiontime">
|
||||
<span>最近三次执行时间</span>
|
||||
<div v-for="item in executionTimeList" :key="item.time">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div>
|
||||
<span>所在分组</span>
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<span class="way">
|
||||
<span>用例执行方式</span>
|
||||
<template>
|
||||
<el-radio v-model="radio" label="1">备选项</el-radio>
|
||||
<el-radio v-model="radio" label="2">备选项</el-radio>
|
||||
</template>
|
||||
</span>
|
||||
<div class="avatar">
|
||||
<span>创建人</span>
|
||||
<el-avatar
|
||||
:size="14"
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
></el-avatar>
|
||||
<span>涂卫军</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mission_right">
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="启动定时任务">
|
||||
<el-switch v-model="form.delivery1"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="失败用例重试">
|
||||
<el-switch v-model="form.delivery2"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="最大重试次数">
|
||||
<el-input v-model="form.name" style="width: 100px"></el-input>
|
||||
<span class="restrict">最小1次，最大10次</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="selected">
|
||||
<span class="headline" @click="handlecollapse1">
|
||||
<span>已选用例列表</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
<el-row>
|
||||
<el-button type="primary" class="append-bt" @click="usecase"
|
||||
>添加用例</el-button
|
||||
>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="form-container" v-show="collapse1">
|
||||
<div class="form-container-left">
|
||||
<div class="menu-list-item">
|
||||
<div class="menu-itme-left">
|
||||
<i class="el-icon-menu" style="font-size: 14px"></i>
|
||||
<div class="menu-itme-text">
|
||||
<span class="text-top">全部用例</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-list-item">
|
||||
<div class="menu-itme-left">
|
||||
<i class="el-icon-menu" style="font-size: 14px"></i>
|
||||
<div class="menu-itme-text">
|
||||
<span class="text-top">中移商业保理平台</span>
|
||||
<span class="text-bottom">指定接口用例</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<span class="num">2</span>
|
||||
<i
|
||||
class="el-icon-edit icon"
|
||||
style="margin-right: 12px; color: #343434"
|
||||
></i>
|
||||
<i class="el-icon-delete icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-header">
|
||||
<span>中移商业保理平台</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input3"
|
||||
style="width: 400px"
|
||||
>
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
<el-option label="用户电话" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-table ref="filterTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="name" label="ID" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="example" label="用例名称">
|
||||
<template slot-scope="scope">
|
||||
<span class="icon--edit">A</span>
|
||||
<span class="icon__pencil">中</span>
|
||||
<span>{{ scope.row.example }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="用例状态">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-success"></i>
|
||||
<span>{{ scope.row.address }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tag" label="创建人" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-avatar
|
||||
:size="14"
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
></el-avatar>
|
||||
<span>{{ scope.row.tag }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="180" sortable>
|
||||
<template #header>
|
||||
<span>用例执行优先级</span>
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="!scope.row.isInput"
|
||||
class="table-input-text"
|
||||
@click="handleTableInputClick(scope.row)"
|
||||
>
|
||||
<span>{{ scope.row.date || "未设置，点击输入" }}</span>
|
||||
<i class="el-icon-warning-outline icon"></i>
|
||||
</span>
|
||||
<el-input-number
|
||||
v-if="scope.row.isInput"
|
||||
style="width: 140px"
|
||||
v-model="scope.row.date"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="10"
|
||||
placeholder="未设置，点击输入"
|
||||
class="table-input"
|
||||
></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="selected">
|
||||
<span class="headline" @click="handlecollapse2">
|
||||
<span>关联应用</span>
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
<el-row>
|
||||
<el-button type="primary" class="append-bt">关联应用</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="collapse2">
|
||||
<el-table ref="filterTable" :data="tableData2" style="width: 100%">
|
||||
<el-table-column prop="name" label="应用名称" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="实例数" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="dialogFormVisible">
|
||||
<template #title>
|
||||
<div class="tab-line">
|
||||
<span style="margin-right: 20px">添加用例</span>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="手动选择" name="first"> </el-tab-pane>
|
||||
<el-tab-pane label="提升覆盖率推荐" name="second"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<test1 v-if="activeName == 'first'" />
|
||||
<test2 v-if="activeName == 'second'" />
|
||||
</template>
|
||||
<div slot="footer" class="dialog-footer" v-if="activeName == 'first'">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clickOutside from "./clickOutside.js";
|
||||
import test1 from "./test1.vue";
|
||||
import Test2 from "./test2.vue";
|
||||
import test2 from "./test2.vue";
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
clickoutside: clickOutside, // 注册指令
|
||||
},
|
||||
components: {
|
||||
test1,
|
||||
test2,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
collapse: true,
|
||||
collapse1: true,
|
||||
collapse2: true,
|
||||
dialogFormVisible: false,
|
||||
input2: "0",
|
||||
radio: "1",
|
||||
inputGroup: [
|
||||
{
|
||||
label: "秒",
|
||||
value: "00",
|
||||
},
|
||||
{
|
||||
label: "分",
|
||||
value: "00",
|
||||
},
|
||||
{
|
||||
label: "时",
|
||||
value: "00",
|
||||
},
|
||||
{
|
||||
label: "日",
|
||||
value: "00",
|
||||
},
|
||||
{
|
||||
label: "月",
|
||||
value: "00",
|
||||
},
|
||||
{
|
||||
label: "周",
|
||||
value: "00",
|
||||
},
|
||||
],
|
||||
executionTimeList: [
|
||||
{
|
||||
time: "2025-02-18 10:00:00",
|
||||
},
|
||||
{
|
||||
time: "2025-02-19 10:00:00",
|
||||
},
|
||||
{
|
||||
time: "2025-02-20 10:00:00",
|
||||
},
|
||||
],
|
||||
value: "",
|
||||
options: [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "黄金糕",
|
||||
},
|
||||
{
|
||||
value: "选项2",
|
||||
label: "双皮奶",
|
||||
},
|
||||
{
|
||||
value: "选项3",
|
||||
label: "蚵仔煎",
|
||||
},
|
||||
{
|
||||
value: "选项4",
|
||||
label: "龙须面",
|
||||
},
|
||||
{
|
||||
value: "选项5",
|
||||
label: "北京烤鸭",
|
||||
},
|
||||
],
|
||||
form: {
|
||||
delivery1: false,
|
||||
delivery2: false,
|
||||
name: "",
|
||||
},
|
||||
input3: "",
|
||||
tableData: [
|
||||
{
|
||||
date: "",
|
||||
name: "王小虎",
|
||||
example: "授信信息管理",
|
||||
address: "通过",
|
||||
tag: "家",
|
||||
isInput: false,
|
||||
},
|
||||
{
|
||||
date: "",
|
||||
name: "王小虎",
|
||||
example: "授信信息管理",
|
||||
address: "通过",
|
||||
tag: "公司",
|
||||
isInput: false,
|
||||
},
|
||||
{
|
||||
date: "",
|
||||
name: "王小虎",
|
||||
example: "授信信息管理",
|
||||
address: "通过",
|
||||
tag: "家",
|
||||
isInput: false,
|
||||
},
|
||||
{
|
||||
date: "",
|
||||
name: "王小虎",
|
||||
example: "授信信息管理",
|
||||
address: "通过",
|
||||
tag: "公司",
|
||||
isInput: false,
|
||||
},
|
||||
],
|
||||
tableData2: [
|
||||
{
|
||||
name: "cmcf-scfp",
|
||||
address: "0",
|
||||
},
|
||||
{
|
||||
name: "cmcf-scfp",
|
||||
address: "0",
|
||||
},
|
||||
],
|
||||
currentPage: 4,
|
||||
select: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
usecase() {
|
||||
this.dialogFormVisible = !this.dialogFormVisible;
|
||||
},
|
||||
handlecollapse() {
|
||||
this.collapse = !this.collapse;
|
||||
},
|
||||
handlecollapse1() {
|
||||
this.collapse1 = !this.collapse1;
|
||||
},
|
||||
handlecollapse2() {
|
||||
this.collapse2 = !this.collapse2;
|
||||
},
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
},
|
||||
handleTableInputClick(row) {
|
||||
// this.tableData.forEach((item) => (item.isInput = false)); // 关闭其他输入框
|
||||
row.isInput = true; // 打开当前输入框
|
||||
},
|
||||
handleClickOutside() {
|
||||
this.tableData.forEach((item) => (item.isInput = false));
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.headline {
|
||||
color: #4f597f;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
.el-icon-warning-outline {
|
||||
margin: 10px 0 0 16px;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
background-color: #f3f4f9;
|
||||
border-radius: 1px;
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mission {
|
||||
border: 1px solid #ebf0fa;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.mission_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.min {
|
||||
display: flex;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
}
|
||||
.execute {
|
||||
align-items: center;
|
||||
color: #8e9eb1;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.wrapper {
|
||||
width: 948px;
|
||||
background-color: #f3f4f9;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.expression {
|
||||
width: 100%;
|
||||
.expression-top {
|
||||
color: #8e9eb1;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.expression-centre {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
padding: 12px 0 6px;
|
||||
display: inline-flex;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: none;
|
||||
}
|
||||
.el-input__suffix-inner {
|
||||
line-height: 30px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.executiontime {
|
||||
font-size: 12px;
|
||||
color: #9c9c9c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
line-height: 20px;
|
||||
padding-left: 16px;
|
||||
width: 200px;
|
||||
border-left: 1px solid #e1e6f0;
|
||||
}
|
||||
.expression-below {
|
||||
color: #8e9eb1;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 12px 0 12px;
|
||||
span {
|
||||
align-items: center;
|
||||
color: #8e9eb1;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
.way {
|
||||
padding: 0 12px;
|
||||
}
|
||||
::v-deep .el-radio {
|
||||
margin-right: 20px;
|
||||
}
|
||||
::v-deep .el-radio__inner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::v-deep .el-radio__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
::v-deep .footer .avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mission_right {
|
||||
padding-right: 50px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
color: #8e9eb1;
|
||||
font-size: 12px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.restrict {
|
||||
color: #8e9eb1;
|
||||
font-size: 12px;
|
||||
line-height: 36px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
// 标题
|
||||
.selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.append-bt {
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
.form-container {
|
||||
display: flex;
|
||||
border: 1px solid #ebf0fa;
|
||||
border-radius: 4px;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
.form-container-left {
|
||||
border-right: 1px solid #e3e8f2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// width: 280px;
|
||||
}
|
||||
}
|
||||
.menu-list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 300px;
|
||||
padding: 16px;
|
||||
.num {
|
||||
display: inline-block;
|
||||
}
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #ebf1ff;
|
||||
.num {
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.menu-itme-left {
|
||||
display: flex;
|
||||
.menu-itme-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
.text-top {
|
||||
line-height: 14px;
|
||||
color: #343434;
|
||||
}
|
||||
.text-bottom {
|
||||
margin-top: 14px;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
width: calc(100% - 300px);
|
||||
padding: 24px 24px 0;
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
.icon--edit {
|
||||
background-color: #33bc5a;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.icon__pencil {
|
||||
background-color: #fec47b;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
::v-deep .table-input {
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.table-input-text {
|
||||
&:hover {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-icon-success {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: rgb(51, 188, 90);
|
||||
margin-right: 10px;
|
||||
}
|
||||
.footer .avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .table .el-table .cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-avatar--circle {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
/* 修改 tab 标签的字体大小 */
|
||||
|
||||
::v-deep .el-tabs {
|
||||
.el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
.el-tabs__item {
|
||||
font-size: 12px; /* 字体大小为 12px */
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.tab-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebf0fa;
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
test-ui/src/views/test/task/edit/test1.vue
Normal file
47
test-ui/src/views/test/task/edit/test1.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" label-width="80px" class="content">
|
||||
<el-form-item label="选择用例库">
|
||||
<el-select v-model="form.region" placeholder="请选择用例库">
|
||||
<el-option label="中移商业保理平台" value="shanghai"></el-option>
|
||||
<el-option label="中移商业保理平台" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择用例">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="全部接口用例"></el-radio>
|
||||
<el-radio label="目录下全部用例"></el-radio>
|
||||
<el-radio label="指定接口用例"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
region: "",
|
||||
date1: "",
|
||||
date2: "",
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: "",
|
||||
desc: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log("submit!");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
217
test-ui/src/views/test/task/edit/test2.vue
Normal file
217
test-ui/src/views/test/task/edit/test2.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
根据未覆盖代码，提供与其关联的用例和无用例覆盖的接口，补充用例并执行，重新观察全量覆盖率数值变化。
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="example-container">
|
||||
<div class="example-title">
|
||||
<span class="use">应用</span>
|
||||
<span class="real">实例</span>
|
||||
</div>
|
||||
<div
|
||||
class="example-item"
|
||||
v-for="example in exampleList"
|
||||
:key="example.label"
|
||||
>
|
||||
<span class="data-name1">
|
||||
<i class="el-icon-s-order"></i>
|
||||
<span>{{ example.label }}</span>
|
||||
</span>
|
||||
<span class="data-name2">{{ example.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container">
|
||||
<div class="form-container">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="覆盖范围">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="应用"></el-radio>
|
||||
<el-radio label="用例集"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['12:00:00']"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">生成</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column fixed prop="date" label="日期"> </el-table-column>
|
||||
<el-table-column prop="name" label="姓名"> </el-table-column>
|
||||
<el-table-column prop="province" label="省份"> </el-table-column>
|
||||
<el-table-column fixed="right" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleClick(scope.row)"
|
||||
type="text"
|
||||
size="small"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button type="text" size="small">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
exampleList: [
|
||||
{
|
||||
label: "cmcf-scfp",
|
||||
value: "0",
|
||||
},
|
||||
],
|
||||
form: {
|
||||
name: "985e1a832f5317923eccf1a0caa8b6c6",
|
||||
region: "",
|
||||
date: "",
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: "",
|
||||
desc: "",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "王小虎",
|
||||
province: "上海",
|
||||
city: "普陀区",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
zip: 200333,
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "王小虎",
|
||||
province: "上海",
|
||||
city: "普陀区",
|
||||
address: "上海市普陀区金沙江路 1517 弄",
|
||||
zip: 200333,
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "王小虎",
|
||||
province: "上海",
|
||||
city: "普陀区",
|
||||
address: "上海市普陀区金沙江路 1519 弄",
|
||||
zip: 200333,
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "王小虎",
|
||||
province: "上海",
|
||||
city: "普陀区",
|
||||
address: "上海市普陀区金沙江路 1516 弄",
|
||||
zip: 200333,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log("submit!");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
background-color: #f0f7ff;
|
||||
border: 1px solid #84b4ff;
|
||||
border-radius: 6px;
|
||||
color: #343434;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
// 内容
|
||||
.container {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.content-container {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
overflow-y: scroll;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.example-container {
|
||||
border-right: 1px solid #e3e8f2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.example-title {
|
||||
align-items: center;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
color: #343434;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
.use {
|
||||
width: 172px;
|
||||
}
|
||||
.real {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
// 应用下面的内容
|
||||
.example-item {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
.data-name1 {
|
||||
width: 172px;
|
||||
color: #343434;
|
||||
font-size: 12px;
|
||||
.el-icon-s-order {
|
||||
color: #84b4ff;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.data-name2 {
|
||||
width: 50px;
|
||||
color: #343434;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,100 @@
|
||||
<template>
|
||||
<folder-page type="task" @click="folderHandleSelected">
|
||||
case
|
||||
<div v-if="queryParams.groupId && queryParams.groupId !== 0">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新建自动化测试</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="dataList" @row-click="handleRowClick">
|
||||
<el-table-column label="自动化测试名称" align="center" prop="name"/>
|
||||
<el-table-column label="cron表达式" align="center" prop="crontab"/>
|
||||
<el-table-column label="定时任务开关" align="center" prop="status" :formatter="row => row.status ? '开启' : '关闭'"/>
|
||||
<el-table-column label="创建人" align="center" prop="createBy"/>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleRun(scope.row.id)">执行</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
|
||||
</div>
|
||||
<el-empty v-else/>
|
||||
</folder-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import FolderPage from "@/components/FolderPage/index.vue";
|
||||
import {addCase, delCase, listCase} from "@/api/test/case";
|
||||
|
||||
export default {
|
||||
name: "Task",
|
||||
components: {FolderPage},
|
||||
data() {
|
||||
return {
|
||||
|
||||
loading: false,
|
||||
showSearch: true,
|
||||
total: 0,
|
||||
dataList: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groupId: null,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
folderHandleSelected(id) {
|
||||
console.log(id)
|
||||
if (id) {
|
||||
this.queryParams.groupId = id;
|
||||
this.getList();
|
||||
} else {
|
||||
this.dataList = [];
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
// this.loading = true;
|
||||
// listCase(this.queryParams).then(response => {
|
||||
// this.dataList = response.rows;
|
||||
// this.total = response.total;
|
||||
// this.loading = false;
|
||||
// });
|
||||
},
|
||||
handleAdd() {
|
||||
this.$prompt('请输入名称', '新增', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /^(?!\s*$).+/,
|
||||
inputErrorMessage: '名称不能为空'
|
||||
}).then(({value}) => {
|
||||
if (value) {
|
||||
addCase({
|
||||
groupId: this.queryParams.groupId,
|
||||
name: value
|
||||
}).then(res => {
|
||||
this.$message.success("添加成功")
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
handleRowClick(row) {
|
||||
this.$tab.openPage(`用例[${row.name}]`, "/case/detail", {id: row.id});
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$modal.confirm('是否确认删除用例？').then(function () {
|
||||
return delCase(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
handleRun(id) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user