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

<template>
    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
        <div>
            <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}`">
                    <UploadMoreFile :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 UploadMoreFile from '@/views/common/UploadMoreFile.vue'
// 默认参数
const defaultParams = {
    fileUploadRule: {
        fileUploadType: 'bidding',
        fields_json: '',
        suffix: 'analysis_database',
    },
    uploadType: 'pdf、doc、docx',
    maxFileTips: '500MB',
    limitUploadNum: 1,
}

export default {
    name: 'AnalysisForm',
    components: {
        UploadMoreFile,
    },
    props: ['width', 'rowData', 'title'],
    data() {
        return {
            lDialog: this.width > 500 ? 'w700' : 'w500',
            dialogVisible: true,
            defaultParams,
            uploadType: [],
            modelList: [
                {
                    id: 1,
                    name: '南网工程类模板',
                    uploadType: '招标文件,招标公告',
                },
                {
                    id: 2,
                    name: '南网服务类模板',
                    uploadType: '评标文件',
                },
            ],
            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,
        },
    },

    methods: {
        /* 模板变化选择对应的需要上传的文件 */
        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)
                        })
                } else {
                    // 修改
                    editDataAPI(formData)
                        .then((res) => {
                            resolve(res)
                        })
                        .catch((error) => {
                            reject(error)
                        })
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.w700 ::v-deep .el-dialog {
    width: 700px;
    font-family: Source Han Sans CN, Source Han Sans CN;
}

.w500 ::v-deep .el-dialog {
    width: 500px;
    font-family: Source Han Sans CN, Source Han Sans CN;
}

.w500 ::v-deep .el-dialog__header,
.w700 ::v-deep .el-dialog__header {
    .el-dialog__title {
        font-size: 16px;
    }
}

.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);
    }
}

::v-deep .el-dialog__footer {
    text-align: center;
}
</style>