workflow-editor 0.0.81-up-tmp8 → 0.0.81-up-tmp10

package/packages/workflow-editor/src/properties-editors/common/system-role-tree-inline.vue

@@ -0,0 +1,354 @@
+<template>
+  <div>
+    <el-input v-model="filterText" :placeholder="$t('workflowEditorMessage.pleaseEnterTheRoleName')" @keyup.enter="clickSearch">
+      <template #append>
+        <el-button :icon="Search" @click="clickSearch" />
+      </template>
+    </el-input>
+    <el-tree
+      ref="roleTree"
+      :props="defaultProps"
+      :load="loadNode"
+      lazy
+      :highlight-current="true"
+      node-key="nodeId"
+      :show-checkbox="multiple"
+      check-strictly
+      :render-content="renderContent"
+      :filter-node-method="filterNode"
+      @check="handleCheckNode"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-input-custom {
+  width : 90%
+}
+</style>
+<script setup>
+import {
+  Search
+} from '@element-plus/icons-vue'
+</script>
+<script>
+export default {
+  name: 'InlineSystemRoleTree',
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      systemRoleTrees: null,
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'label',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      containBranch: false, // 当前租户内是否包含分支机构。获得当前选中角色名称时，如果有分支，则需要将分支名称返回给用户，例如：普通用户/分支1
+      tenantInfo: null, // 公司信息
+      tenantNodeId: -1, // 公司节点的id
+      allSearchNodeIds: [], // 用于保存所有查询出的节点id
+      allExpandNodeIds: [], // 用于保存allSearchNodeIds中所有已加载子节点的id集合
+      isClickNode: false,
+      searchValue: null,
+      selectNodeInfo: null // 单选时选中的结果
+
+    }
+  },
+  computed: {
+  },
+  watch: {
+    filterText(val) {
+      if (!val) {
+        this.searchValue = val
+        // 清空查询内容时，重新加载整个树
+        this.loadRole(this.tenantNodeId, this.tenantNodeId + '')
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    // 初始化树 或 点击三角展开节点时动态加载子节点
+    loadNode(node, resolve) {
+      var parentId = 0
+      var parentNodeId
+      if (node.level === 0) {
+        // 表示初始化树
+        parentId = 0
+        parentNodeId = parentId + ''
+      } else {
+        parentId = node.data.id
+        parentNodeId = node.data.nodeId
+      }
+      var checkedKeys = []
+      if (this.$refs.roleTree) {
+        checkedKeys = this.$refs.roleTree.getCheckedKeys()
+      }
+      // 初始化角色树
+      this.initLoadRole(parentId, parentNodeId, node, resolve, checkedKeys)
+    },
+    // 初始化部门树
+    initLoadRole(parentId, parentNodeId, node, resolve, checkedKeys) {
+      this.$http.get(this.baseAPI + '/acs/roles/system-role-trees/' + parentId).then(data => {
+        resolve(data)
+        // 更新当前点击的节点的子节点
+        this.$refs.roleTree.updateKeyChildren(parentNodeId, data)
+        if (parentId === 0) {
+          // 初始化树时，展开公司节点
+          const tenantData = data[0].data
+          this.tenantInfo = JSON.parse(tenantData)
+          this.containBranch = data[0].containBranch
+          // 加载整个组织结构树时，展开公司节点
+          this.loadRole(this.tenantNodeId, this.tenantNodeId + '')
+        }
+
+        if (this.isClickNode) {
+          // 点击当前节点时，加载树节点时
+          // 注意不是点击复选框时
+          this.isClickNode = false
+          this.checkedNodeAndChildren(node.data)
+        } else {
+          // 表示是点击三角展开节点时
+          if (checkedKeys && checkedKeys.indexOf(parentNodeId) > -1) {
+            // 点击部门名称前的三角标识展开节点时，保持当前节点的选中状态
+            // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+            this.checkedNodeAndChildren(node.data)
+          }
+        }
+      })
+    },
+    // 加载当前节点的子节点
+    loadRole(parentId, nodeId, isSearch, searchValue) {
+      this.$http.get(this.baseAPI + '/acs/roles/system-role-trees/' + parentId).then(children => {
+        this.$refs.roleTree.updateKeyChildren(nodeId, children)
+        if (this.$refs.roleTree.store.nodesMap[nodeId]) {
+          this.$refs.roleTree.store.nodesMap[nodeId].expanded = true
+        }
+        if (isSearch) {
+          // 查询时处理
+          if (this.allExpandNodeIds.indexOf(nodeId) === -1) {
+            // allExpandNodeIds集合中是否包含当前parentId节点id
+            this.allExpandNodeIds.push(nodeId)
+          }
+          if (this.allExpandNodeIds.length === this.allSearchNodeIds.length) {
+            // 表示所有节点已展开，执行树的过滤方法
+            this.$refs.roleTree.filter(searchValue)
+            this.allExpandNodeIds = []
+            this.allSearchNodeIds = []
+          }
+        }
+      })
+    },
+    clickSearch() {
+      this.searchValue = this.filterText
+      this.filterAppendNodes(this.filterText)
+    },
+    // 后台查询部门，并拼接树节点
+    filterAppendNodes(value) {
+      this.$http.get(this.baseAPI + '/acs/roles/search-system-role-trees?searchValue=' + value).then(systemIds => {
+        if (systemIds) {
+          if (systemIds.length === 0) {
+            this.$message({
+              showClose: true,
+              type: 'error',
+              message: this.$t('workflowEditorMessage.queryResultIsEmpty')
+            })
+            return
+          }
+          systemIds.forEach(systemId => {
+            const nodeId = 'SYSTEM_' + systemId
+            if (this.allSearchNodeIds.indexOf(nodeId) === -1) {
+              // 表示没有加载过该节点，需要放到allSearchNodeIds集合中,并加载该节点内容
+              this.allSearchNodeIds.push(nodeId)
+              this.loadRole(systemId, nodeId, true, value)
+            }
+          })
+        } else {
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: this.$t('workflowEditorMessage.queryResultIsEmpty')
+          })
+        }
+      })
+    },
+    // 点击复选框时处理
+    handleCheckNode(data, checkObj) {
+      if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
+        // 表示正选中data节点
+        if (data.children) {
+          // 如果已展开，不需要再走后台获得其子节点。只需要选中已有子节点
+          // 展开当前选中的节点
+          this.$refs.roleTree.store.nodesMap[data.nodeId].expanded = true
+          // 选中当前节点及其子节点
+          this.checkedNodeAndChildren(data)
+        } else {
+          // 当前节点未展开。需要走后台获得当前节点的子节点，然后展开当前节点，然后选中这些子节点
+          if (!data.leaf) {
+            // 不是叶子节点，并且没有加载过该父节点的子节点时，需要走后台展开子节点
+            this.$http.get(this.baseAPI + '/acs/roles/system-role-trees/' + data.id).then(result => {
+            // 更新当前点击的节点的子节点
+              this.$refs.roleTree.updateKeyChildren(data.nodeId, result)
+              // 展开当前选中的节点
+              this.$refs.roleTree.store.nodesMap[data.nodeId].expanded = true
+              // 获得所有应该选中的节点
+              this.checkedNodeAndChildren(data)
+            })
+          }
+        }
+      } else {
+        // 表示正取消选中data节点，同时要取消其子节点的选中状态
+        this.cancelChildCheckedNodes(data)
+      }
+    },
+    // 选中当前节点及其子节点
+    checkedNodeAndChildren(data) {
+      // 取消选中状态时，保持节点是展开的状态，不要折叠
+      this.$refs.roleTree.store.nodesMap[data.nodeId].expanded = true
+      // 获得所有应该选中的节点
+      this.$refs.roleTree.setChecked(data.nodeId, true)
+      const children = data.children
+      if (children) {
+        // 递归设置子子节点的选中状态
+        children.forEach(nodeData => {
+          this.checkedNodeAndChildren(nodeData)
+        })
+      }
+    },
+    // 取消当前节点的子节点的选中状态
+    cancelChildCheckedNodes(data) {
+      if (data.id !== this.tenantNodeId) {
+        // 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
+        this.$refs.roleTree.setChecked(this.tenantNodeId + '', false)
+      }
+      const children = data.children
+      if (children) {
+        children.forEach(nodeData => {
+          // 取消节点的选中状态
+          this.$refs.roleTree.setChecked(nodeData.nodeId, false)
+          // 递归取消子子节点的选中状态
+          this.cancelChildCheckedNodes(nodeData)
+        })
+      }
+    },
+    selectRole() {
+      if (this.multiple) {
+        const selectNodeInfo = {
+          containBranch: this.containBranch,
+          roles: []
+        }
+        const selectedRoles = []
+        const checkedNodes = this.$refs.roleTree.getCheckedNodes()
+        checkedNodes.forEach(nodeData => {
+          if (nodeData.nodeType === 'ROLE') {
+            const role = JSON.parse(nodeData.data)
+            role.tenantCode = this.tenantInfo.code
+            role.tenantName = this.tenantInfo.tenantName
+            selectedRoles.push(role)
+          }
+        })
+        selectNodeInfo.roles = selectedRoles
+        if (selectNodeInfo.length > 0) {
+          this.$emit('result', selectNodeInfo)
+        } else {
+          this.$message({
+            showClose: true,
+            type: 'warning',
+            message: this.$t('workflowEditor.pleaseSelectRole')
+          })
+        }
+      } else {
+        if (this.selectNodeInfo) {
+          this.$emit('result', this.selectNodeInfo)
+        } else {
+          this.$message({
+            showClose: true,
+            type: 'warning',
+            message: this.$t('workflowEditor.pleaseSelectRole')
+          })
+        }
+      }
+    },
+    filterNode(value, data, node) {
+      if (!value) {
+        return true
+      } else {
+        var roleName = data.label
+        if (data.nodeType !== 'ROLE') {
+          // 表示不是角色节点
+          return false
+        }
+        return roleName.indexOf(value) !== -1
+      }
+    },
+    handleNodeClick(data, node, nodeTree) {
+      if (this.multiple) {
+        // 多选角色树时，处理点击节点事件
+        this.clickNodeWhenMultiple(data)
+      }
+      console.log(data)
+      if (data.nodeType === 'ROLE' && !this.multiple) {
+        // 点击的是角色节点，并且是单选树时，点击部门节点直接关闭弹框
+        const role = JSON.parse(data.data)
+        role.tenantName = this.tenantInfo.tenantName
+        role.tenantCode = this.tenantInfo.code
+        var selectNodeInfo = {
+          id: data.id,
+          name: data.name,
+          containBranch: this.containBranch,
+          role: role
+        }
+        this.selectNodeInfo = selectNodeInfo
+      }
+    },
+    // 多选树时，点击节点处理复选框的选中状态
+    clickNodeWhenMultiple(data) {
+      var checkedKeys = []
+      if (this.$refs.roleTree) {
+        checkedKeys = this.$refs.roleTree.getCheckedKeys()
+      }
+      if (checkedKeys.indexOf(data.nodeId) > -1) {
+        // 表示当前节点是选中状态，则需要取消其选中状态
+        // 取消当前节点的勾选状态
+        this.$refs.roleTree.setChecked(data.nodeId, false)
+        // 取消当前节点的子节点的勾选状态
+        this.cancelChildCheckedNodes(data)
+        // 取消选中状态时，保持节点是展开的状态，不要折叠
+        this.$refs.roleTree.store.nodesMap[data.nodeId].expanded = true
+      } else {
+        // 表示当前节点不是选中的状态，需要勾选该节点
+        this.$refs.roleTree.setChecked(data.nodeId, true)
+        // 点击树节点时添加并展开节点会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+        const children = data.childDepartments
+        if (children && children.length > 0) {
+          // 表示加载过该节点，直接选中即可
+          this.checkedNodeAndChildren(data)
+        } else {
+          // 表示没有加载过该节点，是首次加载，需要走后台
+          // 会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+          this.isClickNode = true
+        }
+      }
+    },
+    // 给节点添加查询结果样式
+    renderContent(h, { node, data, store }) {
+      if (data.nodeType && data.nodeType === 'ROLE' &&
+      this.searchValue && data.label.indexOf(this.searchValue) > -1) {
+        // 如果是查询条件
+        return h('span', {},[h('span',{class: 'searchResult'},node.label)])
+      }
+        return h('span', {},[h('span',{},node.label)])
+    }
+  }
+}
+</script>

