Comment implémenter la fonction de congé de présence des employés via PHP et Vue

王林
Libérer: 2023-09-25 13:54:01
original
1214 Les gens l'ont consulté

Comment implémenter la fonction de congé de présence des employés via PHP et Vue

Comment implémenter la fonction de congé de présence des employés via PHP et Vue nécessite des exemples de code spécifiques

Avec le développement rapide de l'informatisation de l'entreprise, la gestion des présences des employés est progressivement devenue une partie importante de la gestion de l'entreprise. Parmi eux, la fonction congés fait partie des besoins courants dans la gestion quotidienne des salariés. Cet article présentera comment implémenter la fonction de congé de présence des employés via PHP et Vue, et fournira quelques exemples de code spécifiques.

Tout d’abord, nous devons créer une table de base de données pour stocker les données de présence des employés et les enregistrements de congés. Voici une structure simplifiée de la table des employés et de la table des congés :

Table des employés (employés) :

  • id : identifiant de l'employé
  • nom : nom de l'employé
  • département : département

table des feuilles (congés) :

  • id : identifiant du dossier de congé
  • employee_id : identifiant de l'employé
  • leave_type : type de congé (par exemple : congé personnel, congé de maladie, congé annuel)
  • start_date : date de début du congé
  • end_date : date de fin du congé
  • status : congé statut (par exemple : congé personnel, congé de maladie, congé annuel) : En attente d'approbation, approuvé, rejeté)

Ensuite, nous devons créer un script PHP back-end pour gérer la logique métier liée aux congés. Voici un exemple de code utilisant PHP :

// 员工请假列表接口
$app->get('/leaves', function($request, $response, $args) {
    $db = $this->get('db');

    $leaves = $db->table('leaves')
        ->join('employees', 'leaves.employee_id', '=', 'employees.id')
        ->select('leaves.*', 'employees.name')
        ->get();

    return $response->withJson($leaves);
});

// 创建员工请假记录接口
$app->post('/leaves', function($request, $response, $args) {
    $db = $this->get('db');
    $data = $request->getParsedBody();

    $leave = $db->table('leaves')->insert([
        'employee_id' => $data['employee_id'],
        'leave_type' => $data['leave_type'],
        'start_date' => $data['start_date'],
        'end_date' => $data['end_date'],
        'status' => '待审批'
    ]);

    return $response->withJson(['success' => true]);
});

// 更新员工请假记录接口
$app->put('/leaves/{id}', function($request, $response, $args) {
    $db = $this->get('db');
    $data = $request->getParsedBody();

    $leave = $db->table('leaves')->where('id', $args['id'])->update([
        'status' => $data['status']
    ]);

    return $response->withJson(['success' => true]);
});
Copier après la connexion

Ici, nous utilisons le framework Slim pour créer une interface API simple et utilisons Eloquent comme ORM pour faire fonctionner la base de données. Vous pouvez choisir l'outil approprié en fonction de l'environnement et du cadre de développement réels.

Ensuite, nous devons créer un composant Vue frontal pour afficher les informations sur les congés des employés et fournir la fonction de création et de mise à jour des enregistrements de congés. Voici l'exemple de code pour un composant Vue simplifié :

<template>
    <div>
        <table>
            <tr>
                <th>员工ID</th>
                <th>员工姓名</th>
                <th>请假类型</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="leave in leaves">
                <td>{{ leave.employee_id }}</td>
                <td>{{ leave.name }}</td>
                <td>{{ leave.leave_type }}</td>
                <td>{{ leave.start_date }}</td>
                <td>{{ leave.end_date }}</td>
                <td>{{ leave.status }}</td>
                <td>
                    <button v-if="leave.status === '待审批'" @click="approveLeave(leave.id)">
                        批准
                    </button>
                    <button v-else-if="leave.status === '已批准'" @click="rejectLeave(leave.id)">
                        拒绝
                    </button>
                </td>
            </tr>
        </table>
        <form @submit.prevent="createLeave">
            <input type="text" v-model="newLeave.employee_id" placeholder="员工ID" required>
            <input type="text" v-model="newLeave.leave_type" placeholder="请假类型" required>
            <input type="date" v-model="newLeave.start_date" placeholder="开始日期" required>
            <input type="date" v-model="newLeave.end_date" placeholder="结束日期" required>
            <button type="submit">提交请假申请</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            leaves: [],
            newLeave: {
                employee_id: '',
                leave_type: '',
                start_date: '',
                end_date: ''
            }
        };
    },
    mounted() {
        this.getLeaves();
    },
    methods: {
        getLeaves() {
            // 使用Vue Resource或axios等工具发送GET请求获取请假数据
        },
        createLeave() {
            // 使用Vue Resource或axios等工具发送POST请求创建请假记录
        },
        approveLeave(id) {
            // 使用Vue Resource或axios等工具发送PUT请求更新请假记录的状态为已批准
        },
        rejectLeave(id) {
            // 使用Vue Resource或axios等工具发送PUT请求更新请假记录的状态为已拒绝
        }
    }
};
</script>
Copier après la connexion

Dans cet exemple, nous utilisons axios comme outil pour envoyer des requêtes HTTP. Vous pouvez également utiliser d'autres outils similaires tels que Vue Resource ou fetch API.

Enfin, ajoutez ce composant Vue à votre application et assurez-vous de configurer correctement le routage du script PHP backend.

Grâce à la mise en œuvre ci-dessus, nous pouvons afficher la liste des demandes de congé de l'employé sur la page frontale et fournir la fonction de création et de mise à jour des enregistrements de demandes de congé. Le script PHP backend est responsable du traitement des requêtes et des opérations de base de données.

Résumé : La mise en œuvre de la fonction de congé de présence des employés via PHP et Vue peut améliorer efficacement l'efficacité et la précision de la gestion des présences. Cet exemple fournit une implémentation simple et fournit quelques exemples de code concrets. Vous pouvez effectuer les ajustements et extensions correspondants en fonction de vos propres besoins et de votre environnement de développement réel. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!