dbsd_kczx/src/views/kc/wjxWjxx/components/WjxWjxxTmlbDjjgForm.vue

<template>
  <a-spin :spinning="confirmLoading">

    <a-row style="height: calc(80vh);">
      <a-col :span="24" style="overflow-y: scroll;height: calc(80vh);">
        <div style="text-align: center;width: 100%;font-weight: bold;font-size: 20px;padding: 20px;">{{ djxxData.title }}</div>
        <div style="text-align: right;font-size: 16px;padding-right: 20px;">
          <span class="answer-title">答卷人：</span><span class="answer-info">{{ djxxData.userName }} </span>
          <span v-if="djxxData.atype == 6" class="answer-title">总分：</span><span class="answer-info">{{ djxxData.totalScore }} </span>
          <span v-if="djxxData.atype == 6" class="answer-title">得分：</span><span class="answer-info">{{ djxxData.score }} </span>
          <span class="answer-title">用时：</span><span class="answer-info">{{djxxData.answerSfm}} </span>
        </div>
        <!-- 题干信息 -->
        <div style="width:100%;" v-for="(item,index) in tiganData" :key="index">
          <!-- 单选题 -->
          <div style="width:92%; margin:0 auto" v-if="item.wjType==3">
            <div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">单选题</div>
            <a-card>
              <template #title>
                <span>{{index+1}}、</span><span v-html:value="item.wjTitle" style="white-space:pre-wrap;word-wrap : break-word"></span>
              </template>
              <template #extra v-if="djxxData.atype == 6">
                <div style="margin-left: 40px;">题目分值：<span class="answer-word"> {{item.wjScore}}</span> 分</div>
                <div style="margin-left: 40px;">所得分值：<span class="answer-word"> {{item.itemScore}}</span> 分</div>
              </template>
              <a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default" disabled>
                <div style="width: 100%" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
                  <a-radio :value="tmxx.itemIndex+``"  style="width: 100%;margin-bottom: 5px;">
                    <span v-html:value="tmxx.itemTitle" style="width:80%;font-size: 16px;color:#000;"></span>
                    <span v-if="tmxx.itemSelected == 'true'" style="color:#9e9e9e;margin-left:30px;font-size:12px;">(此选项是正确答案)</span>
                  </a-radio>
                </div>
              </a-radio-group>
            </a-card>
          </div>
          <!-- 多选题 -->
          <div style="width:92%; margin:0 auto" v-else-if="item.wjType==4">
            <div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">多选题</div>
            <a-card >
              <template #title>
                <span>{{index+1}}、</span><span v-html:value="item.wjTitle" style="white-space:pre-wrap;word-wrap : break-word"/>
              </template>
              <template #extra v-if="djxxData.atype == 6">
                <div style="margin-left: 40px;">题目分值：<span class="answer-word"> {{item.wjScore}} </span> 分</div>
                <div style="margin-left: 40px;">所得分值：<span class="answer-word"> {{item.itemScore}}</span> 分</div>
              </template>
                    <!-- -{{item.itemSelected}}- -->
              <a-checkbox-group v-model:value="item.itemSelected" style="width: 100%" size="default" disabled>
                <a-row>
                  <a-col :span="24" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
                    <!-- -{{tmxx}}- -->
                    <a-checkbox :value="tmxx.itemIndex" style="width: 100%;margin-bottom: 5px;">
                      <span v-html:value="tmxx.itemTitle" style="width:80%;font-size: 16px;color:#000;"></span>
                    <span v-if="tmxx.itemSelected == 'true'" style="color:#9e9e9e;margin-left:30px;font-size:12px;">(此选项是正确答案)</span>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-card>
          </div>
          <!-- 填空题 -->
          <div style="width:92%; margin:0 auto" v-else-if="item.wjType==5">
            <div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">填空题</div>
            <a-card >
              <template #title>
                <span>{{index+1}}、</span><span v-html:value="item.wjTitle" style="white-space:pre-wrap;word-wrap : break-word" />
                <span v-if="item.tktda" style="color:#9e9e9e;margin-left:30px;font-size:12px;">(正确答案:{{item.tktda}})</span>
              </template>
              <template #extra v-if="djxxData.atype == 6">
                <div style="margin-left: 40px;">题目分值：<span class="answer-word">{{item.wjScore}}</span> 分</div>
                <div style="margin-left: 40px;">所得分值：<span class="answer-word">{{item.itemScore}}</span> 分</div>
              </template>
              <a-row>
                <a-col :span="24">
                  <span v-html="item.answerText"></span>
                  <!-- <a-textarea v-model:value="item.answerText" style="width:100%;" :auto-size="{ minRows: 2, maxRows: 5 }" disabled/> -->
                </a-col>
              </a-row>
            </a-card>
          </div>
          <div v-else>
            无对应类型
          </div>
        </div>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" name="wjxWjxx-add" setup>
import { ref, nextTick, defineExpose } from 'vue';
import { Icon } from '/@/components/Icon';
import { useMessage } from '/@/hooks/web/useMessage';
import { defHttp } from '/@/utils/http/axios';
import {
  queryWjxWjxxTmxxListByMainId,
  queryDataById,
  saveOrUpdate,
  djtj
} from '/@/views/kc/wjxWjxxTmlb/WjxWjxxTmlb.api';
const title = ref<string>('');
const mainId = ref<string>('');
const confirmLoading = ref<boolean>(false);
const tiganData = ref<any>([]);
const djxxData = ref<any>({});
const { createMessage } = useMessage();

const emit = defineEmits(['register', 'success']);

//初始化
function edit(id){
  tiganData.value = [];
  mainId.value = id;
  defHttp.get({url:'/wjxDjxx/queryByMainId',params:{id:id}}).then(res =>{
    console.log(`🚀 ~ defHttp.get ~ res:`, res)
    let djxx = res;
    let list = djxx.wjxDjxxTmxxList;
    for(let i=0;i<list.length;i++){
      let par = list[i];
      if(par.wjType==4){
        let lssj = par.itemSelected.split(",");
        const numArray = lssj.map(str => parseInt(str));
        list[i].itemSelected = numArray;
      }
    }
    tiganData.value = list;
    djxxData.value = djxx;
  })
}

//提交数据
async function submitForm(){
  emit('ok');
}

  defineExpose({
    edit,
    submitForm,
  });
</script>

<style lang="less" scoped>

/deep/span.ant-radio + * {
    width: 100%;
}

/deep/.ant-checkbox-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: tnum;
    display: inline-flex;
    align-items: baseline;
    line-height: unset;
    cursor: pointer;
    width: 80%;
}
/deep/.ant-checkbox + span {
    padding-right: 8px;
    padding-left: 8px;
    width: 100%;
}
.ant-checkbox-wrapper[aria-disabled='true'] {
  color: rgb(2, 2, 2); /* 例如，将文本颜色设置为灰色 */
  cursor: not-allowed; /* 将鼠标指针设置为禁用状态 */
}
.answer-title{
  font-size: 14px;
  color: #333;
}
.answer-info{
  font-size: 14px;
  color: #666;
  text-decoration: underline;
  margin-right: 15px;
}
.answer-word{
  color: #ff8710;
}
</style>