mes-dacheng-admin-backend-ui/src/view/yunyin/shengchanguanli/components/SubOrder.vue

<!-- 子订单状态页面 -->
<template>
	<el-dialog v-model="SubWorkOrderStatusListlog" :before-close="SubWorkOrderClose" width="100%" style="height: 100vh;margin: 0px;overflow-y: auto;" top="0vh">
	   <el-button type="danger" style="width: 90px;height: 40px;margin-left: 10px;" @click="SubWorkOrderClose">关闭</el-button>
	   <br><br>
	   <div class="order-info" style="margin-left: 10px;">
		   <el-text style="font-size: 24px;">订单编号:&nbsp;</el-text>
		   <el-input v-model="orderform['订单编号']" disabled style="width: 7%; height: 40px;" />
		   &nbsp;&nbsp;&nbsp;&nbsp;
		   <el-text style="font-size: 24px;">子订单编号:&nbsp;</el-text>
		   <el-input v-model="orderform['子订单编号']" disabled  style="width: 10%; height: 40px;" />
		   &nbsp;&nbsp;&nbsp;&nbsp;
		   <el-text style="font-size: 24px;">客户编号:&nbsp;</el-text>
		   <el-input v-model="orderform['客户编号']" disabled  style="width: 5%; height: 40px;" />
		   &nbsp;&nbsp;&nbsp;&nbsp;
		   <el-text style="font-size: 24px;">PO款号:&nbsp;</el-text>
		   <el-input v-model="orderform['款号']" disabled  style="width: 10%; height: 40px;" />
		   &nbsp;&nbsp;&nbsp;&nbsp;
		   <el-text style="font-size: 24px;">款式:&nbsp;</el-text>
		   <el-input v-model="orderform['款式']" disabled  style="width: 10%; height: 40px;" />
		</div>
		<br>
		  <el-table  ref="multipleTable" 
			style="width: 100%; height: 35vh; font-size: 16px;margin-left: 10px;" 
			:row-style="{ height: '40px' }" :header-cell-style="{ padding: '0px'}"
			:cell-style="{ padding: '0px', fontSize: '16px' }" 
			 @row-click="orderlistclick" :cell-class-name="satusCellClass"
			border  :data="orderdata" highlight-current-row="true"class="custom-table">
			  <el-table-column align="center" label="工序名称" prop="工序名称"  width="90"/>
			  <!-- 尺码列表 -->
			  <template v-for="item in arr">
				<el-table-column align="left" :label=item :prop=item  width="75"/> 
			  </template>
			  <el-table-column align="left" label="完成总数量" prop="total"  width="110"/>
			  <el-table-column align="left" label="制单数" prop="制单数"  width="100"/>
			  <el-table-column align="left" label="完成百分比" prop="scale"  width="100"/>
			</el-table>
			<br>
			<h3>成品入仓完成率</h3>
			 <div class="progress-wrapper">
				 <div
				   class="progress-row"
				   v-for="item in progressList"
				   :key="item.subOrderNo"
				 >
				   <div class="progress-info">
					 <span style='font-size: 20px;'><strong>子订单编号：</strong>{{ item.subOrderNo }}</span>
				   </div>
				   <el-progress
					 :percentage="item.percentage"
					 :status="item.percentage >= 100 ? 'success' : 'success'"
					 :stroke-width="17"
					 :text-inside="true"
					 style="flex: 1;width: 79%;"
				   />
				 </div>
			   </div>
			  <br>
			  
			<div style="display: flex; align-items: center;">
				<el-tag type="info" style="width: 40px; height: 40px; margin-right: 10px;"><h2>包数</h2></el-tag>
				<h2 style="margin: 0 20px 0 0;">白格子图标表示“已有包”</h2>
				<el-tag type="success" style="width: 40px; height: 40px; margin-right: 10px;"><h2>包数</h2></el-tag>
				<h2 style="margin: 0 20px 0 0;">绿格子图标表示“已完成包”</h2>
				<el-tag type="danger" style="width: 40px; height: 40px; margin-right: 10px;"><h2>包数</h2></el-tag>
				<h2 style="margin: 0;">红格子图标表示“废弃包”</h2>
			</div>
		<div class="number-container">
		  <div 
			v-for="(item, index) in Mabaolistform" 
			:key="index" 
			:class="getBoxClass(item)">
			{{ typeof item === 'object' ? item.value : item }}
		  </div>
		</div>
	</el-dialog>
</template>
<script setup>
// 全量引入格式化工具 请按需保留
// import $script from 'scriptjs'
// import $ from 'jquery';
// import LuckyExcel from 'luckyexcel';
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {ref, reactive} from 'vue';
import {SubWorkOrderStatusList,Mabaolist,SubOrderProgress} from '@/api/mes/job';
import { useUserStore } from '@/pinia/modules/user';
defineOptions({name: 'Company'})

