mes-admin-backend-ui/src/view/managements/hardversionlibrary.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-button type="primary" class="bt" icon="search" @click="on_search">查询</el-button>
                <el-button type="primary" class="bt" icon="edit" @click="onADD">添加</el-button>
                <el-button type="primary" class="bt" icon="delete" :disabled="!selectedIds" @click="on_delete">删除</el-button>
                <el-button type="primary" class="bt" icon="download"  @click="ToExcel" >导出到Excel</el-button>
              </el-form-item>
            </el-form>
  
        
  
          </div>
        </layout-header>
  
        <layout>
          <!--    左侧树侧形结构-->
          <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
            <div class="JKWTree-tree" style="height: 200px">
              <h3>印版库管理</h3>
              <el-tree :data="treeData"  :props="defaultProps" @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="wltableData"  border row-key="ID"
                        size="small" v-if="!showKH"
                        :cell-class-name="gxbgCellClass" id="wltable"
                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                        @row-click="tableRowClick" :show-overflow-tooltip="true"
                        >
               
               <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="200" />
               <el-table-column   align="center" label="供方批号" prop="供方批号"  width="200" />
               <el-table-column   align="center" label="制造日期" prop="制造日期"  width="110" />
               <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="110" />
               <el-table-column   align="center" label="考核印数" prop="考核印数"  width="110" />
               <el-table-column   align="center" label="创建用户" prop="创建用户"  width="110" />
               <el-table-column   align="center" label="创建时间" prop="创建时间"  width="110" />
               <el-table-column   align="center" label="修改时间" prop="修改时间"  width="110" />
              </el-table>
  
              <!-- 分页 -->
              <div class="gva-pagination">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </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="wlmxtableData"  border row-key="ID"
                        size="small" v-if="!showKH"
                        :cell-class-name="gxbgCellClass"
                        highlight-current-row="true" @row-dblclick="updateCompanyFunc2"
                        @row-click="tableRowClick2" :show-overflow-tooltip="true"
                        @selection-change="wlmxSelectionChange">
               <el-table-column type="selection" width="30" />
               <el-table-column  sortable align="center" label="领用机台" prop="领用机台"  width="120" />
               <el-table-column  sortable align="center" label="领用日期" prop="领用日期"  width="160" />
               <el-table-column  sortable align="center" label="退还日期" prop="退还日期"  width="160" />
               <el-table-column  sortable align="center" label="印数" prop="印数"  width="100" />
               <el-table-column  sortable align="center" label="工单编号" prop="工单编号"  width="100" />
               <el-table-column  sortable align="center" label="成品代号" prop="成品代号"  width="100" />
               <el-table-column  sortable align="center" label="成品名称" prop="成品名称"  width="350" />
              </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: 78vh" 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" v-if="showKH"
                        :cell-class-name="gxbgCellClass"
                        highlight-current-row="true" 
                        @row-click="tableRowClick3" :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="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="110" />
               <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="110" />
               <el-table-column   align="center" label="印版类别" prop="印版类别"  width="110" />
               <el-table-column   align="center" label="客户编号" prop="客户编号"  width="110" />
               <el-table-column   align="center" label="客户名称" prop="客户名称"  width="110" />
              </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="dialogPlateVisible"
              :title="type === 'create' ? '产品印版资料新增' : '产品印版资料修改'"
              :width="'40%'"  
              :style="{ minWidth: '700px' }"
            >
            <el-form :model="Plate" label-width="120px">
                <!-- 第一行：部门 -->
                <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="存货编码">
                    <el-input v-model="Plate.存货编码" @keydown="handleInventoryKeyDown($event)"  placeholder="请输入存货编码" />
                    </el-form-item>
                </el-col>
                </el-row>

                <!-- 第二行：设备信息 -->
                <el-row :gutter="20">
                  <el-col :span="18">
                    <el-form-item label="存货名称">
                    <el-input v-model="Plate.存货名称"  placeholder="请输入存货名称" />
                    </el-form-item>
                </el-col>
                </el-row>

                <el-row :gutter="20">
                <el-col :span="18">
                    <el-form-item label="印版备注">
                    <el-input v-model="Plate.印版备注"   />
                    </el-form-item>
                </el-col>
                </el-row>

                <!-- 第三行：供应商 -->
                <el-row :gutter="20">
                  <el-col :span="10">
                        <el-form-item label="制造日期">
                            <el-date-picker
                            v-model="Plate.制造日期"
                            type="date"
                            placeholder="选择制造日期"
                            style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10 ">
                        <el-form-item label="报废日期">
                            <el-date-picker
                            v-model="Plate.报废日期"
                            type="date"
                            placeholder="选择报废日期"
                            style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第四行：出厂编号 -->
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="初始印数">
                    <el-input v-model="Plate.初始印数" type="number" placeholder="请输入初始印数" />
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="考核印数">
                    <el-input v-model="Plate.考核印数" type="number" placeholder="请输入考核印数" />
                    </el-form-item>
                </el-col>
                </el-row>

                <!-- 第五行：执行人员 -->
                <el-row :gutter="20">

                <el-col :span="18">
                    <el-form-item label="供方批号">
                    <el-input v-model="Plate.供方批号" placeholder="请输入供方批号" />
                    </el-form-item>
                </el-col>
                </el-row>
                
            </el-form>

            <!-- 弹窗底部按钮 -->
            <template #footer>
                <div class="dialog-footer" style="width: 100%;">
                <el-button @click="dhlcloseDialog" style="width: 100px; height: 40px;">关 闭</el-button>
                <el-button type="primary" @click="dhlenterDialog" style="width: 100px; height: 40px;">确 定</el-button>
                </div>
            </template>
            </el-dialog>

            <el-dialog 
  v-model="inventorySearchModel" 
  title="存货编码查询" 
  :before-close="() => inventorySearchModel = false"
