250 lines
6.0 KiB
Vue
250 lines
6.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class="ifclass" v-if="show">
|
||
<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 } from 'vue';
|
||
import { getMaterialTreeData , getTreeDataWlnum} from '../api/lunpan.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 serverUrl = ref('');
|
||
const emit = defineEmits(['confirm'])
|
||
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/';
|
||
getMaterial();
|
||
})
|
||
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].medicationId:'',
|
||
}
|
||
getTreeDataWlnum(obj).then(res=>{
|
||
num.value = res.result.totalSize;
|
||
})
|
||
}
|
||
const getMaterial = () => {
|
||
getMaterialTreeData({'nuId':uni.getStorageSync('nuId')}).then(res => {
|
||
TreeData.value = res.result;
|
||
getTreelnum()
|
||
})
|
||
}
|
||
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].medicationId:'',
|
||
}
|
||
emit('confirm',obj)
|
||
}
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default:false,
|
||
required: true,
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.ifclass{
|
||
width: 36vw;
|
||
height: 85vh;
|
||
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: 10vh;
|
||
left: 32vw;
|
||
padding: 2.5vw 3vw;
|
||
.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(85vh - 18vw);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.scrl1{
|
||
width: 9vw;
|
||
view {
|
||
width: 8.8vw;
|
||
}
|
||
|
||
}
|
||
.scrl2,.scrl3{
|
||
width: 8vw;
|
||
view {
|
||
width: 7.7vw;
|
||
}
|
||
}
|
||
.scroll-Y {
|
||
width: 8.5vw;
|
||
height: calc(85vh - 18vw);
|
||
|
||
view {
|
||
width: 100%;
|
||
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: bold;
|
||
font-size: 1.8vw;
|
||
color: #333333;
|
||
line-height: 2.5vw;
|
||
}
|
||
</style>
|