admin-sjzx/src/views/pqs/supervise/technology/feedbackPopup.vue

<template>
    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="450px" top="30vh">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
                <el-form-item label="问题详情：">
                    <el-input v-model="form.issueDetail" disabled autocomplete="off" type="textarea"
                        :autosize="{ minRows: 2, maxRows: 6 }" readonly />
                </el-form-item>
                <el-form-item label="整改意见：">
                    <el-input v-model="form.reformAdvice" autocomplete="off" disabled type="textarea"
                        :autosize="{ minRows: 2, maxRows: 6 }" readonly />
                </el-form-item>

                <el-form-item label="技术监督报告：" v-if="showFile1">
                    <el-icon class="elView" v-if="supervisionReportDetail?.supervisionReportName">
                        <View @click="openFile(supervisionReportDetail?.supervisionReportName)" />
                    </el-icon>
                   <span class="aLoad" @click="download(supervisionReportDetail.keyName)" target="_blank">
                        {{ supervisionReportDetail.supervisionReportName }}
                   </span >
                </el-form-item>

                <el-form-item label="问题附件：" v-if="showFile">
                    <el-icon class="elView" v-if="problemDetail?.problemName">
                        <View @click="openFile(problemDetail?.problemName)" />
                    </el-icon>
                   <span class="aLoad" @click="download(supervisionReportDetail.keyName)" target="_blank">{{ problemDetail.problemName }}</a>
                </el-form-item>

                <el-form-item label="采取的措施：" prop="takeStep">
                    <el-input v-model="form.takeStep" autocomplete="off" placeholder="请输入采取的措施" type="textarea" />
                </el-form-item>
                <el-form-item label="反馈报告：" class="uploadFile" prop="reportPath">
                    <el-upload v-model:file-list="form.reportPath" ref="uploadRef" action="" :accept="acceptType"
                        :limit="1" :on-exceed="handleExceed" :on-change="choose" :auto-upload="false"
                        :on-progress="uploadFileName('reportPath')" :on-remove="removeFile">
                        <template #trigger>
                            <el-button type="primary">上传文件</el-button>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-scrollbar>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <!-- <el-button type="primary" @click="submit">确认</el-button> -->
                <el-button type="primary" @click="submit(true)" :loading="loading">保存</el-button>
                <el-button type="primary" @click="submit(false)" :loading="loading">提交审批</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, reactive, nextTick } from 'vue'
import { ElMessage, genFileId, UploadProps, UploadRawFile } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getFileNameAndFilePath, uploadFile } from '@/api/system-boot/file'
import { addFeedback, updateFeedback } from '@/api/supervision-boot/leaflet'
import {download} from  '@/utils/fileDownLoad'
import { Link, View } from '@element-plus/icons-vue'
const openFile = (name: any) => {
    window.open(window.location.origin + '/#/previewFile?/supervision/' + name)
}
//.doc,.docx,.xlsx,.xls,.pdf
const acceptType = ref('')
//下拉数据源
const title = ref('')
const loading = ref(false)
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 上传报告
const uploadRef = ref()
const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const form = ref({
    id: '',
    status: '',
    issueDetail: '',
    reformAdvice: '',
    takeStep: '',
    reportPath: []
})
//附件是否显示
const showFile = ref(false)
const showFile1 = ref(false)

const problemDetail = reactive({
    problemPath: '',
    problemName: '',
    keyName: ''
})
const supervisionReportDetail = reactive({
    supervisionReportPath: '',
    supervisionReportName: '',
    keyName: ''
})

//处理成效报告
const reportFilePath: any = ref('')

