Bagaimana untuk melaksanakan fungsi cuti kehadiran pekerja melalui PHP dan Vue

Cara melaksanakan fungsi cuti kehadiran pekerja melalui PHP dan Vue memerlukan contoh kod khusus

Dengan perkembangan pesat maklumat perusahaan, pekerja Pengurusan kehadiran telah beransur-ansur menjadi bahagian penting dalam pengurusan perusahaan. Antaranya, fungsi cuti merupakan salah satu keperluan biasa dalam pengurusan harian pekerja. Artikel ini akan memperkenalkan cara melaksanakan fungsi cuti kehadiran pekerja melalui PHP dan Vue, dan menyediakan beberapa contoh kod khusus.

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan data kehadiran pekerja dan meninggalkan rekod. Berikut ialah struktur jadual pekerja dan jadual cuti yang dipermudahkan:

Jadual pekerja (pekerja):

• id: ID pekerja
#🎜 🎜 #nama: Nama pekerja
• jabatan: Jabatan

Daun:

#🎜:🎜 Rekod ID 🎜#

id_pekerja: ID Pekerja
• jenis_cuti: Jenis cuti (contohnya: cuti peribadi, cuti sakit, cuti tahunan)
• tarikh_mula: Tarikh mula cuti#🎜 🎜#
• tarikh_akhir: Tarikh tamat cuti
• status: Status cuti (contohnya: menunggu kelulusan, diluluskan, ditolak)
• Seterusnya, Kami perlukan untuk mencipta skrip PHP back-end untuk mengendalikan logik perniagaan yang berkaitan dengan cuti. Berikut ialah contoh kod menggunakan 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]);
  });

Di sini, kami menggunakan rangka kerja Slim untuk mencipta antara muka API yang mudah dan menggunakan Eloquent sebagai ORM untuk mengendalikan pangkalan data. Anda boleh memilih alat yang sesuai berdasarkan persekitaran dan rangka kerja pembangunan sebenar.

Seterusnya, kami perlu mencipta komponen Vue bahagian hadapan untuk memaparkan maklumat cuti pekerja dan menyediakan fungsi mencipta dan mengemas kini rekod cuti. Berikut ialah contoh kod komponen Vue yang dipermudahkan:

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

Dalam contoh ini, kami menggunakan axios sebagai alat untuk menghantar permintaan HTTP. Anda juga boleh menggunakan alatan lain yang serupa seperti Vue Resource atau fetch API.

Akhir sekali, tambah komponen Vue ini pada aplikasi anda dan pastikan anda mengkonfigurasi penghalaan untuk skrip PHP bahagian belakang dengan betul.

Melalui pelaksanaan di atas, kami boleh memaparkan senarai cuti pekerja di muka hadapan, dan menyediakan fungsi mencipta dan mengemas kini rekod cuti. Skrip PHP bahagian belakang bertanggungjawab untuk mengendalikan permintaan dan operasi pangkalan data.

Ringkasan: Melaksanakan fungsi cuti kehadiran pekerja melalui PHP dan Vue boleh meningkatkan kecekapan dan ketepatan pengurusan kehadiran dengan berkesan. Contoh ini menyediakan pelaksanaan yang mudah dan menyediakan beberapa contoh kod konkrit. Anda boleh membuat pelarasan dan pengembangan yang sepadan mengikut keperluan anda sendiri dan persekitaran pembangunan sebenar. Harap artikel ini membantu anda!

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