|
|
@@ -1,8 +1,358 @@
|
|
|
+<!-- 子订单状态页面 -->
|
|
|
<template>
|
|
|
+ <br><br>
|
|
|
+ <div class="order-info" style="margin-left: 10px;">
|
|
|
+ <el-text style="font-size: 24px;">订单编号: </el-text>
|
|
|
+ <el-select style="width: 10%; height: 40px;"
|
|
|
+ v-model="orderform.订单编号"
|
|
|
+ placeholder="请输入或选择订单编号"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ remote
|
|
|
+ :remote-method="searchOrder"
|
|
|
+ @change="handleOrderSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in orderOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-text style="font-size: 24px;">子订单编号: </el-text>
|
|
|
+ <el-select
|
|
|
+ v-model="orderform.子订单编号"
|
|
|
+ style="width: 10%; height: 40px;"
|
|
|
+ placeholder="请选择子订单编号"
|
|
|
+ :disabled="!orderform.订单编号"
|
|
|
+ @change="handleOrderSelect2"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="subItem in subOrderOptions"
|
|
|
+ :key="subItem.value"
|
|
|
+ :label="subItem.label"
|
|
|
+ :value="subItem.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-text style="font-size: 24px;">客户编号: </el-text>
|
|
|
+ <el-input v-model="orderform['客户编号']" disabled style="width: 5%; height: 40px;" />
|
|
|
+
|
|
|
+ <el-text style="font-size: 24px;">款号: </el-text>
|
|
|
+ <el-input v-model="orderform['款号']" disabled style="width: 10%; height: 40px;" />
|
|
|
+
|
|
|
+ <el-text style="font-size: 24px;">款式: </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>
|
|
|
</template>
|
|
|
+<script setup>
|
|
|
+// 全量引入格式化工具 请按需保留
|
|
|
+// import $script from 'scriptjs'
|
|
|
+// import $ from 'jquery';
|
|
|
+// import LuckyExcel from 'luckyexcel';
|
|
|
+import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
|
|
|
+import { ElMessage, ElMessageBox, LAST_KEYS } from 'element-plus';
|
|
|
+import {ref, reactive} from 'vue';
|
|
|
+import {SubWorkOrderStatusList,Mabaolist,Apiorder,Apiorderids} from '@/api/mes/job';
|
|
|
+import { useUserStore } from '@/pinia/modules/user';
|
|
|
+defineOptions({name: 'Company'})
|
|
|
|
|
|
-<script>
|
|
|
+const SubWorkOrderStatusListlog = ref(false)
|
|
|
+// let baoshulist = []; // 确保在使用前已经声明
|
|
|
+
|
|
|
+const gx = ref('')
|
|
|
+const orderid = ref('')
|
|
|
+const orderdata = reactive([])
|
|
|
+const arr = reactive([])
|
|
|
+const orderform = ref({
|
|
|
+ "订单编号": '',
|
|
|
+ "子订单编号": '',
|
|
|
+ "客户编号": '',
|
|
|
+ "款号": '',
|
|
|
+ "款式": ''
|
|
|
+ });
|
|
|
+
|
|
|
+ const orderOptions = ref([]); // 订单编号选项
|
|
|
+ const subOrderOptions = ref([]); // 子订单编号选项
|
|
|
+// 搜索订单（订单编号）
|
|
|
+const searchOrder = async (query) => {
|
|
|
+ if (!query.trim()) {
|
|
|
+ orderOptions.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await Apiorder({ search: query });
|
|
|
+ if (res.code === 0 && res.data?.list) {
|
|
|
+ orderOptions.value = res.data.list.map(item => ({
|
|
|
+ value: item.订单编号,
|
|
|
+ label: item.订单编号
|
|
|
+ }));
|
|
|
+
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('搜索订单失败:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 选择订单编号时获取子订单编号
|
|
|
+const handleOrderSelect = async (orderNo) => {
|
|
|
+ if (!orderNo) {
|
|
|
+ subOrderOptions.value = [];
|
|
|
+ orderform.value.子订单编号 = '';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 调用子订单接口
|
|
|
+ const res = await Apiorderids({ order:orderNo}); // 假设接口需要传订单编号
|
|
|
+ if (res.code === 0 && res.data?.list) {
|
|
|
+ subOrderOptions.value = res.data.list.map(item => ({
|
|
|
+ value: item.子订单编号,
|
|
|
+ label: item.子订单编号
|
|
|
+ }));
|
|
|
+ if (subOrderOptions.value.length === 1) {
|
|
|
+ orderform.value.子订单编号 = subOrderOptions.value[0].value;
|
|
|
+ const ress = await SubWorkOrderStatusList({ order:orderform.value.子订单编号});
|
|
|
+ if (ress.code === 0) {
|
|
|
+ orderform.value.客户编号 = ress.data.workOrderData['客户编号'];
|
|
|
+ orderform.value.款号 = ress.data.workOrderData['款号'];
|
|
|
+ orderform.value.款式 = ress.data.workOrderData['款式'];
|
|
|
+ // 检查表单完整性（确保在数据更新后检查）
|
|
|
+ if (isFormValid()) {
|
|
|
+ await open(orderNo); // 执行后续操作
|
|
|
+ } else {
|
|
|
+ ElMessage.warning('请填写完整所有字段');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取子订单失败:', error);
|
|
|
+ subOrderOptions.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 选择子订单编号时获取订单信息
|
|
|
+const handleOrderSelect2 = async (orderNo) => {
|
|
|
+ if (!orderNo) {
|
|
|
+ resetFormFields(); // 清空表单字段
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await SubWorkOrderStatusList({ order: orderNo });
|
|
|
+ if (res.code === 0) {
|
|
|
+ // 更新表单数据
|
|
|
+ updateFormData(res.data.workOrderData);
|
|
|
+
|
|
|
+ // 检查表单完整性（确保在数据更新后检查）
|
|
|
+ if (isFormValid()) {
|
|
|
+ open(orderNo); // 执行后续操作
|
|
|
+ } else {
|
|
|
+ ElMessage.warning('请填写完整所有字段');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取订单信息失败:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 辅助函数：清空表单字段
|
|
|
+const resetFormFields = () => {
|
|
|
+ orderform.value.客户编号 = '';
|
|
|
+ orderform.value.款号 = '';
|
|
|
+ orderform.value.款式 = '';
|
|
|
+};
|
|
|
+
|
|
|
+// 辅助函数：更新表单数据
|
|
|
+const updateFormData = (data) => {
|
|
|
+ orderform.value.客户编号 = data['客户编号'] || '';
|
|
|
+ orderform.value.款号 = data['款号'] || '';
|
|
|
+ orderform.value.款式 = data['款式'] || '';
|
|
|
+};
|
|
|
+
|
|
|
+// 辅助函数：检查表单完整性
|
|
|
+const isFormValid = () => {
|
|
|
+ const requiredFields = ['客户编号', '款号', '款式']; // 明确需要检查的字段
|
|
|
+ return requiredFields.every(field =>
|
|
|
+ orderform.value[field]?.trim() !== ''
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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>
|
|
|
+
|
|
|
+
|
|
|
+<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>
|
