ManageSchoolTable.vue

<template>
  <div style="width: 100%" class="ManageCompititionTable">
    <el-card style="margin-top: 15px">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formInline"
        :rules="rules"
        style="margin-top: 15px"
      >
        <el-form-item style="float: left">
          <el-button @click="release" type="primary" plain round size="medium"
            >新增用户1</el-button
          >
        </el-form-item>

        <el-form-item prop="param1">
          <el-input
            v-model="formInline.param1"
            placeholder="请输入要查询的内容"
            size="medium"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="地址：" prop="param2">
          <el-select v-model="formInline.param2" placeholder="条件2">
            <el-option label="选项1" value="item1"></el-option>
            <el-option label="选项2" value="item2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" round @click="onSubmit('formInline')"
            >查询</el-button -->
          <el-button
            style="position: relative; right: 25px"
            type="primary"
            icon="el-icon-search"
            plain
            round
            size="medium"
            @click="onSubmit('formInline')"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table
        :data="competeList"
        stripe
        border
        style="width: 100%"
        @sort-change="onSortChange"
      >
        <!-- <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{
              (this.currentPage - 1) * this.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="序号"
          width="50"
          align="center"
          type="index"
          :index="indexMethod"
          header-align="center"
        >
        </el-table-column>

        <!-- <el-table-column prop="competitionId" label="竞赛id" width="80"> -->
        <!-- <template slot-scope="scope"> -->
        <!-- <span style="margin-left: 10px">{{ item.competitionId }}</span> -->
        <!-- </template> -->

        <!-- </el-table-column> -->
        <el-table-column
          prop="title"
          label="帖子主题"
          width="420"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="auditStatus"
          label="审核状态"
          width="320"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="count"
          label="已报名人数"
          width="200"
          align="center"
          header-align="center"
          sortable="custom"
          :sort-orders="['1', '2']"
        >
        </el-table-column> -->
        <el-table-column
          label="操作"
          width="414"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.row.competitionId)"
              round
              >详细信息
            </el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.row.competitionId)"
              round
              plain
              >编辑信息
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row.competitionId)"
              round
              plain
              >删除信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrev"
        @next-click="handleNext"
        background
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "PageTable",
  data() {
    return {
      formInline: {
        param1: "",
        param2: "选项1",
      },
      // tableData: [
      //   {
      //     // no: "1",
      //     // title: "2022福州大学数学竞赛校赛",
      //     // num: "135",
      //     competitionId: "",
      //     title: "",
      //     teacherName: "",
      //     count: "",
      //   },
      // ],

      rules: {
        param1: [
          { required: false, message: "请输入", trigger: "blur" },
          {
            min: 0,
            max: 10,
            message: "长度在 0 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      type: 0,
      currentPage: 1,
      pageSize: 10,
      pageTotal: 8,
      dialogFormVisible: false,
      form: {
        // no: "0",
        // title: "2022福州大学数学竞赛校赛",
        // num: "135",
        // index: 0,
      },

      //   competitionId: ''
      // title: '',
      // teacherName: '',
      // count: ''
      competeList: [],
    };
  },

  created() {
    // this.getCompeteList();
  },

  mounted() {
    this.getCompeteList();
    console.log("this.competeList111");
    console.log(this.competeList);
    console.log("this.competeList111");
  },

  methods: {
    //点击跳转
    //序号
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    //发布竞赛功能
    release() {
      this.$router.replace("/PageFormsSignup");
    },
    //查询竞赛功能
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formInline.param1 == "") {
            this.getCompeteList();
          } else {
            this.$axios({
              method: "get",
              url: "http://124.220.174.249:8085/backend/admin/showAllCompetition",
              headers: { token: localStorage.token },
              params: {
                // title: this.formInline.param1, //获取查询内容
                // teacherNo: localStorage.getItem("userId"),
                page: 1,
                limit: 10,
              },
            })
              .then((res) => {
                console.log("5");
                console.log(res);
                if (res.data.code == "200") {
                  this.competeList = res.data.data;
                  this.pageTotal = Number(res.data.details.infoCount); //显示当前条数
                  this.handleCurrentChange(1);
                  console.log(res.data.data);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // //退出登录
    // exit() {
    //   // this.$router.replace("/");
    //   this.$axios({
    //     method: "post",
    //     url: "http://124.220.174.249:8085/backend/logout",
    //     headers: { token: localStorage.token },
    //   })
    //     .then((res) => {
    //       console.log(res);
    //       if (res.data.code == "200") {
    //         console.log("返回登录界面");
    //         this.$router.replace("/");
    //       }
    //     })
    //     .catch((err) => {
    //       return this.$message.error("退出失败");
    //       console.log("退出失败");
    //     });
    // },
    //查看竞赛详情
    handleDetail(id) {
      console.log("id");
      console.log(id);
      console.log("id");
      this.$router.push({ path: "/PageFormsDetail", query: { id: id } });
      // this.form.index = index + (this.currentPage - 1) * this.pageSize;
      // this.form.no = row.no;
      // this.form.title = row.title;
      // this.form.num = row.num;
      // this.dialogFormVisible = true;
    },
    //修改竞赛信息
    handleEdit(id) {
      this.$router.push({ path: "/PageFormsModify", query: { id: id } });
      // this.form.index = index + (this.currentPage - 1) * this.pageSize;
      // this.form.no = row.no;
      // this.form.title = row.title;
      // this.form.num = row.num;
      // this.dialogFormVisible = true;
    },
    //删除竞赛信息
    handleDelete(id) {
      this.$router.push({ path: "/PageFormsDelete", query: { id: id } }); // 通过this.$route.query.id获得id
      // this.tableData.splice(index + (this.currentPage - 1) * this.pageSize, 1);
      // this.pageTotal = this.tableData.length;
      // this.$message({
      //   message: "删除" + row.name + "成功！",
      //   type: "success",
      // });
       //确定删除
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "http://124.220.174.249:8085/backend/teacher/deleteCompetition",
            headers: { token: localStorage.token },
            data: {
              competitionId: id,
            },
          })
            .then((res) => {
              console.log("5");
              console.log(res);
              if (res.data.code == "200") {
                console.log("删除成功");
                this.getCompeteList();
                // this.$router.replace("/PageTable");
                // this.$notify({
                //   title: "竞赛删除成功",
                //   message: "返回大厅！",
                //   type: "success",
                // });
              }
            })
            .catch((err) => {
              console.log(err);
              console.log("删除失败");
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // this.$axios
      //   .post("http://47.113.195.148:8085/backend/teacher/deleteCompetition", {
      //     competitionId: this.queryInfo.competeId,
      //     //  competitionId: "11"
      //   })
    },

    //每页条数改变
    handleSizeChange(size) {
      this.pageSize = size;
      console.log("this.pageSize");
      console.log(this.pageSize);
      console.log("this.pagesize");
      if (this.formInline.param1 == "") {
        this.$axios({
          method: "get",
          url: "http://124.220.174.249:8085/backend/admin/showAllCompetition",
          headers: { token: localStorage.token },
          params: {
            // teacherNo: localStorage.getItem("userId").replace(/\"/g, ""), //去掉双引号
            page: this.currentPage,
            limit: this.pageSize,
            type: this.type,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.data.code == "200") {
              this.competeList = res.data.data;
              console.log("res.data.data");
              console.log(this.competeList);
              console.log("res.data.data");
              this.pageTotal = Number(res.data.details.infoCount);
            }
          })
          .catch((err) => {
            return this.$message.error("获取竞赛列表信息失败！");
          });
      } else {
        this.$axios({
          method: "get",
          url: "http://124.220.174.249:8085/backend/teacher/searchCompetition",
          headers: { token: localStorage.token },
          params: {
            title: this.formInline.param1, //获取查询内容
            teacherNo: localStorage.getItem("userId"),
            page: this.currentPage,
            limit: this.pageSize,
          },
        })
          .then((res) => {
            console.log("5");
            console.log(res);
            if (res.data.code == "200") {
              this.competeList = res.data.data;
              this.pageTotal = Number(res.data.details.infoCount); //显示当前条数
              console.log(res.data.data);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //当前页改变会触发？
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      if (this.formInline.param1 == "") {
        this.$axios({
          method: "get",
          url: "http://124.220.174.249:8085/backend/admin/showAllCompetition",
          headers: { token: localStorage.token },
          params: {
            // teacherNo: localStorage.getItem("userId").replace(/\"/g, ""), //去掉双引号
            page: this.currentPage,
            limit: this.pageSize,
            type: this.type,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.data.code == "200") {
              this.competeList = res.data.data;
              console.log("res.data.data222");
              console.log(this.competeList);
              console.log("res.data.data222");
              this.pageTotal = Number(res.data.details.infoCount);
            }
          })
          .catch((err) => {
            return this.$message.error("获取竞赛列表信息失败！");
          });
      } else {
        this.$axios({
          method: "get",
          url: "http://124.220.174.249:8085/backend/teacher/searchCompetition",
          headers: { token: localStorage.token },
          params: {
            title: this.formInline.param1, //获取查询内容
            teacherNo: localStorage.getItem("userId"),
            page: this.currentPage,
            limit: this.pageSize,
          },
        })
          .then((res) => {
            console.log("5");
            console.log(res);
            if (res.data.code == "200") {
              this.competeList = res.data.data;
              this.pageTotal = Number(res.data.details.infoCount); //显示当前条数
              console.log(res.data.data);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // //用户点击上一页按钮改变当前页后触发
    // handlePrev() {},
    // //用户点击下一页按钮改变当前页后触发
    // handleNext() {},
    //获取竞赛信息(竞赛大厅)
    getCompeteList() {
      console.log(localStorage.getItem("token"));
      console.log(localStorage.getItem("userId"));
      // this.$axios.defaults.headers.common["Authorization"] =  localStorage.getItem('token');
      // this.$axios.interceptors.request.use(
      //   function (config) {
      //     // Do something before request is sent
      //     let token = localStorage.getItem("token");
      //     if (token) {
      //       config.headers.token = token; //将token放到请求头发送给服务器
      //       return config;
      //       //这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中
      //       // config.headers['accessToken'] = Token;
      //     }
      //   },
      //   function (error) {
      //     // Do something with request error
      //     return Promise.reject(error);
      //   }
      // );
      // console.log("papa");
      // console.log(this.pageSize);
      // console.log("papa");
      this.$axios({
        method: "get",
        url: "http://124.220.174.249:8085/backend/admin/showAllHelp",
        // Headers: { token: localStorage.getItem("token") },
        // headers: {
        //   authorization: `Bearer ${localStorage.getItem("token")}`,
        // },
        headers: { token: localStorage.token },
        params: {
          // teacherNo: 101,
          // teacherNo: localStorage.getItem("userId").replace(/\"/g, ""), //去掉双引号
          page: this.currentPage,
          limit: this.pageSize,
          // type: this.type,
          // limit: 30,
          // token:localStorage.token
          // headers:{token:localStorage.token},
        },
      })
        // this.$axios
        //   .get("http://47.113.195.148:8085/backend/teacher/showAllCompetitions", {
        //     //params参数必写 , 如果没有可传参数，传{}以
        //     params: {
        //       teacherNo: localStorage.getItem("userId"),
        //     },
        //   })
        .then((res) => {
          // console.log(username + password);
          console.log(res);
          if (res.data.code == "200") {
            this.competeList = res.data.data;
            console.log("res.data.data");
            console.log(this.competeList);
            console.log("res.data.details.infoCount");
            console.log(res.data.details.infoCount);
            console.log(res.data.data.length);
            this.pageTotal = Number(res.data.details.infoCount);
            console.log("res.data.data");
          }
        })
        .catch((err) => {
          return this.$message.error("获取竞赛列表信息失败！");
        });
    },
        //分页升降序
    onSortChange({ prop, order }) {
      if (order == "ascending") this.type = 1;
      else this.type = 2;
      this.$axios({
        method: "get",
        url: "http://124.220.174.249:8085/backend/admin/showAllCompetition",
        headers: { token: localStorage.token },
        params: {
          // teacherNo: 101,
          // teacherNo: localStorage.getItem("userId").replace(/\"/g, ""), //去掉双引号
          page: this.currentPage,
          limit: this.pageSize,
          type: this.type,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == "200") {
            this.competeList = res.data.data;
            console.log("res.data.data");
            console.log(this.competeList);
            console.log("res.data.details.infoCount");
            console.log(res.data.details.infoCount);
            console.log(res.data.data.length);
            this.pageTotal = Number(res.data.details.infoCount);
            console.log("res.data.data");
          }
        })
        .catch((err) => {
          return this.$message.error("获取竞赛列表信息失败！");
        });
    },
  },
};
</script>

<style scoped>
.el-menu-demo{
  float:right;
}

.icon_left{
  float: left;
  font-size: 30px;
  color: cornflowerblue;
  font-weight: 700;
}

.ManageCompititionTable{
  position: absolute;
  top: 80px;
}
</style>