admin-sjzx/src/views/pqs/supervise/harmonicSurvey/components/outcome.vue

<template>
    <div>
        <TableHeader area datePicker ref="TableHeaderRef">
            <template #select>
                <el-form-item label="是否上传">
                    <el-select v-model="tableStore.table.params.isFileUpload" placeholder="请选择是否上传">
                        <el-option label="未上传" value="0" />
                        <el-option label="已上传" value="1" />
                    </el-select>
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Upload" type="primary">上传</el-button>
                <el-button icon="el-icon-Download" type="primary">导出</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
        <!-- 上传弹窗 -->
        <el-dialog draggable title="上传" v-model="addUpload" width="500px">
            <el-upload
                multiple
                action=""
                :auto-upload="false"
                :limit="999"
                :file-list="fileList"
                :on-remove="handleRemove"
                :on-change="chooseBatch"
                ref="upload"
            >
                <el-button type="primary" icon="el-icon-Upload">选择文件</el-button>
            </el-upload>
            <template #footer>
                <el-button type="primary" @click="BatchUpload">保存</el-button>
                <el-button @click="handleClose">取消</el-button>
            </template>
        </el-dialog>
        <!-- 文件查看 -->
        <el-dialog draggable title="文件查看" v-model="dataShow" width="600px">
            <vxe-table height="400" auto-resize :data="uploadList" v-bind="defaultAttribute">
                <vxe-column field="minFileName" title="文件名称"></vxe-column>

                <vxe-column title="操作" width="100">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" link @click="downLownFn(row)">下载</el-button>
                        <!-- <el-popconfirm title="是否确认删除策略！" @confirm="details(row)">
                                <template #reference>
                                    <el-button type="danger" link>删除</el-button>
                                </template>
                            </el-popconfirm> -->
                    </template>
                </vxe-column>
            </vxe-table>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { MultipartFile, surveyResultDownload } from '@/api/process-boot/generalTest'

const dictData = useDictData()

const addUpload = ref(false)
const dataShow = ref(false)
const TableHeaderRef = ref()
const fileList: any = ref([])
const uploadList: any = ref([])

const planId = ref('')
const tableStore = new TableStore({
    url: '/process-boot/rGeneralSurveyPlan/queryPlanResult',
    publicHeight: 65,
    method: 'POST',
    column: [
        // { width: '60', type: 'checkbox' },
        { field: 'orgName', title: '责任单位' },
        { field: 'planNo', title: '普测计划编号' },
        { field: 'planName', title: '普测计划名称' },
        { field: 'planStartTime', title: '开始时间' },
        { field: 'planEndTime', title: '结束时间' },
        { field: 'subCount', title: '普测变电站数量' },
        {
            field: 'isFileUpload',
            title: '是否上传',
            render: 'tag',
            custom: {
                0: 'warning',
                1: 'success'
            },
            replaceValue: {
                0: '否',
                1: '是'
            }
        },
        { field: 'fileCount', title: '上传文件数量' },
        { field: 'uploadTime', title: '上传时间' },
        {
            title: '操作文件',
            width: '180',
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    title: '上传',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        planId.value = row.planNo
                        addUpload.value = true
                    }
                },
                {
                    title: '查看',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    disabled: row => {
                        return row.isFileUpload !== 1
                    },
                    render: 'basicButton',
                    click: row => {
                        surveyResultDownload({ planNo: row.planNo }).then(res => {
                            uploadList.value = res.data
                            dataShow.value = true
                        })
                    }
                }
            ]
        }
    ],

    beforeSearchFun: () => {
        tableStore.table.params.planStartTime = tableStore.table.params.searchBeginTime
        tableStore.table.params.planEndTime = tableStore.table.params.searchEndTime
        tableStore.table.params.orgNo = tableStore.table.params.deptIndex
        tableStore.table.params.currentPage = tableStore.table.params.pageNum
    }
})

tableStore.table.params.isFileUpload = ''

const handleRemove = (e: any) => {
    fileList.value = fileList.value.filter((item: any) => item.uid !== e.uid)
}
const chooseBatch = (e: any) => {
    fileList.value.push(e)
}

// 上传
const BatchUpload = () => {
    let form = new FormData()
    form.append('planId', planId.value)
    fileList.value.forEach((item: any) => {
        form.append('file', item.raw)
    })
    MultipartFile(form).then((res: any) => {
        ElMessage.success('上传成功!')
        handleClose()
        tableStore.index()
    })
}
const handleClose = () => {
    fileList.value = []
    addUpload.value = false
}
// 下载
const downLownFn = async (row: any) => {
    let response = await fetch(row.minFileUrl)
    let blob = await response.blob()
    let a = document.createElement('a')
    a.href = window.URL.createObjectURL(blob)
    a.download = row.minFileName
    a.click()
    a.remove()
}

provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
})
</script>