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

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-05-13 16:22:46
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-16 15:53:26
 * @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="school app-container">
    <div class="online">
      <span>院系名称:</span>
      <el-input v-model="paramsquery.schoolName" style="width: 14rem" type="text" class="ml10" />
      <el-button @click="getList" type="primary" class="ml10" :icon="Search">搜索</el-button>
    </div>
    <el-row class="mt10">
      <el-col>
        <el-button v-if="isManagerTeacher" 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="schoolFaculty.schoolFacultyName" align="center"></el-table-column>
      <el-table-column label="联系人" prop="schoolFaculty.schoolFacultyContact" align="center"></el-table-column>
      <el-table-column label="联系人电话" prop="schoolFaculty.schoolFacultyContactTel" align="center"></el-table-column>
      <el-table-column label="联系人地址" prop="schoolFaculty.schoolFacultyContactAddress" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="schoolFaculty.createTime" align="center">
        <template #default="{ row }">
          <span>{{ formatDate(row.schoolFaculty.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <template v-if="isManagerTeacher">
            <el-button type="primary" text @click="editSchool(row)">编辑</el-button>
            <el-button type="danger" text @click="delSchool(row.schoolFacultyId)">删除</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" :rules="rules">
        <el-form-item label="院系名称:" prop="schoolFacultyName">
          <el-input v-model="formInline.schoolFacultyName" placeholder="院系名称" clearable />
        </el-form-item>
        <el-form-item label="联系人:">
          <el-input v-model="formInline.schoolFacultyContact" placeholder="联系人" clearable />
        </el-form-item>
        <el-form-item label="联系人电话:">
          <el-input v-model="formInline.schoolFacultyContactTel" placeholder="联系人电话" clearable />
        </el-form-item>
        <el-form-item label="联系人地址:">
          <el-input v-model="formInline.schoolFacultyContactAddress" placeholder="联系人地址" clearable />
        </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";
const { proxy } = getCurrentInstance();
import { formatDate } from "@/utils/index";
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 createEmptyForm = () => ({
  schoolFacultyName: "",
  schoolFacultyContact: "",
  schoolFacultyContactAddress: "",
  schoolFacultyContactTel: "",
  schoolId: userStore.userInfo.schoolId,
});
const formInline = ref(createEmptyForm());
// 对院校名称 院校层次 所属省份 所属城市 院校联系人进行非空校验
const rules = ref({
  schoolFacultyName: [{ required: true, message: "请输入院系名称", trigger: "blur" }],
});
const paramsquery = ref({
  index: 1,
  size: 10,
  schoolName: "",
  schoolId: userStore.userInfo.schoolId,
});
const schoolTotal = ref(0);
// 新增编辑状态
const status = ref(false);
// 院校list
const tableData = ref([]);
// 获取院校列表
const getList = () => {
  indexApi.getSchoolList(paramsquery.value).then((res) => {
    tableData.value = res.data.list;
    schoolTotal.value = res.data.total;
  });
};
// 删除院校
const delSchool = (id) => {
  indexApi.deleteSchool({ schoolFacultyId: id, userId: userStore.userInfo.userId }).then((res) => {
    proxy.$message.success("删除成功");
    getList();
  });
};
// 新增院系
const addschool = () => {
  formInline.value = createEmptyForm();
  proxy.$refs.formInlineref?.clearValidate?.();
  dialogVisible.value = true;
  status.value = true;
};
const editSchool = (row) => {
  const faculty = row.schoolFaculty || row;
  formInline.value = {
    ...createEmptyForm(),
    schoolFacultyId: row.schoolFacultyId || faculty.schoolFacultyId,
    schoolId: faculty.schoolId || row.schoolId || userStore.userInfo.schoolId,
    schoolFacultyName: faculty.schoolFacultyName || "",
    schoolFacultyContact: faculty.schoolFacultyContact || "",
    schoolFacultyContactAddress: faculty.schoolFacultyContactAddress || "",
    schoolFacultyContactTel: faculty.schoolFacultyContactTel || "",
  };
  proxy.$refs.formInlineref?.clearValidate?.();
  dialogVisible.value = true;
  status.value = false;
};
const add = () => {
  formInline.value.userId = currentUserId.value;
  formInline.value.schoolId = userStore.userInfo.schoolId;
  indexApi.addSchool(formInline.value).then((res) => {
    proxy.$message.success("添加成功");
    dialogVisible.value = false;
    getList();
  });
};
const edit = () => {
  formInline.value.userId = currentUserId.value;
  indexApi.updateSchool(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 = () => {
  formInline.value = createEmptyForm();
  proxy.$refs.formInlineref?.clearValidate?.();
  dialogVisible.value = false;
};
// 刷新
const refresh = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    getList();
  }, 2000);
};
onMounted(() => {
  getList();
});
</script>
<style lang='scss'  scoped>
.school {
  background: #ffffff;
  height: calc(100vh - 70px);
}
</style>