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

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

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <el-row>
+      <el-button type="primary" size="small" plain icon="CirclePlus" @click="add">
+        {{ $t('workflowEditorPublicModel.add') }}
+      </el-button>
+      <el-button type="primary" size="small" plain icon="Delete" @click="remove">
+        {{ $t('workflowEditorPublicModel.delete') }}
+      </el-button>
+    </el-row>
+    <el-table
+      ref="table"
+      :data="variables"
+      border
+      highlight-current-row
+      style="width: 100%"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="name" :label="$t('workflowEditor.common.variableName')">
+        <template v-slot="scope">
+          <el-input
+            v-model.trim="scope.row.name"
+            :placeholder="$t('workflowEditorMessage.pleaseEnterContent')"
+            @blur="checkName(scope.row.name)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="value" :label="$t('workflowEditor.common.variableValue')">
+        <template v-slot="scope">
+          <el-input
+            v-model.trim="scope.row.value"
+            :placeholder="$t('workflowEditorMessage.pleaseEnterContent')"
+            @blur="checkValue(scope.row.value)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Variables',
+  props: {
+    modelValue: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    let variables = []
+    if (this.modelValue) {
+      // xml中有多个variable时是数组，只有一个variable时是Object
+      if (Array.isArray(this.modelValue.variable)) {
+        variables = this.modelValue.variable
+      } else if (this.modelValue.variable) {
+        variables.push(this.modelValue.variable)
+      }
+    }
+    return {
+      variables,
+      currentRow: null
+    }
+  },
+  watch: {},
+  mounted() {
+    if (this.variables.length > 0) {
+      this.setCurrentRow(this.variables[0])
+    }
+    this.$watch(
+      'variables',
+      function () {
+        const filteredVariables = this.variables.filter((variable) => {
+          return variable.name !== '' && variable.value !== ''
+        })
+        // this.$emit('input', {
+        //   variable: filteredVariables
+        // })
+        this.$emit('update:modelValue', {
+          variable: filteredVariables
+        })
+      },
+      {
+        // deep为true可以监控数组中的元素的某个属性的变化
+        deep: true
+      }
+    )
+  },
+  methods: {
+    add() {
+      for (let i = 0; i < this.variables.length; i++) {
+        if (this.variables[i].name === '' || this.variables[i].value === '') {
+          this.$alert(this.$t('workflowEditorMessage.variableNameOrValueOnLineCannotBeEmpty', { row: i + 1 }))
+          return
+        }
+      }
+      const newRow = {
+        name: '',
+        value: ''
+      }
+      this.variables.push(newRow)
+      this.setCurrentRow(newRow)
+    },
+    remove() {
+      if (this.currentRow === null) {
+        this.$alert(this.$t('workflowEditorMessage.pleaseSelectARow'))
+        return
+      }
+      let index
+      for (let i = 0; i < this.variables.length; i++) {
+        if (this.variables[i].name === this.currentRow.name) {
+          index = i
+          break
+        }
+      }
+      this.variables.splice(index, 1)
+      // 当前选中的index如果是最后一行，那么删除后，index会等于length造成下标越界，因此需要让index等于新的最后一行
+      index = index <= this.variables.length - 1 ? index : this.variables.length - 1
+      this.setCurrentRow(this.variables[index])
+    },
+    setCurrentRow(row) {
+      this.$refs.table.setCurrentRow(row)
+    },
+    handleCurrentChange(val) {
+      this.currentRow = val
+    },
+    checkName(name) {
+      if (name === '') {
+        this.$alert(this.$t('workflowEditorMessage.variableNameCannotBeEmpty'))
+      }
+    },
+    checkValue(value) {
+      if (value === '') {
+        this.$alert(this.$t('workflowEditorMessage.variableValueCannotBeEmpty'))
+      }
+    }
+  }
+}
+</script>

