405 lines
8.9 KiB
Vue
405 lines
8.9 KiB
Vue
<template>
|
||
<view class="mengban" v-show="show" @click="emit('close')">
|
||
<view class="white-view" @click.stop="cleanSelectList">
|
||
<scroll-view scroll-y="true" class="scroll-father">
|
||
<view class="title">
|
||
<view></view>
|
||
供应商
|
||
</view>
|
||
<view class="shopinput-view" @click.stop="openSelectList">
|
||
<view class="shopinput">
|
||
请输入供应商名称
|
||
</view>
|
||
<div class="triangle"></div>
|
||
<view class="shopinput-select" v-show="selectopenshow"
|
||
:style="selectopen?{height:`400rpx`}:{height:`0`}" @click.stop>
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<view v-for="(item,index) in unselectedShopList" :key="item.suppliersId" class="scroll-card"
|
||
@click="shopListOpen(item)">
|
||
{{ item.suppliersName }}
|
||
</view>
|
||
<view class="que" v-if="!unselectedShopList.length">
|
||
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="target-list">
|
||
<view class="target-card" v-for="(item,index) in targetshopitem" :key="index">
|
||
{{ item.suppliersName }}
|
||
<view class="target-card-clean" @click="deletearray(index)">
|
||
<image class="target-card-icon" src="/static/x.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title" style="margin-top: 35rpx;">
|
||
<view></view>
|
||
物料类别
|
||
</view>
|
||
<view class="special-view" v-for="(item0,index0) in specialarray" :key="index0">
|
||
<view class="special-title">
|
||
{{ item0.title }}
|
||
</view>
|
||
<view class="special-small" :class="targetspecialarray.includes(item1)?`special-small-target` :``"
|
||
v-for="(item1,index1) in item0.children" :key="index1" @click="clickspecial(item1)">
|
||
{{ item1.title }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="end-button">
|
||
<view class="end-quit" @click="emit('close')">
|
||
取消
|
||
</view>
|
||
<view class="end-right" @click="emit('sure',saveids)">
|
||
确认{{ howmanyitem }}件物料
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
|
||
import { getGysList, getMaterialTreeData, getCgdListNum } from '../api/api.js'
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
});
|
||
const emit = defineEmits(['close',`sure`]);
|
||
const shopList = ref([])
|
||
const selectopen = ref(false);
|
||
const selectopenshow = ref(false)
|
||
|
||
const openSelectList = () => {
|
||
|
||
if (selectopen.value) {
|
||
setTimeout(() => {
|
||
selectopenshow.value = false;
|
||
}, 300)
|
||
} else {
|
||
selectopenshow.value = true;
|
||
}
|
||
setTimeout(() => {
|
||
selectopen.value = !selectopen.value;
|
||
}, 10)
|
||
|
||
}
|
||
const cleanSelectList = () => {
|
||
selectopen.value = false;
|
||
setTimeout(() => {
|
||
selectopenshow.value = false;
|
||
}, 300)
|
||
}
|
||
|
||
const targetshopitem = ref([])
|
||
|
||
const shopListOpen = (item : any) => {
|
||
targetshopitem.value.push(item);
|
||
selectopen.value = false
|
||
setTimeout(() => {
|
||
selectopenshow.value = false;
|
||
}, 300)
|
||
getNumber()
|
||
}
|
||
const unselectedShopList = computed(() => {
|
||
const selectedIdSet = new Set(targetshopitem.value.map(item => item.suppliersId))
|
||
return shopList.value.filter(item => !selectedIdSet.has(item.suppliersId))
|
||
})
|
||
|
||
const deletearray = (index : number) => {
|
||
targetshopitem.value.splice(index, 1)
|
||
getNumber()
|
||
}
|
||
const specialarray = ref([]);
|
||
const targetspecialarray = ref<any[]>([])
|
||
|
||
const clickspecial = (item) => {
|
||
const index = targetspecialarray.value.findIndex(v => v.typeId === item.typeId)
|
||
if (index !== -1) {
|
||
targetspecialarray.value.splice(index, 1)
|
||
} else {
|
||
targetspecialarray.value.push(item)
|
||
}
|
||
getNumber()
|
||
}
|
||
const howmanyitem = ref(0);
|
||
const saveids = ref('')
|
||
|
||
const getNumber = () => {
|
||
let data = {
|
||
gysId: targetshopitem.value.map(item => item.suppliersId).join(','),
|
||
typeId: targetspecialarray.value.map(item => item.typeId).join(',')
|
||
}
|
||
// console.log("入参",data)
|
||
getCgdListNum(data).then((res) => {
|
||
howmanyitem.value = res.result.totalSize;
|
||
saveids.value = res.result.ids
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
getGysList().then((res : any) => {
|
||
if (res.success) {
|
||
// console.log("res", res.result)
|
||
shopList.value = res.result
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none', // 可选值：'success'、'loading'、'none'
|
||
duration: 2000 // 持续时间，单位ms
|
||
})
|
||
}
|
||
})
|
||
getMaterialTreeData().then((res : any) => {
|
||
if (res.success) {
|
||
// console.log("A-trian", res.result)
|
||
specialarray.value = [...res.result]
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none', // 可选值：'success'、'loading'、'none'
|
||
duration: 2000 // 持续时间，单位ms
|
||
})
|
||
}
|
||
})
|
||
getNumber()
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.mengban {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
background: RGBA(240, 240, 240, 0.64);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.white-view {
|
||
background-color: #fff;
|
||
width: 950rpx;
|
||
height: 1200rpx;
|
||
border-radius: 30rpx;
|
||
padding: 0 45rpx;
|
||
padding-top: 60rpx;
|
||
|
||
.title {
|
||
font-size: 1.7vw;
|
||
color: #222222;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
|
||
view {
|
||
width: 0.5vw;
|
||
height: 1.4vw;
|
||
background: radial-gradient(0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
|
||
border-radius: 0.2vw;
|
||
margin-right: 0.7vw;
|
||
}
|
||
}
|
||
|
||
.shopinput-view {
|
||
margin-left: 1%;
|
||
width: 98%;
|
||
margin-top: 25rpx;
|
||
height: 73rpx;
|
||
border: 1rpx solid #BABABA;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.shopinput {
|
||
margin-left: 35rpx;
|
||
color: #BABABA;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.triangle {
|
||
width: 30rpx;
|
||
height: 20rpx;
|
||
background: #777777;
|
||
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||
margin-right: 33rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.shopinput-select {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 73rpx;
|
||
background-color: #fff;
|
||
border: 1rpx solid #BABABA;
|
||
transition: height 0.3s ease;
|
||
border-radius: 30rpx;
|
||
|
||
.scroll-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.scroll-card {
|
||
padding: 0 30rpx;
|
||
height: 100rpx;
|
||
max-width: 98%;
|
||
line-height: 100rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.target-list {
|
||
display: flex;
|
||
width: 101%;
|
||
flex-wrap: wrap;
|
||
padding-left: 1%;
|
||
|
||
.target-card {
|
||
margin-top: 20rpx;
|
||
width: 48%;
|
||
margin-right: 2%;
|
||
background-color: #F7F8FC;
|
||
color: #BABABA;
|
||
height: 80rpx;
|
||
border-radius: 20rpx;
|
||
line-height: 80rpx;
|
||
// padding: 0 40rpx;
|
||
padding-left: 35rpx;
|
||
padding-right: 45rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
position: relative;
|
||
|
||
.target-card-clean {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 10rpx;
|
||
transform: translateY(-50%);
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
border-radius: 50%;
|
||
background-color: #E7EBF8;
|
||
// background-color: red;
|
||
right: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1;
|
||
|
||
.target-card-icon {
|
||
width: 70%;
|
||
height: 70%;
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.que {
|
||
width: 10vw;
|
||
height: 10vw;
|
||
margin: auto;
|
||
margin-top: 50rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
view {
|
||
margin-top: -40rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 300;
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
.scroll-father {
|
||
width: 100%;
|
||
height: 86%;
|
||
}
|
||
|
||
.special-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.special-title {
|
||
width: 100%;
|
||
font-size: 33rpx;
|
||
margin: 30rpx 0;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.special-small {
|
||
width: 30%;
|
||
margin-right: 3%;
|
||
height: 80rpx;
|
||
background-color: #F7F8FC;
|
||
color: #555555;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 15rpx;
|
||
font-size: 31rpx;
|
||
}
|
||
|
||
.special-small-target {
|
||
background-color: #EBF5FF;
|
||
color: #2790FD;
|
||
}
|
||
}
|
||
|
||
.end-button {
|
||
width: 100%;
|
||
height: 11%;
|
||
display: flex;
|
||
justify-content: end;
|
||
font-size: 32rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.end-quit {
|
||
background-color: #EDEDEF;
|
||
color: #888888;
|
||
width: 220rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.end-right {
|
||
margin-left: 30rpx;
|
||
width: 350rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1rpx solid #0385FA;
|
||
background: linear-gradient(to bottom, #E9F4FF, #CAE0F9);
|
||
color: #0385FA;
|
||
}
|
||
}
|
||
</style> |