dbsd_kczx/src/views/kc/wjxWjxx/components/WjxWjxxTmlbDjForm.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;">
          {{ title }}</div>
        <!-- 题干信息 -->
        <div style="width:100%;" v-for="(item,index) in tiganData" :key="index">
          <!-- 单选题 -->
          <div style="width: 100%;" 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>
                <span style="margin-left: 40px;" v-if="isShow">题目分值： {{item.wjScore}} 分</span>
              </template>
              <a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default" :disabled="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;"></span>
                  </a-radio>
                </div>
              </a-radio-group>
            </a-card>
          </div>
          <!-- 多选题 -->
          <div style="width: 100%;" 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>
                <span style="margin-left: 40px;" v-if="isShow">题目分值： {{item.wjScore}} 分</span>
              </template>
              <a-checkbox-group v-model:value="item.itemSelected" style="width: 100%" size="default" :disabled="disabled">
                <a-row>
                  <a-col :span="24" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
                    <a-checkbox :value="tmxx.itemIndex" style="width: 100%;margin-bottom: 5px;">
                      <span v-html:value="tmxx.itemTitle" style="width:80%;font-size: 16px;"></span>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-card>
          </div>
          <!-- 多选题 -->
          <div style="width: 100%;" 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"/>
              </template>
              <template #extra>
                <span style="margin-left: 40px;" v-if="isShow">题目分值： {{item.wjScore}} 分</span>
              </template>
              <a-row>
                <a-col :span="24">
                  <a-textarea placeholder="请填写答案" v-model:value="item.wjAnswer" style="width:100%;" :auto-size="{ minRows: 2, maxRows: 5 }" :disabled="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 isShow = ref<boolean>(false);
const disabled = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const tiganData = ref<any>([]);
const tmxxPar = ref<any>({});
// const openTime = ref<string>('');
const { createMessage } = useMessage();

const emit = defineEmits(['ok', 'closeLoading']);

//初始化
function edit(record,isDisabled,type,flag){
  // openTime.value = getCurrentTimeFormat();
  tiganData.value = [];
  disabled.value = isDisabled;
  if(type == '6'){
    isShow.value = true;
  }else if(type == '1'){
    isShow.value = false;
  }
  title.value = record.title;
  mainId.value = record.id;
  if(flag == 'ls'){
    defHttp.get({url:'/wjxWjxxTmlb/wjxWjxxTmlb/queryByMainId',params:{id:record.id}}).then(res =>{
      // console.log(`🚀 ~ defHttp.get ~ res:`, res)
      let list = res;
      for(let i=0;i<list.length;i++){
        let par = list[i];
        if(disabled.value){
          if(par.wjType==4){
            let lssj = par.itemSelected.split(",");
            const numArray = lssj.map(str => parseInt(str));
            list[i].itemSelected = numArray;
          }
        }
      }
      tiganData.value = res;
    })
  }else{
    defHttp.get({url:'/wjxWjxxTmlb/wjxWjxxTmlb/queryDjByMainId',params:{id:record.id}}).then(res =>{
      tiganData.value = res;
    })
  }
}

//提交数据
async function submitForm(){
  const data = tiganData.value;
  // console.log(`🚀 ~ submitForm ~ data:`, data)
  const values = Object.assign([], data);
  for(let i=0;i<values.length;i++){
    let param = values[i];
    if(param.wjType == 3 || param.wjType == 4){
      if(param.itemSelected == null){
        emit('closeLoading');
        createMessage.warning("有题目没有作答，请检查试卷，完成所有作答！");
        return;
      }
      values[i].itemSelected = param.itemSelected+"";
    }else if(param.wjType == 5){
      if(param.wjAnswer == null){
        emit('closeLoading');
        createMessage.warning("有题目没有作答，请检查试卷，完成所有作答！");
        return;
      }
    }
    // values[i].openTime = openTime.value;
  }
  const isUpdate = false
  await djtj(values, isUpdate);
  //关闭弹窗
  emit('ok');
}

function getCurrentTimeFormat() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  return `${year}-${padZero(month)}-${padZero(day)} ${padZero(hour)}:${padZero(minute)}:${padZero(second)}`;
}

function padZero(num) {
  return num < 10 ? `0${num}` : `${num}`;
}

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