tianheng-ui 0.1.0 → 0.1.1

package/packages/Workflow/penal/signal-message/SignalAndMessage.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="panel-tab__content--title">
+      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
+    </div>
+    <el-table :data="messageList" size="mini" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+    <div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
+      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
+    </div>
+    <el-table :data="signalList" size="mini" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+
+    <el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
+      <el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
+        <el-form-item :label="modelConfig.idLabel">
+          <el-input v-model="modelObjectForm.id" clearable />
+        </el-form-item>
+        <el-form-item :label="modelConfig.nameLabel">
+          <el-input v-model="modelObjectForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="modelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "SignalAndMassage",
+  data() {
+    return {
+      signalList: [],
+      messageList: [],
+      modelVisible: false,
+      modelType: "",
+      modelObjectForm: {}
+    };
+  },
+  computed: {
+    modelConfig() {
+      if (this.modelType === "message") {
+        return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
+      } else {
+        return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
+      }
+    }
+  },
+  mounted() {
+    this.initDataList();
+  },
+  methods: {
+    initDataList() {
+      this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+      this.messageIdMap = {};
+      this.signalIdMap = {};
+      this.messageList = [];
+      this.signalList = [];
+      this.rootElements.forEach(el => {
+        if (el.$type === "bpmn:Message") {
+          this.messageIdMap[el.id] = true;
+          this.messageList.push({ ...el });
+        }
+        if (el.$type === "bpmn:Signal") {
+          this.signalIdMap[el.id] = true;
+          this.signalList.push({ ...el });
+        }
+      });
+    },
+    openModel(type) {
+      this.modelType = type;
+      this.modelObjectForm = {};
+      this.modelVisible = true;
+    },
+    addNewObject() {
+      if (this.modelType === "message") {
+        if (this.messageIdMap[this.modelObjectForm.id]) {
+          return this.$message.error("该消息已存在，请修改id后重新保存");
+        }
+        const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
+        this.rootElements.push(messageRef);
+      } else {
+        if (this.signalIdMap[this.modelObjectForm.id]) {
+          return this.$message.error("该信号已存在，请修改id后重新保存");
+        }
+        const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
+        this.rootElements.push(signalRef);
+      }
+      this.modelVisible = false;
+      this.initDataList();
+    }
+  }
+};
+</script>

package/packages/Workflow/penal/task/ElementTask.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px" @submit.native.prevent>
+      <!-- <el-form-item label="异步延续">
+        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />
+        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
+        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />
+      </el-form-item> -->
+      
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import UserTask from "./task-components/UserTask";
+import ScriptTask from "./task-components/ScriptTask";
+import ReceiveTask from "./task-components/ReceiveTask";
+
+export default {
+  name: "ElementTaskConfig",
+  components: { UserTask, ScriptTask, ReceiveTask },
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      taskConfigForm: {
+        asyncAfter: false,
+        asyncBefore: false,
+        exclusive: false
+      },
+      witchTaskComponent: "",
+      installedComponent: {
+        // 手工任务与普通任务一致，不需要其他配置
+        // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+        // 发送任务、服务任务、业务规则任务共用一个相同配置
+        UserTask: "UserTask", // 用户任务配置
+        ScriptTask: "ScriptTask", // 脚本任务配置
+        ReceiveTask: "ReceiveTask" // 消息接收任务
+      }
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
+        this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
+        this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
+      }
+    },
+    type: {
+      immediate: true,
+      handler() {
+        this.witchTaskComponent = this.installedComponent[this.type];
+      }
+    }
+  },
+  methods: {
+    changeTaskAsync() {
+      if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
+        this.taskConfigForm.exclusive = false;
+      }
+      window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
+        ...this.taskConfigForm
+      });
+    }
+  }
+};
+</script>

package/packages/Workflow/penal/task/task-components/ReceiveTask.vue

@@ -0,0 +1,97 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="消息实例">
+      <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
+        <el-select v-model="bindMessageId" @change="updateTaskMessage">
+          <el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
+        </el-select>
+        <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
+      </div>
+    </el-form-item>
+    <el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
+      <el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
+        <el-form-item label="消息ID">
+          <el-input v-model="newMessageForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="消息名称">
+          <el-input v-model="newMessageForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ReceiveTask",
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      bindMessageId: "",
+      newMessageForm: {},
+      messageMap: {},
+      messageModelVisible: false
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.$nextTick(() => this.getBindMessage());
+      }
+    }
+  },
+  created() {
+    this.bpmnMessageRefsMap = Object.create(null);
+    this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+    this.bpmnRootElements
+      .filter(el => el.$type === "bpmn:Message")
+      .forEach(m => {
+        this.bpmnMessageRefsMap[m.id] = m;
+        this.$set(this.messageMap, m.id, m.name);
+      });
+    this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
+  },
+  methods: {
+    getBindMessage() {
+      this.bpmnElement = window.bpmnInstances.bpmnElement;
+      this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
+    },
+    openMessageModel() {
+      this.messageModelVisible = true;
+      this.newMessageForm = {};
+    },
+    createNewMessage() {
+      if (this.messageMap[this.newMessageForm.id]) {
+        this.$message.error("该消息已存在，请修改id后重新保存");
+        return;
+      }
+      const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
+      this.bpmnRootElements.push(newMessage);
+      this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
+      this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
+      this.messageModelVisible = false;
+    },
+    updateTaskMessage(messageId) {
+      if (messageId === "-1") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          messageRef: null
+        });
+      } else {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          messageRef: this.bpmnMessageRefsMap[messageId]
+        });
+      }
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>

package/packages/Workflow/penal/task/task-components/ScriptTask.vue

@@ -0,0 +1,85 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="脚本格式">
+      <el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    </el-form-item>
+    <el-form-item label="脚本类型">
+      <el-select v-model="scriptTaskForm.scriptType">
+        <el-option label="内联脚本" value="inline" />
+        <el-option label="外部资源" value="external" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+      <el-input
+        v-model="scriptTaskForm.script"
+        type="textarea"
+        resize="vertical"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
+      <el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    </el-form-item>
+    <el-form-item label="结果变量">
+      <el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScriptTask",
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      defaultTaskForm: {
+        scriptFormat: "",
+        script: "",
+        resource: "",
+        resultVariable: ""
+      },
+      scriptTaskForm: {}
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.$nextTick(() => this.resetTaskForm());
+      }
+    }
+  },
+  methods: {
+    resetTaskForm() {
+      for (let key in this.defaultTaskForm) {
+        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
+        this.$set(this.scriptTaskForm, key, value);
+      }
+      this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
+    },
+    updateElementTask() {
+      let taskAttr = Object.create(null);
+      taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
+      taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
+      if (this.scriptTaskForm.scriptType === "inline") {
+        taskAttr.script = this.scriptTaskForm.script || null;
+        taskAttr.resource = null;
+      } else {
+        taskAttr.resource = this.scriptTaskForm.resource || null;
+        taskAttr.script = null;
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>