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

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-05-13 16:22:46
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-21 16:04:21
 * @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-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">搜索</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col>
        <div style="display: flex; gap: 10px">
          <el-button v-if="isManagerTeacher" type="primary" @click="addschool">新增</el-button>
          <el-upload v-if="isManagerTeacher" action="/api/user/uploadTeacherUserInfo" :data="{ operatorId: currentUserId }" :show-file-list="false" :on-success="(res, file) => handleSuccess(res, file)">
            <el-button type="primary">导入</el-button>
          </el-upload>
          <el-button type="warning" @click="exportTeacher">导出</el-button>
          <el-button v-if="isManagerTeacher" type="warning" @click="downloadTemplate">导入模版下载</el-button>
          <el-button type="primary" @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="name" align="center"></el-table-column>
      <el-table-column label="工号" prop="username" align="center"></el-table-column>
      <el-table-column label="名下班级" align="center" min-width="280">
        <template #default="{ row }">
          <div v-if="row.ownedClassNames?.length" class="owned-class-list" :title="row.ownedClassNames.join('、')">
            <span v-for="className in row.ownedClassNames" :key="className" class="owned-class-chip">{{ className }}</span>
          </div>
          <span v-else class="empty-summary">暂无班级</span>
        </template>
      </el-table-column>
      <el-table-column label="学生数量" align="center" width="130">
        <template #default="{ row }">
          <strong class="student-count">{{ Number(row.ownedStudentCount || 0) }}<small> 人</small></strong>
        </template>
      </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">
        <template #default="{ row }">
          <template v-if="isManagerTeacher">
            <div class="action-btn-group">
              <el-button type="primary" text :disabled="row.hasCreatedClass" @click="editSchool(row)">编辑</el-button>
              <el-button type="danger" text :disabled="row.hasCreatedClass" @click="delSchool(row)">删除</el-button>
              <el-button type="warning" text @click="initializeTeacherPassword(row)">密码初始化</el-button>
            </div>
            <el-tag v-if="row.hasCreatedClass" type="warning" size="small">该教师已创建班级，不允许编辑或删除</el-tag>
          </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 v-if="status || isOrganizationManagementEnabled" 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 v-if="status || isOrganizationManagementEnabled" label="所属专业:" prop="schoolMajorId">
          <el-select v-model="formInline.schoolMajorId" placeholder="" clearable style="width: 20rem" v-if="status">
            <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="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 { ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as indexApi from "@/api/teacher";
