diff --git a/src/components/BpmnDesign/hooks/usePanel.ts b/src/components/BpmnDesign/hooks/usePanel.ts index 9f83945..0092be3 100644 --- a/src/components/BpmnDesign/hooks/usePanel.ts +++ b/src/components/BpmnDesign/hooks/usePanel.ts @@ -11,27 +11,25 @@ export default (ops: Options) => { const modeling = getModeling(); const moddle = getModdle(); + /** + * 当前节点类型 + */ const elementType = computed(() => { const bizObj = element.businessObject; return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type; }); + /** + * 用于控制面板字段显示与隐藏的配置 + */ const config = computed(() => showConfig[elementType.value] || {}); - const updateProperties = (properties: any) => { - modeling.updateProperties(element, properties); - }; - - const idChange = (newVal: string) => { - if (newVal) { - updateProperties({ id: newVal }); - } - }; - const nameChange = (newVal: string) => { - if (newVal) { - updateProperties({ name: newVal }); - } - }; + /** + * 创建一个节点 + * @param elementType 节点类型 + * @param properties 属性 + * @param parent 父节点 + */ const createModdleElement = (elementType: string, properties: any, parent: Element) => { const element = moddle.create(elementType, properties); parent && (element.$parent = parent); @@ -41,15 +39,19 @@ export default (ops: Options) => { /** * 获取扩展属性,如果不存在会自动创建 */ - const getExtensionElements = () => { + const getExtensionElements = (create = true) => { let extensionElements = element.businessObject.get('extensionElements'); - if (!extensionElements) { + if (!extensionElements && create) { extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject); modeling.updateModdleProperties(element, element.businessObject, { extensionElements }); } return extensionElements; }; + /** + * 获取extensionElements下的properties + * @param extensionElements 可选参数,默认获取当前Element下的extensionElements下的Properties + */ const getPropertiesElements = (extensionElements?) => { if (!extensionElements) { extensionElements = getExtensionElements(); @@ -64,6 +66,28 @@ export default (ops: Options) => { return propertiesElements; }; + /** + * 更新节点属性 + * @param properties 属性值 + */ + const updateProperties = (properties: any) => { + modeling.updateProperties(element, properties); + }; + + /** + * 更新节点信息 + * @param updateElement 需要更新的节点 + * @param properties 属性 + */ + const updateModdleProperties = (updateElement, properties: any) => { + modeling.updateModdleProperties(element, updateElement, properties); + }; + + /** + * 更新Property属性 + * @param name key值 + * @param value 值 + */ const updateProperty = (name: string, value: string) => { const propertiesElements = getPropertiesElements(); @@ -79,14 +103,23 @@ export default (ops: Options) => { return propertyElements; }; + const idChange = (newVal: string) => { + if (newVal) { + updateProperties({ id: newVal }); + } + }; + const nameChange = (newVal: string) => { + if (newVal) { + updateProperties({ name: newVal }); + } + }; return { elementType, showConfig: config, - modeling, - moddle, updateProperties, updateProperty, + updateModdleProperties, createModdleElement, idChange,