产品需求.jpg
页面.jpg
<template>
<!--家庭成员情况-->
<el-form :inline="true" label-position="top" label-width="80px" ref="shiye" :rules="rules" :model="shiye">
<div class="tit">家庭成员情况<el-button @click="addItem">新增</el-button>
</div>
<div v-for="(item, index) in shiye.familyMembers" :key="index">
<div style="background:#CEE7FD;">
<div class="col">
<div class="col-inside">
<div class="col-tit"><span class="canji-xiabiao-red">*</span>与本人关系</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legalClasslist'">
<el-select class="oinput" v-model="item.legalClasslist" placeholder="请选择人员标签">
<el-option v-for="item in relationClass" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<div class="col-inside">
<div class="col-tit"><span class="canji-xiabiao-red">*</span>姓名</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legalNamelist'">
<el-input class="oinput" v-model="item.legalNamelist" placeholder="请输入姓名"></el-input>
</el-form-item>
</div>
</div>
<div class="col-inside">
<div class="col-tit">出生日期</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legalbirthdaylist'">
<el-date-picker v-model="item.legalbirthdaylist" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss">
</el-date-picker>
</el-form-item>
</div>
</div>
</div>
<div class="col">
<div class="col-inside">
<div class="col-tit"><span class="canji-xiabiao-red">*</span>身份证号</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legalidcardlist'">
<el-input class="oinput" v-model="item.legalidcardlist" placeholder="请输入身份证号"></el-input>
</el-form-item>
</div>
</div>
<div class="col-inside">
<div class="col-tit">家庭住址</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legaladdlist'">
<el-input class="oinput" v-model="item.legaladdlist" placeholder="请输入家庭住址"></el-input>
</el-form-item>
</div>
</div>
<div class="col-inside">
<div class="col-tit"><span class="canji-xiabiao-red">*</span>联系电话</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legaltellist'">
<el-input class="oinput" v-model="item.legaltellist" placeholder="请输入联系电话"></el-input>
</el-form-item>
</div>
</div>
</div>
<div class="col">
<div class="col-inside">
<div class="col-tit">邮政编码</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legalpostalcodelist'">
<el-input class="oinput" v-model="item.legalpostalcodelist" placeholder="请输入邮政编码"></el-input>
</el-form-item>
</div>
</div>
<div class="col-inside">
<div class="col-tit">住宅电话</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legaltelnumlist'">
<el-input class="oinput" v-model="item.legaltelnumlist" placeholder="请输入住宅电话"></el-input>
</el-form-item>
</div>
</div>
<div class="col-inside" style="width:400px;">
<div class="col-tit">经济情况</div>
<div class="col-txt">
<el-form-item label="" :prop="'familyMembers.' + index + '.legaleconomicslist'">
<el-input class="oinput" v-model="item.legaleconomicslist" placeholder="请输入经济情况"></el-input>
</el-form-item>
</div>
</div>
<el-form-item label="">
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
</el-form-item>
</div>
</div>
</div>
<div style="margin:20px auto;text-align:center;">
<el-form-item size="large">
<el-button type="primary" @click="submit('shiye')">提交</el-button>
<el-button @click="reset(shiye)">重置</el-button>
</el-form-item>
</div>
</el-form>
</template>
<script>
export default {
data() {
return {
rules: {
familyMembers:[{
legalClasslist: [{
required: true,
message: ' ',
trigger: 'blur'
}],
legalNamelist: [{
required: true,
message: ' ',
trigger: 'blur'
}],
legalidcardlist: [{
required: true,
message: ' ',
trigger: 'blur'
}],
legaltellist: [{
required: true,
message: ' ',
trigger: 'blur'
}],
}]
},
shiye: {
familyMembers: [{
legalClasslist: [],
legalNamelist: '',
legalbirthdaylist: '',
legalidcardlist: '',
legaladdlist: '',
legaltellist: '',
legalpostalcodelist: '',
legaltelnumlist: '',
legaleconomicslist: '',
}],
},
}
},
methods: {
addItem() {
this.shiye.familyMembers.push({
legalClasslist: '',
legalNamelist: '',
legalbirthdaylist: '',
legalidcardlist: '',
legaladdlist: '',
legaltellist: '',
legalpostalcodelist: "",
legaltelnumlist: "",
legaleconomicslist: '',
})
},
deleteItem(item, index) {
this.shiye.familyMembers.splice(index, 1)
},
}
}
</script>
<style>
.container {
width: 80%;
margin: 20px auto;
border: 1px solid #0099FF;
background-color: rgba(249, 253, 255, 1);
border-radius: 5px;
}
.tit {
width: 100%;
color: red;
text-align: center;
line-height: 50px;
}
.col {
width: 100%;
border-top: 1px solid #0099FF;
border-bottom: 1px solid #0099FF;
height: 50px;
}
.col-tit {
width: 110px;
border-right: 1px solid #0099FF;
text-align: center;
height: 50px;
line-height: 50px;
float: left;
font-size: 12px
}
.col-txt {
width: 52%;
float: left;
height: 40px;
padding: 5px 4px;
margin: 0 auto
}
.col-inside {
width: 33%;
float: left;
border-right: 1px solid #0099FF;
}
.col-inside:last-child {
border-right: none;
}
.el-checkbox+.el-checkbox {
margin-left: 16px
}
.el-textarea__inner {
width: 500px;
height: 40px;
}
.canji-lift {
float: right;
margin-right: 10px;
}
.canji-red {
color: #333333;
}
.canji-xiabiao-red {
color: red;
}
</style>
查看.jpg
<li class="fl">
<p>失业人口标签</p>
<p>
<el-button type="primary" @click="show" size="mini" round>查看</el-button>
</p>
</li>
<el-dialog width="60%" :visible.sync="innerVisible" append-to-body>
<p class="dialogTitle"><i class="el-icon-star-on"></i>失业人口标签</p>
<ul class="dialogList clearfix">
<div v-for="(item, index) in familyMembers" :key="index">
<p class="dialogTitle"><i class="el-icon-star-on"></i>老人家庭成员基本信息</p>
<el-form-item label="与残疾人关系" prop="legalClasslist">
<el-input class="oinput" v-model="item.legalClasslist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="姓名" prop="legalNamelist">
<el-input class="oinput" v-model="item.legalNamelist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="legalbirthdaylist">
<el-input class="oinput" v-model="item.legalbirthdaylist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="legalidcardlist">
<el-input class="oinput" v-model="item.legalidcardlist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="家庭住址" prop="legaladdlist">
<el-input class="oinput" v-model="item.legaladdlist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="legalpostalcodelist">
<el-input class="oinput" v-model="item.legalpostalcodelist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="邮政编码" prop="relationaddlist">
<el-input class="oinput" v-model="item.relationaddlist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="住宅电话" prop="legaltelnumlist">
<el-input class="oinput" v-model="item.legaltelnumlist" placeholder="" disabled></el-input>
</el-form-item>
<el-form-item label="经济情况" prop="legaleconomicslist">
<el-input class="oinput" v-model="item.legaleconomicslist" placeholder="" disabled></el-input>
</el-form-item>
</div>
</el-form>
</ul>
</el-dialog>
<script>
export default {
props: [ 'seeDataVal'],
data() {
return {
tableData: {},
familyMembers: {},
diaVisible: false,
innerVisible: false,
}
},
methods: {
show() {
this.innerVisible = true;
this.$request.post('/zzHoseholePopulationSanglaotekun/findForEdit', {
id: this.seeDataVal.id,
},
res => {
this.tableData = res.data;
this.familyMembers = JSON.parse(res.data.familyMembers)
}
);
}
},
}
</script>
编辑.jpg
<template>
<div class="pad10">
<el-form
:inline="true"
label-position="top"
label-width="80px"
ref="requestUrl"
:rules="rules"
:model="formdata"
>
<div v-for="(item, index) in familyMembers" :key="index">
<p class="dialogTitle">
<i class="el-icon-star-on"></i>老人家庭成员基本信息
</p>
<el-form-item label="与本人关系" prop="legalClasslist">
<el-select v-model="item.legalClasslist" placeholder="请选择">
<el-option
v-for="item in relationClass"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名" prop="legalNamelist">
<el-input class="oinput" v-model="item.legalNamelist" placeholder></el-input>
</el-form-item>
<el-form-item label="出生年月" prop="legalbirthdaylist">
<el-input class="oinput" v-model="item.legalbirthdaylist" placeholder></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="legalidcardlist">
<el-input class="oinput" v-model="item.legalidcardlist" placeholder></el-input>
</el-form-item>
<el-form-item label="家庭住址" prop="legaladdlist">
<el-input class="oinput" v-model="item.legaladdlist" placeholder></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="legaltellist">
<el-input class="oinput" v-model="item.legaltellist" placeholder type="number"></el-input>
</el-form-item>
<el-form-item label="邮政编码" prop="legalpostalcodelist">
<el-input class="oinput" v-model="item.legalpostalcodelist" placeholder type="number"></el-input>
</el-form-item>
<el-form-item label="住宅电话" prop="legaltelnumlist">
<el-input class="oinput" v-model="item.legaltelnumlist" placeholder type="number"></el-input>
</el-form-item>
<el-form-item label="经济状况" prop="legaleconomicslist">
<el-input class="oinput" v-model="item.legaleconomicslist" placeholder></el-input>
</el-form-item>
</div>
<div style="margin:20px auto;text-align:center;">
<el-form-item size="large">
<el-button type="primary" @click="submit('requestUrl')">提交</el-button>
<el-button @click="reset('requestUrl')">重置</el-button>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
props: ["requestUrl"],
data() {
var checkID = (rule, value, callback) => {
if (!this.GLOBAL.check.idCard(value)) {
return callback(new Error("身份证号码填写错误"));
}
callback();
};
var checkPhone = (rule, value, callback) => {
if (!this.GLOBAL.check.phone(value)) {
return callback(new Error("请输入正确的手机号码"));
}
callback();
};
return {
relationClass: [
{
value: "父亲",
label: "父亲"
},
{
value: "妻子",
label: "妻子"
},
{
value: "丈夫",
label: "丈夫"
},
{
value: "儿子",
label: "儿子"
},
{
value: "女儿",
label: "女儿"
},
{
value: "母亲",
label: "母亲"
},
{
value: "爷爷",
label: "爷爷"
},
{
value: "奶奶",
label: "奶奶"
},
{
value: "兄",
label: "兄"
},
{
value: "弟",
label: "弟"
},
{
value: "姐",
label: "姐"
},
{
value: "妹",
label: "妹"
}
],
medicalHistory: [],
cities: cityOptions,
familyMembers: [],
formdata: {}
};
},
watch: {
requestUrl(newValue, oldValue) {
this.formdata = newValue;
this.familyMembers = JSON.parse(newValue.familyMembers);
}
},
mounted() {
this.familyMembers = JSON.parse(this.requestUrl.familyMembers);
this.formdata = this.requestUrl;
},
methods: {
submit(formName) {
var _this = this;
this.$refs[formName].validate(valid => {
if (valid) {
this.postData();
} else {
this.$message.error("请完善必填信息");
return;
}
});
},
postData() {
var postObj = {};
for (var key in this.requestUrl) {
if (this.requestUrl[key]) {
postObj[key] = this.requestUrl[key];
}
}
postObj.familyMembers = JSON.stringify(this.familyMembers);
var _this = this;
this.$request.post(
"zzHoseholePopulationSanglaotekun/update",
{ ...postObj },
function(res) {
if (res.result === "1") {
_this.$message("操作成功");
_this.$emit("success");
} else {
_this.$message.error(res.msg);
}
// _this.$message.error(res.msg)
},
function(res) {
_this.$message.error("操作失败，请稍后重试");
}
);
},
reset(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
网友评论