measure/src/views/debit-pay/material/components/order/batchImport.vue

<template>
    <hc-new-dialog ui="hc-order-import-upload-file-box" widths="1200px" :show="isShow" title="材料计量单导入" @close="modalClose">
        <div class="hc-upload-box">
            <el-upload
                ref="uploadRef" :headers="getHeader()" drag :data="formData" accept=".xls,.xlsx"
                :limit="1" :auto-upload="false" action="/api/blade-meter/materialMeterForm/importExcel"
                :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError"
            >
                <div class="text-80px text-gray">
                    <i class="ri-upload-cloud-line" />
                </div>
                <div class="mt-24px text-black">将文件拖动到此处，或点击上传</div>
                <div class="mt-8px text-12px">支持的文件格式：Excel(xls、xlsx)</div>
            </el-upload>
        </div>
        <hc-card-item class="hc-upload-card-item">
            <template #header>
                <span class="mr-10px">选择材料</span>
                <span class="text-12px" style="color: #FF7D43">温馨提示：可多选材料进行批量上传附件</span>
            </template>
            <hc-table
                ref="tableRef" :column="tableColumn" :datas="tableData" :is-current-row="false"
                is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
                @selection-change="tableCheckChange"
            />
        </hc-card-item>
        <template #footer>
            <el-button @click="modalClose">取消</el-button>
            <el-button type="primary" :loading="confirmLoading">确认并继续</el-button>
            <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确认并退出</el-button>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getHeader } from 'hc-vue3-ui'
import { genFileId } from 'element-plus'
import { getArrValue, isNullES, newWindow } from 'js-fast-way'
import mainApi from '~api/debit-pay/material/order'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
    data: {
        type: Array,
        default: () => ([]),
    },
})

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

//监听数据
const contractId = ref(store.getContractId)
const projectId = ref(store.getProjectId)
watch(() => [store.getContractId, store.getProjectId], ([cid, pid]) => {
    contractId.value = cid
    projectId.value = pid
}, { immediate: true, deep: true })

//监听
const ids = ref(props.ids)
watch(() => props.ids, (id) => {
    ids.value = id
}, { immediate: true, deep: true })

//监听数据
const tableData = ref([])
watch(() => props.data, (data) => {
    tableData.value = getArrValue(data)
}, { deep: true, immediate: true })

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

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

//附加数据
const formData = ref({})

const handleExceed = (files) => {
    uploadRef.value?.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadRef.value?.handleStart(file)
}

//确认导入
const confirmLoading = ref(false)
const confirmClick = async () => {
    formData.value = {
        meterPeriodId: ids.value,
        projectId: projectId.value,
        contractId: contractId.value,
    }
    confirmLoading.value = true
    uploadRef.value?.submit()
}

//上传成功
const handleSuccess = (res) => {
    confirmLoading.value = false
    if (res.code === 200) {
        window.$message.success('上传成功')
        modalClose()
        emit('finish')
    } else {
        window.$message.error(res.msg || '上传失败')
    }
}

//上传失败
const handleError = (error) => {
    confirmLoading.value = false
    const { msg } = !isNullES(error.message) ? JSON.parse(error.message) : {}
    if (isNullES(msg)) {
        window.$message.error('上传失败')
    } else {
        window.$message.error(msg)
    }
}

//下载模板
const downloadTemp = async () => {
    const { data } = await mainApi.getImportTemplate()
    if (isNullES(data)) {
        window.$message.warning('暂无相关模板')
        return
    }
    newWindow(data)
}

//选择材料
const tableRef = ref(null)
const tableColumn = [
    { key: 'contractMaterialName', name: '合同材料' },
    { key: 'materialArriveNumber', name: '材料到场编号' },
    { key: 'businessDate', name: '业务日期' },
    { key: 'meterMoney', name: '计量金额' },
]

//表格选择
const tableKeys = ref([])
const tableCheckChange = (rows) => {
    tableKeys.value = rows
}

//关闭弹窗
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">
.hc-upload-box :deep(.el-upload) {
    --el-upload-dragger-padding-horizontal: 20px;
}
.hc-upload-text-tip {
    color: #FF7D43;
}
</style>

<style lang="scss">
.el-overlay-dialog .el-dialog.hc-new-dialog.hc-order-import-upload-file-box .el-dialog__body {
    padding: 14px 4px;
}
.hc-card-item-box.hc-upload-card-item {
    padding: 10px;
    .hc-card-item-header {
        color: unset;
    }
}
</style>