mes-admin-backend-ui/src/view/yunyin/shengchanguanli/PrintingPlateRequisition.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="onout">领出</el-button>
                <el-button type="primary" class="bt" icon="document" :disabled="!selectedIds" @click="onwithdraw">收回</el-button>
                <el-button type="primary" class="bt" icon="delete" :disabled="!selectedIds" @click="on_delete">删除</el-button>
                <el-button type="primary" icon="edit" class="bt"@click=" () => { dialogGxclhc = true;}">工序产量核查</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="130" />
               <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="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>
              <!-- 分页 -->
                <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: 38vh" 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="gdtableRowClick" :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="180" />
               <el-table-column  sortable align="center" label="退还日期" prop="退还日期"  width="180" />
               <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="220" />
              </el-table>
  
            </div>





            <el-dialog
    v-model="dialogPlateVisible"
    :before-close="dhlcloseDialog"
    :title="'印版工单发放'"
    destroy-on-close
    :width="'40%'"  
    :style="{ minWidth: '700px' }"
  >
    <el-form :model="Plate" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工单编号">
            <el-input 
              v-model="Plate.工单编号"  
              @keyup.enter="openOrderSelectDialog"
              placeholder="请输入工单编号" 
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="印件号">
            <el-input v-model="Plate.印件号" readonly  />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="产品名称">
            <el-input v-model="Plate.产品名称" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row  :gutter="20">
        <el-col style="margin-left:120px" :span="20">
          <el-radio-group  v-model="Plate.车间" >
					<el-radio label="胶印车间" border >胶印车间</el-radio>
					<el-radio label="凹丝印车间" border >凹丝印车间</el-radio>
					<el-radio label="印后车间" border >印后车间</el-radio>
					<!-- <el-radio label="其他" border >其他</el-radio> -->
				</el-radio-group>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item style="margin-top:20px" label="机台备注">
            <el-input 
              v-model="Plate.机台备注" 
              @keyup.enter="openMachineSelectDialog"
              placeholder="请输入机台备注" 
              readonly
            />
          </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="dialogwithdrawVisible"
    title="印版印数"
    :width="'20%'"  
    :style="{ minWidth: '200px' }"
  >
    <el-form-item label="印数">
      <el-input v-model="Plate.印数" type="number" placeholder="请输入印数" />
    </el-form-item>

    <template #footer>
      <div class="dialog-footer" style="width: 100%;">
        <el-button @click="rawcloseDialog" style="width: 100px; height: 40px;">关 闭</el-button>
        <el-button type="primary" @click="rawenterDialog" style="width: 100px; height: 40px;">确 定</el-button>
      </div>
    </template>
  </el-dialog>



  <!-- 工单选择弹窗 -->
  <el-dialog
    v-model="orderSelectDialogVisible"
    title="请选择工单"
    width="60%"
    @keyup.enter="confirmOrderSelection"
  >
    <el-table
      ref="orderTableRef"
      :data="orderList"
      highlight-current-row
      @current-change="handleOrderSelect"
      @row-dblclick="confirmOrderSelection"
      @keyup.enter.native="confirmOrderSelection"
    >
      <el-table-column prop="yj_Yjno" label="印件号" />
      <el-table-column prop="Gd_cpmc" label="产品名称" />
    </el-table>
  </el-dialog>

  <!-- 机台选择弹窗 -->
  <el-dialog
    v-model="machineSelectDialogVisible"
    title="请选择机台"
    width="40%"
    @keyup.enter="confirmMachineSelection"
  >
    <el-table
      ref="machineTableRef"
      :data="machineList"
      highlight-current-row
      @current-change="handleMachineSelect"
      @row-dblclick="confirmMachineSelection"
      @keyup.enter.native="confirmMachineSelection"
    >
      <el-table-column prop="value" label="机台编号" />
    </el-table>
  </el-dialog>

      <!-- 工序产量核查 -->
      <Gxclhc v-if="dialogGxclhc"  v-model="dialogGxclhc"
      :gdbh="gdbh" :jjcp_yjno = "jjcp_yjno"
    />


  
          </el-main>
        </layout-content>
        </layout>
      </layout>
    </div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  
  import {ref, reactive,nextTick} 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 {autocompleteEmits, ElMessage,ElMessageBox} from "element-plus";
  import {getOrderInfo,} from '@/api/mes_api_gty/workOrderVerification'
  import Gxclhc from '@/view/performance/12-orderAccounting/componets/gxclhc.vue'
  import {getPPTab,getPPList,getMachine,getPPgdReceive,getPPCode,getPPReceive,getPPDelete} from "@/api/mes/job.js"
  import {PrintDetailEdit,} from '@/api/jixiaoguanli/baogong'
  import {gdzl_MachineList} from "@/api/yunyin/yunying";
