ahdevicemgt-ui/src/views/base/project/components/form-project.vue

<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="projectParamsRef"
            :model="projectParams"
            :rules="projectParamsRules"
        >
            <el-row type="flex" justify="space-between" :gutter="24">
                <el-col :span="12">
                    <el-form-item label="工程名称" prop="projectName">
                        <el-input v-model="projectParams.projectName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工程编号" prop="pcNo">
                        <el-input v-model="projectParams.pcNo" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="实施单位" prop="pro_unit">
                        <el-select v-model="projectParams.pro_unit"></el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工程类型" prop="pro_type_of">
                        <el-select
                            v-model="projectParams.pro_type_of"
                        ></el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="工程状态" prop="pro_type">
                        <el-select v-model="projectParams.pro_type"></el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工程性质" prop="pro_nature">
                        <el-select
                            v-model="projectParams.pro_nature"
                        ></el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="项目经理" prop="pro_user">
                        <el-input v-model="projectParams.pro_user" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="pro_phone">
                        <el-input v-model="projectParams.pro_phone" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="合同主体单位">
                        <el-input />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属项目中心">
                        <el-input />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="i8工程ID">
                        <el-input />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联i8工程">
                        <el-input />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input type="textarea" :rows="6" />
                    </el-form-item>
                </el-col>
                <el-col :span="12"> </el-col>
            </el-row>

            <el-form-item>
                <el-button type="success" @click="onSubmit">确认</el-button>
                <el-button
                    @click="
                        () => {
                            this.$emit('closeDialog')
                        }
                    "
                    >取消</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addProjectApi } from '@/api/base/project.js'
export default {
    name: 'FormProject',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    mounted() {
        if (this.editParams) {
            Object.assign(this.projectParams, this.editParams)
        }
    },
    data() {
        return {
            projectParams: {
                projectName: '', // 工程名称
                pcNo: '', // 工程编号
                pro_unit: '',
                pro_type_of: '',
                pro_type: '',
                pro_nature: '',
                pro_user: '',
                pro_phone: '',
            },
            // 校验规则
            projectParamsRules: {
                projectName: [
                    {
                        required: true,
                        message: '请输入工程名称',
                        trigger: 'blur',
                    },
                ],
                pro_unit: [
                    {
                        required: true,
                        message: '请选择施工单位',
                        trigger: 'blur',
                    },
                ],
                pro_type_of: [
                    {
                        required: true,
                        message: '请选择工程类型',
                        trigger: 'blur',
                    },
                ],
                pro_type: [
                    {
                        required: true,
                        message: '请选择工程状态',
                        trigger: 'blur',
                    },
                ],
                pro_nature: [
                    {
                        required: true,
                        message: '请选择工程性质',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 确认按钮 */
        onSubmit() {
            this.$refs.projectParamsRef.validate(valid => {
                if (valid) {
                    console.log('校验通过')
                    // 1. 表单校验通过后调后台 Api
                    // 2. 成功之后通知父组件关闭弹框
                    this.$emit('closeDialog')
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
</style>