Vue接口平台十二 —— 测试任务（Task）

效果图及说明

大体上与业务流界面一致。只是多了一块展示执行记录的地方。

内容实现

前置准备

1. 新建文件
   
2. 路由配置
   router/index.js进行配置
   
3. 修改Home页面的菜单内容
   
4. 接口封装

• 新建TaskApi.js文件,结合后端，进行接口封装
  -在index.js中添加导出
  

左侧内容展示

整体布局与业务流相似，左右布局
左侧依旧是标题 + 数据展示；数据从业务流数据换成了任务数据而已

 <div class="card left_box"><!--顶部标题--><div class="title_box"><img src="@/assets/icons/repair.png" :width="25" alt=""><div class="name">测试任务</div><el-button @click="" size="small" icon="CirclePlus" plain>添加</el-button></div><!--下方列表--><el-menu :default-active="activeTask.id+''"><el-menu-item @click="selectTask(item)" :index="item.id.toString()" v-for="item in TaskList"key="item.id"><img src="@/assets/icons/repair.png" :width="20" alt=""><span style="margin-right: 10px"></span><span>{{ item.name }}</span></el-menu-item></el-menu></div>

<script setup>
import http from '@/api/index.js'
import {onMounted, reactive, ref} from "vue";
import {ProjectStore} from '@/stores/module/ProStore.js'
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";const activeTask = reactive({id: '',name: '',flow: []
})// 获取所有任务列表
async function getTaskList() {const response = await http.task.getTaskListApi(proStore.pro.id)if (response.status === 200) {TaskList.value = response.data}
}async function selectTask(item) {activeTask.id = item.idactiveTask.name = item.nameactiveTask.flow = item.flow// 请求任务详情
}getTaskList()
</script>

右侧展示

上方基本信息展示

<div class="card right_box"><div class="card"><el-divider content-position="left"><b>基本信息</b></el-divider><el-row :gutter="5" style="margin-bottom: 20px;padding: 0 20px;" v-if="activeTask"><el-col :span="16"><el-input v-model="activeTask.name" size="small"><template #prepend>任务名称</template><template #append><el-button @click="saveTask" plain size="small" type="primary" icon="CircleCheck">保存</el-button></template></el-input></el-col><el-col :span="8" style="text-align: right;padding-right:10px;"><el-button @click="runTask" plain size="small" type="primary" icon="Promotion">运行</el-button><el-button @click="deleteTask" plain size="small" type="danger" icon="Delete">删除</el-button></el-col></el-row></div></div>

const flowList = ref([])
// 获取单个任务中的业务流
async function getTaskInfo() {const response = await http.task.getTaskInfoApi(activeTask.value.id)if(response.status === 200){flowList.value = response.data.flow}
}async function selectTask(item) {activeTask.value = item// 请求任务详情await getTaskInfo()
}

创建任务

给添加按钮绑定事件AddTask。创建时传入固定名字，业务流传空就行。后面修改保存再传其他的。创建成功默认选中新创建的任务

//创建任务
async function AddTask() {let params={name: '新建任务',project: proStore.pro.id,flow:[]}const response = await http.task.createTaskApi(params)if (response.status === 201) {ElNotification({title: '任务创建成功',type: 'success',})await getTaskList()await selectTask(response.data)}
}

删除任务

删除也很简单，点击按钮后，做二次弹窗确认，确认删除后，把激活的任务id传到接口就行，删除成功后，再刷新一下任务列表。如果任务列表有数据，则默认选中第一个

//删除任务
async function deleteTask() {ElMessageBox.confirm('删除操作不可恢复！', '确定删除？', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}).then(async () => {const response = await http.task.deleteTaskApi(activeTask.id)if (response.status === 204) {ElNotification({title: '删除成功',type: 'success',duration: 2000})await getTaskList()if (TaskList.value.length > 0) {console.log('>0')await selectTask(TaskList.value[0])}}}).catch(() => {ElMessage({type: 'info',message: '取消删除',duration: 1000})})}

下方展示任务中业务流信息

<!--任务中的业务流 -->
<div class="card" style="margin-top: 10px"><el-divider content-position="left">任务中包含的业务流</el-divider><el-table :data="flowList" row-key="id" :show-header="false" style="width: 100%;margin-bottom: 10px;"><el-table-column><template #default="scope"><span class="el-icon-s-help" style="color: #17abe3;font-weight: bold;font-size: 14px;">{{ '业务流' + (scope.$index + 1) + ': ' }}</span><span style="font-weight: bold;font-size: 14px">{{ scope.row.name }}</span></template></el-table-column><el-table-column width="90px"><template #default="scope"><el-button type="danger" size="small" @click="deleteFlow(scope.row.id)">删除</el-button></template></el-table-column>
</el-table>
<el-button size="small" icon="Plus" plain type="primary" @click="clickAddFlow" style="margin-left: 10px;margin-bottom: 10px">添加业务流</el-button>
</div>

选择任务时，获取了任务中的所有业务流，保存到了flowList中，通过el-table将数据全部渲染出来。最后的到页面如下

添加业务流

 <!--添加业务流弹窗--><el-drawer direction="rtl" size="20%" :show-close="false" v-model="addFlowDlg" title="添加业务流"><template #header>添加测试流程</template><div class="select_content"><el-table ref="addRef" @selection-change="selectFlows" size="small" :data="Flows()" tooltip-effect="dark"style="width: 100%"><el-table-column type="selection" min-width="40"></el-table-column><el-table-column prop="name" label="全选" min-width="120"></el-table-column></el-table></div><div style="margin: 10px;text-align: center"><el-tooltip class="item" effect="dark" content="将选中流程添加到任务中" placement="top-start"><el-button type="success" size="small" @click="addFlowToTask">确认添加</el-button></el-tooltip><el-tooltip class="item" effect="dark" content="清除选中" placement="top-start"><el-button type="warning" plain size="small" @click="addRef.clearSelection()">清除选中</el-button></el-tooltip><el-tooltip class="item" effect="dark" content="关闭窗口" placement="top-start"><el-button plain type="danger" size="small" @click="addFlowDlg=false">取消</el-button></el-tooltip></div></el-drawer>

