pbl-teacher-table/src/components/pages/kindStudentEva/test/score.vue

<template>
  <div class="scoreBox" v-loading="Loading">
    <div class="sBox_top">
      <div class="sTop_select">
        <el-select
          v-model="year"
          placeholder="请选择学期"
          class="student_input"
        >
          <!-- <el-option label="所有学期" value=""></el-option> -->
          <el-option
            v-for="(y, yIndex) in yearJuri"
            :key="yIndex"
            :label="y.name"
            :value="y.id"
          ></el-option>
        </el-select>
      </div>
      <!-- <div class="sTop_button">查看评分标准</div> -->
    </div>
    <!-- <table border="1">
      <tr>
        <td>学习领域</td>
        <td>一级发展目标</td>
        <td>学期初始评分</td>
        <td>期中评分</td>
        <td>期末评分</td>
        <td>平均分</td>
        <td>关联证据</td>
      </tr>
      <tr v-for="(item, index) in scoreJson" :key="index">
        <td>
          {{ item.name }}
        </td>
      </tr>
    </table> -->

    <div class="sBox_table">
      <div class="table_title">
        <div>学习领域</div>
        <div>一级发展目标</div>
        <div>学期初始评分</div>
        <div>期中评分</div>
        <div>期末评分</div>
        <div>平均分</div>
        <div>关联证据</div>
      </div>

      <div class="table_detail">
        <div
          class="table_ftype"
          v-for="(item, index) in scoreType"
          :key="index"
        >
          <div
            v-if="scoreJson[item.id].length"
            class="ftype_name"
            :style="{
              minHeight: scoreJson[item.id].length * 50 + 'px',
              lineHeight: scoreJson[item.id].length * 50 + 'px'
            }"
          >
            {{ item.name }}
          </div>
          <div class="table_stype">
            <div
              class="stype_name"
              v-for="(item1, index1) in scoreJson[item.id]"
              :key="index + '-' + index1"
              :label="item1.id"
            >
              {{ item1.sname }}
            </div>
          </div>
          <div class="table_score">
            <div
              class="stype_score"
              v-for="(item2, index2) in scoreJson[item.id]"
              :key="index + '-' + index2"
              :label="item2.id"
            >
              <div
                v-for="(item3, index3) in item2[item2.id]"
                :key="index + '-' + index2 + '-' + index3"
                :label="item3"
              >
                <div class="star_box">
                  <div
                    class="star"
                    v-for="sIndex in 5"
                    :key="'star' + sIndex"
                    :class="{ starA: item3 >= sIndex }"
                    @click="
                      updateStar(item.id, item2.id, index2, index3, sIndex)
                    "
                  ></div>
                </div>
              </div>
              <div>
                {{ getStarSum(item.id, item2.id, index2) }}
              </div>
              <div @click="lookSRecordByType(item.id, item2.id)">
                <span style="color: #3681fc; cursor: pointer">查看</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="saveBox">
          <div style="box-sizing: border-box;padding: 3px 10px;" @click="saveSRJson">保存评分</div>
        </div> -->
      </div>
    </div>
    <el-dialog
      title="已关联证据"
      :visible.sync="dialogVisibleReport"
      :append-to-body="true"
      width="1000px"
      :close-on-click-modal="true"
      :before-close="closePop"
      class="dialog_diy"
    >
      <!-- :dialogVisibleReport.sync="dialogVisibleReport" -->

      <reportDialog
        ref="dialogRef"
        :userid="userid"
        :fid="fid"
        :tid="tid"
        :cid="cid"
        :oid="oid"
        :year="year"
      ></reportDialog>
    </el-dialog>
  </div>
</template>

