版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35656188/article/details/79237850
一、WXML
<!-- 部门 -->< picker bindchange = "bindPickerChange1" value = "{{departIndex}}" range = "{{departArray}}">< view class = "list clear">< view class = 'left'> {{departName}} </ view >< view class = 'right'>< image mode = "widthFix" src = "/resources/images/task/23.png"></ image ></ view ></ view ></ picker ><!-- 区域 -->< picker bindchange = "bindPickerChange2" value = "{{areaIndex}}" range = "{{areaArray}}">< view class = "list clear">< view class = 'left'> {{areaName}} </ view >< view class = 'right'>< image mode = "widthFix" src = "/resources/images/task/23.png"></ image ></ view ></ view ></ picker ><!-- 单元 -->< picker bindchange = "bindPickerChange3" value = "{{unitIndex}}" range = "{{unitArray}}">< view class = "list clear">< view class = 'left'> {{unitName}} </ view >< view class = 'right'>< image mode = "widthFix" src = "/resources/images/task/23.png"></ image ></ view ></ view ></ picker >
二、WXSS
.list {width: 100% ;margin: 30 rpx auto ;box-sizing: border-box ;padding: 0px 3% ;}.list .left {width: 88% ;background-color: #fff ;height: 80 rpx ;line-height: 80 rpx ;padding-left: 18 rpx ;box-sizing: border-box ;border-top-left-radius: 20 rpx ;border-bottom-left-radius: 20 rpx ;color: #666666 ;}.list .right {width: 12% ;background-color: #EAEBF1 ;height: 80 rpx ;line-height: 90 rpx ;text-align: center ;box-sizing: border-box ;border-top-right-radius: 20 rpx ;border-bottom-right-radius: 20 rpx ;}.list .right image {width: 30 rpx ;height: 30 rpx ;}
三、JS
var app = getApp();var https = 'https://xrun-5s.com/ashx/ApiService_wqq.ashx' ;var departmentData = [ "请选择部门" ]; //部门名称var departmentDatas = [{ ID: 0 , title: '请选择' }]; //部门名称加idvar areaData = [ "请选择区域" ];var areaDatas = [{ ID: 0 , title: '请选择' }];var unitData = [ "请选择单元" ];var unitDatas = [{ ID: 0 , title: '请选择' }];var staffData = [ "请点击选择" ];var staffDatas = [{ ID: 0 , title: '请选择' }];var deIndexStr = 0 ; //选中的部门idvar areaIndexStr = 0 ; //选中的区域idvar unitIndexStr = 0 ; //选中的单元idvar staffIndexStr = 0 ; //选中的巡检人idvar that1;data: {departArray: ["请选择部门"],departIndex: 0 ,departName: "请选择部门" ,areaArray: [ "请选择区域" ],areaIndex: 0 ,areaName: "请选择区域" ,unitArray: [ "请选择单元" ],unitIndex: 0 ,unitName: "请选择单元"}}onLoad: function (options) {departmentData = [ "请选择部门" ];departmentDatas = [{ ID: 0 , title: '请选择' }];staffData = [ "请点击选择" ];staffDatas = [{ ID: 0 , title: '请选择' }];var that = this ;that1 = this ;//加载部门var param = {action: "LoadDepartment" ,CompanyID: wx.getStorageSync( 'CompanyID' )};wx.request({method: 'GET' ,dataType: "json" ,header: {'content-type' : 'application/json' // 默认值},data: param,url: https,success: function (res) {if (res.data.Status > 0 ) {var items = res.data.Data;for ( var i = 0 ; i < items.length; i++) {var obj = new Object();obj = items[i].DepartmentName;departmentData.push(obj);var objs = new Object();objs.ID = items[i].DepartmentID;objs.title = items[i].DepartmentName;departmentDatas.push(objs);}that.setData({departArray: departmentData});}}});
bindPickerChange1: function (e) {console.log( 'picker部门发送选择改变,携带值为' , e.detail.value)this .setData({departIndex: e.detail.value})this .setData({departName: this .data.departArray[ this .data.departIndex]})for ( var i = 0 ; i < departmentDatas.length; i++) {if (departmentData[e.detail.value] == departmentDatas[i].title) {deIndexStr = departmentDatas[i].ID;}}areaIndexStr = 0 ;unitIndexStr= 0 ;areaData = [ "请选择区域" ];areaDatas = [{ ID: 0 , title: '请选择' }];that1.setData({areaArray: areaData,areaName: "请选择区域" ,areaIndex: 0 ,unitArray: [ "请选择单元" ],unitIndex: 0 ,unitName: "请选择单元"});//加载区域var param = {action: "LoadArea" ,CompanyID: wx.getStorageSync( 'CompanyID' ),DepartmentID: deIndexStr};wx.request({method: 'GET' ,dataType: "json" ,header: {'content-type' : 'application/json' // 默认值},data: param,url: https,success: function (res) {//console.log(res);if (res.data.Status > 0 ) {var items = res.data.Data;for ( var i = 0 ; i < items.length; i++) {var obj = new Object();obj = items[i].AreaName;areaData.push(obj);var objs = new Object();objs.ID = items[i].AreaID;objs.title = items[i].AreaName;areaDatas.push(objs);}that1.setData({areaArray: areaData});}}})},bindPickerChange2: function (e) {console.log( 'picker区域发送选择改变,携带值为' , e.detail.value)this .setData({areaIndex: e.detail.value});this .setData({areaName: this .data.areaArray[ this .data.areaIndex]});for ( var i = 0 ; i < areaDatas.length; i++) {if (areaData[e.detail.value] == areaDatas[i].title) {areaIndexStr = areaDatas[i].ID;}}unitIndexStr = 0 ;unitData = [ "请选择单元" ];unitDatas = [{ ID: 0 , title: '请选择' }];that1.setData({unitArray: unitData,unitIndex: 0 ,unitName: "请选择单元"});//加载单元var param = {action: "LoadUnit" ,AreaID: areaIndexStr};wx.request({method: 'GET' ,dataType: "json" ,header: {'content-type' : 'application/json' // 默认值},data: param,url: https,success: function (res) {//console.log(res);if (res.data.Status > 0 ) {var items = res.data.Data;for ( var i = 0 ; i < items.length; i++) {var obj = new Object();obj = items[i].UnitName;unitData.push(obj);var objs = new Object();objs.ID = items[i].UnitID;objs.title = items[i].UnitName;unitDatas.push(objs);}that1.setData({unitArray: unitData});}}})},bindPickerChange3: function (e) {console.log( 'picker单元发送选择改变,携带值为' , e.detail.value)this .setData({unitIndex: e.detail.value})this .setData({unitName: this .data.unitArray[ this .data.unitIndex]})for ( var i = 0 ; i < unitDatas.length; i++) {if (unitData[e.detail.value] == unitDatas[i].title) {unitIndexStr = unitDatas[i].ID;}}},