workflow-editor 0.9.65 → 0.9.66

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

@@ -0,0 +1,63 @@
+<template>
+  <el-dialog
+    visible
+    :title="$t('workflowEditorMessage.selectRole')"
+    width="30%"
+    top="10vh"
+    append-to-body
+    custom-class="properties-editor-noTab"
+    :close-on-click-modal="false"
+    @close="$emit('close')"
+  >
+    <inline-system-role-tree ref="systemRoleTree" :multiple="multiple" @result="roleResult" />
+    <span v-if="multiple" slot="footer" class="dialog-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>
+    </span>
+  </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
+    }
+  },
+  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,148 @@
+<template>
+  <div>
+    <el-tag
+      v-for="(tag,index) in dynamicTags"
+      :key="index+tag"
+      :type="getType(tag)"
+      closable
+      :disable-transitions="false"
+      @close="handleClose(tag)"
+    >
+      {{ tag|showText }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible||showFormFields"
+      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="el-icon-edit" @click="showInput">
+        {{ $t('workflowEditorMessage.enterText') }}
+      </el-button>
+      <el-button class="button-new-tag" size="small" icon="el-icon-search" @click="showFormFields=true">
+        {{ $t('workflowEditorMessage.selectField') }}
+      </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
+  },
+  filters: {
+    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
+    }
+  },
+  props: {
+    value: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    const dynamicTags = []
+    if (this.value) {
+      const regex = /\$\{(.+?)\}/g
+      const matched = this.value.match(regex)
+      for (const item of matched) {
+        dynamicTags.push(item)
+      }
+    }
+    return {
+      dynamicTags,
+      inputVisible: false,
+      showFormFields: false,
+      inputValue: ''
+    }
+  },
+  watch: {
+    dynamicTags(val) {
+      this.$emit('input', this.dynamicTags.join(''))
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+    },
+
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.focus()
+      })
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue
+      if (inputValue) {
+        if (this.inputVisible) {
+          inputValue = '${writeTitle[' + inputValue + ']}'
+        }
+        this.dynamicTags.push(inputValue)
+      }
+      this.inputVisible = 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.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>

package/packages/workflow-editor/src/properties-editors/common/transactor-settings.vue

