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

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

@@ -0,0 +1,275 @@
+<template>
+  <el-form :model="formModel">
+    <el-form-item label="">
+      <el-radio-group v-model="formModel.transactor" @change="transactorChange">
+        <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="byDeptField">
+		      {{ $t('workflowEditor.process.deptSpecifiedInFormField') }}
+	      </el-radio>
+        <el-radio label="byCondition">
+          {{ $t('workflowEditor.process.filterByCriteria') }}
+        </el-radio>
+      </el-radio-group>
+      <div style="width: 100%" v-if="formModel.transactor==='byCondition'">
+        <common-user-condition v-model="formModel.userCondition" used-in="transactor" />
+      </div>
+    </el-form-item>
+      <el-form-item
+        v-if="formModel.transactor==='byField'  || formModel.transactor==='byDeptField' "
+        prop="selectedField"
+        :rules="[{ required: true, message: $t('workflowEditor.process.fieldName') + $t('workflowEditor.common.canNotBeEmpty'), trigger: 'focus' }]"
+        :label="$t('workflowEditor.process.fieldName')"
+        label-width="80px"
+      >
+        <el-input :value="formatLabel(formModel.selectedField)" @click="showFormFields=true" />
+        <form-fields v-if="showFormFields" @close="setField" />
+      </el-form-item>
+      <div v-if="formModel.transactor==='byCondition' || formModel.transactor==='byField' || formModel.transactor==='byDeptField'">
+        <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-checkbox v-if="isCountersign" v-model="formModel.additionalCondition.activateOneVoteVeto">
+		        {{ $t('workflowEditor.process.activateOneVoteVeto') }}
+	        </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
+      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
+    },
+	  // basicProperties
+	  basicProperties: {
+		  type: Object,
+		  default: null
+	  }
+  },
+  data() {
+    /**
+     * 这个页签上有很多的动态效果，为了保持这些效果切换时，值不丢失，不能直接使用传进来的model对象，
+     * 而是要复制一份数据保存到formModel中,这样动态改变model时，formModel中的数据还存在，
+     * 用户在不同选项间切换时，数据得以保留，这样用户体验能好点。但是细节的处理确实比较繁琐，需要注意。
+     */
+    const formModel = { selectedField: '' }
+    // 不直接使用model.userCondition是为了在流程发起人等四个方式间切换时，设置的筛选条件不丢失
+    this.initFormModel(formModel)
+    return {
+      showFormFields: false,
+      formModel,
+	    isCountersign: false
+    }
+  },
+  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
+    })
+	  this.$watch('basicProperties', function() {
+		  this.showActivateOneVoteVeto()
+	  }, {
+		  deep: true
+	  })
+	  this.showActivateOneVoteVeto()
+  },
+  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.startsWith('${field[') && userCondition.indexOf('${field[') >= 0 && userCondition.indexOf('"selectedField": "${field[') < 2) {
+          formModel.transactor = 'byField'
+          formModel.selectedField = userCondition
+        } else if (userCondition.startsWith('${deptField[')) {
+	        formModel.transactor = 'byDeptField'
+	        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) {
+	      if (this.formModel.transactor === 'byDeptField') {
+		      this.formModel.selectedField = '${deptField[' + name + ']}'
+		      this.model.userCondition = this.formModel.selectedField
+	      } else {
+		      this.formModel.selectedField = '${field[' + name + ']}'
+		      this.model.userCondition = this.formModel.selectedField
+	      }
+      }
+      this.showFormFields = false
+    },
+	  /**
+	   * 会签时显示一票否决配置
+	   */
+	  showActivateOneVoteVeto() {
+		  if (this.basicProperties && this.basicProperties.processingMode) {
+			  if (this.basicProperties.processingMode.type === 'COUNTERSIGN') {
+				  this.isCountersign = true
+			  } else {
+				  this.isCountersign = false
+				  this.formModel.additionalCondition.activateOneVoteVeto = false
+			  }
+		  }
+		},
+		transactorChange () {
+      this.formModel.selectedField = null
+   }
+  }
+}
+</script>