FE_occupationlab_server/src/pages/match/manage/trialReport.vue

<template>
  <div class="wrap">
    <el-card shadow="hover" class="m-b-20">
      <el-page-header @back="$router.back()" content="查看报告"></el-page-header>
    </el-card>

    <div class="content" v-loading="loading">
      <div class="text-right">
        <el-button type="primary" :loading="exporting" @click="exportPage">导出报告</el-button>
      </div>
      <h6 class="r-title">标准实验报告</h6>
      <div class="info">
        <h6 class="l-title">
          <img src="@/assets/img/info1.png" alt="">
          基本信息
        </h6>
        <ul :class="['info-list', { edit: editing }]">
          <li>
            <label>学生姓名：</label>
            <el-input v-if="editing" v-model="infoData.userName" disabled></el-input>
            <span v-else>{{ infoData.userName }}</span>
          </li>
          <li>
            <label>学生学号：</label>
            <el-input v-if="editing" v-model="infoData.workNumber" disabled></el-input>
            <span v-else>{{ infoData.workNumber }}</span>
          </li>
          <li>
            <label>实验时间：</label>
            <el-input v-if="editing" v-model="infoData.submitTime" disabled></el-input>
            <span v-else>{{ infoData.submitTime }}</span>
          </li>
          <li>
            <label>实验成绩：</label>
            <el-input v-if="editing" v-model="infoData.score" disabled></el-input>
            <div v-else class="score-wrap">
              <em>{{ infoData.score }}</em>
              <img src="@/assets/img/point.png" alt="">
            </div>
          </li>
          <li>
            <label>学生班级：</label>
            <el-input v-if="editing" v-model="infoData.className"></el-input>
            <span v-else>{{ infoData.className }}</span>
          </li>
          <li>
            <label>指导老师：</label>
            <el-input v-if="editing" v-model="infoData.instructor"></el-input>
            <span v-else>{{ infoData.instructor }}</span>
          </li>
          <li>
            <label>实验学时：</label>
            <el-input v-if="editing" v-model="infoData.period"></el-input>
            <span v-else>{{ infoData.period }}</span>
          </li>
        </ul>
        <div class="m-b-20">
          <h6 class="l-title">
            <img src="@/assets/img/report2.png" alt="">
            实验项目名称
          </h6>
          <el-input v-if="editing" v-model="form.projectName" type="textarea"></el-input>
          <div v-else class="pre-wrap" v-html="form.projectName"></div>
        </div>
        <div class="m-b-20">
          <h6 class="l-title">
            <img src="@/assets/img/report3.png" alt="">
            实验目的
          </h6>
          <div :class="['pre-wrap', { edit: editing }]" v-html="form.purpose"></div>
        </div>
        <div class="m-b-20">
          <h6 class="l-title">
            <img src="@/assets/img/report4.png" alt="">
            实验数据
          </h6>
          <el-table :data="expData" class="table" border header-align="center">
            <el-table-column type="index" label="序号" align="center" width="60">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="judgmentName" label="判分点" width="270" align="center"></el-table-column>
            <el-table-column v-if="isLc" prop="judgmentName" label="考核点" align="center" width="150">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
                  <span>
                    <span>{{ index + 1 }}. </span>{{ item.name }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ruleAnswer" label="参考答案" style='word-wrap: break-word'>
              <template slot-scope="scope">
                <div v-if='scope.row.lcRuleRecords'>
                  <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
                    <span>
                      <span>{{ index + 1 }}. </span>{{ item.ruleAnswer }}
                    </span>
                  </div>
                </div>
                <div v-else v-html="scope.row.referenceAnswer"></div>
              </template>
            </el-table-column>
            <el-table-column prop="userAnswer" label="学生答案">
              <template slot-scope="scope">
                <div v-if='scope.row.lcRuleRecords'>
                  <div v-for="(item, index) in scope.row.lcRuleRecords" :key="index">
                    <span v-if='item.userAnswer'>
                      <span>{{ index + 1 }}. </span>{{ item.userAnswer }}
                    </span>
                    <span v-else>
                      <span>{{ index + 1 }}. </span>未填写
                    </span>
                  </div>
                </div>
                <div v-else class="pre-code">{{ scope.row.answer }}</div>
                <template v-if="scope.row.runThePictureList">
                  <img v-for="(img, i) in scope.row.runThePictureList" :key="i" width="200" class="result-pic"
                    :src="img" alt="">
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="quesScore" label="分值" :key="6" width="80" align="center"></el-table-column>
            <el-table-column prop="score" label="得分" width="80" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="m-b-20">
          <h6 class="l-title">
            <img src="@/assets/img/report5.png" alt="">
            实验总结与体会
          </h6>
          <quill v-if="editing" :border="true" v-model="form.summarize" :minHeight="150" :height="150" />
          <div v-else class="pre-wrap" v-html="form.summarize"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/setting'
import Util from '@/libs/util'
import Axios from 'axios'
export default {
  data () {
    return {
      reportId: this.$route.query.reportId,
      headers: {
        token: Util.session.get(Setting.tokenKey)
      },
      title: "实验报告",
      form: {
        className: "",
        instructor: "",
        period: "",
        projectName: "",
        summarize: "",
      },
      infoData: {},
      expData: [],
      editing: false,
      exporting: false,
      loading: false,
      isLc: false,
      userScores: []
    };
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () { // 查询详情
      this.loading = true
      this.$get(`${this.api.reportDetail}?reportId=${this.reportId}`).then(({ report, userScores }) => {
        this.form = report
        let form = this.form;
        this.infoData = {
          workNumber: form.workNumber,
          experimentalClassName: form.experimentalClassName,
          instructor: form.instructor,
          period: form.period,
          laboratory: form.laboratory,
          submitTime: form.submitTime,
          score: form.score,
          className: form.className,
          userName: form.userName
        }
        const { data } = report
        // 如果没有data，则添加，否则，直接使用
        if (!data) {
          this.expData = userScores
          this.userScores = userScores
          this.handleList(userScores)
          this.$post(this.api.editExperimentalData, {
            reportId,
            data: JSON.stringify(userScores)
          }).then(res => { }).catch(err => { })
        } else {
          this.handleList(JSON.parse(data))
        }
      }).catch(res => {
        this.loading = false
      })
    },
    // 处理实验数据
    handleList (list) {
      this.isLc = list.find(e => e.lcRuleRecords) // 流程系统才有lcRuleRecords
      if (this.isLc) {
        list.map(e => {
          e.assessmentPoint = ''
          e.referenceAnswer = ''
          e.answer = ''
          e.lcRuleRecords.map((n, i) => {
            e.assessmentPoint += `${i + 1}.${n.name}`
            e.referenceAnswer += `${i + 1}.${n.ruleAnswer}`
            e.answer += `${i + 1}.${n.userAnswer}`
          })
        })
      }
      this.expData = list
      this.loading = false
    },
    async exportPage () {
      this.exporting = true
      const form = Object.assign(this.form, this.infoData)
      const list = JSON.parse(JSON.stringify(this.expData))
      list.map((e, i) => {
        const item = this.userScores.find(n => n.judgmentId == e.judgmentId)
        if (item && item.runThePicture) e.runThePicture = item.runThePicture
        if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList
        e.id = i + 1
        if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;')
      })
      for (const i in form) {
        if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '')
      }
      form.purpose = form.purpose.replace(/<[^>]+>/g, '')

      try {
        const res = await Axios.post(this.api[this.isLc ? 'exportBankExperimentReport' : 'exportLabReport'], {
          ...form,
          experimentalData: list
        }, {
          headers: this.headers,
          responseType: 'blob'
        })
        const name = res.headers['content-disposition']
        Util.downloadFileDirect(name ? decodeURI(name) : `实验报告.docx`, new Blob([res.data]))
      } finally {
        this.exporting = false
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 12px 300px 20px;
}

.pre-code {
  white-space: pre-wrap;
}

.text-right {
  text-align: right;
}

code,
kbd,
samp {
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/deep/ pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  word-break: break-all;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
}

.content {
  padding: 16px 40px;
  background: #fff;

  .r-title {
    margin-bottom: 40px;
    font-size: 24px;
    text-align: center;
    color: #333;
  }

  .info {
    padding: 20px 16px;
    border: 1px solid #e1e6f2;
  }

  .l-title {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
    background-color: #f7f5ff;
  }

  .info-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 0 20px;

    li {
      display: inline-flex;
      width: 23%;
      padding: 0 10px;
      margin-bottom: 34px;
    }

    &.edit {
      li {
        align-items: center;
      }
    }

    label {
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }

    span {
      min-width: 150px;
      padding: 0 10px 3px;
      border-bottom: 1px solid #e1e6f2;
    }

    /deep/.el-input {
      width: 174px;
    }
  }

  .score-wrap {
    position: relative;
    min-width: 150px;
    border-bottom: 1px solid #e1e6f2;

    em {
      position: absolute;
      top: -12px;
      left: 30px;
      font-family: din;
      font-size: 30px;
      font-weight: 600;
      color: #0b1d30;
    }

    img {
      position: absolute;
      bottom: -15px;
      left: 0;
    }
  }

  /deep/.el-textarea .el-textarea__inner,
  .pre-wrap {
    min-height: 72px;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;

    &.edit {
      color: #abb3c6;
      border: 1px solid #cacfdb;
      border-radius: 4px;
      background-color: #f6f7f9;
    }
  }

  /deep/ .table th {
    background-color: #e5dfff !important;

    .cell {
      line-height: 35px;
      color: #fff;
    }
  }
}

.result-pic {
  max-width: 100%;
  margin: 10px 0;
}

@media (max-width: 1650px) {
  .wrap {
    padding: 12px 200px 20px;
  }
}

@media (max-width: 1430px) {
  .wrap {
    padding: 12px 100px 20px;
  }
}
</style>