This commit is contained in:
@@ -1,96 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
import type {ContingenPlanVO} from '#/api/property/customerService/contingenPlan/model';
|
||||
import {shallowRef} from 'vue';
|
||||
import {reactive, shallowRef} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {questionnaireInfo} from "#/api/property/customerService/questionnaire/questionnaire";
|
||||
import type {
|
||||
QuestionnaireVO
|
||||
} from "#/api/property/customerService/questionnaire/questionnaire/model";
|
||||
import {
|
||||
Descriptions,
|
||||
DescriptionsItem,
|
||||
Divider,
|
||||
Tag,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
CheckboxGroup,
|
||||
Rate,
|
||||
Timeline,
|
||||
TimelineItem
|
||||
} from 'ant-design-vue';
|
||||
import {contingenPlanInfo} from '#/api/property/customerService/contingenPlan';
|
||||
import {renderDict} from "#/utils/render";
|
||||
DatePicker,
|
||||
Textarea,
|
||||
Input,
|
||||
Popover
|
||||
} from 'ant-design-vue'
|
||||
import {QuestionCircleOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
fullscreen: true,
|
||||
onOpenChange: handleOpenChange,
|
||||
cancelText: '保存为草稿',
|
||||
confirmText: '保存并发布',
|
||||
onClosed() {
|
||||
contingenPlanIDetail.value = null;
|
||||
questionnaireDetail.value = null;
|
||||
},
|
||||
onConfirm: () => {
|
||||
questionnaireDetail.value = null;
|
||||
modalApi.close()
|
||||
},
|
||||
});
|
||||
|
||||
const contingenPlanIDetail = shallowRef<null | ContingenPlanVO>(null);
|
||||
const handleRecords = shallowRef<null | ContingenPlanVO>(null);
|
||||
const questionnaireDetail = shallowRef<null | QuestionnaireVO>(null);
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
const response = await contingenPlanInfo(id);
|
||||
contingenPlanIDetail.value = response;
|
||||
handleRecords.value = response.contingenPlanRecordVos.map(item => ({
|
||||
status: item.status,
|
||||
createTime: item.createTime,
|
||||
handlerName: item.dutyPersionName
|
||||
}));
|
||||
console.log(handleRecords.value)
|
||||
questionnaireDetail.value = await questionnaireInfo(id);
|
||||
if (questionnaireDetail.value.questionnaireQuestionVos) {
|
||||
questionnaireDetail.value.questionnaireQuestionVos.forEach(item => {
|
||||
item.answer = ''
|
||||
if (item.questionnaireQuestionItemVos) {
|
||||
item.options = item.questionnaireQuestionItemVos.map(item => item.itemContent)
|
||||
}
|
||||
})
|
||||
}
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
const radioStyle = reactive({
|
||||
display: 'flex',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="详情" class="w-[70%]">
|
||||
<Descriptions v-if="contingenPlanIDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
|
||||
<DescriptionsItem label="预案名称">
|
||||
{{ contingenPlanIDetail.contingenPlanName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="创建时间">
|
||||
{{ contingenPlanIDetail.createTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="预案类型" v-if="contingenPlanIDetail.contingenPlanType!=null">
|
||||
<component
|
||||
:is="renderDict(contingenPlanIDetail.contingenPlanType,'type_contingency_plan')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="最后更新时间">
|
||||
{{ contingenPlanIDetail.updateTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="演练状态" v-if="contingenPlanIDetail.status!=null">
|
||||
<component
|
||||
:is="renderDict(contingenPlanIDetail.status,'pro_exercise_status')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="完成时间">
|
||||
{{ contingenPlanIDetail.compleTimes }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="发起人">
|
||||
{{ contingenPlanIDetail.initiatName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="责任人">
|
||||
{{ contingenPlanIDetail.dutyPersionName}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="预案内容" :span="2">
|
||||
<div v-html="contingenPlanIDetail.contingenPlanContent"></div>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="风险等级">
|
||||
<Rate :value="contingenPlanIDetail.grade" disabled />
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
|
||||
<Divider orientation="left" orientation-margin="0px">
|
||||
处理记录
|
||||
</Divider>
|
||||
<Timeline>
|
||||
<TimelineItem v-for="(item,index) in handleRecords" :key="index">
|
||||
<p style="display: flex;">类型：
|
||||
<component
|
||||
:is="renderDict(item.status,'pro_exercise_status')"
|
||||
/></p>
|
||||
<p>时间：{{item.createTime}}</p>
|
||||
<p>处理人：{{item.handlerName}}</p>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
<BasicModal :fullscreen-button="false" title="预览问卷">
|
||||
<div v-if="questionnaireDetail" class="questionnaire-container">
|
||||
<div class="head-title">{{ questionnaireDetail.head }}</div>
|
||||
<div class="subtitle">{{ questionnaireDetail.depict }}</div>
|
||||
<div v-for="(item,index) in questionnaireDetail.questionnaireQuestionVos"
|
||||
class="question-content">
|
||||
<div class="question-head">
|
||||
<Tag :bordered="false">{{ index + 1 }}</Tag>
|
||||
<span>{{ item.head }}</span>
|
||||
<Popover title="问题描述" placement="right">
|
||||
<template #content>
|
||||
<p>{{ item.depict }}</p>
|
||||
</template>
|
||||
<QuestionCircleOutlined v-if="item.depict!=null"
|
||||
style="font-size: 10px;margin-left: 10px"/>
|
||||
</Popover>
|
||||
<span style="color: red;margin-left: 5px" v-if="item.isRequired=='1'">*</span>
|
||||
</div>
|
||||
<div class="question-item">
|
||||
<div v-if="item.type=='1'">
|
||||
<Input style="width: 80%;" v-model:value="item.answer"
|
||||
placeholder="请输入您的详细回答"/>
|
||||
</div>
|
||||
<div v-if="item.type=='2'">
|
||||
<Textarea style="width: 80%;" v-model:value="item.answer"
|
||||
placeholder="请输入您的详细回答"/>
|
||||
</div>
|
||||
<div v-if="item.type=='3'">
|
||||
<RadioGroup v-model:value="item.answer">
|
||||
<Radio :style="radioStyle"
|
||||
v-for="option in item.questionnaireQuestionItemVos"
|
||||
:value="option.itemContent">{{ option.itemContent }}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div v-if="item.type=='4'">
|
||||
<CheckboxGroup class="vertical-checkbox-group" v-model:value="item.checked"
|
||||
:options="item.options"/>
|
||||
</div>
|
||||
<div v-if="item.type=='5'">
|
||||
<Rate v-model:value="item.rate"/>
|
||||
<span style="color:#8f8e8e;margin-left: 20px">请评分</span>
|
||||
</div>
|
||||
<div v-if="item.type=='6'">
|
||||
<DatePicker style="width: 200px" v-model:value="item.answer"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.questionnaire-container {
|
||||
.head-title {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
margin-left: 20px;
|
||||
|
||||
.question-item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.vertical-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-head {
|
||||
margin: 20px 0 10px 0;
|
||||
|
||||
:deep(.ant-tag) {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-inline-end: 7px;
|
||||
padding-inline: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user