package/packages/workflow-editor/src/properties-editors/copy-task/basic-properties.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-form :model="formModel" label-width="110px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item :label="$t('workflowEditor.task.name')">
+          <!-- <el-input v-model="formModel.name" /> -->
+          <i18n-input v-model="formModel.name" :i18n-key="tache.i18nKey?tache.i18nKey:'name.'+formModel.id" @setI18n="setI18nValue" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('workflowEditor.task.code')">
+          <el-input v-model="formModel.id" @blur="validateId" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item :label="$t('workflowEditor.task.taskTitle')">
+      <task-title v-model="tache.taskTitle" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.emailNotification')">
+      <el-switch v-model="tache.mailNotice" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.handlingPage')">
+      <el-input v-model="tache.taskUrl" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.remarks')">
+      <el-input v-model="tache.remark" type="textarea" autosize />
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import TaskTitle from '../common/task-title'
+import { validateTacheCode } from '../../util'
+import i18nInput from '../common/i18n-input'
+export default {
+  name: 'BasicProperties',
+  components: {
+    TaskTitle,
+    i18nInput
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      formModel: {
+        name: this.name,
+        id: this.id,
+        tache: this.model
+      }
+    }
+  },
+  computed: {
+    tache() {
+      return this.model
+    }
+  },
+  mounted() {
+    // 支持.snyc修饰符的写法
+    this.$watch('formModel.name', function(newVal, oldVal) {
+      this.$emit('update:name', newVal)
+    })
+  },
+  methods: {
+    validateId() {
+      validateTacheCode(this)
+    },
+    setI18nValue(i18nKey) {
+      this.tache.i18nKey = i18nKey
+    }
+  }
+}
+</script>
+<style scoped>
+.percent{
+  margin-left: 10px;
+  color:red;
+  font-size:1.2em;
+}
+</style>

package/packages/workflow-editor/src/properties-editors/copy-task/permission-settings.vue

