Merge branch 'future/flowable' of https://gitee.com/JavaLionLi/plus-ui into future/flowable

src/components/BpmnDesign/hooks/usePanel.ts

@@ -21,10 +21,34 @@ export default (ops: Options) => {
     modeling.updateProperties(element, properties);
   };
 
+  const idChange = (newVal: string) => {
+    if (newVal) {
+      updateProperties({ id: newVal });
+    }
+  };
+  const nameChange = (newVal: string) => {
+    if (newVal) {
+      updateProperties({ name: newVal });
+    }
+  };
+  const documentationChange = (newVal: string) => {
+    if (newVal) {
+      const documentationElement = modeler.get('moddle').create('bpmn:Documentation', { text: newVal });
+      updateProperties({ documentation: [documentationElement] });
+    } else {
+      const elements = element.businessObject;
+      delete elements.documentation;
+      updateProperties({ process: elements });
+    }
+  };
+
   return {
     elementType,
     showConfig: config,
 
-    updateProperties
+    updateProperties,
+    idChange,
+    nameChange,
+    documentationChange
   };
 };

src/components/BpmnDesign/hooks/useParseElement.ts

@@ -1,12 +1,19 @@
+import { Ref } from 'vue';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+
 interface Options {
   modeler: any;
   element: any;
 }
