ylrz_his_scrm_companyUI/src/views/qw/collectionFully/fullyCollectionInfoDialog.vue

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" @close="handleClose" append-to-body>
    <el-form validate-on-rule-change :rules="rules" ref="form" :model="form" label-width="140px">
      <!-- 动态渲染问题区域 -->
      <div v-if="form.answers && form.answers.length > 0">
        <div style="margin-bottom: 20px;margin-top: 20px;" v-for="(answer, index) in form.answers" :key="index">
          <div style="margin-bottom: 20px;margin-top: 20px;">
            <span style="font-size: 15px;font-weight: bold; margin-left: 31px">{{ answer.title }}</span>
          </div>
          <div style="margin-left: 31px;">
            <!-- 修改：移除 @change 事件，添加 disabled 属性 -->
            <el-checkbox-group
              v-model="answer.value"
              size="mini"
              disabled>
              <div v-for="(option, optionIndex) in answer.options" :key="`${index}-${optionIndex}`" style="display: flex; align-items: center; margin-bottom: 10px;">
                <!-- 修改：添加 disabled 属性 -->
                <el-checkbox :label="option.value" style="margin-right: 10px; flex-shrink: 0;" disabled>
                  {{ option.name }}
                </el-checkbox>

                <!-- 备注输入区域（只读模式） -->
                <div v-if="option.open && isOptionSelected(answer, option)" style="display: inline-block;">
                  <!-- 修改：添加 readonly 属性，并移除 @blur 事件 -->
                  <el-input
                    v-model="option.remarkText"
                    placeholder="请输入备注信息"
                    size="mini"
                    maxlength="20"
                    show-word-limit
                    style="width: 200px; margin-left: 5px;"
                    readonly
                    :class="{ 'remark-required': !option.remarkText || option.remarkText.trim() === '' }"/>
                  <!-- 修改：只显示必填标识，但不显示错误提示文字 -->
                  <div v-if="!option.remarkText || option.remarkText.trim() === ''" class="remark-error-tip">此项为必填</div>
                </div>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </div>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <!-- 修改：移除确定按钮，因为不允许编辑 -->
    </div>
  </el-dialog>
</template>

<script>
import { getInfo, submitSalesInfo } from "@/api/qw/collectionPendingSales";

export default {
  name: "FullyCollectionInfoDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      required: true
    },
    userId: {
      type: Number,
      required: true
    },
    questionId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        id: null,
        questionId: null,
        packageId: null,
        payType: null,
        amount: null,
        isPackage: null,
        answers: [],
        userName: '',
        userPhoneFour: '',
        sex: null,
        age: null,
        allergy: '',
        remark: ''
      },
      privatePackageOptions: [],
      loading: false,
      rules: {}
    };
  },
  computed: {
    dialogTitle() {
      return "查看采集信息";
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val;
        if (val) {
          this.initDialog();
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // 验证需要备注的选项是否填写了备注 - 不需要了，因为只读模式
    validateRequiredRemarks() {
      // 只读模式下不需要验证
      return true;
    },

    // 监听复选框组的变化 - 不需要了
    onCheckboxGroupChange(answer) {
      // 只读模式下不需要处理变化
    },

    // 检查选项是否被选中
    isOptionSelected(answer, option) {
      return answer.value && answer.value.includes(option.value);
    },

    // 备注输入框失去焦点时的处理 - 不需要了
    onRemarkBlur(option) {
      // 只读模式下不需要处理
    },

    initDialog() {
      this.resetFormData();
      if (this.userId) {
        this.loadUserData();
      }
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate();
        }
      });
    },

    loadUserData() {
      this.loading = true;
      getInfo({userId: this.userId, questionId: this.questionId}).then(response => {
        const data = response.data;
        this.form = {
          id: data.id,
          questionId: data.questionId,
          packageId: data.packageId,
          payType: data.payType,
          amount: data.amount,
          isPackage: data.isPackage,
          answers: this.processAnswers(data.answers),
          userName: data.userName,
          userPhoneFour: data.userPhoneFour,
          sex: data.sex,
          age: data.age,
          allergy: data.allergy,
          remark: data.remark
        };
      }).catch(error => {
        this.$message.error('加载用户信息失败');
        console.error('加载用户信息失败:', error);
      }).finally(() => {
        this.loading = false;
      });
    },

    // 处理答案数据，确保选项有备注相关的字段
    processAnswers(answers) {
      if (!answers || !Array.isArray(answers)) {
        return [];
      }

      return answers.map(answer => {
        // 建立 value -> text 的映射，用于快速回填备注
        const remarksMap = {};
        if (answer.remarksList && Array.isArray(answer.remarksList)) {
          answer.remarksList.forEach(item => {
            remarksMap[item.value] = item.text;
          });
        }

        const processedOptions = (answer.options || []).map(option => ({
          ...option,
          remarkText: remarksMap[option.value] || ''  // 有备注则填充，否则为空
        }));

        return {
          ...answer,
          value: answer.value || [], // 确保 value 存在
          options: processedOptions
        };
      });
    },

    resetFormData() {
      this.form = {
        id: null,
        questionId: null,
        packageId: null,
        payType: null,
        amount: null,
        isPackage: null,
        answers: [],
        userName: '',
        userPhoneFour: '',
        sex: null,
        age: null,
        allergy: '',
        remark: ''
      };
    },

    // 提交表单 - 不需要了，因为只读模式
    submitForm() {
      // 只读模式下不需要提交功能
    },

    handleClose() {
      this.dialogVisible = false;
      this.$emit('update:visible', false);
      this.resetFormData();
    }
  }
};
</script>

<style scoped>
/* 修改样式，使只读状态更明显 */
.remark-required >>> .el-input__inner {
  border-color: #e4e7ed !important; /* 默认边框颜色 */
  background-color: #f5f7fa; /* 浅灰色背景 */
}

.remark-error-tip {
  color: #909399; /* 灰色字体，表示只读状态 */
  font-size: 12px;
  line-height: 1.5;
  margin-left: 5px;
}

/* 为只读复选框添加样式 */
.el-checkbox__input.is-disabled + .el-checkbox__label {
  color: #c0c4cc !important; /* 灰色文字 */
}
</style>