ah-jjzhgd-web/src/views/dataAnalysis/projectManage/components/addAndEditFormOne.vue

<template>
    <div>
        <el-form
            :model="addAndEditForm"
            label-width="auto"
            ref="addAndEditFormRef"
            :rules="addAndEditFormRules"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label="计划日期" prop="dateTime">
                        <el-date-picker
                            type="date"
                            v-model="addAndEditForm.dateTime"
                            placeholder="请选择计划日期"
                            value-format="yyyy-MM-dd"
                            clearable
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="计划支出费用" prop="dataMoney">
                        <el-input
                            v-model.trim="addAndEditForm.dataMoney"
                            clearable
                            show-word-limit
                            maxlength="10000000"
                            placeholder="请输入计划支出费用"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="计划支出内容" prop="dataContent">
                        <el-input
                            v-model.trim="addAndEditForm.dataContent"
                            clearable
                            show-word-limit
                            maxlength="100"
                            placeholder="请输入计划支出内容"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import {
    addPlanCostManageAPI,
    editPlanCostManageAPI,
} from '@/api/dataAnalysis/projectManage'
export default {
    name: 'AddAndEditFormOne',
    props: {
        detailsId: {
            type: [Number, String],
            default: '',
        },
        editRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            addAndEditForm: {
                dateTime: '',
                dataMoney: '',
                dataContent: '',
                dataType: '1',
            },
            addAndEditFormRules: {
                dateTime: [
                    {
                        required: true,
                        message: '请选择计划日期',
                        trigger: 'blur',
                    },
                ],
                dataMoney: [
                    {
                        required: true,
                        message: '请输入计划支出费用',
                        trigger: 'blur',
                    },
                ],
                dataContent: [
                    {
                        required: true,
                        message: '请输入计划支出内容',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },

    methods: {
        async submitForm() {
            return new Promise((resolve, reject) => {
                this.$refs.addAndEditFormRef.validate(async (valid) => {
                    if (valid) {
                        console.log('submitForm')
                        const API = this.detailsId
                            ? editPlanCostManageAPI
                            : addPlanCostManageAPI

                        const params = this.addAndEditForm
                        if (this.detailsId) {
                            params.id = this.detailsId
                        }
                        const res = await API(params)
                        if (res.code === 200) {
                            resolve(true)
                        } else {
                            reject(false)
                        }
                    } else {
                        reject(false)
                    }
                })
            })
        },
    },

    watch: {
        editRow: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    // this.addAndEditForm = newVal
                    const { dateTime, dataMoney, dataContent } = newVal
                    this.addAndEditForm.dateTime = dateTime
                    this.addAndEditForm.dataMoney = dataMoney
                    this.addAndEditForm.dataContent = dataContent
                }
            },
            immediate: true,
        },
    },
}
</script>