2020-11-01 20:26:00 +08:00

656 lines
25 KiB
Vue

<template>
<div class="result-container">
<h2 class="title search-title">幼儿信息查询</h2>
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="search-form">
<el-form-item label="幼儿姓名" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入幼儿姓名" clearable size="small" />
</el-form-item>
<el-form-item label="联系方式" prop="phone">
<el-input v-model="queryParams.phone" placeholder="请输入联系方式" clearable size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
<el-button size="mini" @click="cancel">重置</el-button>
</el-form-item>
</el-form>
<div class="main" v-show="hide">
<h2 class="title">幼儿信息维护</h2>
<div class="result-form">
<!-- <p class="form-title">提交核对幼儿信息</p> -->
<el-tabs type="border-card">
<el-tab-pane label="幼儿基础信息">
<el-row :gutter="15">
<el-form class="form" ref="form" :model="form" label-width="110px">
<el-col :xs="24" :sm="12">
<el-form-item label="家长联系方式" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系方式" :disabled="hide" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="幼儿姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入幼儿姓名" :disabled="hide" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="英文名" prop="enName">
<el-input v-model="form.enName" placeholder="请输入联系方式" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="小名" prop="infantName">
<el-input v-model="form.infantName" placeholder="请输入联系方式" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="性别" prop="xb">
<el-select v-model="form.xb" placeholder="请选择性别">
<el-option
v-for="dict in sexOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="民族" prop="mz">
<el-select v-model="form.mz" placeholder="请选择民族">
<el-option
v-for="dict in mzOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="证件号码" prop="zjhm">
<el-input v-model="form.zjhm" placeholder="请输入证件号码" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="幼儿出生日期" prop="csrq">
<el-date-picker
clearable
size="small"
v-model="form.csrq"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择幼儿出生日期"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="出生地" prop="birthProvincename">
<v-distpicker
v-model="form.birthProvincename"
:placeholders="placeholders"
:province="diglogForm.province"
:city="diglogForm.city"
:area="diglogForm.area"
@selected="onSelected_brith"
></v-distpicker>
<el-input v-model="form.birthProvince" v-if="false" />
<el-input v-model="form.birthCity" v-if="false" />
<el-input v-model="form.birthArea" v-if="false" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="户口地" prop="registeredProvincename">
<v-distpicker
v-model="form.registeredProvincename"
:placeholders="placeholders"
:province="diglogForm1.province"
:city="diglogForm1.city"
:area="diglogForm1.area"
@selected="onSelected_registered"
></v-distpicker>
<el-input v-model="form.registeredProvince" v-if="false" />
<el-input v-model="form.registeredCity" v-if="false" />
<el-input v-model="form.registeredArea" v-if="false" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="现住址" prop="addrProvincename">
<v-distpicker
v-model="form.addrProvincename"
:placeholders="placeholders"
:province="diglogForm2.province"
:city="diglogForm2.city"
:area="diglogForm2.area"
@selected="onSelected_addr"
></v-distpicker>
<el-input v-model="form.addrProvince" v-if="false" />
<el-input v-model="form.addrCity" v-if="false" />
<el-input v-model="form.addrArea" v-if="false" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="详细地址" prop="addrDetail">
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="曾就读园" prop="everSchool">
<el-input v-model="form.everSchool" placeholder="请输入曾经就读幼儿园" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="学习英语" prop="learnEnglish">
<el-radio-group v-model="form.learnEnglish">
<el-radio
v-for="dict in ynOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="入园渠道" prop="source">
<el-select v-model="form.source" placeholder="请选择入园渠道">
<el-option
v-for="dict in sourceOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="第一语言" prop="firstLanguage">
<el-input v-model="form.firstLanguage" placeholder="请输入第一语言" maxlength="2" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="第二语言" prop="seconderLanguage">
<el-input v-model="form.seconderLanguage" placeholder="请输入第二语言" maxlength="2" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="其他语言" prop="otherLanguage">
<el-input v-model="form.otherLanguage" placeholder="请输入其他语言" />
</el-form-item>
</el-col>
<div></div>
</el-form>
</el-row>
</el-tab-pane>
<el-tab-pane label="监护人信息">
<el-form ref="form_jhr" :model="form_jhr" label-width="110px">
<el-row :gutter="15">
<el-col :xs="24" :sm="12">
<el-form-item label="父亲姓名" prop="fathername">
<el-input v-model="form_jhr.fathername" placeholder="请输入父亲姓名" @input="onInput()" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="fphone">
<el-input v-model="form_jhr.fphone" placeholder="请输入父亲联系电话" @input="onInput()"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="foffphone">
<el-input v-model="form_jhr.foffphone" placeholder="请输入父亲办公电话" @input="onInput()"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="15">
<el-col :xs="24" :sm="12">
<el-form-item label="母亲姓名" prop="mothername">
<el-input v-model="form_jhr.mothername" placeholder="请输入父亲姓名" @input="onInput()" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="mphone">
<el-input v-model="form_jhr.mphone" placeholder="请输入母亲姓名" @input="onInput()" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="moffphone">
<el-input v-model="form_jhr.moffphone" placeholder="请输入母亲办公电话" @input="onInput()"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="15">
<el-col :xs="24" :sm="12">
<el-form-item label="其他联系人姓名" prop="grandfathername">
<el-input v-model="form_jhr.grandfathername" placeholder="请输入其他联系人姓名" @input="onInput()"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="与幼儿关系" prop="gfgx">
<el-select v-model="form_jhr.gfgx" placeholder="请选择与幼儿关系" @input="onInput()" >
<el-option
v-for="dict in jtgxOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="gfphone">
<el-input v-model="form_jhr.gfphone" placeholder="请输入联系电话" @input="onInput()"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="gfoffphone">
<el-input v-model="form_jhr.gfoffphone" placeholder="请输入办公电话" @input="onInput()" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="住址" prop="gfaddress">
<el-input v-model="form_jhr.gfaddress" placeholder="请输入住址" @input="onInput()"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="15">
<el-col :xs="24" :sm="12">
<el-form-item label="其他联系人姓名" prop="grandmothername">
<el-input v-model="form_jhr.grandmothername" placeholder="请输入其他联系人姓名" @input="onInput()"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="与幼儿关系" prop="gmgx">
<el-select v-model="form_jhr.gmgx" placeholder="请选择与幼儿关系" @input="onInput()">
<el-option
v-for="dict in jtgxOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="gmphone">
<el-input v-model="form_jhr.gmphone" placeholder="请输入联系电话" @input="onInput()"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="gmoffphone">
<el-input v-model="form_jhr.gmoffphone" placeholder="请输入办公电话" @input="onInput()"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="住址" prop="gmaddress">
<el-input v-model="form_jhr.gmaddress" placeholder="请输入住址" @input="onInput()"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancelSub"> </el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import { getChild_query, updateChild } from "@/api/benyi/child";
import {
listContactpeople,
getContactpeople,
getContactpeopleByChildId,
delContactpeople,
addContactpeople,
updateContactpeople,
} from "@/api/benyi/contactpeople";
import { listClass } from "@/api/system/class";
import { getToken } from "@/utils/auth";
//导入省市区三级联动库
import VDistpicker from "v-distpicker";
export default {
name: "result",
data() {
return {
activeNames: ["1"],
placeholders: {
province: "请选择省",
city: "请选择市",
area: "请选择区"
},
diglogForm: {
province: null,
city: null,
area: null
},
diglogForm1: {
province: null,
city: null,
area: null
},
diglogForm2: {
province: null,
city: null,
area: null
},
hide: false,
ishf: true,
hfrn: "",
yzzs: "",
tynrcontent: "",
href_tynr: "",
// 是否显示弹出层
open: false,
// 幼儿信息表格数据
childList: [],
// 性别状态字典
sexOptions: [],
// 状态数据字典
statusOptions: [],
// 性别状态字典
sexOptions: [],
// 民族字典
mzOptions: [],
//是否字典
ynOptions: [],
//入园渠道
sourceOptions: [],
//班级
classOptions: [],
//家庭关系
jtgxOptions: [],
// 查询参数
queryParams: {
name: undefined,
phone: undefined
},
// 表单参数
form: {},
// 监护人表单参数
form_jhr: {},
};
},
created() {
},
components: {
//省市区三级联动全局组件
VDistpicker
},
methods: {
// 强制输入刷新
onInput() {
this.$forceUpdate();
},
// 字典翻译
classFormat(row, column) {
// return this.selectDictLabel(this.classOptions, row.classid);
var actions = [];
var datas = this.classOptions;
Object.keys(datas).map(key => {
if (datas[key].bjbh == "" + row.classid) {
actions.push(datas[key].bjmc);
return false;
}
});
return actions.join("");
},
/** 查询幼儿信息 */
getInfo() {
getChild_query(this.queryParams).then(response => {
if (response.code == "200") {
this.hide = true;
this.childList = response.rows;
this.form = response.data;
this.sexOptions = response.sexAll;
this.statusOptions = response.statusAll;
this.mzOptions = response.mzAll;
this.ynOptions = response.ynAll;
this.sourceOptions = response.sourceAll;
this.jtgxOptions = response.jtgxAll;
this.form_jhr.fathername = response.data.byChildContactpeople.fathername;
this.form_jhr.mothername = response.data.byChildContactpeople.mothername;
this.form_jhr.fphone = response.data.byChildContactpeople.fphone;
this.form_jhr.foffphone = response.data.byChildContactpeople.foffphone;
this.form_jhr.mphone = response.data.byChildContactpeople.mphone;
this.form_jhr.moffphone = response.data.byChildContactpeople.moffphone;
this.form_jhr.grandfathername = response.data.byChildContactpeople.grandfathername;
this.form_jhr.gfgx = response.data.byChildContactpeople.gfgx;
this.form_jhr.gfphone = response.data.byChildContactpeople.gfphone;
this.form_jhr.gfoffphone = response.data.byChildContactpeople.gfoffphone;
this.form_jhr.gfaddress = response.data.byChildContactpeople.gfaddress;
this.form_jhr.grandmothername = response.data.byChildContactpeople.grandmothername;
this.form_jhr.gmgx = response.data.byChildContactpeople.gmgx;
this.form_jhr.gmoffphone = response.data.byChildContactpeople.gmoffphone;
this.form_jhr.gmaddress = response.data.byChildContactpeople.gmaddress;
this.form_jhr.gmoffphone = response.data.byChildContactpeople.gmoffphone;
this.form_jhr.createTime = response.data.byChildContactpeople.createTime;
this.diglogForm.province = response.data.birthProvincename;
this.diglogForm.city = response.data.birthCityname;
this.diglogForm.area = response.data.birthAreaname;
this.diglogForm1.province = response.data.registeredProvincename;
this.diglogForm1.city = response.data.registeredCityname;
this.diglogForm1.area = response.data.registeredAreaname;
this.diglogForm2.province = response.data.addrProvincename;
this.diglogForm2.city = response.data.addrCityname;
this.diglogForm2.area = response.data.addrAreaname;
}
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
updateChild(this.form).then(response => {
if (response.code === 200) {
this.form_jhr.childid = this.form.id;
updateContactpeople(this.form_jhr).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.hide = false;
}
});
this.hide = false;
}
});
}
}
});
},
// 取消按钮
cancelSub() {
this.hide = false;
},
/** 搜索按钮操作 */
handleQuery() {
if (
this.queryParams.name == undefined ||
this.queryParams.name.trim() == ""
) {
this.msgError("请输入幼儿姓名");
return false;
}
if (
this.queryParams.phone == undefined ||
this.queryParams.phone.trim() == ""
) {
this.msgError("请输入联系方式");
return false;
}
this.getInfo();
},
//所在省市区触发联动方法
onSelected_brith(data) {
if (
data.province.code == undefined ||
data.city.code == undefined ||
data.area.code == undefined
) {
this.form.birthProvincename = undefined;
} else {
this.form.birthProvincename = data.province.value;
this.form.birthProvince = data.province.code;
this.form.birthCityname = data.city.value;
this.form.birthCity = data.city.code;
this.form.birthAreaname = data.area.value;
this.form.birthArea = data.area.code;
}
},
//户口所在地
onSelected_registered(data) {
if (
data.province.code == undefined ||
data.city.code == undefined ||
data.area.code == undefined
) {
this.form.registeredProvincename = undefined;
} else {
this.form.registeredProvincename = data.province.value;
this.form.registeredProvince = data.province.code;
this.form.registeredCityname = data.city.value;
this.form.registeredCity = data.city.code;
this.form.registeredAreaname = data.area.value;
this.form.registeredArea = data.area.code;
}
},
//住址所在地
onSelected_addr(data) {
if (
data.province.code == undefined ||
data.city.code == undefined ||
data.area.code == undefined
) {
this.form.addrProvincename = undefined;
} else {
this.form.addrProvincename = data.province.value;
this.form.addrProvince = data.province.code;
this.form.addrCityname = data.city.value;
this.form.addrCity = data.city.code;
this.form.addrAreaname = data.area.value;
this.form.addrArea = data.area.code;
}
},
// 返回按钮
cancel() {
this.queryParams = {
name: undefined,
phone: undefined
};
}
}
};
</script>
<style lang="scss" scoped>
.result-container {
padding: 30px 15px 0;
.search-title {
font-size: 22px;
text-align: center;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 15px;
margin: 0 auto 20px;
}
.main {
padding-top: 10px;
border-top: 1px solid #eee;
.title {
text-align: center;
font-size: 18px;
}
.dialog-footer {
margin: 10px auto 40px;
text-align: center;
}
.el-select {
width: 100%;
}
.result-form {
.form-title {
display: flex;
align-items: center;
text-align: left;
text-align: left;
font-size: 14px;
font-weight: 700;
&::before {
content: "";
width: 3px;
height: 14px;
background: #0a56ca;
display: inline-block;
margin: 1px 5px 0 0;
}
}
.form {
// width: 500px;
margin: 30px auto 0;
}
}
.result-info {
.title {
display: flex;
align-items: center;
text-align: left;
font-size: 14px;
font-weight: 700;
&::before {
content: "";
width: 3px;
height: 14px;
background: #0a56ca;
display: inline-block;
margin: 1px 5px 0 0;
}
}
.info {
padding: 0 20px;
}
}
}
}
@media screen and (max-width: 768.89px) {
.result-container {
.search-form {
div {
margin-bottom: 5px;
}
}
.main {
.result-form {
.form {
width: 100%;
}
}
::v-deep .distpicker-address-wrapper {
select {
width: 100%;
margin-bottom: 5px;
}
}
}
}
}
</style>