update
init
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user