-export default <T>(ops: Options) => {
+
+interface Data {
+  id: string;
+}
+
+export default <T extends Data>(ops: Options) => {
   const { modeler, element } = ops;
 
-  const formData = ref<T>();
+  const formData = ref<any>({});
-
   const parse = () => {
     const result = {
       ...element.businessObject,
@@ -32,8 +39,12 @@ export default <T>(ops: Options) => {
     return formData;
   };
 
+  onBeforeMount(() => {
+    parse();
+  });
+
   return {
     parse,
-    formData
+    formData: formData as Ref<T>
   };
 };

src/components/BpmnDesign/panel/ProcessPanel.vue

@@ -7,13 +7,13 @@
         </el-select>
       </el-form-item>
       <el-form-item label="流程标识" prop="id">
-        <el-input v-model="formData.id"></el-input>
+        <el-input v-model="formData.id" @change="idChange"></el-input>
       </el-form-item>
       <el-form-item label="流程名称" prop="name">
-        <el-input v-model="formData.name"></el-input>
+        <el-input v-model="formData.name" @change="nameChange"></el-input>
       </el-form-item>
-      <el-form-item label="节点描述" prop="description">
+      <el-form-item label="节点描述" prop="documentation">
-        <el-input v-model="formData.documentation"></el-input>
+        <el-input v-model="formData.documentation" @change="documentationChange"></el-input>
       </el-form-item>
       <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
       <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
@@ -21,10 +21,11 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ProcessPanel">
+<script setup lang="ts">
 import ExecutionListener from './property/ExecutionListener.vue';
 import { ProcessPanel } from 'bpmnDesign';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -41,6 +42,10 @@ const { parse, formData } = useParseElement<ProcessPanel>({
   modeler: props.modeler,
   element: toRaw(props.element)
 });
+const { idChange, nameChange, documentationChange } = usePanel({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
 
 // const formData = ref<ProcessPanel>({
 //   processCategory: '',
@@ -54,10 +59,6 @@ const formRules = ref<ElFormRules>({
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
-
-onBeforeMount(() => {
-  parse();
-});
 </script>
 
 <style scoped lang="scss"></style>

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -4,19 +4,16 @@
       <el-form-item prop="id" label="节点 id">
         <el-input v-model="formData.id" placeholder="请输入"> </el-input>
       </el-form-item>
-      <el-form-item label="任务监听器">
+      <el-form-item label="任务监听器" style="margin-bottom: 0"> </el-form-item>
-        <el-badge :value="taskListenerCount">
+      <TaskListener :modeler="modeler" :element="element"></TaskListener>
-          <el-button @click="taskListenerRef.openDialog()">编辑</el-button>
-        </el-badge>
-      </el-form-item>
     </el-form>
-
-    <TaskListener ref="taskListenerRef" :modeler="modeler" :element="element" @close="refreshTaskListener"></TaskListener>
   </div>
 </template>
-<script setup lang="ts" name="TaskPanel">
+<script setup lang="ts">
 import showConfig from '@/components/BpmnDesign/assets/showConfig';
 import TaskListener from './property/TaskListener.vue';
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import { ProcessPanel } from 'bpmnDesign';
 
 interface PropType {
   modeler: any;
@@ -26,24 +23,10 @@ interface PropType {
 const props = withDefaults(defineProps<PropType>(), {
   categorys: () => []
 });
-
+const { parse, formData } = useParseElement<ProcessPanel>({
-const elementType = computed(() => {
+  modeler: props.modeler,
-  const bizObj = props.element.businessObject;
+  element: toRaw(props.element)
-  return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
 });
-const config = computed(() => showConfig[elementType.value] || {});
-const taskListenerRef = ref<InstanceType<typeof TaskListener>>();
-const taskListenerCount = ref(0);
-const formData = ref({});
-
-const refreshTaskListener = (count?: number) => {
-  if (count) {
-    taskListenerCount.value = count;
-  } else {
-    taskListenerCount.value =
-      props.element.businessObject.extensionElements?.values?.filter((item) => item.$type === 'flowable:TaskListener').length ?? 0;
-  }
-};
 </script>
 
 <style lang="scss" scoped></style>

src/components/BpmnDesign/panel/property/ExecutionListener.vue

@@ -15,8 +15,6 @@
       keep-source
       :data="tableData"
       :menu-config="menuConfig"
-      :edit-rules="tableRules"
-      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
       @cell-dblclick="cellDBLClickEvent"
       @menu-click="contextMenuClickEvent"
     >
@@ -97,7 +95,7 @@ const initData: ExecutionListenerVO = {
   className: '',
   params: []
 };
-const formData = reactive<ExecutionListenerVO>(initData);
+const formData = ref<ExecutionListenerVO>(initData);
 
 const selectRow = ref<ExecutionListenerVO | null>();
 const formDialog = useDialog({
@@ -129,11 +127,11 @@ const submitEvent = async () => {
     if (validate && !error) {
       const $table = tableRef.value;
       if ($table) {
-        formData.params = listenerParamRef.value.getTableData();
+        formData.value.params = listenerParamRef.value.getTableData();
         if (selectRow.value) {
-          Object.assign(selectRow.value, formData);
+          Object.assign(selectRow.value, formData.value);
         } else {
-          $table.insertAt({ ...formData }, -1);
+          $table.insertAt({ ...formData.value }, -1);
         }
         updateElement();
         formDialog.closeDialog();
@@ -155,13 +153,13 @@ const removeSelectRowEvent = async () => {
   }
 };
 const insertEvent = async () => {
-  Object.assign(formData, initData);
+  Object.assign(formData.value, initData);
   selectRow.value = null;
   formDialog.openDialog();
 };
 
 const editEvent = (row: ExecutionListenerVO) => {
-  Object.assign(formData, row);
+  Object.assign(formData.value, row);
   selectRow.value = row;
   formDialog.openDialog();
 };
@@ -258,6 +256,38 @@ const eventSelect = [
   { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: 'end', value: 'end' },
   { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: 'take', value: 'take' }
 ];
+
+const initTableData = () => {
+  tableData.value =
+    props.element.businessObject.extensionElements?.values
+      .filter((item) => item.$type === 'flowable:ExecutionListener')
+      .map((item) => {
+        let type;
+        if ('class' in item) type = 'class';
+        if ('expression' in item) type = 'expression';
+        if ('delegateExpression' in item) type = 'delegateExpression';
+        return {
+          event: item.event,
+          type: type,
+          className: item[type],
+          params:
+            item.fields?.map((field) => {
+              let fieldType;
+              if ('stringValue' in field) fieldType = 'stringValue';
+              if ('expression' in field) fieldType = 'expression';
+              return {
+                name: field.name,
+                type: fieldType,
+                value: field[fieldType]
+              };
+            }) ?? []
+        };
+      }) ?? [];
+};
+
+onMounted(() => {
+  initTableData();
+});
 </script>
 
 <style scoped lang="scss">

src/components/BpmnDesign/panel/property/ListenerParam.vue

@@ -45,7 +45,7 @@
   </vxe-table>
 </template>
 
-<script setup lang="ts" name="ListenerParam">
+<script setup lang="ts">
 import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { ParamVO } from 'bpmnDesign';
 import useDialog from '@/hooks/useDialog';

src/components/BpmnDesign/panel/property/TaskListener.vue

@@ -1,99 +1,82 @@
 <template>
   <div>
+    <vxe-toolbar>
+      <template #buttons>
+        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
+        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      ref="tableRef"
+      size="mini"
+      height="100px"
+      border
+      show-overflow
+      keep-source
+      :data="tableData"
+      :menu-config="menuConfig"
+      @cell-dblclick="cellDBLClickEvent"
+      @menu-click="contextMenuClickEvent"
+    >
+      <vxe-column type="seq" width="40"></vxe-column>
+      <vxe-column field="event" title="事件" min-width="100px">
+        <template #default="slotParams">
+          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="type" title="类型" min-width="100px">
+        <template #default="slotParams">
+          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
+    </vxe-table>
+
     <el-dialog
-      v-model="visible"
+      v-model="formDialog.visible.value"
-      :title="title"
+      :title="formDialog.title.value"
-      width="900px"
+      width="600px"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       :show-close="false"
       append-to-body
     >
-      <vxe-toolbar>
+      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="90px">
-        <template #buttons>
+        <el-form-item label="事件" prop="event">
-          <el-button icon="Plus" @click="insertRow">新增</el-button>
+          <el-select v-model="formData.event">
-        </template>
+            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-      </vxe-toolbar>
+          </el-select>
-      <vxe-table
+        </el-form-item>
-        ref="tableRef"
+        <el-form-item label="类型" prop="type">
-        height="300px"
+          <el-select v-model="formData.type">
-        border
+            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-        show-overflow
+          </el-select>
-        keep-source
+        </el-form-item>
-        :data="tableData"
+        <el-form-item label="Java 类名" prop="className">
-        :edit-rules="tableRules"
+          <el-input v-model="formData.className" type="text"></el-input>
-        :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
+        </el-form-item>
-      >
+      </el-form>
-        <vxe-column type="seq" width="40"></vxe-column>
+      <el-tabs type="border-card">
-        <vxe-column field="event" title="事件" :edit-render="{}">
+        <el-tab-pane label="参数">
-          <template #default="slotParams">
+          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
-            <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
+        </el-tab-pane>
-          </template>
+      </el-tabs>
-          <template #edit="slotParams">
-            <vxe-select v-model="slotParams.row.event">
-              <vxe-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-column>
-        <vxe-column field="type" title="类型" :edit-render="{}">
-          <template #default="slotParams">
-            <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-          </template>
-          <template #edit="slotParams">
-            <vxe-select v-model="slotParams.row.type">
-              <vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-column>
-
-        <vxe-column field="className" title="Java 类名" :edit-render="{}">
-          <template #edit="slotParams">
-            <vxe-input v-model="slotParams.row.className" type="text"></vxe-input>
-          </template>
-        </vxe-column>
-        <vxe-column title="参数" width="100" show-overflow align="center">
-          <template #default="slotParams">
-            <el-badge :value="slotParams.row.params ? slotParams.row.params.length : 0" type="primary">
-              <el-button size="small" @click="configParam(slotParams.rowIndex)">配置</el-button>
-            </el-badge>
-          </template>
-        </vxe-column>
-        <vxe-column title="操作" width="100" show-overflow align="center">
-          <template #default="slotParams">
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
-            </el-tooltip>
-          </template>
-        </vxe-column>
-      </vxe-table>
-
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
+          <el-button @click="formDialog.closeDialog">取 消</el-button>
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitEvent">确 定</el-button>
         </div>
       </template>
     </el-dialog>
-
-    <ListenerParam
-      ref="listenerParamRef"
-      @update-data="
-        (data: ParamVO[]) => {
-          tableData[currentIndex].params = data;
-        }
-      "
-    />
   </div>
 </template>
 <script setup lang="ts">
 import ListenerParam from './ListenerParam.vue';
-import { VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import { ParamVO, TaskListenerVO } from 'bpmnDesign';
+import { TaskListenerVO } from 'bpmnDesign';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
 
-const emit = defineEmits(['close']);
-
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
@@ -108,87 +91,97 @@ const props = withDefaults(defineProps<PropType>(), {
 const { title, visible, openDialog, closeDialog } = useDialog({
   title: '任务监听器'
 });
+const selectRow = ref<TaskListenerVO | null>();
+const formDialog = useDialog({
+  title: selectRow.value ? '编辑&保存' : '新增&保存'
+});
 const { showConfig, elementType, updateProperties } = usePanel({
   modeler: props.modeler,
   element: toRaw(props.element)
 });
-
+const initData: TaskListenerVO = {
+  event: '',
+  type: '',
+  className: '',
+  name: '',
+  params: []
+};
 const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
 const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
+const formRef = ref<ElFormInstance>();
+
+const formData = ref<TaskListenerVO>(initData);
 const currentIndex = ref(0);
 const tableData = ref<TaskListenerVO[]>([]);
-const showParamDialog = ref(false);
 const tableRules = ref<VxeTablePropTypes.EditRules>({
   event: [{ required: true, message: '请选择', trigger: 'blur' }],
   type: [{ required: true, message: '请选择', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }],
   className: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
-  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
-];
-const eventSelect = [
-  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: 'create', value: 'create' },
-  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: 'assignment', value: 'assignment' },
-  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: 'complete', value: 'complete' },
-  { id: '68801972-85f1-482f-bd86-1fad015c26ed', label: 'delete', value: 'delete' }
-];
 
-const configParam = (i: number) => {
+const submitEvent = async () => {
-  currentIndex.value = i;
+  const error = await listenerParamRef.value.validate();
-  showParamDialog.value = true;
+  await formRef.value.validate((validate) => {
-  listenerParamRef.value.openDialog();
+    if (validate && !error) {
-};
-const insertRow = async () => {
       const $table = tableRef.value;
       if ($table) {
-    const { row: newRow } = await $table.insertAt(
+        formData.value.params = listenerParamRef.value.getTableData();
-      {
+        if (selectRow.value) {
-        className: '',
+          Object.assign(selectRow.value, formData.value);
-        type: '',
+        } else {
-        name: '',
+          $table.insertAt({ ...formData.value }, -1);
-        event: '',
-        params: []
-      },
-      -1
-    );
-    // 插入一条数据并触发校验
-    await $table.validate(newRow);
         }
+        updateElement();
+        formDialog.closeDialog();
+      }
+    }
+  });
 };
 
-const removeRow = async (row: TaskListenerVO) => {
+const insertEvent = async () => {
+  Object.assign(formData.value, initData);
+  selectRow.value = null;
+  formDialog.openDialog();
+};
+
+const editEvent = (row: TaskListenerVO) => {
+  Object.assign(formData.value, row);
+  selectRow.value = row;
+  formDialog.openDialog();
+};
+const removeEvent = async (row: TaskListenerVO) => {
   await proxy?.$modal.confirm('您确定要删除该数据?');
   const $table = tableRef.value;
   if ($table) {
     await $table.remove(row);
-  }
-};
-const submitForm = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const errMap = await $table.validate(true);
-    if (errMap) {
-      proxy.$modal.msgError('校验不通过');
-    } else {
     updateElement();
-      visible.value = false;
-      emit('close', tableData.value.length);
-    }
   }
 };
 
+const removeSelectRowEvent = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const selectCount = $table.getCheckboxRecords().length;
+    if (selectCount === 0) {
+      proxy?.$modal.msgWarning('请选择行');
+    } else {
+      await $table.removeCheckboxRow();
+      updateElement();
+    }
+  }
+};
 const updateElement = () => {
-  if (tableData.value.length) {
+  const $table = tableRef.value;
+  const data = $table.getTableData().fullData;
+  if (data.length) {
     let extensionElements = props.element.businessObject.get('extensionElements');
     if (!extensionElements) {
       extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements');
     }
     // 清除旧值
     extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
-    tableData.value.forEach((item) => {
+    data.forEach((item) => {
       const taskListener = props.modeler.get('moddle').create('flowable:TaskListener');
       taskListener['event'] = item.event;
       taskListener[item.type] = item.className;
@@ -197,9 +190,6 @@ const updateElement = () => {
           const fieldElement = props.modeler.get('moddle').create('flowable:Field');
           fieldElement['name'] = field.name;
           fieldElement[field.type] = field.value;
-          // 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
-          // const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
-          // fieldElement[field.type] = valueElement
           taskListener.get('fields').push(fieldElement);
         });
       }
@@ -217,6 +207,86 @@ const updateElement = () => {
 defineExpose({
   openDialog
 });
+const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
+  editEvent(row);
+};
+
+const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
+  body: {
+    options: [
+      [
+        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
+        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
+      ]
+    ]
+  },
+  visibleMethod({ options, column }) {
+    const isDisabled = !column;
+    options.forEach((list) => {
+      list.forEach((item) => {
+        item.disabled = isDisabled;
+      });
+    });
+    return true;
+  }
+});
+const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => {
+  const $table = tableRef.value;
+  if ($table) {
+    switch (menu.code) {
+      case 'edit':
+        editEvent(row);
+        break;
+      case 'remove':
+        removeEvent(row);
+        break;
+    }
+  }
+};
+const typeSelect = [
+  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
+  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
+  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
+];
+const eventSelect = [
+  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: 'create', value: 'create' },
+  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: 'assignment', value: 'assignment' },
+  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: 'complete', value: 'complete' },
+  { id: '68801972-85f1-482f-bd86-1fad015c26ed', label: 'delete', value: 'delete' }
+];
+
+const initTableData = () => {
+  tableData.value =
+    props.element.businessObject.extensionElements?.values
+      .filter((item) => item.$type === 'flowable:TaskListener')
+      .map((item) => {
+        let type;
+        if ('class' in item) type = 'class';
+        if ('expression' in item) type = 'expression';
+        if ('delegateExpression' in item) type = 'delegateExpression';
+        return {
+          event: item.event,
+          type: type,
+          className: item[type],
+          params:
+            item.fields?.map((field) => {
+              let fieldType;
+              if ('stringValue' in field) fieldType = 'stringValue';
+              if ('expression' in field) fieldType = 'expression';
+              return {
+                name: field.name,
+                type: fieldType,
+                value: field[fieldType]
+              };
+            }) ?? []
+        };
+      }) ?? [];
+};
+
+onMounted(() => {
+  initTableData();
+  console.log(2222);
+});
 </script>
 
 <style scoped lang="scss">

src/hooks/useDialog.ts

@@ -1,5 +1,3 @@
-import { ref } from 'vue';
-
 interface Options {
   title?: string;
 }