How to implement employee attendance leave function through PHP and Vue

How to implement the leave function of employee attendance through PHP and Vue requires specific code examples

With the rapid development of enterprise informatization, employee attendance management has gradually become a An important part of business management. Among them, the leave function is one of the common needs in daily management of employees. This article will introduce how to implement the leave function of employee attendance through PHP and Vue, and provide some specific code examples.

First, we need to create a database table to store employees' attendance data and leave records. The following is a simplified structure of the employee table and leave table:

Employee table (employees):

• id: employee ID
• name: employee name
• department: Department

Leave form (leaves):

• id: Leave record ID
• employee_id: Employee ID
• leave_type: Leave type (for example: personal leave, sick leave, annual leave)
• start_date: Leave start date
• end_date: Leave end date
• status: Leave status (for example : Pending approval, approved, rejected)

Next, we need to create a back-end PHP script to handle the business logic related to leave. The following is a sample code using 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]);
});

Here, we use the Slim framework to create a simple API interface and use Eloquent as the ORM to operate the database. You can choose the appropriate tool based on the actual development environment and framework.

Next, we need to create a front-end Vue component to display employees' leave information and provide the function of creating and updating leave records. The following is sample code for a simplified Vue component:

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

In this example, we use axios as the tool to send HTTP requests. You can also use other similar tools such as Vue Resource or fetch API.

Finally, add this Vue component to your application and ensure that the routing of the backend PHP script is configured correctly.

Through the above implementation, we can display the employee's leave request list on the front-end page, and provide the function of creating and updating leave request records. The backend PHP script is responsible for handling requests and database operations.

Summary: Implementing the leave function of employee attendance through PHP and Vue can effectively improve the efficiency and accuracy of attendance management. This example provides a simple implementation and provides some concrete code examples. You can make corresponding adjustments and expansions according to your own needs and actual development environment. Hope this article helps you!

The above is the detailed content of How to implement employee attendance leave function through PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!