hldy_app_mini/pages/material/material.vue

285 lines
6.1 KiB
Vue

<template>
<view class="guodu" :style="!transition?'opacity: 0':'opacity: 1'" style="transition: opacity 1s ease;padding: 1.1vw;">
<view class="serchs guodu" :style="'width:90vw'">
<view class="ipt">
<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" @confirm="search" />
<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="form.wlParamInfo"
@click="search(0)"></image>
</view>
<view @click="search" class="scr guodu">
<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
<image src="/static/index/procurement/shr.png" mode="aspectFill" class="shr"></image>
检索
</view>
<!-- <view class="shx guodu" @click="ification=true">
<image src="/static/index/purchaseorder/select.png" mode="aspectFill" class="sh"></image>
<image src="/static/index/purchaseorder/selecttarget.png" mode="aspectFill" class="shr"></image>
筛选
</view> -->
<view class="shx guodu" @click="chongzhi"
v-if="form.categoryId!=''||form.wlParamInfo!=''||form.suppliers!=''">
<image src="/static/index/procurement/cz.png" mode="aspectFill"></image>
重置
</view>
<view class="back guodu" >
<!-- <image src="/static/index/procurement/bk.png" mode="aspectFill"></image> -->
出入库
</view>
</view>
<view class="listcard">
<view class="contain-right-nomessage center" v-if="InvoicingList.length == 0">
<view class="que">
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
<view>暂无物料</view>
</view>
</view>
<carditem :InvoicingList="InvoicingList" @addcartory="addcartory" @scrolltolower="scrolltolower" lower-threshold="300"
:status="status" @crk="crk"></carditem>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
import carditem from './component/carditem.vue'
const transition = ref(false)
const props = defineProps({
isShow: {
type: Boolean
},
});
watch(
() => props.isShow,
(newVal, oldVal) => {
if (!oldVal && newVal) {
transition.value = false;
setTimeout(() => {
transition.value = true;
}, 50)
} else {
transition.value = false;
}
console.log(transition.value)
}
)
const form = reactive({
nuId: uni.getStorageSync('nuId'),
pageNo: 1,
pageSize: 30,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: '',
isWaring: 0,
suppliers: ''
})
const ification = ref(false)
const InvoicingList = ref([{},{},{},{},{},{},]);
const search = (x : number) => {
if (x === 0) { form.wlParamInfo = '' }
form.pageNo = 1;
InvoicingList.value = [];
// queryInvo();
}
const chongzhi = () => {
form.categoryId = '';
form.typeId = '';
form.medicationId = '';
form.suppliers = '';
form.pageNo = 1;
form.wlParamInfo = '',
InvoicingList.value = [];
// classication.value.typescroll(1, -1, {});
// classication.value.qingkong();
// classication.value.config();
}
</script>
<style lang="less" scoped>
.listcard {
width: 90vw;
height: calc(100vh - 4vw);
margin-top: 0.9vw;
// background-color: #fff;
position: relative;
.center {
display: flex;
justify-content: center;
align-items: center;
}
.contain-right-nomessage {
position: fixed;
top: 0;
right: 0;
width: 91.2%;
height: 100vh;
border-radius: 30rpx;
z-index: 100;
.que {
width: 20vw;
height: 20vw;
margin-right: 12vw;
// margin: auto;
image {
width: 100%;
height: 100%;
}
view {
margin-top: -30rpx;
width: 100%;
text-align: center;
font-weight: 300;
font-size: 1.2vw;
color: #555555;
}
}
}
.crdcroll {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.serchs {
width: 100%;
height: 3.3vw;
border-radius: 1.6vw;
display: flex;
align-items: center;
position: relative;
.ipt {
display: flex;
align-items: center;
width: 28vw;
border-radius: 1.65vw;
height: 3.3vw;
background: #FFFFFF;
border: 1px solid #D2D2D2;
image {
width: 2.2vw;
height: 2.2vw;
// margin: 0 0.5vw;
margin-right: 1.5vw;
}
input {
width: 25vw;
height: 3.3vw;
font-size: 1.4vw;
padding-left: 1.6vw;
}
}
.back {
width: 9vw;
height: 3.3vw;
border-radius: 1.6vw;
background: rgba(255, 255, 255, 1);
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
color: rgba(85, 85, 85, 1);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0.5vw;
top: 0.2vw;
border: 1px solid #D9DADC;
image {
width: 1.5vw;
height: 1.3vw;
margin: 0 0.5vw 0 0;
}
}
.back:active,
.shx:active,
.scr:active {
color: #1083F8;
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1px solid #1083F8;
}
.scr {
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
width: 8.5vw;
height: 3.3vw;
margin: 0 0 0 0.7vw;
background: rgba(255, 255, 255, 1);
border: 1px solid #D9DADC;
color: #555555;
image {
width: 1.6vw;
height: 1.6vw;
margin: 0 0.5vw 0 0;
}
}
.shr {
display: none;
}
.scr:active .sh {
display: none;
}
.shx:active .shr {
display: inline-block;
}
.shx:active .sh {
display: none;
}
.scr:active .shr {
display: inline-block;
}
.shx {
width: 8.5vw;
height: 3.3vw;
background: #FFFFFF;
border-radius: 1.65vw;
border: 1px solid #D9DADC;
font-weight: 400;
font-size: 1.4vw;
color: #222;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 0.7vw;
color: #555555;
image {
width: 1.6vw;
height: 1.6vw;
margin: 0 0.5vw 0 0;
}
}
}
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
</style>