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, defineProps, 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>
|