admin-vben5/apps/web-antd/src/views/property/customerService/questionnaire/questionnaire-detail.vue

<script setup lang="ts">
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 {
  Tag,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Rate,
  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() {
    questionnaireDetail.value = null;
  },
  onConfirm: () => {
    questionnaireDetail.value = null;
    modalApi.close()
  },
});

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 };
  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 :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>