Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化页面-手机端响应式

Browse Source
This commit is contained in:
zhanglipeng
2020-11-19 11:22:59 +08:00
parent 8a3385cbea
commit e858bba93e
1 changed files with 249 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

356
ruoyi-ui/src/views/benyi/child_preserve/index.vue
View File

@@ -1,17 +1,42 @@
<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
:model="queryParams"
ref="queryForm"
label-width="70px"
class="search-form"
>
<el-row :gutter="10">
<el-col :xs="24" :ms="12" :md="5">
<el-form-item label="幼儿姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入幼儿姓名"
clearable
size="small"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :ms="12" :md="5">
<el-form-item label="联系方式" prop="phone">
<el-input
v-model="queryParams.phone"
placeholder="请输入联系方式"
clearable
size="small"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :ms="12" :md="4">
<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-col>
</el-row>
</el-form>
<div class="main" v-show="hide">
<h2 class="title">幼儿信息维护</h2>
@@ -20,28 +45,47 @@
<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-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-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-input
v-model="form.name"
placeholder="请输入幼儿姓名"
:disabled="hide"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="英文名" prop="enName">
<el-input v-model="form.enName" placeholder="请输入联系方式" />
<el-input
v-model="form.enName"
placeholder="请输入联系方式"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="小名" prop="infantName">
<el-input v-model="form.infantName" placeholder="请输入联系方式" />
<el-input
v-model="form.infantName"
placeholder="请输入联系方式"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="性别" prop="xb">
<el-select v-model="form.xb" placeholder="请选择性别">
<el-option
@@ -53,7 +97,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="民族" prop="mz">
<el-select v-model="form.mz" placeholder="请选择民族">
<el-option
@@ -65,12 +109,15 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="证件号码" prop="zjhm">
<el-input v-model="form.zjhm" placeholder="请输入证件号码" />
<el-input
v-model="form.zjhm"
placeholder="请输入证件号码"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="幼儿出生日期" prop="csrq">
<el-date-picker
clearable
@@ -127,30 +174,40 @@
<el-input v-model="form.addrArea" v-if="false" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="详细地址" prop="addrDetail">
<el-input v-model="form.addrDetail" placeholder="请输入详细地址" />
<el-input
v-model="form.addrDetail"
placeholder="请输入详细地址"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="曾就读园" prop="everSchool">
<el-input v-model="form.everSchool" placeholder="请输入曾经就读幼儿园" />
<el-input
v-model="form.everSchool"
placeholder="请输入曾经就读幼儿园"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<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>
>{{ dict.dictLabel }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="入园渠道" prop="source">
<el-select v-model="form.source" placeholder="请选择入园渠道">
<el-select
v-model="form.source"
placeholder="请选择入园渠道"
>
<el-option
v-for="dict in sourceOptions"
:key="dict.dictValue"
@@ -160,30 +217,42 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<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>
>{{ dict.dictLabel }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="第一语言" prop="firstLanguage">
<el-input v-model="form.firstLanguage" placeholder="请输入第一语言" maxlength="2" />
<el-input
v-model="form.firstLanguage"
placeholder="请输入第一语言"
maxlength="2"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="第二语言" prop="seconderLanguage">
<el-input v-model="form.seconderLanguage" placeholder="请输入第二语言" maxlength="2" />
<el-input
v-model="form.seconderLanguage"
placeholder="请输入第二语言"
maxlength="2"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="其他语言" prop="otherLanguage">
<el-input v-model="form.otherLanguage" placeholder="请输入其他语言" />
<el-input
v-model="form.otherLanguage"
placeholder="请输入其他语言"
/>
</el-form-item>
</el-col>
@@ -194,48 +263,80 @@
<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-col :xs="24" :sm="12">
<el-form-item label="父亲姓名" prop="fathername">
<el-input v-model="form_jhr.fathername" placeholder="请输入父亲姓名" @input="onInput()" />
<el-input
v-model="form_jhr.fathername"
placeholder="请输入父亲姓名"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="fphone">
<el-input v-model="form_jhr.fphone" placeholder="请输入父亲联系电话" @input="onInput()"/>
<el-input
v-model="form_jhr.fphone"
placeholder="请输入父亲联系电话"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="foffphone">
<el-input v-model="form_jhr.foffphone" placeholder="请输入父亲办公电话" @input="onInput()"/>
<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-col :xs="24" :sm="12">
<el-form-item label="母亲姓名" prop="mothername">
<el-input v-model="form_jhr.mothername" placeholder="请输入父亲姓名" @input="onInput()" />
<el-input
v-model="form_jhr.mothername"
placeholder="请输入父亲姓名"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="mphone">
<el-input v-model="form_jhr.mphone" placeholder="请输入母亲姓名" @input="onInput()" />
<el-input
v-model="form_jhr.mphone"
placeholder="请输入母亲姓名"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="moffphone">
<el-input v-model="form_jhr.moffphone" placeholder="请输入母亲办公电话" @input="onInput()"/>
<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-col :xs="24" :sm="12">
<el-form-item label="其他联系人姓名" prop="grandfathername">
<el-input v-model="form_jhr.grandfathername" placeholder="请输入其他联系人姓名" @input="onInput()"/>
<el-input
v-model="form_jhr.grandfathername"
placeholder="请输入其他联系人姓名"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="与幼儿关系" prop="gfgx">
<el-select v-model="form_jhr.gfgx" placeholder="请选择与幼儿关系" @input="onInput()" >
<el-select
v-model="form_jhr.gfgx"
placeholder="请选择与幼儿关系"
@input="onInput()"
>
<el-option
v-for="dict in jtgxOptions"
:key="dict.dictValue"
@@ -245,31 +346,51 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="gfphone">
<el-input v-model="form_jhr.gfphone" placeholder="请输入联系电话" @input="onInput()"/>
<el-input
v-model="form_jhr.gfphone"
placeholder="请输入联系电话"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="gfoffphone">
<el-input v-model="form_jhr.gfoffphone" placeholder="请输入办公电话" @input="onInput()" />
<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-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-col :xs="24" :sm="12">
<el-form-item label="其他联系人姓名" prop="grandmothername">
<el-input v-model="form_jhr.grandmothername" placeholder="请输入其他联系人姓名" @input="onInput()"/>
<el-input
v-model="form_jhr.grandmothername"
placeholder="请输入其他联系人姓名"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="与幼儿关系" prop="gmgx">
<el-select v-model="form_jhr.gmgx" placeholder="请选择与幼儿关系" @input="onInput()">
<el-select
v-model="form_jhr.gmgx"
placeholder="请选择与幼儿关系"
@input="onInput()"
>
<el-option
v-for="dict in jtgxOptions"
:key="dict.dictValue"
@@ -279,19 +400,31 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="gmphone">
<el-input v-model="form_jhr.gmphone" placeholder="请输入联系电话" @input="onInput()"/>
<el-input
v-model="form_jhr.gmphone"
placeholder="请输入联系电话"
@input="onInput()"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-col :xs="24" :sm="12">
<el-form-item label="办公电话" prop="gmoffphone">
<el-input v-model="form_jhr.gmoffphone" placeholder="请输入办公电话" @input="onInput()"/>
<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-input
v-model="form_jhr.gmaddress"
placeholder="请输入住址"
@input="onInput()"
/>
</el-form-item>
</el-col>
</el-row>
@@ -327,22 +460,22 @@ export default {
placeholders: {
province: "请选择省",
city: "请选择市",
area: "请选择区"
area: "请选择区",
},
diglogForm: {
province: null,
city: null,
area: null
area: null,
},
diglogForm1: {
province: null,
city: null,
area: null
area: null,
},
diglogForm2: {
province: null,
city: null,
area: null
area: null,
},
hide: false,
ishf: true,
@@ -373,7 +506,7 @@ export default {
// 查询参数
queryParams: {
name: undefined,
phone: undefined
phone: undefined,
},
// 表单参数
form: {},
@@ -381,25 +514,23 @@ export default {
form_jhr: {},
};
},
created() {
},
created() {},
components: {
//省市区三级联动全局组件
VDistpicker
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 => {
Object.keys(datas).map((key) => {
if (datas[key].bjbh == "" + row.classid) {
actions.push(datas[key].bjmc);
return false;
@@ -409,34 +540,46 @@ export default {
},
/** 查询幼儿信息 */
getInfo() {
getChild_query(this.queryParams).then(response => {
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.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.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.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.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.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;
@@ -454,14 +597,14 @@ export default {
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
updateChild_jz(this.form).then(response => {
updateChild_jz(this.form).then((response) => {
if (response.code === 200) {
this.form_jhr.childid = this.form.id;
updateContactpeople_jz(this.form_jhr).then(response => {
updateContactpeople_jz(this.form_jhr).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
// this.hide = false;
@@ -552,11 +695,10 @@ export default {
cancel() {
this.queryParams = {
name: undefined,
phone: undefined
phone: undefined,
};
}
}
},
},
};
</script>
<style lang="scss" scoped>