@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/custom-bpmn/components/ObjectTransform.vue

@@ -0,0 +1,454 @@
+<template>
+  <div>
+    <ul class="bpmn-node-properties__attribute-list">
+      <div class="bpmn-node-properties__jiedina-header bpmn-node-properties__jiedina-content-header"><span>选择转换对象</span></div>
+      <li class="attribute-item">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">转换类型</label>
+          <el-radio-group v-model="objectTransform.transformType">
+            <el-radio label="1" value="1">单条</el-radio>
+            <el-radio label="2" value="2">多条</el-radio>
+          </el-radio-group>
+        </div>
+      </li>
+      <li class="attribute-item">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">源对象</label>
+          <el-radio-group v-model="objectTransform.formDataSources" @change="changeType">
+            <el-radio label="1" value="1">默认主对象</el-radio>
+            <el-radio label="3" value="3">指定对象</el-radio>
+          </el-radio-group>
+        </div>
+      </li>
+      <li class="attribute-item" v-if="objectTransform.formDataSources==='3'">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">数据对象</label>
+          <epx-bpmn-meta-select v-model="metaConfig" :globalParamsData="globalParamsData" attriLabel="数据对象" @change="getFormMetaFields"></epx-bpmn-meta-select>
+        </div>
+      </li>
+      <!-- 查询方式 -->
+      <li class="attribute-item">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">查询方式</label>
+          <el-radio-group v-model="objectTransform.findType">
+            <el-radio label="1" value="1">指定ID查询</el-radio>
+            <el-radio label="2" value="2">设置查询条件</el-radio>
+          </el-radio-group>
+        </div>
+      </li>
+      <li class="attribute-item" v-if="objectTransform.findType==='1'">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">指定ID查询</label>
+          <div>
+            <el-popover ref="popover" trigger="click" :tabindex="1">
+              <template v-slot:reference><el-input class="bpmn-node-properties__designated-input" :model-value="objectTransform.findIdValueC"  placeholder="参数"></el-input></template>
+              <epx-bpmn-global-params-tree :globalParamsData="globalParamsData" @nodeClick="selectDynamicParams"></epx-bpmn-global-params-tree>
+            </el-popover>
+          </div>
+        </div>
+      </li>
+      <li class="attribute-item"  v-if="objectTransform.findType==='2'">
+        <div class="bpmn-node-properties__attribute-input attribute-input-top">
+          <label class="bpmn-node-properties__attribute-input__label">查询条件</label>
+          <div>
+            <div class="bpmn-node-properties__scope-item-line"
+            v-for="(item,index) in objectTransform.findScopeParams" :key="index">
+            <span class="bpmn-node-properties__scope-text">{{item.text}}</span>
+            <span class="bpmn-node-properties__scope-link">{{item.linkLabel||item.link||''}}</span></div>
+            <el-button type="primary" link @click="settingSearchScope">设置</el-button>
+          </div>
+        </div>
+      </li>
+      <!-- 初始条件 -->
+      <li class="attribute-item" >
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">初始条件</label>
+          <div>
+            <el-popover ref="popover" trigger="click" :tabindex="1">
+              <template v-slot:reference><el-input class="bpmn-node-properties__designated-input" :model-value="objectTransform.queryValueC"  placeholder="设置"></el-input></template>
+              <epx-bpmn-global-params-tree :globalParamsData="globalParamsData" @nodeClick="selectQueryDynamicParams"></epx-bpmn-global-params-tree>
+            </el-popover>
+          </div>
+        </div>
+      </li>
+      <li class="attribute-item">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">排序字段</label>
+          <div>
+            <div class="find-field-type-con">
+              <el-radio-group v-model="objectTransform.orderFieldType">
+                <el-radio label="1" value="1">无</el-radio>
+                <el-radio label="2" value="2">指定字段</el-radio>
+                <el-radio label="3" value="3">动态指定</el-radio>
+              </el-radio-group>
+            </div>
+            <div style="marginTop:5px">
+              <div v-if="objectTransform.orderFieldType==='2'">
+                <epx-visual-config-order-field
+                  :showFieldWay="false"
+                  :value="objectTransform.orderFieldsArr"
+                  :metaId="objectTransform.formDataMeta ||businessMetaId"
+                  :treeFieldStore="treeFieldStore"
+                  @change-configs="changeConfigItem"
+                      />
+              </div>
+              <div v-if="objectTransform.orderFieldType==='3'">
+                  <el-popover ref="popover" trigger="click" :tabindex="1">
+                    <template v-slot:reference><el-input class="bpmn-node-properties__designated-input" :model-value="objectTransform.orderDynamicFieldValueC"  placeholder="字段设置"></el-input></template>
+                    <epx-bpmn-global-params-tree :globalParamsData="globalParamsData" @nodeClick="selectOrderDynamicFieldParams($event,'field')"></epx-bpmn-global-params-tree>
+                  </el-popover>
+                  <el-popover ref="popover" trigger="click" :tabindex="1">
+                    <template v-slot:reference><el-input class="bpmn-node-properties__designated-input" style="marginTop:5px" :model-value="objectTransform.orderDynamicModeValueC"  placeholder="排序设置"></el-input></template>
+                    <epx-bpmn-global-params-tree :globalParamsData="globalParamsData" @nodeClick="selectOrderDynamicFieldParams($event,'orderMode')"></epx-bpmn-global-params-tree>
+                  </el-popover>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li class="attribute-item">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">目标对象</label>
+          <epx-table-form-item class="bpmn-node-properties__form-item"
+          :value="{id: objectTransform.targetDataMeta, name: objectTransform.targetDataMetaName}"
+          @change="setFormMeta('target',$event)" :fieldConfigs="{attriName: 'targetDataMeta', attriLabel: '目标对象', dataType:'object', codeKey: 'FM_ENTITY', state: 'EDIT'}"></epx-table-form-item>
+        </div>
+      </li>
+      <div class="bpmn-node-properties__jiedina-header bpmn-node-properties__jiedina-content-header"><span>设置转换方式</span></div>
+      <div class="bpmn-node-properties__attribute-input bpmn-node-properties__attribute-input-update" v-for="(field,fIndex) in objectTransform.fields" :key="field.id">
+        <label class="bpmn-node-properties__attribute-input__label">{{field.attriLabel}}</label>
+        <div class="bpmn-node-properties__attribute-input-type">
+          <el-select v-model="field.valueType" placeholder="请选择" @change="field.value='',field.valueC='',field.paramsType=''">
+            <el-option label="指定值" value="designated"></el-option>
+            <el-option label="动态值" value="dynamicParam"></el-option>
+            <el-option label="公式" value="dynamic"></el-option>
+            <el-option label="直接匹配" value="match"></el-option>
+          </el-select>
+        </div>
+        <template v-if="field.valueType==='designated'">
+          <div class="bpmn-node-properties__attribute-input__con">
+            <epx-table-form-item :show-label="false" valueWidth="auto" :value="field.value" :valueLabel="field.valueC" @change="v=> changeFormData(field,v)"
+              :field-configs="{...field, state: 'ADD'}">
+            </epx-table-form-item>
+          </div>
+        </template>
+        <template v-else-if="field.valueType==='dynamic'">
+          <epx-rule v-model="field.value" :selfStyle="false" :fieldConfigs="{attriName: 'value', attriLabel: '判断条件', dataType:'rule',rows:2, state: 'EDIT'}"
+            :extendVariable="ruleVariable" :ruleMetaId="objectTransform.targetDataMeta">
+            <el-input class="bpmn-node-properties__attribute-input__con" :model-value="getChineseValue(field.value)" placeholder="请点击输入"></el-input>
+          </epx-rule>
+        </template>
+        <template v-else-if="field.valueType==='dynamicParam'">
+          <div>
+            <el-popover ref="popover" trigger="click" :tabindex="1">
+              <template v-slot:reference><el-input class="bpmn-node-properties__attribute-input__con" :model-value="field.valueC"  placeholder="参数"></el-input></template>
+              <epx-bpmn-global-params-tree :globalParamsData="globalParamsData" @nodeClick="selectFieldDynamicParams($event,field,fIndex)"></epx-bpmn-global-params-tree>
+            </el-popover>
+          </div>
+        </template>
+        <template v-else-if="field.valueType==='match'">
+          <div>
+            <el-select v-model="field.value" placeholder="请选择">
+              <el-option v-for="formMeta in formMetaFields" :key="formMeta.attribute.id" :label="formMeta.attriLabel" :value="formMeta.attriName"></el-option>
+            </el-select>
+          </div>
+        </template>
+        <div class="bpmn-node-properties__filter-condition__delete">
+          <i class="el-icon-close" @click="deleteParamsField(fIndex)"></i>
+        </div>
+      </div>
+      <div>
+        <el-popover ref="popover" trigger="click" :tabindex="1">
+          <template v-slot:reference><el-button type="primary" link>+添加普通字段</el-button></template>
+          <div class="bpmn-node-properties__update-add-field__popper">
+            <div class="bpmn-node-properties__update-add-field__popper_item" v-for="field in targetMetaFields" :key="field.id" @click="addField(field)">{{field.attriLabel}}</div>
+          </div>
+        </el-popover>
+      </div>
+    </ul>
+    <epx-scope-drawer v-model:visible="showScopeDrawerDialog" :metaId="scopeMetaId"
+      :fieldValueMetaId="businessMetaId"
+      :extendMode="globalParamsData"
+      onlyShowMainEntityFieldFlag
+      :modeType="['FIXED_VALUE', 'FIELD_VALUE']"
+      v-model="objectTransform.findScopeParams"
+      :params="objectTransform.findScopeParams" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-bpmn-object-transform',
+  props: {
+    globalParamsData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    inParamData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    ruleVariable: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    elementValues: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    businessMetaId: String
+  },
+  data () {
+    return {
+      objectTransform: {},
+      scopeMetaId: '',
+      showScopeDrawerDialog: false,
+      targetMetaFields: [],
+      formMetaFields: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    treeFieldStore () {
+      const metaId = this.objectTransform.formDataMeta || this.businessMetaId
+      return this.getMetaViewFields(metaId)
+    },
+    getChineseValue () {
+      return (value) => {
+        let string = ''
+        if (value) {
+          string = JSON.parse(value).elText
+        }
+        return string
+      }
+    },
+    // 源对象选择器的取值代理，保持数据扁平存储在 objectTransform 上
+    metaConfig: {
+      get () {
+        const d = this.objectTransform
+        return {
+          metaType: d.metaType,
+          formDataMeta: d.formDataMeta,
+          formDataMetaName: d.formDataMetaName,
+          dynamicMeta: d.dynamicMeta,
+          dynamicMetaType: d.dynamicMetaType,
+          dynamicMetaValueC: d.dynamicMetaValueC
+        }
+      },
+      set (v) {
+        Object.keys(v).forEach(key => this.$set(this.objectTransform, key, v[key]))
+      }
+    }
+  },
+  watch: {
+    objectTransform: {
+      handler () {
+        this.saveNodeData()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    changeType (v) {
+      if (v === '1') {
+        this.objectTransform.formDataMeta = ''
+        this.objectTransform.formDataMetaName = ''
+        this.getFormMetaFields()
+      }
+    },
+    selectOrderDynamicFieldParams (item, type) {
+      if (!item.leaf) return
+      if (type === 'field') {
+        this.objectTransform.orderDynamicField = item.code
+        this.objectTransform.orderDynamicFieldParamsType = item.paramsType
+        this.objectTransform.orderDynamicFieldValueC = item.text
+      } else {
+        this.objectTransform.orderDynamicMode = item.code
+        this.objectTransform.orderDynamicModeParamsType = item.paramsType
+        this.objectTransform.orderDynamicModeValueC = item.text
+      }
+    },
+    changeConfigItem (v) {
+      const field = v.map(item => item.attriName || item)
+      const orderMode = v.map(item => item.sort || 'asc')
+      this.objectTransform.orderFields = field
+      this.objectTransform.orderMode = orderMode
+      this.objectTransform.orderFieldsArr = v
+    },
+    settingSearchScope () {
+      if (this.objectTransform.formDataSources === '3') {
+        const formDataMetaId = this.objectTransform.formDataMeta
+        if (this.$_.isEmpty(formDataMetaId)) {
+          this.$message.error('请先选择数据对象')
+          return
+        }
+      }
+      const scopeMetaId = this.objectTransform.formDataSources === '3' ? this.objectTransform.formDataMeta : this.businessMetaId
+      this.scopeMetaId = scopeMetaId
+      this.showScopeDrawerDialog = true
+    },
+    setFormMeta (type, v) {
+      if (type === 'formData') {
+        this.objectTransform.formDataMeta = v ? v.id : ''
+        this.objectTransform.formDataMetaName = v ? v.name : ''
+        this.getFormMetaFields()
+      } else {
+        this.objectTransform.targetDataMeta = v ? v.id : ''
+        this.objectTransform.targetDataMetaName = v ? v.name : ''
+        this.objectTransform.fields = []
+        this.getTargetMetaFields()
+      }
+    },
+    changeFormData (field, v) {
+      let value = ''
+      let label = ''
+      if (Array.isArray(v)) {
+        value = v.map(item => item.id || item).join(',')
+        label = v.map(item => item.name || item).join('、')
+      } else if (typeof v === 'object') {
+        value = v.id
+        label = v.name
+      } else {
+        value = v
+      }
+      field.valueC = label || value
+      field.value = value
+      // this.$set(field, 'value', value)
+      // this.$set(field, 'valueC', label || value)
+    },
+    addField (field) {
+      const index = this.objectTransform.fields.findIndex(item => item.id === field.id)
+      if (index > -1) {
+        this.$message.error('已有该数据')
+        return
+      }
+      const obj = { ...field, value: '', valueC: '', paramsType: '', valueType: 'designated' }
+      this.objectTransform.fields.push(obj)
+    },
+    selectFieldDynamicParams (paramItem, field, index) {
+      if (!paramItem.leaf) return
+      field.valueC = paramItem.text
+      field.value = paramItem.code
+      field.paramsType = paramItem.paramsType
+    },
+    deleteParamsField (index) {
+      this.objectTransform.fields.splice(index, 1)
+    },
+    getFormMetaFields () {
+      const FormMeta = this.objectTransform.formDataMeta || this.businessMetaId
+      this.formMetaFields = []
+      if (this.$_.isEmpty(FormMeta)) {
+        return
+      }
+      this.$FieldFactory.createFields({
+        metaId: FormMeta
+      })
+        .then(data => {
+          this.formMetaFields = [...data]
+        })
+    },
+    getTargetMetaFields () {
+      const targetDataMeta = this.objectTransform.targetDataMeta
+      if (this.$_.isEmpty(targetDataMeta)) {
+        return
+      }
+      this.$FieldFactory.createFields({
+        metaId: targetDataMeta
+      })
+        .then(data => {
+          this.targetMetaFields = [...data].map(item => {
+            const obj = { ...item }
+            obj.id = item.attribute.id
+            delete obj.attribute
+            return obj
+          })
+        })
+    },
+    selectDynamicParams (item) {
+      if (!item.leaf) return
+      this.objectTransform.findId = item.code
+      this.objectTransform.findIdParamsType = item.paramsType
+      this.objectTransform.findIdValueC = item.text
+    },
+    selectQueryDynamicParams (item) {
+      if (!item.leaf) return
+      this.objectTransform.query = item.code
+      this.objectTransform.queryParamsType = item.paramsType
+      this.objectTransform.queryValueC = item.text
+    },
+    saveNodeData () {
+      this.$emit('updateElementValues', {
+        key: 'camunda:objectTransform',
+        data: JSON.stringify(this.objectTransform)
+      })
+    },
+    getNodeParamsData () {
+      if (!this.$_.isEmpty(this.elementValues['camunda:objectTransform']) && this.elementValues['camunda:objectTransform'] !== '{}') {
+        const objectTransform = this.elementValues['camunda:objectTransform']
+        if (objectTransform) {
+          this.objectTransform = JSON.parse(objectTransform)
+          // 兼容历史数据：未配置业务对象类型时默认为指定值
+          if (!this.objectTransform.metaType) {
+            this.$set(this.objectTransform, 'metaType', 'designated')
+            this.$set(this.objectTransform, 'dynamicMeta', '')
+            this.$set(this.objectTransform, 'dynamicMetaType', '')
+            this.$set(this.objectTransform, 'dynamicMetaValueC', '')
+          }
+        }
+        this.getTargetMetaFields()
+        this.getFormMetaFields()
+      } else {
+        this.objectTransform = {
+          transformType: '1',
+          formDataSources: '1',
+          metaType: 'designated',
+          formDataMeta: '',
+          formDataMetaName: '',
+          dynamicMeta: '',
+          dynamicMetaType: '',
+          dynamicMetaValueC: '',
+          findType: '',
+          findId: '',
+          findIdParamsType: '',
+          findIdValueC: '',
+          findScopeParams: [],
+          query: '',
+          queryParamsType: '',
+          queryValueC: '',
+          orderFieldType: '',
+          orderFields: [],
+          orderMode: [],
+          orderFieldsArr: [],
+          orderDynamicField: '',
+          orderDynamicFieldValueC: '',
+          orderDynamicFieldParamsType: '',
+          orderDynamicMode: '',
+          orderDynamicModeValueC: '',
+          orderDynamicModeParamsType: '',
+          targetDataMeta: '',
+          targetDataMetaName: '',
+          fields: []
+        }
+      }
+    }
+  },
+  created () {
+    this.getNodeParamsData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>