1040 lines
30 KiB
Vue
1040 lines
30 KiB
Vue
<template>
|
|
<commonManage>
|
|
<div class="head">
|
|
<div class="left">
|
|
<p class="desctipt">姓名:</p>
|
|
<el-input v-model="data.tableNeed.TeacherName" class="m-2" placeholder="请输入姓名" />
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">电话:</p>
|
|
<el-input v-model="data.tableNeed.PhoneNo" class="m-2" placeholder="请输入电话" />
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">性别:</p>
|
|
<el-select v-model="data.tableNeed.Sex" class="m-2">
|
|
<el-option v-for="item in data.options" :key="item.id" :label="item.label" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">状态:</p>
|
|
<el-select v-model="data.tableNeed.TeacherStatus" class="m-2">
|
|
<el-option v-for="item in data.options1" :key="item.id" :label="item.label" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="right">
|
|
<p v-for="(item, index) in handelData" :key="index" :class="item.className" @click="btnClick(item.engName)">
|
|
{{ item.chinName }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cont">
|
|
<commonTable :tableNeed="data.tableNeed" @changeSize="changePage" @changeTab="changeTd" @handleEdit="editTable" @toView="toView1" @handleDelete="deleteOne" @handleSizeChange="handleSizeChange" @unset-key="unsetKey" @go-up="goUp" v-if="data.tableNeed.refresh"></commonTable>
|
|
</div>
|
|
</commonManage>
|
|
<div class="addTeacherDrawer">
|
|
<el-drawer v-model="data.drawerDialog.show" direction="rtl" size="50%" :close-on-click-modal="false" :show-close="false">
|
|
<template #header>
|
|
<p class="title">{{ data.dialogTitle }}</p>
|
|
</template>
|
|
<template #default>
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="教师姓名" prop="teacherName">
|
|
<el-input v-model="ruleForm.teacherName" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="性别" prop="sex">
|
|
<el-select v-model="ruleForm.sex" class="m-2">
|
|
<el-option v-for="item in data.options.slice(1, 3)" :key="item.id" :label="item.label" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码" prop="teacherPhoneNo">
|
|
<el-input v-model="ruleForm.teacherPhoneNo" />
|
|
</el-form-item>
|
|
<el-form-item label="登录密码" prop="password" v-if="data.isAdd">
|
|
<el-input v-model="ruleForm.password" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="入职时间" prop="inductionDate">
|
|
<el-date-picker v-model="ruleForm.inductionDate" type="datetime" placeholder="请选择入职时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="年级-班级" prop="gradeId">
|
|
<el-cascader v-model="ruleForm.classIds" :options="options" lazy :props="cascaderProps" filterable></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="教师照片" prop="teacherPhoto" style="display: flex; align-items: center">
|
|
<el-upload class="upload-demo" ref="uploadRef" drag :before-upload="handleBeforeUpload" :file-list="ruleForm.fileList">
|
|
<div class="el-upload__text">将文件拖拽到这里或<em>点击上传</em></div>
|
|
</el-upload>
|
|
<div class="coverImg" v-if="coverImgUrl">
|
|
<img style="width: 100px; height: 100px; margin-left: 10px; object-fit: contain" :src="coverImgUrl" alt="封面" />
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<template #footer>
|
|
<div class="footer">
|
|
<p class="cancle" @click="cancelClick(0)">取消</p>
|
|
<p class="confirm" @click="confirmClick">确定</p>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
<div class="addTeacherDrawer">
|
|
<el-drawer v-model="data.drawerDialog.show1" direction="rtl" size="50%" :close-on-click-modal="false" :show-close="false">
|
|
<template #header>
|
|
<p class="title">{{ data.dialogTitle }}</p>
|
|
</template>
|
|
<template #default>
|
|
<el-form ref="ruleFormRef1" :model="ruleForm1" :rules="rules" label-width="120px" class="demo-ruleForm" size="default" status-icon>
|
|
<el-form-item label="教师姓名" prop="teacherName">
|
|
<el-input v-model="ruleForm1.teacherName" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="教师照片" prop="teacherPhoto">
|
|
<el-upload action="" list-type="picture-card" :auto-upload="false">
|
|
<el-icon>
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="性别" prop="sex">
|
|
<el-select v-model="ruleForm1.sex" class="m-2">
|
|
<el-option v-for="item in data.options.slice(1, 3)" :key="item.id" :label="item.label" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码" prop="teacherPhoneNo">
|
|
<el-input v-model="ruleForm1.teacherPhoneNo" />
|
|
</el-form-item>
|
|
<el-form-item label="登录密码" prop="password" v-if="data.isAdd">
|
|
<el-input v-model="ruleForm1.password" />
|
|
</el-form-item>
|
|
<el-form-item label="入职时间" prop="inductionDate">
|
|
<el-date-picker v-model="ruleForm1.inductionDate" type="datetime" placeholder="请选择入职时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="年级-班级" prop="classIds">
|
|
<el-cascader v-model="ruleForm1.classIds" :options="options" :props="cascaderProps" lazy filterable></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="教师照片" prop="teacherPhoto" style="display: flex; align-items: center">
|
|
<el-upload class="upload-demo" ref="uploadRef1" drag :before-upload="handleBeforeUpload1" :file-list="ruleForm1.fileList">
|
|
<div class="el-upload__text">将文件拖拽到这里或<em>点击上传</em></div>
|
|
</el-upload>
|
|
<div class="coverImg" v-if="coverImgUrl1">
|
|
<img style="width: 100px; height: 100px; margin-left: 10px; object-fit: contain" :src="coverImgUrl1" alt="封面" />
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<template #footer>
|
|
<div class="footer">
|
|
<p class="cancle" @click="cancelClick(1)">取消</p>
|
|
<p class="confirm" @click="confirmClick">确定</p>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import commonManage from "@/components/commonManage/index.vue";
|
|
import commonTable from "@/components/commonTable/index.vue";
|
|
import commonDialog from "@/components/commonDialog/index.vue";
|
|
import { useRoute } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
import * as _api from "@/api/grade";
|
|
import eventBus from "@/eventBus.js";
|
|
import axios from "axios";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
const form = new FormData();
|
|
const form1 = new FormData();
|
|
const ruleFormRef = ref(null);
|
|
const ruleFormRef1 = ref(null);
|
|
const route = useRoute();
|
|
const currentRoute = route.path; //获取当前页面路由
|
|
const store = useStore();
|
|
const upload = ref();
|
|
const cascaderProps = {
|
|
multiple: true,
|
|
};
|
|
let coverImgUrl = ref("");
|
|
let coverImgUrl1 = ref("");
|
|
let buttons = store.getters.getPermission(currentRoute).permission;
|
|
console.log(buttons, "buttonsbuttonsbuttons");
|
|
const uploadRef1 = ref(null);
|
|
let contrast = {
|
|
查询: "Search",
|
|
重置: "Audit",
|
|
新增: "addTeacher",
|
|
导出: "Export",
|
|
}; //对照表
|
|
let handelData = ref<any>([]); //接收处理后的按钮数据
|
|
buttons.map((i) => {
|
|
handelData.value.push({
|
|
engName: i,
|
|
chinName: "",
|
|
className: i,
|
|
});
|
|
});
|
|
//给每个按钮添加中文名
|
|
for (let i in contrast) {
|
|
handelData.value.map((v) => {
|
|
if (v.engName == contrast[i]) {
|
|
v.chinName = i;
|
|
}
|
|
});
|
|
}
|
|
//按钮排序
|
|
const customOrder = {
|
|
Search: 2,
|
|
Audit: 1,
|
|
addTeacher: 3,
|
|
Export: 4,
|
|
};
|
|
handelData.value.sort((a, b) => {
|
|
const orderA = customOrder[a.engName];
|
|
const orderB = customOrder[b.engName];
|
|
|
|
if (orderA < orderB) {
|
|
return -1;
|
|
} else if (orderA > orderB) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
});
|
|
const ruleForm = ref({
|
|
teacherName: "",
|
|
teacherPhoto: "",
|
|
sex: "",
|
|
teacherPhoneNo: "",
|
|
password: "000000",
|
|
inductionDate: "",
|
|
gradeId: "",
|
|
classIds: [],
|
|
fileList: [],
|
|
});
|
|
const ruleForm1 = ref({
|
|
teacherName: "",
|
|
teacherPhoto: "",
|
|
sex: "",
|
|
teacherPhoneNo: "",
|
|
password: "",
|
|
inductionDate: "",
|
|
gradeId: "",
|
|
classIds: [],
|
|
fileList: [],
|
|
});
|
|
const rules = ref({
|
|
teacherName: [
|
|
{
|
|
required: true,
|
|
message: "请输入教师姓名",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
teacherPhoneNo: [
|
|
{
|
|
required: true,
|
|
message: "请输入手机号码",
|
|
trigger: "blur",
|
|
},
|
|
{
|
|
validator: validatePhone,
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
inductionDate: [
|
|
{
|
|
type: "date",
|
|
required: true,
|
|
message: "请选择入职时间",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: "请输入登录密码",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
sex: [
|
|
{
|
|
required: true,
|
|
message: "请选择性别",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
classIds: [
|
|
{
|
|
required: false,
|
|
message: "请选择班级",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
});
|
|
const options = ref([]);
|
|
const data = ref({
|
|
gender: 0,
|
|
nameIpt: "",
|
|
status: 0,
|
|
options1: [
|
|
{
|
|
id: "",
|
|
label: "全部",
|
|
},
|
|
{
|
|
id: 1,
|
|
label: "在职",
|
|
},
|
|
{
|
|
id: 2,
|
|
label: "离职",
|
|
},
|
|
],
|
|
options: [
|
|
{
|
|
id: "",
|
|
label: "全部",
|
|
},
|
|
{
|
|
id: 1,
|
|
label: "男",
|
|
},
|
|
{
|
|
id: 2,
|
|
label: "女",
|
|
},
|
|
],
|
|
|
|
tableNeed: {
|
|
showKey: 2,
|
|
showGoup: 2,
|
|
showDetail: 2,
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
refresh: false,
|
|
TeacherName: "",
|
|
PhoneNo: "",
|
|
Sex: "",
|
|
TeacherStatus: "",
|
|
showDel: 2,
|
|
tableLabel: [
|
|
{
|
|
label: "序号",
|
|
prop: "ind",
|
|
width: 70,
|
|
},
|
|
{
|
|
label: "教师姓名",
|
|
prop: "teacherName",
|
|
width: 130,
|
|
},
|
|
{
|
|
label: "性别",
|
|
prop: "sex",
|
|
width: 80,
|
|
},
|
|
{
|
|
label: "电话",
|
|
prop: "phoneNo",
|
|
// width: 145
|
|
},
|
|
{
|
|
label: "班级数量",
|
|
prop: "classCount",
|
|
// width: 145
|
|
},
|
|
{
|
|
label: "学生数量",
|
|
prop: "studentCount",
|
|
// width: 145
|
|
},
|
|
{
|
|
label: "状态",
|
|
prop: "teacherStatus",
|
|
// width: 145
|
|
},
|
|
],
|
|
tableData: [],
|
|
},
|
|
drawerDialog: {
|
|
show: false,
|
|
show1: false,
|
|
GradeData: [],
|
|
classes: [],
|
|
mutily: { multiple: true },
|
|
},
|
|
dialogTitle: "添加教师",
|
|
isAdd: true,
|
|
});
|
|
// 上传封面
|
|
const handleBeforeUpload = (file: File) => {
|
|
// let k = {
|
|
// teacherName: '',
|
|
// teacherPhoto: '',
|
|
// sex: '',
|
|
// teacherPhoneNo: '',
|
|
// password: '123456',
|
|
// inductionDate: '',
|
|
// gradeId: '',
|
|
// classIds: [],
|
|
// fileList: []
|
|
// }
|
|
if (!ruleForm.value.teacherName && !ruleForm.value.teacherPhoneNo) {
|
|
return ElMessage.error("请选填写信息再上传头像");
|
|
}
|
|
console.log(file, "fileeeeee");
|
|
form.delete("file");
|
|
// 将文件手动存储到 fileList 中
|
|
ruleForm.value.fileList = [file];
|
|
form.append("file", file);
|
|
AddPhoto(ruleForm.value);
|
|
};
|
|
// 编辑封面
|
|
const handleBeforeUpload1 = (file: File) => {
|
|
if (!ruleForm1.value.teacherName && !ruleForm1.value.teacherPhoneNo && !ruleForm1.value.gradeId && !ruleForm1.value.classIds) {
|
|
return ElMessage.error("请选填写信息再上传头像");
|
|
}
|
|
uploadRef1.value.clearFiles();
|
|
console.log(file, "fileeeeee");
|
|
form.delete("file");
|
|
// 将文件手动存储到 fileList 中
|
|
ruleForm1.value.fileList = [file];
|
|
form.append("file", file);
|
|
AddPhoto(ruleForm1.value);
|
|
};
|
|
|
|
// 上传活动照片
|
|
async function AddPhoto(val) {
|
|
const options = {
|
|
method: "POST",
|
|
url: `/api/Teacher/UploadTeacherPhoto?teacherPhoneNo=${val.teacherPhoneNo}&teacherName=${val.teacherName}`,
|
|
headers: {
|
|
Accept: "",
|
|
"content-type": "multipart/form-data; boundary=---011000010111000001101001",
|
|
},
|
|
data: form,
|
|
};
|
|
|
|
axios
|
|
.request(options)
|
|
.then(function (response) {
|
|
// console.log(response,'response')
|
|
if (response.data.code == 200) {
|
|
const newUrl = response.data.data + "?timestamp=" + new Date().getTime();
|
|
if (data.value.dialogTitle != "编辑教师") {
|
|
coverImgUrl.value = newUrl;
|
|
} else {
|
|
coverImgUrl1.value = newUrl;
|
|
ruleForm1.value.fileList = [];
|
|
}
|
|
} else {
|
|
ElMessage.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}
|
|
function unsetKey(e) {
|
|
console.log(e, "eeeeee");
|
|
ElMessageBox.confirm(`<p><span class="confirm-tip">您正在将密码重置为${"000000"}</span>,<span>您还要继续吗?</span></p>`, "警告", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
dangerouslyUseHTMLString: true, // 允许使用 HTML
|
|
})
|
|
.then(() => {
|
|
// ElMessage({
|
|
// type: 'success',
|
|
// message: '用户确认',
|
|
// });
|
|
let params = {
|
|
teacherPhoneNo: e.phoneNo,
|
|
};
|
|
UpdateTeacherPwdApi(params);
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "info",
|
|
message: "用户取消",
|
|
});
|
|
});
|
|
}
|
|
function goUp(e) {
|
|
console.log(e, "eeeeeeegoUp");
|
|
ElMessageBox.confirm(`<p><span class="confirm-tip">您正在将此老师设置为离职状态</span>,<span>您还要继续吗?</span></p>`, "警告", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
dangerouslyUseHTMLString: true, // 允许使用 HTML
|
|
})
|
|
.then(() => {
|
|
let parmas = {
|
|
teacherPhoneNo: e.phoneNo,
|
|
status: 2,
|
|
};
|
|
UpdateTeacherStatusApi(parmas);
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: "info",
|
|
message: "用户取消",
|
|
});
|
|
});
|
|
}
|
|
// // 点击年级时加载班级数据
|
|
// const loadClasses = async (node, resolve) => {
|
|
// const { value } = node;
|
|
// console.log(value, 'value')
|
|
// try {
|
|
// const classes = await GetClassNames(value, '0');
|
|
// console.log(classes, 'classes')
|
|
// const children = classes.map(cls => ({
|
|
// value: cls.id,
|
|
// label: cls.className,
|
|
// leaf: true,
|
|
// }));
|
|
// resolve(children);
|
|
// } catch (error) {
|
|
// console.error('获取班级数据失败:', error);
|
|
// resolve([]);
|
|
// }
|
|
// };
|
|
// 数据转换函数
|
|
function transformData(data) {
|
|
return data.map((grade) => ({
|
|
value: grade.id,
|
|
label: grade.gradeName,
|
|
children: grade.class.map((cls) => ({
|
|
value: cls.id,
|
|
label: cls.className,
|
|
})),
|
|
}));
|
|
}
|
|
// 点击切换年级
|
|
const changeGrade = (e, num) => {
|
|
console.log(e, "eeeeeeeeeeeeeee");
|
|
if (num == 0) {
|
|
ruleForm.value.classIds = [];
|
|
GetClassNames(e, 0);
|
|
} else if (num == 1) {
|
|
ruleForm1.value.classIds = [];
|
|
GetClassNames(e, 1);
|
|
}
|
|
};
|
|
//验证手机格式
|
|
function validatePhone(rule, value, callback) {
|
|
const phoneRegex = /^[1-9]\d{10}$/; // Assuming a simple format of 11 digits starting with a non-zero digit
|
|
|
|
if (!phoneRegex.test(value)) {
|
|
callback(new Error("请输入正确的手机号码格式"));
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
//提交表单
|
|
const submitForm = async (formEl) => {
|
|
if (!formEl) return;
|
|
await formEl.validate((valid, fields) => {
|
|
if (valid) {
|
|
console.log("submit!");
|
|
console.log(ruleForm.value, "rulelelel");
|
|
|
|
switch (data.value.isAdd) {
|
|
case true:
|
|
AddTeachers(ruleForm.value);
|
|
break;
|
|
case false:
|
|
// ruleForm.value.sex = '1'
|
|
ModifyTeachers(ruleForm1.value);
|
|
break;
|
|
}
|
|
} else {
|
|
console.log("error submit!", fields);
|
|
}
|
|
});
|
|
};
|
|
//年级接口
|
|
async function GetGradeNames() {
|
|
try {
|
|
const res = await _api.GetGradeName();
|
|
if (res.code == 200) {
|
|
if (res.data) {
|
|
console.log(res.data, "res.GetGradeNamesGetGradeNames");
|
|
let k = transformData(res.data);
|
|
options.value = k;
|
|
data.value.drawerDialog.GradeData = res.data;
|
|
}
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
//班级接口
|
|
async function GetClassNames(val, num) {
|
|
try {
|
|
const res = await _api.GetClassNames(val);
|
|
if (res.code == 200) {
|
|
return res.data;
|
|
// console.log(res.data, 'res.GetClassNames')
|
|
// if (res.data) {
|
|
// data.value.drawerDialog.classes = res.data
|
|
// options.value = transformData(data.value.drawerDialog.GradeData, data.value.drawerDialog.classes)
|
|
// console.log(options.value, 'options.valueoptions.valueoptions.value')
|
|
// }
|
|
// } else {
|
|
// ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
// 更新老师状态
|
|
async function UpdateTeacherStatusApi(val) {
|
|
try {
|
|
const res = await _api.UpdateTeacherStatus(val);
|
|
if (res.code == 200) {
|
|
ElMessage({
|
|
type: "success",
|
|
message: res.data,
|
|
});
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
//
|
|
async function UpdateTeacherPwdApi(val) {
|
|
try {
|
|
const res = await _api.UpdateTeacherPwd(val);
|
|
if (res.code == 200) {
|
|
ElMessage.success(res.data);
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
//重置表单
|
|
const resetForm = (formEl) => {
|
|
console.log(ruleFormRef.value, "ruleFormRefruleFormRefruleFormRef");
|
|
if (!formEl) return;
|
|
formEl.resetFields();
|
|
};
|
|
const cancelClick = (val) => {
|
|
console.log("执行");
|
|
if (val == 0) {
|
|
resetForm(ruleFormRef.value);
|
|
data.value.drawerDialog.show = false;
|
|
ruleForm.value.classIds = [];
|
|
ruleForm.value.fileList = [];
|
|
coverImgUrl.value = "";
|
|
} else {
|
|
resetForm(ruleFormRef1.value);
|
|
data.value.drawerDialog.show1 = false;
|
|
ruleForm1.value.classIds = [];
|
|
ruleForm1.value.fileList = [];
|
|
coverImgUrl1.value = "";
|
|
}
|
|
};
|
|
const confirmClick = () => {
|
|
console.log(data.value.isAdd, "data.value.isAdd");
|
|
if (data.value.isAdd) {
|
|
submitForm(ruleFormRef.value);
|
|
} else {
|
|
submitForm(ruleFormRef1.value);
|
|
}
|
|
};
|
|
//分页
|
|
const changePage = (e) => {
|
|
console.log(e, "eeeee");
|
|
data.value.tableNeed.pageIndex = e;
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
};
|
|
const handleSizeChange = (e) => {
|
|
console.log(e, "handleSizeChange");
|
|
data.value.tableNeed.pageSize = e;
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
};
|
|
const changeTd = (e) => {
|
|
console.log(e, "eeeechangeTd");
|
|
};
|
|
function extractData(a, b) {
|
|
const result = [];
|
|
for (const grade of a) {
|
|
const gradeValue = grade.value;
|
|
for (const child of grade.children) {
|
|
const childValue = child.value;
|
|
for (const key in b) {
|
|
if (b[key].includes(childValue)) {
|
|
result.push([parseInt(key), childValue]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
//编辑表格行
|
|
const editTable = (e) => {
|
|
console.log(e.gradeAndClassIds, "eeeeeee");
|
|
console.log(options, "optionssssss");
|
|
console.log(extractData(options.value, e.gradeAndClassIds), "extractDataextractDataextractData");
|
|
|
|
data.value.dialogTitle = "编辑教师";
|
|
data.value.isAdd = false;
|
|
ruleForm1.value = {
|
|
id: e.id,
|
|
teacherName: e.teacherName,
|
|
sex: e.sex,
|
|
teacherPhoto: e.teacherPhoto,
|
|
teacherPhoneNo: e.phoneNo,
|
|
inductionDate: e.inductionDate,
|
|
classIds: extractData(options.value, e.gradeAndClassIds),
|
|
};
|
|
coverImgUrl1.value = e.teacherPhoto;
|
|
data.value.drawerDialog.show1 = true;
|
|
};
|
|
//删除表格行
|
|
const deleteOne = (e) => {
|
|
console.log(e, "deleteOne");
|
|
};
|
|
const toView1 = (val) => {
|
|
eventBus.emit("toView1", val);
|
|
};
|
|
//创建班级
|
|
function btnClick(val) {
|
|
console.log(val, "vallll");
|
|
switch (val) {
|
|
case "Search":
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
break;
|
|
case "addTeacher":
|
|
data.value.isAdd = true;
|
|
data.value.drawerDialog.show = true;
|
|
data.value.dialogTitle = "添加教师";
|
|
break;
|
|
case "Export":
|
|
exportData(data.value);
|
|
break;
|
|
case "Audit":
|
|
data.value.tableNeed.TeacherName = "";
|
|
data.value.tableNeed.PhoneNo = "";
|
|
data.value.tableNeed.Sex = "";
|
|
data.value.tableNeed.TeacherStatus = "";
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
break;
|
|
}
|
|
// data.value.dialogData.dialogVisible = true
|
|
}
|
|
|
|
onMounted(() => {
|
|
initApi(data.value);
|
|
});
|
|
//列表接口
|
|
async function initApi(val) {
|
|
try {
|
|
const res = await _api.TeacherGetClassPageList(val.tableNeed.TeacherName, val.tableNeed.PhoneNo, val.tableNeed.Sex, val.tableNeed.TeacherStatus, val.tableNeed.pageIndex, val.tableNeed.pageSize);
|
|
if (res.code == 200) {
|
|
res.data.datas.map((i, index) => {
|
|
i.sex = i.sex == 1 ? "男" : "女";
|
|
i.teacherStatus = i.teacherStatus == 1 ? "在职" : "离职";
|
|
});
|
|
val.tableNeed.tableData = res.data.datas;
|
|
val.tableNeed.tableData.map((i, index) => {
|
|
i.ind = val.tableNeed.pageSize * (val.tableNeed.pageIndex - 1) + index + 1;
|
|
});
|
|
val.tableNeed.total = res.data.total;
|
|
data.value.tableNeed.refresh = true;
|
|
GetGradeNames();
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
|
|
//新增老师
|
|
async function AddTeachers(val) {
|
|
console.log(val, "val");
|
|
// return
|
|
val.teacherPhoto = coverImgUrl.value;
|
|
const transformedClassIds = val.classIds.map((item) => item[1]);
|
|
val.classIds = transformedClassIds;
|
|
console.log(transformedClassIds, "transformedClassIds");
|
|
// return
|
|
try {
|
|
const res = await _api.AddTeacher(val);
|
|
if (res.code == 200) {
|
|
console.log(res, "ressssssssss");
|
|
data.value.drawerDialog.show = false;
|
|
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
ElMessage({
|
|
message: res.data,
|
|
type: "success",
|
|
});
|
|
resetForm(ruleFormRef.value);
|
|
ruleForm.value.classIds = [];
|
|
ruleForm.value.fileList = [];
|
|
coverImgUrl.value = "";
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
function exportData(val) {
|
|
axios({
|
|
method: "get",
|
|
url: `/api/Teacher/TeacherExport?TeacherName=${val.tableNeed.TeacherName}&PhoneNo=${val.tableNeed.PhoneNo}&Sex=${val.tableNeed.Sex}&TeacherStatus=${val.tableNeed.TeacherStatus}`,
|
|
// data: data,
|
|
responseType: "blob",
|
|
}).then((res) => {
|
|
const blob = new Blob([res.data]);
|
|
const fileName = `导出列表.xlsx`;
|
|
if ("download" in document.createElement("a")) {
|
|
const elink = document.createElement("a");
|
|
elink.download = fileName;
|
|
elink.style.display = "none";
|
|
elink.href = URL.createObjectURL(blob);
|
|
document.body.appendChild(elink);
|
|
elink.click();
|
|
URL.revokeObjectURL(elink.href);
|
|
document.body.removeChild(elink);
|
|
}
|
|
});
|
|
}
|
|
//编辑
|
|
async function ModifyTeachers(val) {
|
|
let k = JSON.parse(JSON.stringify(val));
|
|
console.log(val, "vallll");
|
|
console.log(coverImgUrl1.value, "coverImgUrl1.value");
|
|
k.teacherPhoto = coverImgUrl1.value;
|
|
// return
|
|
k.sex = k.sex == "男" ? "1" : "2";
|
|
const transformedClassIds = k.classIds.map((item) => item[1]);
|
|
k.classIds = transformedClassIds;
|
|
try {
|
|
const res = await _api.ModifyTeacher(k);
|
|
if (res.code == 200) {
|
|
data.value.drawerDialog.show1 = false;
|
|
data.value.tableNeed.refresh = false;
|
|
initApi(data.value);
|
|
ElMessage({
|
|
message: res.data,
|
|
type: "success",
|
|
});
|
|
resetForm(ruleFormRef1.value);
|
|
ruleForm1.value.classIds = [];
|
|
ruleForm1.value.fileList = [];
|
|
coverImgUrl1.value = "";
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error occurred while calling API:", error);
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.confirm-tip {
|
|
color: red;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.head {
|
|
width: 100%;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.desctipt {
|
|
width: 50px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
color: #3f404a;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.m-2 {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: calc(100% - 200px);
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: right;
|
|
|
|
.addTeacher,
|
|
.Export {
|
|
margin-right: 20px;
|
|
width: 80px;
|
|
height: 35px;
|
|
background: #4188fe;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
// line-height: 40px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.Audit {
|
|
width: 80px;
|
|
height: 33px;
|
|
background: #fafafa;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
text-align: center;
|
|
line-height: 33px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.Search {
|
|
width: 80px;
|
|
height: 33px;
|
|
background: #4188fe;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 33px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
// .addTeacher::before {
|
|
// content: "";
|
|
// background: url("@/assets/images/allImg/add.png") no-repeat;
|
|
// background-size: cover;
|
|
// width: 14px;
|
|
// height: 14px;
|
|
// font-size: 12px;
|
|
// margin-right: 5px;
|
|
// }
|
|
|
|
// .Search::before {
|
|
// content: "";
|
|
// background: url("@/assets/images/allImg/search.png") no-repeat;
|
|
// background-size: cover;
|
|
// width: 14px;
|
|
// height: 14px;
|
|
// font-size: 12px;
|
|
// margin-right: 5px;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.addTeacherDrawer {
|
|
.title {
|
|
font-size: 16px;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
.el-drawer {
|
|
width: 700px;
|
|
|
|
.el-form {
|
|
// width: 500px;
|
|
// height: 40px;
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
.el-form-item {
|
|
width: 450px;
|
|
// height: 40px;
|
|
margin-bottom: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.el-select {
|
|
width: 300px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.cancle {
|
|
width: 120px;
|
|
height: 40px;
|
|
background: #fafafa;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
text-align: center;
|
|
line-height: 40px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirm {
|
|
width: 120px;
|
|
height: 40px;
|
|
background: #0486fe;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|