index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <fs-page>
  3. <fs-crud ref="crudRef" v-bind="crudBinding">
  4. <template #actionbar-right>
  5. <el-button type="primary" @click="handleBatchImport" class="batch-imports">批量导入</el-button>
  6. <el-button type="primary" @click="handleExports" >批量导出</el-button>
  7. <el-button type="primary" @click="handleDownloadTemplate">下载模板</el-button>
  8. <el-button type="danger" @click="handleBatchDelete" >批量删除</el-button>
  9. </template>
  10. <!-- <template #pagination-left>
  11. <el-tooltip content="批量删除">
  12. <fs-button @click="handleBatchDelete">批量删除</fs-button>
  13. </el-tooltip>
  14. </template>-->
  15. </fs-crud>
  16. <el-dialog v-model="importDialogVisible" title="批量导入设备" width="30%">
  17. <el-upload
  18. ref="uploadRef"
  19. :auto-upload="false"
  20. :file-list="fileList"
  21. :limit="1"
  22. :on-change="handleFileChange"
  23. :before-upload="() => false"
  24. accept=".xls,.xlsx"
  25. >
  26. <el-button type="primary">选择文件</el-button>
  27. </el-upload>
  28. <template #footer>
  29. <el-button @click="importDialogVisible = false">取消</el-button>
  30. <el-button type="primary" @click="submitImport">确认导入</el-button>
  31. </template>
  32. </el-dialog>
  33. </fs-page>
  34. </template>
  35. <script lang="ts" setup name="device">
  36. import { onMounted ,ref} from 'vue';
  37. import { useFs} from '@fast-crud/fast-crud';
  38. import { createCrudOptions } from './crud';
  39. import * as api from './api';
  40. // import { GetPermission } from './api';
  41. // import { handleColumnPermission } from '/@/utils/columnPermission';
  42. import { ElMessage } from 'element-plus';
  43. import axios from 'axios'
  44. import Cookies from 'js-cookie';
  45. import {request, downloadFile,downloadFilePost } from '/@/utils/service';
  46. const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });
  47. const importDialogVisible = ref(false);
  48. const fileList = ref<File[]>([]);
  49. const handleBatchImport = () => {
  50. importDialogVisible.value = true;
  51. };
  52. const handleFileChange = (file: any) => {
  53. fileList.value = [file.raw];
  54. };
  55. const submitImport = async () => {
  56. if (fileList.value.length === 0) {
  57. ElMessage.warning('请先选择文件');
  58. return;
  59. }
  60. const rawFile = fileList.value[0];
  61. if (!rawFile) {
  62. ElMessage.error('文件无效,请重新选择');
  63. return;
  64. }
  65. const formData = new FormData();
  66. formData.append('file', rawFile);
  67. const token = Cookies.get('token');
  68. try {
  69. await request({
  70. url: '/api/system/device/batch_import/',
  71. method: 'post',
  72. data: formData,
  73. headers: {
  74. 'Content-Type': 'multipart/form-data',
  75. "Authorization": token ? `JWT ${token}` : ''
  76. }
  77. }).then((res: any) => {
  78. console.log("导入resssss:::",res)
  79. ElMessage.success(res.msg);
  80. importDialogVisible.value = false;
  81. fileList.value = [];
  82. crudExpose.doRefresh();
  83. })
  84. } catch (error) {
  85. ElMessage.error('导入失败,请检查文件格式或内容');
  86. console.error(error);
  87. }
  88. };
  89. const handleExports = async () => {
  90. const selectedRows = (crudExpose as any).selectedIds?.value || [];
  91. console.log("selectedRows::",selectedRows)
  92. if (selectedRows.length === 0) {
  93. ElMessage.warning('请先选择要导出的设备')
  94. return
  95. }
  96. downloadFilePost({
  97. url: '/api/system/device/export_selected/',
  98. method: 'post',
  99. data: {
  100. device_ids: selectedRows
  101. },
  102. filename: '设备导出'
  103. })
  104. }
  105. const handleDownloadTemplate =async () =>{
  106. downloadFile({
  107. url: '/api/system/device/download_template/',
  108. method: 'get',
  109. filename: '设备模板'
  110. })
  111. }
  112. const handleBatchDelete= async () => {
  113. const selectedRows = (crudExpose as any).selectedIds?.value || [];
  114. console.log("selectedRows::",selectedRows)
  115. if (selectedRows.length === 0) {
  116. ElMessage.warning('请先选择要删除的设备')
  117. return
  118. }
  119. await request({
  120. url: '/api/system/device/multiple_delete/',
  121. method: 'delete',
  122. data: {
  123. keys: selectedRows
  124. },
  125. }).then((res: any) => {
  126. ElMessage.success('删除成功');
  127. crudExpose.doRefresh();
  128. })
  129. }
  130. // 页面打开后获取列表数据
  131. onMounted(async () => {
  132. // 设置列权限
  133. // const newOptions = await handleColumnPermission(GetPermission, crudOptions);
  134. //重置crudBinding
  135. // resetCrudOptions(newOptions);
  136. // 刷新
  137. crudExpose.doRefresh();
  138. });
  139. </script>
  140. <style scoped>
  141. .batch-imports{
  142. margin-left: 10px;
  143. }
  144. </style>