Merge branch 'dev'

xiangpei

2025-03-02 8c9f4f20341274df1c2326a1ce7fbc59770afc65

 src/components/Process/panel/formPanel.vue

@@ -1,23 +1,39 @@
<template>
  <div>
    <el-form label-width="80px" size="small" @submit.native.prevent>
      <el-form-item label="流程表单">
        <el-select v-model="bpmnFormData.formKey" clearable class="m-2" placeholder="挂载节点表单" @clear="updateElementFormKey(null)" @change="updateElementFormKey">
          <el-option
              v-for="item in formList"
              :key="item.formId"
              :label="item.formName"
              :value="item.formId"
          />
        </el-select>
      </el-form-item>
          <el-form-item label="流程表单">
            <el-select v-model="bpmnFormData.formKey" clearable class="m-2" placeholder="挂载节点表单" @clear="updateElementFormKey(null)" @change="updateElementFormKey">
              <el-option
                v-for="item in formList"
                :key="item.formId"
                :label="item.formName"
                :value="item.formId"
              />
            </el-select>
            <el-button
              style="margin-left: 10px"
              size="mini"
              type="text"
              icon="el-icon-view"
              :disabled="checkState"
              @click="handleDetail()"
            >预览
            </el-button>
          </el-form-item>

    </el-form>

    <!--表单详情-->
    <el-dialog :title="formTitle" :visible.sync="formRenderOpen" width="60%" append-to-body>
      <v-form-render :form-data="formData" ref="vFormRef"/>
    </el-dialog>

  </div>
</template>

<script>

import { listAllForm } from '@/api/flowable/form'
import { listAllForm, getForm} from '@/api/flowable/form'
import {StrUtil} from "@/utils/StrUtil";
export default {
  name: "FormPanel",
@@ -30,11 +46,21 @@
  },
  data() {
    return {
      formTitle: "",
      formOpen: false,
      formRenderOpen: false,
      formData: {},
      formList: [], // 表单数据
      bpmnFormData: {}
      bpmnFormData: {
        formKey:null
      },
    }
  },

  computed:{
    checkState(){
      return this.bpmnFormData.formKey === null || this.bpmnFormData.formKey === undefined;
    }
  },
  /** 传值监听 */
  watch: {
    id: {
@@ -59,7 +85,23 @@
    resetFlowForm() {
      this.bpmnFormData.formKey = this.modelerStore.element.businessObject.formKey;
    },
    handleDetail() {
      getForm(this.bpmnFormData.formKey).then(res =>{
        this.formRenderOpen = true;
        this.formTitle = "表单详情";
        this.$nextTick(() => {
          // 回显数据
          this.$refs.vFormRef.setFormJson(JSON.parse(res.data.formContent))
          this.$nextTick(() => {
            // 表单禁用
            this.$refs.vFormRef.disableForm();
          })
        })

      })


    },
    updateElementFormKey(val) {
      this.init()
      if (StrUtil.isBlank(val)) {