FE_judgmentPoint/src/views/Home.vue

<template>
  <div class="content">
    <div class="header flex">
      <i class="el-icon-arrow-left" @click="BackMain()" style="cursor:pointer">
        <span>Back</span>
      </i>

      <p>{{systemName}} 判分点设置</p>
    </div>
    <div class="footer">
      <div class="flex-end">
        <div>
            <el-input placeholder="请输入判分点名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
        </div>
      </div>
      <div class="flex footer_h">
        <!-- <i class="el-icon-collection-tag"></i> -->
        <div class="black"></div>
        <p>判分点列表</p>
        <el-button class="button" @click="HomepageJump()">新增</el-button>
      </div>
      <div>
        <el-row>
          <el-col :span="24">
            <el-card shadow="hover">
              <el-table
                :data="tableData"
                :cell-style="rowClass"
                :header-cell-style="headClass"
                :stripe="true"
                header-align="center"
              >
                <el-table-column type="index" label="序号" align="center">
                  <template slot-scope="scope">{{scope.$index + (pageNo - 1) * pageSize + 1}}</template>
                </el-table-column>
                <el-table-column prop="judgmentPointsName" label="判分点名称" align="center"></el-table-column>
                <el-table-column label="实验要求" align="center">
                  <template slot-scope="scope">
                    <quill :border="true" :readonly="true" v-model="scope.row.experimentalRequirements" :minHeight="150" :height="150" />
                  </template>
                </el-table-column>

                <el-table-column prop="operate" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="getListDelete(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="isopen" label="是否启用" align="center" min-width="20%">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.isopen"
                      :active-value="0"
                      :inactive-value="1"
                      @change="changeSwitch($event,scope.row,scope.$index)"
                    ></el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="10"
            layout="total,prev, pager, next, jumper"
            :total="dataTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import quill from '@/components/quill'