const dialogVisible = ref(false);
const loading = ref(false);
const currentUserId = computed(() => userStore.userInfo.userId);
const isManagerTeacher = computed(() => userStore.userInfo.teacherAdmin === true || String(userStore.userInfo.roleId || userStore.userInfo.role) === "1");
const legacyOrganizationManagementEnabled = computed(() => userStore.schoolProductConfig?.organizationMode !== "TEACHING_CLASS_ONLY");
const facultyManagementEnabled = computed(() => userStore.schoolProductConfig?.facultyManagementEnabled ?? legacyOrganizationManagementEnabled.value);
const majorManagementEnabled = computed(() => userStore.schoolProductConfig?.majorManagementEnabled ?? legacyOrganizationManagementEnabled.value);
const adminClassManagementEnabled = computed(() => userStore.schoolProductConfig?.adminClassManagementEnabled ?? legacyOrganizationManagementEnabled.value);
const isOrganizationManagementEnabled = computed(() => facultyManagementEnabled.value || majorManagementEnabled.value || adminClassManagementEnabled.value);
const formatDate = (cellValue) => {
  const numeric = Number(cellValue);
  if (!cellValue || !Number.isFinite(numeric)) {
    return cellValue || "";
  }
  const date = new Date(numeric);
  if (Number.isNaN(date.getTime())) {
    return cellValue;
  }
  const pad = (value) => String(value).padStart(2, "0");
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
};
const formInline = ref({
  schoolFacultyId: "",
  schoolId: userStore.userInfo.schoolId,
  schoolMajorId: "",
  schoolMajorName: "",
  schoolName: "",
  userName: "",
  email: "",
  phone: "",
});
const organizationRules = {
  schoolFacultyId: [{ required: true, message: "请选择院系", trigger: "change" }],
  schoolMajorId: [{ required: true, message: "请选择专业", trigger: "change" }],
};
const rules = computed(() => ({
  ...((status.value || isOrganizationManagementEnabled.value) ? organizationRules : {}),
  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.getTeacherList({ ...paramsquery.value, operatorId: currentUserId.value }).then((res) => {
    tableData.value = res.data.list;
    schoolTotal.value = res.data.total;
  });
};
// 删除院校
const delSchool = (id) => {
  indexApi.deleteTeacher({ userId: id.userId, operatorId: currentUserId.value }).then((res) => {
    proxy.$message.success("删除成功");
    getList();
  });
};
// 新增院校
const addschool = () => {
  dialogVisible.value = true;
  status.value = true;
};
const editSchool = (row) => {
  let data = { ...row };
  formInline.value = data;
  formInline.value.userName = row.username;
  dialogVisible.value = true;
  status.value = false;
  if (!isOrganizationManagementEnabled.value) {
    return;
  }
  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.operatorId = currentUserId.value;
  indexApi.addTeacher(formInline.value).then((res) => {
    proxy.$message.success("添加成功");
    dialogVisible.value = false;
    getList();
  });
};
const edit = () => {
  formInline.value.status = true;
  formInline.value.operatorId = currentUserId.value;
  formInline.value.username = formInline.value.userName;
  indexApi.updateTeacher(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 = () => {
  getList();
};
const initializeTeacherPassword = (row) => {
  ElMessageBox.confirm(
    `确定将教师“${row.name || row.username}”的登录密码初始化为 123qwe 吗？`,
    "密码初始化",
    {
      confirmButtonText: "确定初始化",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    indexApi
      .initializeTeacherPassword({
        userId: row.userId,
        operatorId: currentUserId.value,
      })
      .then(() => proxy.$message.success("密码初始化成功"));
  });
};
// 查询院系下拉列表
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.exportTeacherList({ 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 = async () => {
  const XLSX = await import("xlsx");
  const templateSheet = XLSX.utils.aoa_to_sheet([
    ["院校名称", "院系名称", "专业名称", "教师姓名", "工号", "电话", "邮箱"],
    ["请填写系统中的院校名称", "请填写系统中的院系名称", "请填写系统中的专业名称", "张老师", "20260001", "13800000000", "teacher@example.com"],
  ]);
  templateSheet["!cols"] = [
    { wch: 26 },
    { wch: 24 },
    { wch: 24 },
    { wch: 16 },
    { wch: 18 },
    { wch: 18 },
    { wch: 28 },
  ];
  const guideSheet = XLSX.utils.aoa_to_sheet([
    ["填写说明"],
    ["1. 院校、院系和专业名称必须与系统中已维护的名称完全一致。"],
    ["2. 教师姓名和工号必填，工号只能填写数字且不能重复。"],
    ["3. 电话和邮箱可以留空；填写时必须符合手机号和邮箱格式。"],
    ["4. 默认密码为 123qwe，导入成功后请提醒教师及时修改密码。"],
  ]);
  guideSheet["!cols"] = [{ wch: 80 }];
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, templateSheet, "教师导入模板");
  XLSX.utils.book_append_sheet(workbook, guideSheet, "填写说明");
  XLSX.writeFile(workbook, "教师账号导入模板.xlsx");
};

onMounted(() => {
  getList();
  if (isOrganizationManagementEnabled.value) {
    getFacultyList();
  }
});
</script>
<style lang='scss'  scoped>
.teacher {
  background: #ffffff;
  height: calc(100vh - 70px);
  .df {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .owned-class-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-height: 68px;
    overflow: auto;
    padding: 4px;
  }
  .owned-class-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 10px;
    color: #79dcff;
    font-size: 12px;
    line-height: 20px;
    border: 1px solid rgba(55, 194, 255, 0.38);
    border-radius: 999px;
    background: rgba(15, 111, 164, 0.18);
  }
  .empty-summary {
    color: rgba(184, 218, 235, 0.58);
  }
  .student-count {
    color: #63dcff;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    small {
      color: rgba(210, 238, 248, 0.72);
      font-size: 12px;
      font-weight: 500;
    }
  }
}
</style>