Skip to content

C
cert-admin
提交 b132eed5 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

增加表格选中项导出excel功能

上级 62b5eb84
隐藏空白字符变更
内嵌 并排
正在显示 包含 159 行增加 和 27 行删除
src/pages/course/index.vue
浏览文件 @ b132eed5
......@@ -4,14 +4,14 @@
<template #header-aside>
<el-button type="primary" size="mini" @click="drawerVisible = true" v-if="hasCreate">新增</el-button>
<el-button type="primary" size="mini" @click="dialogVisible = true" v-if="hasImport">导入</el-button>
<el-dropdown size="small" @command="handleCommand" v-if="hasExport">
<!-- <el-dropdown size="small" @command="handleCommand" v-if="hasExport">
<el-button type="primary" size="mini" >
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">导出全部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown> -->
</template>
<!-- 课程Id -->
<template v-slot:table_id="scope">
......@@ -39,6 +39,15 @@
<div>
<span v-if="hasDelete">已选中 {{multipleSelection.length}} 项</span>
<el-button style="margin-left:15px;" size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete">删除</el-button>
<el-dropdown size="small" @command="handleCommand" v-if="hasExport">
<el-button type="primary" size="mini">
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">导出全部</el-dropdown-item>
<el-dropdown-item command="selected" :disabled="!multipleSelection.length">导出选中项</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</table-list>
......@@ -91,6 +100,7 @@ import TableList from '@/components/TableList'
import { getCourseList, createCourse, updateCourse, deleteCourse, importCourse, exportCourseList } from '@/api/course'
import { splitStrLast, funDownload } from '@/utils/utils'
import _ from 'lodash'
import XLSX from 'xlsx'
const defaultForm = {
chinese_name: '',
english_name: '',
......@@ -150,14 +160,13 @@ export default {
{ prop: 'chinese_name', label: '课程名称', slots: 'table_name', minWidth: '130px' },
{ prop: 'english_name', label: '课程名称（英）', slots: 'table_en_name', minWidth: '160px' },
{ prop: 'pubdate', label: '发布时间', minWidth: '120px' }
],
bodyHeight: 'calc(100% - 50px)'
]
}
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val.map(item => item.id)
this.multipleSelection = val
},
handleImport() {},
handleRemove() {
......@@ -219,6 +228,37 @@ export default {
},
handleCommand(type) {
if (type === 'all') this.fetchExportAll()
if (type === 'selected') this.exportSelected()
},
exportSelected() {
const list = this.tableOptions.columns.filter(item => {
return item.prop
})
const headList = list.map(item => item.label)
const propList = list.map(item => item.prop)
const excelList = []
excelList.push(headList)
this.multipleSelection.forEach(item => {
const rowValArr = []
propList.forEach(key => {
rowValArr.push(item[key])
})
excelList.push(rowValArr)
})
const ws = XLSX.utils.aoa_to_sheet(excelList)
ws['!cols'] = [
{ wpx: 160 },
{ wpx: 180 },
{ wpx: 200 },
{ wpx: 160 }
]
const wb = XLSX.utils.book_new()
wb.SheetNames.push('Worksheet')
wb.Sheets.Worksheet = ws
const wopts = { bookType: 'xlsx', bookSST: false, type: 'array' }
const wbout = XLSX.write(wb, wopts)
const url = URL.createObjectURL(new window.Blob([wbout], { type: 'application/octet-stream' }))
funDownload(url, `课程信息表_${Date.now()}.xlsx`)
},
fetchExportAll() {
exportCourseList(this.tableOptions.remote.params).then(res => {
......@@ -254,7 +294,7 @@ export default {
})
},
fetchDeleteCourse() {
const ids = this.multipleSelection.join()
const ids = this.multipleSelection.map(item => item.id).join()
deleteCourse(ids).then(res => {
const msg = '删除课程'
if (res.code === 0 && res.message === 'OK') {
......
src/pages/project/index.vue
浏览文件 @ b132eed5
......@@ -3,14 +3,14 @@
<table-list v-bind="tableOptions" ref="tabList" @selection-change="handleSelectionChange">
<template #header-aside>
<el-button type="primary" size="mini" @click="handleCreate" v-if="hasCreate">新增</el-button>
<el-dropdown size="small" @command="handleExportCommand" v-if="hasExport">
<!-- <el-dropdown size="small" @command="handleExportCommand" v-if="hasExport">
<el-button type="primary" size="mini">
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">导出全部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown> -->
</template>
<!-- 中文名 -->
<template v-slot:table_name="scope">
......@@ -47,6 +47,15 @@
<div>
已选中 {{multipleSelection.length}} 项
<el-button style="margin-left:15px;" size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete">删除</el-button>
<el-dropdown size="small" @command="handleExportCommand" v-if="hasExport">
<el-button type="primary" size="mini">
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">导出全部</el-dropdown-item>
<el-dropdown-item command="selected" :disabled="!multipleSelection.length">导出选中项</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</table-list>
......@@ -90,6 +99,7 @@ import TabStudent from './components/student.vue'
import TabCourse from './components/course.vue'
import InfoForm from './components/InfoForm'
import { getProjectList, createProject, deleteProject, exportProjectList } from '@api/project'
import XLSX from 'xlsx'
import { funDownload } from '@/utils/utils'
const drawerTitleMap = {
project: '新增项目',
......@@ -176,14 +186,14 @@ export default {
return row.students.length
}
},
{ prop: 'operate', label: '操作', slots: 'table-operate', minWidth: '120px', fixed: 'right' }
{ label: '操作', slots: 'table-operate', minWidth: '120px', fixed: 'right' }
]
}
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val.map(item => item.id)
this.multipleSelection = val
},
handleCreate() {
this.createDrawerVisible = true
......@@ -229,6 +239,46 @@ export default {
},
handleExportCommand(type) {
if (type === 'all') this.fetchExportAll()
if (type === 'selected') this.exportSelected()
},
exportSelected() {
const list = this.tableOptions.columns.filter(item => {
return item.prop && item.prop !== 'head_img'
})
const headList = list.map(item => item.label)
const propList = list.map(item => item.prop)
const excelList = []
excelList.push(headList)
this.multipleSelection.forEach(item => {
const rowValArr = []
propList.forEach(key => {
let val = item[key]
if (key === 'type') val = val === 1 ? '长期' : '短期'
if (['courses', 'students'].includes(key)) val = val.length
rowValArr.push(val)
})
excelList.push(rowValArr)
})
console.log(XLSX)
const ws = XLSX.utils.aoa_to_sheet(excelList)
ws['!cols'] = [
{ wpx: 180 },
{ wpx: 160 },
{ wpx: 180 },
{ wpx: 80 },
{ wpx: 160 },
{ wpx: 100 },
{ wpx: 160 },
{ wpx: 80 },
{ wpx: 80 }
]
const wb = XLSX.utils.book_new()
wb.SheetNames.push('Worksheet')
wb.Sheets.Worksheet = ws
const wopts = { bookType: 'xlsx', bookSST: false, type: 'array' }
const wbout = XLSX.write(wb, wopts)
const url = URL.createObjectURL(new window.Blob([wbout], { type: 'application/octet-stream' }))
funDownload(url, `项目信息表_${Date.now()}.xlsx`)
},
fetchExportAll() {
exportProjectList(this.tableOptions.remote.params).then(res => {
......@@ -251,7 +301,7 @@ export default {
})
},
fetchDeleteProject() {
const ids = this.multipleSelection.join()
const ids = this.multipleSelection.map(item => item.id).join()
deleteProject(ids).then(res => {
const msg = '删除项目'
if (res.code === 0 && res.message === 'OK') {
......
src/pages/student/index.vue
浏览文件 @ b132eed5
......@@ -3,14 +3,6 @@
<table-list v-bind="tableOptions" ref="tabList" @selection-change="handleSelectionChange">
<template #header-aside>
<el-button type="primary" size="mini" @click="dialogVisible = true" v-if="hasImport">导入</el-button>
<el-dropdown size="small" @command="handleCommand" v-if="hasExport">
<el-button type="primary" size="mini">
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">导出全部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<!-- 图片 -->
<template v-slot:table_img="{ row }">
......@@ -55,6 +47,15 @@
<div>
已选中 {{multipleSelection.length}} 项
<el-button style="margin-left:15px;" size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete">删除</el-button>
<el-dropdown size="small" @command="handleCommand" v-if="hasExport">
<el-button type="primary" size="mini">
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="all">导出全部</el-dropdown-item>
<el-dropdown-item command="selected" :disabled="!multipleSelection.length">导出选中项</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</table-list>
......@@ -116,12 +117,9 @@ import TabDegree from './components/degree.vue'
import TabCourse from './components/course.vue'
import { getStudentList, deleteStudent, importStudents, exportStudentList } from '@/api/student'
import _ from 'lodash'
import XLSX from 'xlsx'
import { splitStrLast, funDownload } from '@/utils/utils'
const genderMap = {
0: '女',
1: '男',
2: '未知'
}
const genderMap = { 0: '女', 1: '男', 2: '未知' }
export default {
components: { TableList, TabInfo, TabDegree, TabCourse },
data() {
......@@ -237,7 +235,7 @@ export default {
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val.map(item => item.id)
this.multipleSelection = val
},
handleRemove() {
this.$confirm('确定删除选中项?', '提示', {
......@@ -300,10 +298,54 @@ export default {
},
handleCommand(type) {
if (type === 'all') this.fetchExportAll()
if (type === 'selected') this.exportSelected()
},
exportSelected() {
const list = this.tableOptions.columns.filter(item => {
return item.prop && item.prop !== 'head_img'
})
const headList = list.map(item => item.label)
const propList = list.map(item => item.prop)
const excelList = []
excelList.push(headList)
this.multipleSelection.forEach(item => {
const rowValArr = []
propList.forEach(key => {
let val = item[key]
if (key === 'gender') val = genderMap[val]
if (key === 'is_student') val = val === 1 ? '有' : '无'
rowValArr.push(val)
})
excelList.push(rowValArr)
})
const ws = XLSX.utils.aoa_to_sheet(excelList)
ws['!cols'] = [
{ wpx: 160 },
{ wpx: 120 },
{ wpx: 120 },
{ wpx: 120 },
{ wpx: 140 },
{ wpx: 80 },
{ wpx: 80 },
{ wpx: 120 },
{ wpx: 120 },
{ wpx: 120 },
{ wpx: 100 },
{ wpx: 120 },
{ wpx: 160 },
{ wpx: 120 },
{ wpx: 160 }
]
const wb = XLSX.utils.book_new()
wb.SheetNames.push('Worksheet')
wb.Sheets.Worksheet = ws
const wopts = { bookType: 'xlsx', bookSST: false, type: 'array' }
const wbout = XLSX.write(wb, wopts)
const url = URL.createObjectURL(new window.Blob([wbout], { type: 'application/octet-stream' }))
funDownload(url, `学生信息表_${Date.now()}.xlsx`)
},
fetchExportAll() {
exportStudentList(this.tableOptions.remote.params).then(res => {
console.log(res)
if (res && res.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
const url = URL.createObjectURL(res)
funDownload(url, `学生信息表_${Date.now()}.xlsx`)
......@@ -311,7 +353,7 @@ export default {
})
},
fetchDeleteStudents() {
const ids = this.multipleSelection.join()
const ids = this.multipleSelection.map(item => item.id).join()
deleteStudent(ids).then(res => {
if (res.code === 0 && res.message === 'OK') {
this.$message.success('删除学员成功')
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论