优化

src/view/yunyin/shengchanguanli/components/SubOrder.vue

@@ -0,0 +1,220 @@
+<!-- 子订单状态页面 -->
+<template>
+	<el-dialog v-model="SubWorkOrderStatusListlog" :before-close="SubWorkOrderClose" width="100%" style="height: 100vh;margin: 0px;overflow-y: auto;" top="0vh">
+	   <el-button type="primary" 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;">款号:&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>
+			
+			<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} 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 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 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>

src/view/yunyin/shengchanguanli/components/luckyexcel.vue

@@ -0,0 +1,171 @@
+<template>
+	<!-- 技术附件预览弹窗 -->
+	<el-dialog v-model="luckyexcelVisible" :before-close="luckyexcelCloseDialog" width="100%" top="0vh">
+	  <div id="luckyexcel" style="width: 100%;height: 100vh;"></div>
+	</el-dialog>
+	
+	<!-- PDF页面 -->
+	<div id="preview"></div>
+	<el-dialog v-model="isViewPdf20" :before-close="handleClose" width="100%" style="height: 100%;margin: 0px;" top="0vh">
+	  <iframe :src="pdfUrl" frameborder="0" style="width: 100vw; height: 100vh"></iframe>
+	</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 {Datalist,WorkOrderList,WorkOrderAdd,PrintListData,
+printDetailAdd,PrintDetailDel,orderDataDel,getWorkOrder,
+getSuborder,PrintDataEdit,WorkOrderEdit,gdAnnexAdd,upload,OrderAttachments,getPonumber} from '@/api/mes/job'
+import { useUserStore } from '@/pinia/modules/user';
+defineOptions({name: 'Company'})
+//获取登录用户信息
+const userStore = useUserStore()
+const _username = ref('')
+_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
+console.log('获取用户名称',_username.value)
+
+// 获取环境变量
+const basePath = import.meta.env.VITE_BASE_PATH;
+const uploadsPort = import.meta.env.VITE_UPLOADS_PORT;
+// 动态生成路径
+let path = basePath && uploadsPort ? `${basePath}:${uploadsPort}` : undefined;
+// 如果 path 是 undefined，则使用默认地址
+if (!path || path.includes("undefined")) {
+    console.log("第一路径获取失败，尝试使用备用地址 http://192.168.28.22:8082");
+    path = "http://192.168.28.22:8082";
+}
+// 如果还是 undefined，再降级到本地地址
+if (path.includes("undefined")) {
+    console.log("备用地址获取失败，使用本地地址 http://127.0.0.1:58082");
+    path = "http://127.0.0.1:58082";
+}
+console.log("最终获取地址：", path);
+
+let luckyExcel = null
+const luckyexcelVisible = ref(false)
+const luckyexcelCloseDialog = () => {
+  luckyexcelVisible.value = false
+}
+
+const pdfUrl = ref('')
+const isViewPdf20 = ref(false)
+const open = async (row) => {
+	console.log("全局页面",row)
+	//【PDF】字段有数据展示【PDF】
+	if (row['pdf']) {
+	    isViewPdf20.value = true;
+	    pdfUrl.value = `${path}/${row['pdf']}`;
+	    console.log("PDF URL：", pdfUrl.value);
+	    return;
+	}
+	
+	// 如果同时存在 `row['pdf']` 和 `row['url']`，仍然优先显示 PDF
+	if (row['pdf'] && row['url']) {
+	    isViewPdf20.value = true;
+	    pdfUrl.value = `${path}/${row['pdf']}`;
+	    console.log("PDF URL (优先显示PDF)：", pdfUrl.value);
+	    return;
+	}
+	
+	if (row['附件内容'] || row['url']) {
+		luckyexcelVisible.value = true;
+		// 加载插件和样式
+		const loadScriptsAndStyles = () => {
+			// 加载插件脚本
+			$.getScript('/luckysheet/plugins/js/plugin.js', () => {
+				$script('/luckysheet/luckysheet.umd.js', () => {
+					initializeLuckysheet(); // 加载完成后初始化 Luckysheet
+				});
+			});
+			// 定义样式文件路径
+			const styles = [
+				'/luckysheet/plugins/css/pluginsCss.css',
+				'/luckysheet/plugins/plugins.css',
+				'/luckysheet/css/luckysheet.css',
+				'/luckysheet/assets/iconfont/iconfont.css'
+			];
+			// 添加样式文件到页面
+			styles.forEach(style => {
+				$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', style));
+			});
+		};
+	
+		// 初始化 Luckysheet
+		const initializeLuckysheet = () => {
+			const callback = (exportJson, luckysheetfile) => {
+				if (!exportJson.sheets || exportJson.sheets.length === 0) {
+					alert("无法读取Excel文件内容，目前不支持xls文件格式！");
+					return;
+				}
+				if (luckyExcel) luckyExcel.destroy(); // 销毁之前的实例
+				luckysheet.create({
+					container: 'luckyexcel',
+					data: exportJson.sheets,
+					title: exportJson.info.name,
+					lang: "zh",
+					showtoolbar: false,
+					showinfobar: false,
+					allowEdit: false,
+					enableAddRow: false,
+					enableAddCol: false,
+					userInfo: false,
+					showRowBar: false,
+					showColumnBar: false,
+					sheetFormulaBar: false,
+					enableAddBack: false,
+				});
+				luckyExcel = luckysheet; // 存储实例
+			};
+	
+			if (row['附件内容']) {
+				console.log("附件内容");
+				// 转换 Base64 数据为 Blob 对象
+				const blob = dataURLtoBlob(row.附件内容);
+	
+				// 修复 Blob 文件无法正确打开的问题
+				const fileReader = new FileReader();
+				fileReader.onload = (e) => {
+					const arrayBuffer = e.target.result;
+					const newBlob = new Blob([arrayBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+					LuckyExcel.transformExcelToLucky(newBlob, callback);
+				};
+				fileReader.readAsArrayBuffer(blob);
+			} else {
+	
+				// 文件路径处理
+				// const excelPath = `/${row['url'].replace(/\\/g, "/")}`;
+				// const excelPath = "http://192.168.28.22:8082/"+row['url']
+				const excelPath = `${path}/${row['url']}`
+				console.log("url",excelPath);
+				const excelName = excelPath.split('/').pop();
+				LuckyExcel.transformExcelToLuckyByUrl(excelPath, excelName, callback);
+			}
+		};
+	
+		// Data URL 转 Blob
+		const dataURLtoBlob = (dataUrl) => {
+			const byteString = atob(dataUrl.split(',')[1]);
+			const ab = new ArrayBuffer(byteString.length);
+			const ia = new Uint8Array(ab);
+			for (let i = 0; i < byteString.length; i++) {
+				ia[i] = byteString.charCodeAt(i);
+			}
+			return new Blob([ab], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+		};
+	
+		loadScriptsAndStyles();
+	}
+	
+};
+	
+defineExpose({open})
+</script>
+
+<style scoped>
+</style>