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

<template>
    <div>
      <layout>
        <layout-header>
          <div class="">
            <!--          按钮部分-->
            <el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" >
              <el-form-item>
                <!-- <el-input v-model="searchInfo" placeholder="搜索工单编号" clearable style="width: 200px;margin: 5px"></el-input> -->
                <el-input v-model="searchInfo"  placeholder="输入订单编号" style="width: 180px;" @keyup.enter="onSubmit()"></el-input>
                <el-button type="primary" icon="search" @click="onSubmit" title="查询"  >查询</el-button>
                <el-button type="primary" class="bt" icon="download" @click="hzToExcel" >订单成品导出</el-button>
                <!-- <el-button type="primary" class="bt" icon="download" @click="mxToExcel" >导出到Excel(明细)</el-button> -->
              </el-form-item>
            </el-form>
  
        
  
          </div>
        </layout-header>
  
        <layout>
          <!--    左侧树侧形结构-->
          <layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;">
            <div class="JKWTree-tree" style="height: 200px">
              <h3>产品返工次片合格率汇总</h3>
              <el-tree :data="treeData"  :props="defaultProps"  class="treecolor" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
              </el-tree>
            </div>
          </layout-sider>
  
          <!-- 右侧区域 -->
          <layout-content >
          <!-- <el-main> -->
            <div class="gva-table-box">
              <!-- 表格数据 -->
              <el-table ref="multipleTable" style="width: 100%;height: 33vh" tooltip-effect="dark"
                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                        :data="hztableData"  border row-key="ID"
                        size="small"
                        :cell-class-name="gxbgCellClass"
                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                        @row-click="tableRowClick" :show-overflow-tooltip="true"
                        @selection-change="handleSelectionChange">
               <el-table-column  sortable align="center" label="订单编号" prop="订单编号"  width="120" />
               <el-table-column  sortable align="center" label="生产款号" prop="生产款号"  width="170" />
               <el-table-column  sortable align="center" label="款式" prop="款式"  width="120" />
               <el-table-column  sortable align="center" label="制单数量" prop="订单数量"  width="120" />
               <!-- <el-table-column   align="center" label="实裁数量" prop="实裁数量"  width="110" /> -->
               <el-table-column   align="center" label="本月总检完工数量" prop="入仓数量"  width="150" />
               <el-table-column   align="center" label="累计总检完工数量" prop="累计入仓数量"  width="150" />
               <el-table-column   align="center" label="裁剪总产量" prop="裁剪总产量"  width="120" />
               <el-table-column  sortable align="center" label="实际合格率" prop="裁剪合格率"  width="120" />
               <!-- <el-table-column   align="center" label="车缝总产量" prop="车缝总产量"  width="200" />
               <el-table-column   align="center" label="车缝合格率" prop="车缝合格率"  width="200" /> -->
               <el-table-column   align="center" label="返工总数" prop="返工总数"  width="120" />
               <el-table-column   align="center" label="次片总数" prop="次片总数"  width="120" />


              </el-table>
  
              <!-- 分页 -->
              <div class="gva-pagination">
                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
              </div>
            </div>


            <div class="gva-table-box">
              <!-- 表格数据 -->
              <el-table ref="multipleTable" style="width: 100%;height: 45vh" tooltip-effect="dark"
                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                        :data="mxtableData"  border row-key="ID"
                        size="small"
                        :cell-class-name="gxbgCellClass"
                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                        :show-overflow-tooltip="true"
                        @selection-change="handleSelectionChange">
               <el-table-column  sortable align="center" label="子订单编号" prop="子订单编号"  width="160" />
               <el-table-column  sortable align="center" label="PO号" prop="生产款号"  width="200" />
               <el-table-column  sortable align="center" label="颜色" prop="颜色"  width="160" />
               <el-table-column  sortable align="center" label="颜色备注" prop="颜色备注"  width="200" />
               <el-table-column  sortable align="center" label="制单数量" prop="zdtotal"  width="120" />
               <el-table-column   align="center" label="本月总检完工数量" prop="入仓数量"  width="150" />
               <el-table-column   align="center" label="累计总检完工数量" prop="累计入仓数量"  width="150" />
               <el-table-column   align="center" label="裁剪数量" prop="裁剪数量"  width="100" />
               <el-table-column  sortable align="center" label="实际合格率" prop="实际合格率"  width="120" />
               <!-- <el-table-column  sortable align="center" label="车缝数量" prop="车缝数量"  width="100" />
               <el-table-column  sortable align="center" label="车缝合格率" prop="车缝合格率"  width="120" /> -->
              </el-table>
  
              <!-- 分页 -->
              <div class="gva-pagination">
                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
              </div>
            </div>
  
            <el-dialog v-model="onhzexcel"  title="汇总数据导出" destroy-on-close style="height: 30%;width: 20%;">
  <el-form-item label="选择年月" label-width="100px">
    <el-date-picker
			    v-model="hzrq"
			    type="month"
			    placeholder="选择年月"
			    :default-value="new Date()"
          @change="hzonchange_data"
			    style="width: 200px;" 
			  />
  </el-form-item>

        <template #footer>
		    <div class="dialog-footer" style="text-align: right;">
		      <el-button @click="hzcloseDialog">取消</el-button>
		      <el-button type="primary" @click="hzonDialog">确定</el-button>
		    </div>
		  </template>
            </el-dialog>

            <el-dialog v-model="onmxexcel"  title="明细数据导出" destroy-on-close style="height: 30%;width: 20%;">
  <el-form-item label="选择年月" label-width="100px">
    <el-date-picker
			    v-model="mxrq"
			    type="month"
			    placeholder="选择年月"
			    :default-value="new Date()"
          @change="mxonchange_data"
			    style="width: 200px;" 
			  />
  </el-form-item>

        <template #footer>
		    <div class="dialog-footer" style="text-align: right;">
		      <el-button @click="mxcloseDialog">取消</el-button>
		      <el-button type="primary" @click="mxonDialog">确定</el-button>
		    </div>
		  </template>
            </el-dialog>

          <!-- </el-main> -->
        </layout-content>
        </layout>
      </layout>
    </div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
  import {ref, reactive} from 'vue'
  import { exportExcelFile } from '@/utils/excel'
  import {ElMessage} from "element-plus";
  import { GetWfpList,GetWfpDataLeft,GetSubOrderStats} from '@/api/mes/job'
  defineOptions({name: 'Company'})
  // =========== 获取左侧树侧形结构 ===========
  const treeData = ref('')
