cashier_app/pageConsumables/outbound.vue

291 lines
6.5 KiB
Vue

<template>
<view class="warehouseEntry">
<view>
<view>
<view>
耗材名称
</view>
<view>
{{datas.item.conName}}
</view>
</view>
<view>
<view>
现有库存
</view>
<view>
{{datas.item.stockNumber-datas.item.stockConsume}}
</view>
</view>
<view>
<view>
<text style="color: red;">*</text>出库数量
</view>
<view>
<input type="text" placeholder="请输入数量" v-model="datas.form.list.stockNumber" name="" id="">
</view>
</view>
<view>
<view>
<text style="color: red;">*</text>单价
</view>
<view>
<input type="text" placeholder="请输入单价(元)" v-model="datas.form.list.price" name="" id="">
</view>
</view>
<view style="justify-content: space-between;">
<view>
单位
</view>
<picker @change="changeNowStatusIndexs" :range="datas.unitList">
<view class="color-333" style="height: 84rpx;line-height: 84rpx;">
{{datas.form.list.unit}}
</view>
</picker>
<!-- defaultUnit -->
<uni-icons type="bottom" size="16"></uni-icons>
</view>
<view>
<view>
应付金额
</view>
<view>
{{datas.form.list.stockNumber*datas.form.list.price|0}}
</view>
</view>
<view>
<view>
实付金额
</view>
<view>
<input placeholder="请输入现有库存" type="text" v-model="datas.form.actualPayment" />
</view>
</view>
<!-- <li>
<view>
总价值
</view>
<view>
<input type="text" placeholder="请输入总价值(元)" name="" id="">
</view>
</li> -->
<view style="justify-content: space-between;align-items: center;">
<view>
供应商
</view>
<picker @change="changeNowStatusIndex" :value="nowStatusIndex" :range="datas.status">
<view class="color-333" style="height: 84rpx;line-height: 84rpx;">{{datas.status[nowStatusIndex]}}</view>
</picker>
<uni-icons type="bottom" size="16"></uni-icons>
<view style="color: #318AFE;width: 80rpx;text-align: center;" @tap="toggle">
新增
</view>
<!-- <up-button type="text" style="color: #318AFE;" @tap="toggle" :plain="true"
text="新增"></up-button> -->
</view>
</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}}</view>
<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
</view>
<view :style="{height: '14px'}"></view>
</view> -->
</view>
<view class="bottombutton">
<up-button type="primary" style="background-color: #318AFE;color: #fff;" @tap="sumbit" :plain="true"
text="保存"></up-button>
<!-- <up-button type="text" style="background-color: #f9f9f9;color: #999;" @tap="toggle" :plain="true"
text="取消"></up-button> -->
</view>
<!-- 消息提示 -->
<up-toast ref="uToastRef"></up-toast>
</template>
<script setup>
import {
ref,
computed,
reactive,
onMounted,
getCurrentInstance
} from 'vue';
import {
onShow,
} from '@dcloudio/uni-app';
import color from '@/commons/color.js';
import go from '@/commons/utils/go.js';
import {
tbConsInfostockInOut,
tbConsInfoList,
tbShopPurveyor
} from '@/http/yskApi/requestAll.js';
let showStatus = ref(false)
const refs = getCurrentInstance()
let datas = reactive({
// 供应商列表
list: [],
// 供应商渲染数组
status: [],
unitList:[],
form: {
shopId: uni.getStorageSync("shopId"),
type: "out",
list: {},
actualPayment: 0
},
item: ""
})
const props = defineProps({
consId: {
type: String
},
item: {
type: String
}
})
onMounted(() => {
datas.item = JSON.parse(props.item)
datas.form = Object.assign(datas.form, datas.item)
// 单位列表
datas.unitList = [ datas.form.conUnit,datas.form.conUnitTwo]
datas.form.list.unit=datas.form.defaultUnit
})
onShow(() => {
getList()
})
function toggle() {
go.to('PAGES_ADD_SUPPLIER')
}
function getList() {
tbShopPurveyor({
shopId: uni.getStorageSync("shopId"),
page: 0,
size: 100,
}).then(res => {
datas.list = res.content
res.content.forEach(ele => {
datas.status.push(ele.purveyorName)
})
})
}
function showStatusToggle() {
showStatus.value = !showStatus.value
}
let nowStatusIndex = ref(0)
function changeNowStatusIndex(i) {
nowStatusIndex.value = i.detail.value
showStatus.value = false
}
function changeNowStatusIndexs(i) {
datas.form.list.unit = datas.unitList[i.detail.value]
}
function sumbit() {
if (!datas.form.list.stockNumber) {
refs.ctx.$refs.uToastRef.show({
type: 'default',
message: "请输入必填项",
})
return
}
if (!datas.form.list.price) {
refs.ctx.$refs.uToastRef.show({
type: 'default',
message: "请输入必填项",
})
return
}
datas.form.list.conInfoId = props.consId
datas.form.list = [datas.form.list]
tbConsInfostockInOut({
...datas.form,
// 供应商id
supplierId: datas.list[nowStatusIndex.value].id,
accountsPayable: datas.form.list[0].stockNumber * datas.form.list[0].price,
}).then(res => {
go.back()
})
}
// 获取供应商
const statusHeight = computed(() => {
return 30 * datas.status.length + 14 + 'px'
})
</script>
<style>
page {
background-color: #f9f9f9;
}
</style>
<style scoped lang="less">
.df() {
display: flex;
align-items: center;
}
.status {
margin: 0 32rpx;
position: absolute;
// top: 100%;
left: 0;
right: 0;
z-index: 10;
background-color: #fff;
}
.warehouseEntry {
width: 694rpx;
// height: 640rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
margin: 32rpx;
padding: 20rpx 24rpx;
box-sizing: border-box;
>view {
>view {
width: 646rpx;
height: 84rpx;
background: #fcfcfc;
border: 2rpx solid #F9F9F9;
margin-top: 32rpx;
.df;
>view:first-child {
width: 190rpx;
height: 84rpx;
line-height: 84rpx;
// text-align: left;
padding-left: 24rpx;
background: #F9F9F9;
border-radius: 8rpx 0rpx 0rpx 8rpx;
border: 2rpx solid #F9F9F9;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
}
}
}
.bottombutton {
margin-top: 84rpx;
padding: 0 24rpx;
>button {
width: 530rpx;
height: 80rpx;
border-radius: 56rpx 56rpx 56rpx 56rpx;
}
}
</style>