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

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-05-13 16:22:46
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-22 09:43:12
 * @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="class app-container">
    <div class="df">
      <div class="online">
        <span>所属院系:</span>
        <!-- <el-input v-model="paramsquery.schoolName" style="width: 150px" type="text" class="ml10" /> -->
        <el-select v-model="paramsquery.schoolFacultyId" placeholder="" clearable class="ml10" @change="getMajorList" style="width: 14rem">
          <el-option v-for="school in facultyList" :key="school.schoolId" :label="school.schoolFacultyName" :value="school.schoolFacultyId" />
        </el-select>
      </div>
      <div class="online">
        <span>所属专业:</span>
        <!-- <el-input v-model="paramsquery.schoolName" style="width: 150px" type="text" class="ml10" /> -->
        <el-select v-model="paramsquery.schoolMajorId" placeholder="" clearable class="ml10">
          <el-option v-for="major in majorList" :key="major.schoolMajorId" :label="major.schoolMajorName" :value="major.schoolMajorId" />
        </el-select>
      </div>
      <div class="online">
        <span>班级名称:</span>
        <el-input v-model="paramsquery.className" style="width: 14rem" type="text" class="ml10" />
      </div>
      <div class="online">
        <span>班级编号:</span>
        <el-input v-model="paramsquery.classSn" style="width: 14rem" type="text" class="ml10" />
        <el-button @click="getList" type="primary" class="ml10" :icon="Search">搜索</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col>
        <el-button type="primary" :icon="Plus" @click="addschool">新增</el-button>
        <el-button type="primary" :icon="Refresh" @click="refresh">刷新</el-button>
      </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="schoolClass.className" align="center"></el-table-column>
      <el-table-column label="班级编号" prop="schoolClass.classSn" align="center"></el-table-column>
      <el-table-column label="创建人" align="center">
        <template #default="{ row }">
          <span>{{ row.schoolClass.createdByName || row.schoolClass.createdBy || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="schoolClass.createTime" align="center">
        <template #default="{ row }">
          <span>{{ formatDate(row.schoolClass.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <template v-if="canOperateClass(row.schoolClass)">
            <el-button type="primary" text @click="editSchool(row.schoolClass)">编辑</el-button>
            <el-button type="danger" text @click="delSchool(row.schoolClass.schoolClassId)">删除</el-button>
            <el-button type="primary" text @click="handleSuccess(row)">数据初始化</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" top="110vh" width="50%" :title="`新增院系`" :modal="false" @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="getMajorList1" 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">
            <el-option v-for="major in majorList1" :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="className">
          <el-input v-model="formInline.className" 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";
const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";
import { ElMessageBox } from "element-plus";

const userStore = useUserStore();
const currentUserId = computed(() => userStore.userInfo.userId);
import * as indexApi from "@/api/teacher";
const dialogVisible = ref(false);
const loading = ref(false);
const formInline = ref({
  schoolFacultyId: "",
  schoolId: userStore.userInfo.schoolId,
  schoolMajorId: "",
  className: "",
});
const rules = ref({
  schoolFacultyId: [{ required: true, message: "请选择所属院系", trigger: "change" }],
  schoolMajorId: [{ required: true, message: "请输入所属专业", trigger: "blur" }],
  className: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
});
const paramsquery = ref({
  index: 1,
  size: 10,
  classSn: "",
  schoolId: userStore.userInfo.schoolId,
  className: "",
});
const classInfo = ref({});
const schoolTotal = ref(0);
// 新增编辑状态
const status = ref(false);
// 院校list
const tableData = ref([]);
// 获取院校列表
const getList = () => {
  indexApi.getClassesList(paramsquery.value).then((res) => {
    tableData.value = res.data.list;
    schoolTotal.value = res.data.total;
  });
};
// 删除院校
const delSchool = (id) => {
  indexApi.deleteClass({ schoolClassId: id, userId: userStore.userInfo.userId }).then((res) => {
    proxy.$message.success("删除成功");
    getList();
  });
};
// 新增院校
const addschool = () => {
  dialogVisible.value = true;
  status.value = true;
};
const editSchool = (row) => {
  let data = { ...row };
  formInline.value = data;
  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.userId = currentUserId.value;
  indexApi.addClass(formInline.value).then((res) => {
    proxy.$message.success("添加成功");
    dialogVisible.value = false;
    getList();
  });
};
const edit = () => {
  formInline.value.schoolId = userStore.userInfo.schoolId;
  formInline.value.userId = currentUserId.value;
  formInline.value.status = true;
  indexApi.updateClass(formInline.value).then((res) => {
    proxy.$message.success("编辑成功");
    dialogVisible.value = false;
    getList();
  });
};
const canOperateClass = (schoolClass) => {
  return schoolClass?.createdBy === currentUserId.value;
};
// 提交
const submitForm = () => {
  status.value ? add() : edit();
};
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 (!paramsquery.value.schoolFacultyId) return;
  paramsquery.value.schoolMajorId = "";
  indexApi.getMajorListBySchoolId({ schoolFacultyId: paramsquery.value.schoolFacultyId }).then((res) => {
    majorList.value = res.data;
  });
};
// 专业下拉框
const majorList1 = ref([]);
const getMajorList1 = () => {
  indexApi.getMajorListBySchoolId({ schoolFacultyId: formInline.value.schoolFacultyId }).then((res) => {
    majorList1.value = res.data;
  });
};
//案例初始话方法
const handleSuccess = (res) => {
  ElMessageBox.confirm("确定初始化班级数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      indexApi.initClass({ classId: res.schoolClass.schoolClassId}).then((res) => {
        proxy.$message.success("初始化成功");
        getList();
      });
    })
    .catch(() => {});
};
onMounted(() => {
  getList();
  getFacultyList();
});
</script>
<style lang='scss'  scoped>
.class {
  background: #ffffff;
  height: calc(100vh - 70px);
  .df {
    display: flex;
    align-items: center;
    // 换行
    flex-wrap: wrap;
    gap: 20px;
  }
}
</style>