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

<template>
  <div class="class-page app-container">
    <el-tabs v-model="activeClassType" class="class-tabs" @tab-change="handleTabChange">
      <el-tab-pane label="行政班" name="ADMIN" />
      <el-tab-pane label="教学班" name="TEACHING" />
    </el-tabs>

    <div class="query-bar">
      <el-select v-model="paramsquery.schoolFacultyId" placeholder="所属院系" clearable class="query-control" @change="getMajorList">
        <el-option v-for="faculty in facultyList" :key="faculty.schoolFacultyId" :label="faculty.schoolFacultyName" :value="faculty.schoolFacultyId" />
      </el-select>
      <el-select v-model="paramsquery.schoolMajorId" placeholder="所属专业" clearable class="query-control">
        <el-option v-for="major in majorList" :key="major.schoolMajorId" :label="major.schoolMajorName" :value="major.schoolMajorId" />
      </el-select>
      <el-input v-model="paramsquery.className" placeholder="班级名称" clearable class="query-control" />
      <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
      <el-button :icon="Refresh" @click="refresh">刷新</el-button>
    </div>

    <div class="table-actions">
      <el-button type="primary" :icon="Plus" @click="openCreateDialog">新增{{ activeClassType === 'ADMIN' ? '行政班' : '教学班' }}</el-button>
    </div>

    <el-table :data="filteredTableData" border v-loading="loading" class="class-table" :header-cell-style="tableHeaderStyle">
      <el-table-column label="班级名称" prop="schoolClass.className" align="center" />
      <el-table-column label="所属院系" align="center">
        <template #default="{ row }">
          <span>{{ row.schoolFacultyName || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属专业" align="center">
        <template #default="{ row }">
          <span>{{ row.schoolMajorName || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="activeClassType === 'TEACHING'" label="创建人" align="center">
        <template #default="{ row }">
          <span>{{ row.schoolClass.createdByName || row.schoolClass.createdBy || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据来源" align="center" width="120">
        <template #default="{ row }">
          <el-tag :type="row.schoolClass.dataSource === 'ZHIYUN' ? 'warning' : 'success'">
            {{ row.schoolClass.dataSource === "ZHIYUN" ? "智云" : "本系统" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="schoolClass.createTime" align="center" width="180">
        <template #default="{ row }">
          <span>{{ formatDate(row.schoolClass.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="260">
        <template #default="{ row }">
          <template v-if="canOperateClass(row.schoolClass)">
            <el-button type="primary" text @click="editClass(row.schoolClass)">编辑</el-button>
            <el-button type="danger" text @click="deleteClass(row.schoolClass.schoolClassId)">删除</el-button>
            <el-button v-if="activeClassType === 'TEACHING'" type="warning" text @click="initializeClass(row.schoolClass)">
              数据初始化
            </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="520px" :title="dialogTitle" class="teacher-dialog" @close="onClose">
      <el-form ref="formInlineref" :model="formInline" label-width="96px" :rules="rules">
        <el-form-item label="所属院系" prop="schoolFacultyId">
          <el-select v-model="formInline.schoolFacultyId" placeholder="请选择院系" clearable class="form-control" @change="getMajorListForForm" :disabled="!isCreate">
            <el-option v-for="faculty in facultyList" :key="faculty.schoolFacultyId" :label="faculty.schoolFacultyName" :value="faculty.schoolFacultyId" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属专业" prop="schoolMajorId">
          <el-select v-model="formInline.schoolMajorId" placeholder="请选择专业" clearable class="form-control" :disabled="!isCreate">
            <el-option v-for="major in majorListForForm" :key="major.schoolMajorId" :label="major.schoolMajorName" :value="major.schoolMajorId" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" prop="className">
          <el-input v-model="formInline.className" placeholder="请输入班级名称" class="form-control" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Plus, Refresh, Search } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { formatDate } from "@/utils/index";
import useUserStore from "@/store/modules/user";
import * as indexApi from "@/api/teacher";

const { proxy } = getCurrentInstance();
const userStore = useUserStore();

const activeClassType = ref("ADMIN");
const dialogVisible = ref(false);
const loading = ref(false);
const isCreate = ref(true);
const tableData = ref([]);
const schoolTotal = ref(0);
const facultyList = ref([]);
const majorList = ref([]);
const majorListForForm = ref([]);

const currentUserId = computed(() => userStore.userInfo.userId);
const currentSchoolId = computed(() => userStore.userInfo.schoolId);
const isManagerTeacher = computed(() => userStore.userInfo.teacherAdmin === true || String(userStore.userInfo.roleId) === "1");

const paramsquery = ref({
  index: 1,
  size: 10,
  schoolId: currentSchoolId.value,
  schoolFacultyId: "",
  schoolMajorId: "",
  className: "",
});

const formInline = ref(defaultForm());

const rules = {
  schoolFacultyId: [{ required: true, message: "请选择所属院系", trigger: "change" }],
  schoolMajorId: [{ required: true, message: "请选择所属专业", trigger: "change" }],
  className: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
};

const tableHeaderStyle = {
  color: "#0f3052",
  fontSize: "14px",
  backgroundColor: "#eaf4ff",
};

const dialogTitle = computed(() => `${isCreate.value ? "新增" : "编辑"}${activeClassType.value === "ADMIN" ? "行政班" : "教学班"}`);

const filteredTableData = computed(() => {
  return tableData.value.filter((row) => normalizeClassType(row.schoolClass) === activeClassType.value);
});

function defaultForm() {
  return {
    schoolFacultyId: "",
    schoolId: currentSchoolId.value,
    schoolMajorId: "",
    className: "",
    classType: activeClassType.value,
    sourceClassIds: "",
  };
}

function normalizeClassType(schoolClass) {
  if (schoolClass?.classType) {
    return schoolClass.classType;
  }
  return schoolClass?.createdBy ? "TEACHING" : "ADMIN";
}

function canOperateClass(schoolClass) {
  if (schoolClass?.dataSource === "ZHIYUN") {
    return false;
  }
  if (normalizeClassType(schoolClass) === "TEACHING") {
    return schoolClass?.createdBy === currentUserId.value;
  }
  return isManagerTeacher.value || schoolClass?.createdBy === currentUserId.value;
}

function getList() {
  loading.value = true;
  indexApi
    .getClassesList(paramsquery.value)
    .then((res) => {
      tableData.value = res.data?.list || [];
      schoolTotal.value = res.data?.total || 0;
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleTabChange() {
  paramsquery.value.index = 1;
  getList();
}

function openCreateDialog() {
  isCreate.value = true;
  formInline.value = defaultForm();
  dialogVisible.value = true;
}

function editClass(row) {
  isCreate.value = false;
  formInline.value = {
    ...row,
    classType: normalizeClassType(row),
    userId: currentUserId.value,
  };
  dialogVisible.value = true;
}

function addClass() {
  const payload = {
    ...formInline.value,
    schoolId: currentSchoolId.value,
    classType: activeClassType.value,
    userId: currentUserId.value,
  };
  indexApi.addClass(payload).then(() => {
    proxy.$message.success("添加成功");
    dialogVisible.value = false;
    getList();
  });
}

function updateClass() {
  const payload = {
    ...formInline.value,
    schoolId: currentSchoolId.value,
    classType: activeClassType.value,
    userId: currentUserId.value,
    status: true,
  };
  indexApi.updateClass(payload).then(() => {
    proxy.$message.success("编辑成功");
    dialogVisible.value = false;
    getList();
  });
}

function submitForm() {
  proxy.$refs.formInlineref.validate((valid) => {
    if (!valid) return;
    isCreate.value ? addClass() : updateClass();
  });
}

function deleteClass(id) {
  ElMessageBox.confirm("确定删除该班级吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    indexApi.deleteClass({ schoolClassId: id, userId: currentUserId.value }).then(() => {
      proxy.$message.success("删除成功");
      getList();
    });
  });
}

function initializeClass(schoolClass) {
  ElMessageBox.confirm("确定初始化该教学班全班实训数据吗？该操作不可恢复。", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    indexApi
      .initializeTeachingClassTrainingData({
        teachingClassId: schoolClass.schoolClassId,
        operatorId: currentUserId.value,
      })
      .then(() => {
        proxy.$message.success("初始化成功");
      });
  });
}

function refresh() {
  getList();
}

function onClose() {
  formInline.value = defaultForm();
}

function getFacultyList() {
  indexApi.seleteSchoolFacultyList({ schoolId: currentSchoolId.value }).then((res) => {
    facultyList.value = res.data || [];
  });
}

function getMajorList() {
  paramsquery.value.schoolMajorId = "";
  if (!paramsquery.value.schoolFacultyId) {
    majorList.value = [];
    return;
  }
  indexApi.getMajorListBySchoolId({ schoolFacultyId: paramsquery.value.schoolFacultyId }).then((res) => {
    majorList.value = res.data || [];
  });
}

function getMajorListForForm() {
  formInline.value.schoolMajorId = "";
  if (!formInline.value.schoolFacultyId) {
    majorListForForm.value = [];
    return;
  }
  indexApi.getMajorListBySchoolId({ schoolFacultyId: formInline.value.schoolFacultyId }).then((res) => {
    majorListForForm.value = res.data || [];
  });
}

onMounted(() => {
  getList();
  getFacultyList();
});
</script>

<style lang="scss" scoped>
.class-page {
  min-height: calc(100vh - 70px);
  background: #f7fbff;

  .class-tabs {
    margin-bottom: 12px;
  }

  .query-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d8e8f7;
    border-radius: 6px;
    background: #ffffff;
  }

  .query-control {
    width: 220px;
  }

  .table-actions {
    display: flex;
    justify-content: flex-start;
    margin: 14px 0;
  }

  .class-table {
    width: 100%;
  }

  .form-control {
    width: 100%;
  }
}
</style>