|
|
@@ -0,0 +1,336 @@
|
|
|
+<template>
|
|
|
+ <div class="add">
|
|
|
+ <el-dialog
|
|
|
+ title="新增实有居住人员信息"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="50%"
|
|
|
+ :before-close="handleClose">
|
|
|
+
|
|
|
+ <el-form ref="form" :model="form" label-width="120px" size="small">
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="人员信息类型">
|
|
|
+<!-- <el-input v-model="form.type" ></el-input>-->
|
|
|
+ <div @click="clickType(index)" class="typediv" :class="{'isactive':isclick==index}" v-for="(item,index) in typeList">
|
|
|
+ <img :src="item.icon" alt="">
|
|
|
+ <span style="display: block">{{item.name}}</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="个人照片">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="与房主关系">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="民族">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="文化程度">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="公民身份号码">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="婚姻状况">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="性别">
|
|
|
+ <el-radio-group v-model="form.sex">
|
|
|
+ <el-radio label="男"></el-radio>
|
|
|
+ <el-radio label="女"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="政治面貌">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="兵役状况">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="电话微信同号">
|
|
|
+ <el-radio-group v-model="form.isth">
|
|
|
+ <el-radio label="是"></el-radio>
|
|
|
+ <el-radio label="否"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="2" :span="22" v-show="form.isth=='否'" class="iserea">
|
|
|
+ <el-form-item label="微信号">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="宗教信仰">
|
|
|
+ <el-radio-group v-model="form.iszjxy">
|
|
|
+ <el-radio label="是"></el-radio>
|
|
|
+ <el-radio label="否"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="2" :span="22" v-show="form.iszjxy=='是'" class="iserea">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-checkbox-group v-model="form.zjxy">
|
|
|
+ <el-checkbox label="佛教" name="type"></el-checkbox>
|
|
|
+ <el-checkbox label="道教" name="type"></el-checkbox>
|
|
|
+ <el-checkbox label="伊斯兰教" name="type"></el-checkbox>
|
|
|
+ <el-checkbox label="天主教" name="type"></el-checkbox>
|
|
|
+ <el-checkbox label="基督教" name="type"></el-checkbox>
|
|
|
+ <el-checkbox label="其他" name="type"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="是否有单位">
|
|
|
+ <el-radio-group v-model="form.isdw">
|
|
|
+ <el-radio label="是"></el-radio>
|
|
|
+ <el-radio label="否"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="2" :span="22" v-show="form.isdw=='是'" class="iserea">
|
|
|
+ <el-form-item label="单位名称">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="管理类别">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="单位地址">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细地址">
|
|
|
+ <el-input v-model="form.type"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="是否特殊人群">
|
|
|
+ <el-radio-group v-model="form.isrq">
|
|
|
+ <el-radio label="是"></el-radio>
|
|
|
+ <el-radio label="否"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="2" :span="22" v-show="form.isrq=='是'" class="iserea">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-checkbox-group v-model="form.tsrq">
|
|
|
+ <el-checkbox label="低收入群体" name="1"></el-checkbox>
|
|
|
+ <el-checkbox label="失独丧偶" name="2"></el-checkbox>
|
|
|
+ <el-checkbox label="外来务工" name="3"></el-checkbox>
|
|
|
+ <el-checkbox label="孤寡老人" name="4"></el-checkbox>
|
|
|
+ <el-checkbox label="出国人员" name="5"></el-checkbox>
|
|
|
+ <el-checkbox label="利益受损" name="6"></el-checkbox>
|
|
|
+ <el-checkbox label="残疾人" name="7"></el-checkbox>
|
|
|
+ <el-checkbox label="留守儿童" name="8"></el-checkbox>
|
|
|
+ <el-checkbox label="遭受病灾" name="9"></el-checkbox>
|
|
|
+ <el-checkbox label="精神病人" name="10"></el-checkbox>
|
|
|
+ <el-checkbox label="其他（未落户/未注销等）" name="11"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="具体情况" style="padding-left: 120px">
|
|
|
+ <el-input placeholder="请描述具体情况，非必填，限2000字符" type="textarea" v-model="form.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-button size="small" @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "add",
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isclick:null,
|
|
|
+ typeList:[
|
|
|
+ {name:'常住人口',icon:require('../asset/icon_type_permanent.svg')},
|
|
|
+ {name:'寄住人口',icon:require('../asset/icon_type_lodge.svg')},
|
|
|
+ {name:'暂住人口',icon:require('../asset/icon_type_stay.svg')},
|
|
|
+ {name:'境外人口',icon:require('../asset/icon_type_foreigner.svg')},
|
|
|
+ {name:'未落常人口',icon:require('../asset/icon_type_not.svg')}
|
|
|
+ ],
|
|
|
+ form:{
|
|
|
+ tsrq:[],
|
|
|
+ zjxy:[],
|
|
|
+ imageUrl: ''
|
|
|
+ },
|
|
|
+ dialogVisible:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ clickType(index){
|
|
|
+ this.isclick = index
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ return isJPG && isLt2M;
|
|
|
+ },
|
|
|
+ handleClose(){
|
|
|
+ this.dialogVisible=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.typediv{
|
|
|
+ float: left;
|
|
|
+ width: 102px;
|
|
|
+ height: 104px;
|
|
|
+ background: rgba(16,109,255,0.02);
|
|
|
+ border-radius: 8px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ border: 1px solid #ECF2FE;
|
|
|
+ cursor: pointer;
|
|
|
+ //border: 1px solid #106DFF;
|
|
|
+}
|
|
|
+.isactive{
|
|
|
+ border: 1px solid #106DFF
|
|
|
+}
|
|
|
+.container_body .el-col{
|
|
|
+ margin-right: 0 !important;
|
|
|
+}
|
|
|
+ .iserea{
|
|
|
+ background: rgba(236,242,254,.3);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 18px;
|
|
|
+ border-radius: 8px;
|
|
|
+ :deep .el-input__inner{
|
|
|
+ background: #ECF2FE !important;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ :deep .el-textarea__inner{
|
|
|
+ background: #ECF2FE !important;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep .avatar-uploader .el-upload {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ line-height: 88px;
|
|
|
+ background: #ECF2FE;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px dashed #6F7CA3;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+:deep .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+:deep .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+:deep .avatar {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
chenchhuanbao
