xiangpei
2025-03-02 8c9f4f20341274df1c2326a1ce7fbc59770afc65
src/components/Process/panel/formPanel.vue
@@ -10,14 +10,30 @@
              :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)) {