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="footer_h">
        <div class="black"
             style="float: left"></div>
        <p style="float: left">判分点列表</p>
      </div>
      <div class="flex footer_h">
        <div style="width: 300px;float: left">
          <el-input placeholder="请输入判分点名称"
                    style="height: 33px;width:100%"
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    clearable></el-input>
        </div>
        <div style="float: right">
          <el-button class="button"
                     style="height: 33px;line-height: 0px"
                     @click="HomepageJump()">新增</el-button>
          <el-button class="button"
                     style="height: 33px;line-height: 0px"
                     @click="deletes()">批量删除</el-button>
        </div>
      </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"
                        @selection-change="handleSelectionChange">
                <el-table-column type="selection"
                                 width="55">
                </el-table-column>
                <el-table-column type="index"
                                 label="序号"
                                 align="center">
                  <template slot-scope="scope">{{ scope.$index + (pageNum - 1) * pageSize + 1 }}</template>
                </el-table-column>
                <el-table-column prop="name"
                                 label="判分点名称"
                                 align="center"></el-table-column>
                <el-table-column label="实验要求"
                                 align="center">
                  <template slot-scope="scope">
                    <div class="ql-snow">
                      <div class="ql-editor"
                           v-html="scope.row.experimentalRequirements"></div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="operate"
                                 label="操作"
                                 align="center">
                  <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)"
                               type="text"
                               size="small">编辑</el-button>
                    <el-button @click="handleDelete(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(scope.row)"></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="pageNum"
                         :page-size="10"
                         layout="total,prev, pager, next, jumper"
                         :total="dataTotal"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import quill from '@/components/quill'

