admin/src/views/exctab/excel/excel-upload.vue

<template>
    <hc-dialog v-model="isShow" ui="hc-exctab-exceltab-excel-upload" title="上传Excel表格" widths="800px" @close="dialogClose">
        <div class="upload-div mb-14px">
            <el-upload
                ref="uploadRef" accept=".xls, .xlsx" class="upload-demo" :auto-upload="false" :file-list="[]"
                :on-change="excelHandleChange" :show-file-list="false" multiple
            >
                <el-button type="primary">选择文件</el-button>
            </el-upload>
        </div>
        <hc-table
            ref="tableRef" :column="tableColumn" :datas="tableData" is-row-drop is-sort heights="auto"
            quick-sort style="height: auto" @row-drop="rowDropTap" @row-sort="rowSortTap"
        >
            <template #name="{ row }">
                <hc-table-input v-model="row.name" placeholder="请输入文件名称" />
            </template>
            <template #action="{ index }">
                <el-link type="danger" @click="delRowClick(index)">删除</el-link>
            </template>
        </hc-table>
        <template #footer>
            <el-button hc-btn @click="dialogClose">取消</el-button>
            <el-button hc-btn type="primary" :disabled="tableData.length <= 0" :loading="submitLoading" @click="dialogSubmit">确认上传</el-button>
        </template>
    </hc-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { getObjValue } from 'js-fast-way'
import mainApi from '~api/exctab/exceltab'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听可否编辑
const datas = ref(props.data)
watch(() => props.data, (val) => {
    datas.value = getObjValue(val)
}, { immediate: true, deep: true })

//表格
const tableRef = ref(null)
const tableColumn = [
    { key: 'name', name: '文件名称' },
    { key: 'action', name: '操作', width: 80, align: 'center' },
]
const tableData = ref([])

//上传组件
const uploadRef = ref(null)

//文件被选择
const excelHandleChange = (_, files) => {
    tableData.value = files
}

// 行拖拽
const rowDropTap = (rows) => {
    tableData.value = [] // 先清空，否则排序会异常
    nextTick(() => {
        tableRef.value?.setData(rows)
    })
}

// 点击排序
const rowSortTap = (rows) => {
    tableData.value = [] // 先清空，否则排序会异常
    nextTick(() => {
        tableData.value = rows
    })
}

//删除
const delRowClick = (index) => {
    tableData.value.splice(index, 1)
}

//提交
const submitLoading = ref(false)
const dialogSubmit = async () => {
    submitLoading.value = true
    let formData = new FormData()
    const rows = tableData.value
    rows.forEach(item => {
        formData.append('file', item.raw, item.name)
    })
    const { id } = datas.value
    formData.append('id', id)
    const { code } = await mainApi.batchUploadExcelTab(formData)
    submitLoading.value = false
    if (code === 200) {
        window.$message.success('保存成功')
        dialogClose()
        emit('finish')
    }
}

//关闭弹窗
const dialogClose = () => {
    uploadRef.value?.clearFiles()
    isShow.value = false
    submitLoading.value = false
    tableData.value = []
    datas.value = {}
    emit('close')
}
</script>

<style lang="scss">
.el-overlay-dialog .el-dialog.hc-new-dialog.hc-exctab-exceltab-excel-upload .el-dialog__body{
    padding: 12px 0;
}
</style>