tianheng-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,535 @@
+<template>
+  <div>
+    <el-checkbox-group
+      class="taskMenus"
+      v-model="taskMenusSelect"
+      @change="taskMenusCheckboxChange"
+    >
+      <div
+        class="taskMenus-item"
+        v-for="menu in Object.values(taskMenus)"
+        :key="menu.name"
+      >
+        <el-checkbox :label="menu.name" :disabled="menu.disabled">{{
+          menu.label
+        }}</el-checkbox>
+        <el-select
+          v-if="menu.name === 'person'"
+          v-model="menu.value"
+          placeholder="请选择"
+          multiple
+          clearable
+          @change="taskMenusCheckboxChange"
+        >
+          <el-option
+            v-for="item in personOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          v-if="menu.name === 'role'"
+          v-model="menu.value"
+          placeholder="请选择"
+          multiple
+          clearable
+          @change="taskMenusCheckboxChange"
+        >
+          <el-option
+            v-for="item in [{ label: '管理员', value: 'admin' }]"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-cascader
+          v-if="menu.name === 'department'"
+          style="width: 100%"
+          v-model="menu.value"
+          :options="departmentOptions"
+          :props="{ checkStrictly: true }"
+          :show-all-levels="false"
+          clearable
+          @change="taskMenusCheckboxChange"
+        ></el-cascader>
+        <!-- <el-input
+          v-if="menu.name === 'leader'"
+          :value="menu.value"
+          placeholder="请输入"
+          readonly
+        ></el-input>
+        <el-input
+          v-if="menu.name === 'leaderList'"
+          :value="JSON.stringify(menu.value)"
+          placeholder="请输入"
+          readonly
+        ></el-input>
+        <el-input
+          v-if="menu.name === 'select'"
+          :value="menu.value"
+          placeholder="请输入"
+        >
+        </el-input>
+        <el-input
+          v-if="menu.name === 'oneself'"
+          :value="menu.value"
+          placeholder="请输入"
+          readonly
+        ></el-input> -->
+      </div>
+    </el-checkbox-group>
+
+    <!-- <template>
+      <el-form-item label="处理用户">
+        <el-select
+          v-model="userTaskForm.assignee"
+          @change="updateElementTask('assignee')"
+        >
+          <el-option
+            v-for="ak in mockData"
+            :key="'ass-' + ak"
+            :label="`用户${ak}`"
+            :value="`user${ak}`"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="候选用户">
+        <el-select
+          v-model="userTaskForm.candidateUsers"
+          multiple
+          collapse-tags
+          @change="updateElementTask('candidateUsers')"
+        >
+          <el-option
+            v-for="uk in mockData"
+            :key="'user-' + uk"
+            :label="`用户${uk}`"
+            :value="`user${uk}`"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="候选分组">
+        <el-select
+          v-model="userTaskForm.candidateGroups"
+          multiple
+          collapse-tags
+          @change="updateElementTask('candidateGroups')"
+        >
+          <el-option
+            v-for="gk in mockData"
+            :key="'ass-' + gk"
+            :label="`分组${gk}`"
+            :value="`group${gk}`"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="到期时间">
+        <el-input
+          v-model="userTaskForm.dueDate"
+          clearable
+          @change="updateElementTask('dueDate')"
+        />
+      </el-form-item>
+      <el-form-item label="跟踪时间">
+        <el-input
+          v-model="userTaskForm.followUpDate"
+          clearable
+          @change="updateElementTask('followUpDate')"
+        />
+      </el-form-item>
+      <el-form-item label="优先级">
+        <el-input
+          v-model="userTaskForm.priority"
+          clearable
+          @change="updateElementTask('priority')"
+        />
+      </el-form-item>
+    </template> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserTask",
+  props: {
+    id: String,
+    type: String,
+  },
+  inject: {
+    prefix: "prefix",
+  },
+  data() {
+    return {
+      taskMenus: {},
+      defaultTaskForm: {
+        assignee: "",
+        candidateUsers: [],
+        candidateGroups: [],
+        // dueDate: "",
+        // followUpDate: "",
+        // priority: "",
+      },
+      userTaskForm: {},
+      mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      taskMenusSelect: [],
+
+      personOptions: [],
+      departmentOptions: [],
+
+      bpmnElement: null,
+      otherExtensionList: null,
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.otherExtensionList =
+          this.bpmnElement.businessObject?.extensionElements?.values?.filter(
+            (ex) => ex.$type === `${this.prefix}:Property`
+          ) ?? [];
+
+        console.log(this.bpmnElement, this.otherExtensionList);
+        this.initTaskMenus();
+        this.$nextTick(() => this.resetTaskForm());
+      },
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      setTimeout(() => {
+        this.personOptions = [
+          { label: "张三", value: "张三" },
+          { label: "李四", value: "李四" },
+          { label: "王武", value: "王武" },
+        ];
+        this.departmentOptions = [
+          {
+            value: "事业部",
+            label: "事业部",
+            children: [
+              { value: "事业1部", label: "事业1部" },
+              { value: "事业2部", label: "事业2部" },
+            ],
+          },
+          {
+            value: "综合部",
+            label: "综合部",
+            children: [
+              {
+                value: "综合1部",
+                label: "综合1部",
+              },
+              {
+                value: "综合2部",
+                label: "综合2部",
+              },
+            ],
+          },
+          {
+            value: "研发部",
+            label: "研发部",
+            children: [
+              {
+                value: "研发1部",
+                label: "研发1部",
+              },
+              {
+                value: "研发2部",
+                label: "研发2部",
+              },
+            ],
+          },
+        ];
+      }, 1000);
+    },
+    initTaskMenus() {
+      this.taskMenus = {
+        person: {
+          label: "指定人员",
+          name: "person",
+          key: "candidateUsers",
+          value: "",
+          disabled: false,
+        },
+        // role: {
+        //   label: "指定角色",
+        //   name: 'role',
+        //   key: "candidateGroups",
+        //   value: [],
+        //   disabled: false,
+        // },
+        department: {
+          label: "指定部门",
+          name: "department",
+          key: "candidateGroups",
+          value: [],
+          disabled: false,
+        },
+        leader: {
+          label: "直属领导",
+          name: "leader",
+          key: "assignee",
+          value: "${superiorLeader}",
+          disabled: false,
+        },
+        leaderList: {
+          label: "连续多级主管",
+          name: "leaderList",
+          key: "collection",
+          value: "superiorLeaderList",
+          disabled: this.bpmnElement?.businessObject.loopCharacteristics
+            ? this.bpmnElement.businessObject.loopCharacteristics.$type !=
+              "bpmn:MultiInstanceLoopCharacteristics"
+            : true,
+        },
+        select: {
+          label: "发起人自选",
+          name: "select",
+          key: "assignee",
+          value: "${selectUser}",
+          disabled: true,
+        },
+        oneself: {
+          label: "发起人自己",
+          name: "oneself",
+          key: "assignee",
+          value: "${initiator}",
+          disabled: false,
+        },
+      };
+      this.taskMenusSelect = [];
+    },
+    resetTaskForm() {
+      const businessObject = this.bpmnElement?.businessObject;
+      if (businessObject.candidateUsers === `u_${this.bpmnElement.id}`) {
+        this.taskMenusSelect.push("person");
+        this.taskMenus.leaderList.disabled = true;
+      }
+      if (businessObject.candidateGroups === `g_${this.bpmnElement.id}`) {
+        this.taskMenusSelect.push("department");
+        this.taskMenus.leaderList.disabled = true;
+      }
+
+      if (businessObject.assignee === "${superiorLeader}") {
+        this.taskMenusSelect.push("leader");
+        this.taskMenus.oneself.disabled = true;
+      }
+      if (businessObject.assignee === "${initiator}") {
+        this.taskMenusSelect.push("oneself");
+        this.taskMenus.leader.disabled = true;
+      }
+
+      this.otherExtensionList.forEach((item) => {
+        if (item.name === `u_${this.bpmnElement.id}`) {
+          this.taskMenus.person.value.push(item.value);
+        } else if (item.name === `g_${this.bpmnElement.id}`) {
+          this.taskMenus.department.value = item.value.split(",");
+        }
+      });
+
+      // for (let key in this.defaultTaskForm) {
+      //   let value;
+      //   if (key === "candidateUsers") {
+      //     value = this.bpmnElement?.businessObject[key]
+      //       ? this.bpmnElement.businessObject[key].split(",")
+      //       : [];
+      //     if (value.includes("${superiorLeaderList}")) {
+      //       this.taskMenusSelect.push("leaderList");
+      //       this.taskMenus.person.disabled = true;
+      //     } else if (key === "candidateGroups" && value.length) {
+      //       this.taskMenusSelect.push("department");
+      //       this.taskMenus.department.value = value;
+      //     } else if (key === "candidateUsers" && value.length) {
+      //       this.taskMenusSelect.push("person");
+      //       this.taskMenus.person.value = value;
+      //       this.taskMenus.leaderList.disabled = true;
+      //     }
+      //   } else if (key === "candidateGroups") {
+      //   } else {
+      //     value =
+      //       this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
+      //     if (value === "${superiorLeader}") {
+      //       this.taskMenusSelect.push("leader");
+      //       this.taskMenus.oneself.disabled = true;
+      //     } else if (value === "${selectUser}") {
+      //       this.taskMenusSelect.push("select");
+      //     } else if (value === "${initiator}") {
+      //       this.taskMenusSelect.push("oneself");
+      //       this.taskMenus.leader.disabled = true;
+      //     }
+      //   }
+      // }
+      this.taskMenusCheckboxChange();
+    },
+    updateElementTask(name, taskAttr) {
+      const menu = this.taskMenus[name];
+      console.log(menu);
+      if (this.taskMenusSelect.includes(name) == false) {
+        return;
+      }
+      const key = menu.key;
+      const value = menu.value;
+
+      if (menu.name === "department") {
+        const candidateGroupsName = `g_${this.bpmnElement.id}`;
+        const newPropertyObject = window.bpmnInstances.moddle.create(
+          `${this.prefix}:Property`,
+          { name: candidateGroupsName, value: value.join() }
+        );
+        taskAttr.extensionElements =
+          taskAttr.extensionElements.concat(newPropertyObject);
+        taskAttr.candidateGroups = candidateGroupsName;
+      } else if (menu.name === "person") {
+        const candidateUsersName = `u_${this.bpmnElement.id}`;
+        let values = [];
+        value.forEach((element) => {
+          const newPropertyObject = window.bpmnInstances.moddle.create(
+            `${this.prefix}:Property`,
+            { name: candidateUsersName, value: element }
+          );
+          values.push(newPropertyObject);
+        });
+        taskAttr.extensionElements = taskAttr.extensionElements.concat(values);
+        taskAttr.candidateUsers = candidateUsersName;
+      } else if (menu.name === "leaderList") {
+        // const newPropertyObject = window.bpmnInstances.moddle.create(
+        //   `${this.prefix}:Property`,
+        //   { collection: "superiorLeaderList", elementVariable: "ele" }
+        // );
+        // taskAttr.extensionElements = taskAttr.extensionElements.concat([
+        //   newPropertyObject,
+        // ]);
+        window.bpmnInstances.modeling.updateModdleProperties(
+          this.bpmnElement,
+          this.bpmnElement.businessObject.loopCharacteristics,
+          { collection: "superiorLeaderList", elementVariable: "ele" }
+        );
+      } else {
+        taskAttr[key] = value || null;
+      }
+    },
+    taskMenusCheckboxChange() {
+      this.resetElementTask();
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        assignee: null,
+        candidateUsers: null,
+        candidateGroups: null,
+        extensionElements: null,
+      });
+      if (this.bpmnElement.businessObject.loopCharacteristics) {
+        window.bpmnInstances.modeling.updateModdleProperties(
+          this.bpmnElement,
+          this.bpmnElement.businessObject.loopCharacteristics,
+          { collection: null, elementVariable: null }
+        );
+      }
+
+      let taskAttr = {
+        assignee: null,
+        candidateUsers: null,
+        candidateGroups: null,
+        extensionElements: [],
+      };
+      this.taskMenusSelect.map((val) => {
+        this.updateElementTask(val, taskAttr);
+
+        if (val === "person") {
+          this.taskMenus.leaderList.disabled = true;
+          return;
+        }
+        if (val === "department") {
+          this.taskMenus.leaderList.disabled = true;
+          return;
+        }
+        if (val === "leader") {
+          this.taskMenus.oneself.disabled = true;
+          this.taskMenus.leaderList.disabled = true;
+          return;
+        }
+        if (val === "leaderList") {
+          this.taskMenus.person.disabled = true;
+          this.taskMenus.department.disabled = true;
+          this.taskMenus.leader.disabled = true;
+          this.taskMenus.oneself.disabled = true;
+          return;
+        }
+        if (val === "oneself") {
+          this.taskMenus.leader.disabled = true;
+          this.taskMenus.leaderList.disabled = true;
+          return;
+        }
+      });
+
+      if (this.taskMenusSelect.length) {
+        console.log(taskAttr.extensionElements);
+        const propertiesObject = window.bpmnInstances.moddle.create(
+          `${this.prefix}:Properties`,
+          {
+            values: taskAttr.extensionElements,
+          }
+        );
+
+        const extensions = window.bpmnInstances.moddle.create(
+          "bpmn:ExtensionElements",
+          { values: [propertiesObject] }
+        );
+
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          ...taskAttr,
+          extensionElements: extensions,
+        });
+      }
+    },
+
+    resetElementTask() {
+      this.taskMenus.person.disabled = false;
+      this.taskMenus.department.disabled = false;
+      this.taskMenus.leader.disabled = false;
+      this.taskMenus.leaderList.disabled = this.bpmnElement?.businessObject
+        .loopCharacteristics
+        ? this.bpmnElement.businessObject.loopCharacteristics.$type !=
+          "bpmn:MultiInstanceLoopCharacteristics"
+        : true;
+      this.taskMenus.select.disabled = true;
+      this.taskMenus.oneself.disabled = false;
+
+      // Object.values(this.taskMenus).forEach((item) => {
+      //   if (
+      //     item.name === "select" ||
+      //     (item.name === "leaderList" &&
+      //       this.bpmnElement.businessObject.loopCharacteristics)
+      //   ) {
+      //     item.disabled = true;
+      //   } else {
+      //     item.disabled = false;
+      //   }
+      // });
+    },
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.taskMenus {
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 40px;
+  }
+
+  /deep/ .el-checkbox {
+    margin-right: 20px;
+  }
+}
+</style>

