完成水电表列表

src/views/system/Questionnaire/QuestionnaireView.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <div class="container_box">
+      <div class="titlebox flex justify-between items-center">
+        <span>问卷内容</span>
+        <el-button link type="primary" @click="router.back()">返回</el-button>
+      </div>
+      <div class="contentBox h-full" v-loading="viewLoading">
+        <div class="detail-header">
+          <h2>{{ viewData.title }}</h2>
+          <p style="color: #666">{{ viewData.description }}</p>
+        </div>
+        <el-divider />
+        <div class="detail-content">
+          <div v-for="(q, index) in viewData.content" :key="q.cid" class="question-item">
+            <div class="title">
+              <span style="font-weight: bold">{{ index + 1 }}. {{ q.title }}</span>
+              <span style="color: #f56c6c; margin-left: 5px" v-if="q.required">*</span>
+            </div>
+            <div class="type-tag">
+              <el-tag size="small">{{ getComponentLabel(q.type) }}</el-tag>
+            </div>
+
+            <!-- 单选题/多选题选项展示 -->
+            <div v-if="q.type === 'radio' || q.type === 'checkbox'" class="options">
+              <div v-for="(opt, idx) in q.options" :key="idx" class="option-item">
+                <span>{{ opt.label }}</span>
+              </div>
+            </div>
+
+            <!-- 填空题/多行文本展示 -->
+            <div v-else-if="q.type === 'input'" class="input-placeholder">
+              <el-input v-model="q.placeholder" placeholder="用户输入区域" />
+            </div>
+            <div v-else-if="q.type === 'textarea'" class="input-placeholder">
+              <el-input type="textarea" v-model="q.placeholder" placeholder="用户输入区域" />
+            </div>
+          </div>
+        </div>
+        <el-divider />
+        <div>
+          <span>备注: {{ viewData.remark ? viewData.remark : '暂无' }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getQuestionnaire } from '@/api/system/Questionnaire';
+import { QuestionComponentItem } from '@/api/system/Questionnaire/type';
+import { ref } from 'vue';
+const viewLoading = ref(false);
+const viewData = ref({
+  'id': '',
+  'villageId': null,
+  'title': '',
+  'description': '',
+  'content': [] as QuestionComponentItem[],
+  'status': '0',
+  'scope': '0',
+  'residents': '',
+  'startTime': '2026-04-03 00:00:00',
+  'endTime': '2026-04-09 00:00:00',
+  'remark': ''
+});
+const router = useRouter();
+const route = useRoute();
+
+const viewid = ref(null);
+// 组件库定义（用于获取类型名称）
+const componentList = [
+  { type: 'radio', label: '单选题' },
+  { type: 'checkbox', label: '多选题' },
+  { type: 'input', label: '填空题' },
+  { type: 'textarea', label: '多行文本' }
+];
+// 辅助方法：获取组件名称
+function getComponentLabel(type) {
+  const item = componentList.find((c) => c.type === type);
+  return item ? item.label : '';
+}
+
+function init() {
+  if (route.query.id) {
+    viewid.value = route.query.id;
+  }
+  viewLoading.value = true;
+  getQuestionnaire(viewid.value).then((res) => {
+    viewData.value = {
+      ...viewData.value,
+      ...res.data
+    };
+    if (typeof res.data.content === 'string') {
+      viewData.value.content = JSON.parse(res.data.content) as QuestionComponentItem[];
+    } else {
+      viewData.value.content = res.data.content as QuestionComponentItem[];
+    }
+
+    console.log('问卷内容：', viewData.value);
+    viewLoading.value = false;
+  });
+}
+init();
+</script>
+
+<style scoped lang="scss">
+.titlebox {
+  height: 50px;
+  line-height: 50px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+.container_box {
+  background-color: white;
+  height: inherit;
+  font-size: 16px;
+  padding: 20px;
+}
+.contentBox {
+  width: 1200px;
+  margin: 0 auto;
+}
+.detail-header {
+  margin-bottom: 20px;
+
+  h2 {
+    text-align: center;
+  }
+}
+
+.question-item {
+  margin-bottom: 25px;
+  padding: 15px;
+  border-radius: 8px;
+  background: #fafafa;
+
+  .title {
+    margin-bottom: 8px;
+  }
+
+  .type-tag {
+    margin-bottom: 12px;
+  }
+
+  .options {
+    margin-top: 10px;
+    .option-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      color: #666;
+
+      .el-icon {
+        margin-right: 8px;
+        color: #909399;
+      }
+    }
+  }
+
+  .input-placeholder {
+    margin-top: 10px;
+  }
+}
+</style>