使用Vue3开发学生管理系统模板6 老师信息的实现
字段设计
- ID
- name：姓名，字符串，最大长度36
- age：年龄，数字
- gender：性别，字符串，最大长度6
- phone：电话，字符串，最大长度20
- height：身高，数字
- weight：体重，数字
- course_id：科目ID，字符串，最大长度36
- course：教学科目，字符串，最大长度36
- job：职位，字符串，最大长度255
- job_age：工龄，数字
- job_time：入职时间，日期类型
- salary：工资，浮点数
- detail：详细信息，文本类型
老师JSON数据构造
[
{
"id": "1",
"name": "张三的老师",
"phone": "18811118888",
"age": 33,
"gender": "男",
"height": 177,
"weight": 128,
"course_id": "1",
"course_name": "数学",
"job": "教导处主任",
"job_age": 5,
"job_time": "2018-06-09",
"salary": 12000,
"detail": "{}"
},
{
"id": "2",
"name": "李四的老师",
"phone": "18811118888",
"age": 33,
"gender": "男",
"height": 177,
"weight": 128,
"course_id": "1",
"course_name": "数学",
"job": "教导处主任",
"job_age": 5,
"job_time": "2018-06-09",
"salary": 12000,
"detail": "{}"
},
{
"id": "3",
"name": "王五的老师",
"phone": "18811118888",
"age": 33,
"gender": "男",
"height": 177,
"weight": 128,
"course_id": "1",
"course_name": "数学",
"job": "教导处主任",
"job_age": 5,
"job_time": "2018-06-09",
"salary": 12000,
"detail": "{}"
}
]
渲染老师表格信息
完整代码：
<script setup>
import {FilterMatchMode} from 'primevue/api';
import {ref, onBeforeMount} from 'vue';
import {useToast} from 'primevue/usetoast';
import sClasss from "@/assets/data/sclasss.json"
import students from "@/assets/data/students.json"
import studentHomes from "@/assets/data/student_home.json";
import sClasses from "@/assets/data/sclasss.json"
import teachers from "@/assets/data/teachers.json"
// 学生家长
const studentHome = ref({
id: 1,
name: "张三的家长",
gender: "男",
age: "41",
phone: "18888887777",
student_id: "1",
student_sclass_id: "1",
student_sclass: "初一（3）班",
student_name: "张三",
relation: "父子"
})
const sClass = ref(null) // 选取的学生家长信息
const student = ref(null) // 班长信息
const toast = useToast();
const isEdit = ref(false) // 是否为编辑
const sClassDialog = ref(false); // 学生家长弹窗是否显示
const deleteSClassLevelDialog = ref(false); // 确认删除学生家长弹窗是否显示
const deleteSClassesDialog = ref(false); // 批量删除学生家长弹窗是否显示
const selectedSClasses = ref(null);
const dt = ref(null);
const filters = ref({});
const submitted = ref(false);
onBeforeMount(() => {
initFilters();
});
/**
* 打开新增学生家长的弹窗
*/
function openNew() {
studentHome.value = {
id: 1,
name: "张三的家长",
gender: "男",
age: "41",
phone: "18888887777",
student_id: "1",
student_sclass_id: "1",
student_sclass: "初一（3）班",
student_name: "张三",
relation: "父子"
};
isEdit.value = false
submitted.value = false;
sClassDialog.value = true;
}
/**
* 新增学生家长
*/
function addStudentHome() {
console.log("新增学生家长：", sClass.value)
sClassDialog.value = false
}
const hideDialog = () => {
sClassDialog.value = false;
submitted.value = false;
};
/**
* 编辑学生家长信息
* @param data 要编辑的学生家长信息
*/
const editStudentHome = (data) => {
sClass.value = {...data};
console.log(sClass);
isEdit.value = true
sClassDialog.value = true;
};
/**
* 确认删除学生家长
* @param editStudentHome 要删除的学生家长信息
*/
const confirmDeleteStudentHome = (editStudentHome) => {
sClass.value = editStudentHome;
deleteSClassLevelDialog.value = true;
};
/**
* 删除学生家长
*/
const deleteStudentHome = () => {
sClasss = sClasss.filter((val) => val.id !== sClass.value.id);
deleteSClassLevelDialog.value = false;
sClass.value = {
id: "1",
name: "初一（1）班",
level: 7,
total: 20,
student_id: "1",
student_name: "张三",
student_phone: "188811118888",
teacher_id: "1",
teacher_name: "张三的老师",
teacher_phone: "188811118888",
detail: "{}"
};
toast.add({severity: 'success', summary: '成功', detail: '删除学生家长', life: 3000});
};
const exportCSV = () => {
dt.value.exportCSV();
};
const confirmDeleteSelected = () => {
deleteSClassesDialog.value = true;
};
/**
* 删除选中的学生家长
*/
const deleteSelectedStudentHome = () => {
users = users.filter((val) => !selectedSClasses.value.includes(val));
deleteSClassesDialog.value = false;
selectedSClasses.value = null;
toast.add({severity: 'success', summary: '成功', detail: '删除学生家长', life: 3000});
};
/**
* 初始化过滤器
*/
const initFilters = () => {
filters.value = {
global: {value: null, matchMode: FilterMatchMode.CONTAINS}
};
};
script>
<template>
<div class="grid">
<div class="col-12">
<div class="card">
<Toast/>
<Toolbar class="mb-4">
<template v-slot:start>
<div class="my-2">
<Button label="新增" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew"/>
<Button label="删除" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected"
:disabled="!selectedSClasses || !selectedSClasses.length"/>
div>
template>
<template v-slot:end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="导入"
class="mr-2 inline-block"/>
<Button label="导出" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"/>
template>
Toolbar>
<DataTable
ref="dt"
:value="teachers"
v-model:selection="selectedSClasses"
dataKey="id"
:paginator="true"
:rows="10"
:filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="显示第 {first}-{last} 条数据，共 {totalRecords} 条"
responsiveLayout="scroll"
>
<template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 class="m-0">老师管理h5>
<span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search"/>
<InputText v-model="filters['global'].value" placeholder="搜索..."/>
span>
div>
template>
<Column selectionMode="multiple" headerStyle="width: 3rem">Column>
<Column field="name" header="姓名" :sortable="true">Column>
<Column field="age" header="年龄" :sortable="true">Column>
<Column field="gender" header="性别" :sortable="true">Column>
<Column field="phone" header="电话" :sortable="true">Column>
<Column field="height" header="身高" :sortable="true">Column>
<Column field="weight" header="体重" :sortable="true">Column>
<Column field="course_name" header="教学科目" :sortable="true">Column>
<Column field="job" header="职位" :sortable="true">Column>
<Column field="job_age" header="工龄" :sortable="true">Column>
<Column field="job_time" header="入职时间" :sortable="true">Column>
<Column field="salary" header="工资" :sortable="true">Column>
<Column>
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"
@click="editStudentHome(slotProps.data)"/>
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
@click="confirmDeleteStudentHome(slotProps.data)"/>
template>
Column>
DataTable>
<Dialog v-model:visible="sClassDialog"
:style="{ width: '450px' }"
header="新增学生家长"
:modal="true"
class="p-fluid">
<div class="field">
<label for="name">姓名label>
<InputText id="name" v-model.trim="studentHome.name"/>
div>
<div class="field">
<label for="age">年龄label>
<InputText id="age" v-model.trim="studentHome.age"/>
div>
<div class="field">
<label for="gender">性别label>
<InputText id="gender" v-model.trim="studentHome.gender"/>
div>
<div class="field">
<label for="phone">电话label>
<InputText id="phone" v-model.trim="studentHome.phone"/>
div>
<template v-if="isEdit">
<div class="field">
<label for="student">学生label>
<Dropdown id="student" v-model="student" :options="students" optionLabel="name" placeholder="请选择"/>
div>
<div class="field">
<label for="relation">关系label>
<InputText id="relation" v-model.trim="studentHome.relation"/>
div>
<div class="field">
<label for="student">学生家长label>
<Dropdown id="student" v-model="sClass" :options="sClasses" optionLabel="name" placeholder="请选择"/>
div>
template>
<template #footer>
<Button label="取消" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
<Button label="保存" icon="pi pi-check" class="p-button-text" @click="addStudentHome"/>
template>
Dialog>
<Dialog v-model:visible="deleteSClassLevelDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"/>
<span v-if="user">您确认要删除 <b>{{ user.name }}b>吗？span>
div>
<template #footer>
<Button label="取消" icon="pi pi-times" class="p-button-text" @click="deleteSClassLevelDialog = false"/>
<Button label="确认" icon="pi pi-check" class="p-button-text" @click="deleteStudentHome"/>
template>
Dialog>
<Dialog v-model:visible="deleteSClassesDialog" :style="{ width: '450px' }" header="请确认" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"/>
<span v-if="user">删除后无法撤销，您确定要删除吗？span>
div>
<template #footer>
<Button label="取消" icon="pi pi-times" class="p-button-text" @click="deleteSClassesDialog = false"/>
<Button label="确认" icon="pi pi-check" class="p-button-text" @click="deleteSelectedStudentHome"/>
template>
Dialog>
div>
div>
div>
template>
渲染效果：
实现级别增删改查
完整代码：
<script setup>
import {FilterMatchMode} from 'primevue/api';
import {ref, onBeforeMount} from 'vue';
import {useToast} from 'primevue/usetoast';
import teachers from "@/assets/data/teachers.json"
// 老师
const teacher = ref({
id: "1",
name: "张三的老师",
phone: "18811118888",
age: 33,
gender: "男",
height: 177,
weight: 128,
course_id: "1",
course_name: "数学",
job: "教导处主任",
job_age: 5,
job_time: "2018-06-09",
salary: 12000,
detail: "{}"
})
const sClass = ref(null) // 选取的老师信息
const toast = useToast();
const isEdit = ref(false) // 是否为编辑
const teacherDialog = ref(false); // 老师弹窗是否显示
const deleteTeacherDialog = ref(false); // 确认删除老师弹窗是否显示
const deleteTeachersDialog = ref(false); // 批量删除老师弹窗是否显示
const selectedTeachers = ref(null);
const dt = ref(null);
const filters = ref({});
const submitted = ref(false);
onBeforeMount(() => {
initFilters();
});
/**
* 打开新增老师的弹窗
*/
function openNew() {
teacher.value = {
id: "1",
name: "张三的老师",
phone: "18811118888",
age: 33,
gender: "男",
height: 177,
weight: 128,
course_id: "1",
course_name: "数学",
job: "教导处主任",
job_age: 5,
job_time: "2018-06-09",
salary: 12000,
detail: "{}"
};
isEdit.value = false
submitted.value = false;
teacherDialog.value = true;
}
/**
* 新增老师
*/
function addStudentHome() {
console.log("新增老师：", sClass.value)
teacherDialog.value = false
}
const hideDialog = () => {
teacherDialog.value = false;
submitted.value = false;
};
/**
* 编辑老师信息
* @param data 要编辑的老师信息
*/
const editTeacher = (data) => {
teacher.value = {...data};
console.log(teacher);
isEdit.value = true
teacherDialog.value = true;
};
/**
* 确认删除老师
* @param data 要删除的老师信息
*/
const confirmDeleteTeacher = (data) => {
teacher.value = data;
deleteTeacherDialog.value = true;
};
/**
* 删除老师
*/
const deleteTeacher = () => {
sClasss = sClasss.filter((val) => val.id !== sClass.value.id);
deleteTeacherDialog.value = false;
sClass.value = {
id: 1,
name: "张三的家长",
gender: "男",
age: "41",
phone: "18888887777",
student_id: "1",
student_sclass_id: "1",
student_sclass: "初一（3）班",
student_name: "张三",
relation: "父子"
};
toast.add({severity: 'success', summary: '成功', detail: '删除老师', life: 3000});
};
const exportCSV = () => {
dt.value.exportCSV();
};
const confirmDeleteSelected = () => {
deleteTeachersDialog.value = true;
};
/**
* 删除选中的老师
*/
const deleteSelectedTeachers = () => {
users = users.filter((val) => !selectedTeachers.value.includes(val));
deleteTeachersDialog.value = false;
selectedTeachers.value = null;
toast.add({severity: 'success', summary: '成功', detail: '删除老师', life: 3000});
};
/**
* 初始化过滤器
*/
const initFilters = () => {
filters.value = {
global: {value: null, matchMode: FilterMatchMode.CONTAINS}
};
};
script>
<template>
<div class="grid">
<div class="col-12">
<div class="card">
<Toast/>
<Toolbar class="mb-4">
<template v-slot:start>
<div class="my-2">
<Button label="新增" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew"/>
<Button label="删除" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected"
:disabled="!selectedTeachers || !selectedTeachers.length"/>
div>
template>
<template v-slot:end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="导入"
class="mr-2 inline-block"/>
<Button label="导出" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"/>
template>
Toolbar>
<DataTable
ref="dt"
:value="teachers"
v-model:selection="selectedTeachers"
dataKey="id"
:paginator="true"
:rows="10"
:filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="显示第 {first}-{last} 条数据，共 {totalRecords} 条"
responsiveLayout="scroll"
>
<template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 class="m-0">老师管理h5>
<span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search"/>
<InputText v-model="filters['global'].value" placeholder="搜索..."/>
span>
div>
template>
<Column selectionMode="multiple" headerStyle="width: 3rem">Column>
<Column field="name" header="姓名" :sortable="true">Column>
<Column field="age" header="年龄" :sortable="true">Column>
<Column field="gender" header="性别" :sortable="true">Column>
<Column field="phone" header="电话" :sortable="true">Column>
<Column field="height" header="身高" :sortable="true">Column>
<Column field="weight" header="体重" :sortable="true">Column>
<Column field="course_name" header="教学科目" :sortable="true">Column>
<Column field="job" header="职位" :sortable="true">Column>
<Column field="job_age" header="工龄" :sortable="true">Column>
<Column field="job_time" header="入职时间" :sortable="true">Column>
<Column field="salary" header="工资" :sortable="true">Column>
<Column>
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"
@click="editTeacher(slotProps.data)"/>
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
@click="confirmDeleteTeacher(slotProps.data)"/>
template>
Column>
DataTable>
<Dialog v-model:visible="teacherDialog"
:style="{ width: '450px' }"
header="新增老师"
:modal="true"
class="p-fluid">
<div class="field">
<label for="name">姓名label>
<InputText id="name" v-model.trim="teacher.name"/>
div>
<div class="field">
<label for="age">年龄label>
<InputText id="age" v-model.trim="teacher.age"/>
div>
<div class="field">
<label for="gender">性别label>
<InputText id="gender" v-model.trim="teacher.gender"/>
div>
<div class="field">
<label for="phone">电话label>
<InputText id="phone" v-model.trim="teacher.phone"/>
div>
<div class="field">
<label for="height">身高label>
<InputText id="height" v-model.trim="teacher.height"/>
div>
<div class="field">
<label for="weight">体重label>
<InputText id="weight" v-model.trim="teacher.weight"/>
div>
<div class="field">
<label for="course">科目label>
<InputText id="course" v-model.trim="teacher.course_name"/>
div>
<div class="field">
<label for="job">职位label>
<InputText id="job" v-model.trim="teacher.job"/>
div>
<div class="field">
<label for="job_time">入职时间label>
<InputText id="job_time" v-model.trim="teacher.job_time"/>
div>
<div class="field">
<label for="salary">工资label>
<InputText id="salary" v-model.trim="teacher.salary"/>
div>
<template #footer>
<Button label="取消" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
<Button label="保存" icon="pi pi-check" class="p-button-text" @click="addStudentHome"/>
template>
Dialog>
<Dialog v-model:visible="deleteTeacherDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"/>
<span v-if="teacher">您确认要删除 <b>{{ teacher.name }}b>吗？span>
div>
<template #footer>
<Button label="取消" icon="pi pi-times" class="p-button-text" @click="deleteTeacherDialog = false"/>
<Button label="确认" icon="pi pi-check" class="p-button-text" @click="deleteTeacher"/>
template>
Dialog>
<Dialog v-model:visible="deleteTeachersDialog" :style="{ width: '450px' }" header="请确认" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"/>
<span v-if="teacher">删除后无法撤销，您确定要删除吗？span>
div>
<template #footer>
<Button label="取消" icon="pi pi-times" class="p-button-text" @click="deleteTeachersDialog = false"/>
<Button label="确认" icon="pi pi-check" class="p-button-text" @click="deleteSelectedTeachers"/>
template>
Dialog>
div>
div>
div>
template>
渲染效果：
