首页 > 其他分享 >vue3+ts公司人员管理系统示例(接口版)

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

时间:2024-08-05 22:27:26浏览次数:14  
标签:vue const 示例 employees ts Employee vue3 employee import

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;
}
  1. 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}`);
};
  1. 创建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>
  1. 创建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>
  1. 更新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>
  1. 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');

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

标签:vue,const,示例,employees,ts,Employee,vue3,employee,import
From: https://blog.csdn.net/qq_45914628/article/details/140937922

相关文章

  • React与Electron与ts一些组件配置与交互遇到的问题
    React同vue一样都是组件化的,React更加的复杂多变,当我们需要改变页面中的内容时不仅仅要在直接关联的布局页面进行修改,步骤大致如下:在当前直接布局页面中增加布局组件函数,比如:renderRightView(){//TODORV++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++re......
  • 用项目详细讲讲vue3路由
    1.【对路由的理解】VueRouter是Vue.js官方的路由管理器,它用于构建单页面应用(SPA),允许我们在不同的页面间进行导航,而无需刷新整个页面。 路由配置文件代码如下:import{createRouter,createWebHistory}from'vue-router'importHomefrom'@/pages/Home.vue'importNew......
  • Jetson Orin nano 安装ubuntu22.04
    最近项目需要给底盘部署建图以及定位导航,底盘用的是Jetsonorinnano,用的是Ros2humble版本的机器人操作系统,由于humble版本的系统只支持ubuntu22.04,所以需要在orinnano上重新烧录ubuntu22.04,但是这个版本的系统跟之前的有些不一样,也踩了很多坑,查阅了官网的相关资料后,已经......
  • WPF locate discreted points via periodically and set transparency via the alpha,
    //xaml<Windowx:Class="WpfApp229.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mi......
  • AT_abl_e Replace Digits 题解
    题目传送门前置知识线段树解法需要维护区间信息,考虑使用线段树维护。预处理出\(\overline{xx\dotsx}\),其中\(x\in\{1,2,3,4,5,6,7,8,9\}\),便于区间赋值。然后就是普通的线段树板子了。代码#include<bits/stdc++.h>usingnamespacestd;#definelllonglong#de......
  • 常见的PID的算法及代码示例
    常见的PID的算法及代码示例PID(比例-积分-微分)算法是控制系统中常用的一种反馈控制算法,它通过计算误差的比例、积分和微分来调整控制输入,以达到预定的控制目标。以下是一些常见的PID算法及代码示例:一、常见的PID算法位置式PID算法位置式PID算法直接计算控制量的绝对值,每次输......
  • [vue3] vue3初始化渲染流程
    组件初次渲染流程组件是对DOM树的抽象,组件的外观由template定义,模板在编译阶段会被转化为一个渲染函数,用于在运行时生成vnode。即组件在运行时的渲染步骤是:graphLR A[创建vnode]-->B[渲染vnode]-->C[生成DOM]vnode是一个用于描述视图的结构和属性的JavaScript对象。vnode......
  • echarts 关系图(graph)里的links的起点和终点设置无效
    问题描述,data里面数据也设置了id({id:1})这样设置的,links里面设置了source和target({source:0,target:1}),但是运行发现只显示了node没显示连线(edge),去看了文档描述 1、source  stringnumber 边的源节点名称的字符串,也支持使用数字表示源节点的索引。2、target stringn......
  • emsdk安装和编译2个C++基础示例
    参考地址:Downloadandinstall—Emscripten3.1.65-git(dev)documentation 环境:ubuntu24.04LTSgcc(Ubuntu13.2.0-23ubuntu4)13.2.0g++(Ubuntu13.2.0-23ubuntu4)13.2.0cmakeversion3.28.3 Firstcheckthe Platform-specificnotes belowandinstallan......
  • v-md-editor示例
    pnpmcreatefarm@latest#选择vue3cdprojectpnpmi@kangc/v-md-editor@next修改index.ts:import{createApp}from'vue';//import'./style.css';importAppfrom'./App.vue';importVueMarkdownEditorfrom'@kangc/v-md-ed......