278 lines
10 KiB
Vue
278 lines
10 KiB
Vue
<template>
|
|
<div class="prediction-container">
|
|
<div class="prediction-header">
|
|
<div class="header-font">
|
|
<span>信号预判</span>
|
|
<span>SIGNAL PREDICTION</span>
|
|
</div>
|
|
<img :src="headerIcon" />
|
|
</div>
|
|
<div class="prediction-con">
|
|
<div class="con-title"></div>
|
|
<div class="container">
|
|
<div class="question-box" v-for="(quesItem, index) in questionList" :key="index">
|
|
<template v-for="(qus, quIndex) in quesItem.question">
|
|
<div class="question-title" v-if="qus.isShow" :key="quIndex">
|
|
<div class="title">
|
|
<span class="tips">*</span>
|
|
<div>
|
|
<span>{{ qus.index_type }}、</span>
|
|
<span>{{ qus.title }}</span>
|
|
</div>
|
|
</div>
|
|
<template v-if="qus.inputType === 'radio'">
|
|
<a-radio-group v-model:value="qus.answer" @change="(e) => changeRadio(index, e, qus.type, qus.options)">
|
|
<a-radio
|
|
class="radioStyle"
|
|
v-for="(optionItem, indexItem) in qus.options"
|
|
:key="indexItem"
|
|
:value="optionItem.value"
|
|
>
|
|
{{ optionItem.name }}</a-radio
|
|
>
|
|
</a-radio-group>
|
|
</template>
|
|
<template v-if="qus.inputType === 'input'">
|
|
<div class="input-box">
|
|
<div class="field-answer">
|
|
<van-field type="number" v-model="qus.answer" @blur="changeInpput(qus.answer, index, quIndex)" />
|
|
</div>
|
|
<div class="input-unit">{{ qus.unit }}</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-btn">
|
|
<van-button class="btn" round type="primary" @click="handleSubmit">提交</van-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import headerIcon from '/@/assets/images/traceability/headerImage.png';
|
|
import { getSignalApi, postSignalApi } from '/@/views/23intervene/signalPrediction/predictionApi.ts';
|
|
import { showFailToast, showSuccessToast, showToast, showLoadingToast } from 'vant';
|
|
import { destroyPage } from '/@/hooks/openPage';
|
|
import {useLoading} from '/@/utils/compUtils';
|
|
import { useRouter } from 'vue-router';
|
|
let questionList = ref({});
|
|
let submitParams = ref({});
|
|
const router = useRouter();
|
|
const { loadingSpinner, loadingClose } = useLoading();
|
|
getList();
|
|
async function getList() {
|
|
const { code, result } = await getSignalApi({});
|
|
if (code === 200) {
|
|
questionList.value = changeIndex(result.questionList);
|
|
}
|
|
}
|
|
/**
|
|
* 添加自定义问卷序号
|
|
*/
|
|
function changeIndex(data: Array) {
|
|
let indexInit = 0;
|
|
const list = data.map((v: any) => {
|
|
v.question.map((item: any) => {
|
|
if (item.isShow) {
|
|
indexInit++;
|
|
item['index_type'] = indexInit;
|
|
}
|
|
});
|
|
return v;
|
|
});
|
|
return list;
|
|
}
|
|
/**
|
|
* radio 跳题，给提交对象赋值
|
|
* @param index
|
|
* @param value radio 选中值
|
|
* @param field 提交时所需参数
|
|
* @param options 选中题的选项
|
|
*/
|
|
async function changeRadio(index: number, value: number, field: string, options: object) {
|
|
let datas = questionList.value;
|
|
let radioVal = value.target.value;
|
|
let optionItem = options.find((e: { value: any }) => e.value === 1);
|
|
if (optionItem.showCode !== '') {
|
|
let codeList = optionItem.showCode.split(',');
|
|
codeList.map((code: any) => {
|
|
datas.map((item: any) => {
|
|
if (code == item.questionCode) {
|
|
if (item.question[0].answer !== '') {
|
|
item.question[0].answer = '';
|
|
}
|
|
item.question[0].isShow = radioVal === 1;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
submitParams.value[field] = radioVal;
|
|
questionList.value = changeIndex(datas);
|
|
}
|
|
// 限制input输入负数
|
|
function changeInpput(value: string, index: number, qusIndex: number) {
|
|
if (Number(value) < 0) {
|
|
showToast('不能输入负数');
|
|
questionList.value[index].question[qusIndex].answer = '';
|
|
}
|
|
}
|
|
function getParams() {
|
|
questionList.value.map((quItem: any) => {
|
|
quItem.question.map((item: any) => {
|
|
if (['radio', 'input'].includes(item.inputType) && item.isShow) {
|
|
submitParams.value[item.type] = item.answer;
|
|
}
|
|
});
|
|
});
|
|
return submitParams.value;
|
|
}
|
|
async function handleSubmit() {
|
|
let vis = true;
|
|
questionList.value.map((v: any) => {
|
|
v.question.map((qusItem: any) => {
|
|
if (qusItem.isShow && ['radio', 'input'].includes(qusItem.inputType)) {
|
|
if (qusItem.answer === '') {
|
|
vis = false;
|
|
showToast('请填写完问卷');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
if (vis) {
|
|
loadingSpinner();
|
|
const { code, result, message } = await postSignalApi(getParams());
|
|
if (code === 200) {
|
|
loadingClose();
|
|
showSuccessToast('提交成功');
|
|
try {
|
|
destroyPage();
|
|
} catch {
|
|
router.go(-1);
|
|
}
|
|
} else {
|
|
loadingClose();
|
|
showFailToast(message);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.prediction-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f5f7fb;
|
|
position: relative;
|
|
.prediction-header {
|
|
z-index: 4;
|
|
width: 100%;
|
|
height: 140px;
|
|
position: relative;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.header-font {
|
|
position: absolute;
|
|
left: 7%;
|
|
top: 22%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
span:nth-child(1) {
|
|
font-size: 30px;
|
|
color: #ffffff;
|
|
}
|
|
span:nth-child(2) {
|
|
margin-top: -12px;
|
|
color: rgba(255, 255, 255, 0.1);
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
.prediction-con {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 125px;
|
|
z-index: 99;
|
|
border-radius: 16px;
|
|
background-color: #ffffff;
|
|
.con-title {
|
|
width: 100%;
|
|
height: 34px;
|
|
background: linear-gradient(180deg, rgba(26, 104, 238, 0.2) 0%, rgba(48, 160, 226, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
height: calc(100vh - 220px);
|
|
overflow-y: auto;
|
|
.question-box {
|
|
.question-title {
|
|
padding: 10px 20px;
|
|
.title {
|
|
color: #333b42;
|
|
font-weight: bold;
|
|
padding-bottom: 10px;
|
|
position: relative;
|
|
.tips {
|
|
color: #ed2a26;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -10px;
|
|
}
|
|
}
|
|
.radioStyle {
|
|
display: block;
|
|
height: 32px;
|
|
}
|
|
.input-box {
|
|
display: flex;
|
|
align-items: center;
|
|
.field-answer {
|
|
width: 40%;
|
|
}
|
|
:deep(.van-cell) {
|
|
border: 1px solid #e6e6ea;
|
|
border-radius: 4px;
|
|
}
|
|
.input-unit {
|
|
width: 20%;
|
|
padding-left: 10px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom-btn {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 50px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.btn {
|
|
width: 80%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background-color: #1a68ee;
|
|
border-radius: 16px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|