//form表单校验规则
const rules = {
    takeStep: [{ required: true, message: '请输入采取的措施', trigger: 'blur' }],
    reportPath: [{ required: true, message: '请上传处理成效报告', trigger: 'blur' }]
}
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const open = async (
    text: string,
    id: string,
    status: any,
    issueDetail: string,
    problemPath?: string,
    supervisionReport?: string,
    reformAdvice?: string,
    takeStep?: string,
    reportPath?: string
) => {
    title.value = text
    resetForm()
    if (takeStep) {
        form.value.takeStep = takeStep
    }
    // uploadRef.value?.clearFiles()
    if (reportPath) {
        form.value.reportPath = JSON.parse(
            JSON.stringify([
                {
                    name: reportPath?.split('/')[2]
                }
            ])
        )
    }
    form.value.id = id
    form.value.status = status
    form.value.issueDetail = issueDetail || ''
    form.value.reformAdvice = reformAdvice || ''
    reportFilePath.value = reportPath
    //判断附件是否存在，如果存在则回显出让用户可以点击下载
    if (problemPath) {
        let arrPath = problemPath.split(',')
        await getFileNameAndFilePath({ filePath: arrPath[0] }).then(res => {
            problemDetail.keyName = res.data.name
            problemDetail.problemPath = res.data.url
            problemDetail.problemName = res.data.fileName
        })
        showFile.value = true
    } else {
        showFile.value = false
    }
    if (supervisionReport) {
        let arrPath = supervisionReport.split(',')
        console.log('🚀 ~ arrPath:', arrPath)
        await getFileNameAndFilePath({ filePath: arrPath[0] }).then(res => {
            supervisionReportDetail.keyName = res.data.name
            supervisionReportDetail.supervisionReportPath = res.data.url
            supervisionReportDetail.supervisionReportName = res.data.fileName
        })
        showFile1.value = true
    } else {
        showFile1.value = false
    }

    dialogVisible.value = true
}
//移除文件上传
const removeFile = (file: any, uploadFiles: any) => {
    console.log(file, uploadFiles)
}
const close = () => {
    dialogVisible.value = false
    form.value = {
        id: '',
        status: '',
        issueDetail: '',
        reformAdvice: '',
        takeStep: '',
        reportPath: []
    }
    resetForm()
}
/**
 * 提交用户表单数据
 */
const submit = async (flag: boolean) => {
    loading.value = true
    if (flag) {
        let subForm = JSON.parse(JSON.stringify(form.value))
        subForm = {
            ...subForm,
            reportPath: form.value.reportPath.length > 0 ? reportFilePath.value : null
        }
        subForm.saveOrCheckflag = '1'
        //此时该告警单处于待反馈状态
        await addFeedback(subForm).then(res => {
            //查询进线数据，避免一直处于loading状态
            ElMessage.success('保存成功！')
            tableStore.index()
            dialogVisible.value = false
        })
    } else {
        formRef.value.validate(async (valid: any) => {
            if (valid) {
                let subForm = JSON.parse(JSON.stringify(form.value))
                subForm = {
                    ...subForm,
                    reportPath: form.value.reportPath.length > 0 ? reportFilePath.value : null
                }
                if (!reportFilePath.value) {
                    return ElMessage({
                        message: '请上传处理成效报告',
                        type: 'warning'
                    })
                }
                subForm.saveOrCheckflag = '2'
                if (form.value.status == '3') {
                    await updateFeedback(subForm).then(res => {
                        ElMessage.success('重新发起成功')
                        tableStore.index()
                        dialogVisible.value = false
                    })
                } else {
                    //此时该告警单处于待反馈状态
                    await addFeedback(subForm).then(res => {
                        //查询进线数据，避免一直处于loading状态
                        ElMessage.success('申请成功')
                        tableStore.index()
                        dialogVisible.value = false
                    })
                }
            }
        })
    }
    await setTimeout(() => {
        loading.value = false
    }, 0)
}

defineExpose({ open })

let uploadName = ref('')
const choose = (e: any) => {
    uploadFile(e.raw, '/supervision/').then(res => {
        reportFilePath.value = res.data.name
        // form.value.reportPath = res.data.name
    })
}

const handleExceed: UploadProps['onExceed'] = files => {
    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
}

//上传报告改变
const uploadFileName = val => {
    uploadName.value = val
}
</script>

<style scoped lang="scss">
.el-upload-list__item {
    transition: none !important;
}

.el-select {
    min-width: 180px;
}

.elView {
    cursor: pointer;
    margin-right: 10px;
}
</style>