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 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 }">
          <el-button type="primary" text @click="editSchool(row)">编辑</el-button>
          <el-button type="danger" text @click="delSchool(row.schoolFacultyId)">删除</el-button>
        </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" :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 formInline = ref({
  schoolFacultyName: "",
  schoolFacultyContact: "",
  schoolFacultyContactAddress: "",
  schoolFacultyContactTel: "",
  schoolId: userStore.userInfo.schoolId,
});
// 对院校名称 院校层次 所属省份 所属城市 院校联系人进行非空校验
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 = () => {
  dialogVisible.value = true;
  status.value = true;
};
const editSchool = (row) => {
  let data = { ...row };
  formInline.value = data;
  dialogVisible.value = true;
  status.value = false;
};
const add = () => {
  indexApi.addSchool(formInline.value).then((res) => {
    proxy.$message.success("添加成功");
    dialogVisible.value = false;
    getList();
  });
};
const edit = () => {
  formInline.value.userId = userStore.userInfo.userId;
  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 = () => {
  for (const key in formInline.value) {
    formInline.value[key] = "";
  }
  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>