10-挂号页面开发(讲)

image.png

性别 结算类别 收费方式从后台常数项中读取

    <template>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--el-row类似tr :gutter类似margin -->
            <el-row :gutter="20">
                <!--el-col类似td  :span决定了列的宽度，一行总的分为24分，:span="16"就表示他占16/24-->
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-form-item label="发票号" prop="invoiceNumber">
                            <el-input v-model="ruleForm.invoiceNumber"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <!--el-col类似td  :span决定了列的宽度，一行总的分为24分，:span="16"就表示他占16/24-->
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-form-item label="病历号" prop="caseNumber">
                            <el-input v-model="ruleForm.caseNumber"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-form-item label="姓名" prop="realName">
                            <el-input v-model="ruleForm.realName"></el-input>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="ruleForm.gender" placeholder="请选择">
                                <el-option v-for="gener in geners" :key="gener.id" :label="gener.constantName" :value="gener.id"></el-option>

                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-form-item label="年令" prop="age">
                            <el-input v-model="ruleForm.age"></el-input>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-form-item label="岁别" prop="ageType">
                            <el-select v-model="ruleForm.ageType" placeholder="请选择">
                                <el-option label="岁" value="岁"></el-option>
                                <el-option label="月" value="月"></el-option>
                                <el-option label="天" value="天"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>


            <el-row :gutter="20">
                <!--el-col类似td  :span决定了列的宽度，一行总的分为24分，:span="16"就表示他占16/24-->
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-form-item prop="birthDate">
                            <el-date-picker type="date" placeholder="出生日期" v-model="ruleForm.birthDate" value-format="yyyy-MM-dd" format="yyyy年MM月dd日"
                             style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-form-item label="病历本:" prop="isBook">
                            <input type="checkbox" v-model="ruleForm.isBook" true-value="1" false-value="0"></input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

        </el-form>
    </template>
    <script>
        export default {
            data() {
                return {
                    ruleForm: {
                        invoiceNumber: '',
                        caseNumber: '',
                        realName: '',
                        gender: '',
                        age: '',
                        ageType: '',
                        birthDate: ''
                    },
                    geners: [], //性别
                    rules: {
                        //todo
                    }
                };
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        }
    </script>
    <style>
        .el-row {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>