smart-bid-web/src/views/analysis/components/AnalysisForm.vue

<template>
    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
    <el-dialog class="l-dialog" :class="[lDialog, { 'no-pointer-events': showUploadAnimation }]" :title="title" :visible.sync="dialogVisible" :showClose="true"
        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
        <div>
            <!-- 全局上传动画 -->
            <GlobalUploadAnimation v-if="showUploadAnimation" :text="animationText" subtext="正在处理文件，请稍候..." />
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
                <el-form-item label="选择模板" prop="templateId">
                    <el-select v-model="form.templateId" placeholder="请选择模板" class="form-item"
                        @change="handleTemplateChange">
                        <el-option v-for="item in modelList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-for="(item, index) in uploadType" :key="index" :label="item"
                    :prop="`fileList${index + 1}`">
                    <UploadFile :fileList="form[`fileList${index + 1}`]" @file-change="handleFileChange"
                        @del-file="handleDelFile" :type="`fileList${index + 1}`" :uploadType="defaultParams.uploadType"
                        :maxFileTips="defaultParams.maxFileTips" :fileUploadRule="defaultParams.fileUploadRule"
                        :limitUploadNum="defaultParams.limitUploadNum" />
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" class="confirm-btn" @click="submitForm('ruleForm')">确认</el-button>
            <el-button class="cancel-btn" @click="handleClose">取消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import _ from 'lodash'
import UploadFile from '@/views/common/UploadFile.vue'
import GlobalUploadAnimation from '@/views/common/GlobalUploadAnimation.vue'
import { getAnalysisTemplateSelectApi } from '@/api/common/select'
import { addDataAPI } from '@/api/analysis/analysis'
// 默认参数
const defaultParams = {
    fileUploadRule: {
        fileUploadType: 'bidding',
        fields_json: '',
        suffix: 'analysis_database',
    },
    uploadType: 'pdf、doc、docx',
    maxFileTips: '500MB',
    limitUploadNum: 1,
}

