一、效果展示
1、主頁面
展示了兩個選擇行
2、選擇頁面
根據傳遞的參數決定員工展示的數據,并且單選,可將數據傳遞給主頁面
二、主頁面實現
1、視圖層
寫入了采購員和庫管員的行選擇信息
<view class="item flex flex-between"><view class="item_title">采購員:</view><view class="item_info"><view class="pickertext" bind:tap="select_poperson"><text style="color: {{!poperson_sel ? '#8d8d8d' : ''}}">{{poperson_sel?poperson_sel.employee_name:'請選擇'}}<text class="sel_btn">></text></text></view></view>
</view>
<view class="item flex flex-between"><view class="item_title">庫管員:</view><view class="item_info"><view class="pickertext" bind:tap="select_warseperson"><text style="color: {{!warehouse_sel ? '#8d8d8d' : ''}}">{{warehouse_sel?warehouse_sel.employee_name:'請選擇'}}<text class="sel_btn">></text></text></view></view>
</view>
2、邏輯層
(1)參數定義
在data中寫入必要的參數(對應到視圖層的數據)
data: {poperson_sel: '', //選擇的采購員warehouse_sel: '', //選擇的庫管員
},
(2)處理選擇頁面返回的數據
執行方法,可得到返回的數據,并且根據數據進行賦值
//員工選擇的數據展示
setSelectedEmployee(employee, field, source) {console.log('接收到字段:', field, '來源:', source, '員工信息:', employee);this.setData({[field]: employee});console.log(this.data.poperson_sel)
},
(3)處理視圖層的點擊事件
定義點擊事件,如果有已經選擇的需要獲取其工號,并一并傳遞給選擇頁面
傳遞的參數:
sel_em_old:之前選擇的數據
field:規定需要定義的字段(該字段決定視圖層展示的內容)
source:規定傳遞的名稱(其實不用可以省略,主要是區別不同的字段)
pageinfo:這個用于定義不同的請求數據,例如A查詢的是員工1,員工2,員工3;但是B查詢的數據是員工4,員工5,員工6。那么就需要用這個,主要寫入后端
itemid:也是用于后端,主要是在有父級層面使用的
//選擇采購員
select_poperson() {const poperson_sel = this.data.poperson_sel;const employee_num = poperson_sel?.employee_num;wx.navigateTo({url: `/pages/commonpage/sel_employee_param_radio/sel_employee?sel_em_old=${encodeURIComponent(JSON.stringify([employee_num]))}&field=poperson_sel&source=popersond`});
},//選擇庫管員
select_warseperson() {const warehouse_sel = this.data.warehouse_sel;const employee_num = warehouse_sel?.employee_num;wx.navigateTo({url: `/pages/commonpage/sel_employee_param_radio/sel_employee?sel_em_old=${encodeURIComponent(JSON.stringify([employee_num]))}&field=warehouse_sel&source=stock&pageinfo=add_emgroup&itemid=1`});
},
三、選擇頁面
1、視圖層
(1)搜索欄
搜索欄使用input事件執行提交
<view class="top"><view class="search"><view class="search_in"><!-- 使用代碼請更改圖片路徑 --><image src="{{search}}"></image><input type="text" placeholder="請輸入工號" placeholder-style="color:#CCCCCC" bindinput="search" /></view></view>
</view>
(2)主要內容
如果行中checked為true,需要有一個選中效果:checked_parameter
<view class="center"><view class="pages_name"><view class="li"></view><view class="li2">員工信息</view></view>
</view>
<view class="all"><view class="item_all" data-id="{{item.id}}" wx:for="{{info}}" wx:key="index"><view class='position parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id="{{item.id}}" bindtap='select_single'><view class="content"><view class="vv_1">工號:<text>{{item.employee_num}}</text></view><view class="vv_1">姓名:<text>{{item.employee_name}}</text></view></view></view></view>
</view>
(3)翻頁功能
如果數據過多需要用到翻頁
<view class="pagination"><view class="page-button" bindtap="prevPage">上一頁</view><view class="page-info">{{ page }}</view><view class="page-info">/</view><view class="page-info">{{ totalPage }}</view><view class="page-button" bindtap="nextPage">下一頁</view>
</view>
(4)確認按鈕
<view class="button_sure" bindtap=