8/25 dev 权限,sse,账单

src/views/system/Questionnaire/QuestionnaireView.vue

@@ -1,18 +1,88 @@
 <template>
   <div class="p-2 h-full flex flex-col">
-    <div class="container_box flex-1">
-      <div class="titlebox flex justify-between items-center">
-        <span>问卷内容</span>
-        <el-button link type="primary" @click="router.back()">返回</el-button>
+    <PageHeader></PageHeader>
+    <el-card class="mt-20px" style="min-height: 80px">
+      <div class="tabs">
+        <div class="tab-item" :class="{ 'active': activeTab == 'preview' }" @click="handleTabClick('preview')">
+          <div class="tab-content">问卷预览</div>
+        </div>
+        <div class="tab-item" :class="{ 'active': activeTab == 'detail' }" @click="handleTabClick('detail')">
+          <div class="tab-content">调查详情</div>
+        </div>
       </div>
-      <div class="contentBox h-full" v-loading="viewLoading">
+    </el-card>
+    <div class="flex-1 mt-20px">
+      <el-card v-if="activeTab == 'preview'">
+        <div class="container_box flex-1">
+          <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 :class="q.type === 'radio' ? 'radio__type' : 'checkbox__type'"></span>
+                    <span class="option-label">{{ opt.label }}</span>
+                  </div>
+                </div>
+                <!-- 填空题/多行文本展示 -->
+                <div v-else-if="q.type === 'input'" class="input-placeholder">
+                  <el-input disabled placeholder="用户输入区域" />
+                </div>
+                <div v-else-if="q.type === 'textarea'" class="input-placeholder">
+                  <el-input disabled type="textarea" placeholder="用户输入区域" />
+                </div>
+              </div>
+            </div>
+            <el-divider />
+            <div>
+              <span>备注: {{ viewData.remark ? viewData.remark : '暂无' }}</span>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <el-card v-else-if="activeTab == 'detail'">
+        <div>
+          <el-table :data="list" style="width: 100%">
+            <el-table-column prop="answerName" label="答题人" />
+            <el-table-column prop="type" label="提交时间" />
+            <el-table-column prop="options" label="操作">
+              <template #default="scope">
+                <el-button type="primary" link @click="handleGetMain(scope.row.id)">查看详情</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <Pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
+      </el-card>
+    </div>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="680px" append-to-body>
+      <el-form ref="houseRentalFormRef" :model="form.content" label-width="120px">
         <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 v-for="(q, index) in form.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>
@@ -22,19 +92,28 @@
             </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 :class="q.type === 'radio' ? 'radio__type' : 'checkbox__type'"></span>
-                <span class="option-label">{{ opt.label }}</span>
-              </div>
+            <div v-if="q.type === 'radio'" class="options">
+              <el-radio-group v-model="q.value as string">
+                <div>
+                  <div v-for="(opt, idx) in q.options" :key="idx">
+                    <el-radio disabled :value="opt.label">{{ opt.label }}</el-radio>
+                  </div>
+                </div>
+              </el-radio-group>
+            </div>
+            <div v-if="q.type === 'checkbox'" class="options">
+              <el-checkbox-group v-model="q.value as string[]">
+                <div v-for="(opt, idx) in q.options" :key="idx">
+                  <el-checkbox disabled :label="opt.label" :value="opt.label" />
+                </div>
+              </el-checkbox-group>
             </div>
-
             <!-- 填空题/多行文本展示 -->
             <div v-else-if="q.type === 'input'" class="input-placeholder">
-              <el-input disabled placeholder="用户输入区域" />
+              <el-input disabled placeholder="" v-model="q.value as string" />
             </div>
             <div v-else-if="q.type === 'textarea'" class="input-placeholder">
-              <el-input disabled type="textarea" placeholder="用户输入区域" />
+              <el-input disabled type="textarea" placeholder="" v-model="q.value as string" />
             </div>
           </div>
         </div>
@@ -42,15 +121,19 @@
         <div>
           <span>备注: {{ viewData.remark ? viewData.remark : '暂无' }}</span>
         </div>
-      </div>
-    </div>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getQuestionnaire } from '@/api/system/Questionnaire';
+import { getQuestionnaire, getQuestionnaireAnswer, getQuestionnaireAnswerMain } from '@/api/system/Questionnaire';
 import { QuestionComponentItem } from '@/api/system/Questionnaire/type';
 import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+import QuestionnaireEdit from '@/views/system/Questionnaire/components/QuestionnaireEdit.vue';
+import Pagination from '@/components/Pagination/index.vue';
+import { UploadFilled } from '@element-plus/icons-vue';
 const viewLoading = ref(false);
 const viewData = ref({
   'id': '',
@@ -65,9 +148,21 @@ const viewData = ref({
   'endTime': '2026-04-09 00:00:00',
   'remark': ''
 });
-const router = useRouter();
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
 const route = useRoute();
 
+const activeTab = ref<'preview' | 'detail'>('preview');
+function handleTabClick(tab: 'preview' | 'detail') {
+  activeTab.value = tab;
+  if (activeTab.value === 'detail') {
+    getList();
+  }
+}
+
 const viewid = ref(null);
 // 组件库定义（用于获取类型名称）
 const componentList = [
@@ -103,9 +198,71 @@ function init() {
   });
 }
 init();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+type FormQuestionComponentItem = QuestionComponentItem & { value?: string | string[] };
+const form = ref({
+  id: '',
+  questionnaireId: '',
+  answerContent: [] as FormQuestionComponentItem[],
+  answerId: '',
+  answerName: '',
+  answerStatus: '',
+  content: [] as FormQuestionComponentItem[]
+});
+const list = ref([]);
+function getList() {
+  getQuestionnaireAnswer({
+    pageSize: queryParams.value.pageSize,
+    pageNum: queryParams.value.pageNum,
+    questionnaireId: viewid.value
+  }).then((res) => {
+    list.value = res.rows;
+    total.value = res.total;
+  });
+}
+function handleGetMain(id: string) {
+  getQuestionnaireAnswerMain(id).then((res) => {
+    form.value = res.data;
+    form.value.answerContent = (JSON.parse(res.data.answerContent) as QuestionComponentItem[]) ?? [];
+    form.value.content = (JSON.parse(res.data.content) as QuestionComponentItem[]) ?? [];
+    form.value.content.forEach((item) => {
+      const find = form.value.answerContent.find((i) => i.cid === item.cid);
+      if (find) {
+        item.value = find.value;
+      }
+    });
+    dialog.visible = true;
+    dialog.title = '问卷调查回答详情';
+    console.log(form.value);
+  });
+}
 </script>
 
 <style scoped lang="scss">
+.tabs {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  .tab-item {
+    font-weight: bold;
+    padding: 10px 10px;
+    cursor: pointer;
+    margin-right: 10px;
+    letter-spacing: 3px;
+    &:hover {
+      color: #409eff;
+    }
+    &.active {
+      color: #409eff;
+      border-bottom: 4px solid #409eff;
+    }
+  }
+}
+
 .titlebox {
   height: 50px;
   line-height: 50px;