组件互调
框架地址: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;