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="180"
	    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"
				class="bt"
              >搜索
              </el-button>
			  <el-button
			    type="primary"
			    @click="onAttendance"
				class="bt"
			  >考勤建立
			  </el-button>
              <!-- <el-button
                type="primary"
                :icon="Refresh"
              >重置
              </el-button> -->
              <div style="margin-left: auto;">
                <el-button
                  type="primary"
                  :icon="Download"
                  @click="exportExcel"
				  class="bt"
                >导出到Excel(汇总)
                </el-button>
				<el-button
				  type="primary"
				  :icon="Download"
				  @click="exportExcel2"
				  class="bt"
				>导出到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"
			  @row-click="clickybupdate"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="40"
              />
              <!-- 使用 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="40"
              />
              <!-- 使用 v-for 循环渲染每一列 -->
              <el-table-column
                v-for="column in tableCols2"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :fixed="column.fixed"
                show-overflow-tooltip="true"
				sortable
              />
            </el-table>
          </div>

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

  </div>
  
  <el-dialog v-model="AttendanceVisible" title="考勤建立" destroy-on-close width="800px" >
    <el-row :gutter="24">
      <el-col :span="7">
        <el-form-item label="年月份" prop="id" style="margin-top=0px; margin-bottom: 1px;">
        	<el-input v-model="Attendancevalue['month']"  style="margin-top=0px; margin-bottom: 1px;" id="年月份" @keydown="handleKeyDown($event, '法定天数', 'C类', '法定天数')" placeholder="" />
        </el-form-item>
      </el-col>
  		
    	<el-col :span="7" style="margin-top=0px; margin-bottom: 1px;">
    	<el-form-item label="法定天数" prop="id" style="margin-top=0px; margin-bottom: 1px;">
    		<el-input v-model="Attendancevalue['day']"  style="margin-top=0px; margin-bottom: 1px;" @blur="getdays()" id="法定天数" @keydown="handleKeyDown($event, '法定天数', '年月份', 'A类')" placeholder="" />
    	</el-form-item>
    	</el-col>
    </el-row>
  			
  			
  			
  			
  			<el-row :gutter="24">
  			  
  					
  				<el-col :span="7" style="margin-top=0px; margin-bottom: 1px;">
  				<el-form-item label="A类(双休版)" prop="id" style="margin-top=0px; margin-bottom: 1px;">
  					<el-input v-model="Attendancevalue['typeA']" id="A类" @keydown="handleKeyDown($event, 'A类', '法定天数', 'B类')" style="margin-top=0px; margin-bottom: 1px;"  placeholder="" />
  				</el-form-item>
  				</el-col>
  			</el-row>
  			
  			
  			<el-row :gutter="24">
  			  
  					
  				<el-col :span="7" style="margin-top=0px; margin-bottom: 1px;">
  				<el-form-item label="B类(7.5小时班)" prop="id" style="margin-top=0px; margin-bottom: 1px;">
  					<el-input v-model="Attendancevalue['typeB']" id="B类" @keydown="handleKeyDown($event, 'B类', 'A类', 'C类')" style="margin-top=0px; margin-bottom: 1px;"  placeholder="" />
  				</el-form-item>
  				</el-col>
  			</el-row>
  			
  			
  			<el-row :gutter="24">
  			  
  					
  				<el-col :span="7" style="margin-top=0px; margin-bottom: 1px;">
  				<el-form-item label="C类(11小时班)" prop="id" style="margin-top=0px; margin-bottom: 1px;">
  					<el-input v-model="Attendancevalue['typeC']" id="C类" @keydown="handleKeyDown($event, 'C类', 'B类', '年月份')" style="margin-top=0px; margin-bottom: 1px;"  placeholder="" />
  				</el-form-item>
  				</el-col>
  			</el-row>
  			
  			
  			<template #footer>
  			  <div class="dialog-footer">
  			    <el-button @click="closeAttendanceDialog">取 消</el-button>
  			    <el-button type="primary" @click="AttendanceDialog">确 定</el-button>
  			  </div>
  			</template>
  </el-dialog>
  
  
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formDataTest: {
        imageUrl: '' // 添加一个字段来保存上传的图片路径
      },
      rule: {} // 初始化rule对象
    };
  },
  methods: {
    handleKeyDown(event, currentId, prevId, nextId) {
      const currentElement = document.getElementById(currentId);
      const isEmpty = currentElement.value === '';
      const atStart = currentElement.selectionStart === 0;
      const atEnd = currentElement.selectionStart === currentElement.value.length;
      switch (event.keyCode) {
        case 13: // Enter
        case 40: // 向下箭头
          if (nextId) {
            document.getElementById(nextId).focus();
          }
          break;
        case 38: // 向上箭头
          if (prevId) {
            document.getElementById(prevId).focus();
          }
          break;
        case 8: // 删除键
          if (prevId && (isEmpty || atStart)) {
            document.getElementById(prevId).focus();
          }
          break;
        case 37: // 向左箭头
          if (prevId && atStart) {
            document.getElementById(prevId).focus();
          }
          break;
        case 39: // 向右箭头
          if (nextId && atEnd) {
            document.getElementById(nextId).focus();
          }
          break;
        default:
          break;
      }
    },
    closeDialog() {
      // 关闭对话框的逻辑
      this.dialogFormVisible = false;
	  
    },
    enterDialog() {
      // 确定按钮的逻辑
      // 在这里可以执行提交表单的逻辑
    },
    handleFileUpload(event) {
      // 处理文件上传逻辑
      const file = event.target.files[0];
      console.log(file)
      // 模拟上传并保存文件路径
      // 在实际应用中，您需要将文件上传到服务器并保存路径
      this.formDataTest.imageUrl = URL.createObjectURL(file);
      // 手动触发Vue的更新
      this.$forceUpdate();
    }
  }
};
</script>
<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'
import { useUserStore } from '@/pinia/modules/user'
import {clockUpdate} from '@/api/yunyin/yunying'
import {ElMessage} from "element-plus";
import * as XLSX from "xlsx";
const userStore = useUserStore() 
const sys_id='['+userStore.userInfo.userName+'/'+userStore.userInfo.nickName+']'
defineOptions({
  name: '06PackingDocuments',
})
const Attendancevalue = ref({})
// 侧边栏数据请求
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: '105' },
  { label: '员工姓名', prop: '员工姓名', width: '105' },
  { label: '工资表类别', prop: '工资表类别', width: '120' },
  { label: '聘用日期', prop: '聘用日期', width: '105' },
  { label: '法定天数', prop: '法定天数', width: '105' },
  { label: '当月定额', prop: '当月定额', width: '105' },
  { label: '月度合计产量', prop: '月度合计产量', width: '135' },
  { label: '个人计件工资', prop: '个人计件工资', width: '135' },
  { label: '个人加班工资', prop: '个人加班工资', width: '135' },
  { label: '月计时时数', prop: '月计时时数', width: '120' },
  { label: '计时补差', prop: '计时补差', width: '120' },
]
const tableCols2 = [
  { label: '日期', prop: 'sczl_rq', width: '105', fixed: true },
  { label: '工单编号', prop: 'sczl_gdbh', width: '105', fixed: true },
  { label: '成品名称', prop: 'Gd_cpmc', width: '150' },
  { label: '印件及工序', prop: 'sczl_type', width: '150' },
  { label: '车头产量', prop: '班组车头产量', width: '105' },
  { label: '机台编号', prop: 'sczl_jtbh', width: '105' },
  { label: '产量系数', prop: '产量系数', width: '105' },
  { label: '计件产量', prop: '计件产量', width: '105' },
  { label: '补产产量', prop: '补产产量', width: '105' },
  { label: '核算产量', prop: '核算产量', width: '105' },
  { label: '日定额', prop: '日定额', width: '91' },
  { label: '达标定额', prop: '达标定额', width: '105' },
  { label: '千件工价', prop: '千件工价', width: '105' },
  { label: '补产标准', prop: '补产标准', width: '105' },
  { label: '个人计件工资', prop: '个人计件工资', width: '135' },
  { label: '个人加班工资', prop: '个人加班工资', width: '135' },
  { label: '个人比例', prop: '个人比例', width: '105' },
  { label: '装版工时', prop: '装版工时', width: '105' },
  { label: '保养工时', prop: '保养工时', width: '105' },
  { label: '打样工时', prop: '打样工时', width: '105' },
  { label: '分摊计时', prop: '分摊计时', width: '105' },
  { label: '计时补差', prop: '计时补差', width: '105' },
]
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 clickybupdate = async(row) => {
	if(row.bh == undefined) return
  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() {
 if(tableData1.length<1){
 	ElMessage({
 	  type: 'error',
 	  message: '请确认上方表格内是否存在内容'
 	})
 }else{
 	exportExcelFile(tableData1,tableCols1)
 }
}
function exportExcel2() {
 if(tableData2.length<1){
 	ElMessage({
 	  type: 'error',
 	  message: '请确认上方表格内是否存在内容'
 	})
 }else{
 	exportExcelFile(tableData2,tableCols2)
 }
}
const exportExcelFile = (tableData, tableCols) => {
  const data = tableData.map(row => {
    const rowData = {};
    tableCols.forEach(column => {
      rowData[column.label] = row[column.prop];
    });
    return rowData;
  });

  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, 'exported_table.xlsx');
};
//点击【考勤建立】按钮
const AttendanceVisible=ref(false)
const onAttendance = () => {
	Attendancevalue.value['day']=22
	const currentDate = new Date();
	// 获取当前年份和月份
	const year = currentDate.getFullYear();
	const month = currentDate.getMonth() + 1;
	// 如果月份小于 10，补零
	const formattedMonth = month < 10 ? '0' + month : month;
	console.log(year)
	console.log(month)
	
	Attendancevalue.value['month']=year.toString() + formattedMonth.toString();
	Attendancevalue.value['day']=22
  AttendanceVisible.value=true
};
 //获取小时数
 const getdays = () => {
	 console.log(Attendancevalue.value['day'])
 	if(Attendancevalue.value['day']!=''){
		Attendancevalue.value['typeA']=Attendancevalue.value['day']*7.5
		Attendancevalue.value['typeB']=Attendancevalue.value['day']*8
		Attendancevalue.value['typeC']=Attendancevalue.value['day']*8
	}else{
		ElMessage({
		  type: 'error',
		  message: '请输入法定天数'
		})
	}
 }
 //考勤建立弹窗确定
  const AttendanceDialog = async () => {
   _clockUpdate()
  }
  const closeAttendanceDialog = async () => {
   AttendanceVisible.value=false
  }
  //设置法定天数
  const _clockUpdate = async ()=>{
    const formattedData = {
     month:Attendancevalue.value['month'],
 	number:Attendancevalue.value['day'],
 	typeA:Attendancevalue.value['typeA'],
 	typeB:Attendancevalue.value['typeB'],
 	typeC:Attendancevalue.value['typeC'],
 	sys_id:sys_id
    };
    console.log(formattedData)
    const response = await clockUpdate(formattedData); 
    if (response.code === 0) {
     	  ElMessage({
     	    type: 'success',
     	    message: '成功'
     	  })
 		 AttendanceVisible.value=false 
     }else{
    	   ElMessage({
    	     type: 'error',
    	     message: '失败'
    	   })
     }
  }
</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;
}
.bt {
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
</style>