<!-- 仅供取货页面使用 -->
|
<template>
|
<view>
|
<u-popup v-model="showPop" mode="bottom">
|
<view class="cascader-head">
|
<text class="cancel" @click="cancelSelect">取消</text>
|
<text class="title">请选择</text>
|
<text class="confirem" @click="confiremSelect">确定</text>
|
</view>
|
<view class="cascader">
|
<scroll-view class="item" style="width: 300rpx;" scroll-y="true">
|
<view class="item-block" v-for="(item, index) in selectData" :key="index" v-if="selectData.length > 0"
|
:style="{ 'background': current == index ? 'white' : '#f8f8f8', 'color': current == index ? '#f44c01' : '#333333' }"
|
@click="selectOne(index,item)">
|
<view style="flex: 1;">
|
<text>{{ item.name }}</text>
|
</view>
|
</view>
|
</scroll-view>
|
<scroll-view class="item" style="background-color: white;" scroll-y="true">
|
<block v-if="selectData.length > 0 && selectData[current].children.length > 0">
|
<view class="item-cont" v-for="(item, index) in selectData[current].children" :key="index">
|
<view class="item-cate" @click="selectTwo(item, index)">
|
<text class="title" :style="{ 'color': item.active ? '#f44c01' : '#333333' }">{{
|
item.name || '空机床号'}}</text>
|
<u-icon v-if="item.active" name="checkmark" color="#f44c01" size="28"></u-icon>
|
</view>
|
<view class="item-cellbox" v-if="item.children && item.children.length > 0">
|
<text class="item-cell" v-for="(it, ix) in item.children" :key="ix"
|
@click="selectTree(index, it, ix)"
|
v-bind:style="{ color: it.active ? '#ffffff' : '#666666', background: it.active ? 'red' : '#f8f8f8' }">{{
|
it.name }} </text>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import { selectOneQuery, selectTwoQuery,selectTwoQueryDelivery, selectThereQuery } from '../api/sort.js'
|
export default {
|
name: 'cascader',
|
props: {
|
activeIndex: {
|
type: Number,
|
default: 0
|
},
|
cascaderShow: {
|
type: Boolean,
|
default: false,
|
},
|
//开启一级选择
|
oneSelect: {
|
type: Boolean,
|
default: true,
|
},
|
//开启二级选择
|
twoSelect: {
|
type: Boolean,
|
default: true,
|
},
|
//label展示字段
|
labelName: {
|
type: String,
|
default: 'name'
|
},
|
//value选中字段
|
valueName: {
|
type: String,
|
default: 'id'
|
},
|
//初始选中值
|
selectValue: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
//选择数据
|
cascaderData: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
titleData: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
data() {
|
return {
|
current: this.activeIndex,
|
showPop: this.cascaderShow,
|
selectDataCopy: JSON.parse(JSON.stringify(this.cascaderData)),
|
selectData: JSON.parse(JSON.stringify(this.cascaderData)),
|
paramD : {}
|
}
|
},
|
watch: {
|
cascaderData(val, oldVal) {
|
this.selectData = JSON.parse(JSON.stringify(val));
|
}
|
},
|
mounted() {
|
// this.defaultSelect()
|
},
|
methods: {
|
// 初始化选中
|
defaultSelect() {
|
let selectData = this.selectData;
|
console.log(this.selectValue)
|
for (let i = 0; i < this.selectValue.length; i++) {
|
for (let y = 0; y < selectData.length; y++) {
|
if (selectData[y][this.valueName] == this.selectValue[i]) {
|
selectData[y].active = true;
|
break;
|
} else {
|
for (let x = 0; x < selectData[y].children.length; x++) {
|
if (selectData[y].children[x][this.valueName] == this.selectValue[i]) {
|
selectData[y].children[x].active = true;
|
selectData[y].child_active = true;
|
break;
|
} else {
|
for (let z = 0; z < selectData[y].children[x].children.length; z++) {
|
if (selectData[y].children[x].children[x][this.valueName] == this.selectValue[i]) {
|
selectData[y].children[x].children[x].active = true;
|
selectData[y].child_active = true;
|
selectData[y].children[x].child_active = true;
|
break;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
return;
|
},
|
show(pram) {
|
this.showPop = true;
|
this.paramD = pram
|
|
// this.defaultSelect()
|
// if (this.selectData.length > 0) {
|
// return
|
// }
|
|
this.selectData = [
|
{
|
id: '机床号',
|
name: '机床号',
|
children: []
|
}
|
]
|
this.getTwoData(0,this.selectData[0],pram)
|
this.current = 0
|
|
|
// 获取1级数据 0712
|
// selectOneQuery(pram).then((res) => {
|
// if (res.code == 200) {
|
// // 测试
|
// // if(res.data.length==0){
|
// // res.data = ['gx12','gx23']
|
// // }
|
// let arr = []
|
// if(res.data.length>0){
|
// res.data.map((item,index)=>{
|
// if(item =='' || item == null){
|
// return
|
// }
|
// arr.push({
|
// id: item,
|
// name: item,
|
// children: []
|
// })
|
// })
|
// console.log( 222222222222222222222)
|
// console.log( arr)
|
// this.selectData = arr
|
// this.getTwoData(0,this.selectData[0],pram)
|
// this.current = 0
|
// }
|
// }
|
// }).catch((err)=>{
|
// this.showPop = false
|
// })
|
},
|
|
// 获取二级数据
|
getTwoData(index,item) {
|
if (this.selectData[index].children.length <= 0) {
|
let fnName = selectTwoQuery // 分拣-查工序机床号
|
if(this.titleData.typeInterface && this.titleData.typeInterface=='KingtingDo'){
|
fnName = selectTwoQueryDelivery // kitting发货-查工序机床号
|
}
|
fnName({
|
// 'process': item.id,
|
'locationType':this.titleData.locationType, // 1:A3区域，2:A1-A2区域
|
'type':this.titleData.type,
|
...this.paramD
|
}).then((res) => {
|
if (res.code == 200) {
|
// 测试
|
// if(res.data.length==0){
|
// res.data = ['jq12','jq23','jq23','jq23','jq23','jq23','jq23','jq23last']
|
// }
|
let arr = []
|
if(res.data.length>0){
|
res.data.map((item,index)=>{
|
arr.push({
|
id: item,
|
name: item,
|
children: []
|
})
|
})
|
this.selectData[index].children = arr
|
}
|
|
}
|
}).catch(()=>{
|
this.showPop = false
|
})
|
}
|
},
|
// 获取3级数据
|
getThereData(index,item) {
|
console.log("selectTwo")
|
if (this.selectData[this.current].children[index].children.length <= 0) {
|
selectThereQuery({
|
'process': this.selectData[this.current].id,
|
"equipmentList": [item.id],
|
'locationType':this.titleData.locationType, // 1:A3区域，2:A1-A2区域
|
'type':this.titleData.type
|
}).then((res) => {
|
if (res.code == 200) {
|
// 测试
|
// if(res.data.length==0){
|
// res.data = ['kwh12','kwh23','kwh23','kwh23','kwh23','kwh23','kwh23','kwh23','kwh23']
|
// }
|
let arr = []
|
if(res.data.length>0){
|
res.data.map((item,index)=>{
|
arr.push({
|
id: item,
|
name: item
|
})
|
})
|
this.selectData[this.current].children[index].children = arr
|
}
|
}
|
}).catch(()=>{
|
this.showPop = false
|
})
|
}
|
},
|
hide() {
|
this.showPop = false;
|
},
|
checkboxChange(e, index) {
|
let oneData = this.selectData[index];
|
oneData.active = e.value;
|
this.$set(this.selectData, index, oneData);
|
},
|
selectOne(index,item) {
|
console.log("selectOne")
|
this.current = index;
|
|
// 清空所有选中的库位
|
this.selectData.map((it)=>{
|
if(it.children&&it.children.length>0){
|
it.children.map((itInner)=>{
|
itInner.active = false
|
if(itInner.children&&itInner.children.length>0){
|
itInner.children.map((itInner2)=>{
|
itInner2.active = false
|
})
|
}
|
})
|
}
|
})
|
// end清空所有选中的库位
|
this.getTwoData(index,item) // 获取二级数据
|
},
|
|
selectTwo(item, index) {
|
|
// this.getThereData(index,item)
|
if (!this.twoSelect) return;
|
let twoData = this.selectData[this.current];
|
if (twoData.children[index].active) {
|
twoData.children[index] = {
|
...item,
|
active: false
|
};
|
//判断兄弟中是否已无选中
|
let status = false;
|
twoData.children.map((cell) => {
|
if (cell.active) {
|
status = true;
|
}
|
if (cell.children && cell.children.length > 0) {
|
cell.children.map((it) => {
|
if (it.active) {
|
status = true;
|
}
|
})
|
}
|
|
})
|
if (!status) {
|
twoData.child_active = false;
|
}
|
} else {
|
twoData.children[index] = {
|
...item,
|
active: true
|
};
|
twoData.child_active = true;
|
}
|
this.$set(this.selectData, this.current, twoData);
|
},
|
selectTree(Pindex, item, index) {
|
console.log(this.selectData)
|
let twoData = this.selectData[this.current];
|
let treeData = twoData.children[Pindex];
|
if (treeData.children[index].active) {
|
treeData.children[index] = {
|
...item,
|
active: false
|
};
|
//判断兄弟中是否已无选中
|
let status = false;
|
treeData.children.map((cell) => {
|
if (cell.active) {
|
status = true;
|
}
|
})
|
if (!status) {
|
treeData.child_active = false;
|
}
|
//查找父级下面是否有选中项
|
let pstatus = false;
|
twoData.children.map((cell) => {
|
if (cell.active) {
|
pstatus = true;
|
}
|
cell.children.map((it) => {
|
if (it.active) {
|
pstatus = true;
|
}
|
})
|
})
|
if (!pstatus) {
|
twoData.child_active = false;
|
}
|
} else {
|
// 单选
|
treeData.children.forEach((item)=>{
|
item.active = false
|
})
|
// end单选
|
treeData.children[index] = {
|
...item,
|
active: true
|
};
|
//标识父级下面选中
|
treeData.child_active = true;
|
twoData.child_active = true;
|
}
|
this.$set(this.selectData, this.current, twoData);
|
},
|
cancelSelect() {
|
this.selectData = JSON.parse(JSON.stringify(this.selectDataCopy))
|
this.showPop = false;
|
},
|
// 确认
|
confiremSelect() {
|
let data = this.selectData;
|
let select_ids = [];
|
let select_names = [];
|
let equipmentList = [];
|
data.map((item, index) => {
|
if (item.active) {
|
select_ids.push(item[this.valueName]);
|
select_names.push(item[this.labelName]);
|
}
|
if (item.children && item.children.length > 0) {
|
item.children.map((it, ix) => {
|
if(it.child_active){
|
equipmentList.push(it.id)
|
}
|
if (it.active) {
|
select_ids.push(it[this.valueName]);
|
select_names.push(it[this.labelName]);
|
}
|
if (it.children && it.children.length > 0) {
|
it.children.map((itc, ixc) => {
|
if (itc.active) {
|
select_ids.push(itc[this.valueName]);
|
select_names.push(itc[this.labelName]);
|
}
|
})
|
}
|
})
|
}
|
})
|
|
let select_ids2=Array.from(new Set(select_ids));//去重
|
let select_names2=Array.from(new Set(select_names));//去重
|
// 单选
|
console.log(select_ids2.length)
|
// if(select_ids2.length<=0){
|
// uni.showToast({
|
// title: '请选择机床号',
|
// icon: 'none',
|
// duration: 2000
|
// });
|
// return
|
// }
|
// if(select_ids2.length!=1){
|
// uni.showToast({
|
// title: '不同机器，只能选一个相同的库位编号',
|
// icon: 'none',
|
// duration: 2000
|
// });
|
// return
|
// }
|
this.$emit('confirem', {
|
// select_ids: select_ids2,
|
// select_names: select_names2,
|
process:this.selectData[this.current].id,
|
// equipmentList:equipmentList
|
equipmentList:select_ids2
|
|
});
|
this.showPop = false;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.cascader-head {
|
height: 100rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30rpx;
|
border-bottom: 1rpx solid #e6e6e6;
|
|
.cancel {
|
font-size: 30rpx;
|
color: #666666;
|
}
|
|
.title {
|
font-size: 30rpx;
|
color: #333333;
|
}
|
|
.confirem {
|
font-size: 30rpx;
|
color: #666666;
|
}
|
}
|
|
.cascader {
|
display: flex;
|
flex-direction: row;
|
height: 400px;
|
background-color: #F8F8F8;
|
.item {
|
height: 400px;
|
|
.item-block {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
height: 50px;
|
padding: 10px;
|
font-size: 14px;
|
color: #333333;
|
}
|
|
.item-list {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
height: 50px;
|
border-bottom: 1rpx solid #e6e6e6;
|
padding: 0 10px;
|
}
|
|
.item-cont {
|
display: flex;
|
flex-direction: column;
|
padding: 10px;
|
|
.item-cate {
|
border-bottom: 1rpx solid #e6e6e6;
|
padding: 10px 0;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
.title {
|
font-size: 15px;
|
color: #333333;
|
}
|
}
|
|
.item-cellbox {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
flex-wrap: wrap;
|
|
.item-cell {
|
width: 80px;
|
height: 30px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
background-color: #F8F8F8;
|
margin-right: 8px;
|
font-size: 14px;
|
color: #666666;
|
margin-top: 10px;
|
border-radius: 5px;
|
}
|
|
}
|
|
.active {
|
color: '#ffffff';
|
background: '#fa3534';
|
}
|
}
|
}
|
}
|
</style>
|
