exportDia.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
<div>
<el-dialog :close-on-click-modal="false" :visible.sync="diaShow" width="360px" :show-close="false">
<i class="el-icon-close" @click="closeDia"></i>
<div v-show="exportType == 1">
<div class="down-item">
<p class="tit">是否将学生表现折线图一起导出</p>
<el-radio-group v-model="downType" @change="changeDownType">
<el-radio :label="1">不导出</el-radio>
<el-radio :label="2">导出</el-radio>
</el-radio-group>
</div>
<div class="down-item" v-show="downType == 2">
<p class="tit">选择要导出的学生</p>
<el-radio-group v-model="exportType">
<el-radio :label="1">导出全部</el-radio>
<el-radio :label="2">导出制定学生</el-radio>
</el-radio-group>
</div>
</div>
<ul v-show="exportType == 2">
<p class="export-tit">选择学生</p>
<el-table :data="exportStudent" @selection-change="handleSelectionChange" :max-height="300">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
<el-table-column label="班名" align="center">
<template slot-scope="scoped">{{
scoped.row.classRank || scoped.row.rank }}</template>
</el-table-column>
<el-table-column prop="correctRate" label="总正确率" align="center"><template slot-scope="scoped">{{
scoped.row.correctRate|| scoped.row.scoringRate }}%</template></el-table-column>
</el-table>
</ul>
<div class="dialog-footer" slot="footer">
<el-button v-show="downType == 2" size="small" type="primary" round @click="exportData(10)">导出前十</el-button>
<el-button size="small" type="primary" round @click="exportData(0)">确 定</el-button>
<el-button size="small" type="danger" round @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "exportDia",
props: {
diaShow: Boolean,
exportStudent: Array
},
data() {
return {
downType: 1,
exportType: 1,
multipleSelection: [],
}
},
watch: {
diaShow: {
handler: function (nVal) {
if (nVal) {
this.downType = 1
}
},
immediate: true
}
},
methods: {
changeDownType() {
this.exportType = 1
},
handleSelectionChange(val) {
this.multipleSelection = val
},
exportData(length) {
let studentIds = []
if (length) {
studentIds = this.exportStudent.slice(0, 10).map(item => {
return item.studentId
})
} else {
studentIds = this.multipleSelection.map(item => {
return item.studentId
})
}
this.$emit('exportData', { studentIds: studentIds })
},
cancel() {
if (this.exportType == 2) {
this.exportType = 1
} else {
this.$emit('cancel')
}
},
closeDia() {
this.$emit('cancel')
this.exportType = 1
}
}
}
</script>
<style lang="scss" scoped>
.el-dialog__wrapper {
:deep(.el-icon-close) {
position: absolute;
right: 2px;
top: 5px;
font-size: 18px;
padding: 5px;
cursor: pointer;
}
}
</style>