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

package/packages/workflow-editor/src/properties-editors/process/selectPage.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    :show-close="true"
+    :append-to-body="true"
+    :title="$t('workflowEditorPublicModel.selectPage')"
+    width="60%"
+    model-value
+    @close="savePage"
+  >
+    <div style="overflow-y:auto;max-height: 500px">
+      <div class="operation-area">
+        <el-button size="small" @click="savePage">
+          <span>{{ $t('workflowEditorPublicModel.close') }}</span>
+        </el-button>
+      </div>
+      <div>
+        <super-grid
+          ref="grid"
+          :url="baseURL + listURL"
+          code="MMS_MODULE_PAGE"
+          @select="select"
+        />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+// import modulePageService from '@/subsystems/mms/api/module-page'
+import * as Vue from 'vue'
+import { mapGetters } from 'vuex'
+import {authApi} from 'agilebuilder-ui'
+export default {
+  props: {
+    pageFormCode: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      baseURL: '',
+      listURL: '',
+      selection: [],
+      dialogVisible: true
+    }
+  },
+	computed: {
+		...mapGetters('wfEditor', [
+			'systemVersion'
+		])
+	},
+  watch: {
+    conditionList: {
+      handler(newValue, oldValue) {
+        this.judgeHeavyData = newValue
+      }
+    }
+  },
+  created() {
+    this.baseURL = window.$vueApp.config.globalProperties.baseURL
+    if (this.pageFormCode) {
+      this.listURL = '/wf-editor/workflow-editors/modulePages/' + this.pageFormCode + '/' + parseInt(authApi.getSessionCache('wf_editor_systemVersion'))
+    }
+  },
+  methods: {
+    savePage() {
+      if (this.selection && this.selection.length > 0) {
+        if (this.selection.length !== 1) {
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: this.$t('message.pleaseSelectARecord')
+          })
+        } else {
+          const code = 'page:' + this.selection[0].code
+          this.$emit('setPage', code)
+        }
+      } else {
+        this.$emit('setPage', '')
+      }
+    },
+    select(selection, row) {
+      this.selection = selection
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog
+    model-value
+    :title="$t('workflowEditor.process.processProperties')"
+    :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.process.basicProperties')" name="basicProperties">
+        <basic-properties
+          v-model:name="model.attr.name"
+          v-model:code="model.attr.code"
+          :model="model.properties.basicProperties"
+        />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.process.permissionSettings')" name="permissions">
+        <permission-settings v-model="model.properties.permissionSettings" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.process.notificationSettings')" name="inform">
+        <notice-settings v-model="model.properties.inform" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.process.reminderSettings')" name="reminders">
+        <notice-reminder v-model:reminder-value="model.properties.reminder" :task-notice-value="model.properties.taskNotice" :isProcess="true" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.process.parameterSsetting')" name="parameterSettings">
+        <parameter-settings :model="model.properties.parameterSettings" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.process.event')" name="events">
+        <events v-model="model.properties.events" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('workflowEditor.process.processVariables')" name="variables">
+        <variables :model="model.properties.variables" />
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+<script>
+import convert from 'xml-js'
+import BasicProperties from './process/basic-properties'
+import PermissionSettings from './process/permission-settings'
+// import Reminder from './common/reminder'
+import ParameterSettings from './process/parameter-settings'
+import Events from './process/events'
+import Variables from './common/variables'
+import NoticeSettings from './process/notice-settings.vue'
+import NoticeReminder from './common/notice-reminder.vue'
+export default {
+  name: 'ProcessPropertiesEditor',
+  components: {
+    BasicProperties,
+    PermissionSettings,
+    // Reminder,
+    ParameterSettings,
+    Events,
+    Variables,
+    NoticeSettings,
+    NoticeReminder
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    // if (this.model.properties.inform === undefined) {
+    //   this.model.properties.inform = {}
+    // }
+    if (this.model.properties.taskNotice === undefined) {
+      this.model.properties.taskNotice = {}
+    }
+    return {
+      activeTab: 'basicProperties',
+      dialogVisible: true
+    }
+  },
+  computed: {
+    // 定义这些计算属性只是为了减少模板中的代码量
+    basicProperties() {
+      return this.model.properties.basicProperties
+    },
+    accessRight() {
+      return this.model.properties.accessRight
+    },
+    reminder() {
+      return this.model.properties.reminder
+    },
+    parameterSettings() {
+      return this.model.properties.parameterSettings
+    },
+    events() {
+      return this.model.properties.events
+    },
+    variables() {
+      return this.model.properties.variables
+    }
+  },
+  methods: {
+    toXml() {
+      const options = { compact: true, ignoreComment: true, spaces: 4 }
+      console.log(convert.js2xml({ basicProperties: this.basicProperties }, options))
+    },
+    handleClick(tab, event) {
+      // console.log(tab, event)
+    }
+  }
+}
+</script>
+

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

@@ -0,0 +1,201 @@
+<template>
+  <el-form :model="formModel">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item :label="$t('workflowEditor.process.name')" label-width="50px">
+          <!-- <el-input v-model="formModel.name" /> -->
+          <i18n-input
+            v-model="formModel.name"
+            :i18n-key="formModel.tache.i18nKey?formModel.tache.i18nKey:'name.'+formModel.id"
+            @setI18n="setI18nValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('workflowEditor.process.code')" label-width="50px">
+          <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.process.subprocess')" label-width="60px">
+      <el-cascader
+        v-model="selectedProcess"
+        :show-all-levels="false"
+        :options="processes"
+        @change="handleChange"
+      />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.process.subprocessIsSharedForm')" label-width="140px">
+      <el-switch v-model="formModel.tache.isSharedForm" />
+    </el-form-item>
+    <el-radio-group v-model="formModel.tache.moreTransactor">
+      <el-radio :label="false">
+        {{ $t('workflowEditor.task.anyOneCanHandleIt') }}
+      </el-radio>
+      <el-radio :label="true">
+        {{ $t('workflowEditor.task.forAll') }}
+      </el-radio>
+    </el-radio-group>
+    <el-form-item>
+      <field-mappings
+		    :label-tittle="$t('workflowEditor.process.transferValueFromMainFormToSubForm')"
+        v-model="formModel.tache.parameters"
+        :src-label="$t('workflowEditor.process.fieldsOfTheMainForm')"
+        :target-label="$t('workflowEditor.process.fieldsOfSubform')"
+        :target-fields="subprocessFormFields"
+      />
+    </el-form-item>
+    <el-form-item>
+      <field-mappings
+		    :label-tittle="$t('workflowEditor.process.subformReturnsResultsToMainForm')"
+        v-model="formModel.tache.result"
+        :src-label="$t('workflowEditor.process.fieldsOfSubform')"
+        :target-label="$t('workflowEditor.process.fieldsOfTheMainForm')"
+        :src-fields="subprocessFormFields"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import FieldMappings from './field-mappings'
+import processService from '../../process-service.js'
+import { validateTacheCode } from '../../util'
+import i18nInput from '../common/i18n-input'
+import TaskTitle from '../common/task-title'
+export default {
+  name: 'BasicProperties',
+  components: {
+    FieldMappings,
+    i18nInput,
+    TaskTitle
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectedProcess: [],
+      processes: [],
+      subprocessFormFields: [],
+      formModel: {
+        name: this.name,
+        id: this.id,
+        tache: this.model
+      }
+    }
+  },
+  computed: {
+    tache() {
+      return this.model
+    }
+  },
+  created() {
+    this.listAllProcesses().then(() => {
+      this.fetchSubprocessFormFields()
+    })
+
+    if (this.formModel.tache.parameters === '') {
+      this.formModel.tache.parameters = {}
+    }
+    if (this.formModel.tache.result === '') {
+      this.formModel.tache.result = {}
+    }
+  },
+  mounted() {
+    // 支持.snyc修饰符的写法
+    this.$watch('formModel.name', function(newVal, oldVal) {
+      this.$emit('update:name', newVal)
+    })
+  },
+  methods: {
+    fetchSubprocessFormFields() {
+      if (this.model.processCode) {
+      // 获得子流程对应表单字段集合
+        processService.fetchSubprocessFormFields(this.model.processCode, this.model.processVersion).then(formFields => {
+          this.subprocessFormFields = formFields
+        })
+      }
+    },
+    handleChange(values) {
+      console.log('handleChange=', values)
+      const processInfo = values[1]
+      this.model.processCode = processInfo.substring(processInfo.indexOf('/') + 1, processInfo.lastIndexOf('/'))
+      this.model.processVersion = processInfo.substring(processInfo.lastIndexOf('/') + 1)
+      this.fetchSubprocessFormFields()
+    },
+    // 获得对应表单列表
+    listAllProcesses() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(this.baseAPI + '/wf-editor/workflow-editors/all-active-definitions').then(activeDefinitions => {
+          if (activeDefinitions.length > 0) {
+          // 设置表单信息
+            const selectedProcessInfo = this.model.processCode + '/' + this.model.processVersion
+            // 修改时，获得默认选中的表单项
+            this.setDefaultSelectedProcessWhenUpdate(activeDefinitions, selectedProcessInfo)
+            this.processes = activeDefinitions
+            resolve()
+          }
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    // 修改时，获得默认选中的流程项
+    setDefaultSelectedProcessWhenUpdate(activeDefinitions, selectedProcessInfo) {
+      let selectedProcess
+      let selectedSystemCode
+      for (var i = 0; i < activeDefinitions.length; i++) {
+        const systemCode = activeDefinitions[i].value
+        const definitions = activeDefinitions[i].children
+        const selectedProcesses = definitions.filter(this.filterProcess(selectedProcessInfo))
+        if (selectedProcesses.length > 0) {
+          selectedSystemCode = systemCode
+          selectedProcess = selectedProcesses[0]
+          break
+        }
+      }
+      if (selectedProcess) {
+        const result = []
+        result.push(selectedSystemCode)
+        result.push(selectedProcess.value)
+        this.selectedProcess = result
+      }
+    },
+    // 过滤流程
+    filterProcess(selectedProcessInfo) {
+      return (process) => {
+        // systemAndProcessInfo/流程编号/流程版本”
+        const systemAndProcessInfo = process.value
+        // 获得“流程编号/流程版本”
+        const processInfo = systemAndProcessInfo.substring(systemAndProcessInfo.indexOf('/') + 1)
+        return (selectedProcessInfo === processInfo)
+      }
+    },
+    validateId() {
+      validateTacheCode(this)
+    },
+    setI18nValue(i18nKey) {
+      this.formModel.tache.i18nKey = i18nKey
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/workflow-editor/src/properties-editors/subprocess/events.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-form>
+    <el-form-item :label="$t('workflowEditor.process.eventsTriggeredBeforeStartingASubprocess')" label-width="150px">
+      <el-switch v-model="modelValue.beforeStart" />
+    </el-form-item>
+    <el-form-item :label="$t('workflowEditor.process.triggerSubprocessEndEvent')">
+      <el-switch v-model="modelValue.end" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'Events',
+  props: {
+    modelValue: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/workflow-editor/src/properties-editors/subprocess/field-mappings.vue

@@ -0,0 +1,216 @@
+<template>
+  <div style="width: 100%">
+    <el-row style="align-items: center">
+	    <span v-if="labelTittle" style="margin-right: 12px">{{ labelTittle }}</span>
+	    <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="tableData"
+      border
+      highlight-current-row
+      style="width: 100%"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column
+        type="index"
+        width="50"
+      />
+      <el-table-column
+        prop="source"
+        :label="srcLabel"
+      >
+        <template v-slot="scope">
+          <el-input :value="showSourceFieldLabel(scope.row.source)" :placeholder="$t('workflowEditorMessage.pleaseSelect')" @click="showSourceFields = true" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="target"
+        :label="targetLabel"
+      >
+        <template v-slot="scope">
+          <el-input :value="showTargetFieldLabel(scope.row.target)" :placeholder="$t('workflowEditorMessage.pleaseSelect')" @click="showTargetFields=true" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <form-fields v-if="showSourceFields||showTargetFields" :fields="formFields" @close="selectField" />
+  </div>
+</template>
+<script>
+import FormFields from '../common/form-fields'
+import { getFormFieldLabel } from '../common/form-fields-utils.js'
+export default {
+  name: 'FieldMappings',
+  components: {
+    FormFields
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: null
+    },
+    srcLabel: {
+      type: String,
+      default: null
+    },
+    targetLabel: {
+      type: String,
+      default: null
+    },
+    srcFields: {
+      type: Array,
+      default: null
+    },
+    targetFields: {
+      type: Array,
+      default: null
+    },
+	  labelTittle:{
+		  type:String,
+		  default: null
+	  }
+  },
+  data() {
+    let tableData = []
+    if (this.modelValue.field !== undefined) {
+      // xml中有多个field时是数组，只有一个field时是Object
+      if (Array.isArray(this.modelValue.field)) {
+        tableData = this.modelValue.field
+      } else {
+        tableData.push(this.modelValue.field)
+      }
+    }
+    return {
+      tableData,
+      currentRow: null,
+      showSourceFields: false,
+      showTargetFields: false
+    }
+  },
+  computed: {
+    formFields() {
+      if (this.showSourceFields) {
+        return this.srcFields
+      } else if (this.showTargetFields) {
+        return this.targetFields
+      } else {
+        return []
+      }
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+    if (this.tableData.length > 0) {
+      this.setCurrentRow(this.tableData[0])
+    }
+    this.$watch('tableData', function() {
+      const filteredData = this.tableData.filter(field => {
+        return field.source !== '' && field.target !== ''
+      })
+      // this.$emit('input', {
+      //   field: filteredData
+      // })
+      this.$emit('update:modelValue', {
+        field: filteredData
+      })
+    }, {
+      // deep为true可以监控数组中的元素的某个属性的变化
+      deep: true
+    })
+  },
+  methods: {
+    getSubFormFieldLabel(name) {
+      const fields = this.srcFields || this.targetFields
+      const field = fields.filter(item => {
+        return item.name === name
+      })
+      if (field.length > 0) {
+        return field[0].label
+      } else {
+        return name
+      }
+    },
+    showSourceFieldLabel(value) {
+      if (this.srcFields) {
+        return this.getSubFormFieldLabel(value)
+      } else {
+        return getFormFieldLabel(value)
+      }
+    },
+    showTargetFieldLabel(value) {
+      if (this.targetFields) {
+        return this.getSubFormFieldLabel(value)
+      } else {
+        return getFormFieldLabel(value)
+      }
+    },
+    add() {
+      for (let i = 0; i < this.tableData.length; i++) {
+        if (this.tableData[i].source === '' || this.tableData[i].target === '') {
+          this.$alert(this.$t('workflowEditorMessage.dataInLineCannotBeEmpty', { row: (i + 1), data1: this.srcLabel, data2: this.targetLabel }))
+          return
+        }
+      }
+      const newRow = {
+        source: '',
+        target: ''
+      }
+      this.tableData.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.tableData.length; i++) {
+        if (this.tableData[i].source === this.currentRow.source) {
+          index = i
+          break
+        }
+      }
+      this.tableData.splice(index, 1)
+      // 当前选中的index如果是最后一行，那么删除后，index会等于length造成下标越界，因此需要让index等于新的最后一行
+      index = (index <= (this.tableData.length - 1) ? index : (this.tableData.length - 1))
+      this.setCurrentRow(this.tableData[index])
+    },
+    setCurrentRow(row) {
+      this.$refs.table.setCurrentRow(row)
+    },
+    handleCurrentChange(val) {
+      this.currentRow = val
+    },
+    checkSource(name) {
+      if (name === '') {
+        this.$alert(this.$t('workflowEditorMessage.dataCannotBeEmpty', { data: this.srcLabel }))
+      }
+    },
+    checkTarget(value) {
+      if (value === '') {
+        this.$alert(this.$t('workflowEditorMessage.dataCannotBeEmpty', { data: this.targetLabel }))
+      }
+    },
+    selectField(field) {
+      if (this.showSourceFields) {
+        this.currentRow['source'] = field
+        // this.$set(this.currentRow, 'source', field)
+        this.showSourceFields = false
+      }
+      if (this.showTargetFields) {
+        this.currentRow['target'] = field
+        // this.$set(this.currentRow, 'target', field)
+        this.showTargetFields = false
+      }
+      console.log('this.tableData===', this.tableData, 'this.srcFields===', this.srcFields, 'this.targetFields===', this.targetFields)
+    }
+  }
+}
+</script>