<script>
import reportDialog from "./reportDialog/index.vue";
export default {
  components: {
    reportDialog
  },
  props: {
    userid: {
      type: String
    },
    oid: {
      type: String
    },
    org: {
      type: String
    },
    cid: {
      type: String
    }
  },
  data() {
    return {
      isLoading: false,
      year: "",
      yearJuri: [],
      scoreType: [],
      scoreJson: {},
      dialogVisibleReport: false,
      fid: "",
      tid: "",
      Loading: false
    };
  },
  computed: {
    getStarSum() {
      return function(id, iid, i) {
        let sum = 0;
        for (var k = 0; k < this.scoreJson[id][i][iid].length; k++) {
          sum += this.scoreJson[id][i][iid][k];
        }

        return (sum / this.scoreJson[id][i][iid].length).toFixed(1);
      };
    }
  },
  watch: {
    year(newVal, oldVal){
      this.saveSRJson2(oldVal)
    }
  },
  methods: {
    closePop() {
      this.dialogVisibleReport = false;
    },
    switchTerm() {
      // this.searchStudentScore();
      console.log('变化了');
    },
    searchStudentScore() {
      this.isLoading = true;
      this.scoreType = [];
      this.scoreJson = {};
      let params = {
        uid: this.userid,
        oid: this.oid,
        org: this.org,
        cu: this.year
      };
      this.ajax
        .get(this.$store.state.api + "selectSETable", params)
        .then(res => {
          var table = res.data[0]; //个人学期评分
          var ftype = res.data[1]; //公共父级分类
          var stype = res.data[2]; //公共子级分类
          var sctype = res.data[3]; //该学校子级分类
          var fctype = res.data[4]; //该学校父级分类
          var fotype = res.data[5]; //组织父级分类
          var sotype = res.data[6]; //组织子级分类
          var allfType = [];
          var allsType = [];
          if (fotype.length == 0 && sotype.length == 0) {
            if (fctype.length == 0 && sctype.length == 0) {
              for (var i = 0; i < ftype.length; i++) {
                allfType.push(ftype[i]);
              }
              for (var i = 0; i < stype.length; i++) {
                allsType.push(stype[[i]]);
              }
            } else {
              for (var i = 0; i < fctype.length; i++) {
                allfType.push(fctype[i]);
              }
              for (var i = 0; i < sctype.length; i++) {
                allsType.push(sctype[[i]]);
              }
            }
          } else {
            for (var i = 0; i < fotype.length; i++) {
              allfType.push(fotype[i]);
            }
            for (var i = 0; i < sotype.length; i++) {
              allsType.push(sctysotypepe[[i]]);
            }
          }

          if (table.length > 0) {
            this.scoreJson = JSON.parse(table[0].json);
          } else {
            var scoreJson = {};
            allfType.forEach(itemA => {
              scoreJson[itemA.id] = [];
              allsType.forEach(itemB => {
                if (itemB.pid === itemA.id) {
                  scoreJson[itemA.id].push({
                    [itemB.id]: [0, 0, 0],
                    sname: itemB.name,
                    id: itemB.id
                  });
                }
              });
            });
            this.scoreJson = scoreJson;
          }
          this.scoreType = allfType;
          this.Loading = false;

          // console.log("this.scoreJson", this.scoreJson);

          // console.log("this.scoreType", this.scoreType);
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getYear() {
      this.isLoading = true;
      this.ajax
        .get(this.$store.state.api + "selectTerm")
        .then(res => {
          this.isLoading = false;
          var yearJuri = res.data[0];
          for (var i = 0; i < yearJuri.length; i++) {
            if (yearJuri[i].defaultC == 1) {
              this.year = yearJuri[i].id;
            }
          }
          this.yearJuri = yearJuri;
          this.searchStudentScore();
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    updateStar(id, iid, i, j, v) {
      this.scoreJson[id][i][iid][j] = v;
      this.$forceUpdate();
    },
    lookSRecordByType(fid, tid) {
      this.fid = fid;
      this.tid = tid;
      this.dialogVisibleReport = true;
      this.$nextTick(() => {
        this.$refs.dialogRef.getData();
      });
    },
    saveSRJson2(val) {
      let params = {
        uid: this.userid,
        j: JSON.stringify(this.scoreJson),
        t: val
      };
      this.ajax
        .get(this.$store.state.api + "addSRScore", params)
        .then(res => {
          // this.$message.success("保存成功!");
          this.searchStudentScore();
        })
        .catch(err => {
          console.error(err);
        });
    },
    saveSRJson() {
      let params = {
        uid: this.userid,
        j: JSON.stringify(this.scoreJson),
        t: this.year
      };
      this.ajax
        .get(this.$store.state.api + "addSRScore", params)
        .then(res => {
          // this.$message.success("保存成功!");
          this.searchStudentScore();
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  beforeDestroy() {
    this.saveSRJson();
  },
  mounted() {
    // this.$nextTick(()=>{
    //   console.log(this.$refs.dialogRef);
    // })
    this.Loading = true;
    this.getYear();
  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid black;
}
td {
  box-sizing: border-box;
  padding: 15px 25px;
}
.dialog_diy {
  box-sizing: border-box;
  /* padding: 0 10px 10px 10px; */
}
.dialog_diy >>> .el-dialog {
  /* height: 100%; */
  margin: 10vh auto !important;
}

.dialog_diy >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__body {
  height: calc(100% - 124px);
  box-sizing: border-box;
  /* padding: 0px; */
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.scoreBox {
  background: #fff;
  border-radius: 10px;
  width: 98%;
  box-sizing: border-box;
  padding: 0 15px;
  margin: 15px auto;
  overflow: auto;
  height: calc(100% - 30px);
}
.sBox_top {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}
.sTop_select >>> .el-input__inner {
  height: 35px;
  width: 150px;
}
.sTop_select >>> .el-input__suffix {
  top: 3px !important;
}
.sTop_button {
  background: #3681fc;
  color: #fff;
  border-radius: 5px;
  width: 120px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
  margin-left: 30px;
}
.sBox_table {
  width: 100%;
  min-width: calc(150px * 7);
  margin: 0 auto;
  /* min-width: 1520px; */
  font-size: 14px;
}
.table_title {
  width: 100%;
  min-width: calc(150px * 7);
  height: 50px;
  background: #e0eafb;
  border: 1px solid #d5d8df;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.table_title > div {
  width: calc(100% / 7);
  min-width: 150px;
  text-align: center;
  height: 100%;
  line-height: 50px;
  border-right: 1px solid #d5d8df;
}

.table_title > div:last-child {
  border: none;
}

.table_detail {
  width: 100%;
  min-width: calc(100% / 7);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.table_detail > .table_ftype {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-width: calc(100% / 7);
  height: 100%;
}

.table_ftype > .ftype_name {
  width: calc(100% / 7);
  min-width: 150px;
  /* width: calc(100% / 7);
  min-width: calc(100% / 7); */
  height: 100%;
  min-height: 80px;
  line-height: 80px;
  text-align: center;
  border-left: 1px solid #d5d8df;
  border-bottom: 1px solid #d5d8df;
  border-right: none;
}

.table_detail > .table_ftype:first-child {
  border-top: none;
}

.table_stype {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(100% / 7);
  min-width: 150px;
  text-align: center;
  height: 100%;
  min-height: 80px;
  border-left: 1px solid #d5d8df;
  border-bottom: 1px solid #d5d8df;
}

.table_stype > .stype_name {
  width: 100%;
  min-width: 150px;
  height: calc(100% / 2);
  min-height: 50px;
  line-height: 50px;
  border-right: 1px solid #d5d8df;
  border-bottom: 1px solid #d5d8df;
}

.table_stype > .stype_name:last-child {
  border-bottom: none;
}

.table_score {
  width: calc(100% / 7 * 5);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.stype_score {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(100% + 4px);
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.stype_score > div {
  width: calc(100% / 3);
  min-width: 150px;
  height: 100%;
  border-bottom: 1px solid #d5d8df;
  border-right: 1px solid #d5d8df;
}

.stype_score > div >>> .el-rate {
  height: 100%;
  line-height: 60px;
}
.star_box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  max-width: 100%;
  min-width: 150px;
  height: 100%;
  text-align: center;
  justify-content: center;
}
.star_box > .star {
  width: 19px;
  height: 19px;
  display: block;
  background-image: url("../../../../assets/icon/studentEva/star-no.png");
  background-size: 100% 100%;
  cursor: pointer;
}

.star_box > .star + .star {
  margin-left: 5px;
}

.star_box > .starA {
  background-image: url("../../../../assets/icon/studentEva/star.png");
}
.saveBox {
  width: 100%;
  cursor: pointer;
  padding: 10px 0;
  box-sizing: border-box;
}

.saveBox > div {
  /* width: 70px; */
  /* height: 30px; */
  color: #fff;
  background: #3681fc;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  float: right;
}
</style>