import { placeholderSign } from 'element-plus/es/components/table-v2/src/private';
  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 res = await getPPTab()
    if (res.code === 0) {
      treeData.value = transformData(res.data)
    } else {
      console.error('获取数据失败:', res.msg)
    }
  } catch (error) {
    console.error('请求出错:', error)
  }
}

// 转换数据格式为el-tree需要的结构
const transformData = (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,
      children
    }
  })
}
  
  getTreeData()
  
  const showKH = ref(false)
  const dialogGxclhc = 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})
      console.log(res.data)
      total.value = res.data.total
      wltableData.value = res.data.data
    }
  }

  const searchInfo = ref('')
  const on_search = async () => {
    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 
    }else{
      ElMessage.error('未搜索到数据') 
    }
  }

  const wlmxtableData = ref([])
  const clickedRow = ref(null)
  const tableRowClick = async (row) => {
    try {
    console.log(row)
    clickedRow.value = row;
    console.log(clickedRow.value)
    const res = await getPPReceive({ code: row.存货编码,batch:row.供方批号})
    if (res.code === 0) {
      wlmxtableData.value = res.data 
    }else{
      wlmxtableData.value = []
    }
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

  //刷新表格数据
  const data_refresh = async () =>{
    try {
    console.log(clickedRow.value)
    const res = await getPPReceive({ code: clickedRow.value.存货编码,batch:clickedRow.value.供方批号})
    if (res.code === 0) {
      wlmxtableData.value = res.data 
    }else{
      wlmxtableData.value = []
    }
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
  }

  
    //新增
    const Plate = reactive({})
    // 弹窗控制
    const dialogPlateVisible = ref(false)
    const dialogwithdrawVisible = ref(false)
    const orderSelectDialogVisible = ref(false)
    const machineSelectDialogVisible = ref(false)

    // 表格引用
    const orderTableRef = ref(null)
    const machineTableRef = ref(null)

    // 工单和机台数据
    const orderList = ref([])
    const machineList = ref([])

    // 当前选中项
    const selectedOrder = ref(null)
    const selectedMachine = ref(null)

  const onout = async () => {
    if(!clickedRow.value){
      ElMessage.error('请先选择要领出的记录')
      return
    }else{
      dialogPlateVisible.value = true;
    }
  }

  const onwithdraw = async () => {
      dialogwithdrawVisible.value = true;
  }

  // 删除操作
const rawenterDialog = async () => {
  try {
    await ElMessageBox.confirm('确定收回吗', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 调用收回API，假设是批量删除接口
    const res = await PrintDetailEdit({ id: selectedIds.value,number:Plate.印数})
    
    if (res.code === 0) {
      ElMessage.success('收回成功')
      data_refresh()
      rawcloseDialog()
      // 清空选中
      selectedIds.value = []
    } else {
      ElMessage.error(res.msg || '收回失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('收回失败:', error)
      ElMessage.error('收回操作已取消')
    }
  }
}

const rawcloseDialog = () => {
  Plate.印数 = ''
  dialogwithdrawVisible.value = false
}

  // 打开工单选择弹窗
const openOrderSelectDialog = async () => {
  try {
    const res = await getOrderInfo({ order: Plate.工单编号 })
    
    if (res.code === 0 && res.data.length > 0) {
      orderList.value = res.data
      orderSelectDialogVisible.value = true
      
      // 默认选中第一条并聚焦表格
      nextTick(() => {
        if (orderList.value.length > 0) {
          orderTableRef.value.setCurrentRow(orderList.value[0])
          selectedOrder.value = orderList.value[0]
          // 聚焦表格以便响应键盘事件
          orderTableRef.value.$el.querySelector('.el-table__body-wrapper').focus()
        }
      })
    } else {
      ElMessage.warning('未找到相关工单信息')
    }
  } catch (error) {
    ElMessage.error('获取工单信息失败: ' + error.message)
  }
}

// 处理工单选择
const handleOrderSelect = (row) => {
  selectedOrder.value = row
}

// 确认工单选择
const confirmOrderSelection = () => {
  if (selectedOrder.value) {
    Plate.印件号 = selectedOrder.value.yj_Yjno
    Plate.产品名称 = selectedOrder.value.Gd_cpmc
    orderSelectDialogVisible.value = false
  } else {
    ElMessage.warning('请选择一条工单记录')
  }
}

// 打开机台选择弹窗
const openMachineSelectDialog = async () => {
  try {
    const res = await gdzl_MachineList({ address: Plate.车间 })
    
    if (res.code === 0 && res.data.length > 0) {
      machineList.value = res.data.map(item => ({ value: item }))
      machineSelectDialogVisible.value = true
      
      // 默认选中第一条并聚焦表格
      nextTick(() => {
        if (machineList.value.length > 0) {
          machineTableRef.value.setCurrentRow(machineList.value[0])
          selectedMachine.value = machineList.value[0]
          // 聚焦表格以便响应键盘事件
          machineTableRef.value.$el.querySelector('.el-table__body-wrapper').focus()
        }
      })
    } else {
      ElMessage.warning('未找到相关机台信息')
    }
  } catch (error) {
    ElMessage.error('获取机台信息失败: ' + error.message)
  }
}

// 处理机台选择
const handleMachineSelect = (row) => {
  selectedMachine.value = row
}

// 确认机台选择
const confirmMachineSelection = () => {
  if (selectedMachine.value) {
    console.log(selectedMachine.value)
    Plate.机台备注 = selectedMachine.value.value.split('--')[0]
    machineSelectDialogVisible.value = false
  } else {
    ElMessage.warning('请选择一个机台')
  }
}


const initialPlateState = {
  工单编号: '',
  印件号: '',
  产品名称: '',
  机台备注: '',
  value: [],
};
// 其他原有方法保持不变
const dhlcloseDialog = () => {
  Object.assign(Plate, initialPlateState);
  dialogPlateVisible.value = false
}

const dhlenterDialog = () => {
  // 确定按钮逻辑
  const params = {
    gdbh:Plate.工单编号,
    yjno:Plate.印件号,
    machine:Plate.机台备注,
    code:clickedRow.value.存货编码,
    batch:clickedRow.value.供方批号,
    sys_id:sys_id,
  }
  console.log(params)
  getPPgdReceive(params).then(res=>{
    if(res.code===0){
      ElMessage.success('领出成功')
      dialogPlateVisible.value = false
      dhlcloseDialog()
      data_refresh()
      on_search()
    }else{
      ElMessage.error(res.msg)
    }
  })
  dialogPlateVisible.value = false
}



const selectedIds = ref('')
// 下方表格选择变化
const wlmxSelectionChange = (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('删除成功')
      data_refresh()
      // 删除成功后刷新表格数据
      // 清空选中
      selectedIds.value = []
    } else {
      ElMessage.error(res.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除操作已取消')
    }
  }
}

const gdbh = ref('')
const jjcp_yjno = ref('')
const gdtableRowClick = async (row) => {
  gdbh.value = row.工单编号
  jjcp_yjno.value = row.印件号
}

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 numberColumns = {
      'F': 2, 
      'G': 0,  
      'H': 2,  
    };

    // 3. 转换数字格式
    Object.keys(ws).forEach(address => {
      const col = address.charAt(0);
      
      if (numberColumns[col] !== undefined) {
        const cell = ws[address];
        const num = parseFloat(cell.v);
        
        if (!isNaN(num)) {
          cell.t = 'n';
          cell.v = num;
          cell.z = numberColumns[col] === 0 
            ? '0' 
            : `0.${'0'.repeat(numberColumns[col])}`;
        }
      }
    });

    // 4. 导出
    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>