>
  <el-form>
    <div>
      <!-- 新增下拉框 -->
      <el-form-item label="分类筛选:" class="mab">
        <el-select 
          v-model="selectedCategory" 
          placeholder="请选择分类" 
          style="width: 100%"
          @change="handleCategoryChange"
          :loading="categoryLoading"
        >
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <!-- 原有的关键字搜索 -->
      <el-form-item label="关键字:" class="mab" prop="keyOrder">
        <el-space>
          <el-input 
            v-model="inventoryKeyword" 
            style="width: 60%;"
            @keyup.enter="searchInventoryHandle(inventoryKeyword)"
          />
          <el-button @click="searchInventoryHandle(inventoryKeyword)">刷新</el-button>
        </el-space>
      </el-form-item>
      
      <div style="border:1px solid #eee; width:100%; height: 400px; overflow-y: auto">
        <el-tree 
          :data="inventoryTreeData" 
          :props="{
            children: 'children',
            label: 'label', 
            value: '物料代码'
          }" 
          @node-click="selectInventoryNode" 
        />
      </div>
    </div>
  </el-form>
</el-dialog>

  
          </el-main>
        </layout-content>
        </layout>
      </layout>
    </div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  
  import {ref, reactive} from 'vue'
  import * as XLSX from 'xlsx'
  import FileSaver from 'file-saver'
  import dayjs, { Dayjs } from 'dayjs';
  import { exportExcelFile } from '@/utils/excel'
  import { useUserStore } from '@/pinia/modules/user'
  import {ElMessage,ElMessageBox} from "element-plus";
  import {getPPTab,getPPList,getPPEdit,getPPDetail,getPPCode,getPPReceive,getPPDelete,getPPkhTab} from "@/api/mes/job.js"
  const userStore = useUserStore()
  const sys_id='['+userStore.userInfo.userName+'/'+userStore.userInfo.nickName+']'
  defineOptions({name: 'Company'})

 // 分页
 const page = ref(1)
const total = ref(0)
const pageSize = ref(50)
const handleCurrentChange = (val) => {
  page.value = val;
  _WorkList_page();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  // page.value = 10;
  pageSize.value = val;
  _WorkList_page();
};

const _WorkList_page =  async () =>{
  console.log(searchInfo.value)
  if (searchInfo.value === ''){
    // showKH.value = node.code === '客户产品印版库'?true:false;
      const res = await getPPList({code:nodecode.value,page:page.value,limit:pageSize.value})
      total.value = res.data.total
      wltableData.value = res.data.data
  }else{
    // showKH.value = node.code === '客户产品印版库'?true:false; 
    const res = await getPPList({code:nodecode.value,search:searchInfo.value,page:page.value,limit:pageSize.value})
    total.value = res.data.total
    wltableData.value = res.data.data
  }
}
  
