474 lines
9.7 KiB
Vue
474 lines
9.7 KiB
Vue
<template>
|
||
<view>
|
||
<view class="mengban" @click="emit('fill')" v-if="show"></view>
|
||
<view class="ifclass guodu" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
|
||
<view class="titletop">物料分类</view>
|
||
<view class="toptype">
|
||
<view v-for="v in ['一','二','三']">{{v+'级分类'}}</view>
|
||
</view>
|
||
<view class="scroltype">
|
||
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
|
||
class="scroll-Y scrl1">
|
||
<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
|
||
<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
|
||
</image>
|
||
<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
|
||
<text>
|
||
{{v.title}}
|
||
</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
|
||
class="scroll-Y scrl2">
|
||
<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
|
||
@click="typescroll(2,i,v)">
|
||
{{v.title}}
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
|
||
class="scroll-Y scrl3">
|
||
<view :class="scroll.act3==i?'act':''"
|
||
v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
|
||
@click="typescroll(3,i,v)">
|
||
{{v.title}}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
<view class="btnbotm">
|
||
<view class="bt" @click="typescroll(1,-1,{})">重置</view>
|
||
<view class="bt qd" @click="config">确定 <text v-if="num>0">（{{num>99?'99+':num}}件物料）</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, watch } from 'vue';
|
||
import { getMaterialTreeData,getTreeDataWlnum} from '../api/api.js'
|
||
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
|
||
const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
|
||
const TreeData = ref([]);
|
||
const gysarr = ref([]);
|
||
const gysidnum = ref(-1);
|
||
|
||
const serverUrl = ref('');
|
||
const selt = ref(false);
|
||
const emit = defineEmits(['confirm','fill'])
|
||
const typescroll = (e : number, i : number, v : object) => {
|
||
if (e == 1) {
|
||
scroll.act2 = -1;
|
||
scroll.act3 = -1;
|
||
scroll.scrolltop2 = 0;
|
||
scroll.scrolltop3 = 0;
|
||
if (scroll.act1 == i) {
|
||
scroll.act1 = -1;
|
||
getTreelnum()
|
||
return
|
||
}
|
||
}
|
||
if (e == 2) {
|
||
scroll.act3 = -1;
|
||
scroll.scrolltop3 = 0;
|
||
}
|
||
if (e == 3) {
|
||
|
||
}
|
||
scroll['act' + e] = i;
|
||
scroll['scrolltop' + e] = (i - 2) * 50;
|
||
getTreelnum()
|
||
}
|
||
onMounted(() => {
|
||
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
|
||
})
|
||
const num = ref(0)
|
||
const getTreelnum = () => {
|
||
let obj = {
|
||
nuId: uni.getStorageSync('nuId'),
|
||
categoryId: scroll.act1 > -1 ? TreeData.value[scroll.act1].categoryId : '',
|
||
typeId: scroll.act2 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].typeId : '',
|
||
medicationId: scroll.act3 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].children[scroll.act3].key : '',
|
||
cgdId:props.cgdId
|
||
}
|
||
switch (props.typenum) {
|
||
case 0:
|
||
// 采购单
|
||
getTreeDataWlnum(obj).then(res => {
|
||
num.value = res.result.totalSize;
|
||
})
|
||
break;
|
||
case 1:
|
||
// 购物车
|
||
getGwcTreeDataWlnum(obj).then(res => {
|
||
num.value = res.result.totalSize;
|
||
})
|
||
break;
|
||
case 2:
|
||
console.log(obj)
|
||
getCgdTreeDataWlnum(obj).then(res => {
|
||
num.value = res.result.totalSize;
|
||
})
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
|
||
}
|
||
const getMaterial = () => {
|
||
switch (props.typenum) {
|
||
case 0:
|
||
// 采购单
|
||
getMaterialTreeData({ 'nuId': uni.getStorageSync('nuId') }).then(res => {
|
||
TreeData.value = res.result;
|
||
getTreelnum()
|
||
})
|
||
break;
|
||
case 1:
|
||
// 购物车
|
||
getGwcMaterialTreeData({ 'nuId': uni.getStorageSync('nuId') }).then(res => {
|
||
TreeData.value = res.result;
|
||
getTreelnum()
|
||
})
|
||
break;
|
||
case 2:
|
||
|
||
console.log({ 'nuId': uni.getStorageSync('nuId'),cgdId:props.cgdId })
|
||
getCgdMaterialTreeData({ 'nuId': uni.getStorageSync('nuId'),cgdId:props.cgdId }).then(res => {
|
||
console.log(res.result)
|
||
TreeData.value = res.result;
|
||
getTreelnum()
|
||
})
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
const config = () => {
|
||
let obj = {
|
||
categoryId: scroll.act1 > -1 ? TreeData.value[scroll.act1].categoryId : '',
|
||
typeId: scroll.act2 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].typeId : '',
|
||
medicationId: scroll.act3 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].children[scroll.act3].key : '',
|
||
cgdId:props.cgdId
|
||
}
|
||
emit('confirm', obj)
|
||
}
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false,
|
||
required: true,
|
||
},
|
||
typenum: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
cgdId: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
})
|
||
const showbox = ref(false)
|
||
watch(
|
||
() => props.show,
|
||
() => {
|
||
if (props.show == false) {
|
||
selt.value = false;
|
||
showbox.value = false
|
||
nextTick(()=>{
|
||
typescroll(1,-1,{})
|
||
})
|
||
}else{
|
||
getMaterial();
|
||
setTimeout(()=>{
|
||
showbox.value = true
|
||
},50)
|
||
}
|
||
})
|
||
const qingkong = () => {
|
||
if (gysidnum.value > -1) {
|
||
gysidnum.value = -1;
|
||
getTreelnum()
|
||
}
|
||
}
|
||
defineExpose({
|
||
typescroll,
|
||
config,
|
||
qingkong,
|
||
getTreelnum
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.gyss {
|
||
width: 100%;
|
||
height: 4vw;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
|
||
.hei0 {
|
||
height: 0 !important;
|
||
}
|
||
|
||
.xuze {
|
||
width: 23vw;
|
||
height: calc(85vh - 18vw);
|
||
background: #fff;
|
||
border-radius: 1.6vw;
|
||
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
|
||
position: absolute;
|
||
top: 4vw;
|
||
right: 0;
|
||
z-index: 133;
|
||
|
||
.gysscrol {
|
||
width: 100%;
|
||
height: calc(85vh - 24vw);
|
||
|
||
.acts {
|
||
color: #0385FA !important;
|
||
|
||
image {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 1.5vw;
|
||
color: #666666;
|
||
margin-bottom: 1.2vw;
|
||
padding: 0 1vw;
|
||
|
||
&:nth-child(1) {
|
||
margin-top: 0.9vw;
|
||
}
|
||
|
||
image {
|
||
width: 1vw !important;
|
||
height: 0.7vw !important;
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.lef {
|
||
width: 6.7vw;
|
||
letter-spacing: 2px;
|
||
font-weight: 400;
|
||
font-size: 1.5vw;
|
||
color: #333333;
|
||
}
|
||
|
||
.set {
|
||
width: 23vw;
|
||
height: 3.8vw;
|
||
padding: 0 1.7vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #F8F8FA;
|
||
border-radius: 1vw;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 1.6vw;
|
||
height: 1.6vw;
|
||
}
|
||
|
||
text {
|
||
font-weight: 300;
|
||
font-size: 1.4vw;
|
||
color: #999999;
|
||
display: block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
width: 21vw;
|
||
height: 1.5vw;
|
||
line-height: 1.5vw;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.n {
|
||
color: #000;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.unclass {
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
.ifclass {
|
||
width: 37vw;
|
||
height: 75vh;
|
||
position: fixed;
|
||
z-index: 120;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
|
||
border-radius: 1.6vw;
|
||
top: 15vh;
|
||
left: 130px;
|
||
padding: 2.5vw 1vw;
|
||
|
||
.btnbotm {
|
||
width: 100%;
|
||
height: 4vw;
|
||
margin-top: 3vw;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: end;
|
||
|
||
.bt {
|
||
min-width: 8vw;
|
||
height: 3.8vw;
|
||
background: #EDEDEF;
|
||
border-radius: 1.6vw;
|
||
padding: 0 2vw;
|
||
margin-left: 1vw;
|
||
border: 1px solid #EDEDEF;
|
||
font-size: 1.8vw;
|
||
font-weight: 400;
|
||
color: #888888;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.qd {
|
||
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
||
border: 1px solid rgba(3, 133, 250, 0.34);
|
||
color: #0385FA;
|
||
|
||
text {
|
||
font-size: 1.4vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroltype {
|
||
width: 100%;
|
||
height: calc(75vh - 18vw);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.scrl1 {
|
||
width: 10vw;
|
||
}
|
||
|
||
.scrl2,
|
||
.scrl3 {
|
||
width: 10vw;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
view {
|
||
width: 8vw;
|
||
margin-left: 1vw;
|
||
}
|
||
}
|
||
|
||
.scroll-Y {
|
||
width: 10vw;
|
||
height: calc(75vh - 22vw);
|
||
|
||
view {
|
||
min-width: 8.5vw;
|
||
max-width: 10vw;
|
||
height: 3.8vw;
|
||
background: #F5F5F8;
|
||
border-radius: 1.9vw;
|
||
font-weight: 400;
|
||
font-size: 1.3vw;
|
||
color: #212327;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 0.4vw;
|
||
margin-bottom: .8vw;
|
||
text-align: center;
|
||
|
||
text {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
>image {
|
||
width: 2vw;
|
||
height: 2vw;
|
||
}
|
||
}
|
||
|
||
.act {
|
||
background: #EAF5FF !important;
|
||
font-weight: 600;
|
||
color: #0385FA !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.toptype {
|
||
width: 100%;
|
||
height: 2vw;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 1.4vw 0 .4vw 0;
|
||
|
||
.act {
|
||
background: rgba(255, 255, 255, 1) !important;
|
||
font-weight: 600;
|
||
color: #0385FA !important;
|
||
}
|
||
|
||
>view {
|
||
width: 7vw;
|
||
height: 1.9vw;
|
||
border-radius: 1vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, .5);
|
||
border: 1px solid rgba(255, 255, 255, .5);
|
||
font-weight: 400;
|
||
font-size: 1.2vw;
|
||
color: #333333;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.titletop {
|
||
width: 100%;
|
||
height: 2.5vw;
|
||
font-weight: 400;
|
||
font-size: 1.5vw;
|
||
color: #333333;
|
||
line-height: 2.5vw;
|
||
padding-left: 1vw;
|
||
}
|
||
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.mengban{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 20;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
</style> |