smart-bid-web/src/views/analysis/components/BidForm.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="markName">
                    <el-input v-model.trim="form.markName" placeholder="请输入标的名称" clearable show-word-limit
                        maxlength="64"></el-input>
                </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'

export default {
    name: 'BidForm',

    props: ['width', 'rowData', 'title'],
    data() {
        return {
            lDialog: this.width > 500 ? 'w700' : 'w500',
            dialogVisible: true,

            form: {
                markName: '',
            },
            rules: {
                markName: [
                    {
                        required: true,
                        message: '请输入标的名称',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },

    methods: {


        /*关闭弹窗 */
        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>