excel-upload.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <hc-dialog v-model="isShow" ui="hc-exctab-exceltab-excel-upload" title="上传Excel表格" widths="800px" @close="dialogClose">
  3. <div class="upload-div mb-14px">
  4. <el-upload
  5. ref="uploadRef" accept=".xls, .xlsx" class="upload-demo" :auto-upload="false" :file-list="[]"
  6. :on-change="excelHandleChange" :show-file-list="false" multiple
  7. >
  8. <el-button type="primary">选择文件</el-button>
  9. </el-upload>
  10. </div>
  11. <hc-table
  12. ref="tableRef" :column="tableColumn" :datas="tableData" is-row-drop is-sort heights="auto"
  13. quick-sort style="height: auto" @row-drop="rowDropTap" @row-sort="rowSortTap"
  14. >
  15. <template #name="{ row }">
  16. <hc-table-input v-model="row.name" placeholder="请输入文件名称" />
  17. </template>
  18. <template #action="{ index }">
  19. <el-link type="danger" @click="delRowClick(index)">删除</el-link>
  20. </template>
  21. </hc-table>
  22. <template #footer>
  23. <el-button hc-btn @click="dialogClose">取消</el-button>
  24. <el-button hc-btn type="primary" :disabled="tableData.length <= 0" :loading="submitLoading" @click="dialogSubmit">确认上传</el-button>
  25. </template>
  26. </hc-dialog>
  27. </template>
  28. <script setup>
  29. import { nextTick, ref, watch } from 'vue'
  30. import { getObjValue } from 'js-fast-way'
  31. import mainApi from '~api/exctab/exceltab'
  32. const props = defineProps({
  33. data: {
  34. type: Object,
  35. default: () => ({}),
  36. },
  37. })
  38. //事件
  39. const emit = defineEmits(['finish', 'close'])
  40. //双向绑定
  41. const isShow = defineModel('modelValue', {
  42. default: false,
  43. })
  44. //监听可否编辑
  45. const datas = ref(props.data)
  46. watch(() => props.data, (val) => {
  47. datas.value = getObjValue(val)
  48. }, { immediate: true, deep: true })
  49. //表格
  50. const tableRef = ref(null)
  51. const tableColumn = [
  52. { key: 'name', name: '文件名称' },
  53. { key: 'action', name: '操作', width: 80, align: 'center' },
  54. ]
  55. const tableData = ref([])
  56. //上传组件
  57. const uploadRef = ref(null)
  58. //文件被选择
  59. const excelHandleChange = (_, files) => {
  60. tableData.value = files
  61. }
  62. // 行拖拽
  63. const rowDropTap = (rows) => {
  64. tableData.value = [] // 先清空,否则排序会异常
  65. nextTick(() => {
  66. tableRef.value?.setData(rows)
  67. })
  68. }
  69. // 点击排序
  70. const rowSortTap = (rows) => {
  71. tableData.value = [] // 先清空,否则排序会异常
  72. nextTick(() => {
  73. tableData.value = rows
  74. })
  75. }
  76. //删除
  77. const delRowClick = (index) => {
  78. tableData.value.splice(index, 1)
  79. }
  80. //提交
  81. const submitLoading = ref(false)
  82. const dialogSubmit = async () => {
  83. submitLoading.value = true
  84. let formData = new FormData()
  85. const rows = tableData.value
  86. rows.forEach(item => {
  87. formData.append('file', item.raw, item.name)
  88. })
  89. const { id } = datas.value
  90. formData.append('id', id)
  91. const { code } = await mainApi.batchUploadExcelTab(formData)
  92. submitLoading.value = false
  93. if (code === 200) {
  94. window.$message.success('保存成功')
  95. dialogClose()
  96. emit('finish')
  97. }
  98. }
  99. //关闭弹窗
  100. const dialogClose = () => {
  101. uploadRef.value?.clearFiles()
  102. isShow.value = false
  103. submitLoading.value = false
  104. tableData.value = []
  105. datas.value = {}
  106. emit('close')
  107. }
  108. </script>
  109. <style lang="scss">
  110. .el-overlay-dialog .el-dialog.hc-new-dialog.hc-exctab-exceltab-excel-upload .el-dialog__body{
  111. padding: 12px 0;
  112. }
  113. </style>