export default {
  data () {
    return {
      keyword: '',
      searchTimer: null,
      tableData: [],
      dataTotal: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      systemId: this.$route.query.systemId,
      systemName: this.$route.query.systemName,
      isProcess: false, // 是否是流程类
      multipleSelection: [],
    };
  },
  components: { quill },
  watch: {
    keyword: function (val) {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.pageNum = 1;
        this.initData()
      }, 500)
    },
  },
  mounted () {
    console.log('当前地址=', location.host);
    console.log("token=", this.$route.query.token)
    console.log("systemId=", this.$route.query.systemId)
    this.isProcess = this.systemId == 11 || this.systemId == 12 || this.systemId == 19
    // sessionStorage.setItem('token',this.$route.query.token)
    this.$route.query.token && this.$store.commit('setParam', {
      token: atob(decodeURI(this.$route.query.token)),
      referrer: atob(decodeURI(this.$route.query.referrer))
    })

    this.initData();
  },
  methods: {
    BackMain () { // 返回
      history.back()
    },
    handleCurrentChange (val) { // 切换页码
      this.pageNum = val;
      this.initData();
    },
    initData () { // 获取初始数据
      let params = {
        name: this.keyword,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        systemId: this.systemId
      };
      if (this.isProcess) {
        // (流程)交易类
        this.getProcessClassData(params);
      } else {
        // 编程类
        if (location.host == 'http://124.71.12.62' || location.host == 'http://occupationlab.com') {
          this.getCHProgrammingClassData(params);
        } else {
          this.getProgrammingClassData(params);
        }
      }
    },
    getProcessClassData (params) { // 获取流程类判分点列表数据
      this.$post(`${this.api.queryAllJudgmentPoint}`, params).then(res => {
        if (res.status === 200) {
          this.tableData = res.message.records;
          this.dataTotal = res.message.total;
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    //
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val;
    },
    //批量删除
    deletes () {
      let bcIdList = [];
      let nameList = [];
      let lcIdList = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        bcIdList.push(this.multipleSelection[i].bcId)
        lcIdList.push(this.multipleSelection[i].lcId)
        nameList.push(this.multipleSelection[i].name)
      }
      if (nameList.length > 0) {
        this.$confirm(`此操作将永久删除【${nameList}】判分点, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }).then(() => {
          if (this.isProcess) {
            // 交易类
            this.$post(`${this.api.deleteJudgmentPoint}?ids=${lcIdList}`).then(res => {
              if (res.status === 200) {
                this.$message.success("删除成功");
                this.initData();
              } else {
                this.$message.error(res.message);
              }
            }).catch(err => {
              console.log(err);
            });
          } else {
            // 编程类
            this.$post(`${this.api.bcDeleteJudgmentPoint}?ids=${bcIdList}`).then(res => {
              if (res.status === 200) {
                this.$message.success("删除成功");
                this.initData();
              } else {
                this.$message.error(res.message);
              }
            }).catch(err => {
              console.log(err);
            });
          }
          if (this.nameList.length === this.tableData.length && this.pageNum > 1) {
            this.handleCurrentChange(this.pageNum - 1)
          }
        }).catch(() => {
          this.$message.info("已取消删除");
        });
      } else {
        this.$alert('请选择需要删除的判分点', '提示', {
          confirmButtonText: '好的',
          callback: action => {

          }
        });
      }
    },
    getProgrammingClassData (params) { // 获取编程类判分点列表数据
      this.$post(this.api.getBcJudgmentPoint, params).then(res => {
        this.tableData = res.message.records;
        this.dataTotal = res.message.total;
      }).catch(err => {
      });
    },
    getCHProgrammingClassData () {
      let systemId = this.$route.query.systemId
      let userId = this.$route.query.userId
      let pageNum = this.$route.query.pageNum
      let pageSize = this.$route.query.pageSize
      let queryName = this.$route.query.queryName
      let userIdList = this.$route.query.userIdList
      this.$post(`${this.api.QueryPointOfJudgement}?systemId=${systemId}&userId=${userId}&pageNum=${pageNum}&pageSize=${pageSize}&queryName=${queryName}&userIdList=${userIdList}`).then(res => {
        this.tableData = res.message.records;
        this.dataTotal = res.message.total;
      }).catch(err => {
        console.log(err);
      });
    },
    HomepageJump () { //新增
      if (this.isProcess) {
        // 交易类
        this.$router.push(`Transaction?isAdd=true&systemId=${this.systemId}`);
      } else {
        // 编程类
        this.$router.push(`program?isAdd=true&systemId=${this.systemId}`);
      }
    },
    handleEdit (row) { // 编辑
      if (this.isProcess) {
        // 交易类
        this.$router.push(`Transaction?isEdit=true&systemId=${this.systemId}&lcId=${row.lcId}`);
      } else {
        // 编程类
        this.$router.push(`program?isEdit=true&systemId=${this.systemId}&bcId=${row.bcId}`)
      }
    },
    handleDelete (row) { // 删除
      this.$confirm(`此操作将永久删除【${row.name}】判分点, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        if (this.isProcess) {
          // 交易类
          this.$post(`${this.api.deleteJudgmentPoint}?ids=${row.lcId}`).then(res => {
            if (res.status === 200) {
              this.$message.success("删除成功");
              this.initData();
            } else {
              this.$message.error(res.message);
            }
          }).catch(err => {
            console.log(err);
          });
        } else {
          // 编程类
          this.$post(`${this.api.bcDeleteJudgmentPoint}?ids=${row.bcId}`).then(res => {
            if (res.status === 200) {
              this.$message.success("删除成功");
              this.initData();
            } else {
              this.$message.error(res.message);
            }
          }).catch(err => {
            console.log(err);
          });
        }
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },
    changeSwitch (row) { // 更新是否启用
      if (this.isProcess) {
        // 交易类
        this.$get(`${this.api.updateIsOpen}?isOpen=${row.isOpen}&lcId=${row.lcId}`).then(res => {
          if (res.status === 200) {
            this.$message.success("更新启用状态成功");
            this.initData();
          } else {
            this.$message.error(res.message);
          }
        }).catch(err => {
          console.log(err);
        });
      } else {
        // 编程类
        this.$get(`${this.api.bcUpdateIsOpen}?isOpen=${row.isOpen}&bcId=${row.bcId}`).then(res => {
          if (res.status === 200) {
            this.$message.success("更新启用状态成功");
            this.initData();
          } else {
            this.$message.error(res.message);
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },

    // 表头样式设置
    headClass () {
      return "text-align: center;";
    },

    // 表格样式设置
    rowClass () {
      return "text-align: center;";
    },
  }
};
</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: 33px;
  //height: 33px;
}

.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 {
  margin: 7px;
  border: none;
  background-color: #9278ff;
  color: #ffffff;
  border-radius: 20px;
  float: right;
}
.button:focus {
  outline: 0;
}

.header /deep/ [class*=' el-icon-'],
[class^='el-icon-'] {
  line-height: 3;
  padding-left: 10px;
}

.header {
  display: flex;
  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>