excel.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="upload">
  3. <div class="btn-list">
  4. <el-upload
  5. class="excel-btn"
  6. :action="`${path}/excel/importExcel`"
  7. :headers="{'x-token':token}"
  8. :on-success="loadExcel"
  9. :show-file-list="false"
  10. >
  11. <el-button size="small" type="primary" icon="el-icon-upload2">导入</el-button>
  12. </el-upload>
  13. <el-button class="excel-btn" size="small" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
  14. <el-button class="excel-btn" size="small" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
  15. </div>
  16. <el-table :data="tableData" border row-key="ID" stripe>
  17. <el-table-column label="ID" min-width="100" prop="ID" />
  18. <el-table-column label="路由Name" min-width="160" prop="name" />
  19. <el-table-column label="路由Path" min-width="160" prop="path" />
  20. <el-table-column label="是否隐藏" min-width="100" prop="hidden">
  21. <template slot-scope="scope">
  22. <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
  23. </template>
  24. </el-table-column>
  25. <el-table-column label="父节点" min-width="90" prop="parentId" />
  26. <el-table-column label="排序" min-width="70" prop="sort" />
  27. <el-table-column label="文件路径" min-width="360" prop="component" />
  28. </el-table>
  29. </div>
  30. </template>
  31. <script>
  32. const path = process.env.VUE_APP_BASE_API
  33. import { mapGetters } from 'vuex'
  34. import infoList from '@/mixins/infoList'
  35. import { exportExcel, loadExcelData, downloadTemplate } from '@/api/excel'
  36. import { getMenuList } from '@/api/menu'
  37. export default {
  38. name: 'Excel',
  39. mixins: [infoList],
  40. data() {
  41. return {
  42. listApi: getMenuList,
  43. path: path
  44. }
  45. },
  46. computed: {
  47. ...mapGetters('user', ['userInfo', 'token'])
  48. },
  49. created() {
  50. this.pageSize = 999
  51. this.getTableData()
  52. },
  53. methods: {
  54. handleExcelExport(fileName) {
  55. if (!fileName || typeof fileName !== 'string') {
  56. fileName = 'ExcelExport.xlsx'
  57. }
  58. exportExcel(this.tableData, fileName)
  59. },
  60. loadExcel() {
  61. this.listApi = loadExcelData
  62. this.getTableData()
  63. },
  64. downloadExcelTemplate() {
  65. downloadTemplate('ExcelTemplate.xlsx')
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. .btn-list{
  72. display: flex;
  73. margin-bottom: 12px;
  74. .excel-btn+.excel-btn{
  75. margin-left: 12px;
  76. }
  77. }
  78. </style>