mes-sdai-admin-backend-ui/src/view/performance/14-overTimePayVerification/index.vue

<template>
  <div>
    <el-container>

      <!-- 左侧树形结构 -->
      <!-- <el-scrollbar max-height="80vh">
        <el-aside width="280px">
          <div class="JKWTree-tree">
            <h3>计件员工加班费核查</h3>
            <el-tree
              :data="treeData"
              :props="defaultProps"
              highlight-current="true"
              @node-click="handleNodeClick"
            />
          </div>
        </el-aside>
      </el-scrollbar> -->
	  
	  <layout-sider
	    :resize-directions="['right']"
	    :width="220"
	    style="margin-right: 10px;"
	  >
	    <div
	      class="JKWTree-tree"
	      style="height: 70vh;"
	    >
	      <h3>计件员工加班费核查</h3>
	      <el-tree
	        :data="treeData"
	        highlight-current
	        @node-click="handleNodeClick"
	      />
	    </div>
	  </layout-sider>

      <el-container>
        <el-main>
          <div class="gva-table-box">
            <div class="gva-btn-list">
              <el-row :span="6">
                <el-input
                  v-model="searchInfo"
                  placeholder="输入员工编号或姓名"
                  @keyup.enter="onSearch()"
                />
              </el-row>
              <!-- 按钮区域 -->
              <el-button
                type="primary"
                :icon="Search"
                @click="onSearch"
              >搜索
              </el-button>
              <el-button
                type="primary"
                :icon="Refresh"
              >重置
              </el-button>
              <div style="margin-left: auto;">
                <el-button
                  type="primary"
                  :icon="Download"
                  @click="exportExcel"
                >导出到Excel
                </el-button>
              </div>
            </div>
            <!-- 上半数据展示 -->
            <el-table
              ref="tab1"
              style="width: 100%;height:30vh;"
              tooltip-effect="dark"
              :data="tableData1"
              row-key="ID"
              highlight-current-row
              border
              :row-style="{ height: '20px' }"
              :cell-style="{ padding: '0px' }"
              :header-row-style="{ height: '20px' }"
              :header-cell-style="{ padding: '0px' }"
              @cell-dblclick="handleDblclick1"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <!-- 使用 v-for 循环渲染每一列 -->
              <el-table-column
                v-for="column in tableCols1"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                show-overflow-tooltip="true"
				sortable
              />

              // 下半数据展示
            </el-table>
            <br>
            <el-table
              ref="tab2"
              style="width: 100%;height: 40vh;"
              tooltip-effect="dark"
              :data="tableData2"
              row-key="ID"
              highlight-current-row
              border
              :row-style="{ height: '20px' }"
              :cell-style="{ padding: '0px' }"
              :header-row-style="{ height: '20px' }"
              :header-cell-style="{ padding: '0px' }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <!-- 使用 v-for 循环渲染每一列 -->
              <el-table-column
                v-for="column in tableCols2"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                show-overflow-tooltip="true"
				sortable
              />
            </el-table>
          </div>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script setup>

// 全量引入格式化工具 请按需保留
import { Download, Refresh, Search } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { getDownData, getSide, getUpData } from '@/api/mes_api_gty/overTimePayVerification'
import { Layout, LayoutContent, LayoutHeader, LayoutSider } from '@arco-design/web-vue'
defineOptions({
  name: '06PackingDocuments',
})

// 侧边栏数据请求
const treeData = reactive([])
const getSideData = async() => {
  try {
    const res = await getSide()
    if (res.code === 0) {
      treeData.splice(0, treeData.length, ...res.data)
    }
  } catch (e) {
    console.log(e)
  }
}

getSideData()