整体使用抽屉组件弹出，用addFlowDlg控制组件展示与否。点击添加时，将弹窗弹出

async function clickAddFlow() {addFlowDlg.value = trueaddFlowList.value = []
}

1.数据展示

用表格展示业务流数据。这个之前在业务流获取过。稍微修改一下，获取的时候，顺带存储到pinia中，以便在这里使用。

然后展示时的数据处理一下，只展示未添加的业务流，已经添加的不用展示。:data="Flows()"绑定这个函数返回的结果

const flows = proStore.flowsfunction Flows() {return flows.filter(item => {return !flowList.value.find(item2 => {return item2.id === item.id})})
}

2.表格选择触发函数@selection-change="selectFlows"

选择时，将选中的数据的id存储到一个新的列表中，用于添加时传递。
ps：需要注意的是表格勾选数据清空的情况，清空所有数据，就将列表直接置为空，不然只push增加，清空时不会将addFlowList的值清除掉。

const addFlowList = ref([])//选中内容，id添加到addFlowList中
function selectFlows(val) {// console.log('val:::', val)val.forEach(item => {if (!addFlowList.value.includes(item.id)) {addFlowList.value.push(item.id);}})// 清空选中的情况if (val.length === 0) {addFlowList.value = []}// console.log(addFlowList.value)
}

3. 发起请求

将原激活的任务数据传赋值给params，然后再已有的业务流的基础上，添加新增的业务流。每次添加完成，需要将addFlowList的值清空，否则再次添加会把原值附带上。最后发起请求，进行添加。成功后给提示，然后刷新页面

async function addFlowToTask() {let params = {...activeTask.value}params.flow.push(...addFlowList)// console.log(params)addFlowList.value = []const response = await http.task.updateTaskApi(params.id, params)if (response.status === 200) {ElNotification({title: '添加成功',type: 'success',})await getTaskInfo()}
}

从任务中移除业务流

同样需要获取最新的业务流列表，将点击的业务流id从原激活的业务流id列表中移除，然后发出请求，进行修改。

// 从任务中移除业务流
async function removeFlow(flow_id) {console.log(flow_id)let params = {...activeTask}params.flow= params.flow.filter(item => item !== flow_id)console.log(params)const response = await http.task.updateTaskApi(params.id, params)if (response.status === 200) {ElNotification({title: '移除成功',type: 'success',})await getTaskInfo()}
}

运行记录展示

新建文件TaskResult.vue用于展示运行记录，在选中任务时，请求接口获取记录值，传递给组件用于渲染

 <TaskResult :results="records"></TaskResult>

//选中任务
async function selectTask(item) {activeTask.id = item.idactiveTask.name = item.nameactiveTask.flow = item.flow// 请求任务详情await getTaskInfo()//获取记录await getRecords()
}const records = ref([])//获取运行记录
async function getRecords() {const response = await http.task.getRecordsApi({task: activeTask.id})if (response.status === 200) {records.value = response.dataconsole.log(records.value)}
}

<template>
<div class="card" style="margin-top: 10px"><el-divider content-position="left">执行记录</el-divider><el-table :data="props.results" class="table-style" size="small" border><el-table-column prop="create_time" label="执行时间" min-width="140" align="center"><template #default="scope">{{ scope.row.create_time }}</template></el-table-column><el-table-column prop="env_name" label="执行环境" min-width="110" align="center"><template #default="scope">{{ scope.row.env }}</template></el-table-column><el-table-column prop="all" label="总用例" min-width="50" align="center"><template #default="scope"><span v-if="scope.row.status !== '执行中'">{{scope.row.all}}</span></template></el-table-column><el-table-column  label="通过数" min-width="50" align="center"><template #default="scope"><span v-if="scope.row.status !== '执行中'">{{scope.row.success}}</span></template></el-table-column><el-table-column  label="通过率" min-width="80" align="center"><template #default="scope"><span v-if="scope.row.status !== '执行中'">{{scope.row.pass_rate + '%'}}</span></template></el-table-column><el-table-column  label="总耗时" min-width="80" align="center"><template #default="scope"><span v-if="scope.row.status !== '执行中'">{{scope.row.run_time}}</span></template></el-table-column><el-table-column  label="执行人" min-width="80" align="center"><template #default="scope"><span v-if="scope.row.status !== '执行中'">{{scope.row.tester}}</span></template></el-table-column><el-table-column label="测试报告" min-width="100" align="center"><template #default="scope"><span v-if="scope.row.status === '执行中'" ><el-tag>{{scope.row.status}}...</el-tag></span><el-button v-else type="primary" icon="View" plain size="small" @click=''>报告</el-button></template></el-table-column>></el-table>
</div>
</template><script setup>
import {defineProps,watch} from 'vue'const props = defineProps(['results'])watch(()=>props.results,()=>{console.log('results:::',props.results)})
</script><style scoped lang="scss"></style>

用table读取，展示，没有什么特殊的新内容。

点击报告需要获取报告详细内容展示。后面再来实现。

总结

与flow页面大体一致，无复杂内容。就一些element的组件使用。可能有bug，后面使用中再看看，有问题再改。