Yezhan/src/views/flowable/task/flowForm/index.vue

<template>
  <div>
  <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
    <!-- 保存按钮 -->
    <template #customSaveButton>
      <el-button type="text" @click="saveFormJson"><i class="el-icon-s-promotion" />保存</el-button>
    </template>
  </v-form-designer>

  <!--系统表单信息-->
  <el-dialog :title="formTitle" :visible.sync="formOpen" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="表单名称" prop="formName">
        <el-input v-model="form.formName" placeholder="请输入表单名称" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { addForm, getForm, updateForm } from '@/api/flowable/form'
import { StrUtil } from '@/utils/StrUtil'

export default {
  name: 'flowForm',
  data() {
    return {
      formTitle: '',
      formOpen: false,
      // 表单校验
      rules: {
        formName: [
          { required: true, message: '表单名称不能为空', trigger: 'blur' }
        ]
      },
      // 表单参数
      form: {
        formId: null,
        formName: null,
        formContent: null,
        remark: null
      },
      designerConfig: {
        generateSFCButton: false,
        exportCodeButton: false, // 是否显示导出代码按钮
        toolbarMaxWidth: 320,
        toolbarMinWidth: 300, // 设计器工具按钮栏最小宽度（单位像素）
        formHeader: false
      }
    }
  },
  mounted() {
    const formId = this.$route.query && this.$route.query.formId
    if (StrUtil.isNotBlank(formId)) {
      getForm(formId).then(res => {
        this.$nextTick(() => {
          // 加载表单json数据
          this.$refs.vfDesigner.setFormJson(JSON.parse(res.data.formContent))
        })
        this.form = res.data
      })
    } else {
      this.$nextTick(() => {
        // 加载表单json数据
        this.$refs.vfDesigner.setFormJson({ 'widgetList': [], 'formConfig': { 'modelName': 'formData', 'refName': 'vForm', 'rulesName': 'rules', 'labelWidth': 80, 'labelPosition': 'left', 'size': '', 'labelAlign': 'label-left-align', 'cssCode': '', 'customClass': '', 'functions': '', 'layoutType': 'PC', 'onFormCreated': '', 'onFormMounted': '', 'onFormDataChange': '', 'onFormValidate': '' }})
      })
    }
  },
  methods: {
    // 保存表单数据
    saveFormJson() {
      const formJson = this.$refs.vfDesigner.getFormJson()
      this.form.formContent = JSON.stringify(formJson)
      this.formOpen = true
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.formId != null) {
            updateForm(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.formOpen = false
            })
          } else {
            addForm(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.formOpen = false
            })
          }
          // 关闭当前标签页并返回上个页面
          const obj = { path: '/flowable/form', query: { t: Date.now() }}
          this.$tab.closeOpenPage(obj)
        }
      })
    },
    // 取消按钮
    cancel() {
      this.formOpen = false
      this.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
.el-container.main-container{
  background: #fff;
  margin-left: 0 !important;
}

</style>