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

332 lines
11 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div id="siteMain">
<div id="maxSite">
<a-layout>
<!-- 页头 -->
<headerPage />
<!-- 主体部分 -->
<a-layout-content>
<a-spin :spinning="confirmLoading" v-if="showType == 1">
<a-row style="min-height: calc(80vh)">
<a-col :span="24" style="overflow-y: scroll">
<div style="text-align: center; width: 100%; font-weight: bold; font-size: 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">单选题</div>
<a-card>
<template #title>
<span>{{ index + 1 }}、</span><span v-html="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" :key="index">
<a-radio :value="tmxx.itemIndex + ``" style="width: 100%; margin-bottom: 5px">
<span v-html="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">多选题</div>
<a-card>
<template #title>
<span>{{ index + 1 }}、</span><span v-html="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" :key="index">
<a-checkbox :value="tmxx.itemIndex" style="width: 100%; margin-bottom: 5px">
<span v-html="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">填空题</div>
<a-card>
<template #title>
<span>{{ index + 1 }}、</span><span v-html="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-col :span="24" style="text-align: center">
<a-button type="primary" @click="submitForm">提交</a-button>
</a-col>
</a-row>
</a-spin>
<div v-if="showType == 2" style="width: 100%; text-align: center;min-height: 500px;">
<div style="margin-top: 200px;"
>您已提交了测验,请勿重复提交!<a-button
type="primary"
@click="
() => {
router.push({ path: '/site/index' });
}
"
>返回</a-button
>
</div>
</div>
<div v-if="showType == 3" style="width: 100%; text-align: center;min-height: 500px;">
<div style="margin-top: 200px;"
>提交成功,请返回首页!<a-button
type="primary"
@click="
() => {
router.push({ path: '/site/index' });
}
"
>返回</a-button
>
</div>
</div>
<!-- <div v-if="showType == 3" style="width: 100%; text-align: center">
<div style="margin-top: 300px"
>提交成功请返回首页<a-button
type="primary"
@click="
() => {
router.push({ path: '/site/index' });
}
"
>返回</a-button
>
</div>
</div> -->
</a-layout-content>
<!-- 页尾 -->
<footerPage />
</a-layout>
</div>
</div>
</template>
<script lang="ts" name="wjxWjxx-add" setup>
import { ref, nextTick, unref, defineExpose, onMounted } 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';
import headerPage from '/@/views/site/common/header.vue';
import footerPage from '/@/views/site/common/footer.vue';
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 showType = ref<number>(1);
// const openTime = ref<string>('');
const { createMessage } = useMessage();
import { useRouter } from 'vue-router';
import { def } from '@vue/shared';
const emit = defineEmits(['ok', 'closeLoading']);
//当前路由信息
const { currentRoute } = useRouter();
const router = useRouter();
const { query } = unref(currentRoute);
const { rwbh, xqxn, type, teano, cytitle, cyid, cyatype, sfzd, sfbs } = query; //获取传递参数
//初始化
function edit(record, isDisabled, type, flag) {
console.log('👨‍👨‍👦', 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 || param.wjAnswer == '') {
emit('closeLoading');
createMessage.warning('有题目没有作答,请检查试卷,完成所有作答!');
return;
}
}
// values[i].openTime = openTime.value;
}
const isUpdate = false;
console.log('👨‍🚒', values);
showType.value = 3;
//保存成功
await djtj(values, isUpdate);
}
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}`;
}
// 自动请求并暴露内部方法
onMounted(() => {
//获取是否答过题
defHttp.get({ url: '/wjxWjxx/wjxWjxx/querySfdtById', params: { id: cyid } }).then((res) => {
console.log('🎅', res);
var num = res.num;
console.log('🧛', num);
if(num && parseInt(num)>0){
showType.value = 2;
}else{
showType.value = 1;
edit({ id: cyid, title: cytitle }, false, cyatype, sfbs);
}
});
});
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%;
}
#siteMain {
// font-size: ;
// height: 100%;
background: #f3f3f4;
#maxSite {
//最大宽度
max-width: 1170px;
//居中
margin: 0 auto;
.rowGutter {
margin-top: 1rem;
margin-bottom: 1rem;
}
.ant-layout-header {
color: #fff;
background: #1ab394;
}
.ant-layout-footer {
line-height: 1.5;
background: #fff;
}
.ant-layout-sider {
color: #fff;
line-height: 120px;
background: #3ba0e9;
}
.ant-layout-content {
min-height: 120px;
color: #000;
line-height: 120px;
background: #f3f3f4;
}
.dictBox :deep(.ant-select) {
width: 100%;
}
}
}
</style>