package/packages/Workflow/theme/element-variables.scss

@@ -0,0 +1,70 @@
+/* 改变主题色变量 */
+$--color-primary: #1890ff;
+$--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+.el-table td,
+.el-table th {
+  color: #333;
+}
+.el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+div[class^="el-drawer"]:focus,
+span:focus {
+  outline: none;
+}
+.el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.el-dialog {
+  margin-top: 50vh !important;
+  transform: translateY(-50%);
+  overflow: hidden;
+}
+.el-dialog__wrapper {
+  overflow: hidden;
+  max-height: 100vh;
+}
+.el-dialog__header {
+  padding: 16px 16px 8px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+.el-dialog__body {
+  padding: 16px;
+  max-height: 80vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.el-dialog__footer {
+  padding: 16px;
+  box-sizing: border-box;
+  border-top: 1px solid #e8e8e8;
+}
+.el-dialog__close {
+  font-weight: 600;
+}
+.el-select {
+  width: 100%;
+}
+.el-divider:not(.el-divider--horizontal) {
+  margin: 0 8px ;
+}
+.el-divider.el-divider--horizontal {
+  margin: 16px 0;
+}

package/packages/Workflow/theme/index.scss

@@ -0,0 +1,2 @@
+@import "./process-designer.scss";
+@import "./process-panel.scss";