const SubWorkOrderStatusListlog = ref(false)
// let baoshulist = []; // 确保在使用前已经声明

const gx = ref('')
const orderid = ref('')
const orderdata = reactive([])
const arr = reactive([])
const orderform = ref({
	"订单编号": '',
	"子订单编号": '',
	"客户编号": '',
	"款号": '',
	"款式": ''
  });
  
const progressList = ref([])
const open = async (ddzbh,gongxu) => {
	console.log("orderid",ddzbh)
	console.log("gx",gongxu)
	orderid.value = ddzbh
	gx.value = gongxu
	
	SubWorkOrderStatusListlog.value = true
	const order = await SubWorkOrderStatusList({order:orderid.value});
	console.log(order)
	arr.length = 0
	baoshulist(gx.value);
	console.log(order.data.workOrderData)
	orderform.value = order.data.workOrderData
	orderdata.splice(0,order.data.data.length,...order.data.data);//表格数据
	arr.splice(0,order.data.arr.length,...order.data.arr);//表格尺码投数据
	
	const SubOrderProgress_list = await SubOrderProgress({order:order.data.workOrderData['订单编号']});
	console.log(SubOrderProgress_list)
	progressList.value = SubOrderProgress_list.data.result.map(item => ({
	  subOrderNo: item['子订单编号'],
	  入仓数量: item['入仓数量'],
	  裁剪数量: item['裁剪数量'],
	  percentage: parseFloat(item['完成率'].replace('%', ''))
	}))
}

	const satusCellClass = ({row, column, rowIndex, columnIndex}) =>{
		if(row['工序名称'] === gx.value){
		  return 'status-plan-usage-low';
		}
	}
	
   const multipleTable = ref(null);
	const Mabaolistform = reactive([]);
	// 表格点击事件
	const orderlistclick = async (row) => {
		baoshulist(row['工序名称']);
		if(row['工序名称'] !== gx.value){
			gx.value = null;
		}
	};
	const baoshulist = async (gx) => {
	  const orderMabaolist = await Mabaolist({ order: orderid.value, process:gx});
	  console.log(orderMabaolist);
	  // 初始化所有包的数据，将 chefeng 转换为对象以便标记状态
	  Mabaolistform.splice(
		0,
		Mabaolistform.length,
		...orderMabaolist.data.chefeng.map((item) => ({ value: item, status: 'default' }))
	  );
	  // 遍历完成包数，将状态标记为 complete
	  orderMabaolist.data.complete.forEach((completed) => {
		const target = Mabaolistform.find((item) => item.value === completed);
		if (target) {
		  target.status = 'complete';
		}
	  });
	  // 遍历废掉包数，将状态标记为 deleted
	  orderMabaolist.data.delete.forEach((deleted) => {
		const target = Mabaolistform.find((item) => item.value === deleted);
		if (target) {
		  target.status = 'deleted';
		}
	  });
	};
	// 动态获取样式类
	const getBoxClass = (item) => {
	  if (item && item.status === 'complete') {
	    return 'number-box green'; // 完成包数
	  } else if (item && item.status === 'deleted') {
	    return 'number-box red'; // 废弃包数
	  }
	  return 'number-box'; // 默认状态
	};
//退出
	const SubWorkOrderClose = () => {
		SubWorkOrderStatusListlog.value = false
	}
defineExpose({open})
</script>



<style scoped>

.custom-button-text {
	font-size: 25px;
	/* 或者你想要的任何大小 */
}

/* 自定义表格样式 */
.custom-table >>> .el-table {
  border: 2px solid #333; /* 表格整体边框加深 */
}

.custom-table >>> .el-table__header-wrapper th {
  border-bottom: 2px solid #333; /* 表头底部边框加深 */
}

.custom-table >>> .el-table__body-wrapper td {
  border: 1px solid #666; /* 表格单元格边框加深 */
}

.custom-table >>> .el-table__cell {
  font-size: 20px; /* 单元格字体大小 */
  font-weight: 600; /* 单元格字体加粗 */
}
.number-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.number-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  transition: background-color 0.3s;
}

:deep(.number-box.green) {
	 /* 完成包数（绿色） */
  background-color: palegreen !important;
  color: #155724;
  border-color: #c3e6cb;
}

:deep(.number-box.red) {
  background-color: red !important;
  color: #721c24;
  border-color: #f5c6cb;
}
:deep(.el-table__body .status-plan-usage-low) {
  background: #ff80ff !important;
}
:deep(.el-table__body .status-plan-usage-lows) {
  background: white !important;
}

</style>