vue3+ts公司人员管理系统示例(接口版)
首先,让我们创建一个新的Vue 3项目:
vue create company-management-system
cd company-management-system
vue add typescript
npm install element-plus axios
然后,我们来创建必要的文件和组件:
- 在
src/types
目录下创建Employee.ts
:
// src/types/Employee.ts
export interface Employee {
id: number;
name: string;
position: string;
department: string;
email: string;
}
- 在
src/api
目录下创建employees.ts
:
// src/api/employees.ts
import axios from 'axios';
import { Employee } from '@/types/Employee';
const API_URL = 'http://your-api-url.com/api';
export const getEmployees = async (): Promise<Employee[]> => {
const response = await axios.get(`${API_URL}/employees`);
return response.data;
};
export const addEmployee = async (employee: Omit<Employee, 'id'>): Promise<Employee> => {
const response = await axios.post(`${API_URL}/employees`, employee);
return response.data;
};
export const updateEmployee = async (employee: Employee): Promise<Employee> => {
const response = await axios.put(`${API_URL}/employees/${employee.id}`, employee);
return response.data;
};
export const deleteEmployee = async (id: number): Promise<void> => {
await axios.delete(`${API_URL}/employees/${id}`);
};
- 创建
EmployeeList.vue
组件:
<!-- src/components/EmployeeList.vue -->
<template>
<div>
<h2>员工列表</h2>
<el-table :data="employees">
<el-table-column prop="name" label="姓名" />
<el-table-column prop="position" label="职位" />
<el-table-column prop="department" label="部门" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button @click="editEmployee(row)" type="primary" size="small">编辑</el-button>
<el-button @click="deleteEmployeeConfirm(row.id)" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
import { Employee } from '@/types/Employee';
import { getEmployees, deleteEmployee } from '@/api/employees';
const employees = ref<Employee[]>([]);
const fetchEmployees = async () => {
employees.value = await getEmployees();
};
const editEmployee = (employee: Employee) => {
// Implement edit functionality
};
const deleteEmployeeConfirm = (id: number) => {
ElMessageBox.confirm('确定要删除这名员工吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
await deleteEmployee(id);
await fetchEmployees();
}).catch(() => {
// Cancelled
});
};
onMounted(fetchEmployees);
</script>
- 创建
EmployeeForm.vue
组件:
<!-- src/components/EmployeeForm.vue -->
<template>
<el-form :model="form" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="职位">
<el-input v-model="form.position" />
</el-form-item>
<el-form-item label="部门">
<el-input v-model="form.department" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Employee } from '@/types/Employee';
import { addEmployee, updateEmployee } from '@/api/employees';
const props = defineProps<{
employee?: Employee;
}>();
const emit = defineEmits(['submit']);
const form = ref({
name: props.employee?.name || '',
position: props.employee?.position || '',
department: props.employee?.department || '',
email: props.employee?.email || '',
});
const submitForm = async () => {
if (props.employee) {
const updatedEmployee = await updateEmployee({ ...props.employee, ...form.value });
emit('submit', updatedEmployee);
} else {
const newEmployee = await addEmployee(form.value);
emit('submit', newEmployee);
}
};
</script>
- 更新
App.vue
:
<!-- src/App.vue -->
<template>
<div id="app">
<h1>公司人员管理系统</h1>
<el-button @click="showAddForm = true" type="primary">添加员工</el-button>
<employee-list @edit="editEmployee" />
<el-dialog v-model="showAddForm" title="添加员工">
<employee-form @submit="handleSubmit" />
</el-dialog>
<el-dialog v-model="showEditForm" title="编辑员工">
<employee-form :employee="currentEmployee" @submit="handleSubmit" />
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import EmployeeList from '@/components/EmployeeList.vue';
import EmployeeForm from '@/components/EmployeeForm.vue';
import { Employee } from '@/types/Employee';
const showAddForm = ref(false);
const showEditForm = ref(false);
const currentEmployee = ref<Employee | null>(null);
const editEmployee = (employee: Employee) => {
currentEmployee.value = employee;
showEditForm.value = true;
};
const handleSubmit = () => {
showAddForm.value = false;
showEditForm.value = false;
currentEmployee.value = null;
// Refresh employee list
};
</script>
- 在
main.ts
中引入Element Plus:
// src/main.ts
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