组件互调
框架地址:https://github.com/nandy007/project_h5
路由部分
{
path: ‘/hllr’,
component: HLLRPage,
//设置缓存
cache:true,
},
static get tag(){
return ‘hllr’;
}
页面一跳转，并重新加载组件
router.go({path: ‘/selectman’, isForce: true});
//接收页面二组件参数
fname(str){
//需展示值得添加
$(’#selectactor’).val(str)
}
页面二
//组件传值
//aui-hllr:需传到组件return值
//页面一与create同级fname方法,names页面二需传递的值
document.querySelector(‘aui-hllr’).component.fname(names);
//关闭当前页面，即页面二
history.go(-1);
本地缓存
//input type=text
<input name="hlhmc" v-model="hlhmc" type="text" placeholder="" required >
//input type=tel
<input v-model="sjh" type="tel" maxlength="11" required >
<input v-bind:value="sjh" name="sjh" type="hidden" required >
//checkbox
<input v-model="zjss" type="checkbox">
//select
<label id="cat" class="pleft1" v-if="zjss">
<span class="stylespan" >合理化分类</span>
<select id="md-category" name="hlhfl" v-model="hlhfl">
<option>请选择</option>
<option v-for="item in items" v-bind:value='item.value'>{{item.text}}</option>
</select>
</label>
//select下拉框
var fselect=[];
//本地存储
var localjson=[];
去空数组
if(e2.text.trim()!= "") {
fselect.push(e2);
}
//插入数据
sublocal:function(){
var localdata=JSON.stringify($("form").serializeArray());
localStorage.setItem('localjson',localdata);
console.log(localdata)
},
//本地存储 获取
getlocal:function(){
if(obj.hlhfl!=''){
obj.xian=true
}
//获取存储的参数
var ljson=[];
ljson = JSON.parse(localStorage.getItem('localjson'));
// push之前先清空数组,防止重复添加
localjson.splice(0,localjson.length);
$.each(ljson, function(e,e1) {
if(e1.value=='true'){
this.value=true
}else if(e1.value=='false'){
this.value=false
}
//跳转选择值之前若为空则不加该值，不然传过来的值会被置空
if(e1.value!=''){
localjson.push(e1.value);
obj[e1.name]=e1.value;
console.log(e1.name+'--'+e1.value);
}
});
},
页面一
<ui>
<div id="auiscrollerlr">
<aui-header>
<aui-titlebar class="reverse">
<left-area>
<aui-action type="back"><i class="icon auicon icon-arrowleft" style="color:white;"></i></aui-action>
</left-area>
<caption-area v-on:click="func.sublocal()">
<aui-text>合理化录入</aui-text>
</caption-area>
<right-area v-on:click="func.getlocal()">
<a>
<i class="icon auicon icon-rdoadd" style="color:white;"></i>
</a>
</right-area>
</aui-titlebar>
</aui-header>
<aui-scroller class="content" style="position: absolute; top: 45px; right: 0px; bottom: 0px;left: 0px;text-align: center; background-color:white;">
<form id="demo" style="display:none" mbsc-form>
<div class="mbsc-form-group">
<label class="pleft1">
<span class="stylespan">合理化名称 </span>
<input name="hlhmc" v-model="hlhmc" type="text" placeholder="" required >
</label>
</div>
<div class="mbsc-form-group">
<label class="pleft1">
<span class="stylespan" >提出时间</span>
<input name="tcsj" v-model="tcsj" id="md-starttime" type="text" placeholder="开始" required >
</label>
<label style="text-align:left;">
<span class="stylespan" style="text-align:left;" >自己实施</span>
<input v-model="zjss" type="checkbox">
<input type="hidden" name="zjss" v-bind:value="zjss">
</label>
<label id="cat" class="pleft1" v-if="zjss">
<span class="stylespan" >合理化分类</span>
<select id="md-category" name="hlhfl" v-model="hlhfl">
<option>请选择</option>
<option v-for="item in items" v-bind:value='item.value'>{{item.text}}</option>
</select>
</label>
<label id="hlh_phone" class="pleft1">
<span class="stylespan" >手机号</span>
<input v-model="sjh" type="text" maxlength="11" required >
<input v-bind:value="sjh" name="sjh" type="hidden" required >
</label>
</div>
<div class="mbsc-form-group" >
<label class="pleft1">
<aui-text class="fl stylearea">现状说明(地点、现状缺点与不足)</aui-text>
<textarea name="xzsm" v-model="xzsm" style="text-indent:2em;padding:0;"></textarea>
</label>
<label class="pleft1">
<aui-text class="fl stylearea">改进措施/预期效果</aui-text>
<textarea name="gjcs" v-model="gjcs" style="text-indent:2em;padding:0;"></textarea>
</label>
<label class="pleft1">
<span class="stylespan">建议实施人员 </span>
<input name="jyssry" v-model="jyssry" id="selectactor" v-on:click="func.manclick()" type="text" placeholder="请选择人员" required readonly='readonly'>
</label>
</div>
<div class="mbsc-form-group">
<list-cell id="upimg" style="background-color:#fff;">
<aui-text class="fl">合理化建议附件</aui-text>
<aui-button class="btn btn-primary btcss" v-on:click="func.fimg">附件上传</aui-button>
<div id="filediv" style="display:none"></div>
<img class="fileimg" src="./assets/imgs/upfile.jpg" v-on:click="func.fimg">
</list-cell>
</div>
</form>
</aui-scroller>
</div>
</ui>
<script>
import '@auicomp/header/Header.aui';
import '@auicomp/button/Button.aui';
import '@auicomp/scroller/Scroller.aui';
import '@auicomp/titlebar/Titlebar.aui';
import '@auicomp/datetime/Datetime.aui';
import '@auiutil/mobiscroll3/css/mobiscroll.javascript.min.css';
import mobiscroll from '@auiutil/mobiscroll3/js/mobiscroll.javascript.min';
import Alert from '@auicomp/alert/Alert.aui';
import fetch from '@comm/utils/xfetch';
import { router } from '@auicomp/action/Action.aui';
import Actionsheet from '@auicomp/actionsheet/Actionsheet.aui';
import './Frame.aui';
export default class HLLRPage{
static get tag(){
return 'hllr';
}
//接收上个组件参数
fname(str){
// obj.jyssry=str;
console.log(str);
$('#selectactor').val(str)
}
created () {
mobiscroll.settings = {
theme: 'ios',
lang: 'zh',
};
mobiscroll.form('#demo');
// window.onload=function(){
// obj.func.getlocal();
// }
// alert('执行')
//自己实施复选框
// var actio=document.getElementById("action");
// action.onclick=visibled;
// function visibled(){
// var v=$('input[name="cat1"]:checked ').val();
// if(v=="on"){
// document.getElementById("cat").removeAttribute("style");
// }else{
// document.getElementById("cat").style.display="none";
// }
// }
var names = router.getQueryObj(location.search).names||router.getQueryObj().names;
// if(names!=null&&names!=""){
// $("#selectactor").val(names);
// }
// 某个逻辑发起ajax post请求
var dj = [];
//select下拉框
var fselect=[];
//本地存储
var localjson=[];
fetch({
appId: 'ci_test',
url : 'http://ciurl/hlh_add.jsp',
data: {
// username: lname,
// password: lpassword
},
success: function(json){
//初始化有一个id
var chushi=json.hideInfo[2].value;
//进页面请求数据注入到select
$.each(json.hlh_fenlei, function(e1, e2) {
//select去除空值
if(e2.text.trim()!= "") {
fselect.push(e2);
}
})
// $.each(dj, function(e, e1) {
// $('#md-category').append("<option>" + e1.text + "</option>")
// })
$("#hlh_phone input").val(json.pempMtel)
},
error: function(rs){
Alert.show({
content: rs.errmsg+'未请求成功'
});
}
});
var obj = {
items:fselect,
zjss:false,
hlhmc:'',
tcsj:'',
hlhfl:'',
sjh:'',
xzsm:'',
gjcs:'',
jyssry:'',
func:{
//提交表单数据
// sublocal:function(){
// var localdata=JSON.stringify($("form").serializeArray());
// localStorage.setItem('localjson',localdata);
// console.log(localdata)
// },
//本地存储 获取
// getlocal:function(){
// if(obj.hlhfl!=''){
// obj.xian=true
// }
// obj.xian=true
//获取存储的参数
// var ljson=[];
// ljson = JSON.parse(localStorage.getItem('localjson'));
// push之前先清空数组,防止重复添加
// localjson.splice(0,localjson.length);
// $.each(ljson, function(e,e1) {
// if(e1.value=='true'){
// this.value=true
// }else if(e1.value=='false'){
// this.value=false
// }
//跳转选择值之前若为空则不加该值，不然传过来的值会被置空
// if(e1.value!=''){
// localjson.push(e1.value);
// obj[e1.name]=e1.value;
// console.log(e1.name+'--'+e1.value);
// }
// });
// },
manclick:function(){
//跳转之前先获取表单数据
// obj.func.sublocal();
// router.go('/selectman');
router.go({path: '/selectman', isForce: true});
},
fimg: function() {
Actionsheet.show({
list: [{
text: '拍照上传',
handler: function() {
appnest.photo.camera({
width: 1080, // 拍照后生成图片宽度
success: function(res) {
var img = res.imagePath;
var thumbnailPath = res.thumbnailPath;
// $("filediv").html('<input type="hidden" name="Filedata" subval value="'+img+'"/>');
appnest.photo.getBase64Image({
imagePath: img, // 图片全路径
success: function(res) {
var base64Image = res.data;
// 返回图片的base64编码数据
$('.fileimg').attr('src', base64Image);
obj.file.upfile(img)
},
fail: function(res) {
Alert.show({
content: res.errMsg
});
}
});
},
fail: function(res) {
Alert.show({
content: res.errMsg
});
}
});
}
},
{
text: '图库选择',
handler: function() {
appnest.photo.album({
crop: true,
cropWidth: 300,
success: function(res) {
var img = res.imagePath;
var thumbnailPath = res.thumbnailPath;
// $("filediv").html('<input type="hidden" name="Filedata" subval value="'+img+'"/>');
appnest.photo.getBase64Image({
imagePath: img, // 图片全路径
success: function(res) {
var base64Image = res.data;
// 返回图片的base64编码数据
$('.fileimg').attr('src', base64Image);
obj.file.upfile(img);
},
fail: function(res) {
Alert.show({
content: res.errMsg
});
}
});
},
fail: function(res) {
Alert.show({
content: res.errMsg
});
}
});
}
}
],
doCancel: function() {
console.log('点了取消');
}
});
},
file: {
upfile: function(img) {
//发起请求
fetch({
appId: 'ci_test',
url: 'http://ciurl/bizProp/upload',
success: function(data1) {
alert(JSON.stringify(data1))
},
error: function(rs) {
Alert.show({
content: rs.errMsg
});
}
});
}
}
}
}
$('#auiscrollerlr').render(obj)
// if(names!=''){
// obj.func.getlocal();
// console.log('1')
// }
//拍照上传
// var objimg = {
// fupimg: {
// }
// }
// $('#upimg').render(objimg);
// var objfile = {
// // fujiantjurl:'',
// }
// $('#upimg').render(objimg);
}
}
</script>
<style>
.stylespan{
height:44px;
line-height:44px;
width:110px;
}
.stylearea{
height:44px;
line-height:44px;
width:100%;
text-align: left;
}
a[class="button-selectimg"]{
padding:4px 6px;
border:1px dashed #00A2D4;
border-radius:2px;
}
.pleft1{
padding-left: 1em !important;
}
/* select{
height: 20px;
font-size: 15px;
border: 0;
-moz-appearance:none;
-webkit-appearance:none;
padding-right: 14px;
padding-left:10px;
background: url(../assets/imgs/arrow.png) no-repeat scroll right center transparent;
} */
.fileimg {
width: 100px;
height: 100px;
margin-top: 40px;
margin-left: 50px;
}
.fl{
float: left;
}
.btcss {
top: 10px !important;
right: 25% !important;
transform: none !important;
}
</style>
页面二
<ui>
<aui-header>
<aui-titlebar class="reverse">
<left-area>
<aui-action type="back"><i class="icon auicon icon-arrowleft" style="color:white;"></i></aui-action>
</left-area>
<caption-area>
<aui-text>人员选择</aui-text>
</caption-area>
</aui-titlebar>
</aui-header>
<aui-scroller id="namescroller" class="content" style="position: absolute; top: 45px; right: 0px; bottom: 0px;left: 0px;text-align: center;">
<div style="width:100%;margin:5px 0px;">
<div style="display: inline-block; width:60%;">
<input name="searchman" style="width:100%;height:44px;" id="inputname" type="text" placeholder="请输入关键字" minlength="2" required data-icon="empty">
</div>
<div style="display: inline-block; width:20%;">
<aui-button class="btn btn-link" v-on:click="func.searchname" style="width:20%;">搜索</aui-button>
</div>
</div>
<aui-list id="manlist">
<list-cell v-on:click="func.nlistclick()">
<a style="text-align:left;">
1111111111
</a>
</list-cell>
<list-cell v-for="item in items" v-on:click="func.nlistclick(item.empname)">
<a style="text-align:left;">
{{item.empname}}
</a>
</list-cell>
</aui-list>
</aui-scroller>
</ui>
<script>
import '@auicomp/header/Header.aui';
import '@auicomp/button/Button.aui';
import '@auicomp/scroller/Scroller.aui';
import '@auicomp/titlebar/Titlebar.aui';
import '@auicomp/datetime/Datetime.aui';
import '@auiutil/mobiscroll3/css/mobiscroll.javascript.min.css';
import mobiscroll from '@auiutil/mobiscroll3/js/mobiscroll.javascript.min';
import '@auicomp/list/List.aui';
import Alert from '@auicomp/alert/Alert.aui';
import Confirm from '@auicomp/confirm/Confirm.aui';
import fetch from '@comm/utils/xfetch';
import { router } from '@auicomp/action/Action.aui';
import './Frame.aui';
export default class SelectManPage{
static get tag(){
return 'selectman';
}
created () {
// var lname = router.getQueryObj(location.search).lname||router.getQueryObj().lname;//获取username
// var lpassword = router.getQueryObj(location.search).lpassword||router.getQueryObj().lpassword;//password
var mancout=[];
var f=0; //表示无匹配数据 否则为1
var obj = {
items : mancout,
func:{
searchname:function(){
mancout.splice(0,mancout.length);
var nametag=$("#inputname").val();
var re = new RegExp(nametag);//正则表达判断
f=0;
fetch({
appId: 'ci_test',
url : 'http://ciurl/search.jsp',
data: {
// username: lname,
// password: lpassword
},
success: function(json){
$.each(json.list, function(e,e1) {
var showname=e1.empname;
if(re.test(showname)){
var manjson={empname:showname}
mancout.push(manjson);
f=1;
}
});
if(f==0){
Alert.show({
content: '无匹配数据'
});
}
},
error: function(rs){
Alert.show({
content: rs.errmsg+'未请求成功'
});
}
});
},
nlistclick:function(names){
Confirm.show({
content: '确定选择'+names+'吗？',
doOk: function(){
// router.go('/hllr?names='+names);
//组件传值, 需要传到组件return值 方法
document.querySelector('aui-hllr').component.fname(names);
history.go(-1);
},
doCancel: function(){
console.log('Confirm Cancel');
}
});
}
}
};
$('#namescroller').render(obj);
mobiscroll.settings = {
theme: 'ios',
lang: 'zh',
};
var date, select, widget,
now = new Date(),
form = document.getElementById("demo");
mobiscroll.form('#demo');
date = mobiscroll.date('#md-birthday', {
defaultValue: new Date(now.getFullYear() - 18, 0, 1),
min: new Date(now.getFullYear() - 100, now.getMonth(), now.getDate()),
max: new Date(now.getFullYear() - 13, now.getMonth(), now.getDate())
});
select = mobiscroll.select('#md-country', {
group: true,
maxWidth: [40, 260],
width: [40, 235],
placeholder: 'Country'
});
mobiscroll.numpad('.md-phone', {
display: 'bottom',
cssClass: 'md-phone-num',
template: '{plus}ddddddddddd',
maxLength: 14,
allowLeadingZero: true,
leftKey: {
text: '+',
value: '',
variable: 'plus:+'
},
formatValue: function (numbers, vars, inst) {
var newVal = ' ';
if (vars.plus) {
newVal += vars.plus;
}
newVal += numbers.join().replace(/,/g, '');
return newVal;
},
parseValue: function (value) {
if (value) {
return value.toString().split('');
}
return [];
},
validate: function (event, inst) {
var disabled = [],
invalid = false;
if (inst.isVisible()) {
inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' '
}
return {
invalid: invalid,
disabled: disabled
};
}
});
widget = mobiscroll.widget('#demo-success', {
display: 'center',
focusOnClose: false,
buttons: [{
text: 'Log in',
handler: 'set'
}]
});
form.noValidate = true;
form.onsubmit = validateForm;
function validateForm(event) {
event.preventDefault();
var parent,
errorMsg,
form = (event.target ? event.target : event.srcElement),
f, field, formvalid = true;
for (f = 0; f < form.elements.length; f++) {
field = form.elements[f];
parent = field.parentNode;
errorMsg = parent.querySelector('.mbsc-err-msg');
if (field.validity.valid) {
parent.parentNode.classList.remove('mbsc-err');
if (errorMsg) {
parent.removeChild(errorMsg);
}
} else {
if (!errorMsg) {
errorMsg = document.createElement('span');
errorMsg.className = 'mbsc-err-msg';
errorMsg.innerHTML = 'This field is required';
parent.appendChild(errorMsg);
}
parent.parentNode.classList.add('mbsc-err');
formvalid = false;
}
}
if (formvalid) {
widget.show();
}
return formvalid;
}
}
}
</script>
<style>
.md-phone-num .mbsc-np-dsp {
min-height: 25px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
</style>
路由
import { router } from '@auicomp/page/Page.aui';
import CIcenter from '../pages/CIcenter.aui';
import SelectPage from '../pages/SelectPage.aui';
import HLS from '../pages/HLS.aui';
import JifenPage from '../pages/JifenPage.aui';
import HLLRPage from '../pages/HLLRPage.aui';
import HLListPage from '../pages/HLListPage.aui';
import OtherPage from '../pages/OtherPage.aui';
import SelectManPage from '../pages/SelectManPage.aui';
import Department from '../pages/Department.aui';
import Department_hlh from '../pages/Department_hlh.aui';
import JiFenList from '../pages/JiFenList.aui';
import HLSList from '../pages/HLSList.aui';
import HLSDetail from '../pages/HLSDetail.aui';
import HL_Detail from '../pages/HL_Detail.aui';
router.add([
{
path: '/',
redirect: '/cicenter'
},
{
path: '/cicenter',
component: CIcenter,
},
{
path: '/select',
component: SelectPage
},
{
path: '/hls',
component: HLS
},
{
path: '/jifen',
component: JifenPage
},
{
path: '/hllr',
component: HLLRPage,
cache:true,
},
{
path: '/hllist',
component: HLListPage
},
{
path: '/other',
component: OtherPage
},
{
path: '/selectman',
component: SelectManPage
},
{
path: '/department',
component: Department
},
{
path: '/department_hlh',
component: Department_hlh
},
{
path: '/jifenlist',
component: JiFenList
},
{
path: '/hlslist',
component: HLSList
},
{
path: '/hlsdetail',
component: HLSDetail
},
{
path: '/hl_detail',
component: HL_Detail
}
]);
export default router;
4699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