// =========== 获取左侧树形结构 ===========
const treeData = ref([])

const getTreeData = async () => {
  try {
    // 并行请求两个接口
    const [res1, res2] = await Promise.all([getPPTab(), getPPkhTab()])
    
    if (res1.code === 0 && res2.code === 0) {
      // 转换PPTab数据
      const ppData = transformPPData(res1.data)
      
      // 转换PPkhTab数据
      const ppkhData = transformPPKHData(res2.data)
      
      // 合并数据，
      treeData.value = [
        ...ppData, // MN印版和翌星印版作为独立节点
        {
          label: '客户产品印版库',
          children: ppkhData
        }
      ]
    } else {
      console.error('获取数据失败:', res1.msg || res2.msg)
    }
  } catch (error) {
    console.error('请求出错:', error)
  }
}

// 转换PPTab数据格式
const transformPPData = (data) => {
  return Object.entries(data).map(([key, value]) => {
    const children = Object.entries(value).map(([subKey, subValue]) => {
      return {
        label: subKey,
        children: Object.entries(subValue).map(([typeKey, typeValue]) => {
          return {
            label: typeKey,
            children: typeValue.map(item => ({
              label: item,
              code: key
            }))
          }
        })
      }
    })
    return {
      label: key, // "MN印版"或"翌星印版"
      children
    }
  })
}

// 转换PPkhTab数据格式
const transformPPKHData = (data) => {
  return Object.entries(data).map(([customer, products]) => {
    return {
      label: customer,
      children: Object.entries(products).map(([product, plateTypes]) => {
        return {
          label: product, 
          children: plateTypes.map(plateType => ({
            label: plateType 
          }))
        }
      })
    }
  })
}

// 初始化获取数据
getTreeData()
  
  const showKH = ref(false)
  const wltableData = ref([])
  const nodecode = ref('')
  const handleNodeClick = async (node) => {
    console.log(node) 
    if(!node.children){
      nodecode.value = node.label.split(' ')[0]
      showKH.value = !node.code?true:false;
      const res = await getPPList({code:node.label.split(' ')[0],page:page.value,limit:pageSize.value})
      total.value = res.data.total
      wltableData.value = res.data.data
    }
  }

  const searchInfo = ref('')
  const on_search = async () => {
    try{
      const res = await getPPList({code:nodecode.value,search:searchInfo.value,page:page.value,limit:pageSize.value})
      if (res.code === 0) {
        total.value = res.data.total
        wltableData.value = res.data.data
      }
    }catch(error){
      ElMessage.error('搜索失败')
    }
  }

  const wlmxtableData = ref([])
  const tableRowClick = async (row) => {
    try{
      console.log(row)
      const res = await getPPReceive({ code: row.存货编码,batch:row.供方批号})
      if (res.code === 0) {
        wlmxtableData.value = res.data 
      }else{
        wlmxtableData.value = []
      }
    }catch(error){
      ElMessage.error('获取数据失败')
    }
  }
  
    //新增
  const Plate = reactive({ 
  })
  const dialogPlateVisible = ref(false)
  const type = ref('create') // 'create' 或 'update'
  const onADD = () => {
    // 新增逻辑
    console.log('新增按钮点击'); 
    type.value = 'create'
    dialogPlateVisible.value = true
  }

  //双击打开修改弹窗
const updateCompanyFunc = async (row) => {
    type.value = 'update'
    const res = await getPPDetail({ UniqID: row.UniqID})
    if (res.code === 0) {
      Object.assign(Plate, res.data)
      Plate.存货名称 = res.data.物料名称
      Plate.报废日期 = dayjs(Plate.报废日期) 
      Plate.初始印数 = res.data.原始印数
    }
    dialogPlateVisible.value = true
  }

  // 弹窗控制
const inventorySearchModel = ref(false)
// 搜索关键字
const inventoryKeyword = ref('')
// 树形数据
const inventoryTreeData = ref([])
// 新增的状态变量
const selectedCategory = ref('') // 选中的分类
const categoryOptions = ref([]) // 下拉框选项
const categoryLoading = ref(false) // 下拉框加载状态

