vue3+ts公司人员管理系统示例

vue3+ts公司人员管理系统示例

首先，创建一个新的 Vue 3 项目，并安装必要的依赖：

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

然后，在 src 目录下创建以下文件结构：

src/
  components/
    EmployeeList.vue
    EmployeeForm.vue
  types/
    Employee.ts
  App.vue
  main.ts

1. 在 src/types/Employee.ts 中定义 Employee 类型：

export interface Employee {
  id: number;
  name: string;
  position: string;
  department: string;
  email: string;
}

2. 在 src/components/EmployeeList.vue 中创建员工列表组件：

<template>
  <el-table :data="employees" style="width: 100%">
    <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="scope">
        <el-button size="small" @click="editEmployee(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteEmployee(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { Employee } from '../types/Employee';

const props = defineProps<{
  employees: Employee[];
}>();

const emit = defineEmits<{
  (e: 'edit', employee: Employee): void;
  (e: 'delete', id: number): void;
}>();

const editEmployee = (employee: Employee) => {
  emit('edit', employee);
};

const deleteEmployee = (id: number) => {
  emit('delete', id);
};
</script>

3. 在 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">{{ isEdit ? '更新' : '添加' }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { Employee } from '../types/Employee';

const props = defineProps<{
  employee?: Employee;
}>();

const emit = defineEmits<{
  (e: 'submit', employee: Omit<Employee, 'id'>): void;
}>();

const form = ref<Omit<Employee, 'id'>>({
  name: '',
  position: '',
  department: '',
  email: '',
});

const isEdit = ref(false);

watch(() => props.employee, (newEmployee) => {
  if (newEmployee) {
    form.value = { ...newEmployee };
    isEdit.value = true;
  } else {
    form.value = {
      name: '',
      position: '',
      department: '',
      email: '',
    };
    isEdit.value = false;
  }
}, { immediate: true });

const submitForm = () => {
  emit('submit', form.value);
};
</script>

4. 在 src/App.vue 中组合所有组件：

<template>
  <el-container>
    <el-header>公司人员管理系统</el-header>
    <el-main>
      <el-row>
        <el-col :span="16">
          <h2>员工列表</h2>
          <employee-list
            :employees="employees"
            @edit="editEmployee"
            @delete="deleteEmployee"
          />
        </el-col>
        <el-col :span="8">
          <h2>{{ isEditing ? '编辑员工' : '添加员工' }}</h2>
          <employee-form
            :employee="currentEmployee"
            @submit="submitEmployee"
          />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import EmployeeList from './components/EmployeeList.vue';
import EmployeeForm from './components/EmployeeForm.vue';
import { Employee } from './types/Employee';

const employees = ref<Employee[]>([
  { id: 1, name: '张三', position: '经理', department: '销售部', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', position: '开发工程师', department: '技术部', email: 'lisi@example.com' },
]);

const currentEmployee = ref<Employee | undefined>();

const isEditing = computed(() => !!currentEmployee.value);

const editEmployee = (employee: Employee) => {
  currentEmployee.value = employee;
};

const deleteEmployee = (id: number) => {
  employees.value = employees.value.filter(e => e.id !== id);
};

const submitEmployee = (employee: Omit<Employee, 'id'>) => {
  if (currentEmployee.value) {
    // 更新员工
    const index = employees.value.findIndex(e => e.id === currentEmployee.value!.id);
    if (index !== -1) {
      employees.value[index] = { ...employee, id: currentEmployee.value.id };
    }
  } else {
    // 添加新员工
    const newId = Math.max(...employees.value.map(e => e.id)) + 1;
    employees.value.push({ ...employee, id: newId });
  }
  currentEmployee.value = undefined;
};
</script>

<style>
.el-header {
  background-color: #409EFF;
  color: white;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
}

.el-main {
  padding: 20px;
}
</style>

5. 最后，在 src/main.ts 中引入 Element Plus：

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

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