PC端
-
省市县数据文件JSON
链接：https://pan.baidu.com/s/1MFwuh6gbhDGgWGhe20JLZQ
提取码：hgbf -
前端代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/webpage/common/taglibs.jspf" %>
<!DOCTYPE html>
<html>
<head>
<title>儿童档案</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="${staticPath}/vendors/element-ui_v2.15.7/index.css">
<script src="${staticPath}/vendors/vue/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="${staticPath}/vendors/element-ui_v2.15.7/index.js"></script>
<!-- 引入jquery -->
<script src="${staticPath}/vendors/jquery/js/jquery.min.js"></script>
<!-- 引入swal -->
<script src="${staticPath}/vendors/swal/sweetalert.min.js"></script>
<!-- 引入省市县数据 -->
<script src="${staticPath}/common/js/element-china-area-data.js"></script>
<style>
.inputWidth180 {
width: 180px !important;
}
.inputWidth240 {
width: 240px !important;
}
.box-card {
margin-bottom: 15px;
}
.el-card__header {
color: red;
}
</style>
</head>
<body class="white-bg" style="display: none;">
<div id="app">
<el-form ref="heaArcRecordForm" :rules="heaArcRecordFormRules" label-position="left" :model="heaArcRecordForm" label-width="100px" :inline="true">
<el-tabs v-model="FActiveName">
<el-tab-pane label="基本信息" name="FAFirst">
<!-- 幼儿信息 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>幼儿信息</span>
</div>
<!-- 第一行表单 -->
<el-col :span="span">
<el-form-item label="幼儿姓名" prop="name">
<el-input class="inputWidth180" placeholder="幼儿姓名"
v-model="heaArcRecordForm.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="幼儿性别" prop="sex">
<el-select class="inputWidth180" placeholder="幼儿性别" v-model="heaArcRecordForm.sex">
<el-option
v-for="item in sexOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="出生年月" prop="birthDate">
<el-date-picker
style="width: 160px;"
v-model="heaArcRecordForm.birthDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="出生年月">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="孕周">
<el-input-number controls-position="right" style="width: 90px;"
v-model="heaArcRecordForm.gestWeek" :min="0" :max="100"
placeholder="周"></el-input-number>
<el-input-number controls-position="right" style="width: 90px;"
v-model="heaArcRecordForm.gestDay" :min="0" :max="100"
placeholder="天"></el-input-number>
</el-form-item>
</el-col>
<!-- 第二行表单 -->
<el-col :span="span">
<el-form-item label="出生体重" prop="birthWeight">
<el-input class="inputWidth180" placeholder="单位（g）"
v-model="heaArcRecordForm.birthWeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="出生身长">
<el-input class="inputWidth180" placeholder="单位（cm）"
v-model="heaArcRecordForm.birthHeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="出生头围">
<el-input class="inputWidth180" placeholder="单位（cm）"
v-model="heaArcRecordForm.birthHead"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="本院出生">
<el-select class="inputWidth180" placeholder="是否本院出生"
v-model="heaArcRecordForm.isCourtBirth">
<el-option
v-for="item in sfOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 第三行表单 -->
<el-col :span="span">
<el-form-item label="幼儿民族">
<el-select filterable class="inputWidth180" placeholder="幼儿民族"
v-model="heaArcRecordForm.childNation">
<el-option
v-for="item in nationOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="孕次">
<el-input-number class="inputWidth180" controls-position="right"
v-model="heaArcRecordForm.gravidityNumber" :min="0"
:max="100"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="胎次">
<el-input-number class="inputWidth180" controls-position="right"
v-model="heaArcRecordForm.parityNumber" :min="0"
:max="100"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="产次">
<el-input-number class="inputWidth180" controls-position="right"
v-model="heaArcRecordForm.paraNumber" :min="0"
:max="100"></el-input-number>
</el-form-item>
</el-col>
<!-- 第四行表单 -->
<el-col :span="span">
<el-form-item label="身份证号">
<el-input filterable class="inputWidth180" placeholder="身份证号"
v-model="heaArcRecordForm.identityCard">
</el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="本地户籍">
<el-select filterable class="inputWidth180" placeholder="本地户籍"
v-model="heaArcRecordForm.isCourtRegister">
<el-option
v-for="item in sfOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="幼儿籍贯">
<el-cascader
class="inputWidth240"
placeholder="搜索省市县"
:options="chinaAreaData"
v-model="nativePlace"
@change="nativePlaceChange"
filterable></el-cascader>
<%-- <el-input class="inputWidth180" placeholder="幼儿籍贯"--%>
<%-- v-model="heaArcRecordForm.nativePlace"></el-input>--%>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="居住地址">
<el-input class="inputWidth180" placeholder="居住地址" v-model="heaArcRecordForm.address">
</el-input>
</el-form-item>
</el-col>
<!-- 最后一行，备注 -->
<el-col :span="12">
<el-form-item label="备注">
<el-input style="width: 300px;" :autosize="{ minRows: 2, maxRows: 4}" type="textarea"
v-model="heaArcRecordForm.remarks"></el-input>
</el-form-item>
</el-col>
</el-card>
<!-- 母亲信息 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>母亲信息</span>
</div>
<!-- 第一行表单 -->
<el-col :span="span">
<el-form-item label="母亲姓名" prop="mName">
<el-input class="inputWidth180" placeholder="母亲姓名"
v-model="heaArcRecordForm.mName"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="母亲电话" prop="mPhone">
<el-input class="inputWidth180" placeholder="母亲电话"
v-model="heaArcRecordForm.mPhone"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="证件类型" prop="mCertificateType">
<el-select filterable class="inputWidth180" placeholder="证件类型"
v-model="heaArcRecordForm.mCertificateType">
<el-option
v-for="item in certTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="证件号码" prop="mIdentityCard">
<el-input class="inputWidth180" placeholder="证件号码"
v-model="heaArcRecordForm.mIdentityCard"></el-input>
</el-form-item>
</el-col>
<!-- 第二行表单 -->
<el-col :span="span">
<el-form-item label="文化程度">
<el-select filterable class="inputWidth180" placeholder="文化程度"
v-model="heaArcRecordForm.mCultureDegree">
<el-option
v-for="item in eduLevelOptiosn"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="母亲身高">
<el-input class="inputWidth180" placeholder="母亲身高"
v-model="heaArcRecordForm.mHeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工作单位">
<el-input style="width: 300px;" placeholder="工作单位"
v-model="heaArcRecordForm.mWorkUnit"></el-input>
</el-form-item>
</el-col>
</el-card>
<!-- 父亲信息 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>父亲信息</span>
</div>
<!-- 第一行表单 -->
<el-col :span="span">
<el-form-item label="父亲姓名" prop="fName">
<el-input class="inputWidth180" placeholder="父亲姓名"
v-model="heaArcRecordForm.fName"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="父亲电话" prop="fPhone">
<el-input class="inputWidth180" placeholder="父亲电话"
v-model="heaArcRecordForm.fPhone"></el-input>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="证件类型" prop="fCertificateType">
<el-select filterable class="inputWidth180" placeholder="证件类型"
v-model="heaArcRecordForm.fCertificateType">
<el-option
v-for="item in certTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="证件号码" prop="fIdentityCard">
<el-input class="inputWidth180" placeholder="证件号码"
v-model="heaArcRecordForm.fIdentityCard"></el-input>
</el-form-item>
</el-col>
<!-- 第二行表单 -->
<el-col :span="span">
<el-form-item label="文化程度">
<el-select filterable class="inputWidth180" placeholder="文化程度"
v-model="heaArcRecordForm.fCultureDegree">
<el-option
v-for="item in eduLevelOptiosn"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="父亲身高">
<el-input class="inputWidth180" placeholder="父亲身高"
v-model="heaArcRecordForm.fHeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工作单位">
<el-input style="width: 300px;" placeholder="工作单位"
v-model="heaArcRecordForm.fWorkUnit"></el-input>
</el-form-item>
</el-col>
</el-card>
<!-- 就诊号以及母亲就诊卡 -->
<el-card class="box-card">
<el-col :span="12">
<el-form-item label="就诊号">
<el-input class="inputWidth240" placeholder="就诊号"
v-model="heaArcRecordForm.seeNumber"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="母亲就诊卡">
<el-input class="inputWidth240" placeholder="母亲就诊卡"
v-model="heaArcRecordForm.mSeeCard"></el-input>
</el-form-item>
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label="高危因素" name="FASecond">
<el-form-item label="快筛">
<el-input v-model="quickQueryByItemName" size="mini" @input="quickQueryInput"></el-input>
</el-form-item>
<el-tabs v-model="SActiveName">
<el-tab-pane label="胎儿期高危因素" name="SAFirst">
<el-checkbox-group v-model="highElementList">
<el-col style="margin: 5px;" :span="24" :key="item.id" v-for="item in teqHighElement">
<el-checkbox :label="item.itemCode">{{ item.itemName }}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="分娩期高危因数" name="SASecond">
<el-checkbox-group v-model="highElementList">
<el-col style="margin: 5px;" :span="24" :key="item.id" v-for="item in fmqHighElement">
<el-checkbox :label="item.itemCode">{{ item.itemName }}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="新生儿高危因数" name="SAThird">
<el-checkbox-group v-model="highElementList">
<el-col style="margin: 5px;" :span="24" :key="item.id" v-for="item in xseqHighElement">
<el-checkbox :label="item.itemCode">{{ item.itemName }}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="自定义高危因数" name="SAFourth">
<el-col :span="24">
<el-input
type="textarea"
:rows="5"
:autosize="{ minRows: 5, maxRows: 15}"
placeholder="自定义高危因数"
v-model="customHighElement">
</el-input>
</el-col>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="新生儿筛选" name="FAThird">
<el-col :span="span">
<el-form-item label="听力筛查">
<el-select class="inputWidth180" placeholder="听力筛查" v-model="screenForm.hearing">
<el-option
v-for="item in arcHearingDicts"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="疾病筛查">
<el-select class="inputWidth180" placeholder="疾病筛查" v-model="screenForm.illness">
<el-option
v-for="item in arcDiseaseDicts"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="眼病筛查">
<el-select class="inputWidth180" placeholder="眼病筛查" v-model="screenForm.eyeDisease">
<el-option
v-for="item in arcEyeDicts"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="span">
<el-form-item label="神经行为测定">
<el-input-number style="width: 150px;" v-model="screenForm.neurobehavior" :min="0" :max="100"
label="神经行为测定"></el-input-number>
</el-form-item>
</el-col>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</body>
<script>
function doSubmit(func) {
window.closeAlert = func;
// 将vue中的表单提交
heaArcRecordFormSubmit();
}
let vue = new Vue({
el: "#app",
data() {
return {
// 省市县数据
chinaAreaData: [],
// 省市县选中后的数组
nativePlace: [],
// span占的比例，一共为24
span: 8,
// 档案id
recordId: '',
// 选中的标签
FActiveName: "FAFirst",
SActiveName: "SAFirst",
// 提交的表单
heaArcRecordForm: {
name: '',
sex: '',
birthDate: '',
gestWeek: '',
gestDay: '',
birthWeight: '',
birthHeight: '',
birthHead: '',
isCourtBirth: '0',
childNation: '',
gravidityNumber: '',
parityNumber: '',
paraNumber: '',
identityCard: '',
isCourtRegister: '0',
nativePlace: '',
address: '',
remarks: '',
mName: '',
mPhone: '',
mCertificateType: '',
mIdentityCard: '',
mCultureDegree: '',
mHeight: '',
mWorkUnit: '',
fName: '',
fPhone: '',
fCertificateType: '',
fIdentityCard: '',
fCultureDegree: '',
fHeight: '',
fWorkUnit: '',
seeNumber: '',
mSeeCard: '',
},
// 表单校验
heaArcRecordFormRules: {
name: [
{ required: true, message: '请输入幼儿姓名', trigger: 'blur' },
],
sex: [
{ required: true, message: '请选择幼儿性别', trigger: 'change' },
],
birthDate: [
{ required: true, message: '请选择出生年月', trigger: 'change' }
],
birthWeight: [
{
required: true,
trigger: 'blur',
validator: function(rule,value,callback) {
if(value){
if((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) == false){
callback(new Error("请填写大于0的数字"));
}else if (value > 500){
callback(new Error("请填写小于500的数字"));
}else {
callback()
}
}else{
callback(new Error("请输入出生体重"));
}
}
}
],
mName: [
{ required: true, message: '请输入母亲姓名', trigger: 'blur' },
],
mPhone: [
{
required: true,
trigger: 'blur',
validator: function(rule,value,callback) {
if (value) {
if(!vue.checkPhone(value)){
callback(new Error("请输入正确的电话号码"));
}else {
callback();
}
}else {
callback(new Error("请输入母亲电话"));
}
}
},
],
mCertificateType: [
{ required: true, message: '请选择母亲证件类型', trigger: 'change' },
],
mIdentityCard: [
{
required: true,
trigger: 'blur',
validator: function(rule,value,callback) {
if (value) {
if(!vue.checkIdentityCard(value)){
callback(new Error("请输入正确的身份证号码"));
}else {
callback();
}
}else {
callback(new Error("请输入母亲身份证号码"));
}
}
}
],
// fName: [
// { required: true, message: '请输入父亲姓名', trigger: 'blur' },
// ],
// fPhone: [
// {
// required: true,
// trigger: 'blur',
// validator: function(rule,value,callback) {
// if (value) {
// if(!vue.checkPhone(value)){
// callback(new Error("请输入正确的电话号码"));
// }else {
// callback();
// }
// }else {
// callback(new Error("请输入父亲电话"));
// }
// }
// }
// ],
// fCertificateType: [
// { required: true, message: '请选择父亲证件类型', trigger: 'change' },
// ],
// fIdentityCard: [
// {
// required: true,
// trigger: 'blur',
// validator: function(rule,value,callback) {
// if (value) {
// if(!vue.checkIdentityCard(value)){
// callback(new Error("请输入正确的身份证号码"));
// }else {
// callback();
// }
// }else {
// callback(new Error("请输入父亲身份证号码"));
// }
// }
// }
// ],
},
// 新生儿筛查表单
screenForm: {
hearing: '',
illness: '',
eyeDisease: '',
neurobehavior: 0,
},
// 选中的高危因素
highElementList: [],
// 默认选中的高危因素
heaArcRecordElementList: [],
// 性别选项
sexOptions: [],
// 是否选项
sfOptions: [],
// 民族选项
nationOptions: [],
// 文化程度选项
eduLevelOptiosn: [],
// 证件类型
certTypeOptions: [],
// 所有的高危因素
allHighElementList: [],
// 胎儿期高危因素
teqHighElement: [],
// 分娩期高危因素
fmqHighElement: [],
// 新生儿期高危因素
xseqHighElement: [],
// 自定义高危因素
customHighElement: '',
// 快筛绑定的值
quickQueryByItemName: '',
// 加载按钮
loading: '',
// 字典听力筛选结果
arcHearingDicts: [],
// 字典疾病筛选结果
arcDiseaseDicts: [],
// 字典眼病筛选结果
arcEyeDicts: [],
// 所有的高危因素
allHighElementList: [],
// 是否获取了所有的高危因素
allHighElementIsLoad: false,
}
},
methods: {
// 数据提交
heaArcRecordFormSubmit() {
let that = this;
that.$refs['heaArcRecordForm'].validate(function(valid) {
if (valid) {
let requestData = {};
requestData.heaArcRecord = that.heaArcRecordForm;
requestData.screen = that.screenForm;
// 选中的高危因素只存储了ItemCode，我们要将其整个对象进行传递
let highElementList = [];
for (let i in that.highElementList) {
let item = that.highElementList[i];
for (let j in that.allHighElementList) {
let jtem = that.allHighElementList[j];
if (item == jtem.itemCode) {
highElementList.push(jtem);
break;
}
}
}
requestData.highElementList = highElementList;
$.ajax({
url: "${adminPath}/hea/arc/heaarcrecord/save",
data: JSON.stringify(requestData),
contentType: 'application/json',
type: 'POST',
cache: false,
success: function (d) {
if (d.ret == 0) {
var msg = d.msg;
swal("提示！", msg, "success");
} else {
var msg = d.msg;
swal("提示！", msg, "error");
}
// 关闭弹窗，并且重新读取数据
window.setTimeout(function() {
window.closeAlert("heaArcRecordGridIdGrid");
}, 1000);
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
// 获取高危因素数据
getHighElement() {
let that = this;
// 获取当前时间戳
var currentTime = new Date().getTime();
let queryData = {
queryFields: "id,itemType,itemName,itemCode,createDate,submit,",
_search: false,
"page.size": 10000,
"page.pn": 1,
order: "asc",
sort: "",
nd: currentTime,
};
if (that.quickQueryByItemName) {
queryData["itemName"] = that.quickQueryByItemName;
queryData["query.itemName||like"] = that.quickQueryByItemName;
}
$.ajax({
url: "${adminPath}/sta/high/stahighelement/ajaxList?gridtype=jqgrid",
data: queryData,
type: 'POST',
cache: false,
success: function (d) {
// 将得到的高危因素按类型进行分类
let results = d.results;
if (!that.allHighElementIsLoad && !that.quickQueryByItemName) {
that.allHighElementList = results;
that.allHighElementIsLoad = true;
}
// 定义四种高危因素数组
let teqHighElement = [];
let fmqHighElement = [];
let xseqHighElement = [];
for (let i in results) {
let item = results[i];
// 胎儿期高危因素
if (item.itemType == '1') {
teqHighElement.push(item);
// 分娩期高危因素
} else if (item.itemType == '2') {
fmqHighElement.push(item);
// 新生儿期高危因素
} else if (item.itemType == '3') {
xseqHighElement.push(item);
// 其他高危因素
} else if (item.itemType == '4') {
}
}
that.teqHighElement = teqHighElement;
that.fmqHighElement = fmqHighElement;
that.xseqHighElement = xseqHighElement;
}
});
},
// 快筛输入框值发生改变时触发
quickQueryInput(value) {
let that = this;
that.getHighElement();
},
// 根据字典分组名称获取字典列表,vueObject是vue中定义的数据，用来保存获取的数据
getDictByDictGroupCode(groupCode, func) {
let that = this;
$.ajax({
url: "${adminPath}/sys/dict/getDictByDictGroupCode/" + groupCode,
type: 'GET',
cache: false,
success: function (d) {
if (d.ret == 0) {
func(d.data);
}
}
});
},
// 显示加载按钮
showLoading(text) {
let that = this;
if (!text) {
text = 'loading';
}
that.loading = that.$loading({
lock: true,
text: text,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
},
// 隐藏加载按钮
hideLoading() {
let that = this;
if (that.loading) {
that.loading.close();
that.loading = "";
}
},
// 正则判断是否是手机号码
checkPhone(phone) {
let reg = /^1[3456789]\d{9}$/;
return reg.test(phone);
},
// 正则判断是否为身份证号码
checkIdentityCard(identityCard) {
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return reg.test(identityCard);
},
// 籍贯选中后事件
nativePlaceChange(node) {
let that = this;
that.casCaderChangeFormat(node)
},
// 将级联选择的数据转化为字符串
casCaderChangeFormat(node) {
let that = this;
let nativePlace = "";
for (let i in that.chinaAreaData) {
let item = that.chinaAreaData[i]
if (item.value == node[0]) {
nativePlace += item.label + "/";
let children = item.children
for (let j in children) {
if (children[j].value == node[1]) {
nativePlace += children[j].label + "/";
let cchildren = children[j].children
for (let k in cchildren) {
if (cchildren[k].value == node[2]) {
nativePlace += cchildren[k].label;
break;
}
}
break;
}
}
break;
}
}
that.heaArcRecordForm.nativePlace = nativePlace;
},
// 将获取到的数据转化为级联选择器的数组，用来回显
formatNativePlace() {
let that = this;
if (that.heaArcRecordForm.nativePlace) {
let nativePlaces = [];
let placeArray = that.heaArcRecordForm.nativePlace.split("/");
for (let i in that.chinaAreaData) {
let item = that.chinaAreaData[i]
if (item.label == placeArray[0]) {
nativePlaces.push(item.value);
let children = item.children
for (let j in children) {
if (children[j].label == placeArray[1]) {
nativePlaces.push(children[j].value);
let cchildren = children[j].children
for (let k in cchildren) {
if (cchildren[k].label == placeArray[2]) {
nativePlaces.push(cchildren[k].value);
break;
}
}
break;
}
}
break;
}
}
that.nativePlace = nativePlaces;
}
},
},
created() {
let that = this;
// 将提交数据的方法注册到window中
window.heaArcRecordFormSubmit = that.heaArcRecordFormSubmit;
let heaArcRecord = '${heaArcRecord}';
let heaArcRecordElementList = '${heaArcRecordElementList}';
let heaArcRecordScreen = '${heaArcRecordScreen}';
// 省市县赋值
that.chinaAreaData = chinaAreaData;
// 转化为对象
if (heaArcRecord) {
that.heaArcRecordForm = JSON.parse(heaArcRecord)
that.formatNativePlace();
}
if (heaArcRecordElementList) {
that.heaArcRecordElementList = JSON.parse(heaArcRecordElementList);
for (let i in that.heaArcRecordElementList) {
let item = that.heaArcRecordElementList[i];
that.highElementList.push(item.itemCode);
}
}
if (heaArcRecordScreen) {
that.screenForm = JSON.parse(heaArcRecordScreen);
}
that.getHighElement();
// 获取字典：听力筛选结果
that.getDictByDictGroupCode("archearing", function (data) {
that.arcHearingDicts = data
});
// 获取字典：疾病筛选结果
that.getDictByDictGroupCode("arcdisease", function (data) {
that.arcDiseaseDicts = data
});
// 获取字典：眼病筛选结果
that.getDictByDictGroupCode("arceye", function (data) {
that.arcEyeDicts = data
});
// 获取字典：民族
that.getDictByDictGroupCode("nation", function (data) {
that.nationOptions = data
});
// 获取字典：证件类型
that.getDictByDictGroupCode("certificateType", function (data) {
that.certTypeOptions = data
});
// 获取字典：文化程度
that.getDictByDictGroupCode("eduLevel", function (data) {
that.eduLevelOptiosn = data
});
// 获取字典：是否选项
that.getDictByDictGroupCode("sf", function (data) {
that.sfOptions = data
});
// 获取字典：性别
that.getDictByDictGroupCode("sex", function (data) {
that.sexOptions = data
});
},
});
// 所有资源加载完毕之后，才显示html中的内容
$(function () {
$("body").show();
})
</script>
</html>
移动端
-
省市县数据JSON文件
链接：https://pan.baidu.com/s/1XJjq6ia2joUx4uCnYpjb4A
提取码：ac9p -
前端代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, minimum-scale = 0.625, maximum-scale = 0.625, target-densitydpi=device-dpi">
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<script src="../../js/flexible.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入样式和js文件 -->
<link rel="stylesheet" type="text/css" href="../../css/mobileSelect.css">
<script src="../../js/mobileSelect.js" type="text/javascript"></script>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../../js/selectDate.js"></script>
<script src="../../js/wechatUtils.js"></script>
<!-- 中国省、市、县、区等数据 -->
<script type="text/javascript" src="../../js/element-china-area-data.js"></script>
</head>
<body>
<div class="nav-bar">
<a class="back" href="javascript:history.go(-1)"></a>
<span class="title">儿童建档</span>
<span class="right"></span>
</div>
<div class="container">
<div class="form-title">儿童基本信息</div>
<form action="#" onsubmit="submit">
<div class="round">
<div class="form-items">
<div class="item">
<label>幼儿姓名</label>
<input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="input">
</div>
<div class="item icon">
<label>幼儿性别</label>
<input class="input" type="text" id="chooseSex" name="sex" value="" placeholder="请选择" required readonly>
</div>
<div class="item icon">
<label>出生年月</label>
<input class="input" type="text" id="chooseDate" name="born" value="" placeholder="请选择" required readonly>
</div>
<div class="item">
<label>孕周</label>
<input type="text" name="week" autocomplete="off" placeholder="例:36周5天" class="input">
</div>
<div class="item">
<label>出生体重(g)</label>
<input type="text" name="weight" autocomplete="off" placeholder="请输入体重" class="input">
</div>
<div class="item">
<label>出生身长(cm)</label>
<input type="text" name="length" autocomplete="off" placeholder="请输入体重" class="input">
</div>
<div class="item">
<label>出生头围(cm)</label>
<input type="text" name="headnum" autocomplete="off" placeholder="请输入头围" class="input">
</div>
<div class="item icon">
<label>是否本院出生</label>
<input type="text" name="hospital" readonly="" autocomplete="off" placeholder="请选择" class="input" id="chooseHospital">
</div>
<div class="item">
<label>幼儿民族</label>
<input type="text" name="nation" autocomplete="off" placeholder="请填写" class="input">
</div>
<div class="item">
<label>孕次</label>
<input type="text" name="gravidity" autocomplete="off" placeholder="请填写" class="input">
</div>
<div class="item">
<label>胎次</label>
<input type="text" name="birthnum" autocomplete="off" placeholder="请填写" class="input">
</div>
<div class="item">
<label>产次</label>
<input type="text" name="parity" autocomplete="off" placeholder="请填写" class="input">
</div>
<div class="item">
<label>身份证号</label>
<input type="text" name="idcard" autocomplete="off" placeholder="请填写" class="input">
</div>
<div class="item icon">
<label>是否本地户籍</label>
<input type="text" name="census" maxlength="19" placeholder="请选择" class="input" id="chooseCensus">
</div>
<div class="item icon">
<label>幼儿籍贯</label>
<input type="text" name="birthplace" id="chooseBirthPlace" placeholder="请选择" autocomplete="off" class="input">
</div>
<div class="item">
<label>居住地址</label>
<input type="text" name="address" maxlength="19" placeholder="请填写" class="input">
</div>
<div class="item">
<label>备注</label>
<input type="text" name="remarks" maxlength="19" placeholder="请填写" class="input">
</div>
</div>
</div>
<div class="submit">
<a class="submit btn btn-success" id="submit">下一步</a>
<a class="submit btn bg-warning " id="submit">取消</a>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript">
// 根据字典分组名称获取字典列表,vueObject是vue中定义的数据，用来保存获取的数据
function getDictByDictGroupCode(groupCode, func) {
$.ajax({
url: "${adminPath}/sys/dict/getDictByDictGroupCode/" + groupCode,
type: 'GET',
cache: false,
success: function (d) {
if (d.ret == 0) {
func(d.data);
}
}
});
}
// 选择性别
var mobileSelect1 = new MobileSelect({
trigger: '#chooseSex',
title: '请选择性别',
wheels: [
{data:['男','女']}
],
position:[0],
callback:function(indexArr, data){
$("#chooseSex").val(data[0]);
$("#chooseSex").blur();
}
});
//选择日期
$.selectDate("#chooseDate", {
start: 1939,
end: 2058,
select: [2000, 8, 8],
title: ' '
}, function (data) {
$('#chooseDate').val(data.year+'-'+data.month+'-'+data.day+'-')
});
//是否本院出生
var mobileSelect2 = new MobileSelect({
trigger: '#chooseHospital',
title: '是否本院出生',
wheels: [
{data:['是','否']}
],
position:[0],
callback:function(indexArr, data){
$("#chooseHospital").val(data[0]);
$("#chooseHospital").blur();
}
});
// 获取本地城市json
var cityObj = new Object;
$.ajax({
url: '/js/city.json',
type: 'GET',
dataType: 'json',
async: false,
success: function(res) {
cityObj = res;
}
});
// 选择幼儿籍贯
var mobileSelect3 = new MobileSelect({
trigger: '#chooseBirthPlace',
title: '选择幼儿籍贯',
wheels: [
{data: cityObj}
],
position:[0,0,0],
transitionEnd: function(indexArr, data) {
console.log(data)
},
callback:function(indexArr, data){
let val = "";
if (data) {
for (let i in data) {
let item = data[i];
val += item.value
if (i < data.length - 1) {
val += "/"
}
}
$("#chooseBirthPlace").val(val);
$("#chooseBirthPlace").blur();
}
}
});
</script>
</html>
扫一扫
8016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
