shuguang/CodeMaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components/edit): 替换性别选择器为下拉框并优化代码格式

Browse Source 
将性别选择器从单选按钮组替换为下拉框，提升用户体验。同时，对代码进行格式化，统一缩进和代码风格，提高代码可读性和维护性。
This commit is contained in:
Shu Guang 2025-05-18 07:41:47 +08:00
parent 8a0d957465
commit be5032602d
3 changed files with 509 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/edit/EditStudent.vue
View File

@ -79,14 +79,14 @@
/> />
</a-form-item> </a-form-item>
<a-form-item label="性别"> <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-item>
</a-form> </a-form>
</template> </template>
<script> <script>
import { pick } from 'lodash-es'; import { pick } from 'lodash-es';
import { UserStatus,grades, sexes } from '@/utils/const'; import { UserStatus, grades, sexes } from '@/utils/const';
import EditMixin from './edit-mixin'; import EditMixin from './edit-mixin';
export default { export default {
@ -95,20 +95,20 @@ export default {
data() { data() {
return { return {
grades, grades,
UserStatus, UserStatus,
decorator, decorator,
sexes, sexes,
userPrivileges:[ userPrivileges: [
{label:'管理员',value:'0'}, { label: '管理员', value: '0' },
{label:'教师',value:'1'}, { label: '教师', value: '1' },
{label:'学生',value:'2'}, { label: '学生', value: '2' },
] ]
}; };
}, },
methods: { methods: {
initData() { initData() {
const { data } = this; const { data } = this;
const result = pick(data, ['stid', 'userName', 'gender', 'collegeId','phone','email','userStatus']); const result = pick(data, ['stid', 'userName', 'gender', 'collegeId', 'phone', 'email', 'userStatus']);
this.form.setFieldsValue(result); this.form.setFieldsValue(result);
}, },
}, },
@ -139,17 +139,18 @@ const decorator = {
gender: ['gender', { gender: ['gender', {
initialValue: '男', initialValue: '男',
}], }],
collegeId: ['collegeId', { collegeId: ['collegeId', {
rules: [{ rules: [{
required: false, required: false,
message: '请选择学院！', message: '请选择学院！',
}], }],
}] }],
,userPrivileges: ['userPrivileges', { userPrivileges: ['userPrivileges', {
rules: [{ rules: [{
message: '请选择身份！', message: '请选择身份！',
}], }],
}],UserStatus: ['UserStatus', { }],
UserStatus: ['UserStatus', {
initialValue: '正常', initialValue: '正常',
}], }],
phone: ['phone', { phone: ['phone', {

459
src/views/user/Student.vue
View File

@ -22,22 +22,12 @@
<template #header> <template #header>
<!-- 操作按钮组 --> <!-- 操作按钮组 -->
<a-button-group> <a-button-group>
<a-button type="primary" @click="addUser"> <a-button type="primary" @click="addUser"> 添加学生 </a-button>
添加学生 <a-button :disabled="!selectedKeys.length" @click="batchDelete">
</a-button>
<a-button
:disabled="!selectedKeys.length"
@click="batchDelete"
>
批量删除 ({{ selectedKeys.length }}) 批量删除 ({{ selectedKeys.length }})
</a-button> </a-button>
<a-button @click="$refs.import.show()"> <a-button @click="$refs.import.show()"> Excel导入 </a-button>
Excel导入 <a-button :loading="exporting" @click="exportAll">
</a-button>
<a-button
:loading="exporting"
@click="exportAll"
>
全量导出 全量导出
</a-button> </a-button>
</a-button-group> </a-button-group>
@ -99,98 +89,97 @@
</template> </template>
<script> <script>
import { grades, gradeMap, sexes, sexMap } from '@/utils/const'; import { grades, gradeMap, sexes, sexMap } from "@/utils/const";
import { exportData } from '@/utils/excel'; import { exportData } from "@/utils/excel";
import createColumns from '@/helpers/importuser-columns'; import createColumns from "@/helpers/importuser-columns";
import EditStudent from '@/components/edit/EditStudent'; import EditStudent from "@/components/edit/EditStudent";
import UserImport from '@/components/common/UserImport'; import UserImport from "@/components/common/UserImport";
import GrantRole from '@/components/common/GrantRole'; import GrantRole from "@/components/common/GrantRole";
// 格式化日期函数 // 格式化日期函数
function formatDate(dateString) { function formatDate(dateString) {
const date = new Date(dateString); // 将日期字符串转换为 Date 对象 const date = new Date(dateString); // 将日期字符串转换为 Date 对象
const year = date.getFullYear(); // 获取年份 const year = date.getFullYear(); // 获取年份
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并补零 const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
const day = String(date.getDate()).padStart(2, '0'); // 获取日期，并补零 const day = String(date.getDate()).padStart(2, "0"); // 获取日期，并补零
return `${year}-${month}-${day}`; // 返回格式化后的日期字符串 return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
} }
// 定义状态映射对象 // 定义状态映射对象
const statusMap = { const statusMap = {
0: '正常', 0: "正常",
1: '异常', 1: "异常",
// 其他状态以此类推 // 其他状态以此类推
}; };
const STUDENT_COLUMNS = [ const STUDENT_COLUMNS = [
{ title: '学号', dataIndex: 'stid' , align: 'center'}, { title: "学号", dataIndex: "stid", align: "center" },
{ title: '姓名', dataIndex: 'userName' , align: 'center' }, { title: "姓名", dataIndex: "userName", align: "center" },
{ {
title: '性别', title: "性别",
dataIndex: 'gender', dataIndex: "gender",
align: 'center', align: "center",
customRender: (text, record) => { customRender: (text, record) => {
return text ? text : '男'; return text ? text : "男";
}
}, },
{
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: 'phone',
align: 'center',
customRender: (text, record) => {
return text ? text : '无';
}
},
{
title: '状态',
dataIndex: 'userStatus',
align: 'center',
customRender: (text, record) => statusMap[record.userStatus] // 根据状态值查找映射对象中的状态名称
}, },
{ {
title: '操作', title: "学院",
align: 'center', 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: "phone",
align: "center",
customRender: (text, record) => {
return text ? text : "无";
},
},
{
title: "状态",
dataIndex: "userStatus",
align: "center",
customRender: (text, record) => statusMap[record.userStatus], // 根据状态值查找映射对象中的状态名称
},
{
title: "操作",
align: "center",
width: 100, width: 100,
scopedSlots: { customRender: 'action' }, scopedSlots: { customRender: "action" },
}, },
]; ];
function exportExcel(data) { function exportExcel(data) {
const header = STUDENT_COLUMNS.map(v => v.title); const header = STUDENT_COLUMNS.map((v) => v.title);
header.pop(); // 去掉最后一栏操作栏 header.pop(); // 去掉最后一栏操作栏
return exportData({ return exportData({
name: '学生信息', name: "学生信息",
data, data,
header, header,
keyMap: { keyMap: {
stid: '学号', stid: "学号",
userName: '姓名', userName: "姓名",
gender: '性别', gender: "性别",
collegeId: '学院', collegeId: "学院",
birthdate: '生日', birthdate: "生日",
phone: '手机', phone: "手机",
userStatus: '状态', userStatus: "状态",
}, },
}); });
} }
export default { export default {
name: 'Student', name: "Student",
metaInfo: { metaInfo: {
title: '学生管理', title: "学生管理",
}, },
components: { components: {
UserImport, UserImport,
@ -202,7 +191,7 @@ export default {
query: {}, query: {},
selectedKeys: [], selectedKeys: [],
users: [], users: [],
originalUsers: [], originalUsers: [],
current: 1, current: 1,
pageSize: 12, pageSize: 12,
total: 0, total: 0,
@ -228,7 +217,9 @@ export default {
}, },
}, },
mounted() { mounted() {
this.$watch(() => [this.pageSize, this.current], this.getData, { immediate: true }); this.$watch(() => [this.pageSize, this.current], this.getData, {
immediate: true,
});
}, },
methods: { methods: {
// 搜索 // 搜索
@ -244,87 +235,107 @@ export default {
getData() { getData() {
this.loading = true; this.loading = true;
this.query = this.$refs.searchForm.getResult(); this.query = this.$refs.searchForm.getResult();
console.log(this.query); console.log(this.query);
this.$api.AllUser({}).then(data => { this.$api
// 过滤权限大于1的用户 .AllUser({})
this.originalUsers = data.data.filter(user => user.userPrivileges > 1); .then((data) => {
this.filterUsers(); // 调用过滤用户方法 // 过滤权限大于1的用户
this.total = data.users.length; this.originalUsers = data.data.filter(
}).catch(e => { (user) => user.userPrivileges > 1
console.error(e); );
// this.$message.error(e.msg || '获取数据失败'); this.filterUsers(); // 调用过滤用户方法
}).finally(() => { this.total = data.users.length;
this.loading = false; })
}); .catch((e) => {
console.error(e);
// this.$message.error(e.msg || '获取数据失败');
})
.finally(() => {
this.loading = false;
});
}, },
filterUsers() { filterUsers() {
let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据 let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据
console.log(filteredUsers) console.log(filteredUsers);
if (this.query.sid) { 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) { 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) { 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) { 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; }
},
this.users = filteredUsers;
},
// 重置密码 // 重置密码
resetPassword(row) { resetPassword(row) {
const key = Date.now(); const key = Date.now();
this.$message.loading({ this.$message.loading({
key, key,
content: '请稍后', content: "请稍后",
duration: 0, duration: 0,
}); });
this.$api.resetPassword({ this.$api
type: 'student', .resetPassword({
account: row.sid, type: "student",
}).then(() => { account: row.sid,
this.$message.success({ content: '已重置', key }); })
}).catch(() => { .then(() => {
this.$message.error({ content: '重置失败', key }); this.$message.success({ content: "已重置", key });
}); })
.catch(() => {
this.$message.error({ content: "重置失败", key });
});
}, },
// 添加学生 // 添加学生
addUser() { addUser() {
let vnode; let vnode;
this.$confirm({ this.$confirm({
title: '添加学生', title: "添加学生",
content: h => (vnode = h(EditStudent)), content: (h) => (vnode = h(EditStudent)),
onOk: async () => { onOk: async () => {
const values = await vnode.componentInstance.validate(); const values = await vnode.componentInstance.validate();
const data = { const data = {
sTId: values.stid, sTId: values.stid,
userPassword: values.password, userPassword: values.password,
// 用户权限学生 // 用户权限学生
userPrivileges: 2, userPrivileges: 2,
userName: values.userName, userName: values.userName,
collegeId: values.collegeId, collegeId: values.collegeId,
userStatus: 0, userStatus: 0,
email: values.email, email: values.email,
phone: values.phone, phone: values.phone,
}; sex: values.sex,
};
return this.$api.CreateUser(data).then(() => {
this.$message.success('添加成功'); return this.$api
this.getData(); .CreateUser(data)
}).catch(e => { .then(() => {
console.error(e); this.$message.success("添加成功");
this.$message.error(e.msg || '添加失败'); this.getData();
throw e; })
}); .catch((e) => {
console.error(e);
this.$message.error(e.msg || "添加失败");
throw e;
});
}, },
}); });
}, },
@ -332,90 +343,107 @@ export default {
editUser(row) { editUser(row) {
let vnode; let vnode;
this.$confirm({ this.$confirm({
title: '修改信息', title: "修改信息",
content: h => (vnode = <EditStudent type="update" data={row} />), content: (h) => (vnode = <EditStudent type="update" data={row} />),
onOk: async () => { onOk: async () => {
const values = await vnode.componentInstance.validate(); const values = await vnode.componentInstance.validate();
console.log(values) console.log(values);
let data={ let data = {
stid: row.stid, sTId: values.stid,
userId:row.userId, userId: row.userId,
userName:values.userName, userName: values.userName,
userPassword:values.password, userPassword: values.password,
userPrivileges:values.userPrivileges, userPrivileges: values.userPrivileges,
phone:values.phone, phone: values.phone,
email:values.email, email: values.email,
collegeId:values.collegeId, collegeId: values.collegeId,
userStatus:0, gender: values.gender,
} sex: values.sexual,
return this.$api.UPuser(data).then(() => { userStatus: 0,
this.$message.success('修改成功'); };
this.getData(); return this.$api
}).catch(e => { .UPuser(data)
console.error(e); .then(() => {
this.$message.error(e.msg || '修改失败'); this.$message.success("修改成功");
throw e; this.getData();
}); })
.catch((e) => {
console.error(e);
this.$message.error(e.msg || "修改失败");
throw e;
});
}, },
}); });
}, },
// 删除学生 // 删除学生
deleteUser(row) { deleteUser(row) {
const key = Math.random(); const key = Math.random();
this.$message.loading({ content: '正在删除', duration: 0, key }); this.$message.loading({ content: "正在删除", duration: 0, key });
this.$api.deleteUser('student', { this.$api
ids: [row.sid], .deleteUser("student", {
}).then(() => { ids: [row.sid],
this.$message.success({ content: '删除成功!', key }); })
this.getData(); .then(() => {
}).catch(e => { this.$message.success({ content: "删除成功!", key });
this.$message.error({ content: e.msg || '删除失败!', key }); this.getData();
}); })
.catch((e) => {
this.$message.error({ content: e.msg || "删除失败!", key });
});
}, },
// 批量删除 // 批量删除
batchDelete(row) { batchDelete(row) {
this.$modal.confirm({ this.$modal.confirm({
title: `确认删除选中的${this.selectedKeys.length}项数据?`, title: `确认删除选中的${this.selectedKeys.length}项数据?`,
onOk: () => { onOk: () => {
let data={ let data = {
list:this.selectedKeys.map(index => this.users[index].userId) list: this.selectedKeys.map((index) => this.users[index].userId),
} };
this.$api.deleteList(data).then(() => { this.$api
this.$message.success('删除成功!'); .deleteList(data)
this.selectedKeys.splice(0); .then(() => {
this.getData(); this.$message.success("删除成功!");
}).catch(e => { this.selectedKeys.splice(0);
this.$message.error(e.msg || '删除失败!'); this.getData();
throw e; })
}) .catch((e) => {
} this.$message.error(e.msg || "删除失败!");
throw e;
});
},
}); });
}, },
// 导出学生 // 导出学生
exportAll() { exportAll() {
this.exporting = true; this.exporting = true;
this.$api.AllUser().then(data => { this.$api
// 过滤权限2的用户 .AllUser()
return exportExcel(data.data.filter(user => user.userPrivileges > 1)); .then((data) => {
}).then(data => { // 过滤权限2的用户
return exportExcel(data.data); return exportExcel(
}).catch(e => { data.data.filter((user) => user.userPrivileges > 1)
console.error(e); );
this.$message.error(e.msg || '导出失败'); })
}).finally(() => { .then((data) => {
this.exporting = false; return exportExcel(data.data);
}); })
.catch((e) => {
console.error(e);
this.$message.error(e.msg || "导出失败");
})
.finally(() => {
this.exporting = false;
});
}, },
// 授权用户 // 授权用户
grantRole(item) { grantRole(item) {
let vnode; let vnode;
this.$confirm({ this.$confirm({
title: '授权', title: "授权",
content: () => (vnode = <GrantRole content: () =>
type="student" (vnode = (
role={item.role_id} <GrantRole type="student" role={item.role_id} account={item.sid} />
account={item.sid} )),
/>),
onOk: async () => { onOk: async () => {
await vnode.componentInstance.confirm(); await vnode.componentInstance.confirm();
this.getData(); this.getData();
@ -429,40 +457,39 @@ export default {
function createSearchOptions() { function createSearchOptions() {
return [ return [
{ {
label: '学号', label: "学号",
key: 'sid', key: "sid",
default: '', default: "",
component: 'input', component: "input",
align: 'center' align: "center",
}, },
{ {
label: '姓名', label: "姓名",
key: 'name', key: "name",
default: '', default: "",
component: 'input', component: "input",
align: 'center' align: "center",
}, },
{ {
label: '性别', label: "性别",
key: 'sex', key: "sex",
default: undefined, default: undefined,
component: 'select', component: "select",
align: 'center', align: "center",
props: { props: {
options: sexes, options: sexes,
}, },
}, },
{ {
label: '学院', label: "学院",
key: 'collageId', key: "collageId",
default: undefined, default: undefined,
component: 'select', component: "select",
align: 'center', align: "center",
props: { props: {
options: grades, options: grades,
}, },
}, },
]; ];
} }
</script> </script>

477
src/views/user/Teacher.vue
View File

@ -20,23 +20,12 @@
> >
<template #header> <template #header>
<a-button-group> <a-button-group>
<a-button type="primary" @click="addUser"> <a-button type="primary" @click="addUser"> 添加教师 </a-button>
添加教师 <a-button :disabled="!selectedKeys.length" @click="batchDelete">
</a-button>
<a-button
:disabled="!selectedKeys.length"
@click="batchDelete"
>
批量删除 ({{ selectedKeys.length }}) 批量删除 ({{ selectedKeys.length }})
</a-button> </a-button>
<a-button @click="$refs.import.show()"> <a-button @click="$refs.import.show()"> Excel导入 </a-button>
Excel导入 <a-button :loading="exporting" @click="exportAll">
</a-button>
<a-button
:loading="exporting"
@click="exportAll"
>
全量导出 全量导出
</a-button> </a-button>
</a-button-group> </a-button-group>
@ -96,109 +85,109 @@
</template> </template>
<script> <script>
import { gradeMap,rankMap, ranks,grades,sexes } from '@/utils/const'; import { gradeMap, rankMap, ranks, grades, sexes } from "@/utils/const";
import { exportData } from '@/utils/excel'; import { exportData } from "@/utils/excel";
import createColumns from '@/helpers/importuser-columns'; import createColumns from "@/helpers/importuser-columns";
import EditTeacher from '@/components/edit/EditTeacher'; import EditTeacher from "@/components/edit/EditTeacher";
import UserImport from '@/components/common/UserImport.vue'; import UserImport from "@/components/common/UserImport.vue";
import GrantRole from '@/components/common/GrantRole'; import GrantRole from "@/components/common/GrantRole";
// 定义状态映射对象 // 定义状态映射对象
const statusMap = { const statusMap = {
0: '正常', 0: "正常",
1: '异常', 1: "异常",
// 其他状态以此类推 // 其他状态以此类推
}; };
// 格式化日期函数 // 格式化日期函数
function formatDate(dateString) { function formatDate(dateString) {
const date = new Date(dateString); // 将日期字符串转换为 Date 对象 const date = new Date(dateString); // 将日期字符串转换为 Date 对象
const year = date.getFullYear(); // 获取年份 const year = date.getFullYear(); // 获取年份
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并补零 const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
const day = String(date.getDate()).padStart(2, '0'); // 获取日期，并补零 const day = String(date.getDate()).padStart(2, "0"); // 获取日期，并补零
return `${year}-${month}-${day}`; // 返回格式化后的日期字符串 return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
} }
const TEACHER_COLUMNS = [ const TEACHER_COLUMNS = [
{ title: '工号', dataIndex: 'stid' }, { title: "工号", dataIndex: "stid" },
{ title: '姓名', dataIndex: 'userName' }, { title: "姓名", dataIndex: "userName" },
{ {
title: '性别', title: "性别",
dataIndex: 'gender', dataIndex: "gender",
customRender: (text, record) => { customRender: (text, record) => {
return text ? text : '男'; return text ? text : "男";
}
}, },
{
title: '职称',
dataIndex: 'teacherTitle',
customRender: (text, record) => {
return text ? text : '无';
}
},
{
title: '学院',
dataIndex: 'collegeId',
customRender: (text, record) => gradeMap[record.collegeId] // 根据学院 ID 查找映射对象中的学院名称
},
{
title: '生日',
dataIndex: 'birthdate',
customRender: (text, record) => formatDate(record.birthdate) // 在渲染时调用 formatDate 函数
},
{
title: '手机',
dataIndex: 'phone',
customRender: (text, record) => {
return text ? text : '无';
}
},
{
title: '状态',
dataIndex: 'userStatus',
customRender: (text, record) => statusMap[record.userStatus] // 根据状态值查找映射对象中的状态名称
}, },
{ {
title: '操作', title: "职称",
align: 'center', dataIndex: "teacherTitle",
customRender: (text, record) => {
return text ? text : "无";
},
},
{
title: "学院",
dataIndex: "collegeId",
customRender: (text, record) => gradeMap[record.collegeId], // 根据学院 ID 查找映射对象中的学院名称
},
{
title: "生日",
dataIndex: "birthdate",
customRender: (text, record) => formatDate(record.birthdate), // 在渲染时调用 formatDate 函数
},
{
title: "手机",
dataIndex: "phone",
customRender: (text, record) => {
return text ? text : "无";
},
},
{
title: "状态",
dataIndex: "userStatus",
customRender: (text, record) => statusMap[record.userStatus], // 根据状态值查找映射对象中的状态名称
},
{
title: "操作",
align: "center",
width: 100, width: 100,
scopedSlots: { customRender: 'action' }, scopedSlots: { customRender: "action" },
}, },
]; ];
function exportExcel(data) { function exportExcel(data) {
const header = TEACHER_COLUMNS.map(v => v.title); const header = TEACHER_COLUMNS.map((v) => v.title);
header.pop(); // 去掉最后一栏操作栏 header.pop(); // 去掉最后一栏操作栏
return exportData({ return exportData({
name: '教师信息', name: "教师信息",
data, data,
header, header,
keyMap: { keyMap: {
stid: '工号', stid: "工号",
userName: '姓名', userName: "姓名",
gender:'性别', gender: "性别",
teacherTitle: '职称', teacherTitle: "职称",
collegeId: '学院', collegeId: "学院",
birthdate: '生日', birthdate: "生日",
phone: '手机', phone: "手机",
userStatus: '状态', userStatus: "状态",
}, },
}); });
} }
export default { export default {
name: 'Teacher', name: "Teacher",
components: { UserImport }, components: { UserImport },
metaInfo: { metaInfo: {
title: '教师管理', title: "教师管理",
}, },
data() { data() {
return { return {
grades, grades,
sexes, sexes,
loading: false, loading: false,
exporting: false, exporting: false,
query: {}, query: {},
selectedKeys: [], selectedKeys: [],
users: [], users: [],
originalUsers: [], originalUsers: [],
current: 1, current: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
@ -224,7 +213,9 @@ export default {
}, },
}, },
mounted() { mounted() {
this.$watch(() => [this.pageSize, this.current], this.getData, { immediate: true }); this.$watch(() => [this.pageSize, this.current], this.getData, {
immediate: true,
});
}, },
methods: { methods: {
search() { search() {
@ -234,171 +225,207 @@ export default {
changePage({ pageSize, current }) { changePage({ pageSize, current }) {
Object.assign(this, { pageSize, current }); Object.assign(this, { pageSize, current });
}, },
getData() { getData() {
console.log(this.query) console.log(this.query);
this.loading = true; this.loading = true;
this.query = this.$refs.searchForm.getResult(); this.query = this.$refs.searchForm.getResult();
this.$api.AllUser({}).then(data => { this.$api
// 过滤权限大于0的用户 .AllUser({})
this.originalUsers = data.data.filter(user => user.userPrivileges ==1); .then((data) => {
this.filterUsers(); // 调用过滤用户方法 // 过滤权限大于0的用户
this.total = data.users.length; this.originalUsers = data.data.filter(
}).catch(e => { (user) => user.userPrivileges == 1
console.error(e); );
// this.$message.error(e.msg || '获取数据失败'); this.filterUsers(); // 调用过滤用户方法
}).finally(() => { this.total = data.users.length;
this.loading = false; })
}); .catch((e) => {
console.error(e);
// this.$message.error(e.msg || '获取数据失败');
})
.finally(() => {
this.loading = false;
});
}, },
// 过滤用户 // 过滤用户
filterUsers() { filterUsers() {
let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据 let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据
if (this.query.tid) { 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) { 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) { 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) { 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); }
} if (this.query.rank) {
this.users = filteredUsers; filteredUsers = filteredUsers.filter(
}, (user) => user.teacherTitle === this.query.rank
);
}
this.users = filteredUsers;
},
resetPassword(row) { resetPassword(row) {
const key = Date.now(); const key = Date.now();
this.$message.loading({ this.$message.loading({
key, key,
content: '请稍后', content: "请稍后",
duration: 0, duration: 0,
}); });
this.$api.resetPassword({ this.$api
type: 'teacher', .resetPassword({
account: row.tid, type: "teacher",
}).then(() => { account: row.tid,
this.$message.success({ content: '已重置', key }); })
}).catch(() => { .then(() => {
this.$message.error({ content: '重置失败', key }); this.$message.success({ content: "已重置", key });
}); })
.catch(() => {
this.$message.error({ content: "重置失败", key });
});
}, },
addUser() { addUser() {
let vnode; let vnode;
this.$confirm({ this.$confirm({
title: '添加教师', title: "添加教师",
content: h => (vnode = h(EditTeacher)), content: (h) => (vnode = h(EditTeacher)),
onOk: async () => { onOk: async () => {
const values = await vnode.componentInstance.validate(); const values = await vnode.componentInstance.validate();
const data = { const data = {
sTId: values.stid, sTId: values.stid,
userPassword: values.password, userPassword: values.password,
userPrivileges: 1, userPrivileges: 1,
userName: values.userName, userName: values.userName,
teacherTitle: values.teacherTitle, teacherTitle: values.teacherTitle,
collegeId: values.collegeId, collegeId: values.collegeId,
userStatus: 0, userStatus: 0,
email: values.email, email: values.email,
phone: values.phone, phone: values.phone,
}; };
return this.$api.CreateUser(data).then(() => { return this.$api
this.$message.success('添加成功'); .CreateUser(data)
this.getData(); .then(() => {
}).catch(e => { this.$message.success("添加成功");
console.error(e); this.getData();
this.$message.error(e.msg || '添加失败'); })
throw e; .catch((e) => {
}); console.error(e);
this.$message.error(e.msg || "添加失败");
throw e;
});
}, },
}); });
}, },
editUser(row) { editUser(row) {
let vnode; let vnode;
this.$confirm({ this.$confirm({
title: '修改信息', title: "修改信息",
content: h => (vnode = <EditTeacher type="update" data={row} />), content: (h) => (vnode = <EditTeacher type="update" data={row} />),
onOk: async () => { onOk: async () => {
const values = await vnode.componentInstance.validate(); const values = await vnode.componentInstance.validate();
console.log(values) console.log(values);
let data={ let data = {
stid: values.stid, sTId: values.stid,
userId:row.userId, userId: row.userId,
userName:values.userName, userName: values.userName,
userPassword:values.password, userPassword: values.password,
userPrivileges:values.userPrivileges, userPrivileges: values.userPrivileges,
teacherTitle:values.teacherTitle, teacherTitle: values.teacherTitle,
email:values.email, email: values.email,
collegeId:values.collegeId, collegeId: values.collegeId,
userStatus:0, userStatus: 0,
} };
return this.$api.updateUser(data).then(() => { return this.$api
this.$message.success('修改成功'); .updateUser(data)
this.getData(); .then(() => {
}).catch(e => { this.$message.success("修改成功");
console.error(e); this.getData();
this.$message.error(e.msg || '修改失败'); })
throw e; .catch((e) => {
}); console.error(e);
this.$message.error(e.msg || "修改失败");
throw e;
});
}, },
}); });
}, },
deleteUser(row) { deleteUser(row) {
const key = Math.random(); const key = Math.random();
this.$message.loading({ content: '正在删除', duration: 0, key }); this.$message.loading({ content: "正在删除", duration: 0, key });
this.$api.deleteUser('teacher', { this.$api
ids: [row.tid], .deleteUser("teacher", {
}).then(() => { ids: [row.tid],
this.$message.success({ content: '删除成功!', key }); })
this.getData(); .then(() => {
}).catch(e => { this.$message.success({ content: "删除成功!", key });
this.$message.error({ content: e.msg || '删除失败!', key }); this.getData();
}); })
.catch((e) => {
this.$message.error({ content: e.msg || "删除失败!", key });
});
}, },
batchDelete(row) { batchDelete(row) {
this.$modal.confirm({ this.$modal.confirm({
title: `确认删除选中的${this.selectedKeys.length}项数据?`, title: `确认删除选中的${this.selectedKeys.length}项数据?`,
onOk: () => { onOk: () => {
let data={ let data = {
list:this.selectedKeys.map(index => this.users[index].userId) list: this.selectedKeys.map((index) => this.users[index].userId),
} };
this.$api.deleteList(data).then(() => { this.$api
this.$message.success('删除成功!'); .deleteList(data)
this.selectedKeys.splice(0); .then(() => {
this.getData(); this.$message.success("删除成功!");
}).catch(e => { this.selectedKeys.splice(0);
this.$message.error(e.msg || '删除失败!'); this.getData();
throw e; })
}) .catch((e) => {
} this.$message.error(e.msg || "删除失败!");
throw e;
});
},
}); });
}, },
exportAll() { exportAll() {
this.exporting = true; this.exporting = true;
this.$api.AllUser().then(data => { this.$api
// 过滤权限大于1的用户 .AllUser()
return exportExcel(data.data.filter(user => user.userPrivileges == 1)); .then((data) => {
}).catch(e => { // 过滤权限大于1的用户
console.error(e); return exportExcel(
this.$message.error(e.msg || '导出失败'); data.data.filter((user) => user.userPrivileges == 1)
}).finally(() => { );
this.exporting = false; })
}); .catch((e) => {
console.error(e);
this.$message.error(e.msg || "导出失败");
})
.finally(() => {
this.exporting = false;
});
}, },
grantRole(item) { grantRole(item) {
let vnode; let vnode;
this.$confirm({ this.$confirm({
title: '授权', title: "授权",
content: () => (vnode = <GrantRole content: () =>
type="teacher" (vnode = (
role={item.role_id} <GrantRole type="teacher" role={item.role_id} account={item.tid} />
account={item.tid} )),
/>),
onOk: async () => { onOk: async () => {
await vnode.componentInstance.confirm(); await vnode.componentInstance.confirm();
this.getData(); this.getData();
@ -411,44 +438,44 @@ export default {
function createSearchOptions() { function createSearchOptions() {
return [ return [
{ {
label: '工号', label: "工号",
key: 'tid', key: "tid",
default: '', default: "",
component: 'input', component: "input",
align: 'center' align: "center",
}, },
{ {
label: '姓名', label: "姓名",
key: 'name', key: "name",
default: '', default: "",
component: 'input', component: "input",
align: 'center' align: "center",
}, },
{ {
label: '性别', label: "性别",
key: 'sex', key: "sex",
default: undefined, default: undefined,
align: 'center', align: "center",
props: { props: {
options: sexes, options: sexes,
}, },
}, },
{ {
label: '职称', label: "职称",
key: 'rank', key: "rank",
default: undefined, default: undefined,
component: 'select', component: "select",
align: 'center', align: "center",
props: { props: {
options: ranks, options: ranks,
}, },
}, },
{ {
label: '学院', label: "学院",
key: 'collageId', key: "collageId",
default: undefined, default: undefined,
component: 'select', component: "select",
align: 'center', align: "center",
props: { props: {
options: grades, options: grades,
}, },