<script lang="ts" setup>
|
import request from "@/utils/request"
|
import {onMounted, ref} from "vue";
|
import userInfo from '@/stores/userInfo'
|
/*定义变量区*/
|
const order = ref([])
|
const dialogVisible = ref(false)
|
const orderDetails = ref([])
|
const loading = ref(true)
|
let productName = ref(null)
|
const user=userInfo()
|
|
|
|
|
/*方法区*/
|
onMounted(()=>{
|
getCustomerOrderUnfinished()
|
})
|
|
//获取客户为完成订单
|
const getCustomerOrderUnfinished = () => {
|
request.post(`/order/getUnfinishedOrder/${user.user.customerId}`).then((res) => {
|
order.value = res.data
|
loading.value=false
|
})
|
}
|
//获取此产品的订单明细以及生产进度
|
const getOrderProgress =async (orderId:string,productId:string)=>{
|
await request.post(`/order/getOrderProgress/${orderId}/${productId}`).then((res) => {
|
orderDetails.value = res.data
|
})
|
}
|
|
//显示明细
|
const searchGlassDetail =async (orderId,productId,productName1) => {
|
await getOrderProgress(orderId,productId)
|
productName.value = productName1
|
dialogVisible.value = true
|
}
|
|
|
</script>
|
|
<template >
|
<div class="grid-container" >
|
<div class="grid-item" v-for="(item,index) in order">
|
<el-row>
|
<el-col :span="24">
|
<el-text class="orderId" size="large"> {{item['orderId']}}</el-text>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<el-text >订单进度:</el-text>
|
</el-col>
|
<el-col :span="17">
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="item['percent']" />
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<el-text >订单日期:</el-text>
|
</el-col>
|
<el-col :span="6">
|
<el-text class="date" >{{item["createTime"]}}</el-text>
|
</el-col>
|
<el-col :span="6">
|
<el-text >发货日期:</el-text>
|
</el-col>
|
<el-col :span="6">
|
<el-text class="date" >{{item["deliveryDate"]}}</el-text>
|
</el-col>
|
</el-row>
|
|
<div class="orderDetail">
|
<template v-for="(orderDetail,index) in item['orderDetails']">
|
<el-row>
|
<el-col :span="24">
|
<el-divider />
|
</el-col>
|
</el-row>
|
|
<el-row @click="searchGlassDetail(orderDetail['orderId'],orderDetail['productId'],orderDetail['productName'])">
|
<el-col :span="6">
|
产品名称:
|
</el-col>
|
<el-col :span="18" class="productName">
|
<el-text style="word-break:break-all;">
|
{{orderDetail["productName"]}}
|
</el-text>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="6">
|
总数量:
|
</el-col>
|
<el-col :span="6" class="productName">
|
<el-text>
|
{{orderDetail["quantity"]}}
|
</el-text>
|
</el-col>
|
|
<el-col :span="6">
|
入库:
|
</el-col>
|
<el-col :span="6" class="productName">
|
<el-text>
|
{{orderDetail["warehouseNum"]}}
|
</el-text>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="6">
|
生产数量:
|
</el-col>
|
<el-col :span="6" class="productName">
|
<el-text >
|
{{orderDetail["quantityByProduced"]}}
|
</el-text>
|
</el-col>
|
|
<el-col :span="6">
|
发货:
|
</el-col>
|
<el-col :span="6" class="productName">
|
<el-text>
|
{{orderDetail["deliveryNum"]}}
|
</el-text>
|
</el-col>
|
</el-row>
|
|
</template>
|
</div>
|
|
|
</div>
|
</div>
|
|
<el-dialog v-model="dialogVisible" fullscreen>
|
<template #header>
|
<el-text size="large" style="font-weight: bolder">{{productName}}</el-text>
|
</template>
|
<template v-for="(orderDetail,index) in orderDetails">
|
<el-row>
|
<el-divider />
|
</el-row>
|
<!--订单表头-->
|
<el-row gutter="1">
|
<el-col :span="3">
|
订序：
|
</el-col>
|
<el-col :span="3">
|
{{orderDetail['orderNumber']}}
|
</el-col>
|
|
<el-col :span="3">
|
宽:
|
</el-col>
|
<el-col :span="3">
|
{{orderDetail['width']}}
|
</el-col>
|
|
<el-col :span="3">
|
高:
|
</el-col>
|
<el-col :span="3">
|
{{orderDetail['height']}}
|
</el-col>
|
|
<el-col :span="3">
|
数量:
|
</el-col>
|
<el-col :span="3">
|
{{orderDetail['quantity']}}
|
</el-col>
|
</el-row>
|
|
<template v-for="(orderProcessDetail,keys,index) in orderDetail['orderProcessDetails']">
|
<el-row class="process-row">
|
<el-col :span="24">
|
<el-text>
|
流程卡号：
|
</el-text>
|
<el-text>{{keys}}</el-text>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<template v-for="(orderProcessDetailItem) in orderProcessDetail">
|
<el-text class="process">
|
{{orderProcessDetailItem['process'] +':'+ orderProcessDetailItem['reportingWorkNum'] }}
|
</el-text>
|
</template>
|
</el-col>
|
</el-row>
|
|
</template>
|
|
</template>
|
</el-dialog>
|
</template>
|
|
<style scoped>
|
|
.grid-container {
|
width: 100%;
|
//height: 100vh;
|
display: grid;
|
grid-template-columns: repeat(3, 1fr); /* 默认3列 */
|
justify-items: center; /* 水平居中 */
|
align-items: center; /* 垂直居中 */
|
|
gap: 2rem; /* 可选，设置网格之间的间隔 */
|
}
|
.grid-item{
|
background-color: white;
|
height: 70vh;
|
width: 25vw;
|
text-align: center;
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0), 0 6px 5px 0 rgba(0, 0, 0, 0.19);
|
border-radius:1rem
|
}
|
@media (max-width: 1450px) {
|
.grid-container {
|
grid-template-columns: 1fr; /* 小屏幕下变为单列 */
|
}
|
.grid-item{
|
width: 90vw;
|
height: auto;
|
min-height: 70vh;;
|
}
|
.orderDetail{
|
height: auto;
|
overflow-y: hidden;
|
}
|
}
|
|
:deep(.el-row){
|
margin-bottom: 0.4rem;
|
text-align: center;
|
}
|
.orderId{
|
font-size: larger;
|
font-weight: bold;
|
}
|
.date{
|
font-weight: bolder;
|
}
|
.el-divider--horizontal {
|
border-top: 5px var(--el-border-color) var(--el-border-style);
|
display: block;
|
height: 1px;
|
margin: 24px 0;
|
width: 100%;
|
}
|
.orderDetail{
|
width: calc(100% - 2rem);
|
height:calc(100% - 8rem);
|
margin-left: auto;
|
margin-right: auto;
|
overflow-y: auto;
|
}
|
.orderDetail .el-col {
|
text-align: left;
|
}
|
.productName .el-text{
|
font-weight: bolder;
|
font-size:16px
|
}
|
.process{
|
margin-right: 0.5rem;
|
}
|
.process-row{
|
margin-top: 1rem;
|
}
|
</style>
|
