|
|
@@ -0,0 +1,254 @@
|
|
|
+<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>
|
