health.admin/src/satisfaction/SeeQuestionnaire.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
const props = defineProps<{
  data?: any;
}>();

const emits = defineEmits<{
  submit: [data?: any];
  back: [];
}>();

// 问卷数据结构
interface Question {
  id: string;
  content: string;
  required?: boolean;
}

interface Section {
  id: string;
  title: string;
  questions: Question[];
}

// 表单数据
const form = reactive({
  title: '就诊体验满意度', // 问卷标题
  introduction:
    '尊敬的患者及家属：\n 您好！感谢您选择我院就诊。为了不断的提升我们的医院服务质量，更好地为您和其他患者提供优质、高效的医疗服务，我们特开展此次就诊满意度回访调查，您的反馈对我们至关重要。请您根据实际就诊体验，恳请您抽出宝贵时间，根据您的实际就诊体验填写以下内容。我们将对您的信息严格保密。感谢您的支持与配合！', // 介绍文字
  scoreExplanation: '1分表示非常不满意, 2分表示不满意, 3分表示一般, 4分表示满意, 5分表示非常满意', // 分数说明
  sections: [
    {
      id: '1',
      title: '一、就诊环境评价',
      questions: [
        { id: '1', content: '医院门诊 / 住院部的整洁度:', required: true },
        { id: '2', content: '医院的通风情况:', required: true },
        { id: '3', content: '医院的采光情况:', required: true },
        { id: '4', content: '医院的噪音控制:', required: true },
        { id: '5', content: '候诊区域的舒适度 (座椅、空间等)', required: true },
      ],
    },
  ] as Section[],
  otherComments: '', // 其他意见
});

// 初始化数据
onMounted(() => {
  if (props.data) {
    if (props.data.title) form.title = props.data.title;
    if (props.data.introduction) form.introduction = props.data.introduction;
    if (props.data.scoreExplanation) form.scoreExplanation = props.data.scoreExplanation;
    if (props.data.sections) form.sections = props.data.sections;
    if (props.data.otherComments) form.otherComments = props.data.otherComments;
  }
});
</script>

<template>
  <div class="questionnaire-editor-container">
    <!-- 表单内容 -->
    <div class="form-content">
      <a-form ref="formRef" :model="form" layout="vertical">
        <!-- 问卷标题 -->
        <h1 class="questionnaire-title-section">
          {{ form.title }}
        </h1>

        <!-- 介绍文字 -->
        <div class="introduction-section">
          {{ form.introduction }}
        </div>

        <!-- 分数说明 -->
        <div class="score-explanation-section">
          <div class="label">分数说明:</div>
          <div class="score-explanation-input label">
            {{ form.scoreExplanation }}
          </div>
        </div>

        <!-- 章节列表 -->
        <div class="sections-container">
          <div v-for="section in form.sections" :key="section.id" class="section-item">
            <!-- 章节标题 -->
            <!-- <div class="section-header"> -->
            <h2 class="section-title-input label">
              {{ section.title }}
            </h2>

            <!-- 问题列表 -->
            <div class="questions-list">
              <div v-for="(question, questionIndex) in section.questions" :key="question.id" class="question-item">
                <div class="question-content">
                  <span class="question-number">{{ questionIndex + 1 }}、</span>
                  <div class="question-input label">
                    {{ question.content }}
                  </div>
                </div>
                <!-- 评分选项（1-5分） -->
                <div class="score-options">
                  <a-radio-group :value="1">
                    <a-radio :value="1">1分</a-radio>
                    <a-radio :value="2">2分</a-radio>
                    <a-radio :value="3">3分</a-radio>
                    <a-radio :value="4">4分</a-radio>
                    <a-radio :value="5">5分</a-radio>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他意见 -->
        <div class="other-comments-section">
          <div class="other-comments-label">其他意见:</div>
          <a-textarea
            v-model:value="form.otherComments"
            placeholder="请给我们留言您的其他意见"
            :rows="4"
            class="other-comments-input"
          />
        </div>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.questionnaire-editor-container {
  // border: 1px solid #f0f0f0;
  padding: 24px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-content {
  flex: 1;
  overflow: auto;
  margin-bottom: 24px;
  max-width: 800px;
  margin: 0 auto 24px;
  width: 100%;
}

// 问卷标题
.questionnaire-title-section {
  text-align: center;
  margin-bottom: 32px;

  .title-input {
    font-size: 24px;
    font-weight: bold;
    text-align: center;

    :deep(.ant-input) {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      border: none;
      border-bottom: 2px solid #d9d9d9;
      border-radius: 0;
      padding: 12px 0;
      background: transparent;

      &:focus,
      &:hover {
        border-bottom-color: #40a9ff;
        box-shadow: none;
      }
    }
  }
}

// 介绍文字
.introduction-section {
  margin-bottom: 24px;

  .introduction-textarea {
    :deep(.ant-input) {
      font-size: 14px;
      line-height: 2;
      white-space: pre-wrap;
      // border: 1px solid #d9d9d9;
      padding: 12px;
      // border-radius: 4px;
    }
  }
}

// 分数说明
.score-explanation-section {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;

  .label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    white-space: nowrap;
  }

  .score-explanation-input {
    flex: 1;

    :deep(.ant-input) {
      font-size: 14px;
    }
  }
}

// 章节容器
.sections-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

// 章节项
.section-item {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 16px;
  background: #fafafa;
}

// 章节标题
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;

  .section-title-input {
    flex: 1;

    :deep(.ant-input) {
      font-size: 16px;
      font-weight: bold;
      border: none;
      background: transparent;
      padding: 4px 8px;
      border-bottom: 1px dashed transparent;

      &:focus,
      &:hover {
        border-bottom-color: #d9d9d9;
        background: #fff;
      }
    }
  }

  .delete-section-btn {
    flex-shrink: 0;
  }
}

// 问题列表
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

// 问题项
.question-item {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}

// 问题内容
.question-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;

  .question-number {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    flex-shrink: 0;
  }

  .question-input {
    flex: 1;
    font-weight: bold;
    :deep(.ant-input) {
      font-size: 14px;
      border: none;
      border-bottom: 1px dashed transparent;
      padding: 4px 8px;

      &:focus,
      &:hover {
        border-bottom-color: #d9d9d9;
      }
    }
  }

  .delete-question-btn {
    flex-shrink: 0;
  }
}

// 评分选项
.score-options {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 24px;
  flex-wrap: wrap;

  :deep(.ant-radio-group) {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }

  :deep(.ant-radio-wrapper) {
    font-size: 14px;
    margin-right: 0;
  }

  .score-hint {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    font-style: italic;
    margin-left: auto;
  }
}

// 其他意见
.other-comments-section {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;

  .other-comments-label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 12px;
  }

  .other-comments-input {
    :deep(.ant-input) {
      font-size: 14px;
    }
  }
}

:deep(.ant-input),
:deep(.ant-textarea),
:deep(.ant-select-selector) {
  border-color: #d9d9d9;
}
</style>