


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]); });
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>
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds



L'utilisation de la chaîne JSON.Parse () à l'objet est la plus sûre et la plus efficace: assurez-vous que les chaînes sont conformes aux spécifications JSON et évitez les erreurs courantes. Utilisez Try ... Catch pour gérer les exceptions pour améliorer la robustesse du code. Évitez d'utiliser la méthode EVAL (), qui présente des risques de sécurité. Pour les énormes cordes JSON, l'analyse de fouet ou l'analyse asynchrone peut être envisagée pour optimiser les performances.

Implémentez les effets de défilement marquee / texte dans VUE, en utilisant des animations CSS ou des bibliothèques tierces. Cet article présente comment utiliser l'animation CSS: créer du texte de défilement et envelopper du texte avec & lt; div & gt;. Définissez les animations CSS et défini: caché, largeur et animation. Définissez les images clés, Set Transforment: Translatex () au début et à la fin de l'animation. Ajustez les propriétés d'animation telles que la durée, la vitesse de défilement et la direction.

La valeur par défaut de l'exportation est utilisée pour exporter les composants Vue et permettre à d'autres modules d'accéder. L'importation est utilisée pour importer des composants à partir d'autres modules, qui peuvent importer des composants uniques ou multiples.

La structure des données doit être clairement définie lorsque les boîtes déroulantes en cascade VUE et Element-UI transmettent les accessoires et que l'affectation directe des données statiques est prise en charge. Si les données sont obtenues dynamiquement, il est recommandé d'attribuer des valeurs dans le crochet du cycle de vie et de gérer les situations asynchrones. Pour les structures de données non standard, DefaultProps ou Convert Data Formats doivent être modifiés. Gardez le code simple et facile à comprendre avec des noms et commentaires de variables significatifs. Pour optimiser les performances, des techniques de défilement virtuel ou de chargement paresseux peuvent être utilisées.

Les valeurs de passage des composants Vue sont un mécanisme pour passer des données et des informations entre les composants. Il peut être mis en œuvre via des propriétés (accessoires) ou des événements: accessoires: déclarer les données à recevoir dans le composant et passer les données dans le composant parent. Événements: Utilisez la méthode $ EMIT pour déclencher un événement et écoutez-le dans le composant parent à l'aide de la directive V-on.

Dans vue.js, le chargement paresseux permet de charger dynamiquement les composants ou les ressources, en réduisant le temps de chargement des pages initiales et en améliorant les performances. La méthode de mise en œuvre spécifique comprend l'utilisation de & lt; keep-alive & gt; et & lt; composant est & gt; composants. Il convient de noter que le chargement paresseux peut provoquer des problèmes de FOUC (écran d'éclat) et ne doit être utilisé que pour les composants qui nécessitent un chargement paresseux pour éviter les frais généraux de performances inutiles.

Lors de la conversion des chaînes en objets dans vue.js, JSON.Parse () est préféré pour les chaînes JSON standard. Pour les chaînes JSON non standard, la chaîne peut être traitée en utilisant des expressions régulières et réduisez les méthodes en fonction du format ou du codé décodé par URL. Sélectionnez la méthode appropriée en fonction du format de chaîne et faites attention aux problèmes de sécurité et d'encodage pour éviter les bogues.

L'utilisation de la méthode de demande Axios dans Vue.js nécessite de suivre ces principes: obtenir: obtenir des ressources, ne pas modifier les données. POST: Créez ou soumettez des données, ajoutez ou modifiez des données. Put: Mettez à jour ou remplacez les ressources existantes. Supprimer: Supprimer la ressource du serveur.
