cashier_app/pageConsumables/viewrecords.vue

312 lines
7.7 KiB
Vue

<template>
<!-- <view class="viewrecordsType">
<view style="display: flex;align-items: center;" @tap="popPu">
筛选时间<up-icon style="transform: rotate(90deg);" name="play-right-fill" size="12"></up-icon>
</view>
<view @tap="showStatus = !showStatus" style="display: flex;align-items: center;">
{{datas.statusTitle}} <up-icon style="transform: rotate(90deg);" name="play-right-fill" size="12"></up-icon>
</view>
</view> -->
<view style="position: fixed;right: 50rpx;top: 80vh;background-color: #fff;border-radius: 50%;width: 65rpx;height: 65rpx;display: flex;align-items: center;justify-content: center;">
<image src="./time.png" style="width: 50rpx;height: 50rpx;" @tap="popPu"
mode=""></image>
</view>
<view :style="{height:showStatus?statusHeight:0}" class="tranistion status overflow-hide">
<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
v-for="(item,index) in datas.status" :key="index">
<view :class="{'color-main':nowStatusIndex===index}">{{item.conTypeName}}</view>
<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
</view>
<view :style="{height: '14px'}"></view>
</view>
<view class="viewrecordsTop">
<view style="padding:32rpx 16rpx;">
<view @tap="getNewdata('addCountNumber')">
增加数量 <text
style="color: #76ACF0;font-weight: bold;">{{datas.countList.addCountNumber?datas.countList.addCountNumber:'0'}}</text>
</view>
<view class="df viewdf">
<view @tap="getNewdata('stockInNumber')"
style="font-size: 24rpx;border-right: 1px solid #999; width: 142rpx;text-align: center;">
<view style="color: #999999;">
入库
</view>
<view class="">
{{datas.countList.stockInNumber?datas.countList.stockInNumber:0}}
</view>
</view>
<view @tap="getNewdata('addNumber')" style="font-size: 24rpx;width: 178rpx;text-align: center;">
<view style="color: #999999;">
手动增加
</view>
<view class="">
{{datas.countList.addNumber?datas.countList.addNumber:'0'}}
</view>
</view>
</view>
</view>
<view style="padding:32rpx 16rpx;">
<view class="" @tap="getNewdata('subCountNumber')">
减少数量 <text
style="color: #52BDA4;font-weight: bold;">{{datas.countList.subCountNumber?datas.countList.subCountNumber:0}}</text>
</view>
<view class="df viewdf">
<view @tap="getNewdata('subNumber')"
style="font-size: 24rpx;border-right: 1px solid #999; width: 112rpx;text-align: center;">
<view style="color: #999999;">
手动减少
</view>
<view class="">
{{datas.countList.subNumber?datas.countList.subNumber:0}}
</view>
</view>
<view @tap="getNewdata('stockOutNumber')"
style="font-size: 24rpx;border-right: 1px solid #999; width: 82rpx;text-align: center;">
<view style="color: #999999;">
出库
</view>
<view class="">
{{datas.countList.stockOutNumber?datas.countList.stockOutNumber:0}}
</view>
</view>
<view @tap="getNewdata('saleNumber')" style="font-size: 24rpx;width: 112rpx;text-align: center;">
<view style="color: #999999;">
商品消耗
</view>
<view class="">
{{datas.countList.saleNumber?datas.countList.saleNumber:0}}
</view>
</view>
</view>
</view>
</view>
<view class="viewrecords">
<view v-for="item in datas.list" :key="item.id">
<view class="">
<view class="">
{{item.createTime}}
</view>
<view class="">
{{item.operator}} {{item.bizName}}
</view>
</view>
<view class="">
<view class="">
<view style="font-size: 24rpx;color: #666666;">
库存 {{ inventory(item.balance,item.bizType,item.amount)}} <text
:style="{color:item.bizType=='+'?'#1bca72':'red'}"> → {{ item.amount|0 }}</text>
</view>
<view style="font-size: 24rpx;color: #666666;">
剩余库存 {{item.balance}}
</view>
</view>
<view class="">
<view :style="{color:item.bizType=='+'?'#1bca72':'red'}" style="font-weight: 400;">
{{ item.bizType }}{{ item.amount|0 }}
</view>
<view style="font-size: 24rpx;color: #666666;">
变动库存
</view>
</view>
</view>
</view>
</view>
<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
computed,
getCurrentInstance
} from 'vue';
import datePickerview from './components/my-date-pickerview.vue'
import color from '@/commons/color.js';
import {
tbConsInfoFlowstock,
tbConsInfoFlowcount,
tbConsTypes
} from '@/http/yskApi/requestAll.js';
let props = defineProps({
item: {
type: String
}
})
let datas = reactive({
list: [],
countList: null,
// 类型
status: [],
statusTitle: "类型"
})
let showStatus = ref(false)
onMounted(() => {
let items = JSON.parse(props.item)
getlist()
})
const refs = getCurrentInstance()
let popPu = () => {
refs.ctx.$refs.datePicker.toggle()
}
function datePickerConfirm(e) {
getlist("", e.start, e.end)
}
function inventory(a, b, c) {
let data = 0
if (b == '-') {
data = a + c
} else {
data = a - c
}
return data
}
let nowStatusIndex = ref(0)
let columnName = ref('')
let getNewdata = (d) => {
columnName.value = d
getlist()
}
function changeNowStatusIndex(i) {
nowStatusIndex.value = i
showStatus.value = false
datas.statusTitle = datas.status[i].conTypeName
getlist(datas.status[i].id)
}
const statusHeight = computed(() => {
return 30 * datas.status.length + 14 + 'px'
})
let getlist = (conTypeId = "", start, end, ) => {
let ids = JSON.parse(props.item)
// 列表
tbConsInfoFlowstock({
page: 0,
shopId: uni.getStorageSync("shopId"),
size: 30,
consId: ids.id,
column: columnName.value,
conTypeId,
}).then(res => {
datas.list = res.content
})
// 顶部数据
tbConsInfoFlowcount({
page: 0,
shopId: uni.getStorageSync("shopId"),
size: 30,
sort: "createTime,desc",
conTypeId,
startTime: start,
endTime: end,
consId: JSON.parse(props.item).id,
}).then(res => {
datas.countList = res
})
// 获取顶部类型/
tbConsTypes({
page: 0,
shopId: uni.getStorageSync("shopId"),
size: 100,
}).then(res => {
datas.status = res.content
})
}
</script>
<style>
page {
background-color: #f9f9f9;
}
</style>
<style scoped lang="less">
.viewrecordsType {
height: 100rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
}
.viewrecordsTop {
display: flex;
align-items: center;
// justify-content: space-between;
margin-top: 32rpx;
margin-left: 32rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.viewdf {
margin-top: 40rpx;
}
>view {
background-color: #fff;
width: 336rpx;
height: 220rpx;
}
>view:last-child {
margin-left: 26rpx;
}
}
.viewrecords {
padding: 0 28rpx;
>view {
margin-top: 32rpx;
width: 694rpx;
height: 284rpx;
background: #FFFFFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 32rpx 16rpx;
box-sizing: border-box;
>view:first-child {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 400;
font-size: 28rpx;
color: #666666;
}
>view:last-child {
width: 622rpx;
height: 156rpx;
background: #F9F9F9;
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin: 24rpx 16rpx;
align-items: center;
display: flex;
justify-content: space-around;
text-align: center;
}
}
}
.status {
margin: 0 32rpx;
position: absolute;
// top: 100%;
left: 0;
right: 0;
z-index: 10;
background-color: #fff;
}
.df {
display: flex;
align-items: center;
}
</style>