vue3+ts公司人员管理系统示例（接口版）

vue3+ts公司人员管理系统示例（接口版）

首先,让我们创建一个新的Vue 3项目:

vue create company-management-system
cd company-management-system
vue add typescript
npm install element-plus axios

然后,我们来创建必要的文件和组件:

1. 在src/types目录下创建Employee.ts:

// src/types/Employee.ts
export interface Employee {
  id: number;
  name: string;
  position: string;
  department: string;
  email: string;
}

2. 在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}`);
};

3. 创建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>

4. 创建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>

5. 更新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>

6. 在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');

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