mkm c807a39032 开发环境配置修改与采购产品报价页面优化
- 将环境变量从生产环境切换到本地环境
- 更新本地环境的BASE_URL地址
- 在采购产品报价页面添加确认已采购的时间显示
- 优化出库价输入框,增加选择器和动态显示文本
- 修复picker确认后pickerShow未重置的问题
2024-10-12 18:10:26 +08:00

290 lines
6.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<up-subsection :list="menu_list" :current="0" @change="sectionChange"></up-subsection>
<view class="content">
<up-transition :show="true" mode="slide-left">
<view v-if="goodsList1.length>0">
<view class="card" v-for="(item,index) in goodsList1" :key='index'>
<view class="head">
<!-- <text> {{orer_sn}}</text> -->
<!-- <text style="color: #989898;">{{time}}</text> -->
</view>
<view class="card-content">
<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
<image style="width: 152rpx;height: 152rpx;" :src="item.image" mode=""></image>
</view>
<view class="card-content-r">
<view class="title ellipsis">
编号:{{item.order_id}}|{{item.store_name}}
</view>
<view>
单位:{{item.unit_name}}
</view>
<view>
规格:{{item.store_info}}
</view>
<view>
备注:{{item.mark}}
</view>
<view style="color: red;">
需求量 {{item.need_num}}
</view>
</view>
</view>
<view class="card-footer">
<up-button size="small" type="primary" shape="circle" @click="cancleOrder(item)"
v-if="item.buyer_confirm==0">确认已采购</up-button>
<up-button size="small" type="success" shape="circle" v-else
disabled>{{item.buyer_confirm_name}}/{{item.update_time}}</up-button>
</view>
<up-line style="margin-top: 30rpx;" color="#F3F3F3"></up-line>
</view>
</view>
<up-empty @click='test2' v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
</up-empty>
</up-transition>
<up-modal :show="show" title="采购确认" showCancelButton @cancel="show=false" @confirm="offerUpdate()">
<up-form labelPosition="left">
<up-form-item label="名称">
<up-input v-model="formData.store_name" border="none" disabled=""></up-input>
</up-form-item>
<up-form-item label="数量">
<up-input v-model="formData.nums" @change='changeInputPrice'></up-input>
</up-form-item>
<up-form-item label="单价">
<up-input v-model="formData.price" @change='changeInputPrice'></up-input>
</up-form-item>
<up-form-item label="总价">
<up-input v-model="formData.total_price"></up-input>
</up-form-item>
<up-form-item label="出库价">
<up-input @click="pickerShow=true" v-model="formData.outbound_price">
<template #suffix>
<span>{{pickerText}}</span>
</template>
</up-input>
</up-form-item>
</up-form>
</up-modal>
<up-picker :show="pickerShow" :columns="columns" keyName="name" @confirm="pickerConfirm"
@cancel="pickerShow=false"></up-picker>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
} from "vue"
import {
purchaseProductOfferLists,
purchaseProductOfferUpdate,
purchaseProductOfferOutboundFloatingLv
} from "@/api/purchase_product_offer.js"
const menu_list = ref(['未采购', '已采购']);
const test2 = () => {
console.log("点解")
uni.navigateTo({
url: '/pages/index/index'
})
}
const show = ref(false)
const pickerText = ref('')
const pickerShow = ref(false)
const formData = ref({
"id": '',
"store_name": '',
'product_id': '',
'nums': '',
'price': '',
'total_price': '',
'outbound_price': ''
})
// tabsindex
const tabIndex = ref(1)
const {
windowWidth
} = uni.getSystemInfoSync();
const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
// tabsindex结束
const priceBlur = (index, goodsList) => {
goodsList[index].price = Number(goodsList[index].price).toFixed(2)
}
// 列表
const showGoods = ref(false)
const showGoods1 = ref(false)
const goodsList = ref([])
const goodsList1 = ref([])
const where = ref({
buyer_confirm: 0
})
const getGoodsList = async () => {
let res = await purchaseProductOfferLists(where.value)
goodsList1.value = res.data.lists
}
const cancleOrder = (item) => {
show.value = true
formData.value.store_name = item['store_name']
formData.value.id = item['id']
formData.value.nums = item['need_num']
formData.value.product_id = item['product_id']
}
const offerUpdate = () => {
purchaseProductOfferUpdate(formData.value).then(res => {
uni.$u.toast(res.msg);
show.value = false
getGoodsList()
})
}
const changeInputPrice = (e) => {
if (formData.value.nums > 0 && formData.value.price > 0) {
formData.value.total_price = formData.value.nums * formData.value.price
}
}
const sectionChange = (index) => {
where.value.buyer_confirm = index
getGoodsList()
}
const columns = ref([]);
const pickerConfirm = (e) => {
pickerShow.value = false
let outbound_price = (formData.value.price * e.value[0].value)
pickerText.value=e.value[0].name
formData.value.outbound_price = (parseInt(formData.value.price) + outbound_price).toFixed(2)
}
const OutboundFloatingLv = () => {
purchaseProductOfferOutboundFloatingLv().then(res => {
columns.value = res.data
})
}
getGoodsList()
OutboundFloatingLv()
</script>
<style lang="scss">
.head {
padding: 20rpx;
background-color: white;
position: relative;
.act {
color: #20B128;
}
.line {
width: 26px;
height: 5rpx;
background-color: #20B128;
border-radius: 50rpx;
position: absolute;
transition: 300ms;
}
}
.content {
padding: 20rpx;
padding-bottom: 150rpx;
.card {
width: 710rpx;
margin: 0 auto;
padding: 20rpx;
box-sizing: border-box;
background-color: white;
.card-content {
display: flex;
position: relative;
.card-content-l {
margin-right: 20rpx;
position: relative;
.status {
width: 152rpx;
height: 40rpx;
background-color: rgba(0, 0, 0, .3);
text-align: center;
color: white;
font-size: 24rpx;
line-height: 40rpx;
position: absolute;
bottom: 0;
}
}
.card-content-r {
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 30rpx;
width: 500rpx;
}
.need {
color: #777777;
font-size: 24rpx;
}
.ipt {
display: flex;
height: 56rpx;
}
}
.status-png {
position: absolute;
right: 20rpx;
}
}
.card-footer {
margin-top: 30rpx;
text-align: right;
font-size: 28rpx;
color: #060606;
}
}
.submit-btn {
position: fixed;
bottom: 50rpx;
width: 710rpx;
margin: 0 auto;
}
}
.detail {
width: 88rpx;
height: 88rpx;
border-radius: 88rpx;
text-align: center;
line-height: 88rpx;
background-color: #50C758;
color: white;
position: absolute;
bottom: 300rpx;
right: 20rpx;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>