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 | 379 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 346 insertions(+), 33 deletions(-) diff --git a/src/views/satisfaction.vue b/src/views/satisfaction.vue index cedc116..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"> @@ -7,6 +46,31 @@ <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5"> {{ surveyDescription }} </div> + </div> + <div v-if="showDeptSelect" class="dept-select-container"> + <el-form> + <el-form> + <el-form-item label="閫夋嫨绉戝"> + <el-select + v-model="selectedDept" + filterable + clearable + placeholder="璇烽�夋嫨绉戝鎴栬緭鍏ュ叧閿瘝鎼滅储" + @change="handleDeptChange" + popper-class="dept-select-dropdown" + > + <el-option + v-for="dept in filteredDeptList" + :key="dept.code" + :label="`${dept.name} (${dept.code})`" + :value="dept.name" + > + <span>{{ dept.name }}</span> + </el-option> + </el-select> + </el-form-item> + </el-form> + </el-form> </div> <el-divider></el-divider> @@ -90,7 +154,7 @@ <el-input type="textarea" :rows="3" - placeholder="璇疯緭鍏ユ偍鐨勬剰瑙佹垨寤鸿" + placeholder="璇疯緭鍏�" v-model="item.scriptResult" clearable > @@ -113,7 +177,7 @@ <div class="CONTENT" v-else> <div class="preview-lefts"> <div class="completion-message"> - <div class="thank-you">{{ this.accomplish||'鎰熻阿鎮ㄧ殑閰嶅悎!' }}</div> + <div class="thank-you">{{ this.accomplish || "鎰熻阿鎮ㄧ殑閰嶅悎!" }}</div> <div class="feedback-message">{{ completionMessage }}</div> </div> </div> @@ -125,6 +189,7 @@ import { getScriptByCondition, saveMYDQuestionAnswer, + WLgetDept, } from "@/api/AiCentre/index"; export default { @@ -134,8 +199,14 @@ surveyTitle: "", surveyDescription: "", questionList: [], + deptList: [], completionMessage: "", accomplish: false, + showDeptSelect: false, + selectedDept: null, + deptSearchText: "", // 淇濈暀鐢ㄤ簬鏈湴杩囨护 + deptList: [], + filteredDeptList: [], // 鍔犲瘑鍚庣殑鍙傛暟 encryptedParams: { @@ -143,8 +214,13 @@ param2: "", param3: "", param4: "", + param5: "", + param6: "30001002", }, - + isEmptyData: false, // 鏂板锛氭棤鏁版嵁鐘舵�� + hasError: false, // 鏂板锛氶敊璇姸鎬� + loading: false, // 鏂板锛氬姞杞界姸鎬� + errorMessage: "", // 鏂板锛氶敊璇俊鎭� // 娴嬭瘯鏁版嵁 testData: { 1: { @@ -283,29 +359,87 @@ // 浠庤矾鐢卞弬鏁拌幏鍙栧姞瀵嗗悗鐨勫弬鏁� this.encryptedParams.param1 = this.$route.query.param1 || - "DBohZ1ARKfFmCdKrBKQ6JW3ddPTtDpgSaRZaKtxBMTJ4FngT06Vy-VskiwDYJJRwfvkHrPIZlkafgZybobGtKQ=="; + "WOAq2QZd43E-qg-96SvuIFsn-sdRVxQNH4M82XhpXp_Ux4PFrPaqSFXcKaeA6oxEgNhPisA86LvU9kTAEz4xvQ=="; this.encryptedParams.param2 = this.$route.query.param2 || - "WQXniB7BIlizOwOQ4KZqITNrqWpLU3SD5vXdHLeYaviA-1T5Dtk70IJWAHbtcDUuYz-2ObYuMj4YKHfWhlCLzw=="; - this.encryptedParams.param3 = this.$route.query.param3 || null; - this.encryptedParams.param4 = this.$route.query.param4 || "1"; // 榛樿涓洪棬璇� + "XWeBh42RLYlNsMcomgw9UXhUPySkRP5EneWSueSq8F84qwYznU9heXuSx4tUMUtDvRnuJ86moJivy-kWQX12Rg=="; + this.encryptedParams.param5 = this.$route.query.param3 || "2"; // 1=浣忛櫌, 2=闂ㄨ瘖, 3=鎶曡瘔寤鸿 + this.encryptedParams.param6 = this.$route.query.param4 || "30001002"; - this.surveyType = parseInt(this.encryptedParams.param4) || 1; + this.surveyType = parseInt(this.encryptedParams.param5) || 2; // 鍔犺浇闂嵎鏁版嵁 this.loadSurveyData(); + // 鑾峰彇绉戝鍒楄〃 + this.WLgetDept(); }, + WLgetDept() { + // 璋冪敤鎺ュ彛鑾峰彇绉戝鏁版嵁 + WLgetDept(this.encryptedParams.param6).then((res) => { + this.deptList = Object.entries(res.data).map(([code, name]) => ({ + code, + name, + })); + this.filteredDeptList = [...this.deptList]; - // 鍔犺浇璋冩煡鏁版嵁 + if (this.surveyType === 3) { + this.showDeptSelect = true; + } + }); + }, + filterDeptList() { + if (!this.deptSearchText) { + this.filteredDeptList = [...this.deptList]; + return; + } + + const searchText = this.deptSearchText.toLowerCase(); + this.filteredDeptList = this.deptList.filter( + (dept) => + dept.name.toLowerCase().includes(searchText) || + dept.code.toLowerCase().includes(searchText) + ); + }, // 鍔犺浇璋冩煡鏁版嵁 loadSurveyData() { + this.loading = true; + this.isEmptyData = false; + this.hasError = false; + this.errorMessage = ""; // 璋冪敤鎺ュ彛鑾峰彇闂嵎鏁版嵁 - getScriptByCondition(this.encryptedParams) + // 鏍规嵁闂嵎绫诲瀷璁剧疆涓嶅悓鐨勫弬鏁� + let encryptedParams = { + param1: this.encryptedParams.param1, + }; + + // 鏍规嵁surveyType璁剧疆涓嶅悓鐨勫弬鏁� + switch (this.surveyType) { + case 1: // 浣忛櫌 + encryptedParams.param2 = this.encryptedParams.param2; + break; + case 2: // 闂ㄨ瘖 + encryptedParams.param3 = this.encryptedParams.param2; + break; + case 3: // 鎶曡瘔寤鸿 + encryptedParams.param4 = this.encryptedParams.param2; + break; + default: + encryptedParams.param3 = this.encryptedParams.param2; + } + getScriptByCondition(encryptedParams) .then((res) => { if (res.code === 200) { if (res.data.result) { this.accomplish = res.data.result; - return + return; + } + if ( + !res.data.svyLibTemplateScriptVOS || + res.data.svyLibTemplateScriptVOS.length === 0 + ) { + this.isEmptyData = true; + this.$message.warning("鏆傛棤闂嵎鏁版嵁"); + return; } // 澶勭悊鎺ュ彛杩斿洖鐨勬暟鎹� this.questionList = res.data.svyLibTemplateScriptVOS.map((item) => { @@ -317,14 +451,14 @@ // 鏍规嵁surveyType璁剧疆鏍囬鍜屾弿杩� switch (this.surveyType) { - case 1: // 闂ㄨ瘖 + case 2: // 闂ㄨ瘖 this.surveyTitle = "闂ㄨ瘖婊℃剰搴﹁皟鏌�"; this.surveyDescription = "浜茬埍鐨勬偅鑰咃紝鎰熻阿鎮ㄩ�夋嫨鎴戜滑鐨勫尰鐤楁湇鍔°�備负浜嗕笉鏂彁鍗囨湇鍔¤川閲忥紝璇锋偍鑺卞嚑鍒嗛挓鏃堕棿濉啓姝ら棶鍗枫��"; this.completionMessage = "鎰熻阿鎮ㄥ疂璐电殑鎰忚锛佹垜浠皢涓嶆柇鏀硅繘闂ㄨ瘖鏈嶅姟璐ㄩ噺锛屼负鎮ㄦ彁渚涙洿濂界殑鍖荤枟鏈嶅姟浣撻獙銆�"; break; - case 2: // 浣忛櫌 + case 1: // 浣忛櫌 this.surveyTitle = "浣忛櫌婊℃剰搴﹁皟鏌�"; this.surveyDescription = "浜茬埍鐨勬偅鑰呭強瀹跺睘锛屾劅璋㈡偍閫夋嫨鍦ㄦ垜闄綇闄㈡不鐤椼�備负浜嗘彁鍗囦綇闄㈡湇鍔¤川閲忥紝璇锋偍濉啓姝ら棶鍗枫��"; @@ -343,15 +477,26 @@ } } 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) { + this.selectedDept = value; + // 鍙互鍦ㄨ繖閲屾坊鍔犲叾浠栧鐞嗛�昏緫 + }, // 浣跨敤娴嬭瘯鏁版嵁 useTestData(surveyType) { const type = [1, 2, 3].includes(surveyType) ? surveyType : 1; @@ -376,7 +521,7 @@ const res = await saveMYDQuestionAnswer(submitData); if (res.code === 200) { - this.accomplish = false; + this.accomplish = "闂嵎宸叉彁浜�"; this.$message.success("鎻愪氦鎴愬姛锛佹劅璋㈡偍鐨勫弽棣堛��"); } else { this.$message.error(res.msg || "鎻愪氦澶辫触锛岃绋嶅悗鍐嶈瘯"); @@ -401,26 +546,39 @@ }, // 鍑嗗鎻愪氦鏁版嵁 - // 鍑嗗鎻愪氦鏁版嵁 prepareSubmitData() { + // 鍒涘缓绉戝閫夋嫨闂瀵硅薄 + const deptQuestion = { + scriptId: "dept_selection", // 鑷畾涔塈D + scriptType: 4, // 4琛ㄧず闂瓟绫诲瀷 + scriptContent: "閫夋嫨鐨勭瀹�", + scriptResult: this.selectedDept || "", // 瀛樺偍閫夋嫨鐨勭瀹ゅ悕绉� + required: false, // 闈炲繀濉� + sort: 999, + nextScriptno: "1", + }; + return { taskId: this.encryptedParams.param1, serialnum: this.encryptedParams.param2 || this.encryptedParams.param3, - mzzy: this.surveyType, // 1=闂ㄨ瘖, 2=浣忛櫌, 3=鎶曡瘔寤鸿 - svyLibTemplateScriptVOS: this.questionList.map((item) => { - return { - scriptId: item.scriptId, - scriptType: item.scriptType, - scriptResult: - item.scriptType === 2 - ? (item.scriptResult || []).join("&") - : item.scriptResult || "", - nextScriptno: item.nextScriptno, - score: item.score, - prompt: item.prompt, - ...item, - }; - }), + mzzy: this.surveyType, + svyLibTemplateScriptVOS: [ + deptQuestion, // 灏嗙瀹ら�夋嫨浣滀负绗竴涓棶棰� + ...this.questionList.map((item) => { + return { + scriptId: item.scriptId, + scriptType: item.scriptType, + scriptResult: + item.scriptType === 2 + ? (item.scriptResult || []).join("&") + : item.scriptResult || "", + nextScriptno: item.nextScriptno, + score: item.score, + prompt: item.prompt, + ...item, + }; + }), + ], excep: this.checkAbnormalOptions() ? 1 : 0, }; }, @@ -518,7 +676,70 @@ --theme-gradient: linear-gradient(135deg, #e53e3e, #f6ad55); } } +.dept-select-container { + margin: 20px 0; + padding: 20px; + background-color: #f8fafc; + border-radius: 8px; + border: 1px solid #e2e8f0; +} +/* 璋冩暣涓嬫媺閫夐」鏍峰紡 */ +.el-select-dropdown__item { + display: flex; + justify-content: space-between; +} +/* 涓嬫媺妗嗘牱寮忚皟鏁� */ +::v-deep .dept-select-dropdown { + max-height: 400px; /* 闄愬埗鏈�澶ч珮搴� */ + overflow-y: auto; /* 娣诲姞婊氬姩鏉� */ + + .el-select-dropdown__item { + display: flex; + justify-content: space-between; + padding: 0 20px; + height: auto; + line-height: 36px; + + span { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + /* 鍚嶇О閮ㄥ垎 */ + span:first-child { + width: 60%; + text-align: left; + } + + /* 缂栫爜閮ㄥ垎 */ + span:last-child { + width: 40%; + text-align: right; + } + } +} + +/* 绉诲姩绔�傞厤 */ +@media (max-width: 768px) { + ::v-deep .dept-select-dropdown { + max-width: 100vw; /* 闄愬埗鏈�澶у搴︿负瑙嗗彛瀹藉害 */ + width: auto !important; + left: 10px !important; + right: 10px !important; + + .el-select-dropdown__item { + span:first-child { + width: 50%; + } + span:last-child { + width: 50%; + } + } + } +} .CONTENT { max-width: 900px; margin: 0 auto; @@ -681,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