Merge branch 'master' into zjw

imt-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -43,6 +43,7 @@ export default {
   },
   mounted() {
     this.xml = this.value;
+    console.log(this.xml)
     this.activityList = this.activityData;
     // 初始化
     this.initBpmnModeler();

imt-ui/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -16,9 +16,9 @@
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="formVisible" key="form">
         <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
-<!--        <element-form :id="elementId" :type="elementType" />-->
+        <new-element-form :id="elementId" :type="elementType" />
-        友情提示：使用 <router-link target="_blank" :to="{path:'/bpm/manager/form'}"><el-link type="danger">流程表单</el-link> </router-link>
+<!--        友情提示：使用 <router-link target="_blank" :to="{path:'/bpm/manager/form'}"><el-link type="danger">流程表单</el-link> </router-link>-->
-        替代，提供更好的表单设计功能
+<!--        替代，提供更好的表单设计功能-->
       </el-collapse-item>
       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
         <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务（审批人）</div>
@@ -59,6 +59,7 @@ import SignalAndMassage from "./signal-message/SignalAndMessage";
 import ElementListeners from "./listeners/ElementListeners";
 import ElementProperties from "./properties/ElementProperties";
 import ElementForm from "./form/ElementForm";
+import NewElementForm from "./form/NewElementForm.vue";
 import UserTaskListeners from "./listeners/UserTaskListeners";
 /**
  * 侧边栏
@@ -79,7 +80,8 @@ export default {
     ElementTask,
     NewElementTask,
     ElementOtherConfig,
-    ElementBaseInfo
+    ElementBaseInfo,
+    NewElementForm,
   },
   componentName: "MyPropertiesPanel",
   props: {

imt-ui/src/components/bpmnProcessDesigner/package/penal/form/NewElementForm.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="80px">
+      <el-form-item label="流程表单">
+        <el-select v-model="formKey" clearable @change="updateElementFormKey">
+          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import {getSimpleForms} from '@/api/bpm/form'
+
+export default {
+  name: "ElementForm",
+  props: {
+    id: String,
+    type: String
+  },
+  inject: {
+    prefix: "prefix",
+    width: "width"
+  },
+  data() {
+    return {
+      formList:[],
+      formKey: "",
+      businessKey: "",
+      optionModelTitle: "",
+      fieldList: [],
+      formFieldForm: {},
+      fieldType: {
+        long: "长整型",
+        string: "字符串",
+        boolean: "布尔类",
+        date: "日期类",
+        enum: "枚举类",
+        custom: "自定义类型"
+      },
+      formFieldIndex: -1, // 编辑中的字段， -1 为新增
+      formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
+      fieldModelVisible: false,
+      fieldOptionModelVisible: false,
+      fieldOptionForm: {}, // 当前激活的字段配置项数据
+      fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
+      fieldEnumList: [], // 枚举值列表
+      fieldConstraintsList: [], // 约束条件列表
+      fieldPropertiesList: [] // 绑定属性列表
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        val && val.length && this.$nextTick(() => this.resetFormList());
+      }
+    }
+  },
+  mounted() {
+    getSimpleForms().then(res=>{
+      this.formList = res.data;
+    })
+  },
+  methods: {
+    resetFormList() {
+      this.bpmnELement = window.bpmnInstances.bpmnElement;
+      this.formKey = this.bpmnELement.businessObject.formKey;
+      if (this.formKey.length > 0){
+        this.formKey = parseInt(this.formKey);
+      }
+      // 获取元素扩展属性 或者 创建扩展属性
+      this.elExtensionElements =
+        this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
+      // 获取元素表单配置 或者 创建新的表单配置
+      this.formData =
+        this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
+        window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
+
+      // 业务标识 businessKey， 绑定在 formData 中
+      this.businessKey = this.formData.businessKey;
+
+      // 保留剩余扩展元素，便于后面更新该元素对应属性
+      this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
+
+      // 复制原始值，填充表格
+      this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
+
+      // 更新元素扩展属性，避免后续报错
+      this.updateElementExtensions();
+    },
+    updateElementFormKey() {
+      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
+    },
+    updateElementBusinessKey() {
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
+    },
+    // 根据类型调整字段type
+    changeFieldTypeType(type) {
+      this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+    },
+
+    // 打开字段详情侧边栏
+    openFieldForm(field, index) {
+      this.formFieldIndex = index;
+      if (index !== -1) {
+        const FieldObject = this.formData.fields[index];
+        this.formFieldForm = JSON.parse(JSON.stringify(field));
+        // 设置自定义类型
+        this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+        // 初始化枚举值列表
+        field.type === "enum" && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
+        // 初始化约束条件列表
+        this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
+        // 初始化自定义属性列表
+        this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
+      } else {
+        this.formFieldForm = {};
+        // 初始化枚举值列表
+        this.fieldEnumList = [];
+        // 初始化约束条件列表
+        this.fieldConstraintsList = [];
+        // 初始化自定义属性列表
+        this.fieldPropertiesList = [];
+      }
+      this.fieldModelVisible = true;
+    },
+    // 打开字段 某个 配置项 弹窗
+    openFieldOptionForm(option, index, type) {
+      this.fieldOptionModelVisible = true;
+      this.fieldOptionType = type;
+      this.formFieldOptionIndex = index;
+      if (type === "property") {
+        this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
+        return (this.optionModelTitle = "属性配置");
+      }
+      if (type === "enum") {
+        this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
+        return (this.optionModelTitle = "枚举值配置");
+      }
+      this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
+      return (this.optionModelTitle = "约束条件配置");
+    },
+
+    // 保存字段 某个 配置项
+    saveFieldOption() {
+      if (this.formFieldOptionIndex === -1) {
+        if (this.fieldOptionType === "property") {
+          this.fieldPropertiesList.push(this.fieldOptionForm);
+        }
+        if (this.fieldOptionType === "constraint") {
+          this.fieldConstraintsList.push(this.fieldOptionForm);
+        }
+        if (this.fieldOptionType === "enum") {
+          this.fieldEnumList.push(this.fieldOptionForm);
+        }
+      } else {
+        this.fieldOptionType === "property" && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
+        this.fieldOptionType === "constraint" && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
+        this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
+      }
+      this.fieldOptionModelVisible = false;
+      this.fieldOptionForm = {};
+    },
+    // 保存字段配置
+    saveField() {
+      const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
+      const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
+      defaultValue && (Field.defaultValue = defaultValue);
+      datePattern && (Field.datePattern = datePattern);
+      // 构建属性
+      if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
+        const fieldPropertyList = this.fieldPropertiesList.map(fp => {
+          return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
+        });
+        Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
+      }
+      // 构建校验规则
+      if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
+        const fieldConstraintList = this.fieldConstraintsList.map(fc => {
+          return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
+        });
+        Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
+      }
+      // 构建枚举值
+      if (this.fieldEnumList && this.fieldEnumList.length) {
+        Field.values = this.fieldEnumList.map(fe => {
+          return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
+        });
+      }
+      // 更新数组 与 表单配置实例
+      if (this.formFieldIndex === -1) {
+        this.fieldList.push(this.formFieldForm);
+        this.formData.fields.push(Field);
+      } else {
+        this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
+        this.formData.fields.splice(this.formFieldIndex, 1, Field);
+      }
+      this.updateElementExtensions();
+      this.fieldModelVisible = false;
+    },
+
+    // 移除某个 字段的 配置项
+    removeFieldOptionItem(option, index, type) {
+      if (type === "property") {
+        this.fieldPropertiesList.splice(index, 1);
+        return;
+      }
+      if (type === "enum") {
+        this.fieldEnumList.splice(index, 1);
+        return;
+      }
+      this.fieldConstraintsList.splice(index, 1);
+    },
+    // 移除 字段
+    removeField(field, index) {
+      this.fieldList.splice(index, 1);
+      this.formData.fields.splice(index, 1);
+      this.updateElementExtensions();
+    },
+
+    updateElementExtensions() {
+      // 更新回扩展元素
+      const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
+        values: this.otherExtensions.concat(this.formData)
+      });
+      // 更新到元素上
+      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
+        extensionElements: newElExtensionElements
+      });
+    }
+  }
+};
+</script>

imt-ui/src/views/bpm/processInstance/create/index.vue

@@ -51,6 +51,11 @@
       </el-card>
     </div>
 
+    <!-- 流程模型图的预览 -->
+    <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
+    </el-dialog>
+
   </div>
 </template>
 
@@ -60,6 +65,7 @@ import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import {decodeFields} from "@/utils/formGenerator";
 import Parser from '@/components/parser/Parser'
 import {createProcessInstance} from "@/api/bpm/processInstance";
+import {getModel} from "@/api/bpm/model";
 
 // 流程实例的发起
 export default {
@@ -80,6 +86,7 @@ export default {
       },
 
       // BPMN 数据
+      showBpmnOpen: false,
       bpmnXML: null,
       bpmnControlForm: {
         prefix: "flowable"
@@ -96,6 +103,15 @@ export default {
     this.getList();
   },
   methods: {
+    /** 流程图的详情按钮操作 */
+    handleBpmnDetail(row) {
+      // 加载流程图
+      getProcessDefinitionBpmnXML(row.id).then(response => {
+        this.bpmnXML = response.data.bpmnXml;
+        // 弹窗打开
+        this.showBpmnOpen = true
+      })
+    },
     /** 查询流程定义列表 */
     getList() {
       this.loading = true;
@@ -122,7 +138,7 @@ export default {
 
         // 加载流程图
         getProcessDefinitionBpmnXML(row.id).then(response => {
-          this.bpmnXML = response.data
+          this.bpmnXML = response.data.bpmnXml;
         })
       } else if (row.formCustomCreatePath) {
         this.$router.push({ path: row.formCustomCreatePath});