mes-zs-admin-backend-ui/src/view/performance/09-workOrderVerification/meirihejiantongji.vue

<template>
  <el-dialog
    :model-value="props.isShow"
    title="核检废品日统计"
    fullscreen
    destroy-on-close
    @close="handleExit"
  >
    <el-container>
      <!-- 按钮部分 -->
      <el-header>
        <el-button
          type="primary"
          size="large"
          @click="handleExcel"
        >导出到Excel
        </el-button>
        <el-button
          type="primary"
          size="large"
          @click="handleExit"
        >退出
        </el-button>
      </el-header>

      <el-main>
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="--"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="margin-bottom: 10px;"
        />
        <el-button
          type="primary"
          :loading="isLoading"
          style="margin-bottom: 10px; margin-left: 5px;"
          @click="handleSearch"
        >刷新
        </el-button>
        <el-table
          ref="multipleTable"
          width="100%"
          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: 'Meirihejiantongji',
}

// 6核检废品日统计
import service from '@/utils/request'

const getDaysWast = (params) => {
  return service({
    url: '/mes_server/work_order_verification/getDaysWast',
    method: 'get',
    params
  })
}
</script>

<script setup>
import { ref, reactive, defineProps, defineEmits } from 'vue'

const props = defineProps(['isShow'])
const emits = defineEmits(['myClose'])

const tableColumns = reactive([
  { label: '日期', prop: 'qczl_rq', width: '150' },
  { label: '废品类别', prop: 'fp_lb', width: '150' },
  { label: 'A班员工编号', prop: 'fp_bh', width: '150' },
  { label: 'A班员工姓名', prop: 'fp_name', width: '150' },
  { label: 'A班数量', prop: 'fp_sl', width: '150' },
  { label: 'B班员工编号', prop: 'fp_bh_b', width: '150' },
  { label: 'B班员工姓名', prop: 'fp_name_b', width: '150' },
  { label: 'B班数量', prop: 'fp_sl_b', width: '150' },
])
const tableData = reactive([])
const date = ref()
const isLoading = ref(false)

const handleExit = () => {
  emits('myClose')
}

const handleExcel = () => {
}

const handleSearch = async() => {
  const start_date = date?.value?.[0]
  const end_date = date?.value?.[1]

  if (!start_date || !end_date) { return }
  const params = {
    start_date,
    end_date
  }
  isLoading.value = true
  const res = await getDaysWast(params)
  isLoading.value = false
  if (res.code === 0) {
    const { data } = res
    const val = data.map(item => {
      const formatDate = item.qczl_rq?.split(' ')[0]

      if (item.fp_bz === 'B班') {
        return {
          qczl_rq: formatDate,
          fp_lb: item.fp_lb,
          fp_bh_b: item.fp_bh,
          fp_name_b: item.fp_name,
          fp_sl_b: item.fp_sl,
        }
      }
      return { ...item, qczl_rq: formatDate }
    })
    console.log(val)
    tableData.splice(0, tableData.length, ...val)
  }
}

</script>

<style scoped>

:deep(.el-table td .cell) {
  line-height: 30px !important;
}

</style>