// 处理输入框按键事件
const handleInventoryKeyDown = async (event) => {
  if (event.key === 'Tab' || event.key === 'Enter') {
    event.preventDefault()
    await _getInventoryList()
    inventorySearchModel.value = true
  }
}

// 在打开弹窗时获取分类数据
const _getInventoryList = async () => {
  try {
    inventorySearchModel.value = true
    categoryLoading.value = true
    
    // 从treeData中提取分类选项
    categoryOptions.value = [
      { value: 'all', label: '全部分类' }, // 添加一个全部分类选项
      ...extractCategoriesFromTreeData(treeData.value)
    ]
    
    // 获取默认的树形数据
    // await searchInventoryHandle('', selectedCategory.value)
    
  } catch (error) {
    console.error('获取分类列表失败:', error)
  } finally {
    categoryLoading.value = false
  }
}

// 从树数据中提取分类的函数
const extractCategoriesFromTreeData = (treeData) => {
  const categories = []
  
  treeData.forEach(rootItem => {
    if (rootItem.children) {
      rootItem.children.forEach(categoryItem => {
        if (categoryItem.children) {
          categoryItem.children.forEach(item => {
            if (item.label) {
              categories.push({
                value: item.label, 
                label: item.label
              })
            }
          })
        }
      })
    }
  })
  
  return categories
}

// 修改后的搜索方法，加入分类和关键字参数
const searchInventoryHandle = async (keyword = '', category = selectedCategory.value) => {
  try {
    // 调用实际接口
    const response = await getPPCode({ 
      code: category === 'all' ? '' : category, // 全部分类时传空
      search: keyword 
    });
    
    // 处理接口返回的数据
    if (response.code === 0) {
      inventoryTreeData.value = handleInventoryTreeData(response.data);
    } else {
      console.error('接口返回错误:', response.msg);
      inventoryTreeData.value = [];
    }
    
  } catch (error) {
    console.error('搜索存货失败:', error);
    inventoryTreeData.value = [];
  }
}

// 修改后的树形数据处理方法
const handleInventoryTreeData = (apiData) => {
  const result = [];
  for (const [topLevelKey, topLevelValue] of Object.entries(apiData)) {
    const topLevelNode = {
      label: topLevelKey,
      children: []
    };
    for (const [secondLevelKey, secondLevelValue] of Object.entries(topLevelValue)) {
      const secondLevelNode = {
        label: secondLevelKey,
        children: []
      };
      for (const [thirdLevelKey, thirdLevelItems] of Object.entries(secondLevelValue)) {
        const [code, name] = thirdLevelKey.split('/');
        const thirdLevelNode = {
          label: `${code} ${name}`,
          children: []
        };
        thirdLevelItems.forEach(item => {
          const [itemCode, itemName] = item.split('/');
          thirdLevelNode.children.push({
            label: `${itemCode} ${itemName || ''}`.trim(),
            物料代码: itemCode,
            物料名称: itemName || '',
            value: itemCode
          });
        });
        secondLevelNode.children.push(thirdLevelNode);
      }
      
      topLevelNode.children.push(secondLevelNode);
    }
    result.push(topLevelNode);
  }
  
  return result;
}

// 分类变化处理
const handleCategoryChange = (category) => {
  searchInventoryHandle(inventoryKeyword.value, category);
}

// 选择树节点
const selectInventoryNode = (node) => {
  if (node.物料代码) {
    Plate.存货编码 = node.物料代码;
    Plate.存货名称 = node.物料名称;
    inventorySearchModel.value = false;
  }
}


//弹窗确定
const dhlenterDialog = async () => {
    console.log(':', Plate)
  const params = {
    code: Plate.存货编码,
    name: Plate.存货名称,
    desc: Plate.印版备注,
    Manufactur_date:dayjs(Plate.制造日期).format('YYYY-MM-DD')||'',
    Scrappe_date: dayjs(Plate.报废日期).format('YYYY-MM-DD')||'',
    start_num: Plate.初始印数,
    Assessment_num: Plate.考核印数,
    batch: Plate.供方批号,
    sys_id: sys_id,
  }
console.log(params)
console.log(type.value)
  if (type.value === 'create') {
    console.log('新增')
    // 新增
    try {
      const response = await getPPEdit(params)
      if (response.code === 0) {
        ElMessage.success('新增成功')
        dhlcloseDialog()
      } else {
        ElMessage.error(response.msg || '新增失败')
      }
    } catch (error) {
      
    }
  }else if (type.value === 'update') {
    // 修改
    console.log('修改')
    params.UniqID = Plate.UniqID
    try {
      const response = await getPPEdit(params)
      if (response.code === 0) {
        ElMessage.success('修改成功')
        dhlcloseDialog()
      } else {
        ElMessage.error(response.msg || '修改失败')
      }
    } catch (error) {
      
    }
  }
}

