cloud-module-bpm 6.2.6

package/packages/bpm-jump-dialog/bpm-jump-dialog.vue

@@ -0,0 +1,378 @@
+<template>
+  <div>
+    <el-dialog
+      :title="opt.title"
+      :visible.sync="dialogVisible"
+      width="700px"
+      top="8vh"
+      @open="openDialog"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="bpmjump"
+    >
+      <el-form>
+        <div style="padding: 10px 0px 30px 0px">
+          <el-row>
+            <el-col :span="8" style="text-align: left">
+              {{ $t('bpm.jump.choice_activity') }}
+            </el-col>
+            <el-col :span="16">
+              <span style="padding-right:5px;line-height:2.5;">
+                {{ $t('bpm.jump.activity_name') }}
+              </span>
+              <el-select
+                style="width:200px"
+                @change="handleChange"
+                v-model="value"
+                :placeholder="$t('bpm.jump.please_select')"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+        </div>
+        <div>
+          <el-row style="text-align: left">
+            <el-col :span="8">{{ $t('bpm.jump.for_personnel') }}</el-col>
+          </el-row>
+          <el-table
+            :data="initialTableData"
+            tooltip-effect="dark"
+            stripe
+            height="150"
+            @select="handleSelect"
+            @select-all="handleSelectAll"
+            ref="eltableCurrentRow"
+          >
+            <el-table-column type="selection" width="55"> </el-table-column>
+            <el-table-column prop="name" :label="$t('bpm.jump.name')">
+            </el-table-column>
+            <el-table-column prop="code" :label="$t('bpm.jump.coding')">
+            </el-table-column>
+            <el-table-column prop="deptName" :label="$t('bpm.jump.department')">
+              <template slot-scope="scope">
+                <div :title="scope.row.deptName" class="cell-hidden">
+                  {{ scope.row.deptName }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div style="padding: 20px 0px 0px 0px">
+          <el-row style="text-align: left">
+            <el-col :span="8">{{
+              $t('bpm.jump.selected_personnel_list')
+            }}</el-col>
+          </el-row>
+          <el-table
+            :data="selectTableData"
+            tooltip-effect="dark"
+            stripe
+            height="150"
+            @row-click="handleRowClick"
+          >
+            <el-table-column width="55"></el-table-column>
+            <el-table-column prop="name" :label="$t('bpm.jump.name')">
+            </el-table-column>
+            <el-table-column prop="code" :label="$t('bpm.jump.coding')">
+            </el-table-column>
+            <el-table-column prop="deptName" :label="$t('bpm.jump.department')">
+              <template slot-scope="scope">
+                <div :title="scope.row.deptName" class="cell-hidden">
+                  {{ scope.row.deptName }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">{{
+          $t('base.button.cancel')
+        }}</el-button>
+        <el-button type="primary" @click="handleSave">{{
+          $t('base.button.ok')
+        }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  Dialog,
+  Aside,
+  Main,
+  Container,
+  Button,
+  Form,
+  FormItem,
+  Col,
+  Row,
+  Input,
+  Tabs,
+  TabPane
+} from 'element-ui';
+import axios from 'cloud-module-base/packages/httpConfig/http';
+export default {
+  name: 'bpm-jump',
+  components: {
+    'el-dialog': Dialog,
+    'el-aside': Aside,
+    'el-main': Main,
+    'el-container': Container,
+    'el-button': Button,
+    'el-form': Form,
+    'el-form-item': FormItem,
+    'el-col': Col,
+    'el-row': Row,
+    'el-input': Input,
+    'el-tabs': Tabs,
+    'el-tab-pane': TabPane
+  },
+  //父组件传过来的数据属性
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      required: true
+    },
+    ruleEngine: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      //默认参数
+      opt: {
+        title: this.$t('bpm.jump.dialog_title')
+      },
+      //业务id  从父组件ruleEngine中runtime->mainFrom中获取businessId = ruleEngine.runtime.mainForm.businessId
+      businessId: '',
+      //流程key
+      toTaskDefKey: '',
+      //初始值
+      initialTableData: [],
+      //选中的值
+      selectTableData: [],
+      //下拉框
+      options: [],
+      //下拉框初始值
+      value: '',
+      //批准类型
+      approveType: '',
+      currentRuleEngine: {}
+    };
+  },
+  created() {},
+  methods: {
+    handleRowClick(row, event, column) {
+      this.removeData(this.selectTableData, row);
+    },
+    ////取消已选中的
+    removeData(userData, row) {
+      //取消已选中的人员
+      var index = -1;
+      for (var i = 0; i < userData.length; i++) {
+        if (userData[i].code == row.code) {
+          index = i;
+        }
+      }
+      if (index != -1) {
+        userData.splice(index, 1);
+      }
+      //更新待选的人员
+      for (var i = 0; i < this.initialTableData.length; i++) {
+        if (this.initialTableData[i].code == row.code) {
+          this.$refs.eltableCurrentRow.toggleRowSelection(
+            this.initialTableData[i],
+            false
+          );
+        }
+      }
+    },
+
+    //全部取消或者删除
+    handleSelectAll(select) {
+      var _this = this;
+      if (
+        'onlyApprove' ==
+        _this.currentRuleEngine.runtime.nextNodes[0].approve.type
+      ) {
+        this.selectTableData = [];
+        this.$refs.eltableCurrentRow.clearSelection();
+      } else {
+        if (select.length > 0) {
+          // 全选
+          select.forEach(element => {
+            if (_this.indexOfselectTableData(element) == -1) {
+              _this.selectTableData.push(element);
+            }
+          });
+        } else {
+          //全取消
+          _this.initialTableData.forEach(element => {
+            var index = _this.indexOfselectTableData(element);
+            if (index != -1) {
+              _this.selectTableData.splice(index, 1);
+            }
+          });
+        }
+      }
+    },
+    handleSelect(select, row) {
+      var _this = this;
+
+      // 单人审批 只能选择一个
+      if (
+        'onlyApprove' ==
+        _this.currentRuleEngine.runtime.nextNodes[0].approve.type
+      ) {
+        // 清楚数据
+        _this.selectTableData = [];
+        _this.$refs.eltableCurrentRow.clearSelection();
+        if (_this.selectRow(select, row)) {
+          _this.$refs.eltableCurrentRow.toggleRowSelection(row);
+        }
+      }
+      if (_this.selectRow(select, row)) {
+        // 选中
+        //判断已选列表中是否存在该条数据
+        if (_this.indexOfselectTableData(row) == -1) {
+          _this.selectTableData.push(row);
+        }
+      } else {
+        //取消
+        //取消已选中的列表数据
+        var index = _this.indexOfselectTableData(row);
+        if (index != -1) {
+          _this.selectTableData.splice(index, 1);
+        }
+      }
+    },
+    //是选中还是取消
+    selectRow(select, row) {
+      return select.some(element => {
+        if (element.code == row.code) {
+          return true;
+        }
+      });
+    },
+    // 是否已选中该条数据
+    indexOfselectTableData(row) {
+      var index = -1;
+      var _this = this;
+      if (_this.selectTableData.length > 0) {
+        for (var i = 0; i < _this.selectTableData.length; i++) {
+          if (_this.selectTableData[i].code == row.code) {
+            index = i;
+            return index;
+          }
+        }
+      }
+      return index;
+    },
+    //下拉框change事件
+    handleChange(val) {
+      // var = 选中的label
+      var _this = this;
+      _this.selectTableData = [];
+      _this.toTaskDefKey = val;
+      _this.initialTableData = [];
+      _this.ruleEngine['bpmIsLatest'] = false;
+      // 为了解决入参过多的问题
+      let temRuleEngine = JSON.parse(JSON.stringify(_this.ruleEngine));
+      if (temRuleEngine.runtime) {
+        temRuleEngine.runtime = {};
+      }
+      if (temRuleEngine.opinion) {
+        temRuleEngine.opinion = {};
+      }
+      if (temRuleEngine.actors) {
+        temRuleEngine.actors = {};
+      }
+      axios['bpm-engine']
+        .post(
+          '/api/engine/bpm/query/jump/candidate/' +
+            _this.businessId +
+            '/' +
+            _this.toTaskDefKey,
+          temRuleEngine
+        )
+        .then(function(res) {
+          if (res.data.runtime.nextNodes[0].bpmUsers.length > 0) {
+            res.data.runtime.nextNodes[0].bpmUsers.forEach(element => {
+              var obj = {};
+              obj.name = element.name;
+              obj.code = element.code;
+              obj.deptName = element.deptName;
+              _this.initialTableData.push(obj);
+            });
+            _this.currentRuleEngine = res.data;
+            _this.approveType = res.data.approve.type;
+          }
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    },
+    openDialog() {
+      var _this = this;
+      _this.businessId = _this.ruleEngine.runtime.mainForm.businessId;
+      _this.requestData();
+    },
+    //关闭对话框
+    handleClose() {
+      this.options = [];
+      this.$emit('dialog-close', this.dialogVisible);
+    },
+    requestData() {
+      var _this = this;
+      axios['bpm-engine']
+        .post('/api/engine/bpm/query/jump/all/usertasks/' + _this.businessId, {
+          bpmIsLatest: false
+        })
+        .then(function(res) {
+          for (var key in res.data) {
+            var obj = {};
+            obj.label = res.data[key];
+            obj.value = key;
+            _this.options.push(obj);
+          }
+
+          //下拉框初始化选中数据
+          _this.value = _this.options[0].value;
+          _this.handleChange(_this.value);
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    },
+    handleSave() {
+      var _this = this;
+      if (_this.selectTableData.length == 0) {
+        _this.$message.warning(_this.$i18n.t('bpm.jump.please_personnel'));
+        return;
+      }
+      var codes = [];
+      _this.selectTableData.forEach(element => {
+        codes.push(element.code);
+      });
+
+      _this.ruleEngine[
+        _this.toTaskDefKey + '_' + _this.approveType
+      ] = codes.join(',');
+      _this.ruleEngine.toTaskDefKey = _this.toTaskDefKey;
+      _this.$emit('dialog-save', _this.ruleEngine);
+      _this.options = [];
+    }
+  },
+  mounted() {}
+};
+</script>

package/packages/bpm-jump-dialog/index.js

@@ -0,0 +1,7 @@
+import bpmJumpDialog from './bpm-jump-dialog.vue';
+
+/* istanbul ignore next */
+bpmJumpDialog.install = function(Vue) {
+  Vue.component(bpmJumpDialog.name, bpmJumpDialog);
+};
+export default bpmJumpDialog;

package/packages/bpm-jump-dialog/readme.md

@@ -0,0 +1 @@
+### 特送对话框

package/packages/bpm-jump-latest-dialog/Tree.vue

@@ -0,0 +1,91 @@
+<template>
+    <!-- 
+      load：加载子树数据方法 当lazy为true时可用
+      lazy:默认为false
+      data:数据展示
+      node-key:树节点唯一标识
+      @node-click:节点被点击时回调
+      default-expanded-keys:默认展开节点的key的数组
+     -->
+    <el-tree
+      class="flow-tree"
+      :load="loadNode"
+      :data="treeNode"
+      lazy
+      node-key="id"
+      highlight-current
+      ref="tree"
+      :props="treeProps"
+      @node-click="handelrNodeClick"
+      :default-expanded-keys="defaultExpandedKeys" 
+    >
+      <span class="custom-tree-node cell-hidden" slot-scope="{ node, data }">
+        <!-- 通过部门层级选择标签 -->
+        <div :title="node.label" class="cell-hidden">
+        <span v-if="data.dLevel == 0" class="iconfont icon-jigou "></span>
+        <span v-else class="iconfont icon-bumenkaoqin"></span>
+        <span :title="node.label">{{ node.label }}</span>
+        </div>
+      </span>
+    </el-tree>
+</template>
+<script>
+import { Tree, Container } from 'element-ui';
+import axios from "cloud-module-base/packages/httpConfig/http";
+export default {
+  //初始化数据
+  data() {
+    return {
+      treeNode: [],
+      treeData: [],
+      defaultExpandedKeys: [],
+      treeProps: {
+        children: "children", //指定子树为节点对象的某个属性值
+        label: "name", //指定节点标签为节点对象的某个属性值
+        id: "id"
+      },
+      id: "-1"
+    };
+  },
+  components: {
+    'el-tree':Tree,
+    'el-container':Container
+  },
+  //方法
+  methods: {
+    //请求方法
+    loadNode(node, resolve) {
+      let _this = this;
+      axios['system-manager']
+        .post("/api/ou/org/tree", {
+          id: node.data.id
+        })
+        .then(function(res) {
+          resolve(res.data);
+          if (node.data.length == 0 && res.data.length > 0) {
+              _this.defaultExpandedKeys.push(res.data[0].id);
+            // _this.$nextTick(() => {
+            //   _this.$refs.tree.setCurrentKey(res.data[0].id);
+            //   _this.EventBus.$emit("refreshGrid", res.data[0]); //EventBus事件总线，通过emit方法与父组件沟通。$emit触发当前实例上的所有事件
+            // });
+          }
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    },
+
+    //节点点击事件
+    handelrNodeClick(data) {
+      this.EventBus.$emit("refreshGrid", data);
+    }
+  },
+  //页面渲染之前调用方法 函数
+  created() {},
+  //页面渲染完成调用方法 函数
+  mounted() {}
+};
+</script>
+<style scoped>
+
+</style>