pbl-teacher-table/src/components/pages/testPerson/examine/index.vue

<template>
  <div class="testPersonExamine">
    <div class="testTit">
      <div class="teaLis">
        <div
          class="teal"
          @click="cutPage(2)"
          v-if="bArray.length"
          :class="[pType == 2 ? 'Tbor' : '']"
        >
          专任教师
        </div>
        <div
          class="teal"
          @click="cutPage(1)"
          v-if="aArray.length"
          :class="[pType == 1 ? 'Tbor' : '']"
        >
          班主任考核
        </div>
      </div>
      <div style="margin-right: 30px;display: flex;">
        <!-- <el-button
          type="primary"
          size="mini"
          style="margin-right: 15px;"
          @click="saveTab"
          v-if="allData.type == 1"
          >保存</el-button
        > -->

        <div style="margin: 0 20px;" v-if="timeListA.length>0 && pType == 1">
          <el-select v-model="timeA" placeholder="请选择">
            <el-option
              v-for="item in timeListA"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div style="margin: 0 20px;" v-if="timeListB.length>0 && pType == 2">
          <el-select v-model="timeB" placeholder="请选择">
            <el-option
              v-for="item in timeListB"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <el-button
          v-if="allData.type != 2"
          type="primary"
          size="mini"
          @click="Submit"
          >提交</el-button
        >
      </div>
    </div>
    <div style="flex: 1;overflow: hidden;" class="notes">
      注：评价积分周期为2023年6月30日至2024年6月30日
    </div>
    <div style="height:100%;overflow: auto;" v-loading="tabLoad">
      <div class="sBox_table">
        <div class="table_title">
          <div style="width: 110px;">一级指标</div>
          <div style="width: 140px;min-width: 140px;">二级指标</div>
          <div style="width: 700px;min-width: 700px;">评价方法</div>
          <div style="width: 100px;">分值</div>
          <div style="width: 100px;">自评</div>
          <div style="flex: 1;min-width: 150px;">自评概述</div>
          <div style="flex: 0.5;min-width: 100px;">数据来源</div>
          <!-- <div style="width: 100px;">认定</div>
          <div style="flex: 1;">认定概述</div> -->
        </div>
        <div style="height: 100%;">
          <div
            class="table_Content"
            v-for="item in PageBaseData"
            :key="item.id"
          >
            <div class="twoCol">
              <div class="ColTit">{{ item.name }}</div>
              <div class="ColCon">
                <div class="twoCon" v-for="k in item.children" :key="k.id">
                  <div>{{ k.name }}</div>
                  <div style="padding: 10px;box-sizing: border-box;">
                    {{ k.evaMethod }}
                  </div>
                  <div>{{ k.score }}</div>
                  <div>
                    <div v-if="k.type == 1" class="ScoreStep">
                      <el-input
                        class="num_input"
                        v-if="allData.type * 1 != 2"
                        @blur="
                          saveTab(
                            parseFloat(k.sco1) > k.score
                              ? (k.sco1 = k.score)
                              : '' || k.sco1 < 0
                              ? (k.sco1 = '')
                              : ''
                          )
                        "
                        v-model="k.sco1"
                        v-stopMousewheel
                        type="number"
                      ></el-input>
                      <div v-else>{{ k.sco1 }}</div>
                    </div>
                    <div v-else class="ScoreStep">/</div>
                  </div>
                  <div class="tArea">
                    <div
                      v-if="k.type == 1"
                      style="height: 100%;height: 100%;width: 100%;text-align: left;"
                    >
                      <!-- <textarea
                      v-if="allData.type * 1 != 2"
                      @blur="saveTab"
                      :placeholder="
                        k.cueWordType == 1 ? '【自评后请简述测算过程】' : ''
                      "
                      v-model.trim="k.selfSummary"
                    /> -->
                      <el-input
                        v-if="allData.type * 1 != 2"
                        type="textarea"
                        @blur="saveTab"
                        :placeholder="
                          k.cueWordType == 1 ? '【自评后请简述测算过程】' : ''
                        "
                        v-model="k.selfSummary"
                      >
                      </el-input>
                      <div
                        v-else
                        style="width: 100%;padding: 5px;height: 100%;box-sizing: border-box;"
                      >
                        {{ k.selfSummary }}
                      </div>
                    </div>
                    <div v-else class="ScoreStep">/</div>
                  </div>
                  <div>
                    <div v-if="!k.testid.test.length">/</div>
                    <div v-else style="padding-top: 10px;">
                      <!-- {{ k.testid.test }} -->
                      <div
                        v-for="(item2, index) in k.testid.test"
                        :key="item2.courseId"
                        class="orgData"
                      >
                        <div @click="lookPrize(item2.courseId)">
                          {{ item2.title }}:{{ item2.num }}份
                        </div>
                        <div
                          style="color: black;"
                          @click="goFillIn(item2.courseId)"
                        >
                          去填写
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div style="display: flex;justify-content: center;">
                    {{ k.sco2 }}
                  </div>
                  <div style="display: flex;justify-content: center;">
                    {{ k.cogSum }}
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 点击数据来源 -->
    <el-dialog
      title=""
      :visible.sync="diaIframe"
      :append-to-body="true"
      width="95%"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="height: 100%;">
        <iframe
          ref="viframe"
          style="width: 100%; height: 99%; border: none"
          :src="ifmUrl"
        ></iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaIframe = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  directives: {
    stopMousewheel: {
      inserted: function(el) {
        const ele = el.tagName === "INPUT" ? el : el.querySelector("input");
        ele.addEventListener("mousewheel", () => {
          ele.blur();
        });
      }
    }
  },
  data() {
    return {
      pType: 2,
      allData: {
        type: 1,
        rjson: ""
      },
      // 页面填写数据
      tableJsonCon: [],
      // 页面基础ui
      PageBaseData: [],
      tabLoad: false, //表格加载状态
      userid: this.$route.query.userid, //用户id
      oid: this.$route.query.oid, //学校id
      org: this.$route.query.org, //组织id
      role: this.$route.query.role,
      ifmUrl: "", //数据来源地址
      diaIframe: false, //数据来源弹框
      aArray: [],
      bArray: [],
      timeListB:[],
      timeListA:[],
      timeA:"",
      timeB:"",
      testExamineBaseList:[],
    };
  },
  watch: {
    pType(newVal, oldVal) {
      this.getPageBase();
    },
    timeA(){
      this.getPageBase();
    },
    timeB(){
      this.getPageBase();
    }
  },
  computed: {},
  activated() {
    // 当组件被激活时调用
    this.getPageBase();
    this.getPageBase2(1)
    this.getPageBase2(2)
  },
  mounted() {
    this.getPageBase();
    this.getPageBase2(1)
    this.getPageBase2(2)
    // console.log(JSON.stringify(this.TeaTabJson));
  },
  methods: {
    // 禁用滚轮事件
    handleWheel(event) {
      event.preventDefault();
    },
    goFillIn(val) {
      this.$router.push(
        `/doTest?cid=${val}&org=${this.org}&type=3&role=${this.role}&isN=&oid=${this.oid}&userid=${this.userid}`
      );
      // this.ifmUrl = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/checkToTest?cid=${val}&oid=${this.oid}&org=${this.org}&type=2&role=0&peopleId=${this.userid}`;
      // this.ifmUrl = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/test?userid=${this.userid}&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=&role=0`;
      // this.diaIframe = true;
    },
    // 提交
    Submit() {
      // if (this.allData.type == 2) {
      //   this.$message({
      //     type: "info",
      //     message: "您已提交过，请勿重复提交"
      //   });
      //   return;
      // }
      let judgeNum = 0;

      // i.type == 1 这个用来判断 科组评价的因为最后两个教师不能打分所以type设为2，下面的循环将他们两个排除出去
      this.PageBaseData.forEach(e => {
        e.children.forEach(i => {
          if (i.type == 1) {
            if (!i.sco1) {
              judgeNum = 1;
            }
            if (i.sco1 * 1 < 0) {
              judgeNum = 2;
            }
          }
        });
      });

      if (judgeNum == 1) {
        this.$message({
          message: "请将【自评】分数列填写完整后再提交。",
          type: "warning"
        });
        return;
      }
      if (judgeNum == 2) {
        this.$message({
          message: "自评分数不可低于0，请检查后重新输入。",
          type: "warning"
        });
        return;
      }

      for (const e of this.PageBaseData) {
        for (const k of e.children) {
          if (k.testid.test.length > 0) {
            k.testid.test = k.testid.test.map(item => item.courseId);
          }
        }
      }

      this.$confirm("提交后无法修改，是否确定提交？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      })
        .then(() => {
          let params = [
            {
              uid: this.userid,
              oid: this.oid,
              org: this.org,
              type: this.pType,
              json: JSON.stringify(this.PageBaseData),
              ttype: 2,
              tid:this.testExamineBaseList[0].id
            }
          ];
          this.ajax
            .post(this.$store.state.api + "addTestExamineWorks2", params)
            .then(res => {
              this.getData();
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.handleData();

          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },
    // 保存
    saveTab() {
      this.$forceUpdate();
      let PageBaseDataCopy = JSON.parse(JSON.stringify(this.PageBaseData));

      for (const e of PageBaseDataCopy) {
        for (const k of e.children) {
          if (k.testid.test.length > 0) {
            k.testid.test = k.testid.test.map(item => item.courseId);
          }
        }
      }

      let params = [
        {
          uid: this.userid,
          oid: this.oid,
          org: this.org,
          type: this.pType,
          json: JSON.stringify(PageBaseDataCopy),
          ttype: 1,
          tid:this.testExamineBaseList[0].id
        }
      ];
      // return console.log(params);
      this.ajax
        .post(this.$store.state.api + "addTestExamineWorks2", params)
        .then(res => {
          console.log("addTestExamineWorks2", res);
          // this.getData();
          // this.handleData();
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 切换专任，班主任
    cutPage(e) {
      this.pType = e;
    },
    // 获取页面数据
    getData() {
      this.tabLoad = true;
      let params = {
        uid: this.userid,
        type: this.pType,
        tid:this.testExamineBaseList[0].id
      };
      this.ajax
        .get(this.$store.state.api + "getTestExamineByUserId2", params)
        .then(res => {
          console.log("getTestExamineByUserId", res);

          if (res.data[0].length > 0) {
            this.allData = res.data[0][0];
            let val = JSON.parse(res.data[0][0].json);

            this.PageBaseData.forEach(e => {
              val.forEach(i => {
                if (e.id == i.id) {
                  e.children.forEach(a => {
                    i.children.forEach(b => {
                      if (a.id == b.id) {
                        a.sco1 = b.sco1;
                        a.sco2 = b.sco2;
                        a.cogSum = b.cogSum;
                        a.selfSummary = b.selfSummary;
                      }
                    });
                  });
                }
              });
            });

            this.handleData();
            return (this.tabLoad = false);
          } else {
            this.allData.type = 1;
            this.allData.rjson = "";
            this.handleData();
            this.tabLoad = false;
          }
          // this.$forceUpdate();
          //  else {
          //   this.allData.type = 1;
          //   this.getPageBase();
          //   this.tabLoad = false;
          // }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取页面基础ui信息
    getPageBase() {
      let params = {
        typ: this.pType,
        org: this.org,
        oid: this.oid,
        time:this.pType==1?this.timeA:this.timeB
      };
      this.ajax
        .get(this.$store.state.api + "selectTestExamineBase2", params)
        .then(res => {
          // console.log("resresresres", res.data[0]);
          // this.allData = res.data[0][0];
          let testExamineBaseList = res.data[0];
          this.testExamineBaseList = testExamineBaseList;
          console.log("selectTestExamineBase", res.data[0][0]);
          this.PageBaseData = JSON.parse(res.data[0][0].json);
          // 先获取基础模板，然后再获取用户又没有填写过，填写过就开始循环赋值给基础模板，最后提交基础模板
          this.getData();

          // this.handleData();
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取页面基础ui信息
    getPageBase2(type) {
      let params = {
        typ: type,
        org: this.org,
        oid: this.oid,
        time:type==1?this.timeA:this.timeB
      };
      this.ajax
        .get(this.$store.state.api + "selectTestExamineBase2", params)
        .then(res => {
          if(type == 1){
            this.aArray = res.data[0];
            this.timeListA = this.aArray.map(i=>{return {value:i.time,label:i.timeLabel}})
            if(this.timeListA.length>0)this.timeA = this.timeListA[0].value;
          }else {
            this.bArray = res.data[0];
            this.timeListB = this.bArray.map(i=>{return {value:i.time,label:i.timeLabel}})
            if(this.timeListB.length>0)this.timeB = this.timeListB[0].value;
            if(!this.bArray.length){
              this.pType = 1
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    async handleData() {
      for (const e of this.PageBaseData) {
        for (const k of e.children) {
          if (k.testid.test.length > 0) {
            k.testid.test = await this.computedTest(k.testid.test);
          }
        }
      }
    },
    computedTest(val) {
      let params = [
        {
          uid: this.userid,
          testId: val.join(",")
        }
      ];
      return new Promise(resolve => {
        this.ajax
          .post(this.$store.state.api + "selectExamineTestName", params)
          .then(res => {
            resolve(res.data[0]);
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    // 查看数据来源
    lookPrize(val) {
      // return;
      this.ifmUrl = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/checkToTest?cid=${val}&oid=${this.oid}&org=${this.org}&type=2&role=0&peopleId=${this.userid}&tType=${this.pType}&examineId=${this.testExamineBaseList[0].id}`;
      // this.ifmUrl = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/test?userid=${this.userid}&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=&role=0`;
      this.diaIframe = true;
    },
    // 关闭弹框
    handleClose(done) {
      this.getPageBase();
      done();
    }
  }
};
</script>

<style scoped>
.testPersonExamine {
  width: 100%;
  min-width: calc(100px * 10);
  height: calc(100% - 20px);
  /* overflow-x: scroll; */
  /* overflow: auto; */
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
	margin: 10px 0;
	border-radius: 5px;
}
.tArea {
  /* box-sizing: border-box; */
  /* padding: 5px; */
}
.tArea > div > textarea {
  border: none;
  width: 100%;
  height: 100%;
  resize: none;
  box-sizing: border-box;
  padding: 5px;
  outline-style: none;
}
.tArea > div >>> .el-textarea {
  height: 100%;
}
.tArea > div >>> .el-textarea__inner {
  border: none !important;
  height: 100%;
  resize: none;
}

.testPersonExamine > .testTit {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notes {
  color: #fb5a3f;
  font-weight: 600;
  font-size: 20px;
}
.ScoreStep {
  height: 100%;
  display: flex;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.ScoreStep > input {
  height: 100% !important;
  outline-style: none;
  width: 100%;
  padding: 5px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 4px;
  border: none !important;

  /* border: 1px solid #dcdfe6 !important; */
}
.teaLis {
  display: flex;
}
.teal {
  padding: 10px 20px;
  cursor: pointer;
}
.Tbor {
  border-bottom: 2px rgba(54, 129, 252, 1) solid;
  font-weight: 600;
}
.testCon {
  box-sizing: border-box;
  padding: 20px;
}

.orgData {
  cursor: pointer;
  color: #528df6;
  margin-bottom: 10px;
}

.diaScoreTop {
  display: flex;
  justify-content: space-between;
  height: 60px;
}

.diaScoreLeft {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diaScoreLeft > div {
  margin-right: 30px;
}

.diaScoreRight {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.TabBtn {
  cursor: pointer;
  color: #528df6;
}

.sBox_table {
  width: 100%;
  min-width: 1300px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 60px;
  font-size: 14px;
}

.table_title {
  width: calc(100% - 6px);
  min-width: calc(110px * 9);
  height: 50px;
  background: #e0eafb;
  border: 1px solid #d5d8df;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

/* 容器不显示滚动条，但仍然可以滚动 */
.container {
  overflow: auto;
  scrollbar-width: none; /* 对于Firefox */
}

/* 针对WebKit浏览器，比如Chrome和Safari，使滚动条不占据空间 */
.container::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 针对IE和Edge，使滚动条不占据空间 */
.container {
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}
.table_title > div {
  /* width: calc(100% / 9); */
  min-width: 110px;
  box-sizing: border-box;
  text-align: center;
  height: 100%;
  line-height: 50px;
  border-right: 1px solid #d5d8df;
  border-left: 1px solid #d5d8df;
  background: #e0eafb;
}

/* .table_title2 {
  width: 100%;
  min-width: calc(110px * 8);
  height: 50px;
  background: #e0eafb;
  border: 1px solid #d5d8df;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.table_title2 > div {
  width: calc(100% / 8);
  min-width: 110px;
  text-align: center;
  height: 100%;
  line-height: 50px;
  border-right: 1px solid #d5d8df;
} */

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

.table_Content {
  width: 100%;
  min-width: calc(110px * 9);
  /* border: 1px solid #d5d8df; */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  align-items: center;
}
/* .table_Content2 {
  width: 100%;
  min-width: calc(110px * 8);
  border: 1px solid #d5d8df;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  align-items: center;
} */

.twoCol {
  width: 100%;
  display: flex;
}

.ColTit {
  width: 110px !important;
  min-width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px #ccc solid;
  border-left: 1px solid #d5d8df;
}

/* 取消[type='number']的input的上下箭头 */
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}
.twoCon {
  display: flex;
  width: 100%;
}
.twoCon > div {
  /* width: 10%; */
  min-width: 110px;
  min-height: 50px;
  /* line-height: 50px; */
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  border-left: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}

.twoCon > div:nth-child(1) {
  width: 140px !important;
}
.twoCon > div:nth-child(2) {
  width: 700px !important;
  white-space: pre-line;
  word-break: break-all;
  text-align: left;
  justify-content:flex-start;
  /* background-color:red; */
}
.twoCon > div:nth-child(3) {
  width: 100px !important;
}
.twoCon > div:nth-child(4) {
  width: 100px !important;
}
.twoCon > div:nth-child(5) {
  flex: 1;
  min-width: 150px;
}
.twoCon > div:nth-child(6) {
  flex: 0.5;
  min-width: 100px;
}
.twoCon > div:nth-child(7) {
  width: 100px !important;
}
.twoCon > div:nth-child(8) {
  flex: 1;
}

/* .twoCon > div >>> .el-input-number {
  height: 100% !important;
} */
/* .twoCon > div >>> .el-input {
  height: 100% !important;
} */
.ScoreStep >>> .el-input-number {
  height: 100% !important;
}
.ScoreStep >>> .el-input {
  height: 100% !important;
}
.ScoreStep >>> .el-input__inner {
  height: 100%;
  padding-left: 15px;
  border: none;
  padding-right: 15px;
}
.twoCon > div > input {
  border: none;
  width: 100%;
  height: 100%;
  outline-style: none;
  text-align: center;
}
/* .twoCon > div >>> .el-input__inner {
  height: 100%;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
} */
.ColCon {
  flex: 1;
}
.ColCon:nth-child(-1) > div {
  border-bottom: none;
}
.twoCon > div > textarea {
  border: none;
  width: 100%;
  height: 100%;
  resize: none;
  outline-style: none;
}
.dialog_diy >>> .el-dialog {
  height: 95%;
  margin: 0 auto !important;
  margin-top: 20px !important;
  overflow: hidden;
}

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

.dialog_diy >>> .el-dialog__body {
  height: calc(100% - 50px);
  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;
}

.num_input>>>input{
  padding-right: 0px;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  line-height: 1px !important;
}

.num_input>>>input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>