index.vue 4.48 KB
<template>
    <div class="zdy-content">
        <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="small">

            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
                <tbody>
                <tr height="30">
                    <td colspan="12" align="center"  ><font size="4">幢单元基本信息</font></td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >幢单元号</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.zdyh"></el-input>
                    </td>
                    <td  colspan="2" align="center"  >幢单元名称</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.zdymc"></el-input>
                    </td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >地上层数</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.dscs"></el-input>
                    </td>
                    <td  colspan="2" align="center"  >地下层数</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.dxcs"></el-input>
                    </td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >总层数</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.zcs"></el-input>
                    </td>
                    <td  colspan="2" align="center"  >备注</td>
                    <td  colspan="4"  >
                        <el-input v-model="form.bz"></el-input>
                    </td>
                </tr>
                </tbody>
            </table>

            <el-row :gutter="24">
                <el-col :span="24">
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                </el-col>
            </el-row>


        </el-form>
    </div>
</template>

<script>

    import {insertZdyInfo} from "../../../../api/lpb"
    export default {
        name: "index",
        components: {},

        data(){
            return{
                form:{
                    zdyh:'',
                    zdymc:'',
                    dscs:'',
                    dxcs:'',
                    zcs:'',
                    bz:'',
                },
                rules:{
                    zdyh: [
                        { required: true, message: '幢单元号不能为空', trigger: 'blur' },
                        { min: 5, max: 50, message: '长度最少 5 个字符', trigger: 'blur' }
                    ],
                    zdymc: [
                        { required: true, message: '名称不能为空', trigger: 'change' }
                    ],
                    dscs: [
                        { required: true, message: '地上层数不能为空', trigger: 'blur' },
                        {type: 'number' , message: '必须是数字',trigger:'blur'}
                        ],
                    dxcs: [
                        { required: true, message: '地下层数不能为空', trigger: 'blur' },
                        {type: 'number' , message: '必须是数字'}
                    ],
                    zcs: [
                        { required: true, message: '名称不能为空', trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            submitForm(formName,bsm) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        insertZdyInfo(this.form).then((res)=>{
                            if(res.code===200){
                                this.$message.success("保存成功!")
                                //更新树结构数据
                                this.$parent.$parent.getLpbMenuTree(bsm);
                                //关闭弹框
                                this.$parent.$parent.closeDaialog()
                            }
                            return true;
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>

    /deep/.el-input__inner{
        width: 100%;
        border:0;
    }

    table{
        background: #fff;
        table-layout: fixed;
    }

</style>