pbl-teacher-table/src/components/pages/test/add/edit/check/number.vue

<template>
  <div class="c_box">
      <!-- <div class="mask"></div> -->
      <div v-if="!checkJson">暂未设置题目</div>
      <div v-else class="choice_box">
          <!-- <div class="title"><div>{{ `（${option[checkJson.type].name}）` }}</div><div v-html="checkJson.title"></div></div> -->
          <div class="c_title">
              <div class="title">
                  <div  style="display: flex;align-items: center;">
                      <!-- + `（${option[checkJson.type].name}）` -->
                  <span class="g_t_index" style="min-width: fit-content;">{{ tindex + 1}}</span>
                  <span>{{ checkJson.title }}</span>
                  <!-- <span style="min-width: fit-content;color: #efa030;">{{ checkJson.score ? '（分值：'+checkJson.score+'分）' : '' }}</span> -->
              </div>
              <!-- <span style="color: #efa030;display: flex;margin-top: 5px;line-height: 18px;">
                  <span style="min-width: fit-content;" v-if="!checkJson.answer && see">暂无参考答案</span>
                  <span style="min-width: fit-content;display: flex;" v-else-if="see">
                      <span style="min-width: fit-content;">参考答案：</span>
                      <span>{{ checkJson.answer }}</span>
                  </span>
              </span> -->
                  <!-- </div><div v-html="checkJson.title"></div> -->
              </div>
              <!-- <div class="p_box" v-if="isTeacher == 1 && checkJson.score">
                  <el-input v-model="checkJson.score2" class="c_input" @change="numberPan" placeholder="请输入得分"></el-input><span style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
              </div>
              <div class="p_box" v-if="isTeacher == 2 && checkJson.score2">
                  <span>{{ checkJson.score2 }}分</span><span style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
              </div> -->
          </div>
          <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
              style="color: #00000066;margin-top: 5px;"></div>
          <div class="choices">
            <el-input-number :controls="false" v-model="checkJson.answer2" :precision="numberTypePrecision" :placeholder="numberTypePlaceholder[checkJson.type]"></el-input-number>
            <span v-if="checkJson.type=='4'">%</span>
              <!-- <textarea  :readonly="checktype == 2" rows="2" v-autoHeight="68" class="binfo_input binfo_textarea" cols v-model="checkJson.answer"
                  placeholder=""></textarea> -->
          </div>
      </div>
  </div>
</template>

<script>
export default {
  props: {
      tindex:{
          type: Number
      },
      cJson: {
          type: Object,
      },
      checktype: {
          type: Number,
          default: 1
      },
      see:{
          type:Boolean,
          default:false
      },
      isTeacher: {
          type: Number,
          default: 2
      }
  },
  data() {
      return {
          option: {
              1: { name: '字数' },
          },
          userid:this.$route.query.userid,
          checkJson: undefined,
          numberTypePlaceholder:{
            "1":"请输入整数",
            "2":"请输入数字并保留一位小数",
            "3":"请输入数字并保留两位小数",
            "4":"请输入百分比"
          },
      }
  },
  watch: {
      checkJson: {
          handler(newValue) {
              this.$emit('update:cJson', newValue)
          },
          deep: true
      },
      cJson: {
          handler(newValue) {
              if(newValue.answer2 !== this.checkJson.answer2){
                  this.checkJson = this.depthCopy(newValue)
                  this.$forceUpdate()
              }
          },
          deep: true
      },
  },
  computed:{
    numberTypePrecision(){
      let _result = 0;
      if(this.checkJson.type=='1'){
        _result = 0
      }else if(this.checkJson.type=='2'){
        _result = 1
      }else if(this.checkJson.type=='3'){
        _result = 2
      }else if(this.checkJson.type=='4'){
        _result = 0
      }

      return _result
    }
  },
  methods: {
      depthCopy(s) {
          return JSON.parse(JSON.stringify(s));
      },
  },
  mounted() {
      this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
      if(this.checkJson.answer2){
          setTimeout(() => {
              this.checkJson.answer2 += "*0*%*";
              setTimeout(() => {
                  this.checkJson.answer2 = this.checkJson.answer2.replaceAll("*0*%*", "");
              }, 0);
          }, 100);
      }
  }
}
</script>

<style scoped>
.c_box {
  width: 100%;
  position: relative;
  padding-left: 45px;
}

.mask {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.choice_box {
  white-space: pre-line;
}

.choice_box> .c_title .title {
  font-weight: bold;
  width: 100%;
  word-break: break-all;
}

.choice_box> .c_title {
  display: flex;
  justify-content: space-between;
}

.choice_box> .c_title .p_box{
  margin-left: 5px;
  min-width: fit-content;
  display: flex;
  align-items: center;
}

.choice_box>.choices {
  margin-top: 10px;
}

.choices>span{
  font-size: 20px;
}

.binfo_input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  resize: none;
  font-family: 'Microsoft YaHei';
  min-height: 48px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #CAD1DC;
}

.binfo_textarea {
  border: 1.5px solid #CAD1DC;
  font-size: 16px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: 'Microsoft YaHei';
}

.binfo_input:focus-visible {
  border: 1.5px solid #3681FC !important;
}

.c_input {
  width: 90px;
}

.c_input >>> .el-input__inner{
  padding: 0 5px;
  text-align: right;
}

.g_t_index{
color: #3681FC;
font-size: 28px;
font-weight: bold;
position: relative;
margin-right: 30px;
margin-left: -40px;
}

.g_t_index+span{
font-weight: bold;
font-size: 18px;
}

.g_t_index::after{
content: "";
width: 18px;
height: 2px;
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
background: #3681FC;
}

.g_t_index::before{
content: "";
width: 6px;
height: 6px;
border-right: 2px solid #3681FC;
border-top: 2px solid #3681FC;
position: absolute;
right: -15px;
top: 50%;
transform: rotate(45deg) translateY(-5px);
}

.choices>textarea{
border-color: #E7E7E7;
border-radius: 8px;
}
</style>