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

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

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="bpmn-node-properties__attribute-list">
+      <div v-for="(item,index) in paramsList" :key="index" class="add-params-item">
+        <div class="add-params-item-left">
+          <div class="attribute-item">
+            <div class="bpmn-node-properties__attribute-input">
+              <label class="bpmn-node-properties__attribute-input__label"
+                >{{item.name}}</label
+              >
+              <div class="bpmn-node-properties__designated-input">
+                <el-input v-model="item.keyName" placeholder="请输入参数名"></el-input>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="add-params-item-right">
+          <i class="el-icon-close" @click="deleteParams(index)"></i>
+        </div>
+      </div>
+      <div>
+      <el-popover ref="popover" trigger="click" :tabindex="1">
+        <template v-slot:reference><el-button style="margin:10px 0" type="primary" link plain size="small">+添加参数</el-button></template>
+        <div class="bpmn-node-properties__scope-opera__popper">
+          <el-tree :data="globalParamsData" node-key="label" :props="{
+              children: 'children',
+              label: 'text'
+            }" @node-click="addParams($event,item)">
+            <template v-slot="{ node }"><span v-html="node.label"></span></template>
+          </el-tree>
+        </div>
+      </el-popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-bpmn-params-output',
+  props: {
+    globalParamsData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    inParamData: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    elementValues: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      paramsList: []
+    }
+  },
+  watch: {
+    paramsList: {
+      handler () {
+        this.saveNodeData()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    deleteParams (index) {
+      this.paramsList.splice(index, 1)
+    },
+    addParams (item) {
+      if (!item.leaf) return
+      const obj = { name: item.text, code: item.code, paramsType: item.paramsType, keyName: item.code }
+      this.paramsList.push(obj)
+    },
+    saveNodeData () {
+      this.$emit('updateElementValues', {
+        key: 'camunda:paramsOutput',
+        data: JSON.stringify(this.paramsList)
+      })
+    },
+    getParamsOutputDataList () {
+      if (!this.$_.isEmpty(this.elementValues['camunda:paramsOutput']) && this.elementValues['camunda:paramsOutput'] !== '[]') {
+        const paramsOutput = this.elementValues['camunda:paramsOutput']
+        if (paramsOutput) {
+          this.paramsList = JSON.parse(paramsOutput)
+        }
+      }
+    }
+  },
+  created () {
+    this.getParamsOutputDataList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-params-item{
+  // margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  // border-top: 1px solid var(--epx-border);
+  padding-top: 10px;
+}
+// .add-params-item-left{
+//   // flex: 1;
+// }
+.add-params-item-right{
+  width: 20px;
+  text-align: right;
+  margin-left: 10px;
+}
+.el-icon-close{
+  cursor: pointer;
+  visibility: hidden;
+}
+.add-params-item:hover{
+  .el-icon-close{
+    visibility: visible;
+  }
+}
+</style>

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

@@ -0,0 +1,443 @@
+<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="processAuditData.formDataSources">
+            <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="processAuditData.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="onMetaConfigChange"></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="processAuditData.findType">
+            <el-radio label="1" value="1">设置查询条件</el-radio>
+            <el-radio label="2" value="2">动态指定对象ID</el-radio>
+          </el-radio-group>
+        </div>
+      </li>
+      <li class="attribute-item"  v-if="processAuditData.findType==='1'">
+        <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 processAuditData.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" v-if="processAuditData.findType==='2'">
+        <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="processAuditData.findIdValueC"  placeholder="参数"></el-input></template>
+              <div class="bpmn-node-properties__scope-opera__popper">
+                <el-tree :data="globalParamsData" node-key="label" :props="{
+                    children: 'children',
+                    label: 'text'
+                  }" @node-click="selectDynamicParams">
+                  <template v-slot="{ node }"><span v-html="node.label"></span></template>
+                </el-tree>
+              </div>
+            </el-popover>
+          </div>
+        </div>
+      </li>
+      <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="processAuditData.auditType">
+            <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>
+      </li>
+      <li class="attribute-item" v-if="processAuditData.auditType==='1'||processAuditData.auditType==='2'">
+        <div class="bpmn-node-properties__attribute-input">
+          <label class="bpmn-node-properties__attribute-input__label">指定方式</label>
+          <el-radio-group v-model="processAuditData.appointType">
+            <el-radio label="1" value="1">直接指定</el-radio>
+            <el-radio label="2" value="2">动态指定</el-radio>
+          </el-radio-group>
+        </div>
+      </li>
+      <!-- 指定操作 -->
+      <template v-if="processAuditData.auditType==='1'">
+        <li class="attribute-item" v-if="processAuditData.appointType==='1'">
+          <div class="bpmn-node-properties__attribute-input">
+            <label class="bpmn-node-properties__attribute-input__label">设置审批操作</label>
+            <el-radio-group v-model="processAuditData.activeType">
+              <el-radio label="agree" value="agree">同意</el-radio>
+              <el-radio label="disagree" value="disagree">驳回</el-radio>
+              <el-radio label="return" value="return">退回</el-radio>
+            </el-radio-group>
+          </div>
+        </li>
+      </template>
+      <!-- 指定连线 -->
+      <template v-if="processAuditData.auditType==='2'">
+        <li class="attribute-item" v-if="processAuditData.appointType==='1'">
+          <div class="bpmn-node-properties__attribute-input">
+            <label class="bpmn-node-properties__attribute-input__label">选择审批流程</label>
+            <epx-table-form-item :value="{id: processAuditData.auditProcess, name: processAuditData.auditProcessName}"
+             @change="chooseProcess" :fieldConfigs="{attriName: 'auditProcess', attriLabel: '选择审批流程', dataType:'object', codeKey: 'ACT_RE_MODEL', state: 'EDIT'}"></epx-table-form-item>
+          </div>
+        </li>
+        <li class="attribute-item" v-if="processAuditData.appointType==='1'">
+          <div class="bpmn-node-properties__attribute-input">
+            <label class="bpmn-node-properties__attribute-input__label">选择节点连线</label>
+              <el-select class="bpmn-node-properties__designated-input" v-model="processAuditData.processNodeId" placeholder="请选择">
+                <el-option v-for="item in processFlowList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+          </div>
+        </li>
+      </template>
+      <template v-if="processAuditData.auditType==='1'||processAuditData.auditType==='2'">
+        <li class="attribute-item" v-if="processAuditData.appointType==='2'">
+          <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="processAuditData.dynamicActiveValueC"  placeholder="参数"></el-input></template>
+                <div class="bpmn-node-properties__scope-opera__popper">
+                  <el-tree :data="globalParamsData" node-key="label" :props="{
+                      children: 'children',
+                      label: 'text'
+                    }" @node-click="selectDynamicActiveParams">
+                    <template v-slot="{ node }"><span v-html="node.label"></span></template>
+                  </el-tree>
+                </div>
+              </el-popover>
+            </div>
+          </div>
+        </li>
+      </template>
+      <div class="bpmn-node-properties__jiedina-header bpmn-node-properties__jiedina-content-header"><span>设置流程参数</span></div>
+        <li class="attribute-item" v-if="processAuditData.processParams.length>0">
+          <div class="bpmn-node-properties__attribute-input bpmn-node-properties__attribute-input-update" v-for="(field, index) in processAuditData.processParams" :key="index">
+          <el-input class="bpmn-node-properties__input-params-key" v-model="field.code" placeholder="参数名"></el-input>
+          <!-- <label class="bpmn-node-properties__attribute-input__label">{{field.text}}</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="dynamic"></el-option>
+              <el-option label="公式" value="formula"></el-option>
+            </el-select>
+          </div>
+          <div>
+            <template v-if="field.valueType==='designated'">
+                <epx-table-form-item :show-label="false" valueWidth="auto" :value="field.value" :valueLabel="field.valueC" @change="v=> changeFormData(field,v)" :field-configs="{attriName: field.code, dataType:field.dataType, codeKey:field.codeKey,attriLabel: field.name, state: 'ADD'}"></epx-table-form-item>
+            </template>
+            <template v-else-if="field.valueType==='formula'">
+              <epx-rule v-model="field.value" :selfStyle="false" :fieldConfigs="{attriName: 'value', attriLabel: '判断条件', dataType:'rule',rows:2, state: 'EDIT'}"
+                :extendVariable="ruleVariable" :ruleMetaId="businessMetaId">
+                <el-input class="bpmn-node-properties__designated-input" :model-value="getChineseValue(field.value)" placeholder="请点击输入"></el-input>
+              </epx-rule>
+            </template>
+            <template v-else-if="field.valueType==='dynamic'">
+              <div>
+                <el-popover ref="popover" trigger="click" :tabindex="1">
+                  <template v-slot:reference><el-input class="bpmn-node-properties__designated-input" :model-value="field.valueC"  placeholder="参数"></el-input></template>
+                  <div class="bpmn-node-properties__scope-opera__popper">
+                    <el-tree :data="globalParamsData" node-key="label" :props="{
+                        children: 'children',
+                        label: 'text'
+                      }" @node-click="selectFieldDynamicParams($event,field)">
+                      <template v-slot="{ node }"><span v-html="node.label"></span></template>
+                    </el-tree>
+                  </div>
+                </el-popover>
+              </div>
+            </template>
+          </div>
+          <div class="close-object-field">
+            <i class="el-icon-close" @click="deleteParamsField(index)"></i>
+            <!-- <el-button style="marginLeft:10px" type="primary" link>删除</el-button> -->
+          </div>
+          </div>
+        </li>
+      <div>
+          <el-button style="margin:10px 0" type="primary" plain size="small" @click="addParams">+添加参数</el-button>
+        <!-- <el-popover ref="popover" trigger="click" :tabindex="1">
+          <el-button slot="reference" style="margin:10px 0" type="primary" link plain size="small">+添加参数</el-button>
+          <div class="bpmn-node-properties__scope-opera__popper">
+            <el-tree :data="globalParamsData" node-key="label" :props="{
+                children: 'children',
+                label: 'text'
+              }" @node-click="addParams">
+              <span v-html="node.label" slot-scope="{ node }"></span>
+            </el-tree>
+          </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="processAuditData.findScopeParams"
+      :params="processAuditData.findScopeParams" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-bpmn-process-audit',
+  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 {
+      processAuditData: {
+        formDataSources: '1',
+        metaType: 'designated',
+        formDataMeta: '',
+        formDataMetaName: '',
+        dynamicMeta: '',
+        dynamicMetaType: '',
+        dynamicMetaValueC: '',
+        findType: '',
+        findId: '',
+        findIdParamsType: '',
+        findIdValueC: '',
+        findScopeParams: [],
+        auditType: '',
+        appointType: '',
+        activeType: '',
+        dynamicActive: '',
+        dynamicActiveValueC: '',
+        dynamicActiveParamsType: '',
+        auditProcess: '',
+        auditProcessName: '',
+        processNodeId: '',
+        processParams: []
+      },
+      scopeMetaId: '',
+      showScopeDrawerDialog: false,
+      processFlowList: []
+    }
+  },
+  computed: {
+    getChineseValue () {
+      return (value) => {
+        let string = ''
+        if (value) {
+          string = JSON.parse(value).elText
+        }
+        return string
+      }
+    },
+    // 业务对象选择器的取值代理，保持数据扁平存储在 processAuditData 上
+    metaConfig: {
+      get () {
+        const d = this.processAuditData
+        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.processAuditData, key, v[key]))
+      }
+    }
+  },
+  watch: {
+    processAuditData: {
+      handler () {
+        this.saveNodeData()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    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
+    },
+    deleteParamsField (index) {
+      this.processAuditData.processParams.splice(index, 1)
+    },
+    selectFieldDynamicParams (paramItem, field, index) {
+      if (!paramItem.leaf) return
+      field.valueC = paramItem.text
+      field.value = paramItem.code
+      field.paramsType = paramItem.paramsType
+    },
+    addParams () {
+      const obj = { code: '', value: '', valueC: '', paramsType: '', valueType: 'designated' }
+      // if (!item.leaf) return
+      // const obj = { ...item, value: '', valueC: '', paramsType: '', valueType: 'designated' }
+      this.processAuditData.processParams.push(obj)
+    },
+    chooseProcess (v) {
+      this.processFlowList = []
+      this.processAuditData.processNodeId = ''
+      this.processAuditData.auditProcess = v ? v.id : ''
+      this.processAuditData.auditProcessName = v ? v.name : ''
+      this.getProcessFlow(this.processAuditData.auditProcess)
+    },
+    getProcessFlow () {
+      if (!this.processAuditData.auditProcess) return
+      if (this.processAuditData.formDataSources === '3') {
+        const formDataMetaId = this.processAuditData.formDataMeta
+        if (this.$_.isEmpty(formDataMetaId)) {
+          this.$message.error('请先选择数据对象')
+          return
+        }
+      }
+      const scopeMetaId = this.processAuditData.formDataSources === '3' ? this.processAuditData.formDataMeta : this.businessMetaId
+      this.scopeMetaId = scopeMetaId
+      this.$http.get({
+        action: 'getProcessFlow',
+        entityId: 'ACT_RE_MODEL',
+        processId: this.processAuditData.auditProcess,
+        currentMetaId: scopeMetaId
+      })
+        .then(data => {
+          this.processFlowList = data.map(item => ({ ...item, name: item.sourceFlowName + '-' + item.name }))
+        })
+    },
+    selectDynamicActiveParams (item) {
+      if (!item.leaf) return
+      this.processAuditData.dynamicActive = item.code
+      this.processAuditData.dynamicActiveParamsType = item.paramsType
+      this.processAuditData.dynamicActiveValueC = item.text
+    },
+    selectDynamicParams (item) {
+      if (!item.leaf) return
+      this.processAuditData.findId = item.code
+      this.processAuditData.findIdParamsType = item.paramsType
+      this.processAuditData.findIdValueC = item.text
+    },
+    settingSearchScope () {
+      if (this.processAuditData.formDataSources === '3') {
+        const formDataMetaId = this.processAuditData.formDataMeta
+        if (this.$_.isEmpty(formDataMetaId)) {
+          this.$message.error('请先选择数据对象')
+          return
+        }
+      }
+      const scopeMetaId = this.processAuditData.formDataSources === '3' ? this.processAuditData.formDataMeta : this.businessMetaId
+      this.scopeMetaId = scopeMetaId
+      this.showScopeDrawerDialog = true
+    },
+    // 业务对象变化时同步设计时作用域：指定值用所选对象，动态值回退默认对象
+    onMetaConfigChange (v) {
+      this.scopeMetaId = v.metaType === 'designated' && v.formDataMeta ? v.formDataMeta : this.businessMetaId
+    },
+    saveNodeData () {
+      this.$emit('updateElementValues', {
+        key: 'camunda:processAuditData',
+        data: JSON.stringify(this.processAuditData)
+      })
+    },
+    getNodeParamsData () {
+      if (!this.$_.isEmpty(this.elementValues['camunda:processAuditData']) && this.elementValues['camunda:processAuditData'] !== '{}') {
+        const processAuditData = this.elementValues['camunda:processAuditData']
+        if (processAuditData) {
+          this.processAuditData = JSON.parse(processAuditData)
+          // 兼容历史数据：未配置业务对象类型时默认为指定值
+          if (!this.processAuditData.metaType) {
+            this.$set(this.processAuditData, 'metaType', 'designated')
+            this.$set(this.processAuditData, 'dynamicMeta', '')
+            this.$set(this.processAuditData, 'dynamicMetaType', '')
+            this.$set(this.processAuditData, 'dynamicMetaValueC', '')
+          }
+        }
+      } else {
+        this.processAuditData = {
+          formDataSources: '1',
+          metaType: 'designated',
+          formDataMeta: '',
+          formDataMetaName: '',
+          dynamicMeta: '',
+          dynamicMetaType: '',
+          dynamicMetaValueC: '',
+          findType: '',
+          findId: '',
+          findIdParamsType: '',
+          findIdValueC: '',
+          findScopeParams: [],
+          auditType: '',
+          appointType: '',
+          activeType: '',
+          dynamicActive: '',
+          dynamicActiveValueC: '',
+          dynamicActiveParamsType: '',
+          auditProcess: '',
+          auditProcessName: '',
+          processNodeId: '',
+          processParams: []
+        }
+      }
+      console.log(this.processAuditData)
+      this.getProcessFlow()
+    }
+  },
+  created () {
+    this.getNodeParamsData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.close-object-field{
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>