PHP と Vue を使用して従業員の出勤のための休暇承認プロセスを構築する方法
- 王林オリジナル
- 2023-09-25 15:46:471367ブラウズ
PHP と Vue を使用して従業員の勤怠の休暇承認プロセスを構築する方法
企業規模が拡大し続けるにつれて、従業員の休暇承認プロセスは次のようなものになりました。ますます面倒です。業務効率を向上させるために、多くの企業が休暇承認に電子的な方法を採用し始めていますが、その中でも PHP と Vue は非常に強力な組み合わせです。この記事では、PHP と Vue を使用して従業員の出勤のための休暇承認プロセスを構築する方法を紹介し、いくつかの具体的なコード例を示します。
1. 準備
まず、PHP と Vue を実行するための簡単な環境を構築する必要があります。 XAMPP や WAMP などのソフトウェアを使用してローカル サーバーを構築できます。次に、従業員の休暇記録を保存するデータベースをサーバー上に作成します。次に、次のフィールドを含む「attendance」という名前のデータベース テーブルを作成します。
- id: 各休暇記録を区別するために使用される一意の識別子
- name: 従業員名
- start_date: 休暇開始日
- end_date: 休暇終了日
- reason: 休暇理由
- status: 休暇承認ステータス (承認保留/合格/拒否)
2. バックエンド開発
- フロントエンドのリクエストとデータベース操作を処理するために「api.php」という名前のファイルを作成します。以下は簡単なコード例です。
<?php
require_once 'config.php';
// 查询请假记录
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
} else {
echo "没有找到请假记录";
}
$conn->close();
}
// 创建请假记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 获取前端传递的数据
$name = $_POST['name'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
$reason = $_POST['reason'];
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "INSERT INTO attendance (name, start_date, end_date, reason, status) VALUES ('$name', '$start_date', '$end_date', '$reason', '待审批')";
if ($conn->query($sql) === TRUE) {
echo "请假申请已提交";
} else {
echo "请假申请提交失败";
}
$conn->close();
}
?>- データベース接続情報を保存する「config.php」という名前のファイルを作成します。以下は簡単なコード例です:
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '123456');
define('DB_NAME', 'attendance');
?>3. フロントエンド開発
- 「index.html」という名前のファイルを作成して従業員の休暇記録を表示し、退会リクエストフォーム。以下は簡単なコード例です:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工考勤请假审批流程</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<h1>员工考勤请假审批流程</h1>
<h2>请假记录</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>开始日期</th>
<th>结束日期</th>
<th>请假原因</th>
<th>审批状态</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, index) in records" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ record.name }}</td>
<td>{{ record.start_date }}</td>
<td>{{ record.end_date }}</td>
<td>{{ record.reason }}</td>
<td>{{ record.status }}</td>
</tr>
</tbody>
</table>
<h2>提交请假申请</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" v-model="name" required>
</div>
<div class="form-group">
<label for="start_date">开始日期</label>
<input type="text" class="form-control" id="start_date" v-model="start_date" required>
</div>
<div class="form-group">
<label for="end_date">结束日期</label>
<input type="text" class="form-control" id="end_date" v-model="end_date" required>
</div>
<div class="form-group">
<label for="reason">请假原因</label>
<textarea class="form-control" id="reason" v-model="reason" required></textarea>
</div>
<button type="submit" class="btn btn-primary">提交申请</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: '',
start_date: '',
end_date: '',
reason: '',
records: []
},
mounted() {
this.getRecords();
},
methods: {
getRecords() {
fetch('api.php')
.then(response => response.json())
.then(data => {
this.records = data;
});
},
submitForm() {
fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `name=${this.name}&start_date=${this.start_date}&end_date=${this.end_date}&reason=${this.reason}`
})
.then(response => response.text())
.then(data => {
alert(data);
this.getRecords();
});
}
}
});
</script>
</body>
</html>4. 実行効果
上記のコードを対応するファイルに保存し、これらのファイルをサーバーの対応するディレクトリに配置します。次に、ブラウザを開いて「http://localhost/index.html」にアクセスして効果を確認します。従業員の休暇記録がフォームに表示され、フォームから休暇申請を送信できます。
上記は、PHP と Vue を使用して従業員の出勤のための休暇承認プロセスを構築する簡単な紹介とコード例です。この簡単な例を通じて、企業は休暇承認の電子管理を実現し、作業効率を向上させ、面倒な手作業を削減することができます。もちろん、これは単なる実装であり、特定のアプリケーション シナリオではさらなる調整と改善が必要です。
以上がPHP と Vue を使用して従業員の出勤のための休暇承認プロセスを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。