From 4879058b6fb8fd51ba2b4d87f241defb7c9f04fc Mon Sep 17 00:00:00 2001 From: WXL (wul) <wl_5969728@163.com> Date: 星期四, 04 九月 2025 11:30:37 +0800 Subject: [PATCH] 测试完成 --- src/views/satisfaction.vue | 160 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 157 insertions(+), 3 deletions(-) diff --git a/src/views/satisfaction.vue b/src/views/satisfaction.vue index 44b6314..26585af 100644 --- a/src/views/satisfaction.vue +++ b/src/views/satisfaction.vue @@ -1,5 +1,44 @@ <template> <div class="questionnaire" :class="'survey-type-' + surveyType"> + <!-- 鍔犺浇鐘舵�� --> + <div v-if="loading" class="loading-state"> + <div class="loading-spinner"> + <i class="el-icon-loading"></i> + <p>闂嵎鍔犺浇涓�...</p> + </div> + </div> + + <!-- 鏃犳暟鎹姸鎬� --> + <div v-else-if="isEmptyData" class="empty-state"> + <div class="empty-content"> + <i class="el-icon-document" style="font-size: 64px; color: #909399"></i> + <h3>鏆傛棤闂嵎鏁版嵁</h3> + <p>褰撳墠娌℃湁鍙敤鐨勯棶鍗凤紝璇疯仈绯荤鐞嗗憳鎴栫◢鍚庨噸璇�</p> + <el-button + type="primary" + @click="loadSurveyData" + icon="el-icon-refresh" + > + 閲嶆柊鍔犺浇 + </el-button> + </div> + </div> + + <!-- 閿欒鐘舵�� --> + <div v-else-if="hasError" class="error-state"> + <div class="error-content"> + <i class="el-icon-warning" style="font-size: 64px; color: #f56c6c"></i> + <h3>鏁版嵁鍔犺浇澶辫触</h3> + <p>{{ errorMessage }}</p> + <el-button + type="primary" + @click="loadSurveyData" + icon="el-icon-refresh" + > + 閲嶆柊灏濊瘯 + </el-button> + </div> + </div> <div class="CONTENT" v-if="!accomplish"> <div class="preview-left"> <div class="toptitle"> @@ -178,7 +217,10 @@ param5: "", param6: "30001002", }, - + isEmptyData: false, // 鏂板锛氭棤鏁版嵁鐘舵�� + hasError: false, // 鏂板锛氶敊璇姸鎬� + loading: false, // 鏂板锛氬姞杞界姸鎬� + errorMessage: "", // 鏂板锛氶敊璇俊鎭� // 娴嬭瘯鏁版嵁 testData: { 1: { @@ -360,6 +402,10 @@ }, // 鍔犺浇璋冩煡鏁版嵁 loadSurveyData() { + this.loading = true; + this.isEmptyData = false; + this.hasError = false; + this.errorMessage = ""; // 璋冪敤鎺ュ彛鑾峰彇闂嵎鏁版嵁 // 鏍规嵁闂嵎绫诲瀷璁剧疆涓嶅悓鐨勫弬鏁� let encryptedParams = { @@ -385,6 +431,14 @@ if (res.code === 200) { if (res.data.result) { this.accomplish = res.data.result; + return; + } + if ( + !res.data.svyLibTemplateScriptVOS || + res.data.svyLibTemplateScriptVOS.length === 0 + ) { + this.isEmptyData = true; + this.$message.warning("鏆傛棤闂嵎鏁版嵁"); return; } // 澶勭悊鎺ュ彛杩斿洖鐨勬暟鎹� @@ -423,12 +477,20 @@ } } else { // 鎺ュ彛鏃犳暟鎹垨澶辫触锛屼娇鐢ㄦ祴璇曟暟鎹� - this.useTestData(this.surveyType); + // this.useTestData(this.surveyType); } }) .catch(() => { + console.error("鏁版嵁鑾峰彇澶辫触:", error); + this.hasError = true; + this.errorMessage = + error.message || "闂嵎鏁版嵁鍔犺浇澶辫触锛岃妫�鏌ョ綉缁滆繛鎺ュ悗閲嶈瘯"; + this.$message.error("鏁版嵁鍔犺浇澶辫触"); // 鎺ュ彛璋冪敤澶辫触锛屼娇鐢ㄦ祴璇曟暟鎹� - this.useTestData(this.surveyType); + // this.useTestData(this.surveyType); + }) + .finally(() => { + this.loading = false; }); }, handleDeptChange(value) { @@ -840,7 +902,99 @@ } } } +.loading-state { + display: flex; + justify-content: center; + align-items: center; + min-height: 60vh; + padding: 40px; + .loading-spinner { + text-align: center; + + .el-icon-loading { + font-size: 48px; + color: var(--primary-color); + margin-bottom: 16px; + animation: rotating 2s linear infinite; + } + + p { + color: #666; + font-size: 16px; + } + } +} + +.empty-state, +.error-state { + display: flex; + justify-content: center; + align-items: center; + min-height: 60vh; + padding: 40px; + + .empty-content, + .error-content { + text-align: center; + max-width: 400px; + + h3 { + color: #666; + font-size: 20px; + margin: 16px 0 12px; + font-weight: 500; + } + + p { + color: #999; + font-size: 14px; + margin-bottom: 24px; + line-height: 1.6; + } + } +} + +.error-state { + .error-content { + h3 { + color: #f56c6c; + } + } +} + +@keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* 鍝嶅簲寮忚皟鏁� */ +@media (max-width: 768px) { + .loading-state, + .empty-state, + .error-state { + padding: 20px; + min-height: 50vh; + + .el-icon-loading, + .el-icon-document, + .el-icon-warning { + font-size: 40px !important; + } + + h3 { + font-size: 18px !important; + } + + p { + font-size: 13px !important; + } + } +} ::v-deep { .el-checkbox-group { display: flex; -- Gitblit v1.9.3