mes-sdai-admin-backend-ui/src/view/performance/QualityAssessment/cropdefective.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="120">
        <template #default="{ row }">
          <el-input v-model="row.ks" />
        </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="140">
        <template #default="{ row }">
          <el-select v-model="row.issue" placeholder="请选择次片问题">
            <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="150">
        <template #default="{ row }">
          <el-select v-model="row.group" placeholder="请选择报工小组" >
            <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="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="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="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: '' ,
  bgxz: '裁剪01z组'
});
const rule = {}; // 表单验证规则（如果有）
const GROUP_OPTIONS = [
  { value: '裁剪01组', label: '裁剪01组' },
  { value: '裁剪02组', label: '裁剪02组' },
  { value: '裁剪03组', label: '裁剪03组' },
  { value: '裁剪04组', label: '裁剪04组' }
];
const SecondarytabeleData = reactive([
  { 
    ddbh: '',       // 订单编号
    material: '',   // 面料分类
    colorOptions: [],      // 颜色
    ks: '',         // 款式
    defectiveQuantity: '', // 次片数量
    issueOptions: [], // 次片问题（下拉框选项）
    remark: '',     // 备注
    group: '裁剪01组',      // 报工小组
  },
]);
// 定义初始行数据
const initialRowData = () => ({ 
  ddbh: '',       // 订单编号
  material: '',   // 面料分类
  colorOptions: [],      // 颜色
  ks: '',         // 款式
  defectiveQuantity: '', // 次片数量
  issueOptions: [], // 次片问题（下拉框选项）
  remark: '',     // 备注
  group: '裁剪01组',      // 报工小组
});
// 方法：新增一行
const addRow = () => {
  SecondarytabeleData.push({ 
    ddbh: '',       // 订单编号
    material: '',   // 面料分类
    colorOptions: [],     // 颜色
    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, 面料统计 } = response.data;

      // 更新当前行的数据
      row.ddbh = `${list.订单编号}---${list.生产款号}`;
      row.ks = list.款式;
      // 更新下拉框选项
      row.colorOptions = colorremark.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('数据加载成功');
    } 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'],
      尺码: '',
      实际用料: 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({
        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>