Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi rakaman kelulusan cuti untuk kehadiran pekerja

Cara menggabungkan PHP dan Vue untuk melaksanakan fungsi rekod kelulusan cuti kehadiran pekerja

Dengan perkembangan pesat teknologi maklumat, lebih banyak dan lebih banyak Perusahaan mula menggunakan kaedah elektronik untuk menguruskan kehadiran pekerja dan meninggalkan rekod kelulusan. Sebagai bahasa pembangunan back-end yang digunakan secara meluas, PHP mempunyai kelebihan kecekapan tinggi, kestabilan dan pengembangan yang mudah. Sebagai rangka kerja bahagian hadapan yang popular, Vue boleh mencapai antara muka pengguna yang baik dan kesan interaktif dengan mudah. Artikel ini akan memperkenalkan cara menggabungkan PHP dan Vue untuk melaksanakan fungsi rekod kelulusan cuti kehadiran pekerja, dan menyediakan contoh kod khusus.

Sebelum kita mula, kita perlu menentukan keperluan dan mereka bentuk struktur data. Fungsi rekod kelulusan cuti kehadiran pekerja terutamanya merangkumi dua bahagian: permohonan cuti dan rekod kelulusan. Permohonan cuti termasuk jenis cuti, masa mula, masa tamat, sebab cuti dan maklumat lain, dan rekod kelulusan termasuk kelulusan, masa kelulusan, pendapat kelulusan dan maklumat lain. Berikut ialah contoh struktur data mudah:

Tinggalkan borang permohonan:

• id (int) - Tinggalkan ID permohonan
• type (rentetan) - Jenis cuti
• start_time (datetime) - Start time
• end_time (datetime) - End time
• reason (string) - Cuti minta Sebab

Jadual rekod kelulusan:

• id (int) - ID rekod kelulusan
#🎜🎜 (int#application_id - Tinggalkan ID permohonan
• pelulus (rentetan) - Pelulus
• masa_lulus (masa tarikh) - Masa kelulusan
• ulasan (rentetan) - Komen kelulusan #🎜 🎜#
• Seterusnya, kami akan menggunakan PHP dan Vue untuk melaksanakan fungsi back-end dan front-end masing-masing.

Pelaksanaan kod belakang (PHP):

1. Pertama, kita perlu mencipta fail PHP untuk mengendalikan logik bahagian belakang. Katakan kita namakannya "leave.php". Dalam fail ini, kami akan menggunakan beberapa API untuk memproses penambahan, pemadaman, pengubahsuaian dan semakan permohonan cuti serta rekod kelulusan.

(1) API untuk mendapatkan senarai permohonan cuti:

<?php
// 获取请假申请列表
function getLeaveApplications() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询请假申请列表
  $sql = "SELECT * FROM leave_application";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $applications = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $applications[] = $row;
  }
  return $applications;
}

// 调用API获取请假申请列表
$leaveApplications = getLeaveApplications();
echo json_encode($leaveApplications);
?>

(2) API untuk menambah permohonan cuti:

<?php
// 添加请假申请
function addLeaveApplication($type, $startTime, $endTime, $reason) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入请假申请
  $sql = "INSERT INTO leave_application (type, start_time, end_time, reason) VALUES ('$type', '$startTime', '$endTime', '$reason')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$type = $_POST['type'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];
$reason = $_POST['reason'];

// 调用API添加请假申请
addLeaveApplication($type, $startTime, $endTime, $reason);
?>

(3) Dapatkan kelulusan API untuk senarai rekod:

<?php
// 获取审批记录列表
function getApprovalRecords() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询审批记录列表
  $sql = "SELECT * FROM approval_record";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $records = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $records[] = $row;
  }
  return $records;
}

// 调用API获取审批记录列表
$approvalRecords = getApprovalRecords();
echo json_encode($approvalRecords);
?>

(4) API untuk menambah rekod kelulusan:

<?php
// 添加审批记录
function addApprovalRecord($applicationId, $approver, $approveTime, $comment) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入审批记录
  $sql = "INSERT INTO approval_record (application_id, approver, approve_time, comment) VALUES ('$applicationId', '$approver', '$approveTime', '$comment')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$applicationId = $_POST['applicationId'];
$approver = $_POST['approver'];
$approveTime = $_POST['approveTime'];
$comment = $_POST['comment'];

// 调用API添加审批记录
addApprovalRecord($applicationId, $approver, $approveTime, $comment);
?>

Pelaksanaan kod bahagian hadapan (Vue):

# 🎜🎜 #
2. Seterusnya, kami akan menggunakan Vue untuk melaksanakan paparan bahagian hadapan dan logik interaksi. Katakan kita mentakrifkan semua komponen Vue dalam fail JavaScript "app.js".

(1) Buat contoh Vue dan komponen akar:

// 创建Vue实例
var app = new Vue({
  el: "#app",
  data: {
    leaveApplications: [],
    approvalRecords: []
  },
  mounted() {
    // 在mounted钩子函数中获取请假申请列表和审批记录列表
    this.getLeaveApplications();
    this.getApprovalRecords();
  },
  methods: {
    // 获取请假申请列表
    getLeaveApplications() {
      axios.get("leave.php")
        .then(response => {
          this.leaveApplications = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加请假申请
    addLeaveApplication(application) {
      axios.post("leave.php", application)
        .then(response => {
          this.getLeaveApplications(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取审批记录列表
    getApprovalRecords() {
      axios.get("approval.php")
        .then(response => {
          this.approvalRecords = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加审批记录
    addApprovalRecord(record) {
      axios.post("approval.php", record)
        .then(response => {
          this.getApprovalRecords(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

(2) Buat komponen untuk permohonan cuti dan rekod kelulusan:

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4 id="application-type">{{ application.type }}</h4>
      <p>时间：{{ application.start_time }} - {{ application.end_time }}</p>
      <p>事由：{{ application.reason }}</p>
    </div>
  `
});

// 创建审批记录组件
Vue.component("approval-record", {
  props: ["record"],
  template: `
    <div>
      <h4 id="record-approver">{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

(3 ) Gunakan contoh dan komponen Vue dalam HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤请假审批记录</title>
</head>
<body>
  <div id="app">
    <h2 id="请假申请列表">请假申请列表</h2>
    <div>
      <leave-application v-for="application in leaveApplications" :application="application" :key="application.id"></leave-application>
    </div>
    <hr>
    <h2 id="审批记录列表">审批记录列表</h2>
    <div>
      <approval-record v-for="record in approvalRecords" :record="record" :key="record.id"></approval-record>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

Di atas ialah contoh kod khusus yang menggabungkan PHP dan Vue untuk melaksanakan fungsi rekod kelulusan cuti kehadiran pekerja. Melalui API bahagian belakang yang disediakan oleh PHP dan komponen bahagian hadapan yang disediakan oleh Vue, kami dapat merealisasikan fungsi paparan dan penambahan permohonan cuti pekerja dan rekod kelulusan. Dalam projek sebenar, kami boleh mengembangkan dan mengoptimumkan lagi mengikut keperluan. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi rakaman kelulusan cuti untuk kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!