// 获取树形数据
const getTree = async () => {
  try {
    const response = await GetWfpDataLeft() 
    const data = response.data 
    
    // 获取所有年月键并排序（降序，最近的在上方）
    const sortedYearMonths = Object.keys(data).sort((a, b) => {
      const yearMonthA = parseInt(a);
      const yearMonthB = parseInt(b);
      // 降序排列（最近的在上方）
      return yearMonthB - yearMonthA;
    });
    
    // 转换数据为el-tree需要的格式
    treeData.value = sortedYearMonths.map(yearMonth => {
      return {
        label: `${yearMonth}`,
        children: data[yearMonth].map(customer => {
          return {
            label: `${customer.客户编号} (${customer.total}条)`,
            yearMonth: yearMonth,
            customerCode: customer.客户编号,
            total: customer.total,
          }
        })
      }
    })
  } catch (error) {
    ElMessage.error('获取数据失败')
    console.error('获取树形数据失败:', error)
  }
}
getTree()
  

const hztableData = ref([])
const _noderq = ref('')
const _nodecode = ref('')
const handleNodeClick = async (node) => {
	
	// 取消所有节点的颜色
	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';
	}
	
    _noderq.value = node.yearMonth
    _nodecode.value = node.customerCode
    console.log('点击节点:', node)
  if (!node.children) {
    const res = await GetWfpList({sys_rq: node.yearMonth,customer: node.customerCode,})
    console.log('获取数据:', res)
    if(res.code === 0){
    hztableData.value = res.data.result
  }
  }

}

const mxtableData = ref([])
const tableRowClick = async(row) => {
    const res = await GetSubOrderStats({sys_rq: _noderq.value,customer:  _nodecode.value,order:row.订单编号})
    console.log('获取数据:', res)  
    if(res.code === 0){
    mxtableData.value = res.data.result
  }
}

const searchInfo = ref('')
const onSubmit = async () => {
  if (!searchInfo.value) {
    ElMessage.warning('请输入订单编号');
    return;
  }else{
    const res = await GetWfpList({search:searchInfo.value})
    console.log('获取数据:', res)  
    if(res.code === 0){
    hztableData.value = res.data.result
  }
  }
}


