PHPとVueを組み合わせて従業員の勤怠の休暇承認記録機能を実装する方法

PHP と Vue を組み合わせて従業員の勤怠管理の休暇承認記録機能を実装する方法

IT の急速な発展に伴い、導入する企業が増えています。従業員の勤怠と休暇の承認記録を電子的に管理します。 PHP はバックエンド開発言語として広く使用されており、効率性、安定性、拡張が容易であるという利点があります。人気のあるフロントエンド フレームワークとして、Vue は優れたユーザー インターフェイスとインタラクティブな効果を簡単に実現できます。この記事では、PHPとVueを組み合わせて従業員の勤怠の休暇承認記録機能を実装する方法と、具体的なコード例を紹介します。

始める前に、要件を決定し、データ構造を設計する必要があります。従業員勤怠の休暇承認記録機能は、主に休暇申請と承認記録の2つで構成されます。休暇申請には休暇の種類、開始時刻、終了時刻、休暇の理由などが含まれ、承認記録には承認者、承認時刻、承認意見などが含まれます。以下は簡単なデータ構造の例です。

Leave application form:

• id ​​(int) - Leave application ID
• type (string) - Leave type
• start_time (datetime) - 開始時刻
• end_time (datetime) - 終了時刻
• reason (string) - 退会理由

承認レコードフォーム ：

• id ​​(int) - 承認レコード ID
• application_id (int) - アプリケーション ID を残す
• approver (文字列) - 承認者
• approve_time (datetime) - 承認時刻
• comment (string) - 承認コメント

次に、PHP と Vue を使用して、それぞれバックエンド関数とフロントエンド関数を実装します。 。

1. バックエンド コード実装 (PHP):

まず、バックエンド ロジックを処理するための PHP ファイルを作成する必要があります。 「leave.php」という名前を付けるとしましょう。このファイルでは、いくつかの API を使用して、休暇申請と承認記録の追加、削除、変更、確認を処理します。

(1) 休暇申請リスト取得用 API :

<?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 :

<?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) 承認実績リスト取得 API :

<?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:

<?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);
?>

2. フロントエンド コードの実装 (Vue):

次に、Vue を使用して、フロントエンドの表示と対話ロジックを実装します。すべての Vue コンポーネントを JavaScript ファイル「app.js」で定義するとします。

(1) Vue インスタンスとルート コンポーネントの作成:

// 创建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) 休暇申請および承認レコードのコンポーネントの作成:

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4>{{ 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>{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

(3) HTML サンプルでの Vue の使用およびコンポーネント:

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

上記は、PHP と Vue を組み合わせて、従業員の勤怠の休暇承認記録機能を実装する具体的なコード例です。 PHPが提供するバックエンドAPIとVueが提供するフロントエンドコンポーネントにより、従業員の休暇申請や承認記録の表示・追加機能を実現します。実際のプロジェクトでは、ニーズに応じてさらに拡張・最適化することができます。この記事がお役に立てば幸いです!

以上がPHPとVueを組み合わせて従業員の勤怠の休暇承認記録機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。