cbjsxt-front-master/src/views/EntDeclaration/auditTaskManagement/components/SurveyFormDialog.vue

<template>
  <el-dialog
    title="调查表填报"
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
    :show-close="true"
    append-to-body
    :modal="false"
    @close="handleClose"
  >
    <el-form ref="surveyForm" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <!-- 动态生成表单字段 -->
        <el-col
          v-for="(field, index) in formFields"
          :key="field.prop || field.id || `field-${index}`"
          :span="field.colSpan || 12"
        >
          <el-form-item
            :label="field.label"
            :prop="field.prop"
            :rules="field.rules"
          >
            <!-- 文本输入框 -->
            <el-input
              v-if="field.type === 'input' || !field.type"
              v-model="form[field.prop]"
              :placeholder="field.placeholder || `请输入${field.label}`"
              :disabled="field.disabled || isViewMode"
            />

            <!-- 数字输入框 -->
            <el-input-number
              v-else-if="field.type === 'number'"
              v-model="form[field.prop]"
              :placeholder="field.placeholder || `请输入${field.label}`"
              :disabled="field.disabled || isViewMode"
              :min="field.min"
              :max="field.max"
              :precision="field.precision"
              style="width: 100%"
            />

            <!-- 下拉选择框（字典类型） -->
            <el-select
              v-else-if="field.type === 'select' && field.dictType"
              v-model="form[field.prop]"
              :placeholder="field.placeholder || `请选择${field.label}`"
              :disabled="field.disabled || isViewMode"
              style="width: 100%"
              :clearable="field.clearable !== false"
              :multiple="field.multiple"
            >
              <el-option
                v-for="item in getDictOptions(field.dictType)"
                :key="item.key || item.value"
                :label="item.name || item.label"
                :value="item.key || item.value"
              />
            </el-select>

            <!-- 下拉选择框（自定义选项） -->
            <el-select
              v-else-if="field.type === 'select' && field.options"
              v-model="form[field.prop]"
              :placeholder="field.placeholder || `请选择${field.label}`"
              :disabled="field.disabled || isViewMode"
              style="width: 100%"
              :clearable="field.clearable !== false"
              :multiple="field.multiple"
            >
              <el-option
                v-for="item in field.options"
                :key="item.value || item.key"
                :label="item.label || item.name"
                :value="item.value || item.key"
              />
            </el-select>

            <!-- 日期选择器 -->
            <el-date-picker
              v-else-if="field.type === 'date'"
              v-model="form[field.prop]"
              type="date"
              :placeholder="field.placeholder || `请选择${field.label}`"
              :disabled="field.disabled || isViewMode"
              style="width: 100%"
              :format="field.format || 'yyyy-MM-dd'"
              :value-format="field.valueFormat || 'yyyy-MM-dd'"
            />

            <!-- 日期时间选择器 -->
            <el-date-picker
              v-else-if="field.type === 'datetime'"
              v-model="form[field.prop]"
              type="datetime"
              :placeholder="field.placeholder || `请选择${field.label}`"
              :disabled="field.disabled || isViewMode"
              style="width: 100%"
              :format="field.format || 'yyyy-MM-dd HH:mm:ss'"
              :value-format="field.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
            />

            <!-- 年份选择器 -->
            <el-date-picker
              v-else-if="field.type === 'year'"
              v-model="form[field.prop]"
              type="year"
              :placeholder="field.placeholder || `请选择${field.label}`"
              :disabled="field.disabled || isViewMode"
              style="width: 100%"
              :format="field.format || 'yyyy'"
              :value-format="field.valueFormat || 'yyyy'"
            />

            <!-- 文本域 -->
            <el-input
              v-else-if="field.type === 'textarea'"
              v-model="form[field.prop]"
              type="textarea"
              :rows="field.rows || 3"
              :placeholder="field.placeholder || `请输入${field.label}`"
              :disabled="field.disabled || isViewMode"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { Message } from 'element-ui'
  import { dictMixin } from '@/mixins/useDict'
  import { saveSingleRecordSurvey } from '@/api/audit/survey'

  export default {
    name: 'SurveyFormDialog',
    mixins: [dictMixin],
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      surveyData: {
        type: Object,
        default: () => ({}),
      },
      // 表单字段配置
      // 格式: [
      //   {
      //     prop: 'institutionName', // 字段属性名
      //     label: '机构名称', // 字段标签
      //     type: 'input', // 字段类型: input, select, date, number, textarea等
      //     colSpan: 12, // 列宽，默认12（占一半）
      //     dictType: 'institutionNature', // 字典类型（如果type为select且使用字典）
      //     options: [], // 自定义选项（如果type为select且不使用字典）
      //     placeholder: '请输入机构名称',
      //     rules: [], // 验证规则
      //     defaultValue: '', // 默认值
      //     disabled: false, // 是否禁用
      //     clearable: true, // 是否可清空
      //     multiple: false, // 是否多选
      //   }
      // ]
      formFields: {
        type: Array,
        default: () => [],
      },
      // 是否查看模式
      isViewMode: {
        type: Boolean,
        default: false,
      },
      // 被监审单位ID
      auditedUnitId: {
        type: String,
        default: '',
      },
      // 上传记录ID
      uploadId: {
        type: String,
        default: '',
      },
      // 成本调查表模板ID
      surveyTemplateId: {
        type: String,
        default: '',
      },
      // 目录ID
      catalogId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        dialogVisible: false,
        form: {},
        rules: {},
        dictData: {}, // 初始化字典数据对象
      }
    },
    computed: {
      // 计算需要获取的字典类型
      dictTypes() {
        const types = new Set()
        this.formFields.forEach((field) => {
          if (field.type === 'select' && field.dictType) {
            types.add(field.dictType)
          }
        })
        return Array.from(types)
      },
    },
    watch: {
      visible: {
        handler(newVal) {
          this.dialogVisible = newVal
          if (newVal) {
            // 弹窗打开时初始化表单
            this.initForm()
          }
        },
        immediate: true,
      },
      dialogVisible(newVal) {
        if (!newVal) {
          this.$emit('update:visible', false)
        }
      },
      formFields: {
        handler() {
          // 字段配置变化时重新初始化
          if (this.dialogVisible) {
            this.initForm()
          }
        },
        deep: true,
      },
      surveyData: {
        handler() {
          // 详情数据变化时重新初始化表单（用于回显数据）
          if (this.dialogVisible) {
            this.initForm()
          }
        },
        deep: true,
      },
    },
    created() {
      // 初始化字典数据
      this.initDictData()
    },
    methods: {
      // 初始化字典数据
      initDictData() {
        if (this.dictTypes.length > 0) {
          // 初始化字典数据对象
          this.dictTypes.forEach((type) => {
            if (!this.dictData[type]) {
              this.$set(this.dictData, type, [])
            }
          })
          // 调用父级 mixin 的方法获取字典数据
          if (this.dictTypes.length > 0) {
            this.getDictType()
          }
        }
      },
      // 获取字典选项
      getDictOptions(dictType) {
        if (!this.dictData || !this.dictData[dictType]) {
          return []
        }
        return this.dictData[dictType] || []
      },
      // 初始化表单
      initForm() {
        const form = {}
        const rules = {}

        // 如果没有传入字段配置，使用默认配置
        const fields =
          this.formFields && this.formFields.length > 0
            ? this.formFields
            : this.getDefaultFormFields()

        fields.forEach((field) => {
          // 初始化表单值
          // 优先使用传入的详情数据（surveyData 中可能包含从 getSurveyDetail 接口返回的数据）
          if (
            this.surveyData &&
            this.surveyData[field.prop] !== undefined &&
            this.surveyData[field.prop] !== null &&
            this.surveyData[field.prop] !== ''
          ) {
            // 优先使用传入的数据
            form[field.prop] = this.surveyData[field.prop]
          } else if (field.defaultValue !== undefined) {
            // 其次使用默认值
            form[field.prop] = field.defaultValue
          } else {
            // 最后使用空值
            form[field.prop] = field.multiple ? [] : ''
          }

          // 初始化验证规则
          if (field.rules && Array.isArray(field.rules)) {
            rules[field.prop] = field.rules
          } else if (field.required) {
            // 如果字段标记为必填，自动添加必填验证
            rules[field.prop] = [
              {
                required: true,
                message: `请输入${field.label}`,
                trigger: field.type === 'select' ? 'change' : 'blur',
              },
            ]
          }
        })

        this.form = form
        this.rules = rules

        // 初始化字典数据
        this.initDictData()
      },
      // 获取默认表单字段配置（兼容旧版本）
      getDefaultFormFields() {
        return [
          {
            prop: 'institutionName',
            label: '机构名称',
            type: 'input',
            colSpan: 12,
            defaultValue: '幼儿园基本情况',
            required: true,
          },
          {
            prop: 'institutionNature',
            label: '机构性质',
            type: 'select',
            colSpan: 12,
            dictType: 'institutionNature', // 字典类型
            defaultValue: '公办',
            required: true,
          },
          {
            prop: 'institutionLevel',
            label: '机构评定等级',
            type: 'select',
            colSpan: 12,
            dictType: 'institutionLevel', // 字典类型
            defaultValue: '省一级',
            required: true,
          },
          {
            prop: 'educationMode',
            label: '机构办学方式',
            type: 'select',
            colSpan: 12,
            dictType: 'educationMode', // 字典类型
            defaultValue: '全日制',
            required: true,
          },
          {
            prop: 'institutionAddress',
            label: '机构地址',
            type: 'input',
            colSpan: 12,
            required: true,
          },
          {
            prop: 'formFiller',
            label: '机构填表人',
            type: 'input',
            colSpan: 12,
            required: true,
          },
          {
            prop: 'financialManager',
            label: '机构财务负责人',
            type: 'input',
            colSpan: 12,
            required: true,
          },
          {
            prop: 'contactPhone',
            label: '机构联系电话',
            type: 'input',
            colSpan: 12,
            required: true,
            rules: [
              {
                required: true,
                message: '请输入机构联系电话',
                trigger: 'blur',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号码',
                trigger: 'blur',
              },
            ],
          },
          {
            prop: 'formFillDate',
            label: '机构填表日期',
            type: 'date',
            colSpan: 12,
            required: true,
          },
        ]
      },
      handleClose() {
        this.dialogVisible = false
        this.$emit('update:visible', false)
      },
      handleCancel() {
        this.handleClose()
      },
      async handleSave() {
        this.$refs.surveyForm.validate(async (valid) => {
          if (valid) {
            try {
              // 判断是否有数据（编辑模式）：如果有 uploadId，说明是编辑已有数据
              const hasData = !!(
                this.uploadId ||
                this.surveyData.uploadId ||
                this.surveyData.id
              )

              // 将表单数据转换为接口需要的格式
              const saveData = this.formFields.map((field) => {
                const dataItem = {
                  auditedUnitId:
                    this.auditedUnitId || this.surveyData.auditedUnitId || '',
                  surveyTemplateId:
                    this.surveyTemplateId ||
                    this.surveyData.surveyTemplateId ||
                    '',
                  catalogId: this.catalogId || this.surveyData.catalogId || '',
                  rowid: field.prop, // 字段ID（对应 fixedFieldids）
                  rkey: field.label, // 字段名称（对应 fixedFields，即 label）
                  rvalue: this.form[field.prop] || '', // 字段值（表单输入的值）
                }

                // 如果有数据（编辑模式），添加 uploadId 字段
                if (hasData) {
                  dataItem.uploadId =
                    this.uploadId ||
                    this.surveyData.uploadId ||
                    this.surveyData.id ||
                    ''
                }

                return dataItem
              })

              console.log('保存表单数据:', saveData)

              // 调用保存接口
              const res = await saveSingleRecordSurvey(saveData)
              if (res && res.code === 200) {
                Message.success('保存成功')
                // 触发保存事件，将数据传递给父组件
                this.$emit('save', { ...this.form })
                // 触发刷新事件，通知父组件刷新列表
                this.$emit('refresh')
                this.handleClose()
              } else {
                Message.error(res.message || '保存失败')
              }
            } catch (err) {
              console.error('保存失败', err)
              Message.error(err.message || '保存失败')
            }
          } else {
            Message.error('请完善表单信息')
            return false
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .dialog-footer {
    text-align: center;
    .el-button {
      margin: 0 10px;
    }
  }

  ::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 20px;
    .el-form-item__label {
      // color: #409eff;
      font-weight: 500;
    }
  }
</style>