测试完成

WXL (wul)

20 小时以前 c3576dff24adbb52cf807c100afb63399e16f813

 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", // 自定义ID
        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;