// 通用的导出Excel函数
const exportToExcel = (data, filename = '导出数据.xlsx', sheetName = 'Sheet1') => {
  try {
    // 创建工作簿和工作表
    const wb = XLSX.utils.book_new();
    
    // 如果data是DOM元素（表格）
    if (typeof data === 'object' && data.nodeType === 1) {
      const worksheet = XLSX.utils.table_to_sheet(data, { raw: true });
      convertColumnsToNumber(worksheet);
      XLSX.utils.book_append_sheet(wb, worksheet, sheetName);
    } 
    // 如果data是数组（接口数据）
    else if (Array.isArray(data)) {
      const worksheet = XLSX.utils.json_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, worksheet, sheetName);
    } 
    // 如果data已经是worksheet对象
    else if (data['!ref']) {
      XLSX.utils.book_append_sheet(wb, data, sheetName);
    } else {
      throw new Error('不支持的导出数据类型');
    }
    
    // 导出文件
    XLSX.writeFile(wb, filename);
    return true;
  } catch (error) {
    console.error('导出Excel失败:', error);
    ElMessage.error('导出失败: ' + error.message);
    return false;
  }
};

// 列转换为数字的通用函数
const convertColumnsToNumber = (worksheet, startCol = 2) => {
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  for (let col = startCol; col <= range.e.c; col++) {
    for (let row = range.s.r + 1; row <= range.e.r; row++) {
      const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
      if (worksheet[cellAddress]) {
        const cellValue = worksheet[cellAddress].v;
        const numValue = Number(cellValue);
        
        if (!isNaN(numValue) && cellValue !== '') {
          worksheet[cellAddress].t = 'n';
          worksheet[cellAddress].v = numValue;
          worksheet[cellAddress].z = '0';
        }
      }
    }
  }
};


  
const onhzexcel = ref(false)
const onmxexcel = ref(false)
const mxrq = ref('')
const hzrq = ref('')
const hzToExcel = async=> {
  onhzexcel.value = true
}
  const hzcloseDialog = () => {
    onhzexcel.value = false
  }
  const hzonchange_data = (val) => {
  if (val) {
    // 将日期对象转换为本地时间的年月格式
    const year = val.getFullYear()
    const month = (val.getMonth() + 1).toString().padStart(2, '0')
    hzrq.value = `${year}${month}`
  } else {
    hzrq.value = ''
  }
}

const hzonDialog = async() => {
  if(!hzrq.value){
    ElMessage.error('请选择年月')
    return
  }
  
  const res = await GetWfpList({sys_rq: hzrq.value})
  console.log('获取数据:', res)  
  
  if(res.code === 0){
    // 直接使用接口返回的数据导出
    const success = exportToExcel(
      res.data.result, 
      `生产数据汇总_${hzrq.value}.xlsx`,
      '生产汇总'
    );
    
    if(success) {
      ElMessage.success('导出成功');
    }
  } else {
    ElMessage.error(res.msg || '获取数据失败');
  }
}

const mxToExcel = async=> {
  onmxexcel.value = true
}
  const mxcloseDialog = () => {
    onmxexcel.value = false
  }
  const mxonchange_data = (val) => {
  if (val) {
    // 将日期对象转换为本地时间的年月格式
    const year = val.getFullYear()
    const month = (val.getMonth() + 1).toString().padStart(2, '0')
    mxrq.value = `${year}${month}`
  } else {
    mxrq.value = ''
  }
}

const mxonDialog = async() => {
  if(!mxrq.value){
    ElMessage.error('请选择年月')
    return
  }
  
  const res = await GetSubOrderStats({sys_rq: mxrq.value})
  console.log('获取数据:', res)  
  
  if(res.code === 0){
    // 直接使用接口返回的数据导出
    const success = exportToExcel(
      res.data.result, 
      `生产数据汇总_${hzrq.value}.xlsx`,
      '生产汇总'
    );
    
    if(success) {
      ElMessage.success('导出成功');
    }
  } else {
    ElMessage.error(res.msg || '获取数据失败');
  }
}
  
  
  </script>
  
  <style scoped>
  .form-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .form-column {
    /*flex: 1;*/
    margin-right: 15px; /* 调整列之间的间距 */
  }
  
  /* 左侧输入框宽度调整 */
  .form-column .el-form-item .el-input {
    width: 150px; /* 调整左侧输入框的宽度 */
  }
  
  :deep(.hui-plan-usage-lows  div) {
    color: #8c939d !important;
  }
  :deep(.lan-plan-usage-lows  div) {
    color: blue !important;
    font-weight: bold;
  }
  

  /* 媒体查询，根据需要调整断点 */
  @media screen and (max-width: 768px) {
    .form-column {
      flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
      margin-right: 0;
    }
  }
  /*:deep(.el-table td .cell) {*/
  /*  line-height: 30px !important;*/
  /*}*/
  .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;
  }

  
  /* 选中某行时的背景色 */
  :deep(.el-table__body tr.current-row) > td {
    background: #ff80ff !important;
  }
  </style>
  <style scoped>
  :deep(.el-table td .cell) {
    line-height: 20px !important;
  }
  :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>