摘要：
˂!
<template>
<div>
<!-- tab分页 -->
<div>
<a-tabs default-active-key="test" @change="callback" type="card">
<a-tab-pane key="test" tab="Test环境" force-render></a-tab-pane>
<a-tab-pane key="staging" tab="Staging环境"></a-tab-pane>
</a-tabs>
<div style="margin: 20px 0px">
<a-selectstyle="250px"@change="get_department_id"placeholder="请选择部门":value='select_option'>
<a-select-option value="0">所有部门</a-select-option>
<a-select-option
:value="item.value"v-for="item in All_Department":key="item.value"
>{{ item.label }}</a-select-option>
</a-select>
</div>
</div>
<a-spin v-if="state" style='position:fixed;top:50%;left:50%;z-index:8;' tip="Loading...">
</a-spin>
<a-table
:columns="columns":data-source="selectDatas":scroll="{ x: 1500, y: 500 }":rowKey="(record) => record.id"
class="tbl-report"
>
<span slot="action" slot-scope="record">
<a slot="action" @click="toDetail(record.id)" style="margin-right: 5px"
>详情</a
>
<a slot="action" @click="deleteReport(record.id)">删除</a>
</span>
</a-table>
</div>
</template>
<script>import { message } from "ant-design-vue";
import { getUserId } from "../../utils/settoken";
import {
getUserAuthRequest,
getProjectRequest,
deleteTestReport,
testReportList,
allDepartment,
} from "../../api";
const columns =[
{ title: "报告ID", 100, dataIndex: "indexId"},
{ title: "部门名称", 100, dataIndex: "depart_id"},
{ title: "项目名称", 100, dataIndex: "pro_name"},
{ title: "执行环境", 100, dataIndex: "environment"},
{ title: "开始时间", dataIndex: "start_time", 100},
{ title: "结束时间", dataIndex: "end_time", 100},
{ title: "操作人", dataIndex: "fullname", 100},
{
title: "操作",
key: "operation",
fixed: "right",
100,
scopedSlots: { customRender: "action"},
},
];
export default{
data() {
return{
data: [],
selectData: [],
selectDatas:[],
All_Department: [],
columns,
state:false,
select_option:"0",
env:"test",
};
},
mounted() {
this.handle();
this.getAllDepartment();
},
watch:{
env:function(newVal,oldVal){
this.select_option="0"console.log("环境发生变化");
console.log(newVal +"---"+oldVal);
}
},
methods: {
async handle(e = "test") {
this.state=true;
await this.getAuth();
var StagingList =[];
var TestList =[];
if (e == "staging") {
for (var i = 0; i < this.data.length; i++) {
if (this.data[i].environment == "staging") {
StagingList.push(this.data[i]);
this.env=this.data[i].environment
}
}
this.selectData =StagingList;
this.selectDatas=this.selectData
} else if (e == "test") {
for (i = 0; i < this.data.length; i++) {
if (this.data[i].environment == "test") {
TestList.push(this.data[i]);
this.env=this.data[i].environment
}
}
this.selectData =TestList;
this.selectDatas=this.selectData
}
console.log("打印报告接口返回数据");
console.log(this.selectData)
this.state=false;
},
//获取所有部门
asyncgetAllDepartment() {
const { response } = awaitallDepartment();
console.log(response)
for (var i = 0; i < response.results.length; i++) {
var duix = newObject();
var { id } =response.results[i];
var { depart_name } =response.results[i];
duix["value"] =id;
duix["label"] =depart_name;
duix["isLeaf"] = false;
console.log(duix)
this.All_Department.push(duix);
console.log(this.All_Department)
}
},
//下拉框选择部门
get_department_id(department_id){
if (department_id=="0"){
this.selectDatas=this.selectData
this.select_option="0"}
else{
this.select_option=department_id
this.selectDatas=this.selectData.filter(item=>item.depart_id===department_id)
}
console.log("测试————————",+department_id);
console.log(",select_option",this.select_option)
console.log(this.env)
},
//选择环境
callback(key) {
this.handle(key);
},
//根据用户权限展示测试报告
asyncgetAuth() {
const useri_id =getUserId();
const { response } = awaitgetUserAuthRequest(useri_id);
if (response && response.succese === true) {
const auth = response.results[0].auth;
const res = awaittestReportList()
if (res && res.response.succese === true) {
const allProjectList =res.response.results;
if (auth === 1) {
const Arr =res.response.results;
Arr.forEach((item, index) =>{
item.indexId = index + 1;
});
this.data =Arr;
} else{
const res = awaitgetProjectRequest(useri_id)
if (res && res.response.succese === true) {
const projectList =[];
res.response.results.projct.map((item) =>{
returnprojectList.push(item.project_id);
});
const Arrs =[];
allProjectList.map((item) =>{
if (projectList.indexOf(item.project_id) > -1) {
Arrs.push(item);
Arrs.forEach((item, index) =>{
item.indexId = index + 1;
});
}
});
this.data =Arrs;
}
}
}
}
},
//删除所选报告
asyncdeleteReport(record) {
const { response } = awaitdeleteTestReport(record);
if (response && response.succese === true) {
message.success("删除成功", 2);
await this.getAuth();
console.log(this.data, "data");
} else if (response && response.succese === false) {
message.error("删除失败", 2);
}
},
toDetail(record) {
this.$router.push(`/detail/${record}`);
},
},
};
</script>
<style scoped>.tbl-report {
min-height: 900px;
}
</style>监听父组件中传了的值groupslist
props: {
project_id: {},
apislist: {
type: Array,
},
group_id: {},
groupslist: {
type: Array,
},
},监听到发送改变时page页设置为1
watch:{ groupslist(){ this.pagechange(1) } },