You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
8.8 KiB
327 lines
8.8 KiB
<template>
|
|
<view>
|
|
<view class="head" v-if="tab_list.length">
|
|
<uni-search-bar @confirm="search" @cancel="cancelSearch" placeholder="搜索物资" radius="90" bgColor="#f6f6f6" ></uni-search-bar>
|
|
</view>
|
|
<view class="lf-flex content" v-if="tab_list.length">
|
|
<scroll-view :scroll-y="true" class="scroll-left"
|
|
v-if="!is_search_ing"
|
|
:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}">
|
|
<view class="tab-item" :class="{'activa': index == current}" v-for="(item, index) in tab_list" :key="index" @click="switchTab(index)">{{ item.m_cate_name }}</view>
|
|
</scroll-view>
|
|
<scroll-view :scroll-y="true" class="scroll-right"
|
|
:style="{height: 'calc('+ windowHeight +'px - 222rpx)', width:is_search_ing?'100%':'550rpx'}">
|
|
<view class="supplier-item" v-for="(item, index) in tab_list[current].list" :key="index">
|
|
<label class="lf-row-between" @click="switchChecked(item)">
|
|
<view style="height: 40rpx;">{{ item.material_name }}</view>
|
|
<u-icon name="checkmark-circle-fill" size="40" color="#11D189" v-if="item.checked"></u-icon>
|
|
</label>
|
|
</view>
|
|
<view class="loading-more">
|
|
<lf-nocontent v-if="!tab_list[current].list.length"></lf-nocontent>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<view class="fixed-bottom">
|
|
<button class="btn btn1" @click="prev">上一步</button>
|
|
<button class="btn btn2" @click="submit">确定</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
windowHeight: 0,
|
|
tab_list: [],
|
|
current: 0, // tab下标
|
|
material_name: '', // 当前搜索值，搜索的是物资
|
|
checked_list: {},
|
|
is_search_ing: false, // 是否处于搜索中
|
|
request_count: 0, // 请求次数
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.windowHeight = uni.getSystemInfoSync().windowHeight;
|
|
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 3]; // 上上一页
|
|
if(!prevPage){
|
|
let path_url = '/pages/canteen/index/index';
|
|
this.$msg('页面异常, 即将跳转').then(result => {
|
|
this.$url(path_url, {type: 'launch'});
|
|
})
|
|
return;
|
|
}
|
|
this.checked_list = prevPage.$data.material_list;
|
|
|
|
/*
|
|
this.checked_list = {
|
|
"1": {
|
|
address: "广西南宁市青秀区青秀万达店",
|
|
admin_uid: 1,
|
|
area_id: 2165,
|
|
checked: true,
|
|
city_id: 2163,
|
|
corporate_account: "6214456799861234",
|
|
corporate_account_name: "刘淑怡粮油店",
|
|
corporate_bank: "招商银行",
|
|
corporate_bank_sub: "青秀区支行",
|
|
corporate_name: "法人",
|
|
corporate_phone: "15699896658",
|
|
created_at: "2021-07-17 11:34:50",
|
|
created_uid: 1,
|
|
ctl_man: "刘淑怡",
|
|
ctl_phone: "13397706896",
|
|
deleted_at: null,
|
|
deleted_uid: 0,
|
|
id: 1,
|
|
license_number: "11559896646",
|
|
license_pic: "admin_images/5bbbc1e4f96bc5566c43bb006d36cc37.jpg",
|
|
logo: "admin_images/83e16f0d0c9dd01f1bfd62ddf150607e.jpeg",
|
|
material_list: {},
|
|
private_account: "",
|
|
private_account_name: "",
|
|
private_bank: "",
|
|
private_bank_sub: "",
|
|
province_id: 2162,
|
|
qualification_pic: "",
|
|
remark: "测试备注，我只改个备注",
|
|
s_cate_id: 1,
|
|
state: "启用",
|
|
subject_name: "主体名称",
|
|
subject_type: "公司",
|
|
supplier_name: "供应商001",
|
|
updated_at: "2021-07-17 16:25:58",
|
|
updated_uid: 1
|
|
},
|
|
"2": {
|
|
address: "F座6楼",
|
|
admin_uid: 3,
|
|
area_id: 2165,
|
|
checked: true,
|
|
city_id: 2163,
|
|
corporate_account: "",
|
|
corporate_account_name: "",
|
|
corporate_bank: "",
|
|
corporate_bank_sub: "",
|
|
corporate_name: "",
|
|
corporate_phone: "",
|
|
created_at: "2021-07-17 20:28:17",
|
|
created_uid: 1,
|
|
ctl_man: "芳芳",
|
|
ctl_phone: "13397706896",
|
|
deleted_at: null,
|
|
deleted_uid: 0,
|
|
id: 2,
|
|
license_number: "",
|
|
license_pic: "",
|
|
logo: "admin_images/skyshareimg.jpeg",
|
|
material_list: {},
|
|
private_account: "",
|
|
private_account_name: "",
|
|
private_bank: "",
|
|
private_bank_sub: "",
|
|
province_id: 2162,
|
|
qualification_pic: "",
|
|
remark: "",
|
|
s_cate_id: 2,
|
|
state: "启用",
|
|
subject_name: "",
|
|
subject_type: "公司",
|
|
supplier_name: "供应商002",
|
|
updated_at: "2021-07-27 12:00:01",
|
|
updated_uid: 1
|
|
}
|
|
};
|
|
*/
|
|
|
|
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
// 搜索
|
|
search(event){
|
|
this.is_search_ing = true;
|
|
this.material_name = event.value;
|
|
this.current = this.tab_list.length; // 搜索的数据放到最后一项
|
|
this.tab_list.push({m_cate_name: '搜索', list: []});
|
|
this.getData({keyword: event.value});
|
|
},
|
|
// 取消搜索
|
|
cancelSearch(){
|
|
this.is_search_ing = false;
|
|
this.material_name = '';
|
|
this.current = 0;
|
|
this.tab_list.pop();
|
|
},
|
|
// 获取数据
|
|
getData(options){
|
|
let supplier_ids = Object.keys(this.checked_list);
|
|
this.request_count++;
|
|
this.$http(this.API.API_CANTEEN_MATERIALLIST, {
|
|
supplier_ids: supplier_ids, // 供应商id
|
|
...options
|
|
}).then(res => {
|
|
if(this.request_count <= 1){
|
|
let category = res.data.category || [];
|
|
let tab_list = category.map(item => {
|
|
item.list = [];
|
|
return item;
|
|
})
|
|
let list = res.data.material.map(item => {
|
|
if(this.checked_list[item.supplier_id]){
|
|
item.checked = false;
|
|
if(this.checked_list[item.supplier_id].material_list[item.material_id]){
|
|
item.checked = true;
|
|
}
|
|
}else{
|
|
item.checked = false;
|
|
}
|
|
return item;
|
|
})
|
|
tab_list[this.current].list = list;
|
|
this.tab_list = tab_list;
|
|
}else{
|
|
let list = res.data.material.map(item => {
|
|
if(this.checked_list[item.supplier_id]){
|
|
item.checked = false;
|
|
if(this.checked_list[item.supplier_id].material_list[item.material_id]){
|
|
item.checked = true;
|
|
}
|
|
}else{
|
|
item.checked = false;
|
|
}
|
|
return item;
|
|
})
|
|
this.tab_list[this.current].list = list;
|
|
}
|
|
})
|
|
},
|
|
// 切换tab
|
|
switchTab(current){
|
|
this.current = current;
|
|
let item = this.tab_list[this.current];
|
|
if(item && item.list.length <= 0){ // 已经有数据了，就不在请求了
|
|
this.getData({cate_id: item.id});
|
|
}
|
|
},
|
|
// 切换每个供应商的多选状态
|
|
switchChecked(item){
|
|
// 备用改变item.checked方案
|
|
// let tabItem = this.tab_list[this.current];
|
|
// let item = tabItem.list[index];
|
|
// item.checked = !item.checked;
|
|
// this.tab_list[this.current] = tabItem;
|
|
// 新方案
|
|
item.checked = !item.checked;
|
|
if(this.is_search_ing){
|
|
this.tab_list.forEach(t_item => {
|
|
t_item.list.forEach(l_item => {
|
|
if(l_item.material_id == item.material_id){
|
|
l_item.checked = item.checked;
|
|
}
|
|
})
|
|
})
|
|
}
|
|
if(item.checked){
|
|
this.checked_list[item.supplier_id].material_list[item.material_id] = item;
|
|
}else{
|
|
delete this.checked_list[item.supplier_id].material_list[item.material_id];
|
|
}
|
|
uni.$emit('addMaterialList', this.checked_list);
|
|
console.log("checked_list", this.checked_list)
|
|
},
|
|
// 全部选择完毕
|
|
submit(){
|
|
console.log("sssss",this.tab_list);
|
|
console.log("kkkk", this.checked_list);
|
|
|
|
// todo关闭所有页面跳转
|
|
// this.$url('/pages/canteen/purchase/launch', {type: 'launch'})
|
|
// this.$toBack(2); // 跳回前两个页面
|
|
},
|
|
// 上一步
|
|
prev(){
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2]; // 上一页
|
|
this.checked_list = prevPage.$data.checked_list;
|
|
uni.$emit('addMaterialList', this.checked_list);
|
|
this.$toBack();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
/deep/.uni-searchbar__box{
|
|
border: none;
|
|
}
|
|
.head{
|
|
padding: 14rpx 16rpx;
|
|
}
|
|
.scroll-left{
|
|
width: 200rpx;
|
|
background-color: #F6F6F6;
|
|
.tab-item{
|
|
height: 90rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
}
|
|
.activa{
|
|
color: #11D189;
|
|
}
|
|
}
|
|
.scroll-right{
|
|
width: 550rpx;
|
|
background-color: #FFFFFF;
|
|
.supplier-item{
|
|
padding: 30rpx 32rpx 30rpx 30rpx;
|
|
width: 100%;
|
|
height: max-content;
|
|
box-sizing: border-box;
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.fixed-bottom{
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
z-index: 99;
|
|
width: 750rpx;
|
|
height: 98rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
background-color: #FFFFFF;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
.btn{
|
|
width: 320rpx;
|
|
height: 82rpx;
|
|
border-radius: 41rpx;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.btn1{
|
|
border: 2rpx solid #555555;
|
|
opacity: .5;
|
|
}
|
|
.btn2{
|
|
background: #11D189;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style>
|