Bagaimana untuk menjana modul penyelesaian lebih masa untuk kehadiran pekerja melalui PHP dan Vue

Cara menjana modul penyelesaian kerja lebih masa untuk kehadiran pekerja melalui PHP dan Vue

Abstrak: Artikel ini akan memperkenalkan cara melaksanakan modul penyelesaian lebih masa untuk kehadiran pekerja melalui teknologi PHP dan Vue. Pertama, kami akan menggunakan PHP untuk menulis kod sebelah pelayan untuk mengendalikan permintaan data dan mengira waktu lebih masa. Kemudian, kami akan menggunakan rangka kerja Vue untuk membina antara muka hadapan supaya pengguna boleh menyerahkan rekod kehadiran melalui halaman web dan melihat maklumat seperti waktu lebih masa dan perbelanjaan lebih masa. Pada akhir artikel, kami akan memberikan beberapa contoh kod khusus untuk membantu pembaca memahami dan mengamalkan dengan lebih baik.

Kata kunci: PHP, Vue, penyelesaian kerja lebih masa, kehadiran pekerja

1 Pengenalan
Dalam pengurusan perniagaan, penyelesaian lebih masa merupakan proses yang penting. Untuk memudahkan pekerja dan pengurus mengira dan mengira waktu bekerja, kami boleh menggunakan teknologi PHP dan Vue untuk membina modul penyelesaian lebih masa. Melalui antara muka web, pekerja boleh menyerahkan rekod kerja lebih masa dan melihat maklumat seperti waktu lebih masa dan gaji lebih masa.

2. Penulisan kod sebelah pelayan

1. Reka bentuk jadual pangkalan data
   Pertama, kita perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat kehadiran pekerja. Struktur jadual boleh mengandungi medan berikut: tarikh kehadiran, masa masuk, masa mula lebih masa, masa tamat lebih masa, tempoh lebih masa, dsb.
2. Penulisan kod PHP
   Pertama, kita perlu menulis skrip PHP untuk mengendalikan permintaan data dan mengira waktu kerja lebih masa. Skrip ini boleh merangkumi fungsi berikut:
3. Terima rekod kehadiran yang diserahkan oleh pelanggan dan masukkannya ke dalam pangkalan data.
4. Kira jam kerja lebih masa pekerja berdasarkan masa masuk mereka dan tetapkan waktu kerja.
5. Kira gaji lebih masa pekerja mengikut peraturan gaji lebih masa syarikat.

Berikut ialah contoh kod PHP mudah:

<?php
// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=test', 'root', 'password');

// 接收POST请求，插入考勤记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $attendanceData = $_POST['attendanceData'];
    
    // 将考勤数据插入数据库
    $insertAttendanceStmt = $db->prepare('INSERT INTO attendance (date, start_time, end_time) VALUES (?, ?, ?)');
    $insertAttendanceStmt->execute([$attendanceData['date'], $attendanceData['start_time'], $attendanceData['end_time']]);
}

// 计算加班时长和加班费用
$calculateOvertimeStmt = $db->prepare('SELECT SUM(TIME_TO_SEC(TIMEDIFF(end_time, start_time))) AS overtimeDuration FROM attendance');
$calculateOvertimeStmt->execute();
$overtimeDuration = $calculateOvertimeStmt->fetchColumn();

$overtimeFee = $overtimeDuration * 10;   // 假设每小时加班费用为10元

// 将加班时长和加班费用返回给客户端
$response = [
    'overtimeDuration' => $overtimeDuration,
    'overtimeFee' => $overtimeFee
];
echo json_encode($response);
?>

3. Pembinaan antara muka hadapan

1. Pasang Vue dan Vue Router
   Pertama, kita perlu memasang Vue dan Vue Router. Ia boleh dipasang melalui arahan npm:

   $ npm install vue vue-router

   Salin selepas log masuk
2. Buat komponen Vue
   Seterusnya, kita boleh mencipta komponen Vue untuk memaparkan rekod kehadiran pekerja dan maklumat lebih masa. Anda boleh menentukan pembolehubah yang diperlukan dalam atribut data komponen, dan kemudian gunakan pembolehubah ini dalam templat untuk paparan.

Berikut ialah contoh komponen Vue yang mudah:

<template>
  <div>
    <h2>员工加班记录</h2>
    <ul>
      <li v-for="record in attendanceRecords">
        {{ record.date }} - {{ record.start_time }} ~ {{ record.end_time }}
      </li>
    </ul>
    <h2>加班信息</h2>
    <p>加班时长：{{ overtimeDuration }}</p>
    <p>加班费用：{{ overtimeFee }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attendanceRecords: [],
      overtimeDuration: 0,
      overtimeFee: 0
    };
  },
  mounted() {
    // 向服务器请求加班信息
    fetch('/calculate-overtime.php')
      .then(response => response.json())
      .then(data => {
        this.overtimeDuration = data.overtimeDuration;
        this.overtimeFee = data.overtimeFee;
      });
    
    // 向服务器请求考勤记录
    fetch('/attendance-records.php')
      .then(response => response.json())
      .then(data => {
        this.attendanceRecords = data;
      });
  }
};
</script>

3. Mengkonfigurasi penghalaan
   Kami juga perlu mengkonfigurasi Penghala Vue untuk mengurus penghalaan halaman. Anda boleh menambah kod berikut pada fail utama untuk mencipta contoh penghalaan dan mengaitkan komponen dengan laluan:

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import AttendanceComponent from './components/AttendanceComponent.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     { path: '/attendance', component: AttendanceComponent }
   ];
   
   const router = new VueRouter({
     routes
   });
   
   new Vue({
     router
   }).$mount('#app');

   Salin selepas log masuk

   4. Ringkasan
   Dengan menggunakan teknologi PHP dan Vue, kami boleh melaksanakan modul penyelesaian lebih masa pekerja dengan mudah. Melalui antara muka web, pekerja boleh menyerahkan rekod kerja lebih masa dan melihat maklumat seperti waktu lebih masa dan gaji lebih masa. Artikel ini memberikan contoh kod mudah, dengan harapan dapat membantu pembaca memahami dan mengamalkan dengan lebih baik. Sudah tentu, lebih banyak isu fungsian dan keselamatan mungkin perlu dipertimbangkan dalam projek sebenar, yang perlu diselaraskan dan diperbaiki mengikut keadaan tertentu.

   Atas ialah kandungan terperinci Bagaimana untuk menjana modul penyelesaian lebih masa untuk kehadiran pekerja melalui PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!