cloud-module-bpm 6.2.6

package/packages/bpm-user-select-dialog/SourceGrid.vue

@@ -0,0 +1,419 @@
+<template>
+  <div>
+    <el-row justify="space-between" style="padding: 5px;">
+      <el-col
+        :span="7"
+        style="float: left;padding-right: 40px;margin-top: 5px;padding-left: 2px;"
+        >{{ $t('base.list_alternatives') }}</el-col
+      >
+      <el-col :span="17" style="float:right;" v-if="opt.showSearch">
+        <el-input
+          placeholder="请输入姓名或编码"
+          v-model="searchName"
+          clearable
+          @change="requestGridData"
+        >
+          <el-button
+            class="el-icon-search-button"
+            slot="append"
+            icon="el-icon-search"
+            @click="requestGridData"
+          ></el-button>
+        </el-input>
+      </el-col>
+    </el-row>
+    <el-table
+      ref="sourceGrid"
+      :data="empTableData"
+      stripe
+      :height="tableHeight"
+      style="width: 100%;"
+      :element-loading-text="$t('base.table.loading')"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+      @select-all="handleSelectAll"
+      @select="handleSelect"
+      @row-click="handleRowClick"
+    >
+      <div class=""></div>
+      <el-table-column
+        style="height: 18px"
+        type="selection"
+        v-if="notOnlyApprove"
+      ></el-table-column>
+      <el-table-column prop="name" :label="$t('base.user.name')" fit="true">
+        <template slot-scope="scope">
+          <div :title="scope.row.name" class="cell-hidden">
+            {{ scope.row.name }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="code"
+        :label="$t('base.user.user_name')"
+        fit="true"
+      >
+        <template slot-scope="scope">
+          <div :title="scope.row.code" class="cell-hidden">
+            {{ scope.row.code }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="deptName" :label="$t('base.dept.name')" fit="true">
+        <template slot-scope="scope">
+          <div :title="scope.row.deptName" class="cell-hidden">
+            {{ scope.row.deptName }}
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="SourceGrid"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      layout="total, prev, pager, next"
+      :total="empTotal"
+      :pager-count="pagerCount"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import {
+  Main,
+  Container,
+  Row,
+  Col,
+  Table,
+  TableColumn,
+  Pagination,
+  Input,
+  Button
+} from 'element-ui';
+import axios from 'cloud-module-base/packages/httpConfig/http';
+export default {
+  props: {
+    opt: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    'el-main': Main,
+    'el-container': Container,
+    'el-row': Row,
+    'el-col': Col,
+    'el-table': Table,
+    'el-table-column': TableColumn,
+    'el-pagination': Pagination,
+    'el-input': Input,
+    'el-button': Button
+  },
+  data() {
+    return {
+      empUrl: '/api/identity/bpm-user/list-by-deptcode', //人员数据接口
+      searchName: '',
+      multipleSelection: [],
+      tableHeight: 355,
+      currentPage: 1,
+      pageSize: 10,
+      pagerCount: 5,
+      treeNode: {},
+      empTableData: [],
+      sourceAllData: [],
+      empTotal: 0,
+      loading: false,
+      receiverIds: []
+    };
+  },
+  computed: {
+    //是否是单人审批，如果不是单人审批则展示多选框
+    notOnlyApprove() {
+      return this.opt.approve.type != 'onlyApprove';
+    }
+  },
+  created() {
+    // this.tableHeight = window.outerHeight > 900 ? 385 : 265;
+    this.opt.bpmUsers.forEach(bpmUser => {
+      this.receiverIds.push(bpmUser.code);
+    });
+  },
+  watch: {
+    opt(old, newVal) {
+      this.empTotal = this.opt.bpmUsers.length;
+      
+      this.empTableData = this.sourceAllData.slice(
+          this.pageSize * (this.currentPage - 1),
+          this.pageSize * this.currentPage
+        );
+      this.opt.bpmUsers.forEach(bpmUser => {
+        this.receiverIds.push(bpmUser.code);
+      });
+    }
+  },
+  //加载时调用方法 函数
+  mounted() {
+    let _this = this;
+    
+    // 初始化选择数据分页
+    this.sourceAllData = this.opt.bpmUsers;
+    if (!this.treeNode.code) {
+      this.resultDataChange();
+    }
+
+    this.empTotal = this.opt.bpmUsers.length;
+    //点击树节点，刷新待选列表
+    this.EventBus.$on('refresh-source-grid' + this.opt.taskDeKey, treeNode => {
+      _this.pageSize = 10;
+      _this.currentPage = 1;
+      _this.treeNode = treeNode.attributes || treeNode;
+      _this.requestGridData();
+    });
+    //点击已选列表，取消刷新列表选择
+    this.EventBus.$on('cancel-seleced-user' + this.opt.taskDeKey, row => {
+      _this.cancelSelecedUser(row);
+    });
+    //监听保存按钮事件。点击后，清除已选择处理人对象
+    this.EventBus.$on('save-button-click', function() {
+      _this.searchName = '';
+      _this.currentPage = 1;
+      _this.multipleSelection = [];
+    });
+  },
+  methods: {
+    //每页显示数据个数变化时调用
+    handleSizeChange(val) {
+      this.pageSize = val;
+      //点击过tree，this.treeNode.code有值进行分页
+      if (this.treeNode.code) {
+        this.requestGridData();
+      } else {
+        //未点击tree进行分页
+        this.resultDataChange();
+      }
+    },
+    //页码变化时调用
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      if (this.treeNode.code) {
+        this.requestGridData();
+      } else {
+        this.resultDataChange();
+      }
+    },
+    //判断是否是选择一条数据还是取消选择
+    selectRow(select, row) {
+      return select.some(element => {
+        if (element.code == row.code) {
+          return true;
+        }
+      });
+    },
+    resultDataChange() {
+      if (this.sourceAllData) {
+        var result = this.sourceAllData.slice(
+          this.pageSize * (this.currentPage - 1),
+          this.pageSize * this.currentPage
+        );
+        this.empTableData = result;
+      } else {
+        this.empTableData = [];
+      }
+    },
+    //判断是否已经选择该条数据
+    indexOfMultipleSelection(row) {
+      let index = -1;
+      for (let i = 0; i < this.multipleSelection.length; i++) {
+        const element = this.multipleSelection[i];
+        if (element.code == row.code) {
+          index = i;
+        }
+      }
+      return index;
+    },
+    //行单击事件只有单人审批是选人才生效，其他审批方式，通过checkbox生效
+    handleRowClick(row, event, column) {
+      let _this = this;
+      let index = this.indexOfMultipleSelection(row);
+      if (this.notOnlyApprove) {
+        this.$refs.sourceGrid.toggleRowSelection(row);
+        if (index != -1) {
+          this.multipleSelection.splice(index, 1);
+        } else {
+          this.multipleSelection.push(row);
+        }
+      } else {
+        this.multipleSelection.forEach(element => {
+          _this.$refs.sourceGrid.toggleRowSelection(element, false);
+        });
+        this.multipleSelection = [];
+        if (index == -1) {
+          this.$refs.sourceGrid.toggleRowSelection(row, true);
+          this.multipleSelection.push(row);
+        }
+      }
+      let dealUserCodes = [];
+      this.multipleSelection.forEach(element => {
+        dealUserCodes.push(element.code);
+      });
+      this.EventBus.$emit(
+        'refresh-selected-grid' + this.opt.taskDeKey,
+        this.multipleSelection
+      );
+      this.EventBus.$emit('update-selected-user', {
+        nodekey: this.opt.taskDeKey + '_' + this.opt.approve.type,
+        dealUserCodes: dealUserCodes.join(',')
+      });
+    },
+    handleSelect(select, row) {
+      if (this.selectRow(select, row)) {
+        if (this.indexOfMultipleSelection(row) == -1) {
+          this.multipleSelection.push(row);
+        }
+      } else {
+        let index = this.indexOfMultipleSelection(row);
+        if (index != -1) {
+          this.multipleSelection.splice(index, 1);
+        }
+      }
+      let dealUserCodes = [];
+      this.multipleSelection.forEach(element => {
+        dealUserCodes.push(element.code);
+      });
+      this.EventBus.$emit(
+        'refresh-selected-grid' + this.opt.taskDeKey,
+        this.multipleSelection
+      );
+      this.EventBus.$emit('update-selected-user', {
+        nodekey: this.opt.taskDeKey + '_' + this.opt.approve.type,
+        dealUserCodes: dealUserCodes.join(',')
+      });
+    },
+    handleSelectAll(selection) {
+      let _this = this;
+      if (selection == 0) {
+        this.empTableData.forEach(row => {
+          let index = _this.indexOfMultipleSelection(row);
+          if (index != -1) {
+            _this.multipleSelection.splice(index, 1);
+          }
+        });
+      } else {
+        selection.forEach(row => {
+          if (_this.indexOfMultipleSelection(row) == -1) {
+            _this.multipleSelection.push(row);
+          }
+        });
+      }
+      let dealUserCodes = [];
+      this.multipleSelection.forEach(element => {
+        dealUserCodes.push(element.code);
+      });
+      this.EventBus.$emit(
+        'refresh-selected-grid' + this.opt.taskDeKey,
+        this.multipleSelection
+      );
+      this.EventBus.$emit('update-selected-user', {
+        nodekey: this.opt.taskDeKey + '_' + this.opt.approve.type,
+        dealUserCodes: dealUserCodes.join(',')
+      });
+    },
+    //请求数据
+    requestGridData() {
+      let _this = this;
+      let param = {
+        page: this.currentPage,
+        rows: this.pageSize,
+        deptCode: this.treeNode.code,
+        name: this.searchName,
+        userNames: this.receiverIds.join(',')
+      };
+      axios['bpm-engine']
+        .post(this.empUrl, param)
+        .then(function(res) {
+          if (res.success) {
+            _this.empTableData = res.data.rows;
+            _this.empTotal = res.data.total;
+            //必须等列表重新渲染完毕，才能执行此方法。
+            setTimeout(function() {
+              _this.setRowStatus();
+            }, 100);
+          }
+          _this.loading = false;
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    },
+    setRowStatus() {
+      let _this = this;
+      this.empTableData.forEach(row => {
+        let index = _this.indexOfMultipleSelection(row);
+        if (index != -1) {
+          _this.$refs.sourceGrid.toggleRowSelection(row, true);
+        }
+      });
+    },
+    cancelSelecedUser(row) {
+      let index = this.indexOfMultipleSelection(row);
+      if (index != -1) {
+        this.multipleSelection.splice(index, 1);
+      }
+      this.$refs.sourceGrid.toggleRowSelection(row);
+      let dealUserCodes = [];
+      this.multipleSelection.forEach(element => {
+        dealUserCodes.push(element.code);
+      });
+      this.EventBus.$emit('update-selected-user', {
+        nodekey: this.opt.taskDeKey + '_' + this.opt.approve.type,
+        dealUserCodes: dealUserCodes.join(',')
+      });
+    }
+  }
+};
+</script>
+<style lang="less">
+.el-pagination {
+  position: unset !important;
+}
+.el-table__empty-block {
+  width: 100%;
+  overflow-x: hidden;
+}
+.el-pagination {
+  position: absolute;
+  right: 40px;
+  margin: 5px auto;
+}
+.el-table th {
+  background-color: #fff;
+}
+.table-tools-btn {
+  float: left;
+  margin-top: 5px;
+  padding-right: 40px;
+  padding-left: 2px;
+}
+.el-icon-search-button {
+  padding: 0 10px;
+  margin: -17px -17px;
+}
+.filter-tree {
+  width: 100%;
+}
+.span-ellipsis {
+  text-align: left;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.el-table--scrollable-x .el-table__body-wrapper {
+  overflow-x: hidden !important;
+}
+.el-table th {
+  background-color: #fff;
+}
+</style>

package/packages/bpm-user-select-dialog/Tree.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-tree
+    :data="treeNode"
+    class="flow-tree"
+    ref="tree"
+    node-key="id"
+    :props="treeProps"
+    @node-click="handelrNodeClick"
+    highlight-current
+    :default-expanded-keys="defaultExpandedKeys"
+  >
+    <span class="custom-tree-node cell-hidden" slot-scope="{ node, data }">
+      <span v-if="data.type == 0" class="iconfont icon-jigou"></span>
+      <span v-else class="iconfont icon-bumenkaoqin"></span>
+      <span :title="node.label">{{ node.label }}</span>
+    </span>
+  </el-tree>
+</template>
+<script>
+import { Tree, Container } from 'element-ui';
+import axios from 'cloud-module-base/packages/httpConfig/http';
+export default {
+  components: {
+    'el-tree': Tree,
+    'el-container': Container
+  },
+  //初始化数据下
+  data() {
+    return {
+      height: 0,
+      orgUrl: '/api/identity/bpm-dept/tree-by-deptcodes', //组织机构树接口
+      treeNode: [],
+      treeProps: {
+        children: 'children',
+        label: 'name',
+        id: 'id'
+      },
+      defaultExpandedKeys: []
+    };
+  },
+  props: {
+    opt: {
+      type: Object,
+      required: false
+    }
+  },
+  //方法
+  methods: {
+    //树节点点击事件
+    handelrNodeClick(treeNode) {
+      this.EventBus.$emit('refresh-source-grid' + this.opt.taskDeKey, treeNode);
+    }
+  },
+  //页面渲染之前调用方法 函数
+  created() {},
+  mounted() {
+    let _this = this;
+    let deptCodes = [];
+    this.opt.bpmUsers.forEach(bpmUser => {
+      if (bpmUser.deptCode && !deptCodes.includes(bpmUser.deptCode)) {
+        deptCodes.push(bpmUser.deptCode);
+      }
+    });
+    axios['bpm-engine']
+      .post(this.orgUrl, { deptCodes: deptCodes.join(',') })
+      .then(function(res) {
+        _this.treeNode = res.data;
+        _this.defaultExpandedKeys.push(res.data[0].id);
+      })
+      .catch(function(err) {
+        console.log(err);
+      });
+  },
+  //页面渲染完成调用方法 函数
+  watch: {
+    // opt(old, newVal) {
+    //   let _this = this;
+    //   let deptCodes = [];
+    //   this.opt.bpmUsers.forEach(bpmUser => {
+    //     if (bpmUser.deptCodes && !deptCodes.includes(bpmUser.deptCodes)) {
+    //       deptCodes.push(bpmUser.deptCodes);
+    //     }
+    //   });
+    //   axios['bpm-engine']
+    //     .post(this.orgUrl, { deptCodes: deptCodes.join(',') })
+    //     .then(function(res) {
+    //       _this.treeNode = res.data;
+    //     })
+    //     .catch(function(err) {
+    //       console.log(err);
+    //     });
+    // }
+  }
+};
+</script>
+<style></style>

package/packages/bpm-user-select-dialog/bpm-next-node.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-container style="background: #e8ecf3">
+    <el-aside style="height:456px;width:65%;margin-right: 0px;margin-left: 0px;background-color: #e8ecf3">
+      <el-container>
+        <el-aside style="height:456px;width: 40%;max-width: 400px;padding-top:5px;margin:0px;border-radius: 0px;">
+          <v-tree :opt="nextNode" />
+        </el-aside>
+        <el-main style="height:456px;width:45%;padding: 0px;margin-left:2px">
+          <v-source-grid :opt="nextNode" />
+        </el-main>
+      </el-container>
+    </el-aside>
+    <el-main style="height:456px;padding:0px;padding-bottom: 0px;width:35%;margin-left:10px">
+      <v-select-grid :opt="nextNode" />
+    </el-main>
+  </el-container>
+</template>
+<script>
+import { Aside, Main, Container } from 'element-ui';
+import selectedGrid from './SelectedGrid';
+import sourceGrid from './SourceGrid';
+import tree from './Tree';
+import axios from 'cloud-module-base/packages/httpConfig/http';
+export default {
+  //父组件传过来的数据属性
+  props: {
+    nextNode: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    'v-select-grid': selectedGrid,
+    'v-tree': tree,
+    'v-source-grid': sourceGrid,
+    'el-aside': Aside,
+    'el-main': Main,
+    'el-container': Container
+  },
+  data() {
+    return {
+      opt: {
+        maxHeight: '483px'
+      }
+    };
+  },
+  created() {
+    this.maxHeight = window.outerHeight > 900 ? '483px' : '361px';
+  }
+};
+</script>

package/packages/bpm-user-select-dialog/bpm-user-select.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-dialog
+      :title="opt.title"
+      :visible.sync="dialogVisible"
+      width="900px"
+      top="2vh"
+      :before-close="handleClose"
+      custom-class="el-editRole-dialog"
+      @open="openDialog"
+      :close-on-click-modal="false"
+      append-to-body
+    >
+      <el-tabs v-model="activeNodeName" style="padding: 0 20px 20px 20px!important">
+        <el-tab-pane v-for="nextNode in nextNodes" :label="nextNode.taskName" :name="nextNode.taskDeKey" :key="nextNode.taskDeKey">
+          <v-bpm-next-node :nextNode="nextNode"></v-bpm-next-node>
+        </el-tab-pane>
+      </el-tabs>
+      <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, Tabs, TabPane } from 'element-ui';
+import bpmNextNode from './bpm-next-node';
+import axios from 'cloud-module-base/packages/httpConfig/http';
+
+export default {
+  name: 'bpm-user-select',
+  components: {
+    'el-dialog': Dialog,
+    'el-button': Button,
+    'el-tabs': Tabs,
+    'el-tab-pane': TabPane,
+    'v-bpm-next-node': bpmNextNode
+  },
+  //父组件传过来的数据属性
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      required: true
+    },
+    ruleEngine: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      //默认参数
+      opt: {
+        title: this.$t('bpm.user_select.title')
+      },
+      nextNodes: [],
+      activeNodeName: ''
+    };
+  },
+  created() {
+    let _this = this;
+    this.EventBus.$on('update-selected-user', params => {
+      _this.ruleEngine.nextNodes[params.nodekey] = params.dealUserCodes;
+    });
+  },
+  methods: {
+    openDialog() {
+      this.nextNodes = this.ruleEngine.runtime.nextNodes;
+      this.activeNodeName = this.nextNodes[0].taskDeKey;
+      this.ruleEngine.nextNodes = {};
+    },
+    handleClose() {
+      this.EventBus.$emit('save-button-click');
+      this.$emit('dialog-close', this.dialogVisible);
+    },
+    handleSave() {
+      let _this = this;
+      // 没有处理人的 流程节点
+      let noUserNode = '';
+      this.nextNodes.forEach(nextNode => {
+        if (
+          _this.ruleEngine.nextNodes[nextNode.taskDeKey + '_' + nextNode.approve.type] == undefined ||
+          _this.ruleEngine.nextNodes[nextNode.taskDeKey + '_' + nextNode.approve.type] == ''
+        ) {
+          noUserNode = nextNode.taskName;
+          return;
+        }
+      });
+      if (noUserNode != '') {
+        this.$message({
+          message: this.$t('bpm.user_select.node_no_select', { noUserNode }),
+          type: 'warning'
+        });
+        return;
+      }
+      this.EventBus.$emit('save-button-click');
+      this.$emit('dialog-save', this.ruleEngine);
+      this.$emit('dialog-close', this.dialogVisible);
+    }
+  }
+};
+</script>

package/packages/bpm-user-select-dialog/index.js

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

package/packages/i18n/i18n.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import locale from 'element-ui/lib/locale'; //elementUI的国际化
+import VueI18n from 'vue-i18n';
+import messages from './langs';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  //从localStorage中取，没有就默认的中文
+  locale: window.localStorage.getItem('qinLang') || 'zh',
+  messages
+});
+locale.i18n((key, value) => i18n.t(key, value)); //elementui多语言切换
+
+export default i18n;