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)"
          :class="[pType == 2 ? 'Tbor' : '']"
        >
          专任教师
        </div>
        <div
          class="teal"
          @click="cutPage(1)"
          :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
        >
        <el-button
          v-if="!allData.rjson"
          type="primary"
          size="mini"
          @click="Submit"
          >提交</el-button
        >
      </div>
    </div>

    <div v-if="pType == 2" v-loading="tabLoad">
      <div class="sBox_table">
        <div class="table_title">
          <div>一级指标</div>
          <div>二级指标</div>
          <div>评价方法</div>
          <div>分值</div>
          <div>自评</div>
          <div>自评概述</div>
          <div>数据来源</div>
          <div>认定</div>
          <div>认定概述</div>
        </div>
        <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>
                  <el-input-number
                    v-model="k.sco1"
                    :controls="false"
                    :min="0"
                    :max="k.score"
                  ></el-input-number>
                </div>
                <div class="tArea">
                  <textarea v-model.trim="k.selfSummary" />
                </div>
                <div>
                  <div v-if="!k.testid.test.length">/</div>
                  <div v-else style="padding-top: 10px;">
                    <!-- {{ reverseString(k.testid.test) }} -->
                    <div
                      v-for="(item2, index) in k.testid.test"
                      :key="item2.courseId"
                      @click="lookPrize(item2.courseId)"
                      class="orgData"
                    >
                      {{ item2.title }}:{{ item2.num }}份
                    </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 v-if="pType == 1" v-loading="tabLoad">
      <div class="sBox_table">
        <div class="table_title2">
          <div>一级指标</div>
          <div>二级指标</div>
          <div>评价方法</div>
          <div>分值</div>
          <div>自评</div>
          <div>自评概述</div>
          <div>数据来源</div>
          <div>认定</div>
          <div>认定概述</div>
        </div>
        <div class="table_Content2" 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>{{ k.evaMethod }}</div>
                <div>{{ k.score }}</div>
                <div>
                  <el-input-number
                    v-model="k.sco1"
                    :controls="false"
                    :min="0"
                    :max="k.score"
                  ></el-input-number>
                </div>
                <div class="tArea">
                  <textarea v-model.trim="k.selfSummary" />
                </div>
                <div>
                  <div v-if="!k.testid.test.length">/</div>
                  <div v-else style="padding-top: 10px;">
                    <div
                      v-for="(item2, index) in k.testid.test"
                      :key="item2.courseId"
                      @click="lookPrize(item2.courseId)"
                      class="orgData"
                    >
                      {{ item2.title }}:{{ item2.num }}份
                    </div>
                  </div>
                </div>
                <div>{{ k.sco2 }}</div>
                <div>{{ k.cogSum }}</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 {
  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
      ifmUrl: "", //数据来源地址
      diaIframe: false //数据来源弹框
    };
  },
  watch: {
    pType(newVal, oldVal) {
      this.getPageBase();
    }
  },
  computed: {},
  mounted() {
    this.getPageBase();
    // console.log(JSON.stringify(this.TeaTabJson));
  },
  methods: {
    // 提交
    Submit() {
      if (this.allData.type == 2) {
        this.$message({
          type: "info",
          message: "您已提交过，请勿重复提交"
        });
        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
            }
          ];
          this.ajax
            .post(this.$store.state.api + "addTestExamineWorks", params)
            .then(res => {
              this.getData();
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.handleData();

          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },
    // 保存
    saveTab() {
      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: 1
            }
          ];
          this.ajax
            .post(this.$store.state.api + "addTestExamineWorks", params)
            .then(res => {
              console.log('addTestExamineWorks',res);
              this.getData();
              // console.log();
              // console.log("resresresres", res.data[0]);
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.handleData();

          this.$message({
            type: "info",
            message: "已取消保存"
          });
        });
    },
    // 切换专任，班主任
    cutPage(e) {
      this.pType = e;
    },
    // 获取页面ui
    getData() {
      this.tabLoad = true;
      let params = {
        uid: this.userid,
        type: this.pType
      };
      this.ajax
        .get(this.$store.state.api + "getTestExamineByUserId", 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.name=i.name
                  e.children.forEach(a=>{
                    i.children.forEach(b=>{
                      if (a.id==b.id) {
                        a.name=b.name
                        a.score=b.score
                        a.sco1=b.sco1
                        a.sco2=b.sco2
                        a.evaStandard=b.evaStandard
                        a.evaMethod=b.evaMethod
                        a.cogSum=b.cogSum
                        a.selfSummary=b.selfSummary
                        a.dep=b.dep
                        a.type=b.type
                        a.testid=b.testid
                      }
                    })
                  })
                }
              })
            });

            this.handleData();
            return (this.tabLoad = false);
          } else {
            this.handleData();
            this.tabLoad = false
          }
          //  else {
          //   this.allData.type = 1;
          //   this.allData.rjson = "";
          //   this.getPageBase();
          //   this.tabLoad = false;
          // }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取页面基础ui信息
    getPageBase() {
      let params = {
        typ: this.pType,
        org: this.org,
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectTestExamineBase", params)
        .then(res => {
          // console.log("resresresres", res.data[0]);
          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);
        });
    },
    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.uid,
          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}`;
      // 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) {
      done();
    }
  }
};
</script>

<style scoped>
.testPersonExamine {
  width: 100%;
  min-width: calc(100px * 10);
  min-height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}
.tArea {
  box-sizing: border-box;
  padding: 5px;
}
.testPersonExamine > .testTit {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.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: calc(110px * 9);
  margin: 0 auto;
  /* min-width: 1520px; */
  font-size: 14px;
}

.table_title {
  width: 100%;
  min-width: calc(110px * 9);
  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% / 9);
  min-width: 110px;
  text-align: center;
  height: 100%;
  line-height: 50px;
  border-right: 1px solid #d5d8df;
}

.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: calc(100% / 9);
  min-width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ColTit2 {
  width: calc(100% / 8);
  min-width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.twoCon {
  display: flex;
}
.twoCon > div >>> .el-input-number {
  height: 100% !important;
}
.twoCon > div >>> .el-input {
  height: 100% !important;
}
.twoCon > div > input {
  border: none;
  width: 100%;
  height: 100%;
  outline-style: none;
  text-align: center;
}
.twoCon {
  display: flex;
}
.twoCon > div > textarea {
  border: none;
  width: 100%;
  height: 100%;
  resize: none;
  outline-style: none;
}
/* 取消[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 > div {
  width: calc(100% / 8);
  /* min-width: 110px; */
  min-height: 50px;
  /* line-height: 50px; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}
.twoCon > div >>> .el-input__inner {
  height: 100%;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
}
.twoCon2 {
  display: flex;
}
.twoCon2 > div {
  width: calc(100% / 7);
  min-width: 110px;
  min-height: 50px;
  /* line-height: 50px; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}

.ColCon {
  flex: 1;
}

.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;
}
</style>