refactor(components/edit): 替换性别选择器为下拉框并优化代码格式
将性别选择器从单选按钮组替换为下拉框，提升用户体验。同时，对代码进行格式化，统一缩进和代码风格，提高代码可读性和维护性。
This commit is contained in:
Shu Guang
parent
8a0d957465
commit
be5032602d
@ -79,7 +79,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<a-radio-group v-decorator="decorator.gender" :options="sexes" />
|
||||
<a-select v-decorator="decorator.gender" :options="sexes" placeholder="请选择性别" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
@ -144,12 +144,13 @@ const decorator = {
|
||||
required: false,
|
||||
message: '请选择学院！',
|
||||
}],
|
||||
}]
|
||||
,userPrivileges: ['userPrivileges', {
|
||||
}],
|
||||
userPrivileges: ['userPrivileges', {
|
||||
rules: [{
|
||||
message: '请选择身份！',
|
||||
}],
|
||||
}],UserStatus: ['UserStatus', {
|
||||
}],
|
||||
UserStatus: ['UserStatus', {
|
||||
initialValue: '正常',
|
||||
}],
|
||||
phone: ['phone', {
|
||||
|
||||
@ -22,22 +22,12 @@
|
||||
<template #header>
|
||||
<!-- 操作按钮组 -->
|
||||
<a-button-group>
|
||||
<a-button type="primary" @click="addUser">
|
||||
添加学生
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!selectedKeys.length"
|
||||
@click="batchDelete"
|
||||
>
|
||||
<a-button type="primary" @click="addUser"> 添加学生 </a-button>
|
||||
<a-button :disabled="!selectedKeys.length" @click="batchDelete">
|
||||
批量删除 ({{ selectedKeys.length }})
|
||||
</a-button>
|
||||
<a-button @click="$refs.import.show()">
|
||||
Excel导入
|
||||
</a-button>
|
||||
<a-button
|
||||
:loading="exporting"
|
||||
@click="exportAll"
|
||||
>
|
||||
<a-button @click="$refs.import.show()"> Excel导入 </a-button>
|
||||
<a-button :loading="exporting" @click="exportAll">
|
||||
全量导出
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
@ -99,98 +89,97 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { grades, gradeMap, sexes, sexMap } from '@/utils/const';
|
||||
import { exportData } from '@/utils/excel';
|
||||
import createColumns from '@/helpers/importuser-columns';
|
||||
import EditStudent from '@/components/edit/EditStudent';
|
||||
import UserImport from '@/components/common/UserImport';
|
||||
import GrantRole from '@/components/common/GrantRole';
|
||||
import { grades, gradeMap, sexes, sexMap } from "@/utils/const";
|
||||
import { exportData } from "@/utils/excel";
|
||||
import createColumns from "@/helpers/importuser-columns";
|
||||
import EditStudent from "@/components/edit/EditStudent";
|
||||
import UserImport from "@/components/common/UserImport";
|
||||
import GrantRole from "@/components/common/GrantRole";
|
||||
|
||||
// 格式化日期函数
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString); // 将日期字符串转换为 Date 对象
|
||||
const year = date.getFullYear(); // 获取年份
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并补零
|
||||
const day = String(date.getDate()).padStart(2, '0'); // 获取日期，并补零
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
|
||||
const day = String(date.getDate()).padStart(2, "0"); // 获取日期，并补零
|
||||
return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
|
||||
}
|
||||
|
||||
|
||||
// 定义状态映射对象
|
||||
const statusMap = {
|
||||
0: '正常',
|
||||
1: '异常',
|
||||
0: "正常",
|
||||
1: "异常",
|
||||
// 其他状态以此类推
|
||||
};
|
||||
|
||||
const STUDENT_COLUMNS = [
|
||||
{ title: '学号', dataIndex: 'stid' , align: 'center'},
|
||||
{ title: '姓名', dataIndex: 'userName' , align: 'center' },
|
||||
{ title: "学号", dataIndex: "stid", align: "center" },
|
||||
{ title: "姓名", dataIndex: "userName", align: "center" },
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
align: 'center',
|
||||
title: "性别",
|
||||
dataIndex: "gender",
|
||||
align: "center",
|
||||
customRender: (text, record) => {
|
||||
return text ? text : '男';
|
||||
}
|
||||
return text ? text : "男";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '学院',
|
||||
dataIndex: 'collegeId',
|
||||
align: 'center',
|
||||
customRender: (text, record) => gradeMap[record.collegeId] // 根据学院 ID 查找映射对象中的学院名称
|
||||
title: "学院",
|
||||
dataIndex: "collegeId",
|
||||
align: "center",
|
||||
customRender: (text, record) => gradeMap[record.collegeId], // 根据学院 ID 查找映射对象中的学院名称
|
||||
},
|
||||
{
|
||||
title: '生日',
|
||||
dataIndex: 'birthdate',
|
||||
align: 'center',
|
||||
customRender: (text, record) => formatDate(record.birthdate) // 在渲染时调用 formatDate 函数
|
||||
title: "生日",
|
||||
dataIndex: "birthdate",
|
||||
align: "center",
|
||||
customRender: (text, record) => formatDate(record.birthdate), // 在渲染时调用 formatDate 函数
|
||||
},
|
||||
{
|
||||
title: '手机',
|
||||
dataIndex: 'phone',
|
||||
align: 'center',
|
||||
title: "手机",
|
||||
dataIndex: "phone",
|
||||
align: "center",
|
||||
customRender: (text, record) => {
|
||||
return text ? text : '无';
|
||||
}
|
||||
return text ? text : "无";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'userStatus',
|
||||
align: 'center',
|
||||
customRender: (text, record) => statusMap[record.userStatus] // 根据状态值查找映射对象中的状态名称
|
||||
title: "状态",
|
||||
dataIndex: "userStatus",
|
||||
align: "center",
|
||||
customRender: (text, record) => statusMap[record.userStatus], // 根据状态值查找映射对象中的状态名称
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
title: "操作",
|
||||
align: "center",
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
];
|
||||
|
||||
function exportExcel(data) {
|
||||
const header = STUDENT_COLUMNS.map(v => v.title);
|
||||
const header = STUDENT_COLUMNS.map((v) => v.title);
|
||||
header.pop(); // 去掉最后一栏操作栏
|
||||
return exportData({
|
||||
name: '学生信息',
|
||||
name: "学生信息",
|
||||
data,
|
||||
header,
|
||||
keyMap: {
|
||||
stid: '学号',
|
||||
userName: '姓名',
|
||||
gender: '性别',
|
||||
collegeId: '学院',
|
||||
birthdate: '生日',
|
||||
phone: '手机',
|
||||
userStatus: '状态',
|
||||
stid: "学号",
|
||||
userName: "姓名",
|
||||
gender: "性别",
|
||||
collegeId: "学院",
|
||||
birthdate: "生日",
|
||||
phone: "手机",
|
||||
userStatus: "状态",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Student',
|
||||
name: "Student",
|
||||
metaInfo: {
|
||||
title: '学生管理',
|
||||
title: "学生管理",
|
||||
},
|
||||
components: {
|
||||
UserImport,
|
||||
@ -228,7 +217,9 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(() => [this.pageSize, this.current], this.getData, { immediate: true });
|
||||
this.$watch(() => [this.pageSize, this.current], this.getData, {
|
||||
immediate: true,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
@ -245,64 +236,80 @@ export default {
|
||||
this.loading = true;
|
||||
this.query = this.$refs.searchForm.getResult();
|
||||
console.log(this.query);
|
||||
this.$api.AllUser({}).then(data => {
|
||||
this.$api
|
||||
.AllUser({})
|
||||
.then((data) => {
|
||||
// 过滤权限大于1的用户
|
||||
this.originalUsers = data.data.filter(user => user.userPrivileges > 1);
|
||||
this.originalUsers = data.data.filter(
|
||||
(user) => user.userPrivileges > 1
|
||||
);
|
||||
this.filterUsers(); // 调用过滤用户方法
|
||||
this.total = data.users.length;
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
// this.$message.error(e.msg || '获取数据失败');
|
||||
}).finally(() => {
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
filterUsers() {
|
||||
let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据
|
||||
console.log(filteredUsers)
|
||||
console.log(filteredUsers);
|
||||
if (this.query.sid) {
|
||||
filteredUsers = filteredUsers.filter(user => user.stid.includes(this.query.sid));
|
||||
filteredUsers = filteredUsers.filter((user) =>
|
||||
user.stid.includes(this.query.sid)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.query.name) {
|
||||
filteredUsers = filteredUsers.filter(user => user.userName.includes(this.query.name));
|
||||
filteredUsers = filteredUsers.filter((user) =>
|
||||
user.userName.includes(this.query.name)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.query.sex) {
|
||||
filteredUsers = filteredUsers.filter(user => user.gender === this.query.sex);
|
||||
filteredUsers = filteredUsers.filter(
|
||||
(user) => user.gender === this.query.sex
|
||||
);
|
||||
}
|
||||
|
||||
if (this.query.collageId) {
|
||||
filteredUsers = filteredUsers.filter(user => user.collageId === this.query.collageId);
|
||||
filteredUsers = filteredUsers.filter(
|
||||
(user) => user.collageId === this.query.collageId
|
||||
);
|
||||
}
|
||||
|
||||
this.users = filteredUsers;
|
||||
},
|
||||
|
||||
|
||||
// 重置密码
|
||||
resetPassword(row) {
|
||||
const key = Date.now();
|
||||
this.$message.loading({
|
||||
key,
|
||||
content: '请稍后',
|
||||
content: "请稍后",
|
||||
duration: 0,
|
||||
});
|
||||
this.$api.resetPassword({
|
||||
type: 'student',
|
||||
this.$api
|
||||
.resetPassword({
|
||||
type: "student",
|
||||
account: row.sid,
|
||||
}).then(() => {
|
||||
this.$message.success({ content: '已重置', key });
|
||||
}).catch(() => {
|
||||
this.$message.error({ content: '重置失败', key });
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success({ content: "已重置", key });
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error({ content: "重置失败", key });
|
||||
});
|
||||
},
|
||||
// 添加学生
|
||||
addUser() {
|
||||
let vnode;
|
||||
this.$confirm({
|
||||
title: '添加学生',
|
||||
content: h => (vnode = h(EditStudent)),
|
||||
title: "添加学生",
|
||||
content: (h) => (vnode = h(EditStudent)),
|
||||
onOk: async () => {
|
||||
const values = await vnode.componentInstance.validate();
|
||||
const data = {
|
||||
@ -315,14 +322,18 @@ export default {
|
||||
userStatus: 0,
|
||||
email: values.email,
|
||||
phone: values.phone,
|
||||
sex: values.sex,
|
||||
};
|
||||
|
||||
return this.$api.CreateUser(data).then(() => {
|
||||
this.$message.success('添加成功');
|
||||
return this.$api
|
||||
.CreateUser(data)
|
||||
.then(() => {
|
||||
this.$message.success("添加成功");
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
this.$message.error(e.msg || '添加失败');
|
||||
this.$message.error(e.msg || "添加失败");
|
||||
throw e;
|
||||
});
|
||||
},
|
||||
@ -332,13 +343,13 @@ export default {
|
||||
editUser(row) {
|
||||
let vnode;
|
||||
this.$confirm({
|
||||
title: '修改信息',
|
||||
content: h => (vnode = <EditStudent type="update" data={row} />),
|
||||
title: "修改信息",
|
||||
content: (h) => (vnode = <EditStudent type="update" data={row} />),
|
||||
onOk: async () => {
|
||||
const values = await vnode.componentInstance.validate();
|
||||
console.log(values)
|
||||
console.log(values);
|
||||
let data = {
|
||||
stid: row.stid,
|
||||
sTId: values.stid,
|
||||
userId: row.userId,
|
||||
userName: values.userName,
|
||||
userPassword: values.password,
|
||||
@ -346,14 +357,19 @@ export default {
|
||||
phone: values.phone,
|
||||
email: values.email,
|
||||
collegeId: values.collegeId,
|
||||
gender: values.gender,
|
||||
sex: values.sexual,
|
||||
userStatus: 0,
|
||||
}
|
||||
return this.$api.UPuser(data).then(() => {
|
||||
this.$message.success('修改成功');
|
||||
};
|
||||
return this.$api
|
||||
.UPuser(data)
|
||||
.then(() => {
|
||||
this.$message.success("修改成功");
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
this.$message.error(e.msg || '修改失败');
|
||||
this.$message.error(e.msg || "修改失败");
|
||||
throw e;
|
||||
});
|
||||
},
|
||||
@ -362,14 +378,17 @@ export default {
|
||||
// 删除学生
|
||||
deleteUser(row) {
|
||||
const key = Math.random();
|
||||
this.$message.loading({ content: '正在删除', duration: 0, key });
|
||||
this.$api.deleteUser('student', {
|
||||
this.$message.loading({ content: "正在删除", duration: 0, key });
|
||||
this.$api
|
||||
.deleteUser("student", {
|
||||
ids: [row.sid],
|
||||
}).then(() => {
|
||||
this.$message.success({ content: '删除成功!', key });
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success({ content: "删除成功!", key });
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
this.$message.error({ content: e.msg || '删除失败!', key });
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error({ content: e.msg || "删除失败!", key });
|
||||
});
|
||||
},
|
||||
// 批量删除
|
||||
@ -378,31 +397,41 @@ export default {
|
||||
title: `确认删除选中的${this.selectedKeys.length}项数据?`,
|
||||
onOk: () => {
|
||||
let data = {
|
||||
list:this.selectedKeys.map(index => this.users[index].userId)
|
||||
}
|
||||
this.$api.deleteList(data).then(() => {
|
||||
this.$message.success('删除成功!');
|
||||
list: this.selectedKeys.map((index) => this.users[index].userId),
|
||||
};
|
||||
this.$api
|
||||
.deleteList(data)
|
||||
.then(() => {
|
||||
this.$message.success("删除成功!");
|
||||
this.selectedKeys.splice(0);
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg || '删除失败!');
|
||||
throw e;
|
||||
})
|
||||
}
|
||||
.catch((e) => {
|
||||
this.$message.error(e.msg || "删除失败!");
|
||||
throw e;
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
// 导出学生
|
||||
exportAll() {
|
||||
this.exporting = true;
|
||||
this.$api.AllUser().then(data => {
|
||||
this.$api
|
||||
.AllUser()
|
||||
.then((data) => {
|
||||
// 过滤权限2的用户
|
||||
return exportExcel(data.data.filter(user => user.userPrivileges > 1));
|
||||
}).then(data => {
|
||||
return exportExcel(
|
||||
data.data.filter((user) => user.userPrivileges > 1)
|
||||
);
|
||||
})
|
||||
.then((data) => {
|
||||
return exportExcel(data.data);
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
this.$message.error(e.msg || '导出失败');
|
||||
}).finally(() => {
|
||||
this.$message.error(e.msg || "导出失败");
|
||||
})
|
||||
.finally(() => {
|
||||
this.exporting = false;
|
||||
});
|
||||
},
|
||||
@ -410,12 +439,11 @@ export default {
|
||||
grantRole(item) {
|
||||
let vnode;
|
||||
this.$confirm({
|
||||
title: '授权',
|
||||
content: () => (vnode = <GrantRole
|
||||
type="student"
|
||||
role={item.role_id}
|
||||
account={item.sid}
|
||||
/>),
|
||||
title: "授权",
|
||||
content: () =>
|
||||
(vnode = (
|
||||
<GrantRole type="student" role={item.role_id} account={item.sid} />
|
||||
)),
|
||||
onOk: async () => {
|
||||
await vnode.componentInstance.confirm();
|
||||
this.getData();
|
||||
@ -429,40 +457,39 @@ export default {
|
||||
function createSearchOptions() {
|
||||
return [
|
||||
{
|
||||
label: '学号',
|
||||
key: 'sid',
|
||||
default: '',
|
||||
component: 'input',
|
||||
align: 'center'
|
||||
label: "学号",
|
||||
key: "sid",
|
||||
default: "",
|
||||
component: "input",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
key: 'name',
|
||||
default: '',
|
||||
component: 'input',
|
||||
align: 'center'
|
||||
label: "姓名",
|
||||
key: "name",
|
||||
default: "",
|
||||
component: "input",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
key: 'sex',
|
||||
label: "性别",
|
||||
key: "sex",
|
||||
default: undefined,
|
||||
component: 'select',
|
||||
align: 'center',
|
||||
component: "select",
|
||||
align: "center",
|
||||
props: {
|
||||
options: sexes,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '学院',
|
||||
key: 'collageId',
|
||||
label: "学院",
|
||||
key: "collageId",
|
||||
default: undefined,
|
||||
component: 'select',
|
||||
align: 'center',
|
||||
component: "select",
|
||||
align: "center",
|
||||
props: {
|
||||
options: grades,
|
||||
},
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -20,23 +20,12 @@
|
||||
>
|
||||
<template #header>
|
||||
<a-button-group>
|
||||
<a-button type="primary" @click="addUser">
|
||||
添加教师
|
||||
</a-button>
|
||||
<a-button
|
||||
|
||||
:disabled="!selectedKeys.length"
|
||||
@click="batchDelete"
|
||||
>
|
||||
<a-button type="primary" @click="addUser"> 添加教师 </a-button>
|
||||
<a-button :disabled="!selectedKeys.length" @click="batchDelete">
|
||||
批量删除 ({{ selectedKeys.length }})
|
||||
</a-button>
|
||||
<a-button @click="$refs.import.show()">
|
||||
Excel导入
|
||||
</a-button>
|
||||
<a-button
|
||||
:loading="exporting"
|
||||
@click="exportAll"
|
||||
>
|
||||
<a-button @click="$refs.import.show()"> Excel导入 </a-button>
|
||||
<a-button :loading="exporting" @click="exportAll">
|
||||
全量导出
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
@ -96,98 +85,98 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gradeMap,rankMap, ranks,grades,sexes } from '@/utils/const';
|
||||
import { exportData } from '@/utils/excel';
|
||||
import createColumns from '@/helpers/importuser-columns';
|
||||
import EditTeacher from '@/components/edit/EditTeacher';
|
||||
import UserImport from '@/components/common/UserImport.vue';
|
||||
import GrantRole from '@/components/common/GrantRole';
|
||||
import { gradeMap, rankMap, ranks, grades, sexes } from "@/utils/const";
|
||||
import { exportData } from "@/utils/excel";
|
||||
import createColumns from "@/helpers/importuser-columns";
|
||||
import EditTeacher from "@/components/edit/EditTeacher";
|
||||
import UserImport from "@/components/common/UserImport.vue";
|
||||
import GrantRole from "@/components/common/GrantRole";
|
||||
// 定义状态映射对象
|
||||
const statusMap = {
|
||||
0: '正常',
|
||||
1: '异常',
|
||||
0: "正常",
|
||||
1: "异常",
|
||||
// 其他状态以此类推
|
||||
};
|
||||
// 格式化日期函数
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString); // 将日期字符串转换为 Date 对象
|
||||
const year = date.getFullYear(); // 获取年份
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并补零
|
||||
const day = String(date.getDate()).padStart(2, '0'); // 获取日期，并补零
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
|
||||
const day = String(date.getDate()).padStart(2, "0"); // 获取日期，并补零
|
||||
return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
|
||||
}
|
||||
const TEACHER_COLUMNS = [
|
||||
{ title: '工号', dataIndex: 'stid' },
|
||||
{ title: '姓名', dataIndex: 'userName' },
|
||||
{ title: "工号", dataIndex: "stid" },
|
||||
{ title: "姓名", dataIndex: "userName" },
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
title: "性别",
|
||||
dataIndex: "gender",
|
||||
customRender: (text, record) => {
|
||||
return text ? text : '男';
|
||||
}
|
||||
return text ? text : "男";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '职称',
|
||||
dataIndex: 'teacherTitle',
|
||||
title: "职称",
|
||||
dataIndex: "teacherTitle",
|
||||
customRender: (text, record) => {
|
||||
return text ? text : '无';
|
||||
}
|
||||
return text ? text : "无";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '学院',
|
||||
dataIndex: 'collegeId',
|
||||
customRender: (text, record) => gradeMap[record.collegeId] // 根据学院 ID 查找映射对象中的学院名称
|
||||
title: "学院",
|
||||
dataIndex: "collegeId",
|
||||
customRender: (text, record) => gradeMap[record.collegeId], // 根据学院 ID 查找映射对象中的学院名称
|
||||
},
|
||||
{
|
||||
title: '生日',
|
||||
dataIndex: 'birthdate',
|
||||
customRender: (text, record) => formatDate(record.birthdate) // 在渲染时调用 formatDate 函数
|
||||
title: "生日",
|
||||
dataIndex: "birthdate",
|
||||
customRender: (text, record) => formatDate(record.birthdate), // 在渲染时调用 formatDate 函数
|
||||
},
|
||||
{
|
||||
title: '手机',
|
||||
dataIndex: 'phone',
|
||||
title: "手机",
|
||||
dataIndex: "phone",
|
||||
customRender: (text, record) => {
|
||||
return text ? text : '无';
|
||||
}
|
||||
return text ? text : "无";
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'userStatus',
|
||||
customRender: (text, record) => statusMap[record.userStatus] // 根据状态值查找映射对象中的状态名称
|
||||
title: "状态",
|
||||
dataIndex: "userStatus",
|
||||
customRender: (text, record) => statusMap[record.userStatus], // 根据状态值查找映射对象中的状态名称
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
title: "操作",
|
||||
align: "center",
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
];
|
||||
|
||||
function exportExcel(data) {
|
||||
const header = TEACHER_COLUMNS.map(v => v.title);
|
||||
const header = TEACHER_COLUMNS.map((v) => v.title);
|
||||
header.pop(); // 去掉最后一栏操作栏
|
||||
return exportData({
|
||||
name: '教师信息',
|
||||
name: "教师信息",
|
||||
data,
|
||||
header,
|
||||
keyMap: {
|
||||
stid: '工号',
|
||||
userName: '姓名',
|
||||
gender:'性别',
|
||||
teacherTitle: '职称',
|
||||
collegeId: '学院',
|
||||
birthdate: '生日',
|
||||
phone: '手机',
|
||||
userStatus: '状态',
|
||||
stid: "工号",
|
||||
userName: "姓名",
|
||||
gender: "性别",
|
||||
teacherTitle: "职称",
|
||||
collegeId: "学院",
|
||||
birthdate: "生日",
|
||||
phone: "手机",
|
||||
userStatus: "状态",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Teacher',
|
||||
name: "Teacher",
|
||||
components: { UserImport },
|
||||
metaInfo: {
|
||||
title: '教师管理',
|
||||
title: "教师管理",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -224,7 +213,9 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(() => [this.pageSize, this.current], this.getData, { immediate: true });
|
||||
this.$watch(() => [this.pageSize, this.current], this.getData, {
|
||||
immediate: true,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
@ -235,18 +226,24 @@ export default {
|
||||
Object.assign(this, { pageSize, current });
|
||||
},
|
||||
getData() {
|
||||
console.log(this.query)
|
||||
console.log(this.query);
|
||||
this.loading = true;
|
||||
this.query = this.$refs.searchForm.getResult();
|
||||
this.$api.AllUser({}).then(data => {
|
||||
this.$api
|
||||
.AllUser({})
|
||||
.then((data) => {
|
||||
// 过滤权限大于0的用户
|
||||
this.originalUsers = data.data.filter(user => user.userPrivileges ==1);
|
||||
this.originalUsers = data.data.filter(
|
||||
(user) => user.userPrivileges == 1
|
||||
);
|
||||
this.filterUsers(); // 调用过滤用户方法
|
||||
this.total = data.users.length;
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
// this.$message.error(e.msg || '获取数据失败');
|
||||
}).finally(() => {
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
@ -254,22 +251,32 @@ export default {
|
||||
filterUsers() {
|
||||
let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据
|
||||
if (this.query.tid) {
|
||||
filteredUsers = filteredUsers.filter(user => user.stid.includes(this.query.tid));
|
||||
filteredUsers = filteredUsers.filter((user) =>
|
||||
user.stid.includes(this.query.tid)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.query.name) {
|
||||
filteredUsers = filteredUsers.filter(user => user.userName.includes(this.query.name));
|
||||
filteredUsers = filteredUsers.filter((user) =>
|
||||
user.userName.includes(this.query.name)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.query.sex) {
|
||||
filteredUsers = filteredUsers.filter(user => user.gender === this.query.sex);
|
||||
filteredUsers = filteredUsers.filter(
|
||||
(user) => user.gender === this.query.sex
|
||||
);
|
||||
}
|
||||
|
||||
if (this.query.collageId) {
|
||||
filteredUsers = filteredUsers.filter(user => user.collageId === this.query.collageId);
|
||||
filteredUsers = filteredUsers.filter(
|
||||
(user) => user.collageId === this.query.collageId
|
||||
);
|
||||
}
|
||||
if (this.query.rank) {
|
||||
filteredUsers = filteredUsers.filter(user => user.teacherTitle === this.query.rank);
|
||||
filteredUsers = filteredUsers.filter(
|
||||
(user) => user.teacherTitle === this.query.rank
|
||||
);
|
||||
}
|
||||
this.users = filteredUsers;
|
||||
},
|
||||
@ -277,23 +284,26 @@ export default {
|
||||
const key = Date.now();
|
||||
this.$message.loading({
|
||||
key,
|
||||
content: '请稍后',
|
||||
content: "请稍后",
|
||||
duration: 0,
|
||||
});
|
||||
this.$api.resetPassword({
|
||||
type: 'teacher',
|
||||
this.$api
|
||||
.resetPassword({
|
||||
type: "teacher",
|
||||
account: row.tid,
|
||||
}).then(() => {
|
||||
this.$message.success({ content: '已重置', key });
|
||||
}).catch(() => {
|
||||
this.$message.error({ content: '重置失败', key });
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success({ content: "已重置", key });
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error({ content: "重置失败", key });
|
||||
});
|
||||
},
|
||||
addUser() {
|
||||
let vnode;
|
||||
this.$confirm({
|
||||
title: '添加教师',
|
||||
content: h => (vnode = h(EditTeacher)),
|
||||
title: "添加教师",
|
||||
content: (h) => (vnode = h(EditTeacher)),
|
||||
onOk: async () => {
|
||||
const values = await vnode.componentInstance.validate();
|
||||
const data = {
|
||||
@ -307,12 +317,15 @@ export default {
|
||||
email: values.email,
|
||||
phone: values.phone,
|
||||
};
|
||||
return this.$api.CreateUser(data).then(() => {
|
||||
this.$message.success('添加成功');
|
||||
return this.$api
|
||||
.CreateUser(data)
|
||||
.then(() => {
|
||||
this.$message.success("添加成功");
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
this.$message.error(e.msg || '添加失败');
|
||||
this.$message.error(e.msg || "添加失败");
|
||||
throw e;
|
||||
});
|
||||
},
|
||||
@ -321,13 +334,13 @@ export default {
|
||||
editUser(row) {
|
||||
let vnode;
|
||||
this.$confirm({
|
||||
title: '修改信息',
|
||||
content: h => (vnode = <EditTeacher type="update" data={row} />),
|
||||
title: "修改信息",
|
||||
content: (h) => (vnode = <EditTeacher type="update" data={row} />),
|
||||
onOk: async () => {
|
||||
const values = await vnode.componentInstance.validate();
|
||||
console.log(values)
|
||||
console.log(values);
|
||||
let data = {
|
||||
stid: values.stid,
|
||||
sTId: values.stid,
|
||||
userId: row.userId,
|
||||
userName: values.userName,
|
||||
userPassword: values.password,
|
||||
@ -336,13 +349,16 @@ export default {
|
||||
email: values.email,
|
||||
collegeId: values.collegeId,
|
||||
userStatus: 0,
|
||||
}
|
||||
return this.$api.updateUser(data).then(() => {
|
||||
this.$message.success('修改成功');
|
||||
};
|
||||
return this.$api
|
||||
.updateUser(data)
|
||||
.then(() => {
|
||||
this.$message.success("修改成功");
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
this.$message.error(e.msg || '修改失败');
|
||||
this.$message.error(e.msg || "修改失败");
|
||||
throw e;
|
||||
});
|
||||
},
|
||||
@ -350,14 +366,17 @@ export default {
|
||||
},
|
||||
deleteUser(row) {
|
||||
const key = Math.random();
|
||||
this.$message.loading({ content: '正在删除', duration: 0, key });
|
||||
this.$api.deleteUser('teacher', {
|
||||
this.$message.loading({ content: "正在删除", duration: 0, key });
|
||||
this.$api
|
||||
.deleteUser("teacher", {
|
||||
ids: [row.tid],
|
||||
}).then(() => {
|
||||
this.$message.success({ content: '删除成功!', key });
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success({ content: "删除成功!", key });
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
this.$message.error({ content: e.msg || '删除失败!', key });
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error({ content: e.msg || "删除失败!", key });
|
||||
});
|
||||
},
|
||||
batchDelete(row) {
|
||||
@ -365,40 +384,48 @@ export default {
|
||||
title: `确认删除选中的${this.selectedKeys.length}项数据?`,
|
||||
onOk: () => {
|
||||
let data = {
|
||||
list:this.selectedKeys.map(index => this.users[index].userId)
|
||||
}
|
||||
this.$api.deleteList(data).then(() => {
|
||||
this.$message.success('删除成功!');
|
||||
list: this.selectedKeys.map((index) => this.users[index].userId),
|
||||
};
|
||||
this.$api
|
||||
.deleteList(data)
|
||||
.then(() => {
|
||||
this.$message.success("删除成功!");
|
||||
this.selectedKeys.splice(0);
|
||||
this.getData();
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg || '删除失败!');
|
||||
throw e;
|
||||
})
|
||||
}
|
||||
.catch((e) => {
|
||||
this.$message.error(e.msg || "删除失败!");
|
||||
throw e;
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
exportAll() {
|
||||
this.exporting = true;
|
||||
this.$api.AllUser().then(data => {
|
||||
this.$api
|
||||
.AllUser()
|
||||
.then((data) => {
|
||||
// 过滤权限大于1的用户
|
||||
return exportExcel(data.data.filter(user => user.userPrivileges == 1));
|
||||
}).catch(e => {
|
||||
return exportExcel(
|
||||
data.data.filter((user) => user.userPrivileges == 1)
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
this.$message.error(e.msg || '导出失败');
|
||||
}).finally(() => {
|
||||
this.$message.error(e.msg || "导出失败");
|
||||
})
|
||||
.finally(() => {
|
||||
this.exporting = false;
|
||||
});
|
||||
},
|
||||
grantRole(item) {
|
||||
let vnode;
|
||||
this.$confirm({
|
||||
title: '授权',
|
||||
content: () => (vnode = <GrantRole
|
||||
type="teacher"
|
||||
role={item.role_id}
|
||||
account={item.tid}
|
||||
/>),
|
||||
title: "授权",
|
||||
content: () =>
|
||||
(vnode = (
|
||||
<GrantRole type="teacher" role={item.role_id} account={item.tid} />
|
||||
)),
|
||||
onOk: async () => {
|
||||
await vnode.componentInstance.confirm();
|
||||
this.getData();
|
||||
@ -411,44 +438,44 @@ export default {
|
||||
function createSearchOptions() {
|
||||
return [
|
||||
{
|
||||
label: '工号',
|
||||
key: 'tid',
|
||||
default: '',
|
||||
component: 'input',
|
||||
align: 'center'
|
||||
label: "工号",
|
||||
key: "tid",
|
||||
default: "",
|
||||
component: "input",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
key: 'name',
|
||||
default: '',
|
||||
component: 'input',
|
||||
align: 'center'
|
||||
label: "姓名",
|
||||
key: "name",
|
||||
default: "",
|
||||
component: "input",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
key: 'sex',
|
||||
label: "性别",
|
||||
key: "sex",
|
||||
default: undefined,
|
||||
align: 'center',
|
||||
align: "center",
|
||||
props: {
|
||||
options: sexes,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '职称',
|
||||
key: 'rank',
|
||||
label: "职称",
|
||||
key: "rank",
|
||||
default: undefined,
|
||||
component: 'select',
|
||||
align: 'center',
|
||||
component: "select",
|
||||
align: "center",
|
||||
props: {
|
||||
options: ranks,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '学院',
|
||||
key: 'collageId',
|
||||
label: "学院",
|
||||
key: "collageId",
|
||||
default: undefined,
|
||||
component: 'select',
|
||||
align: 'center',
|
||||
component: "select",
|
||||
align: "center",
|
||||
props: {
|
||||
options: grades,
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user