<template>
<div class="width-100-per height-100-per">
<!--上面一排S-->
<div class="layout-side">
<div>
<a-button @click="addPageRouter" class="margin-top-left-button">+ 新增训练</a-button>
</div>
<div>
<span>训练名称：</span>
<a-input placeholder="训练名称" style="width: 150px;" class="vertical-align-middle" v-model="selectNameV"/>
<span>参训单位：</span>
<a-tree-select style="width: 195px;"
class="vertical-align-middle"
:treeData="treeUserData"
placeholder="请选择"
:multiple="true"
:treeDefaultExpandAll="true"
:allow-clear="true"
v-model="valueV"
@change="selectTreeUser">
</a-tree-select>
<span>依照规划：</span>
<a-select class="designSelect vertical-align-middle" style="width: 150px;"
placeholder="请选择"
v-model="excessivePlanningV"
@change="planningDesign">
<a-select-option v-for="(item,index) in dataDesign" :key="index" :value="item.id">
{{item.planName}}
</a-select-option>
</a-select>
<a-button-group class="margin-left">
<a-button icon="reload" @click="emptyUser">清空</a-button>
<a-button icon="search" @click="findByFourQuery">查询</a-button>
</a-button-group>
</div>
</div>
<!--上面一排E-->
<!--表格S-->
<template>
<a-table class="tableDesign"
:rowKey="record => record.id"
:loading="loading"
:columns="columns"
:dataSource="listData"
:scroll="{ y: contentHeight }"
:pagination="paginationDesign"
v-on:onChangePage="changePage"
v-on:onShowSizeChange="showSizeChange">
<span slot="design" slot-scope="text, record">
{{record.trainingPlanEntity.planName}}
</span>
<span slot="unit" slot-scope="text, record">
<a-tag :key="index" color="#235C46" v-for="(t,index) of record.participatingUnitEntity">
<span style="color: white;">{{t.name}}</span>
</a-tag>
</span>
<span slot="tags" slot-scope="text, record" class="">
<!-- <a-icon v-pro="'viewEquipment'" type="file-search" class="table-options color-green table-icons" title="查询"-->
<!-- @click="onViewClick(record.id)"></a-icon> -->
<a-icon type="form" class="table-options color-green table-icons" title="编辑"
@click="onEditClick(record)"></a-icon>
<a-icon type="delete" class="table-options color-warn table-icons"
@click="deleteClick(record.id)" title="删除"></a-icon>
</span>
</a-table>
</template>
<!--表格E-->
</div>
</template>
<script>
import {
Input,
Button,
Icon,
Select,
Table,
Tag,
Modal,
Pagination,
TreeSelect,
} from 'ant-design-vue'
import {indexConfig} from '../IndexConfig'
import {pagination} from '_utils/utils'
export default {
name: "PlanList",
components: {
AButton: Button,
AInput: Input,
AButtonGroup: Button.Group,
ASelect: Select,
ASelectOption: Select.Option,
ATable: Table,
AIcon: Icon,
ATreeSelect: TreeSelect,
ATag: Tag
},
data() {
return {
loading: false,
//分页
paginationDesign: pagination(this.changePage, this.showSizeChange),
//页面高度
contentHeight: 100,
columns: indexConfig.DesingOne,
id: "",
dataDesign: [],
listData: [],
tableCard: true,
userDate: "",
//判断是否是obj
planning: "",
//参训单位data
treeUserData: [],
//训练设计查询过度数据
selectName: null,
excessivePlanning: null,
// 参训单位
value: null,
// 双向绑定值
selectNameV: null,
excessivePlanningV: null,
// 参训单位
valueV: null,
}
},
watch: {},
computed: {
monitorClientHeight() {
return this.$store.getters.clientHeight;
},
// 查询训练实施所有条件
findTrainStartentity: function () {
let obj = {
// 训练名称
trainingTitleName: this.selectName,
// 参训单位
participatingUnits: this.value === null ?null:this.value.length === 0?null:this.value,
// 依照规划
trainingPlanId: this.excessivePlanning,
// 训练状态
examState: this.state,
// 当前登录人员
supervisors: this.userDate.id
}
return obj
}
},
mounted() {
},
created() {
// 拿到当前登录人员
this.userDate = JSON.parse(this.$store.getters.currentUser)
// 查询所有训练实施S
// 初始化查询条件使其查询出所有
this.initQuery()
this.findTrainStartentityByQuery();
// 查询所有训练实施E
this.inItTwo();
this.showUserTree();
this.getHeight()
//this.changePage();
this.id = this.$route.meta.id
},
methods: {
// 初始化4个查询条件
initQuery() {
// 训练名称
this.selectName = null
// 参训单位
this.value = null
// 依照规划
this.excessivePlanning = null
// 训练状态
this.state = null
// ==============
this.selectNameV = null
this.valueV = null
this.excessivePlanningV = null
this.stateV = null
},
// 根据条件查,需要管分页
// 这里面调用了根据条件查询总数
findTrainStartentityByQuery() {
// console.log(this.findTrainStartentity)
const that = this;
that.loading = true;
that.$apollo.query({
query: require('_graphql/train/query/findPageTrainingDesign.gql'),
variables: {
entity: this.findTrainStartentity,
page:
{
rows: that.paginationDesign.defaultPageSize,
page: that.paginationDesign.current,
desc: true
},
type1: "1",
type2: "2",
},
fetchPolicy: 'no-cache'
}).then(data => {
// 表格渲染所需数据
that.listData = data.data.findPageTrainingDesign;
// console.log(that.listData)
// 组装训练时长S
this.listData.forEach(item => {
item.extension = item.trainingPlanEntity.extension.nodes.length - 2
})
// 组装训练时长E
that.getTotal();
that.loading = false;
}).catch(error => {
console.log(error)
})
},
// 获取数据总数
// 根据条件查,不管分页
getTotal() {
const that = this;
that.$apollo.query({
query: require('_graphql/train/query/findPageTrainingDesignCount.gql'),
variables: {entity: this.findTrainStartentity, type1: "1", type2: "2"},
fetchPolicy: 'no-cache'
}).then(data => {
that.paginationDesign.total = data.data.findPageTrainingDesignCount;
that.loading = false
}).catch(error => {
console.log(error)
});
},
onEditClick(id) {
this.routerSkip(this.$route.matched[this.$route.matched.length - 2].path + '/addDesign', {id});
},
addPageRouter() {
this.routerSkip(this.$route.matched[this.$route.matched.length - 2].path + '/addDesign');
},
//table高度
getHeight() {
Number(this.contentHeight = document.body.clientHeight - 330)
},
selectTreeUser(value) {
this.value = value
},
showUserTree() {
let that = this;
that.$apollo.query({
query: require('_graphql/examine/teacher/query/findAllUsers.gql'),
variables: {},
fetchPolicy: 'no-cache'
}).then(data => {
for (let v of data.data.findAllUsers) {
if (v.parentId === "1") {
this.treeUserData.push({
title: v.name,
value: v.code,
key: v.id,
disabled: true,
children: []
})
}
}
const userChilden = []
for (let v of data.data.findAllUsers) {
if (v.userType === "1" && v.parentId !== "1") {
userChilden.push({
title: v.name,
value: v.code,
key: v.id,
parentId: v.parentId
})
}
}
for (let i = 0; i < this.treeUserData.length; i++) {
for (let j of userChilden) {
if (j.parentId === this.treeUserData[i].value) {
this.treeUserData[i].children.push(j)
}
}
}
}).catch(error => {
console.log(error)
})
},
inItTwo() {
const that = this;
that.loading = true;
that.userDate = JSON.parse(this.$store.getters.currentUser)
let testObject = {
longUserId: that.userDate.id
}
that.$apollo.query({
query: require('_graphql/train/query/findTrainingPlanByrecipients.gql'),
variables: testObject,
fetchPolicy: 'no-cache'
}).then(data => {
that.dataDesign = data.data.findTrainingPlanByrecipients;
that.loading = false;
}).catch(error => {
console.log(error)
})
},
planningDesign(id) {
this.excessivePlanning = id
},
//点击页码回调
changePage(current, pageSize) {
this.paginationDesign.defaultPageSize = pageSize
this.paginationDesign.current = current
// 返回赋值S
this.selectNameV = this.selectName
this.excessivePlanningV = this.excessivePlanning
// 参训单位
this.valueV = this.value
// 返回赋值E
this.findTrainStartentityByQuery()
},
//选择每页多少条后的回调
showSizeChange(current, pageSize) {
this.changePage(current, pageSize)
},
//删除
deleteClick(id) {
const that = this;
const confirm = Modal.confirm;
confirm({
title: "确定删除该条训练计划？",
onOk() {
that.$apollo.mutate({
mutation: require('_graphql/train/mutation/delTrainingDesignById.gql'),
variables: {id: id},
fetchPolicy: 'no-cache'
}).then((data) => {
that.$message.success('删除成功');
that.findTrainStartentityByQuery();
}).catch(error => {
console.log(error)
});
},
onCancel() {
}
})
},
// 查询
findByFourQuery() {
// 非空验证
if (!this.selectNameV || this.selectNameV.trim() === '') {
this.$message.warning("不能输入空")
return
}
// 只要点击查询便从第一页开始
this.paginationDesign.current = 1
// 真正赋值查询S
this.selectName = this.selectNameV
this.excessivePlanning = this.excessivePlanningV
// 参训单位
this.value = this.valueV
// 真正赋值查询E
// console.log(this.findTrainStartentity)
this.findTrainStartentityByQuery()
// 分页注重三点:
// 1.点击查询才可以查询,点击分页查询无效
// 2.点击查询,便始终从第一页开始查
// 3.点击分页,条件展示回到上一次查询
},
//清空
emptyUser() {
this.initQuery()
this.findTrainStartentityByQuery()
}
},
}
</script>
<style scoped>
.tiedFor {
display: inline;
}
.designRight {
margin-right: 0px;
float: right;
}
.tableDesign {
margin: 5px 0px 10px 5px;
}
</style>
image.png
分页测试用例:
1.分页及页码切换无问题,跳转无问题
2.在已经输入查询条件,但是未点击查询.此时点击分页或者页码容量都不可查询.
3.在已经有筛选条件下查出数据,此时操作分页等,是在查询条件的基础下进行操作
4.若第二页只有一条数据,删除这一条数据,应该跳往第一页
5.经查询条件查询出数据后,删除一条数据,分页仍无问题
6.每次点击查询,都从第一页开始查
7.测试清空
网友评论