dianshang-qianduan/src/views/teacherEnd/student/index.vue

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-05-13 16:22:46
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-22 09:41:23
 * @FilePath: \e-commerce-internet\src\views\teacherEnd\school\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="teacher app-container">
    <div class="df">
      <div class="online">
        <span>班级:</span>
        <el-select v-model="paramsquery.schoolClassId" placeholder="" style="width: 14rem" clearable class="ml10" @change="getMajorList">
          <el-option v-for="school in teachingClassList" :key="school.schoolClassId" :label="school.className" :value="school.schoolClassId" />
        </el-select>
      </div>
      <div class="online">
        <span>学生姓名:</span>
        <el-input style="width: 14rem" v-model="paramsquery.name" class="ml10"></el-input>
      </div>
      <div class="online">
        <span>学生学号:</span>
        <el-input style="width: 14rem" v-model="paramsquery.userName" class="ml10"></el-input>
        <el-button @click="getList" type="primary" class="ml10" :icon="Search">搜索</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col>
        <div style="display: flex; gap: 10px">
          <el-button type="primary" :icon="Plus" @click="addschool">新增</el-button>
          <el-upload action="/api/user/uploadStudentUserInfo" :data="{ userId: currentUserId }" :show-file-list="false" :on-success="(res, file) => handleSuccess(res, file)">
            <el-button type="primary" @click="editSchool(row)">导入</el-button>
          </el-upload>
          <el-button type="warning" @click="exportTeacher">导出</el-button>
          <el-button type="warning" @click="downloadTemplate">导入模版下载</el-button>

          <el-button type="primary" :icon="Refresh" @click="refresh">刷新</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column label="所属班级" prop="className" align="center"></el-table-column>
      <el-table-column label="学生姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="学号" prop="username" align="center"></el-table-column>
      <el-table-column label="电话" prop="phone" align="center"></el-table-column>
      <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
      <el-table-column label="账号来源" prop="codeFrom" align="center"></el-table-column>
      <el-table-column label="创建日期" prop="createTime" align="center">
        <template #default="{ row }">
          <span>{{ formatDate(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="400">
        <template #default="{ row }">
          <template v-if="canOperateStudent(row)">
            <el-button type="info" text @click="editSchool(row)">编辑</el-button>
            <el-button type="danger" text @click="delSchool(row)">删除</el-button>
            <el-button type="success" text @click="initPassword(row, 0)">密码初始化</el-button>
            <el-button type="primary" text @click="initPassword(row, 1)">数据初始化</el-button>
          </template>
          <el-tag v-else type="info">仅查看</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="schoolTotal > 0" :total="schoolTotal" v-model:page="paramsquery.index" v-model:limit="paramsquery.size" @pagination="getList" />
    <el-dialog v-model="dialogVisible" width="560px" :title="status ? '新增学生' : '编辑学生'" class="teacher-dialog" @close="onClose">
      <el-form :model="formInline" class="demo-form-inline" ref="formInlineref" label-width="100px" style="width: 80%" :rules="rules">
        <el-form-item label="所属院系:" prop="schoolFacultyId">
          <el-select v-model="formInline.schoolFacultyId" placeholder="" clearable @change="getMajorList" style="width: 20rem" v-if="status">
            <el-option v-for="school in facultyList" :key="school.schoolId" :label="school.schoolFacultyName" :value="school.schoolFacultyId" />
          </el-select>
          <el-input v-else v-model="classInfo.name" style="width: 20rem" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属专业:" prop="schoolMajorId">
          <el-select v-model="formInline.schoolMajorId" placeholder="" clearable style="width: 20rem" v-if="status" @change="getClassByMajor">
            <el-option v-for="major in majorList" :key="major.schoolMajorId" :label="major.schoolMajorName" :value="major.schoolMajorId" />
          </el-select>
          <el-input v-else v-model="classInfo.value" placeholder="请输入所属专业:" style="width: 20rem" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属班级:" prop="schoolClassId">
          <el-select v-model="formInline.schoolClassId" placeholder="" clearable style="width: 20rem" v-if="status">
            <el-option v-for="major in classList1" :key="major.schoolClassId" :label="major.className" :value="major.schoolClassId" />
          </el-select>
          <el-input v-else v-model="classInfo.value" placeholder="请输入所属专业:" style="width: 20rem" disabled></el-input>
        </el-form-item>
        <el-form-item label="学生姓名:" prop="name">
          <el-input v-model="formInline.name" style="width: 20rem" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="学号:" prop="userName">
          <el-input v-model="formInline.userName" style="width: 20rem" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="电话号码:">
          <el-input v-model="formInline.phone" style="width: 20rem" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱:">
          <el-input v-model="formInline.email" style="width: 20rem" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footers">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search, Plus, Refresh } from "@element-plus/icons-vue";
import { formatDate } from "@/utils/index";
import { ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const currentUserId = computed(() => userStore.userInfo.userId);
const currentSchoolId = computed(() => userStore.userInfo.schoolId);
const isManagerTeacher = computed(() => userStore.userInfo.teacherAdmin === true || String(userStore.userInfo.roleId || userStore.userInfo.role) === "1");
import * as indexApi from "@/api/teacher";
const dialogVisible = ref(false);
const loading = ref(false);
const formInline = ref({
  schoolFacultyId: "",
  schoolId: userStore.userInfo.schoolId,
  schoolMajorId: "",
  schoolMajorName: "",
  schoolClassId: "",
  schoolName: "",
  userName: "",
  email: "",
  phone: "",
});
const rules = ref({
  schoolFacultyId: [{ required: true, message: "请选择所属院系", trigger: "change" }],
  schoolMajorId: [{ required: true, message: "请选择所属专业", trigger: "change" }],
  schoolClassId: [{ required: true, message: "请选择所属班级", trigger: "change" }],
  name: [{ required: true, message: "请输入学生姓名", trigger: "blur" }],
  userName: [{ required: true, message: "请输入学号", trigger: "blur" }],
});
const paramsquery = ref({
  index: 1,
  size: 10,
  schoolId: userStore.userInfo.schoolId,
});
const classInfo = ref({});
const schoolTotal = ref(0);
// 新增编辑状态
const status = ref(false);
// 院校list
const tableData = ref([]);
// 获取院校列表
const getList = () => {
  indexApi.getStudentList(paramsquery.value).then((res) => {
    tableData.value = res.data.list;
    schoolTotal.value = res.data.total;
  });
};
// 删除院校
const delSchool = (id) => {
  indexApi.deleteStudent({ userId: id.userId, operatorId: currentUserId.value }).then((res) => {
    proxy.$message.success("删除成功");
    getList();
  });
};
// 新增院校
const addschool = () => {
  dialogVisible.value = true;
  status.value = true;
};
const editSchool = (row) => {
  console.log(row);
  let data = { ...row };
  formInline.value = data;
  formInline.value.userName = row.username;
  dialogVisible.value = true;
  status.value = false;
  indexApi.getFacultyAndMajorName({ schoolMajorId: row.schoolMajorId }).then((res) => {
    classInfo.value.name = Object.keys(res.data)[0];
    classInfo.value.value = Object.values(res.data)[0];
  });
};
const add = () => {
  formInline.value.schoolMajorName = majorList.value?.filter((item) => item.schoolMajorId == formInline.value.schoolMajorId)[0].schoolMajorName;
  formInline.value.schoolClassName = classList1.value?.filter((item) => item.schoolClassId == formInline.value.schoolClassId)[0].className;
  formInline.value.userId = currentUserId.value;
  indexApi.addStudent(formInline.value).then((res) => {
    proxy.$message.success("添加成功");
    dialogVisible.value = false;
    getList();
  });
};
const edit = () => {
  formInline.value.status = true;
  formInline.value.operatorId = currentUserId.value;
  indexApi.updateStudent(formInline.value).then((res) => {
    proxy.$message.success("编辑成功");
    dialogVisible.value = false;
    getList();
  });
};
// 提交
const submitForm = () => {
  proxy.$refs.formInlineref.validate((valid) => {
    if (valid) {
      status.value ? add() : edit();
    } else {
      return false;
    }
  });
};
const onClose = () => {
  for (const key in formInline.value) {
    formInline.value[key] = "";
  }
  dialogVisible.value = false;
};
// 刷新
const refresh = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    getList();
  }, 2000);
};
// 查询院系下拉列表
const facultyList = ref([]);
const getFacultyList = () => {
  indexApi.seleteSchoolFacultyList({ schoolId: userStore.userInfo.schoolId }).then((res) => {
    facultyList.value = res.data;
  });
};
// 专业下拉框
const majorList = ref([]);
const getMajorList = () => {
  if (!formInline.value.schoolFacultyId) return;
  paramsquery.value.schoolMajorId = "";
  indexApi.getMajorListBySchoolId({ schoolFacultyId: formInline.value.schoolFacultyId }).then((res) => {
    majorList.value = res.data;
  });
};
const handleSuccess = (res, file) => {
  getList();
  proxy.$modal.msgSuccess("导入成功");
};
// 导出教师账号
const exportTeacher = () => {
  indexApi.exportStudentList({ schoolId: userStore.userInfo.schoolId }).then((res) => {
    const blob = new Blob([res], { type: "application/vnd.ms-excel" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "学生信息表格.xlsx");
    link.click();
    URL.revokeObjectURL(url);
  });
};
// 导入模版下载
const downloadTemplate = () => {
  const a = document.createElement("a");
  a.href = `http://118.31.7.2:147/file/学生信息表.xlsx`;
  a.download = "模板文件.xlsx";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
// 查询班级下拉
const classList = ref([]);
const normalizeClassType = (schoolClass) => {
  if (schoolClass?.classType) return schoolClass.classType;
  return schoolClass?.createdBy ? "TEACHING" : "ADMIN";
};
const sameValue = (left, right) => String(left || "") === String(right || "");
const canUseAdminClassForStudent = (schoolClass) => {
  if (normalizeClassType(schoolClass) !== "ADMIN") return false;
  if (isManagerTeacher.value) {
    return !schoolClass?.schoolId || sameValue(schoolClass.schoolId, currentSchoolId.value);
  }
  return sameValue(schoolClass?.createdBy, currentUserId.value);
};
const teachingClassList = computed(() => classList.value.filter((item) => normalizeClassType(item) === "TEACHING"));
const classOwnerMap = computed(() => {
  return new Map(classList.value.map((item) => [item.schoolClassId, item.createdBy]));
});
const canOperateStudent = (row) => {
  const teachingClassId = paramsquery.value.schoolClassId || row.schoolClassId;
  return sameValue(classOwnerMap.value.get(teachingClassId), currentUserId.value);
};
const getClassList = () => {
  indexApi.getClassListBySchoolId({ schoolId: userStore.userInfo.schoolId }).then((res) => {
    classList.value = res.data;
  });
};
const classList1 = ref([]);
// 根据专业查班级
const getClassByMajor = () => {
  if (!formInline.value.schoolMajorId) return;
  formInline.value.schoolClassId = "";
  indexApi.getClassListByMajorId({ schoolMajorId: formInline.value.schoolMajorId }).then((res) => {
    classList1.value = (res.data || []).filter((item) => canUseAdminClassForStudent(item));
  });
};
//初始化密码
const initPassword = (row, status) => {
  if (status == 0) {
    ElMessageBox.confirm("确定初始化密码吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        indexApi.initStudentPassword({ userId: row.userId, operatorId: currentUserId.value }).then((res) => {
          proxy.$message.success("密码初始化成功");
          getList();
        });
      })
      .catch(() => {});
  } else {
    ElMessageBox.confirm("确定初始化当前学生数据吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        if (!paramsquery.value.schoolClassId) {
          proxy.$message.warning("请先选择教学班");
          return;
        }
        indexApi.initializeTeachingClassStudentTrainingData({
          teachingClassId: paramsquery.value.schoolClassId,
          studentUserId: row.userId,
          operatorId: currentUserId.value,
        }).then((res) => {
          proxy.$message.success("初始化成功");
          getList();
        });
      })
      .catch(() => {});
  }
};
onMounted(() => {
  getList();
  getClassList();
  getFacultyList();
});
</script>
<style lang="scss" scoped>
.teacher {
  background: #ffffff;
  height: calc(100vh - 70px);
  .df {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  :deep(.pagination-container) {
    .el-pagination {
      // 去掉定位
      position: sticky !important;
    }
  }
}
</style>