// =========== 表格控制部分 ===========
const tableCols1 = [
  { label: '员工编号', prop: 'bh', width: '100' },
  { label: '员工姓名', prop: '员工姓名', width: '100' },
  { label: '工资表类别', prop: '工资表类别', width: '150' },
  { label: '聘用日期', prop: '聘用日期', width: '150' },
  { label: '法定天数', prop: '法定天数', width: '100' },
  { label: '当月定额', prop: '当月定额', width: '100' },
  { label: '月度合计产量', prop: '月度合计产量', width: '150' },
  { label: '个人计件工资', prop: '个人计件工资', width: '150' },
  { label: '个人加班工资', prop: '个人加班工资', width: '150' },
  { label: '月计时时数', prop: '月计时时数', width: '150' },
  { label: '计时补差', prop: '计时补差', width: '150' },
]
const tableCols2 = [
  { label: '日期', prop: 'sczl_rq', width: '100' },
  { label: '工单编号', prop: 'sczl_gdbh', width: '100' },
  { label: '成品名称', prop: 'Gd_cpmc', width: '300' },
  { label: '印件及工序', prop: 'sczl_type', width: '300' },
  { label: '车头产量', prop: '班组车头产量', width: '100' },
  { label: '机台编号', prop: 'sczl_jtbh', width: '100' },
  { label: '产量系数', prop: '产量系数', width: '100' },
  { label: '计件产量', prop: '计件产量', width: '100' },
  { label: '补产产量', prop: '补产产量', width: '100' },
  { label: '核算产量', prop: '核算产量', width: '100' },
  { label: '日定额', prop: '日定额', width: '100' },
  { label: '达标定额', prop: '达标定额', width: '100' },
  { label: '千件工价', prop: '千件工价', width: '100' },
  { label: '补产标准', prop: '补产标准', width: '100' },
  { label: '个人计件工资', prop: '个人计件工资', width: '120' },
  { label: '个人加班工资', prop: '个人加班工资', width: '120' },
  { label: '个人比例', prop: '个人比例', width: '100' },
  { label: '装版工时', prop: '装版工时', width: '100' },
  { label: '保养工时', prop: '保养工时', width: '100' },
  { label: '打样工时', prop: '打样工时', width: '100' },
  { label: '分摊计时', prop: '分摊计时', width: '100' },
  { label: '计时补差', prop: '计时补差', width: '100' },
]
const tableData1 = reactive([])
const tableData2 = reactive([])
let originData = []

const searchInfo = ref('')
const params = {
  date: '',
  department: '',
  code: '',
}

const handleNodeClick = async(node, check) => {
  if (!node.children) {
    const val = {
      date: node.gdbh,
      department: node.label.slice(0, node.label.indexOf('（')),
    }
    params.date = val.date
    params.department = val.department
    const res = await getUpData(val)
    if (res.code === 0) {
      const data = res.data
      let totalPersonalPieceWage = 0
      let totalOvertimeWage = 0

      data.forEach(employee => {
        const personalPieceWage = parseFloat(employee['个人计件工资']) || 0
        const overtimeWage = parseFloat(employee['个人加班工资']) || 0

        totalPersonalPieceWage += personalPieceWage
        totalOvertimeWage += overtimeWage
      })
      data.push({
        '员工姓名': '合计',
        '个人计件工资': totalPersonalPieceWage.toFixed(2),
        '个人加班工资': totalOvertimeWage.toFixed(2),
      })

      tableData1.splice(0, tableData1.length, ...data)
      originData = [...tableData1]
    }
  }
}

const handleDblclick1 = async(row) => {
  params.code = row.bh
  const { date, code } = params
  const res = await getDownData({ date, code })
  if (res.code === 0) {
    const data = res.data
    let totalPersonalPieceWage = 0
    let totalOvertimeWage = 0

    data.forEach(employee => {
      const personalPieceWage = parseFloat(employee['个人计件工资']) || 0
      const overtimeWage = parseFloat(employee['个人加班工资']) || 0

      totalPersonalPieceWage += personalPieceWage
      totalOvertimeWage += overtimeWage
    })
    data.push({
      'Gd_cpmc': '合计',
      '个人计件工资': totalPersonalPieceWage.toFixed(2),
      '个人加班工资': totalOvertimeWage.toFixed(2),
    })

    tableData2.splice(0, tableData2.length, ...data)
  }
}

// 搜索
const onSearch = () => {
  if (searchInfo.value === '') {
    tableData1.splice(0, tableData1.length, ...originData)
    return
  }

  const val = originData.filter(item => {
    const bh = item.bh
    const name = item.员工姓名
    return (bh?.match(searchInfo.value) || name?.match(searchInfo.value))
  })
  tableData1.splice(0, tableData1.length, ...val)
}

// 导出excel
function exportExcel() {
  console.log('导出到excel')
}

</script>

<style scoped>
.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;
}

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