From 0bccc45dca0527bef40f5d9ed47c8e0d175cd40b Mon Sep 17 00:00:00 2001 From: WXL (wul) <wl_5969728@163.com> Date: 星期四, 11 九月 2025 14:57:52 +0800 Subject: [PATCH] 测试完成 --- src/views/satisfaction.vue | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 165 insertions(+), 11 deletions(-) diff --git a/src/views/satisfaction.vue b/src/views/satisfaction.vue index 44b6314..7f2f1dc 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"> @@ -11,12 +50,12 @@ <div v-if="showDeptSelect" class="dept-select-container"> <el-form> <el-form> - <el-form-item label="閫夋嫨绉戝"> + <el-form-item label="閫夋嫨璇鹃缁�"> <el-select v-model="selectedDept" filterable clearable - placeholder="璇烽�夋嫨绉戝鎴栬緭鍏ュ叧閿瘝鎼滅储" + placeholder="璇烽�夋嫨璇鹃缁勬垨杈撳叆鍏抽敭璇嶆悳绱�" @change="handleDeptChange" popper-class="dept-select-dropdown" > @@ -178,7 +217,10 @@ param5: "", param6: "30001002", }, - + isEmptyData: false, // 鏂板锛氭棤鏁版嵁鐘舵�� + hasError: false, // 鏂板锛氶敊璇姸鎬� + loading: false, // 鏂板锛氬姞杞界姸鎬� + errorMessage: "", // 鏂板锛氶敊璇俊鎭� // 娴嬭瘯鏁版嵁 testData: { 1: { @@ -328,11 +370,11 @@ // 鍔犺浇闂嵎鏁版嵁 this.loadSurveyData(); - // 鑾峰彇绉戝鍒楄〃 + // 鑾峰彇璇鹃缁勫垪琛� this.WLgetDept(); }, WLgetDept() { - // 璋冪敤鎺ュ彛鑾峰彇绉戝鏁版嵁 + // 璋冪敤鎺ュ彛鑾峰彇璇鹃缁勬暟鎹� WLgetDept(this.encryptedParams.param6).then((res) => { this.deptList = Object.entries(res.data).map(([code, name]) => ({ code, @@ -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) { @@ -485,12 +547,12 @@ // 鍑嗗鎻愪氦鏁版嵁 prepareSubmitData() { - // 鍒涘缓绉戝閫夋嫨闂瀵硅薄 + // 鍒涘缓璇鹃缁勯�夋嫨闂瀵硅薄 const deptQuestion = { scriptId: "dept_selection", // 鑷畾涔塈D scriptType: 4, // 4琛ㄧず闂瓟绫诲瀷 - scriptContent: "閫夋嫨鐨勭瀹�", - scriptResult: this.selectedDept || "", // 瀛樺偍閫夋嫨鐨勭瀹ゅ悕绉� + scriptContent: "閫夋嫨鐨勮棰樼粍", + scriptResult: this.selectedDept || "", // 瀛樺偍閫夋嫨鐨勮棰樼粍鍚嶇О required: false, // 闈炲繀濉� sort: 999, nextScriptno: "1", @@ -501,7 +563,7 @@ serialnum: this.encryptedParams.param2 || this.encryptedParams.param3, mzzy: this.surveyType, svyLibTemplateScriptVOS: [ - deptQuestion, // 灏嗙瀹ら�夋嫨浣滀负绗竴涓棶棰� + deptQuestion, // 灏嗚棰樼粍閫夋嫨浣滀负绗竴涓棶棰� ...this.questionList.map((item) => { return { scriptId: item.scriptId, @@ -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