网站栏目列表做网站和推广需要多少钱
一、效果展示
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=