export default {
    name: 'AnalysisForm',
    components: {
        UploadFile,
        GlobalUploadAnimation
    },
    props: ['width', 'rowData', 'title'],
    data() {
        return {
            lDialog: this.width > 500 ? 'w700' : 'w500',
            dialogVisible: true,
            defaultParams,
            uploadType: [],
            modelList: [],
            showUploadAnimation: false,
            animationText: '识别中',
            uploadQueue: 0, // 上传队列计数器
            form: {
                templateId: null,
                delFileList: [],
            },
            rules: {
                templateId: [
                    {
                        required: true,
                        message: '请选择模板',
                        trigger: 'change',
                    },
                ],
            },
        }
    },
    watch: {
        uploadType: {
            handler(newVal, oldVal) {
                if (newVal && newVal.length > 0) {
                    // 立即清除验证
                    this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
                    if (oldVal && oldVal.length > 0) {
                        oldVal.forEach((item, index) => {
                            this.$delete(this.form, `fileList${index + 1}`)
                            this.$delete(this.rules, `fileList${index + 1}`)
                        })
                    }

                    newVal.forEach((item, index) => {
                        this.$set(this.form, `fileList${index + 1}`, [])
                        this.$set(this.rules, `fileList${index + 1}`, [
                            {
                                required: true,
                                message: `请上传${item}`,
                                trigger: ['change'],
                            },
                        ])
                    })

                    this.$nextTick(() => {
                        this.$refs.ruleForm &&
                            this.$refs.ruleForm.clearValidate()
                    })
                }
            },
            immediate: true,
        },
    },
    created() {
        this.getAnalysisTemplateSelect()
    },
    methods: {
        // 获取招标解析模板下拉选
        async getAnalysisTemplateSelect() {
            const res = await getAnalysisTemplateSelectApi()
            if (res.code === 200) {
                this.modelList = res.data
            }
        },

        /* 模板变化选择对应的需要上传的文件 */
        handleTemplateChange(val) {
            const uploadType = this.modelList.find(
                (item) => item.id === val,
            ).uploadType
            this.uploadType = uploadType.split(',')
        },
        // 文件变化
        handleFileChange(file, fileName) {
            console.log(file)
            this.form[fileName] = file
            this.$refs.ruleForm && this.$refs.ruleForm.clearValidate([fileName])

        },
        // 文件删除时触发
        handleDelFile(file) {
            console.log(file)
            const delPath =
                file?.response?.fileRes?.filePath || file?.filePath || null
            if (delPath) {
                this.form.delFileList.push(delPath)
            }
        },
        /*关闭弹窗 */
        handleClose() {
            this.dialogVisible = false
            this.$emit('closeDialog')
        },
        /**确认弹窗 */
        sureBtnClick() {
            this.dialogVisible = false
            this.$emit('closeDialog')
        },
        /**重置表单*/
        reset() {
            this.form = {
                id: null,
                pid: null,
                templateId: null,
                fileList: [],
                delFileList: [],
                remark: '',
            }
            this.resetForm('ruleForm')
        },
        handleReuslt(res) {
            this.$modal.msgSuccess(res.msg)
            this.reset()
            this.$emit('handleQuery')
            this.handleClose()
        },
        validate(formName) {
            return new Promise((resolve, reject) => {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        resolve(this.form) // 校验成功返回表单数据
                    } else {
                        reject(new Error('数据未填写完整'))
                    }
                })
            })
        },
        /**验证 */
        async submitForm(formName) {
            try {
                const data = await this.validate(formName)
                // 所有校验通过，组装完整数据
                let formData = {
                    ...data,
                    allFiles: [
                        ...data.fileList.map((file) =>
                            JSON.parse(JSON.stringify(file)),
                        ),
                    ],
                    delFiles: [...data.delFileList],
                }

                let allFiles = formData.allFiles
                    .map((file) => {
                        return file?.response?.fileRes
                            ? {
                                ...file.response.fileRes,
                            }
                            : null
                    })
                    .filter((item) => item !== null)
                formData.files = allFiles
                delete formData.fileList
                delete formData.delFileList
                delete formData.allFiles
                // 显示遮罩层
                this.loading = this.$loading({
                    lock: true,
                    text: '数据提交中，请稍候...',
                    background: 'rgba(0,0,0,0.5)',
                    target:
                        this.$el.querySelector('.el-dialog') || document.body,
                })
                console.log('所有表单校验通过，完整数据:', formData)
                /* const res = await this.saveData(formData)
                if (res.code === 200) {
                    this.handleReuslt(res)
                } else {
                    this.$modal.msgError(res.msg)
                } */
            } catch (error) {
            } finally {
                if (this.loading) {
                    this.loading.close()
                }
            }
        },

        // 保存接口
        async saveData(formData) {
            return new Promise((resolve, reject) => {
                if (this.isAdd === 'add') {
                    // 新增
                    addDataAPI(formData)
                        .then((res) => {
                            resolve(res)
                        })
                        .catch((error) => {
                            reject(error)
                        })
                }
            })
        },
        // 开始上传
        handleStartUpload(data) {
            this.animationText = data
            this.uploadQueue++
            this.showUploadAnimation = true
        },
        // 结束上传
        handleEndUpload(data) {
            if (this.uploadQueue > 0) {
                this.uploadQueue--
            }

            // 如果队列为空，隐藏动画
            if (this.uploadQueue === 0) {
                this.showUploadAnimation = false
            }
        },
    },
    mounted() {
        // 监听上传开始事件
        this.$bus.$on('startUpload', this.handleStartUpload)

        // 监听上传结束事件
        this.$bus.$on('endUpload', this.handleEndUpload)
    },
    beforeDestroy() {
        // 移除所有事件监听
        this.$bus.$off('startUpload', this.handleStartUpload)
        this.$bus.$off('endUpload', this.handleEndUpload)

        // 重置状态
        this.showUploadAnimation = false
        this.uploadQueue = 0
        this.animationText = '识别中'
    },
}
</script>
<style lang="scss" scoped>
.w700 ::v-deep .el-dialog {
    width: 700px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    margin: 5vh auto !important;
}

.w500 ::v-deep .el-dialog {
    width: 500px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    margin: 5vh auto !important;
}

.w500 ::v-deep .el-dialog__header,
.w700 ::v-deep .el-dialog__header {
    flex-shrink: 0;

    .el-dialog__title {
        font-size: 16px;
    }
}

.w500 ::v-deep .el-dialog__body,
.w700 ::v-deep .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    min-height: 0;

    // 自定义滚动条样式
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;

        &:hover {
            background: rgba(0, 0, 0, 0.3);
        }
    }
}

.w500 ::v-deep .el-dialog__footer,
.w700 ::v-deep .el-dialog__footer {
    flex-shrink: 0;
    text-align: center;
}

// 当显示动画时，禁用弹窗点击
.w500 ::v-deep .el-dialog.no-pointer-events,
.w700 ::v-deep .el-dialog.no-pointer-events {
    pointer-events: none;

    // 子元素也继承禁用点击
    * {
        pointer-events: none;
    }
}

.yxq .el-range-separator {
    margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
    width: 260px;
}

.form-item {
    width: 100%;
}

.select-style {
    display: flex;
    justify-content: space-between;
}

.confirm-btn {
    width: 98px;
    height: 36px;
    background: #1f72ea;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #4a8bff;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
}

.cancel-btn {
    width: 98px;
    height: 36px;
    background: #e5e5e5;
    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
    border-radius: 4px 4px 4px 4px;
    color: #333;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #d0d0d0;
        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
    }
}
</style>