const initialPlateState = {
  存货编码: '',
  存货名称: '',
  印版备注: '',
  制造日期: '',
  报废日期: '',
  初始印数: '',
  考核印数: '',
  供方批号: '',
  value: [],
};
//关闭弹窗
const dhlcloseDialog = async () => {
  Object.assign(Plate, initialPlateState);
  dialogPlateVisible.value = false
}


const selectedIds = ref('')

// 维修表格选择变化
const wlmxSelectionChange = (selection) => {
  console.log('维修表格选择变化:', selection)
  selectedIds.value = selection.map(item => item.UniqID).join(',')
  console.log('选中的ID:', selectedIds.value)
}

// 删除操作
const on_delete = async () => {
  if (!selectedIds.value.length) {
    ElMessage.warning('请先选择要删除的记录')
    return
  }

  try {
    await ElMessageBox.confirm('确定要删除选中的记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 调用删除API，假设是批量删除接口
    const res = await getPPDelete({ id: selectedIds.value,})
    
    if (res.code === 0) {
      ElMessage.success('删除成功')
      // 删除成功后刷新表格数据
      // 清空选中
      selectedIds.value = []
    } else {
      ElMessage.error(res.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除操作已取消')
    }
  }
}


const ToExcel = () => {
  if(showKH.value === false){
    console.log('导出版材')
    const el = document.getElementById('wltable');
  const filename = '版材库导出.xlsx';
  
  // 1. 获取原始表格数据
  const wb = XLSX.utils.table_to_book(el, { raw: true });
  const ws = wb.Sheets[wb.SheetNames[0]];

  // 2. 定义需要转换为数字的列（基于原始列字母）
  const originalNumberColumns = {
    'G': 0,
    'H': 0,
    'I': 0, 
  };

  // 3. 创建新工作表（左移后的数据）
  const newWs = {};
  const range = XLSX.utils.decode_range(ws['!ref']);

  // 调整列范围（删除A列）
  range.s.c = 0;  // 从A列开始（原B列）
  range.e.c -= 1; // 结束列减1
  newWs['!ref'] = XLSX.utils.encode_range(range);

  // 复制其他工作表属性（排除A列）
  if (ws['!cols']) newWs['!cols'] = ws['!cols'].slice(1);
  if (ws['!rows']) newWs['!rows'] = ws['!rows'];
  if (ws['!merges']) newWs['!merges'] = ws['!merges'];

  // 4. 左移所有列数据（A列→删除，B列→A列，C列→B列...）
  Object.keys(ws).forEach(address => {
    if (!address.startsWith('!')) {
      const col = address.charAt(0);
      const row = address.slice(1);

      if (col !== 'A') { // 跳过A列
        // 计算新列字母（左移一列）
        const newCol = String.fromCharCode(col.charCodeAt(0) - 1);
        const newAddress = newCol + row;
        
        // 复制单元格数据
        newWs[newAddress] = { ...ws[address] };
      }
    }
  });

  // 5. 转换数字格式（基于左移后的列字母）
  Object.keys(newWs).forEach(address => {
    const col = address.charAt(0);
    const originalCol = String.fromCharCode(col.charCodeAt(0));

    if (originalNumberColumns[originalCol] !== undefined) {
      const cell = newWs[address];
      const num = parseFloat(cell.v);
      
      if (!isNaN(num)) {
        cell.t = 'n';
        cell.v = num;
        cell.z = originalNumberColumns[originalCol] === 0 
          ? '0' 
          : `0.${'0'.repeat(originalNumberColumns[originalCol])}`;
      }
    }
  });

  // 6. 更新工作簿并导出
  wb.Sheets[wb.SheetNames[0]] = newWs;
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });

  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename);
  } catch (e) {
    console.error('导出失败:', e);
  }
  return wbout;
  }
}
  
  </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>