590 lines
13 KiB
Vue
Raw Normal View History

2025-09-01 16:05:31 +08:00
<template>
<view class="order-detail-container">
<!-- 基础信息区域 -->
<view class="info-section">
<uni-row class="info-grid">
<uni-col class="flex-row">
<view class="label">生产单位: </view>
<uni-data-select
v-model="form.companyId"
:localdata="companyOptions"
text-field="deptName"
value-field="deptId"
@change="getEdu"
:clear="true"
disabled="true"
/>
</uni-col>
</uni-row>
<uni-row class="info-grid">
<uni-col :span="12">
<view class="label">剩余金额:{{ remainingMoney}}</view>
</uni-col>
<uni-col :span="12">
<view class="label">订单金额:{{ orderAmount }}</view>
</uni-col>
</uni-row>
<uni-row class="info-grid">
<!-- <uni-col :span="24" style="display: flex;">
<view class="label">已选补差:</view>
<view class="">
<view style="color: red;" v-if="buchaGoodsList.length&&selectedBuCha.length==0">
提示:当前有补差数据可选择
</view>
<view v-else class="" v-for="(item,index) in selectedBuCha" :key="index">
商品{{item.goodsname}},金额{{item.piaokou}}
</view>
</view>
</uni-col> -->
</uni-row>
</view>
<view>
<!-- 商品信息区域 -->
<view class="goods-section">
<view class="section-title">
<view class="">
商品信息
</view>
</view>
<view v-if="goodsList.length === 0" class="no-data">
暂无商品数据
</view>
<view v-else class="goods-double-column">
<view
v-for="(goods, index) in goodsList"
:key="goods.goodsid"
class="goods-item"
>
<view class="goods-header">
<text class="serial-number">{{ index + 1 }}</text>
<text class="goods-name">{{ goods.goodsname }}</text>
</view>
<view class="goods-content">
<uni-row class="info-row">
<uni-col :span="12" class="info-pair">
<view class="label">件装数:{{ goods.packingnum }}</view>
</uni-col>
<uni-col :span="12" class="info-pair">
<view class="label">供应参考价:{{ goods.invoiceprice }}</view>
</uni-col>
</uni-row>
<uni-row class="info-row">
<uni-col :span="12" class="info-pair">
<view class="label">前三月平均数:{{ goods.threeMonths }}</view>
</uni-col>
<uni-col :span="12" class="info-pair">
<view class="label">使用票扣:{{ goods.piaokou }}</view>
</uni-col>
</uni-row>
<uni-row class="info-row">
<uni-col :span="12" class="info-pair">
<view class="label">小计:{{ goods.allmoney }}</view>
</uni-col>
<uni-col :span="12" class="info-pair">
<view class="label">税率:{{ goods.taxrate }}</view>
</uni-col>
</uni-row>
<uni-row class="info-row">
<uni-col :span="12" class="info-pair flex-row" >
<view class="label">采购数量:</view>
<view class="label">税率:{{ goods.goodsnum }}</view>
<!-- <input
class="uni-input custom-input"
v-model="goods.goodsnum"
placeholder="请输入采购数量"
@confirm="e =>handleInput(e,index)"/> -->
</uni-col>
</uni-row>
</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<button @click="goCancel" class="btn btn-secondary">取消</button>
<!-- <button @click="goSubmit" class="btn btn-primary">确认提交</button> -->
</view>
</view>
</view>
</template>
<script setup>
import { addsalemain } from '../../../../api/orderManager/index.js'
import { onMounted, ref ,computed} from 'vue'
import { contractData, goodsData } from '../detailData.js'
import { listsaleBusGoodsList } from '../../../../api/orderManager/index.js'
import { listproductList,salemainDetail,businessManagerReviewGoodsList,getsalemaincheckAmount } from '../../../../api/orderManager/index.js'
// import { getInfo } from '../../../../store/modules/user.js'
import { useUserStore } from '../../../../store/modules/user.js'
import { useOrderManagerStore } from '../../../../store/modules/orderManager.js'
import data1 from './data1.js'
//已选补差
const selectedBuCha = ref([])
// 商品列表数据
const buchaGoodsList =ref([])
const goodsList = ref([])
const form = ref({
companyId:1,
})
const userStore = useUserStore()
const RemainingMoney = ref('0.00') // 剩余金额
//显示补差按钮
const buChaButState = ref(true)
//显示选中所有按钮
const allSelected = ref(false)
//储存选中的列表
const selectedList = ref([])
//显示补差
const ShowBucha = ref(false)
//剩余金额
const remainingMoney = ref(0)
//订单金额
const orderAmount = ref(0.00)
// 入参
const queryNum = ref({})
// 基础信息
const contract = ref({})
// 生产单位
const companyOptions = ref([])
const monthOptions = ref([
{ value: 0, text: '本月执行' },
{ value: 1, text: '下月执行' }
])
// // 通用的金额格式化函数
// const formatMoney = (value) => {
// const num = Number(value)
// return isNaN(num)
// ? '0.00'
// : num.toLocaleString('en-US', {
// minimumFractionDigits: 2,
// maximumFractionDigits: 2
// })
// }
// // 创建计算属性(可选)
// const formattedRemainingMoney = computed(() => formatMoney(RemainingMoney.value))
// const formattedContractMoney = computed(() => formatMoney(form.value.contractmoney))
onMounted(() => {
// contract.value = contractData.data[0]
// console.log(contract.value)
getEdu()
getDeptLists()
// GetlistsaleBusGoodsList()
getAllData()
})
// 获取补差,票扣列表数据
// console.log('saleid',saleid)
const getAllData = () =>{
const rowdata = useOrderManagerStore().oeders[0]
salemainDetail(rowdata.saleid).then(res => {
form.value = res.data
});
businessManagerReviewGoodsList(rowdata.saleid).then(res => {
goodsList.value = res.data
});
// 查询剩余额度
const AmountqueryParams = {
companyId:rowdata.companyId,
saleId: rowdata.saleid,
}
getsalemaincheckAmount(AmountqueryParams).then(res => {
remainingMoney.value = res.data.amounts
});
}
function GetlistsaleBusGoodsList() {
// // 查询可销售商品列表
const KeSaleGoodsParams = {
companyId:form.value.companyId,
userid: userStore.id,
// userid: 41,
deleteflag:0, //不禁用的,禁用标志 0: 不禁用 1: 禁用 2, 流程中
// state:1, //状态0待审核,1已审核
}
// const KeSaleGoodsQuery = {
// pageNum: 1,
// pageSize: 999,
// }
listsaleBusGoodsList(KeSaleGoodsParams).then(res => {
goodsList.value = res.data
// console.log(' goodsList.value', goodsList.value)
});
// console.log(' userStore.id', userStore.id)
}
const getDeptLists = () =>{
listproductList().then(res => {
companyOptions.value = res.data.map(item => {
return {
value:item.deptId,
text:item.deptName
}
})
console.log('companyOptions.value', companyOptions.value)
});
}
/** 更改生产单位时,查询额度 */
function getEdu() {
console.log(form.value.companyId,'form.value.companyId生产单位ID')
// 清空已选补差数据
const AmountqueryParams = {
companyId:form.value.companyId,
saleId: 0,
}
// 查询剩余额度
getsalemaincheckAmount(AmountqueryParams).then(res => {
remainingMoney.value = res.data.amounts
});
GetlistsaleBusGoodsList()
// getsalemainpiAoKouList()
}
//取消
const goCancel = () => {
uni.navigateTo({
url:'/pages/work/OrderManager/index'
})
}
</script>
<style lang="scss" scoped>
// ::v-deep .uni-checkbox-input {
// background-color: #fff !important;
// border-color: #67c23a !important;
// }
// ::v-deep .uni-checkbox-input-checked {
// background-color: #fff !important;
// color: #67c23a !important; /* 对号颜色 */
// }
// ::v-deep .uni-checkbox-input svg{
// viewBox: 0 0 36 36;
// width: 22rpx;
// height: 22rpx;
// }
.select-all {
//靠右显示
margin-left: auto;
// margin-left: 10rpx;
// background-color: #67c23a;
}
.custom-input {
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
height: 25px;
}
.order-detail-container {
padding: 16px;
background-color: #f5f5f5;
min-height: 100vh;
}
.flex-row {
display: flex;
align-items: center; /* 垂直居中对齐 */
gap: 10px; /* 标签和下拉框之间的间距 */
}
.page-title {
text-align: center;
margin-bottom: 24px;
color: #333;
font-size: 18px;
font-weight: 600;
padding: 12px 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 基础信息网格布局 */
.info-section {
background: #fff;
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.info-grid {
:deep(.uni-row) {
display: flex;
flex-wrap: wrap;
}
.info-value {
font-size: 15px;
color: #333;
font-weight: 500;
display: flex;
justify-content: flex-end;
}
margin-bottom: 20rpx;
margin-top: 20rpx;
}
.info-item {
margin-bottom: 12px;
}
.label {
font-size: 14px;
color: #666;
margin-bottom: 4px;
font-weight: 500;
}
.required::after {
content: '*';
color: #f56c6c;
margin-left: 2px;
}
.amount {
color: #f56c6c;
font-weight: 600;
}
.select-container {
width: 100%;
}
:deep(.uni-data-select__text) {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
}
:deep(.month-popup) {
min-width: 120px;
}
/* 商品信息区域 */
.goods-section {
background: #fff;
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.section-title {
font-size: 16px;
color: #333;
margin: 0 0 16px 0;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
font-weight: 600;
display: flex;
align-items: center;
}
.no-data {
text-align: center;
color: #999;
padding: 40px 0;
font-size: 14px;
}
/* 商品双栏布局 */
.goods-double-column {
display: flex;
flex-direction: column;
gap: 12px;
}
.goods-item {
border: 1px solid #eee;
border-radius: 12px;
overflow: hidden;
background: #fafafa;
}
.goods-header {
background: #409eff;
color: white;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.serial-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
.goods-name {
font-size: 15px;
font-weight: 600;
flex: 1;
}
/* 商品内容区域 */
.goods-content {
padding: 12px 16px;
}
.info-row {
display: flex;
margin-bottom: 8px;
}
.info-pair {
flex: 1;
padding: 0 8px;
}
.info-pair .label {
font-size: 14px;
color: #666;
margin-bottom: 2px;
}
.info-pair .value {
font-size: 14px;
color: #333;
font-weight: 500;
text-align: right;
}
.quantity {
color: #409eff;
font-weight: 600;
}
.total {
color: #f56c6c;
font-weight: 600;
}
.empty {
visibility: hidden;
}
/* 操作按钮 */
.action-buttons {
display: flex;
justify-content: center;
gap: 12px;
padding: 16px 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
min-width: 80px;
text-align: center;
flex: 1;
}
.btn-primary {
background: #409eff;
color: white;
}
.btn-secondary {
background: #67c23a;
color: white;
}
.btn-outline {
background: #fff;
color: #333;
border: 1px solid #ddd;
}
/* 响应式设计 */
@media (max-width: 768px) {
.order-detail-container {
padding: 12px;
}
.info-item {
margin-bottom: 10px;
}
.info-pair {
padding: 0 4px;
}
.action-buttons {
flex-direction: column;
}
.btn {
width: 100%;
margin-bottom: 8px;
}
.btn:last-child {
margin-bottom: 0;
}
}
/* 添加多选框样式 */
.uni-checkbox {
display: inline-flex;
align-items: center;
margin-right: 8px;
}
</style>