|
|
@@ -1,825 +1,117 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <!-- 左侧树形结构 -->
|
|
|
- <el-container>
|
|
|
- <layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;" >
|
|
|
- <div class="JKWTree-tree" style="height: 70vh;">
|
|
|
- <h3>服装半成品返工维护</h3>
|
|
|
- <el-tree :data="treeData" class="treecolor" highlight-current @node-click="handleNodeClick"/>
|
|
|
- </div>
|
|
|
- </layout-sider>
|
|
|
- <el-container>
|
|
|
-
|
|
|
- <el-main>
|
|
|
- <!-- 按钮区域 -->
|
|
|
- <div class="gva-table-box">
|
|
|
- <el-form-item>
|
|
|
- <el-input v-model="searchinfo" @keydown="keydown_onSearch($event)" placeholder="输入工单编号或产品名称" style="width: 180px;" />
|
|
|
- <el-button type="primary" class="search" icon="search" @click="onSearch"></el-button>
|
|
|
- <el-button type="primary" class="bt" icon="plus" @click="onAdd">新增半成品</el-button>
|
|
|
- <!-- <el-button type="primary" class="bt" icon="delete" @click="Del">删除</el-button> -->
|
|
|
- <div style="margin-left: auto;">
|
|
|
- <el-button type="primary" :icon="Download" @click="exportExcel">导出到Excel(汇总)</el-button>
|
|
|
- <el-button type="primary" :icon="Download" @click="exportExcel2">导出到Excel(明细)</el-button>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!-- 数据展示 -->
|
|
|
- <el-table ref="multipleTable" style="width: 100%;height: 70vh;" tooltip-effect="dark" :data="tableData" row-key="ID"
|
|
|
- highlight-current-row="true" border @selection-change="handleSelectionChange" id="table"
|
|
|
- :row-style="{ height: '20px' }" :header-cell-style="{ padding: '0px' }"
|
|
|
- :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
|
|
|
- :show-overflow-tooltip="true" @row-click="Click" @row-dblclick="doubleClick">
|
|
|
- <el-table-column align="left" label="单据编号" prop="单据编号" width="140" />
|
|
|
- <el-table-column align="left" label="订单编号" prop="订单编号" width="190" />
|
|
|
- <el-table-column align="left" label="生产款号" prop="生产款号" width="140" />
|
|
|
- <el-table-column align="left" label="款式" prop="款式" width="100" />
|
|
|
- <el-table-column align="left" label="颜色" prop="颜色" width="100" />
|
|
|
- <el-table-column align="left" label="尺码" prop="尺码" width="100" />
|
|
|
- <el-table-column align="left" label="返工数量" prop="数量" width="100" />
|
|
|
- <el-table-column align="left" label="面料名称" prop="面料名称" width="120" />
|
|
|
- <el-table-column align="left" label="问题分类" prop="问题分类" width="120" />
|
|
|
- <el-table-column align="left" label="创建时间" prop="Sys_rq" width="120" />
|
|
|
- <el-table-column fixed="right" label="操作" width="130">
|
|
|
- <template #default="{ row, $index }">
|
|
|
- <el-button @click="Order_detailsRow(row,$index)" type="success" size="small"
|
|
|
- style="font-size: 16px;padding: 0px;width: 90px;">
|
|
|
- 查看明细
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- </el-table>
|
|
|
- <!-- 分页 -->
|
|
|
- <div class="gva-pagination">
|
|
|
- <el-pagination layout="total, sizes, prev, pager, next, jumper" v-model:current-page="page"
|
|
|
- v-model:page-size="limit"
|
|
|
- :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
|
|
|
- @size-change="handleSizeChange" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 弹出框 -->
|
|
|
- <el-dialog
|
|
|
-v-model="dialogFormVisible"
|
|
|
-:before-close="closeDialog"
|
|
|
-:title="type === 'create' ? '服装半成品返工报工页面' : '服装半成品返工报工修改'"
|
|
|
-destroy-on-close
|
|
|
-style="width: 90%; height: 90%; margin-top: 3%;"
|
|
|
->
|
|
|
-<el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" label-width="120px">
|
|
|
- <!-- 日期选择框 -->
|
|
|
- <el-row :gutter="10" >
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="日期" label-width="50px">
|
|
|
- <el-date-picker v-model="DefectiveformData['Sys_rq']" style="width: 40%;" type="date" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 新增一行按钮 -->
|
|
|
- <el-button type="primary" @click="addRow" style="margin-left: 20px; margin-bottom: 20px;">新增一行</el-button>
|
|
|
-
|
|
|
- <!-- 表格区域 -->
|
|
|
- <el-table
|
|
|
- :data="SecondarytabeleData"
|
|
|
- border
|
|
|
- style="width: 100%; height: 63vh; margin-bottom: 20px;"
|
|
|
- :row-style="{ height: '40px' }"
|
|
|
- :header-cell-style="{ padding: '0px' }"
|
|
|
- :cell-style="{ padding: '0px' }"
|
|
|
- :header-row-style="{ height: '40px' }"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- >
|
|
|
- <!-- 订单编号|款号 -->
|
|
|
- <el-table-column label="订单编号|款号" width="300">
|
|
|
- <template #default="{ row, $index }">
|
|
|
- <el-select
|
|
|
- v-model="row.ddbh"
|
|
|
- placeholder="请输入或选择订单号"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- remote
|
|
|
- :remote-method="(query) => searchOrder(query, $index)"
|
|
|
- @change="(value) => handleOrderSelect(value, $index)"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="ddbh in row.ddbhOptions"
|
|
|
- :key="ddbh.value"
|
|
|
- :label="ddbh.label"
|
|
|
- :value="ddbh.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 面料分类|面料名称 -->
|
|
|
- <el-table-column label="面料分类|面料名称" width="220">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-select v-model="row.material" placeholder="请选择面料" >
|
|
|
- <el-option
|
|
|
- v-for="material in row.materialOptions"
|
|
|
- :key="material.value"
|
|
|
- :label="material.label"
|
|
|
- :value="material.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 颜色 -->
|
|
|
- <el-table-column label="颜色" width="160">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-select v-model="row.color" placeholder="请选择颜色" >
|
|
|
- <el-option
|
|
|
- v-for="color in row.colorOptions"
|
|
|
- :key="color.value"
|
|
|
- :label="color.label"
|
|
|
- :value="color.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 尺码 -->
|
|
|
- <el-table-column label="尺码" width="160">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-select v-model="row.size" placeholder="请选择尺码" clearable>
|
|
|
- <el-option
|
|
|
- v-for="size in row.sizeOptions"
|
|
|
- :key="size.value"
|
|
|
- :label="size.label"
|
|
|
- :value="size.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 返工数量 -->
|
|
|
- <el-table-column label="返工数量" width="100">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-input v-model="row.defectiveQuantity" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 返工车缝小组 -->
|
|
|
- <el-table-column label="返工车缝小组" width="150">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-select v-model="row.group" placeholder="请选择返工车缝小组" clearable>
|
|
|
- <el-option
|
|
|
- v-for="group in row.groupOptions"
|
|
|
- :key="group.value"
|
|
|
- :label="group.label"
|
|
|
- :value="group.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 返工问题 -->
|
|
|
- <el-table-column label="返工问题" width="140">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-select v-model="row.issue" placeholder="请选择返工问题" clearable>
|
|
|
- <el-option
|
|
|
- v-for="issue in row.issueOptions"
|
|
|
- :key="issue.value"
|
|
|
- :label="issue.label"
|
|
|
- :value="issue.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 备注 -->
|
|
|
- <el-table-column label="备注" width="220">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-input v-model="row.remark" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- 操作列 -->
|
|
|
- <el-table-column label="操作" width="220" fixed="right">
|
|
|
- <template #default="{ row, $index }">
|
|
|
- <el-button type="primary" @click="copyRow($index)" style="font-size: 18px;">复制本条</el-button>
|
|
|
- <el-button type="danger" @click="removeRow($index)" style="font-size: 18px;">移除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-</el-form>
|
|
|
-
|
|
|
-<!-- 弹窗底部按钮 -->
|
|
|
-<template #footer>
|
|
|
- <div class="dialog-footer" style="width: 100%;">
|
|
|
- <el-button @click="closeDialog" style="width: 100px; height: 40px;">关 闭</el-button>
|
|
|
- <el-button type="primary" @click="enterDialog" style="width: 100px; height: 40px;">确 定</el-button>
|
|
|
+ <h2>3D 预览</h2>
|
|
|
+ <div ref="threeCanvas" style="width: 400px; height: 400px;"></div>
|
|
|
+
|
|
|
+ <!-- el-image 用于展示图片 -->
|
|
|
+ <el-image
|
|
|
+ :src="formatImageUrl(newImageUrl)"
|
|
|
+ fit="contain"
|
|
|
+ style="width: 200px; height: 200px; display: block; margin-top: 10px;"
|
|
|
+ :preview-src-list="[formatImageUrl(newImageUrl)]"
|
|
|
+ :initial-index="0"
|
|
|
+ @load="handleImageLoad"
|
|
|
+ ref="imgRefEl"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
-</el-dialog>
|
|
|
|
|
|
-<!-- 明细数据 -->
|
|
|
-<el-dialog v-model="OrderdetailsdialogFormVisible" :before-close="Orderdetails_bomcloseDialog" :title="'裁剪返工汇总单据详情'"
|
|
|
-width="100%" style="height: 100%;margin: 0%;padding: 0px 10px 0px 10px;" destroy-on-close>
|
|
|
- <el-button type="primary" @click="Orderdetails_closeDialog" style="width: 100px;height: 50px;margin-left: 10px;">关 闭</el-button>
|
|
|
- <div class="gva-table-box">
|
|
|
- <el-table ref="multipleTable"
|
|
|
- :row-style="{ height: '30px' }" :header-cell-style="{ padding: '0px' }"
|
|
|
- :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
|
|
|
- :show-overflow-tooltip="true" highlight-current-row="true"
|
|
|
- @row-click="detailsclicks" @row-dblclick="Doubleclickdetails"
|
|
|
- @selection-change="detailSelectionChange" style="width: 100%;height: 75vh" border
|
|
|
- :summary-method="getSummaries" tooltip-effect="dark" :data="Orderdetailsdata" row-key="ID" >
|
|
|
- <el-table-column align="left" label="单据编号" prop="单据编号" width="140" />
|
|
|
- <el-table-column align="left" label="订单编号" prop="订单编号" width="120" />
|
|
|
- <el-table-column align="left" label="生产款号" prop="生产款号" width="120" />
|
|
|
- <el-table-column align="left" label="款式" prop="款式" width="120" />
|
|
|
- <el-table-column align="left" label="面料分类" prop="面料分类" width="120" />
|
|
|
- <el-table-column align="left" label="面料名称" prop="面料名称" width="120" />
|
|
|
- <el-table-column align="left" label="颜色" prop="颜色" width="100" />
|
|
|
- <el-table-column align="left" label="尺码" prop="尺码" width="100" />
|
|
|
- <el-table-column align="left" label="返工数量" prop="数量" width="90" />
|
|
|
- <!-- <el-table-column align="left" label="计划用料" prop="计划用料" width="100" />
|
|
|
- <el-table-column align="left" label="实际用料" prop="实际用料" width="100" /> -->
|
|
|
- <el-table-column align="left" label="返工小组" prop="组别" width="120" />
|
|
|
- <el-table-column align="left" label="返工问题" prop="问题分类" width="120" />
|
|
|
- <el-table-column align="left" label="备注" prop="备注" width="120" />
|
|
|
- <el-table-column align="left" label="操作人员" prop="Sys_id" width="120" />
|
|
|
- <el-table-column align="left" label="创建时间" prop="Sys_rq" width="120" />
|
|
|
- </el-table>
|
|
|
- <div class="dialog-footer" style="text-align: left;margin-right: 60px;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</el-dialog>
|
|
|
-
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
<script setup>
|
|
|
-// 全量引入格式化工具 请按需保留
|
|
|
-import { ElMessage, ElMessageBox, LAST_KEYS } from 'element-plus';
|
|
|
-import * as XLSX from 'xlsx';
|
|
|
-import FileSaver from 'file-saver';
|
|
|
-import { Search, Refresh, Download } from '@element-plus/icons-vue'
|
|
|
-import { ref, reactive, nextTick, onMounted, onBeforeMount } from 'vue'
|
|
|
-import { Layout, LayoutContent, LayoutHeader, LayoutSider } from '@arco-design/web-vue'
|
|
|
-import {queryOrderSize,ApiAddDefective,ApiMouthlist,ApiSubPieceAnd,ApiSubPieceAndReworkList, Apiorder} from '@/api/mes/job'
|
|
|
-import { useUserStore } from '@/pinia/modules/user'
|
|
|
-// import { el } from 'element-plus/es/locale'
|
|
|
-//获取登录用户信息
|
|
|
-const userStore = useUserStore()
|
|
|
-const _username = ref('')
|
|
|
-_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
|
|
|
-console.log('获取用户名称',_username.value)
|
|
|
-//全局获取当前日期
|
|
|
-const today = new Date();
|
|
|
-const year = today.getFullYear();
|
|
|
-const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
|
|
|
-const day = String(today.getDate()).padStart(2, '0');
|
|
|
-const hours = String(today.getHours()).padStart(2, '0');
|
|
|
-const minutes = String(today.getMinutes()).padStart(2, '0');
|
|
|
-const seconds = String(today.getSeconds()).padStart(2, '0');
|
|
|
-const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
-const currentDates = `${year}-${month}-${day}`;
|
|
|
-
|
|
|
-// 侧边栏数据请求
|
|
|
-const treeData = reactive([]);
|
|
|
-
|
|
|
-const getTabdata = async () => {
|
|
|
-try {
|
|
|
- const response = await ApiMouthlist({ code: '返工' });
|
|
|
- if (response.code === 0) {
|
|
|
- // 清空数组
|
|
|
- treeData.splice(0, treeData.length);
|
|
|
-
|
|
|
- // 转换接口数据为树形结构
|
|
|
- const formattedData = Object.entries(response.data).map(([year, months]) => ({
|
|
|
- label: year,
|
|
|
- children: Object.entries(months).map(([month, days]) => ({
|
|
|
- label: month,
|
|
|
- children: days.map(day => ({
|
|
|
- label: day
|
|
|
- }))
|
|
|
- }))
|
|
|
- }));
|
|
|
-
|
|
|
- treeData.push(...formattedData);
|
|
|
-
|
|
|
- console.log('转换后的树形数据:', treeData); // 调试用
|
|
|
- } else {
|
|
|
- ElMessage.error(response.msg || '获取数据失败');
|
|
|
- }
|
|
|
-} catch (error) {
|
|
|
- console.error('请求错误:', error);
|
|
|
- ElMessage.error('请求失败，请稍后重试');
|
|
|
-}
|
|
|
-};
|
|
|
-
|
|
|
-getTabdata();
|
|
|
-
|
|
|
-
|
|
|
-const tableData = reactive([]);
|
|
|
-const exceltableData = reactive([]);
|
|
|
-const loading = ref(false);
|
|
|
-const noderq = ref('');
|
|
|
-const handleNodeClick = async (node) => {
|
|
|
- noderq.value = node.label;
|
|
|
- loading.value = true;
|
|
|
- // 取消所有节点的颜色
|
|
|
- const allNodes = document.querySelectorAll('.treecolor .el-tree-node');
|
|
|
- allNodes.forEach(node => {
|
|
|
- node.querySelector('.el-tree-node__label').style.color = '';
|
|
|
- });
|
|
|
- // 获取点击的节点 给当前点击的节点改变颜色【红色】
|
|
|
- const clickedNodeId = node['$treeNodeId'];
|
|
|
- const clickedNode = document.querySelector(`.treecolor .el-tree-node[data-key="${clickedNodeId}"]`);
|
|
|
- if (clickedNode) {
|
|
|
- clickedNode.querySelector('.el-tree-node__label').style.color = 'red';
|
|
|
- }
|
|
|
- try {
|
|
|
- //获取汇总数据
|
|
|
- const response = await ApiSubPieceAnd({
|
|
|
- Sys_rq: node.label,
|
|
|
- page: 1,
|
|
|
- limit: 50,
|
|
|
- code: '返工'
|
|
|
- });
|
|
|
- //获取详情数据
|
|
|
- const excelresponse = await ApiSubPieceAndReworkList({
|
|
|
- Sys_rq: node.label,
|
|
|
- page: 1,
|
|
|
- limit: 50,
|
|
|
- code: '返工'
|
|
|
- });
|
|
|
- if (response.code === 0 && response.data?.data) {
|
|
|
- // 清空并更新表格数据
|
|
|
- tableData.splice(0, tableData.length, ...response.data.data);
|
|
|
- } else {
|
|
|
- tableData.splice(0, tableData.length);
|
|
|
- }
|
|
|
- if (excelresponse.code === 0 && excelresponse.data?.data) {
|
|
|
- // 清空并更新Excel表格数据
|
|
|
- exceltableData.splice(0, exceltableData.length, ...excelresponse.data.data);
|
|
|
- } else {
|
|
|
- exceltableData.splice(0, exceltableData.length);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('加载数据失败:', error);
|
|
|
- ElMessage.error('数据加载失败');
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-const searchinfo = ref('');
|
|
|
-
|
|
|
-const onSearch = async () => { // 搜索按钮触发的事件处理函数，根据需要修改逻辑和接口调用
|
|
|
- const response = await ApiSubPieceAnd({
|
|
|
- search: searchinfo.value,
|
|
|
- Sys_rq:'',
|
|
|
- page: 1,
|
|
|
- limit: 50,
|
|
|
- code: '次片'
|
|
|
- });
|
|
|
- if (response.code === 0 && response.data?.data) {
|
|
|
- // 清空并更新表格数据
|
|
|
- tableData.splice(0, tableData.length, ...response.data.data);
|
|
|
- } else {
|
|
|
- ElMessage.warning(response.msg || '暂无数据');
|
|
|
- tableData.splice(0, tableData.length);
|
|
|
- }
|
|
|
-}
|
|
|
-//回车搜索
|
|
|
-const keydown_onSearch = async (event) => {
|
|
|
- if(event.keyCode === 13){
|
|
|
- onSearch();
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
-* 新增次品
|
|
|
-*/
|
|
|
-const dialogFormVisible = ref(false);
|
|
|
-const DefectiveformData = reactive({
|
|
|
-Sys_rq: '' ,
|
|
|
-});
|
|
|
-const rule = {}; // 表单验证规则（如果有）
|
|
|
-const GROUP_OPTIONS = [
|
|
|
-{ value: '车缝01组', label: '车缝01组' },
|
|
|
-{ value: '车缝02组', label: '车缝02组' },
|
|
|
-{ value: '车缝03组', label: '车缝03组' },
|
|
|
-{ value: '车缝04组', label: '车缝04组' },
|
|
|
-{ value: '车缝05组', label: '车缝05组' },
|
|
|
-{ value: '车缝06组', label: '车缝06组' },
|
|
|
-{ value: '车缝07组', label: '车缝07组' },
|
|
|
-{ value: '车缝08组', label: '车缝08组' },
|
|
|
-{ value: '车缝09组', label: '车缝09组' },
|
|
|
-{ value: '车缝10组', label: '车缝10组' },
|
|
|
-{ value: '车缝11组', label: '车缝11组' },
|
|
|
-{ value: '车缝12组', label: '车缝12组' },
|
|
|
-{ value: '大办组', label: '大办组' },
|
|
|
-{ value: '美英组', label: '美英组' },
|
|
|
-{ value: '小芬组', label: '小芬组' },
|
|
|
-];
|
|
|
-const SecondarytabeleData = reactive([
|
|
|
-{
|
|
|
- ddbh: '', // 订单编号
|
|
|
- material: '', // 面料分类
|
|
|
- colorOptions: [], // 颜色
|
|
|
- sizeOptions: [], // 尺码
|
|
|
- ks: '', // 款式
|
|
|
- defectiveQuantity: '', // 返工数量
|
|
|
- issueOptions: [], // 返工问题（下拉框选项）
|
|
|
- remark: '', // 备注
|
|
|
- group: '车缝01组', // 报工小组
|
|
|
-},
|
|
|
-]);
|
|
|
-// 定义初始行数据
|
|
|
-const initialRowData = () => ({
|
|
|
-ddbh: '', // 订单编号
|
|
|
-material: '', // 面料分类
|
|
|
-colorOptions: [], // 颜色
|
|
|
-sizeOptions: [], // 尺码
|
|
|
-ks: '', // 款式
|
|
|
-defectiveQuantity: '', // 返工数量
|
|
|
-issueOptions: [], // 返工问题（下拉框选项）
|
|
|
-remark: '', // 备注
|
|
|
-group: '车缝01组', // 报工小组
|
|
|
-});
|
|
|
-// 方法：新增一行
|
|
|
-const addRow = () => {
|
|
|
-SecondarytabeleData.push({
|
|
|
- ddbh: '', // 订单编号
|
|
|
- material: '', // 面料分类
|
|
|
- colorOptions: [], // 颜色
|
|
|
- sizeOptions: [], // 尺码
|
|
|
- ks: '', // 款式
|
|
|
- defectiveQuantity: '', // 返工数量
|
|
|
- issueOptions: [], // 返工问题（下拉框选项）
|
|
|
- remark: '', // 备注
|
|
|
- group: '车缝01组', // 报工小组
|
|
|
-});
|
|
|
-};
|
|
|
-
|
|
|
-const type = ref('create'); // 弹窗类型，默认为 'create'
|
|
|
-//新增按钮
|
|
|
-const onAdd = async () => {
|
|
|
-type.value = 'create'
|
|
|
-dialogFormVisible.value = true
|
|
|
-DefectiveformData.Sys_rq = currentDates
|
|
|
-}
|
|
|
-
|
|
|
-// 键盘事件
|
|
|
-const ent1 = (event, index) => {
|
|
|
-// 处理键盘事件
|
|
|
-console.log(event, index);
|
|
|
-};
|
|
|
-
|
|
|
-const searchOrder = async (query, index) => {
|
|
|
- if (!query.trim()) {
|
|
|
- SecondarytabeleData[index].ddbhOptions = [];
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- const response = await Apiorder({ search: query }); // 根据实际接口调整参数
|
|
|
- if (response.code === 0) {
|
|
|
- SecondarytabeleData[index].ddbhOptions = response.data.list.map(item => ({
|
|
|
- value: `${item.订单编号}---${item.生产款号}`, // 格式与之前一致
|
|
|
- label: `${item.订单编号}---${item.生产款号}`,
|
|
|
- rawData: item, // 保存原始数据，供后续使用
|
|
|
- }));
|
|
|
- } else {
|
|
|
- ElMessage.error(response.msg || '搜索失败');
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error('搜索接口异常');
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const handleOrderSelect = (value, index) => {
|
|
|
- if (!value) return;
|
|
|
- const row = SecondarytabeleData[index];
|
|
|
- const selectedOption = row.ddbhOptions.find(opt => opt.value === value);
|
|
|
- if (selectedOption) {
|
|
|
- // 调用原来的 getGxMcsubmit 逻辑（需稍作调整）
|
|
|
- getGxMcsubmit(selectedOption.rawData, index);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 工单编号|款号回车事件
|
|
|
-const getGxMcsubmit = async (event, index) => {
|
|
|
-const row = SecondarytabeleData[index]; // 获取当前行数据
|
|
|
-const ddbh = row.ddbh.split('---')[0]; // 获取输入的工单编号
|
|
|
+import { ref, onMounted, nextTick } from 'vue'
|
|
|
+import * as THREE from 'three'
|
|
|
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
|
|
|
|
|
-if (!ddbh) {
|
|
|
- ElMessage.warning('请输入工单编号');
|
|
|
- return;
|
|
|
+const newImageUrl = '/img/zgm.jpg'
|
|
|
+const formatImageUrl = (path) => {
|
|
|
+ if (!path) return ''
|
|
|
+ const base = 'http://20.0.16.128:9093'
|
|
|
+ return `${base}/${path.replace(/^public\//, '')}`
|
|
|
}
|
|
|
|
|
|
-try {
|
|
|
- // 调用接口获取数据
|
|
|
- const response = await queryOrderSize({ 订单编号: ddbh });
|
|
|
+const threeCanvas = ref(null)
|
|
|
+const imgRefEl = ref(null)
|
|
|
|
|
|
- if (response.code === 0) {
|
|
|
- const { list, fetchCategory, colorremark, FabricData, 面料统计,size } = response.data;
|
|
|
+let scene, camera, renderer, controls, box = null
|
|
|
|
|
|
- // 更新当前行的数据
|
|
|
- row.ddbh = `${list.订单编号}---${list.生产款号}`;
|
|
|
- row.ks = list.款式;
|
|
|
- // 更新下拉框选项
|
|
|
- row.colorOptions = colorremark.map(item => ({ value: item, label: item })); // 颜色选项
|
|
|
- row.sizeOptions = size.map(item => ({ value: item, label: item })); // 尺码选项
|
|
|
- row.issueOptions = fetchCategory.返工.map(item => ({ value: item, label: item })); // 返工问题选项
|
|
|
- row.materialOptions = FabricData.map(item => ({ value: item, label: item }));
|
|
|
- row.groupOptions = GROUP_OPTIONS;// 报工小组选项
|
|
|
- // 保存面料统计数据
|
|
|
- row.fabricStats = 面料统计;
|
|
|
-
|
|
|
- ElMessage.success({
|
|
|
- message: '数据加载成功',
|
|
|
- duration: 2000,
|
|
|
- });
|
|
|
- } else {
|
|
|
- ElMessage.error(response.msg || '接口返回错误');
|
|
|
- }
|
|
|
-} catch (error) {
|
|
|
- ElMessage.error('接口调用失败，请稍后重试');
|
|
|
-}
|
|
|
-};
|
|
|
+// 生命周期钩子
|
|
|
+onMounted(() => {
|
|
|
+ initScene()
|
|
|
+ createBox()
|
|
|
+ animate()
|
|
|
+})
|
|
|
|
|
|
-// 关闭弹窗
|
|
|
-const closeDialog = () => {
|
|
|
-SecondarytabeleData.splice(0, SecondarytabeleData.length, initialRowData());
|
|
|
-dialogFormVisible.value = false;
|
|
|
-};
|
|
|
+// 初始化 Three.js 场景
|
|
|
+const initScene = () => {
|
|
|
+ scene = new THREE.Scene()
|
|
|
+ scene.background = null
|
|
|
|
|
|
-// 提交确认
|
|
|
-const enterDialog = async () => {
|
|
|
-console.log('确认提交', SecondarytabeleData);
|
|
|
+ // 创建一个适合查看立方体的相机
|
|
|
+ camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
|
|
|
+ camera.position.set(0, 0, 5)
|
|
|
|
|
|
-// 获取面料统计数据
|
|
|
-const fabricStats = SecondarytabeleData[0]?.fabricStats || [];
|
|
|
-console.log('fabricStats', fabricStats);
|
|
|
+ // 创建渲染器
|
|
|
+ renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
|
|
+ renderer.setSize(400, 400)
|
|
|
+ threeCanvas.value.appendChild(renderer.domElement)
|
|
|
|
|
|
-const params = SecondarytabeleData.map(item => {
|
|
|
- // 查找匹配的面料数据
|
|
|
- console.log('物料名称', item['material'].split('-')[1]);
|
|
|
- console.log('颜色', item.color);
|
|
|
- const matchedFabric = fabricStats.find(f =>
|
|
|
- f.颜色 === item.color && f.物料名称 === item['material'].split(' - ')[1]
|
|
|
- );
|
|
|
- console.log('匹配统计数据', matchedFabric);
|
|
|
- return {
|
|
|
- 订单编号: item['ddbh'].split('---')[0],
|
|
|
- 生产款号: item['ddbh'].split('---')[1],
|
|
|
- 款式: item['ks'],
|
|
|
- 颜色: item['color'],
|
|
|
- 数量: item['defectiveQuantity'],
|
|
|
- 备注: item['remark'],
|
|
|
- Sys_id: userStore.userInfo.nickName,
|
|
|
- 组别: item['group'],
|
|
|
- Sys_rq: currentDates,
|
|
|
- sczl_rq: currentDate,
|
|
|
- 状态: '返工',
|
|
|
- 问题分类: item['issue'],
|
|
|
- 尺码: item['size'],
|
|
|
- 实际用料: matchedFabric ? matchedFabric.实际用料 : '',
|
|
|
- 计划用料: matchedFabric ? matchedFabric.计划用料 : '',
|
|
|
- 物料名称: item['material'],
|
|
|
- };
|
|
|
-});
|
|
|
+ // 控制器
|
|
|
+ controls = new OrbitControls(camera, renderer.domElement)
|
|
|
+ controls.enableDamping = true
|
|
|
|
|
|
-console.log('提交参数', params);
|
|
|
-try {
|
|
|
- // 在这里执行提交逻辑
|
|
|
- const ApiAddDefectiveRes = await ApiAddDefective(params);
|
|
|
- if (ApiAddDefectiveRes.code === 0) {
|
|
|
- ElMessage.success('提交成功');
|
|
|
- getTabdata();//刷新左侧数据
|
|
|
- handleNodeClick(noderq.value);//刷新右侧数据
|
|
|
- closeDialog(); // 关闭弹窗
|
|
|
- } else {
|
|
|
- ElMessage.error(ApiAddDefectiveRes.msg || '接口返回错误');
|
|
|
- }
|
|
|
-} catch (error) {
|
|
|
- ElMessage.error('提交失败，请稍后重试');
|
|
|
-}
|
|
|
-};
|
|
|
+ // 光源配置
|
|
|
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // 环境光，弱一点
|
|
|
+ scene.add(ambientLight)
|
|
|
|
|
|
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1) // 方向光，亮一点
|
|
|
+ directionalLight.position.set(5, 5, 5) // 定义光源位置
|
|
|
+ scene.add(directionalLight)
|
|
|
|
|
|
-// 复制行
|
|
|
-const copyRow = (index) => {
|
|
|
-const copiedRow = { ...SecondarytabeleData[index] };
|
|
|
-SecondarytabeleData.splice(index + 1, 0, copiedRow);
|
|
|
-};
|
|
|
-// 移除行
|
|
|
-const removeRow = (index) => {
|
|
|
-SecondarytabeleData.splice(index, 1);
|
|
|
+ const pointLight = new THREE.PointLight(0xffffff, 1, 100) // 点光源
|
|
|
+ pointLight.position.set(2, 2, 2)
|
|
|
+ scene.add(pointLight)
|
|
|
}
|
|
|
|
|
|
-const OrderdetailsdialogFormVisible = ref(false);
|
|
|
-const Orderdetailsdata = reactive([]);
|
|
|
-//查看单号详情
|
|
|
-const Order_detailsRow = async (row, index) => {
|
|
|
-console.log('查看详情', row.Sys_rq, index);
|
|
|
-
|
|
|
-OrderdetailsdialogFormVisible.value = true
|
|
|
-const response = await ApiSubPieceAndReworkList({
|
|
|
- search: row.单据编号,
|
|
|
- Sys_rq: row.Sys_rq,
|
|
|
- page: 1,
|
|
|
- limit: 50,
|
|
|
- code: '返工'
|
|
|
- });
|
|
|
-
|
|
|
- if (response.code === 0 && response.data?.data) {
|
|
|
- // 清空并更新表格数据
|
|
|
- Orderdetailsdata.splice(0, Orderdetailsdata.length, ...response.data.data);
|
|
|
- } else {
|
|
|
- ElMessage.warning(response.msg || '暂无数据');
|
|
|
- Orderdetailsdata.splice(0, Orderdetailsdata.length);
|
|
|
- }
|
|
|
+// 创建立方体
|
|
|
+const createBox = () => {
|
|
|
+ const geometry = new THREE.BoxGeometry(2.2, 3.5, 0.8)
|
|
|
+ const materials = new Array(6).fill(new THREE.MeshStandardMaterial({ color: 0xcccccc }))
|
|
|
+ box = new THREE.Mesh(geometry, materials)
|
|
|
+ scene.add(box)
|
|
|
}
|
|
|
|
|
|
-//关闭
|
|
|
-const Orderdetails_closeDialog = () => {
|
|
|
-OrderdetailsdialogFormVisible.value = false;
|
|
|
+// 图片加载完成后作为纹理贴图
|
|
|
+const handleImageLoad = async () => {
|
|
|
+ await nextTick() // 确保 el-image 渲染完成
|
|
|
|
|
|
-}
|
|
|
-
|
|
|
-//导出
|
|
|
-const exportExcel = () => {
|
|
|
-const el = document.getElementById('table');
|
|
|
-const filename = '导出返工汇总EXCEL.xlsx';
|
|
|
-
|
|
|
-// 获取表格数据
|
|
|
-const ws = XLSX.utils.table_to_sheet(el);
|
|
|
-
|
|
|
-// 找出需要保留为数字的列（假设'sl'列是数字）
|
|
|
-const numCols = ['数量']; // 添加其他需要保留数字的列名
|
|
|
-
|
|
|
-// 遍历工作表数据，将指定列转换为数字
|
|
|
-for (const cell in ws) {
|
|
|
- if (cell[0] === '!') continue; // 跳过特殊属性
|
|
|
-
|
|
|
- const colName = cell.replace(/[0-9]/g, ''); // 获取列字母
|
|
|
- const header = ws[colName + '1']; // 获取表头
|
|
|
-
|
|
|
- if (header && numCols.includes(header.v)) {
|
|
|
- // 如果是数字列，尝试转换为数字
|
|
|
- const value = ws[cell].v;
|
|
|
- if (!isNaN(value) && value !== '') {
|
|
|
- ws[cell].t = 'n'; // 设置为数字类型
|
|
|
- ws[cell].v = Number(value); // 转换为数字
|
|
|
- }
|
|
|
+ // 访问真实 <img> DOM（el-image 内部包裹的）
|
|
|
+ const img = imgRefEl.value?.$el?.querySelector('img')
|
|
|
+ if (!img) {
|
|
|
+ console.warn('未找到图片元素')
|
|
|
+ return
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-// 创建工作簿并导出
|
|
|
-const wb = XLSX.utils.book_new();
|
|
|
-XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
|
|
|
+ const texture = new THREE.Texture(img)
|
|
|
+ texture.needsUpdate = true
|
|
|
|
|
|
-try {
|
|
|
- XLSX.writeFile(wb, filename);
|
|
|
-} catch (e) {
|
|
|
- console.log(e);
|
|
|
-}
|
|
|
-}
|
|
|
-
|
|
|
-const exportExcel2 = () => {
|
|
|
-const filename = '服装半成品返工报工页面表.xlsx';
|
|
|
-console.log('导出数据', exceltableData);
|
|
|
-
|
|
|
-// 获取 el-table 的列配置
|
|
|
-const columns = [
|
|
|
- { label: "单据编号", prop: "单据编号" },
|
|
|
- { label: "订单编号", prop: "订单编号" },
|
|
|
- { label: "生产款号", prop: "生产款号" },
|
|
|
- { label: "款式", prop: "款式" },
|
|
|
- // { label: "面料分类", prop: "面料分类" },
|
|
|
- // { label: "面料名称", prop: "面料名称" },
|
|
|
- { label: "颜色", prop: "颜色" },
|
|
|
- { label: "尺码", prop: "尺码" },
|
|
|
- { label: "返工数量", prop: "数量" },
|
|
|
- { label: "返工小组", prop: "组别" },
|
|
|
- // { label: "计划用料", prop: "计划用料" },
|
|
|
- // { label: "实际用料", prop: "实际用料" },
|
|
|
- { label: "返工问题", prop: "问题分类" },
|
|
|
- { label: "备注", prop: "备注" },
|
|
|
- // { label: "操作人员", prop: "Sys_id" },
|
|
|
- // { label: "创建时间", prop: "Sys_rq" }
|
|
|
-];
|
|
|
-
|
|
|
-// 创建表头映射对象
|
|
|
-const headerMap = {};
|
|
|
-columns.forEach(col => {
|
|
|
- headerMap[col.prop] = col.label;
|
|
|
-});
|
|
|
-
|
|
|
-// 重新映射数据，确保顺序和表头一致
|
|
|
-const remappedData = exceltableData.map(item => {
|
|
|
- const newItem = {};
|
|
|
- columns.forEach(col => {
|
|
|
- newItem[col.label] = item[col.prop];
|
|
|
- });
|
|
|
- return newItem;
|
|
|
-});
|
|
|
-
|
|
|
-// 获取表格数据
|
|
|
-const ws = XLSX.utils.json_to_sheet(remappedData);
|
|
|
-
|
|
|
-// 找出需要保留为数字的列
|
|
|
-const numCols = ['数量']; // 添加其他需要保留数字的列名
|
|
|
-
|
|
|
-// 遍历工作表数据，将指定列转换为数字
|
|
|
-for (const cell in ws) {
|
|
|
- if (cell[0] === '!') continue; // 跳过特殊属性
|
|
|
-
|
|
|
- const colName = cell.replace(/[0-9]/g, ''); // 获取列字母
|
|
|
- const header = ws[colName + '1']; // 获取表头
|
|
|
-
|
|
|
- if (header && numCols.some(numCol => headerMap[numCol] === header.v)) {
|
|
|
- // 如果是数字列，尝试转换为数字
|
|
|
- const value = ws[cell].v;
|
|
|
- if (!isNaN(value) && value !== '') {
|
|
|
- ws[cell].t = 'n'; // 设置为数字类型
|
|
|
- ws[cell].v = Number(value); // 转换为数字
|
|
|
- }
|
|
|
+ if (box) {
|
|
|
+ box.material.forEach((mat) => {
|
|
|
+ mat.map = texture
|
|
|
+ mat.needsUpdate = true
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 创建工作簿并导出
|
|
|
-const wb = XLSX.utils.book_new();
|
|
|
-XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
|
|
|
-
|
|
|
-try {
|
|
|
- XLSX.writeFile(wb, filename);
|
|
|
-} catch (e) {
|
|
|
- console.log(e);
|
|
|
-}
|
|
|
+// 动画循环
|
|
|
+const animate = () => {
|
|
|
+ requestAnimationFrame(animate)
|
|
|
+ controls.update()
|
|
|
+ renderer.render(scene, camera)
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-.JKWTree-container {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-
|
|
|
-.JKWTree-tree {
|
|
|
- width: 300px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10px;
|
|
|
- margin-right: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.JKWTree-tree h3 {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 700;
|
|
|
- margin: 10px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.JKWTree-content {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-/* 选中某行时的背景色*/
|
|
|
-.el-table__body tr.current-row>td {
|
|
|
- background: #ff80ff !important;
|
|
|
- /* 背景颜色 */
|
|
|
-}
|
|
|
-</style>
|
|
|
<style scoped>
|
|
|
-:deep(.el-table td .cell) {
|
|
|
- line-height: 20px !important;
|
|
|
+h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-:deep(.el-tabs__header){
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-.search{
|
|
|
- margin-left: 0px !important;
|
|
|
- margin-right: 10px !important;
|
|
|
-}
|
|
|
-.bt{
|
|
|
- margin-left: 2px !important;
|
|
|
- padding: 3px !important;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-.el-tabs__header{
|
|
|
- margin: 0px !important;
|
|
|
-}
|
|
|
-.gva-table-box{
|
|
|
- padding: 0px !important;
|
|
|
-}
|
|
|
-.mab{
|
|
|
- margin-bottom: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</style>
|
