epmet-work-pc/src/views/components/addResi.vue

<template>
    <div class="div_form">
        <div class="form">
            <el-form :model="form" :rules="rules" label-width="100px" ref="addForm">
                <h5 style="margin-top: 6px;">基础信息登记</h5>
                <div class="basicInfo">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="6">
                            <el-form-item label="姓名" prop="name" class="font-color-orange">
                                <el-input class="list_item_width_1" v-model="form.name" placeholder="请输入内容" size="small"
                                    clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="证件类型" prop="idType" class="font-color-orange">
                                <el-select v-model="form.idType" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <el-option v-for="(item, index) in idTypeList" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="证件号" prop="idNum" class="font-color-orange">
                                <el-input v-model="form.idNum" placeholder="请输入内容" clearable size="small"
                                    class="list_item_width_1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="国籍" prop="nationality" class="font-color-orange">
                                <el-select v-model="form.nationality" placeholder="请选择" size="small"
                                    class="list_item_width_1" clearable>
                                    <!-- <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" justify="space-between">
                        <el-col :span="6">
                            <el-form-item label="联系电话" prop="mobile" class="font-color-orange">
                                <el-input class="list_item_width_1" v-model="form.mobile" placeholder="请输入内容" size="small"
                                    clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别">
                                <el-select v-model="form.gender" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期">
                                <el-date-picker v-model.trim="form.birthday" class="list_item_width_1" type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="民族">
                                <el-select v-model="form.nationality" placeholder="请选择" size="small"
                                    class="list_item_width_1" clearable>
                                    <!-- <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" justify="space-between">
                        <el-col :span="6">
                            <el-form-item label="文化程度">
                                <el-select v-model="form.cultureLevel" placeholder="请选择" size="small"
                                    class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="婚姻状况">
                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="籍贯">
                                <el-input v-model="form.resideInfoDto.nativePlace" placeholder="请输入内容" clearable
                                    size="small" class="list_item_width_1"></el-input> <el-radio
                                    v-model="form.localResidenceFlag" style="margin-left: 10px;">本地</el-radio>


                            </el-form-item>
                        </el-col>
                        <el-col :span="6"></el-col>
                    </el-row>
                    <el-form-item label="备注">
                        <el-input type="textarea" class="item_width_1" :rows="3" placeholder="请输入内容" v-model="form.remark" clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <h5>居住信息登记</h5>
                <div class="house">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="24">
                            <el-form-item label="所属房屋" prop="houseId" class="font-color-orange">
                                <el-select v-model="form.houseId" placeholder="请选择" size="small" class="item_width_1" style="margin-right: 10px;" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                                <!--  v-if="scope.$index == tableData.length - 1" -->
                                <el-button type="primary" size="mini" icon="el-icon-plus" circle></el-button>

                                <!-- <el-button type="danger" v-if="scope.$index != tableData.length - 1 ||
                                (tableData.length - 1 >= 1 && scope.$index != '0')
                                " size="small" icon="el-icon-minus" circle>
                            </el-button> -->
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row type="flex" justify="space-between">
                        <el-col :span="6">
                            <el-form-item label="人房关系" class="font-color-blue">
                                <el-select v-model="form.cultureLevel" placeholder="请选择" size="small"
                                    class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="人户状况" class="font-color-blue">
                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="与户主关系" class="font-color-blue font-color-blue2">
                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6"></el-col>
                    </el-row>
                </div>
                <h5>拓展信息登记</h5>
                <div class="expand">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="6">
                            <el-form-item label="宗教信仰">
                                <el-select v-model="form.religionDto" placeholder="请选择" size="small"
                                    class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="就业状态" class="font-color-blue">
                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="有无赡养人">
                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
                                        :value="item.value"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6"></el-col>
                    </el-row>
                </div>
                <h5>人员标签</h5>
                <div class="stafftag">
                    <stafftag :formType="'add'"></stafftag>
                </div>
            </el-form>
            <el-row style="margin:24px">
                <el-col :span="24" align="center">
                    <el-button size="small" class="diy-button--white" @click="handlerCancle" plain>取消</el-button>
                    <el-button type="primary" size="small" :loading="btnLoading" @click="handleSUbmit">保存</el-button>
                    <el-button type="primary" size="small" :loading="btnLoading"
                        @click="handleSUbmit">提交并补充家庭人员信息</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { idTypeList, genderList } from "@/js/columns/constants";
import stafftag from "../modules/portrayal/jumin/cpts/staffTag.vue";
export default {
    data() {
        return {
            form: {
                name: '',
                resideInfoDto: {
                    nativePlace: '',
                },
                localResidenceFlag: false,
            },
            result: {},
            idTypeList,
            genderList,
            btnLoading: false,
            rules: {
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                idType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
                idNum: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
                mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                houseId: [{ required: true, message: '请选择所属房屋', trigger: 'blur' }],
            }
        };
    },
    created() { },
    methods: {
        handlerCancle() {
            this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
                (item) => item.name !== 'add-resi'
            );
            let tab =
                this.$store.state.contentTabs[
                this.$store.state.contentTabs.length - 1
                ];
            this.$router.push({
                name: tab.name,
                params: { ...tab.params },
                query: { ...tab.query },
            });
        },
        handleSUbmit() {

        }
    },
    components: { stafftag },
    computed: {},
    watch: {},
}
</script>

<style lang='scss' scoped>
@import "@/assets/scss/modules/management/form-main.scss";
@import "@/assets/scss/pages/resiAdd.scss";
</style>