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

src/pages/course/index.vue

@@ -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

@@ -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

@@ -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('删除学员成功')