@@ -0,0 +1,155 @@
+<template>
+  <el-form :model="formModel">
+    <el-form-item :label="$t('workflowEditor.task.allowViews')">
+      <el-switch v-model="formModel.viewOpinion.permission" />
+      <el-checkbox v-if="formModel.viewOpinion.permission" v-model="formModel.viewOpinionCheckbox">
+        {{ $t('workflowEditor.task.additionalConditions') }}
+      </el-checkbox>
+      <additional-condition v-if="formModel.viewOpinion.permission&&formModel.viewOpinionCheckbox" v-model="formModel.viewOpinion.condition" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.allowToViewCountersignatureResults')">
+      <el-switch v-model="formModel.viewMeetingResult.permission" />
+      <el-checkbox v-if="formModel.viewMeetingResult.permission" v-model="formModel.viewMeetingResultCheckbox">
+        {{ $t('workflowEditor.task.additionalConditions') }}
+      </el-checkbox>
+      <additional-condition v-if="formModel.viewMeetingResult.permission&&formModel.viewMeetingResultCheckbox" v-model="formModel.viewMeetingResult.condition" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.allowToViewVotingResults')">
+      <el-switch v-model="formModel.viewVoteResult.permission" />
+      <el-checkbox v-if="formModel.viewVoteResult.permission" v-model="formModel.viewVoteResultCheckbox">
+        {{ $t('workflowEditor.task.additionalConditions') }}
+      </el-checkbox>
+      <additional-condition v-if="formModel.viewVoteResult.permission&&formModel.viewVoteResultCheckbox" v-model="formModel.viewVoteResult.condition" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.allowToViewFlowHistory')">
+      <el-switch v-model="formModel.viewFlowHistory.permission" />
+      <el-checkbox v-if="formModel.viewFlowHistory.permission" v-model="formModel.viewFlowHistoryCheckbox">
+        {{ $t('workflowEditor.task.additionalConditions') }}
+      </el-checkbox>
+      <additional-condition v-if="formModel.viewFlowHistory.permission&&formModel.viewFlowHistoryCheckbox" v-model="formModel.viewFlowHistory.condition" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.allowFormsToPrint')">
+      <el-switch v-model="formModel.printForm.permission" />
+      <el-checkbox v-if="formModel.printForm.permission" v-model="formModel.printFormCheckbox">
+        {{ $t('workflowEditor.task.additionalConditions') }}
+      </el-checkbox>
+      <additional-condition v-if="formModel.printForm.permission&&formModel.printFormCheckbox" v-model="formModel.printForm.condition" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.task.attachmentAuthority')">
+      <el-switch v-model="formModel.attachment.permission" />
+    </el-form-item>
+    <el-card v-if="formModel.attachment.permission" class="box-card">
+      <el-form-item :label="$t('workflowEditor.task.downloadAttachment')">
+        <el-switch v-model="formModel.attachment.download.permission" />
+        <el-checkbox v-if="formModel.attachment.download.permission" v-model="formModel.attachment.downloadCheckbox">
+          {{ $t('workflowEditor.task.additionalConditions') }}
+        </el-checkbox>
+        <additional-condition v-if="formModel.attachment.download.permission&&formModel.attachment.downloadCheckbox" v-model="formModel.attachment.download.condition" />
+      </el-form-item>
+    </el-card>
+    <el-form-item :label="$t('workflowEditor.task.bodyPermission')">
+      <el-switch v-model="formModel.officialText.permission" />
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import AdditionalCondition from '../common/additional-condition'
+import { deepCopy } from '../../util'
+export default {
+  name: 'PermissionSettings',
+  components: {
+    AdditionalCondition
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    const formModel = deepCopy(this.modelValue)
+    // 控制附加条件的属性名
+    const attrNames = [
+      'viewOpinion', 'viewMeetingResult', 'viewVoteResult',
+      'viewFlowHistory', 'printForm'
+    ]
+    attrNames.forEach(name => {
+      // 如果是''或者undefined,那么两次!后就是false
+      formModel[name + 'Checkbox'] = !!this.modelValue[name].condition
+    })
+    // 控制附件各个权限的附加条件的属性名
+    const attachmentAttrNames = [
+      'download'
+    ]
+    attachmentAttrNames.forEach(item => {
+      // 如果是''或者undefined,那么两次!后就是false
+      formModel.attachment[name + 'Checkbox'] = !!this.modelValue.attachment[name] && !!this.modelValue.attachment[name].condition
+      if (!formModel.attachment.permission) {
+        formModel.attachment[name] = {
+          permission: false,
+          condition: ''
+        }
+      }
+    })
+
+    return {
+      formModel,
+      attrNames,
+      attachmentAttrNames
+    }
+  },
+  mounted() {
+    this.$watch('formModel', function(formModel) {
+      const result = {
+        viewOpinion: { },
+        viewMeetingResult: { },
+        viewVoteResult: { },
+        viewFlowHistory: { },
+        printForm: { },
+        officialText: { },
+        attachment: { }
+      }
+      this.attrNames.map(name => {
+        // permission为true且附件条件的checkbox也选中了，condition才有效
+        result[name].permission = formModel[name].permission
+        if (formModel[name].permission && formModel[name + 'Checkbox']) {
+          result[name].condition = formModel[name].condition
+        } else {
+          result[name].condition = ''
+        }
+      })
+
+      result.attachment.permission = formModel.attachment.permission
+      // 允许设置附件权限时，add，delete等的权限设置才有效，否则根本不生成add，delete等对应的json
+      if (formModel.attachment.permission) {
+        this.attachmentAttrNames.map(name => {
+        // 需要避免result的add,delete等属性为undefined
+          if (!result.attachment[name])result.attachment[name] = {}
+          // attachment不是undefined并且对应的add，delete等属性的permission为true
+          result.attachment[name].permission = formModel.attachment[name].permission
+          // permission为true且附件条件的checkbox也选中了，condition才有效
+          if (formModel.attachment[name].permission && formModel.attachment[name + 'Checkbox']) {
+            result.attachment[name].condition = formModel.attachment[name].condition
+          } else {
+            result.attachment[name].condition = ''
+          }
+        })
+      }
+
+      // 正文权限暂不处理
+      // this.$emit('input', result)
+      this.$emit('update:modelValue', result)
+    }, {
+      deep: true
+    })
+  },
+  methods: {
+
+  }
+}
+</script>
+<style scoped>
+  .el-checkbox{
+    margin-left: 20px;
+  }
+</style>

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

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog
+    model-value
+    :title="$t('workflowEditor.task.propertiesOfCCTask')"
+    :center="true"
+    top="10vh"
+    append-to-body
+    class="properties-editor"
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
+      <el-tab-pane :label="$t('workflowEditor.task.basicProperties')" name="basicProperties">
+        <basic-properties
+          v-model:id="model.ref.attr.id"
+          v-model:name="model.ref.attr.name"
+          :model="model.ref.basicProperties"
+        />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.task.settingOfHandler')" name="transactors">
+        <transactor-settings :model="model.ref.transactorSettings" used-in="CopyTask" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.task.reminderSettings')" name="reminders">
+        <!-- <reminder v-model="model.ref.reminder" /> -->
+        <notice-reminder :reminder-value="model.ref.reminder" :task-notice-value="model.ref.taskNotice" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.task.eventProcessing')" name="events">
+        <events v-model="model.ref.events" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.task.permissionSettings')" name="permissions">
+        <permission-settings v-model="model.ref.permissionSettings" />
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+<script>
+import BasicProperties from './copy-task/basic-properties'
+import PermissionSettings from './copy-task/permission-settings'
+import TransactorSettings from './common/transactor-settings'
+import NoticeReminder from './common/notice-reminder.vue'
+import Events from './human-task/events.vue'
+export default {
+  name: 'HumanTaskPropertiesEditor',
+  components: {
+    BasicProperties,
+    TransactorSettings,
+    PermissionSettings,
+    NoticeReminder,
+    Events
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    console.log(this.model)
+    if (!this.model.ref.taskNotice) {
+      this.model.ref.taskNotice = {}
+    }
+    return {
+      activeTab: 'basicProperties',
+      dialogVisible: true
+    }
+  },
+  computed: {
+    formModel() {
+      return this.model.ref
+    }
+  },
+  mounted() {
+    this.$watch('model.ref.attr.id', function(newVal, oldVal) {
+      this.model.id = newVal
+    })
+    this.$watch('model.ref.attr.name', function(newVal, oldVal) {
+      this.model.name = newVal
+    })
+  },
+  methods: {
+    handleClick(tab, event) {
+      // console.log(tab, event)
+    }
+  }
+}
+</script>
+<style scoped>
+/* 使用深度作用选择器（vue-loader的功能）">>>"符号重新定义了.el-dialog__body，不影响其他页面的同名样式*/
+.properties-editor :deep(.el-dialog__body){
+  padding-top: 0
+}
+</style>
+

