wuye / webui

  <template>

    <div class="new-oa-workflow-form-edit-container">
      <el-card class="box-card">
        <div slot="header" class="flex justify-between">
          <span>{{ $t('newOaWorkflowFormEdit.title') }}</span>
        </div>

        <el-form ref="form" :model="formData" class="text-left" label-width="120px">

          <el-row :gutter="20">
            <el-col :span="24">
              <div v-for="(item, index) in newOaWorkflowFormEditInfo.components" :key="index">

                <!-- 文本框 -->

                <el-form-item v-if="item.type === 'textfield'" :label="item.label"

                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-input v-model="formData[item.key]" :placeholder="item.description" clearable />

                </el-form-item>
  

                <!-- 数字框 -->
                <el-form-item v-if="item.type === 'number'" :label="item.label" 
                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-input-number v-model="formData[item.key]" :placeholder="item.description" 
                    controls-position="right" style="width: 100%" />

                </el-form-item>
  

                <!-- 文本域 -->

                <el-form-item v-if="item.type === 'textarea'" :label="item.label"

                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-input v-model="formData[item.key]" type="textarea" :placeholder="item.description" 
                    :rows="4" />

                </el-form-item>
  

                <!-- 日期选择 -->

                <el-form-item v-if="item.type === 'textdate'" :label="item.label"

                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-date-picker v-model="formData[item.key]" type="date" :placeholder="item.description"
                    value-format="yyyy-MM-dd" style="width: 100%" />

                </el-form-item>
  

                <!-- 日期时间选择 -->

                <el-form-item v-if="item.type === 'textdatetime'" :label="item.label"

                  :prop="item.key"
                  :rules="getValidationRules(item)">

                  <el-date-picker v-model="formData[item.key]" type="datetime" :placeholder="item.description" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />

                </el-form-item>
  

                <!-- 单选框 -->
                <el-form-item v-if="item.type === 'radio'" :label="item.label"
                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-radio-group v-model="formData[item.key]">
                    <el-radio v-for="(option, optionIndex) in item.values" :key="optionIndex"
                      :label="option.value">
                      {{ option.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
  
                <!-- 下拉选择 -->
                <el-form-item v-if="item.type === 'select'" :label="item.label"
                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-select v-model="formData[item.key]" :placeholder="item.description" 
                    style="width: 100%" clearable>
                    <el-option v-for="(option, optionIndex) in item.values" :key="optionIndex"
                      :label="option.label" :value="option.value">
                    </el-option>
                  </el-select>
                </el-form-item>
  
                <!-- 复选框 - 修复数组类型问题 -->

                <el-form-item v-if="item.type === 'checkbox'" :label="item.label"

                  :prop="item.key"
                  :rules="getValidationRules(item)">
                  <el-checkbox-group v-model="formData[item.key]">
                    <el-checkbox v-for="(option, optionIndex) in item.values" :key="optionIndex"
                      :label="option.value">
                      {{ option.label }}
                    </el-checkbox>

                  </el-checkbox-group>
                </el-form-item>
              </div>
  

              <!-- 文件上传 -->
              <el-form-item :label="$t('common.file')">
                <div class="file-info" v-if="newOaWorkflowFormEditInfo.fileName">
                  <el-tag type="info">{{ newOaWorkflowFormEditInfo.fileName }}</el-tag>
                </div>
                <upload-file ref="uploadFile" @notify="handleFileUpload" />
              </el-form-item>

              <!-- 按钮区域 -->

              <div class="form-footer">

                <el-button type="primary" @click="_submitFormData" :loading="submitLoading">

                  <i class="el-icon-check"></i>
                  {{ $t('newOaWorkflowFormEdit.submit') }}
                </el-button>
                <el-button type="warning" @click="closeEditInfo">
                  {{ $t('newOaWorkflowFormEdit.cancel') }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import { queryOaWorkflowForm, queryOaWorkflowFormData, updateOaWorkflowFormData } from '@/api/oa/newOaWorkflowFormEditApi'

  import UploadFile from '@/components/upload/uploadFile'

  
  export default {
    name: 'NewOaWorkflowFormEditList',
    components: {
      UploadFile
    },
    data() {
      return {
        newOaWorkflowFormEditInfo: {
          formJson: {},
          components: [],
          conditions: {},
          flowId: '',
          id: '',
          fileName: '',
          realFileName: ''

        },
        formData: {}, // 新增：用于表单数据绑定
        submitLoading: false

      }
    },
    created() {
      this.newOaWorkflowFormEditInfo.flowId = this.$route.query.flowId
      this.newOaWorkflowFormEditInfo.id = this.$route.query.id
      this._listOaWorkflowFormEdit(1, 100)
    },
    methods: {
      async _listOaWorkflowFormEdit(page, rows) {
        try {
          const params = {
            page,
            row: rows,
            flowId: this.newOaWorkflowFormEditInfo.flowId
          }
  
          const { data } = await queryOaWorkflowForm(params)
          const formData = JSON.parse(data[0].formJson)
          this.newOaWorkflowFormEditInfo.formJson = formData
          this.newOaWorkflowFormEditInfo.components = formData.components

          
          // 初始化表单数据
          this.initFormData()
          

          this._listOaWorkflowDetails()
        } catch (error) {
          console.error('获取表单数据失败:', error)

          this.$message.error('获取表单数据失败')

        }
      },

  
      initFormData() {
        // 初始化表单数据对象
        this.formData = {}
        this.newOaWorkflowFormEditInfo.components.forEach(item => {
          if (item.type !== 'button' && item.type !== 'text') {
            if (item.type === 'checkbox') {
              // 确保复选框的值是数组类型
              this.$set(this.formData, item.key, [])
            } else if (item.type === 'radio' || item.type === 'select') {
              this.$set(this.formData, item.key, item.values && item.values.length > 0 ? item.values[0].value : '')
            } else {
              this.$set(this.formData, item.key, '')
            }
          }
        })
      },
  

      async _listOaWorkflowDetails() {
        try {
          const params = {
            page: 1,
            row: 1,
            id: this.newOaWorkflowFormEditInfo.id,
            flowId: this.newOaWorkflowFormEditInfo.flowId
          }
  
          const { data } = await queryOaWorkflowFormData(params)
          const detailData = data[0]
  

          // 更新表单数据

          this.newOaWorkflowFormEditInfo.components.forEach(item => {

            if (item.type !== 'button' && item.type !== 'text') {
              const value = detailData[item.key]
              if (value !== undefined && value !== null) {
                if (item.type === 'checkbox') {
                  // 确保复选框数据是数组类型
                  if (Array.isArray(value)) {
                    this.$set(this.formData, item.key, value)
                  } else if (typeof value === 'string' && value) {
                    // 如果是字符串，转换为数组
                    this.$set(this.formData, item.key, [value])
                  } else {
                    this.$set(this.formData, item.key, [])
                  }
                } else {
                  this.$set(this.formData, item.key, value)
                }
              }
            }

          })
  

          // 处理文件数据
          if (detailData.files && detailData.files.length > 0) {

            this.newOaWorkflowFormEditInfo.fileName = detailData.files[0].fileName
            this.newOaWorkflowFormEditInfo.realFileName = detailData.files[0].realFileName

            this.$nextTick(() => {
              if (this.$refs.uploadFile) {
                this.$refs.uploadFile.notifyVedio(detailData.files[0].fileName)
              }
            })

          }
        } catch (error) {
          console.error('获取表单详情失败:', error)

          this.$message.error('获取表单详情失败')

        }
      },

  
      getValidationRules(item) {
        const rules = []
        if (item.validate && item.validate.required) {
          rules.push({
            required: true,
            message: `${item.label}不能为空`,
            trigger: 'blur'
          })
        }
        return rules
      },
  

      async _submitFormData() {
        try {

          // 表单验证
          await this.$refs.form.validate()
          
          this.submitLoading = true
          

          const formData = {
            id: this.newOaWorkflowFormEditInfo.id,
            flowId: this.newOaWorkflowFormEditInfo.flowId,
            fileName: this.newOaWorkflowFormEditInfo.fileName,

            realFileName: this.newOaWorkflowFormEditInfo.realFileName,
            

          }
  

          // 收集表单数据
          this.newOaWorkflowFormEditInfo.components.forEach(item => {

            if (item.type !== 'button' && item.type !== 'text') {

              formData[item.key] = this.formData[item.key]

              if (item.type === 'checkbox') {

                // 复选框提交时取第一个值或空字符串
                formData[item.key] = this.formData[item.key] && this.formData[item.key].length > 0 
                  ? this.formData[item.key][0] 
                  : ''

              }
            }
          })
  
          const res = await updateOaWorkflowFormData(formData)
          if (res.code === 0) {

            this.$message.success(this.$t('common.operationSuccess'))

            this.closeEditInfo()
          } else {

            this.$message.error(res.msg || this.$t('newOaWorkflowFormEdit.submitError'))

          }
        } catch (error) {

          if (error.message) {
            // 表单验证错误
            return
          }

          console.error('提交表单失败:', error)
          this.$message.error(this.$t('newOaWorkflowFormEdit.submitError'))

        } finally {
          this.submitLoading = false

        }
      },

      closeEditInfo() {
        this.$router.go(-1)

      },
  
      handleFileUpload(data) {
        this.newOaWorkflowFormEditInfo.fileName = data.fileName
        this.newOaWorkflowFormEditInfo.realFileName = data.realFileName

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .new-oa-workflow-form-edit-container {
    padding: 20px;
  
    .box-card {
      margin-bottom: 20px;
    }
  
    .form-footer {
      margin-top: 20px;
      text-align: right;
    }
  
    .el-form-item {
      margin-bottom: 22px;
    }

  
    .file-info {
      margin-bottom: 10px;
    }

  }
  </style>