package/packages/workflow-editor/src/properties-editors/common/system-role-tree.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    model-value
+    :title="$t('workflowEditorMessage.selectRole')"
+    width="30%"
+    top="10vh"
+    append-to-body
+    class="properties-editor-noTab"
+    :close-on-click-modal="false"
+    @close="$emit('close')"
+  >
+    <inline-system-role-tree ref="systemRoleTree" :multiple="multiple" @result="roleResult" />
+    <template v-if="multiple" #footer>
+      <el-button type="primary" size="small" @click="selectRoles">
+        {{ $t('workflowEditorPublicModel.determine') }}
+      </el-button>
+      <el-button size="small" @click="$emit('close')">
+        {{ $t('workflowEditorPublicModel.cancel') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-input-custom {
+  width : 90%
+}
+</style>
+<script>
+import InlineSystemRoleTree from './system-role-tree-inline'
+export default {
+  name: 'SystemRoleTree',
+  components: {
+    InlineSystemRoleTree
+  },
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data(){
+    return {
+      dialogVisible: true
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  created() {
+  },
+  methods: {
+    roleResult(selectNodeInfo) {
+      if (selectNodeInfo) {
+        this.$emit('close', selectNodeInfo)
+      } else {
+        this.$emit('close')
+      }
+    },
+    selectRoles() {
+      this.$refs.systemRoleTree.selectRole()
+    }
+  }
+}
+</script>

package/packages/workflow-editor/src/properties-editors/common/task-title.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <el-tag
+      v-for="(tag,index) in dynamicTags"
+      :key="index+tag"
+      :type="getType(tag)"
+      closable
+      :disable-transitions="false"
+      @close="handleClose(tag)"
+    >
+      {{ showText(tag) }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible||isShowAdditionalParam"
+      ref="saveTagInput"
+      v-model="inputValue"
+      class="input-new-tag"
+      size="small"
+      @keyup.enter.native="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <el-button-group v-if="!inputVisible">
+      <el-button class="button-new-tag" size="small" icon="EditPen" @click="showInput">
+        {{ $t('workflowEditorMessage.enterText') }}
+      </el-button>
+      <el-button class="button-new-tag" size="small" icon="Search" @click="showFormFields=true">
+        {{ $t('workflowEditorMessage.selectField') }}
+      </el-button>
+      <el-button class="button-new-tag" size="small" icon="EditPen" @click="showAdditionalParam">
+        {{ $t('workflowEditorMessage.additionalParam') }}
+      </el-button>
+    </el-button-group>
+    <form-fields v-if="showFormFields" @close="setField" />
+  </div>
+</template>
+<script>
+import FormFields from './form-fields'
+import { getFormFieldLabel } from './form-fields-utils.js'
+export default {
+  name: 'TaskTitle',
+  components: {
+    FormFields
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    const dynamicTags = []
+    if (this.modelValue) {
+      const regex = /\$\{(.+?)\}/g
+      const matched = this.modelValue.match(regex)
+      for (const item of matched) {
+        dynamicTags.push(item)
+      }
+    }
+    return {
+      dynamicTags,
+      inputVisible: false,
+      showFormFields: false,
+      inputValue: '',
+      showLabel: null,
+      isShowAdditionalParam: false
+    }
+  },
+  // watch: {
+  //   dynamicTags(val) {
+  //     // this.$emit('input', this.dynamicTags.join(''))
+  //     this.$emit('update:modelValue', this.dynamicTags.join(''))
+  //   }
+  // },
+  mounted() {
+
+  },
+  methods: {
+
+    showText(value) {
+      let result = value
+      if (value.indexOf('${field[') >= 0) {
+        const name = result.substring(result.indexOf('[') + 1, result.lastIndexOf(']'))
+        result = getFormFieldLabel(name)
+        result = '[' + result + ']'
+      } else if (value.indexOf('${writeTitle[') >= 0) {
+        const index = value.indexOf('${writeTitle[')
+        result = result.substring(index + 13)
+        result = result.substring(0, result.indexOf(']'))
+      }
+      return result
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+      this.$emit('update:modelValue', this.dynamicTags.join(''))
+    },
+
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.focus()
+      })
+    },
+    showAdditionalParam() {
+      this.isShowAdditionalParam = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.focus()
+      })
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue
+      if (inputValue) {
+        if (this.inputVisible) {
+          inputValue = '${writeTitle[' + inputValue + ']}'
+        } else if(this.isShowAdditionalParam) {
+          inputValue = '${request[' + inputValue + ']}'
+        }
+        this.dynamicTags.push(inputValue)
+        this.$emit('update:modelValue', this.dynamicTags.join(''))
+      }
+      this.inputVisible = false
+      this.isShowAdditionalParam = false
+      this.inputValue = ''
+    },
+    getType(tag) {
+      if (tag.indexOf('${field') >= 0) {
+        return 'success'
+      } else {
+        return null
+      }
+    },
+    setField(name) {
+      if (name !== undefined) {
+        // showFormFields的时候，input也显示了出来(实际上是不应该显示的)。如果input不显示出来，会发生非常怪异的事情，这个push操作不会更新视图，界面上不显示新的tag（尽管数组里有）
+        this.dynamicTags.push('${field[' + name + ']}')
+        this.$emit('update:modelValue', this.dynamicTags.join(''))
+      }
+      this.showFormFields = false
+    }
+  }
+}
+</script>
+<style scoped>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 150px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  select{
+    width: 150px;
+    margin-left: 10px;
+    height: 32px;
+    line-height: 32px;
+  }
+</style>