mes-ai-admin-backend-ui/src/view/performance/09-workOrderVerification/componets/gongdanzhijianfeipintongji.vue

<template>
  <el-dialog
    :model-value="modelValue"
    title="核检废品日统计"
    fullscreen
    destroy-on-close
    :before-close="() => emits('update:modelValue', false )"
  >
    <el-container>
      <!-- 按钮部分 -->
      <el-header>
        <el-button type="primary" size="large" @click="handleExcel" >导出到Excel</el-button> 
		<el-button type="primary" size="large" @click="() => emits('update:modelValue', false )" >退出
        </el-button>
      </el-header>

      <el-main>

       <div style="display: flex; align-items: center;">
           <el-input v-model="input" placeholder="输入工单编号" style="width: 180px; margin-right: 10px;" />
           印件选择：
           <el-select v-model="gdwhformData.yjno" placeholder="请选择" allow-create filterable style="width: 100px; margin-right: 10px;">
             <el-option v-for="option in gdwhformData.yinjian" @click="ongdwhfanclick" :key="option" :label="option" :value="option" />
           </el-select>
           
           <el-button type="primary" :loading="isLoading" style="margin-right: 10px;" @click="handleSearch">刷新</el-button>
           
           <el-input v-model="inputCpmc" readonly style="width: 50vw; margin-right: 10px;" />
         </div>
        <br>
		<el-table id="tab"
          ref="multipleTable"
          height="70vh"
          :data="tableData"
          row-key="ID"
          highlight-current-row
          border
          show-overflow-tooltip
          :row-style="{ height: '20px' }"
          :cell-style="{ padding: '0px' }"
          :header-row-style="{ height: '20px' }"
          :header-cell-style="{ padding: '0px' }"
        >
          <!-- 循环渲染表格列 -->
          <el-table-column
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
          />
        </el-table>

      </el-main>

    </el-container>
  </el-dialog>
</template>

<script>
export default {
  name: 'Gongdanzhijianfeipintongji',
}

// 8工单质检废品统计
import service from '@/utils/request'
export const getOrderWasteTotal = (params) => {
  return service({
    url: '/mes_server/work_order_verification/getOrderWasteTotal',
    method: 'get',
    params
  })
}
</script>

<script setup>
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import { watch, ref, reactive, defineProps, defineEmits, nextTick } from 'vue'
import {PrintDetailList} from "@/api/yunyin/yunying";
const props = defineProps(['modelValue', 'val'])
const emits = defineEmits(['update:modelValue'])

const tableColumns = reactive([
  { label: '工单编号', prop: 'gdbh', width: '150' },
  { label: '产品代号', prop: 'product_code', width: '150' },
  { label: '产品名称', prop: 'product_name', width: '150' },
  { label: '订单数量', prop: '订单数量', width: '150' },
  { label: '实际投料', prop: 'aaa', width: '150' },
  { label: '计量单位', prop: '计量单位', width: '150' },
  { label: '交货日期', prop: '交货日期', width: '150' },
  { label: '入仓数量', prop: 'jjcp_sl', width: '150' },
  { label: '入仓日期', prop: 'jjcp_sj', width: '150' },
  { label: '印件号', prop: 'qczl_yjno', width: '150' },
  { label: '联数', prop: 'yj_ls', width: '150' },
  { label: '工序号', prop: 'fp_gxh', width: '150' },
  { label: '流程单号', prop: 'qczl_num', width: '150' },
  { label: '员工编号', prop: 'fp_bh', width: '150' },
  { label: '员工姓名', prop: 'fp_name', width: '150' },
  { label: '废品类别', prop: 'fp_lb', width: '150' },
  { label: '数量', prop: 'fp_sl', width: '150' },
])
const tableData = ref([])
const input = ref(props.val)
const inputCpmc = ref('')
const isLoading = ref(false)
console.log(input.value)

const handleExcel = () => {
  const el = document.getElementById('tab');
  // 文件名
  const filename = '核检废品日统计-'+input.value+ '.xlsx';
  const wb = XLSX.utils.table_to_book(el, { raw: true });
  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.log(e);
  }
  return wbout;
}
nextTick(() => {
  handleSearch()
})



const gdwhformData = reactive({
  // 下拉框选项数据
  yinjian: [],
  // 设置默认值
  yjno: '',
});
const ongdwhfanclick = async() => {
	console.log(gdwhformData.yjno)
	const response = await PrintDetailList({ workOrder:input.value});
	// console.log(response)
	const matchingItem = response.data.find(item => item.no === gdwhformData.yjno);
    if (matchingItem) {
		console.log(matchingItem.name)
		inputCpmc.value = matchingItem.name;
	} else {
		console.log(`No matching item found for no: ${gdwhformData.yjno}`);
	}
}

const handleSearch = async() => {
	const response = await PrintDetailList({ workOrder:input.value});
	// console.log(response)
	if (response.code === 0) {
	  const noFields = response.data.map(item => item.no);
	  // console.log(noFields)
	  gdwhformData.yinjian = noFields
	  // 你可以在这里进一步处理 noFields，例如展示在页面上
	} else {
	  console.error('查询失败:', response.msg);
	}
	
  if (!input.value) { return }
  const params = { order: input.value,yjno:gdwhformData.yjno }
  // console.log(params)
  isLoading.value = true
  const res = await getOrderWasteTotal(params)
  console.log(res)
  isLoading.value = false
  if (res.code === 0) {
    // inputCpmc.value = res.data?.[0]?.['product_name']
    const val = res.data.map(item => {
      return { ...item, gdbh: params.order }
    })
    // console.log(res.data)
    tableData.value = val
  }
}

</script>

<style scoped>

:deep(.el-table td .cell) {
  line-height: 20px !important;
}
</style>