mes-sdai-admin-backend-ui/src/view/performance/QualityAssessment/SemiFinishedRework.vue

<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="120" />
              <el-table-column align="left"  label="返工数量" prop="数量" width="100" />
              <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="120" />
              <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="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%; 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>
  </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="80" />
              <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 keydown_onSearch = async (event) => {
if(event.keyCode === 13){
  const response = await ApiSubPieceAnd({
      search: searchinfo.value, 
      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 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]; // 获取输入的工单编号

if (!ddbh) {
  ElMessage.warning('请输入工单编号');
  return;
}

try {
  // 调用接口获取数据
  const response = await queryOrderSize({ 订单编号: ddbh });

  if (response.code === 0) {
    const { list, fetchCategory, colorremark, FabricData, 面料统计,size } = response.data;

    // 更新当前行的数据
    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('接口调用失败，请稍后重试');
}
};

// 关闭弹窗
const closeDialog = () => {
SecondarytabeleData.splice(0, SecondarytabeleData.length, initialRowData());
dialogFormVisible.value = false;
};

// 提交确认
const enterDialog = async () => {
console.log('确认提交', SecondarytabeleData);

// 获取面料统计数据
const fabricStats = SecondarytabeleData[0]?.fabricStats || [];
console.log('fabricStats', fabricStats);

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'],
  };
});

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 copyRow = (index) => {
const copiedRow = { ...SecondarytabeleData[index] };
SecondarytabeleData.splice(index + 1, 0, copiedRow);
};
// 移除行
const removeRow = (index) => {
SecondarytabeleData.splice(index, 1);	
}

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 Orderdetails_closeDialog = () => {
OrderdetailsdialogFormVisible.value = false;

}

//导出
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); // 转换为数字
    }
  }
}

// 创建工作簿并导出
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 exportExcel2 = () => {
const filename = '导出返工明细EXCEL.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: "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); // 转换为数字
    }
  }
}

// 创建工作簿并导出
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

try {
  XLSX.writeFile(wb, filename);
} catch (e) {
  console.log(e);
}
}
</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;
}
: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>