@@ -0,0 +1,233 @@
+<template>
+  <el-form :model="formModel">
+    <el-form-item label="">
+      <el-radio-group v-model="formModel.transactor">
+        <el-radio label="${instanceCreator}">
+          {{ $t('workflowEditor.process.processInitiator') }}
+        </el-radio>
+        <el-radio v-if="usedIn==='HumanTask'" label="${previousTransactorAssignment}">
+          {{ $t('workflowEditor.process.appointmentOfHandlerInThePreviousLink') }}
+        </el-radio>
+        <el-radio label="byField">
+          {{ $t('workflowEditor.process.personSpecifiedInFormField') }}
+        </el-radio>
+        <el-radio label="byCondition">
+          {{ $t('workflowEditor.process.filterByCriteria') }}
+        </el-radio>
+      </el-radio-group>
+      <div v-if="formModel.transactor==='byCondition'">
+        <common-user-condition v-model="formModel.userCondition" used-in="transactor" />
+      </div>
+      <el-form-item
+        v-if="formModel.transactor==='byField'"
+        prop="selectedField"
+        required
+        :label="$t('workflowEditor.process.fieldName')"
+        label-width="80px"
+      >
+        <el-input :value="formatLabel(formModel.selectedField)" @focus="showFormFields=true" />
+        <form-fields v-if="showFormFields" @close="setField" />
+      </el-form-item>
+      <div v-if="formModel.transactor==='byCondition' || formModel.transactor==='byField'">
+        <el-form-item :label="$t('workflowEditor.process.additionalConditions')">
+          <el-checkbox v-model="formModel.additionalCondition.onlyInCreatorDepartment">
+            {{ $t('workflowEditor.process.handlingYyThePersonnelOfTheDepartmentOfTheInitiator') }}
+          </el-checkbox>
+          <el-checkbox v-model="formModel.additionalCondition.withCreatorDepartment">
+            {{ $t('workflowEditor.process.personnelOfTheDepartmentWhereTheInitiatorWorksParticipateInTheHandling') }}
+          </el-checkbox>
+          <el-checkbox v-model="formModel.additionalCondition.selectOneFromMultiple">
+            {{ $t('workflowEditor.process.selectSpecificHandler') }}
+          </el-checkbox>
+          <el-checkbox v-model="formModel.additionalCondition.selectOneFromDept">
+            {{ $t('workflowEditor.process.selectOneFromDept') }}
+          </el-checkbox>
+          <el-checkbox v-if="isSubprocess" v-model="formModel.additionalCondition.generateOneInstanceFromDept">
+            {{ $t('workflowEditor.process.generateOneInstanceFromDept') }}
+          </el-checkbox>
+        </el-form-item>
+        <div v-if="formModel.additionalCondition.selectOneFromMultiple">
+          <el-form-item :label="$t('workflowEditor.process.selectionMethod')">
+            <el-radio-group v-model="formModel.additionalCondition.selectType">
+              <el-radio label="customType">
+                {{ $t('workflowEditor.process.manualSelection') }}
+              </el-radio>
+              <el-radio label="autoType">
+                {{ $t('workflowEditor.process.autoSelect') }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-show="formModel.additionalCondition.selectType==='autoType'"
+            prop="additionalCondition.selectUrl"
+            :label="$t('workflowEditor.process.callbackURL')"
+            :rules="[{ required: true, message: this.$t('workflowEditor.process.cannotBeEmpty'), trigger: 'blur' }]"
+          >
+            <el-input v-model="formModel.additionalCondition.selectUrl" />
+          </el-form-item>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item
+      v-if="usedIn==='HumanTask' && formModel.transactor==='${previousTransactorAssignment}'"
+      prop="url"
+      :rules="[{ required: true, message: this.$t('workflowEditor.process.cannotBeEmpty'), trigger: 'blur' }]"
+      :label="$t('workflowEditor.process.selectURL')"
+      label-width="80px"
+    >
+      <el-input v-model.trim="formModel.url" @change="handleUrlChange" />
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import CommonUserCondition from '../common/common-user-condition'
+import FormFields from '../common/form-fields'
+import { getFormFieldLabel } from '../common/form-fields-utils.js'
+export default {
+  name: 'TransactorSettings',
+  components: {
+    CommonUserCondition,
+    FormFields
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    },
+    usedIn: {
+      type: String,
+      default: 'HumanTask'// 取值为HumanTask,CopyTask
+    },
+    // 是否是子流程
+    isSubprocess: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    /**
+     * 这个页签上有很多的动态效果，为了保持这些效果切换时，值不丢失，不能直接使用传进来的model对象，
+     * 而是要复制一份数据保存到formModel中,这样动态改变model时，formModel中的数据还存在，
+     * 用户在不同选项间切换时，数据得以保留，这样用户体验能好点。但是细节的处理确实比较繁琐，需要注意。
+     */
+    const formModel = { selectedField: '' }
+    // 不直接使用model.userCondition是为了在流程发起人等四个方式间切换时，设置的筛选条件不丢失
+    this.initFormModel(formModel)
+    return {
+      showFormFields: false,
+      formModel
+    }
+  },
+  mounted() {
+    // formModel.additionalCondition和userCondition的变化需要回写到xml中
+    this.$watch('formModel', function() {
+      this.setTransactor(this.formModel.transactor)
+      const additionalCondition = { ...this.formModel.additionalCondition }
+      if (additionalCondition.selectOneFromMultiple) {
+        if (additionalCondition.selectType === 'customType') {
+          delete additionalCondition['selectUrl']
+        }
+      } else {
+        delete additionalCondition['selectType']
+        delete additionalCondition['selectUrl']
+      }
+      this.model.additionalCondition = additionalCondition
+    }, {
+      deep: true
+    })
+  },
+  methods: {
+    formatLabel(name) {
+      return getFormFieldLabel(name)
+    },
+    initFormModel(formModel) {
+      formModel.userCondition = ''
+      const userCondition = this.model.userCondition
+      if (typeof (userCondition) === 'undefined' || userCondition === '' || userCondition === null) {
+        // 表示是初始化时
+        formModel.transactor = '${instanceCreator}'
+        this.model.userCondition = '${instanceCreator}'
+      } else {
+        if (userCondition === '${instanceCreator}' || userCondition === '${previousTransactorAssignment}') {
+          formModel.transactor = userCondition
+        } else if (userCondition.indexOf('${field[') >= 0) {
+          formModel.transactor = 'byField'
+          formModel.selectedField = userCondition
+        } else {
+          formModel.transactor = 'byCondition'
+          formModel.userCondition = userCondition
+        }
+      }
+      this.initAdditionalCondition(formModel)
+      if (this.model.url !== undefined) {
+        formModel.url = this.model.url
+      } else {
+        formModel.url = ''
+      }
+      // this.changeA(formModel.transactor)
+    },
+    initAdditionalCondition(formModel) {
+      // 由于xml中的additionalCondition可能没有，这时就需要自己构造一个additionalCondition
+      if (this.model.additionalCondition === undefined) {
+        formModel.additionalCondition = {
+          onlyInCreatorDepartment: false,
+          withCreatorDepartment: false,
+          selectOneFromMultiple: false,
+          selectType: 'customType', // customType表示由办理用户选择，autoType表示由程序bean自动选择
+          selectUrl: ''// 类型为autoType时，输入的URL
+        }
+      } else {
+        // 直接复制已有的值，不要指向同一个对象
+        formModel.additionalCondition = { ...this.model.additionalCondition }
+        // 如果xml中没有selectType，需要给selectType合适的默认值
+        if (formModel.additionalCondition.selectType === undefined) {
+          formModel.additionalCondition.selectType = 'customType'
+        }
+      }
+    },
+    changeA(transactor) {
+      this.setTransactor(transactor)
+    },
+    // 把url的值赋值给xml
+    handleUrlChange(val) {
+      this.model.url = val
+    },
+    setTransactor(val) {
+      if (val === '${instanceCreator}' || val === '${previousTransactorAssignment}') {
+        this.model.userCondition = val
+      }
+
+      if (val === 'byField') {
+        this.model.userCondition = this.formModel.selectedField
+      }
+      if (val === 'byCondition') {
+        this.model.userCondition = this.formModel.userCondition
+      }
+      // 不是上一环节办理人指定时，需要清空xml中的url
+      if (val === '${previousTransactorAssignment}') {
+        this.model.url = this.formModel.url
+      } else {
+        this.model.url = ''
+      }
+
+      // 不是按条件筛选的时候，需要清空xml中additionalCondition
+      if (val === 'byCondition') {
+        // 把值复制到xml中，不要直接指向同一个对象，否则回调url这些值就不能正确同步了
+        this.model.additionalCondition = { ...this.formModel.additionalCondition }
+      } else {
+        this.model.additionalCondition = undefined
+      }
+    },
+    handleFieldSelection(val) {
+
+    },
+    setField(name) {
+      if (name !== undefined) {
+        this.formModel.selectedField = '${field[' + name + ']}'
+        this.model.userCondition = this.formModel.selectedField
+      }
+      this.showFormFields = false
+    }
+  }
+}
+</script>