export default {
  data() {
    return {
      keyword: '',
      searchTimer: null,
      tableData: [],
      dataTotal: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pageNo: 1,
      pageSize: 10,
      currentPage: 1,
      systemId: "",
      userId: "",
      systemName: "",
      host: location.host.includes('liuwanr.cn') ? 'http://www.liuwanr.cn' : 'http://www.occupationlab.com'
    };
  },
  components: {quill},
  watch: {
    keyword: function(val) {
        clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
            this.initData()
        },500)
    },
  },
  mounted() {
    this.handleCurrentChange(this.pageNo);
  },
  methods: {
    changeSwitch(e, row, index) {
      let newData = row;
      newData.isopen = newData.isopen === 1 ? 1 : 0;
      this.tableData[index] = newData;
      this.$post(this.api.UpdateIsOpen, {
        judgmentPointsId: row.judgmentPointsId,
        isopen: newData.isopen
      });
    },
    BackMain() {
      // window.location = "http://www.liuwanr.cn:8080/serviceSide/#/configure";
      history.back()
    },

    handleCurrentChange(val) {
      this.$get(`${this.api.queryUserIds}`).then(res => {
          this.pageNo = val;
          this.systemId = this.getCookie("systemId");
          this.systemId = this.systemId ? this.systemId : 1
          this.systemName = this.getCookie("systemName");
          this.userId = this.getCookie("userId");
          this.$get(this.api.QueryPointOfJudgement, {
            systemId: this.systemId,
            userId: this.userId,
            // systemId: 1,
            pageNum: this.pageNo,
            pageSize: this.pageSize,
            queryName: this.keyword,
            userIdList: res.message.retvalue.join()
          }).then(res => {
            this.tableData = res.message.rows;
            this.dataTotal = res.message.total;
          })
          .catch(err => {
            console.log(err);
          });
      }).catch(res => {})
    },
    initData(){
      this.pageNo = 1
      this.handleCurrentChange(this.pageNo)
    },
    // setCookie(name, value) {
    //   if (value) {
    //     var days = 1; //定义一天
    //     var exp = new Date();
    //     exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); // 写入Cookie, toGMTString将时间转换成字符串
    //     document.cookie =
    //       name +
    //       "=" +
    //       escape(value) +
    //       ";expires=" +
    //       exp.toGMTString +
    //       ";path=/;";
    //   }
    // },

    //新增
    HomepageJump() {
      //重制判分点ID 当点击新增时清除
      // this.setCookie("judgmentPointsId", "");
      // console.log(this.getCookie("judgmentPointsId"));
      // this.$router.push({ path: "/program" });
      this.$router.push({ path: "/program" });
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },

    getCookie(cookie_name) {
      //获取cookie中指定key的value
      var allcookies = document.cookie; //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否则不存在

      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        } //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    },
    // 删除
    getListDelete(res) {
      this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$post(this.api.DeletePointOfJudgement, {
            judgmentPointsId: res.judgmentPointsId
          })
            .then(res => {
              let totalPage = Math.ceil((this.dataTotal - 1) / this.pageSize);
              let currentPage =
                this.pageNo > totalPage ? totalPage : this.pageNo;
              this.pageNo = currentPage < 1 ? 1 : currentPage;
              this.handleCurrentChange(this.pageNo);
            })
            .catch(err => {
              console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 编辑
    handleClick(res) {
      this.$router.push({
        path: "/program",
        query: { judgmentPointsId: res.judgmentPointsId }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.ql-toolbar{
  height: 0;
  padding: 0;
  border-bottom: 0;
}
//分页
.footer /deep/ .el-pagination span:not([class*="suffix"]),
.el-pagination button {
  font-size: 16px;
  margin-right: 30px;
}
.footer /deep/ .el-pagination {
  text-align: right;
  margin: 20px 0 0 0;
}

/deep/ .el-button {
  line-height: 0;
}
.footer {
  background-color: #ffffff;
  margin-top: 10px;
  padding: 10px 20px 20px 20px;
}
.footer_h {
  position: relative;
  height: 50px;
  line-height: 50px;
}
.footer_h .black {
  width: 8px;
  height: 18px;
  background-color: #333;
  margin-top: 15px;
}

.footer_h p {
  padding-left: 10px;
  // padding-right: 980px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
// 文本框
.footer /deep/ .el-textarea__inner {
  height: 60px;
  width: 540px;
  resize: none;
  border: 1px solid #9278ff;
  font-size: 12px;
  border-radius: 5px;
}
.footer /deep/ .el-textarea__inner:hover {
  border: 1px solid #9278ff;
}
.footer /deep/ .el-table th.is-leaf,
.el-table td {
  border-bottom: none;
}
.footer /deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background: rgba(255, 255, 255, 1);
}
// 滚动条的宽度
/deep/ ::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ ::-webkit-scrollbar-thumb {
  background-color: #9278ff;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px #dddddd;
}
/deep/ ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
}

.footer /deep/ .el-card__body {
  padding: 0;
}
.footer /deep/ .el-card {
  border: none;
}
.footer /deep/ .el-table th {
  font-size: 14px;
  font-family: Microsoft YaHei;
  color: rgba(255, 255, 255, 1);
  background-color: #9278ff;
}
.footer /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #f5f2ff;
}
.footer /deep/ .el-button--text {
  padding-right: 20px;
  color: #9278ff;
}
.footer /deep/ .el-button--text:focus,
.el-button--text:hover {
  color: #9278ff;
}
.button {
  height: 30px;
  width: 80px;
  margin-top: 7px;
  border: none;
  background-color: #9278ff;
  color: #ffffff;
  border-radius: 20px;
  position: absolute;
  right: 30px;
}
.button:focus {
  outline: 0;
}
.header /deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  line-height: 3;
  padding-left: 10px;
}
.header {
  background-color: #ffffff;
  height: 50px;
  font-size: 12px;
  line-height: 50px;
  font-weight: 600;
}
.header span {
  font-size: 16px;
  font-weight: 600;
  padding-left: 5px;
}
.header p {
  font-size: 14px;
  padding-left: 20px;
  margin: 0;
}

.flex {
  display: flex;
  justify-content: flex-start;
}
.flex-end{
  display: flex;
  justify-content: flex-end;
}

.content {
  position: relative;
  top: 10px;
}
</style>