package/packages/workflow-editor/src/properties-editors/decision.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog
+    model-value
+    :title="$t('workflowEditor.task.attributeOfConditionJudgment')"
+    :center="true"
+    append-to-body
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <el-form>
+      <el-form-item :label="$t('workflowEditor.task.name')" label-width="40px">
+        <!-- <el-input v-model="formModel.attr.name" /> -->
+        <i18n-input v-model.trim="formModel.attr.name" :i18n-key="(formModel.basicProperties && formModel.basicProperties.i18nKey)?formModel.basicProperties.i18nKey:'name.'+formModel.attr.id" @setI18n="setI18nValue" />
+      </el-form-item>
+      <el-form-item>
+        <span>{{ $t('workflowEditor.task.allBranchFlows') }}</span>
+        <el-table
+          border
+          :data="transitions"
+          style="width: 100%"
+        >
+          <el-table-column
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            prop="to"
+            :label="$t('workflowEditor.task.targetLink')"
+          />
+          <el-table-column
+            prop="condition"
+            :label="$t('workflowEditor.task.condition')"
+          />
+        </el-table>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { findOutgoingTransitionsByTacheId } from '../util.js'
+import i18nInput from './common/i18n-input'
+export default {
+  name: 'DecisionPropertiesEditor',
+  components: {
+    i18nInput
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data(){
+    return {
+      dialogVisible: true
+    }
+  },
+  computed: {
+    formModel() {
+      return this.model.ref
+    },
+    transitions() {
+      const transitions = findOutgoingTransitionsByTacheId(this.formModel.attr.id)
+      const data = []
+      transitions.map(transition => {
+        data.push({
+          to: transition.ref.attr.to,
+          condition: transition.ref.basicProperties.condition
+        })
+      })
+      return data
+    }
+  },
+  mounted() {
+    this.$watch('model.ref.attr.name', function(newVal) {
+      this.model.name = newVal
+    })
+  },
+  methods: {
+    setI18nValue(i18nKey) {
+      if (this.formModel) {
+        this.formModel.basicProperties = {}
+        this.formModel.basicProperties.i18nKey = i18nKey
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/workflow-editor/src/properties-editors/fork.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-dialog
+    model-value
+    :title="$t('workflowEditor.task.propertiesOfBranches')"
+    :center="true"
+    append-to-body
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <el-form>
+      <el-form-item :label="$t('workflowEditor.task.name')" label-width="40px">
+        <el-input v-model="formModel.attr.name" />
+      </el-form-item>
+      <el-form-item>
+        <span>{{ $t('workflowEditor.task.allBranchFlows') }}</span>
+        <el-table
+          border
+          :data="transitions"
+          style="width: 100%"
+        >
+          <el-table-column
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            prop="to"
+            :label="$t('workflowEditor.task.targetLink')"
+          />
+        </el-table>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { findOutgoingTransitionsByTacheId } from '../util.js'
+export default {
+  name: 'ForkPropertiesEditor',
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data(){
+    return{
+      dialogVisible: true
+    }
+  },
+  computed: {
+    formModel() {
+      return this.model.ref
+    },
+    transitions() {
+      const transitions = findOutgoingTransitionsByTacheId(this.formModel.attr.id)
+      const data = []
+      transitions.map(transition => {
+        data.push({
+          to: transition.endJoint.parent.name
+        })
+      })
+      return data
+    }
+  },
+  mounted() {
+    this.$watch('model.ref.attr.name', function(newVal) {
+      this.model.name = newVal
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>