wuye / webui

<template>
  <div class="new-oa-workflow-form">
    <el-card class="form-card">
      <div class="form-container" id="form-container">

        <div class="upload-wrapper">
          <upload-file ref="uploadFile" :call-back-listener="callBackListener" :call-back-function="callBackFunction" />
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
import UploadFile from '@/components/upload/uploadFile'
import { queryOaWorkflowForm, saveOaWorkflowFormData } from '@/api/oa/newOaWorkflowApi'
//import { Formio } from 'formiojs'

export default {
  name: 'NewOaWorkflowForm',
  components: { UploadFile },

  data() {
    return {
      formJson: {},
      fileName: '',
      realFileName: '',
      callBackListener: 'newOaWorkflowForm',
      callBackFunction: 'fileName',
      formViewer: null
    }
  },
  mounted() {
  },
  methods: {
    open(params) {
      this.flowId = params.flowId
      this.listOaWorkflowForm()
    },
    async listOaWorkflowForm() {
      try {
        const res = await queryOaWorkflowForm({
          page: 1,
          row: 1,
          flowId: this.flowId
        })
        console.log(res)
        this.formJson = JSON.parse(res.data[0].formJson)
        this.initForm()
      } catch (error) {
        console.error('获取表单配置失败:', error)
      }
    },
    initForm() {
      const container = document.getElementById('form-container')

      const form = window.FormViewer.createForm({
        container,
        schema: this.formJson
      });
      console.log(form);
      form.then((_from) => {
        _from.on('submit', (event) => {
          this.submitFormData(event.data, event.errors);
        })
      }).then((_from) => {
        console.log(_from);
        let node = document.querySelector('.fjs-form .uploadFile');
        const submitBtn = document.querySelector('.fjs-form .fjs-form-field-button');
        submitBtn.parentNode.insertBefore(node, submitBtn);
      });
    },
    async submitFormData(data, errors) {
      if (Object.keys(errors).length !== 0) return

      const formData = {
        ...data,
        flowId: this.flowId,
        fileName: this.fileName,
        realFileName: this.realFileName
      }

      try {
        const res = await saveOaWorkflowFormData(formData)
        if (res.code === 0) {
          this.$message.success(this.$t('common.submitSuccess'))
          this.resetForm()
          this.$emit('switch-tab', 'newOaWorkflowPool')
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        console.error('提交表单失败:', error)
        this.$message.error(this.$t('common.submitFailed'))
      }
    },
    resetForm() {
      if (this.formViewer) {
        this.formViewer.destroy()
      }
      this.$refs.uploadFile.clear()
      this.fileName = ''
      this.realFileName = ''
      this.formJson = {}
    },
    handleFileUpload(fileInfo) {
      this.fileName = fileInfo.fileName
      this.realFileName = fileInfo.realFileName
    }
  }
}
</script>

<style lang="scss">
.new-oa-workflow-form {
  .form-card {
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .form-container {

      .upload-wrapper {
        margin-bottom: 20px;
        padding: 20px;
        background-color: #fafafa;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
      }
    }
  }
}

// 全局Formio样式覆盖（不使用scoped）

// Formio Element UI 风格样式
.formio-form {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;

  .form-group {
    margin-bottom: 22px !important;
    text-align: left !important;
  }

  .form-control {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    padding: 0 15px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #606266 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  }

  .form-control:focus {
    border-color: #409eff !important;
    outline: none !important;
  }

  .form-control:disabled {
    background: #f5f7fa !important;
    color: #c0c4cc !important;
  }

  .col-form-label {
    font-weight: 500 !important;
    color: #606266 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .formio-errors {
    color: #f56c6c !important;
    font-size: 12px !important;
    margin-top: 4px !important;
  }

  button.btn {
    background-color: #409eff !important;
    border: 1px solid #409eff !important;
    border-radius: 4px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  }

  button.btn:hover {
    background-color: #66b1ff !important;
    border-color: #66b1ff !important;
  }

  button.btn:active {
    background-color: #3a8ee6 !important;
    border-color: #3a8ee6 !important;
  }

  button.btn:disabled {
    background-color: #c0c4cc !important;
    border-color: #c0c4cc !important;
    color: #fff !important;
    cursor: not-allowed !important;
  }
}
</style>