cloud-module-bpm 6.3.0

package/packages/bpm-sign-dialog/SourceGrid.vue

@@ -0,0 +1,413 @@
+<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;">
+        <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
+      :ruleEngine="ruleEngine"  
+      :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" v-if="notOnlyApprove" type="selection"></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 {
+      signUsersUrl: '/api/engine/bpm/process/getSignUsers',//add by zhang
+      searchName: '',
+      multipleSelection: [],
+      tableHeight: 375,
+      currentPage: 1,
+      pageSize: 10,
+      pagerCount: 5,
+      treeNode: {},
+      empTableData: [],
+      sourceAllData: [],
+      empTotal: 0,
+      loading: false,
+      receiverIds: [],
+      ruleEngine:{}
+    };
+  },
+  computed: {
+    // 是否是单人审批，如果不是单人审批则展示多选框
+    notOnlyApprove() {
+      return this.opt.approveType != 'onlyApprove';
+    }
+  },
+  created() {
+    // this.tableHeight = window.outerHeight > 900 ? 385 : 265;
+    this.opt.nextNodes.forEach(bpmUser => {
+      this.receiverIds.push(bpmUser.code);
+    });
+    
+  },
+  watch: {
+    'opt.nextNodes'(old, newVal) {
+      this.empTableData = this.opt.nextNodes;
+      this.empTotal = this.opt.nextNodes.length;
+      this.opt.nextNodes.forEach(bpmUser => {
+        this.receiverIds.push(bpmUser.code);
+      });
+      this.ruleEngine = this.opt.temRuleEngine;
+    }
+  },
+  //加载时调用方法 函数
+  mounted() {
+    let _this = this;
+    
+    // this.empTableData = this.opt;
+    // this.empTableData = this.opt.bpmUsers;
+    // 初始化选择数据分页
+    this.sourceAllData = this.opt.nextNodes;
+    if (!this.treeNode.code) {
+      this.resultDataChange();
+    }
+    this.empTotal = this.opt.nextNodes.length;
+    //点击树节点，刷新待选列表
+    this.EventBus.$on('refresh-source-grid', treeNode => {
+      _this.pageSize = 10;
+      _this.currentPage = 1;
+      _this.treeNode = treeNode.attributes || treeNode;
+      _this.requestGridData();
+    });
+    //点击已选列表，取消刷新列表选择
+    this.EventBus.$on('cancel-seleced-user', row => {
+      _this.cancelSelecedUser(row);
+    });
+    //监听保存按钮事件。点击后，清除已选择处理人对象
+    this.EventBus.$on('save-button-click', function() {
+      _this.searchName = '';
+      _this.multipleSelection = [];
+    });
+  },
+  methods: {
+    //每页显示数据个数变化时调用
+    handleSizeChange(val) {
+      this.pageSize = val;
+      //点击过tree，this.treeNode.code有值进行分页
+      if (this.treeNode.code ) {
+        this.requestGridData();
+      } 
+    },
+    //页码变化时调用
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      //点击过tree，this.treeNode.code有值进行分页
+      if (val) {
+        this.requestGridData();
+      } 
+    },
+    //判断是否是选择一条数据还是取消选择
+    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) {
+      var index = -1;
+      var _this = this;
+      if (_this.multipleSelection.length > 0) {
+        for (var i = 0; i < _this.multipleSelection.length; i++) {
+          if (_this.multipleSelection[i].code == row.code) {
+            index = i;
+            return index;
+          }
+        }
+      }
+      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[element.code] = element.name;
+      });
+      this.EventBus.$emit('refresh-selected-grid', this.multipleSelection);
+      this.EventBus.$emit('update-selected-user', {
+        dealUserCodes: dealUserCodes
+      });
+    },
+    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[element.code] = element.name;
+      });
+      this.EventBus.$emit('refresh-selected-grid', this.multipleSelection);
+      this.EventBus.$emit('update-selected-user', {
+        dealUserCodes: dealUserCodes
+      });
+    },
+    handleSelectAll(selection) {
+      if (selection.length == 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[element.code] = element.name;
+      });
+      this.EventBus.$emit('refresh-selected-grid' ,this.multipleSelection);
+      this.EventBus.$emit('update-selected-user', {
+        dealUserCodes: dealUserCodes
+      });
+    },
+    //请求数据
+    requestGridData() {
+      let _this = this;
+      let param = {
+        page: this.currentPage,
+        rows: this.pageSize,
+        deptCode: this.treeNode.code,
+        searchName: this.searchName,
+        rootId: this.treeNode.id,
+        dLevelCode: this.treeNode.dLevelCode
+      };
+      axios['bpm-engine']
+        .post(_this.signUsersUrl + '/' + _this.ruleEngine.procInstId, 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);
+        }
+        //更新待选的人员
+        for (var i = 0; i < this.empTableData.length; i++) {
+          if (this.empTableData[i].code == row.code) {
+            this.$refs.sourceGrid.toggleRowSelection(
+              this.empTableData[i],
+              false
+            );
+          }
+        }
+        // this.$refs.sourceGrid.toggleRowSelection(row);
+        let dealUserCodes = {};
+        this.multipleSelection.forEach(element => {
+         dealUserCodes[element.code] = element.name;
+        });
+        this.EventBus.$emit('update-selected-user', {
+          dealUserCodes: dealUserCodes
+        });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.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-sign-dialog/Tree.vue

@@ -0,0 +1,197 @@
+<template>
+<div style="height:100%;width:100%">
+  <el-row>
+      <el-col :span="24" style="padding: 4px;">
+        <el-input
+          placeholder="请输入名称或编码"
+          v-model="searchName"
+          clearable
+          @clear="restart"
+          @change="searchTree"
+          @keyup.enter.native="searchTree"
+          suffix-icon="el-icon-search"
+        ></el-input>
+      </el-col>
+    </el-row>
+    <el-row style="height:calc(100% - 36px);overflow-y: auto;">
+      <div>
+  <el-tree
+    v-show="isShow"
+    :data="treeNode"
+    style="height:395px!important;"
+    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>
+  <el-tree
+     v-show="!isShow"
+    :data="treeNodeSearch"
+    ref="treeSearch"
+    node-key="id"
+    :props="treeProps"
+    @node-click="handelrNodeClick"
+    highlight-current
+    :default-expanded-keys="defaultExpandedKeys"
+  >
+    <span class="custom-tree-node span-ellipsis" slot-scope="{ node, data }">
+      <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>
+    </span>
+    </el-tree>
+         </div>
+    </el-row>
+  </div>
+</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", //组织机构树接口
+      orgListUrl: "/cloud-system-manage/api/ou/org/list", //组织机构列表筛选接口
+      treeNode: [],
+      searchName: '',
+      currentPage: 1,
+      pageSize: 10,
+      treeNodeSearch: [],
+      defaultExpandedKeys: [],
+      
+      treeProps: {
+        children: "children",
+        label: "name",
+        id: "id"
+      },
+      resultData:{
+        nextNodes: [],
+      },
+      ruleEngine:{},
+      isShow: true
+    };
+  },
+  props: {
+    opt: {
+      type: Object,
+      required: false
+    }
+  },
+
+  //方法
+  methods: {
+    //树节点点击事件
+    handelrNodeClick(treeNode) {
+      this.EventBus.$emit("refresh-source-grid", treeNode);
+    },
+    restart(){
+    let _this = this;
+    let param = {
+        page: this.currentPage,
+        rows: this.pageSize,
+      };
+    _this.EventBus.$emit('refresh-source-grid', param);
+    },
+    searchTree() {
+      let _this = this;
+      if (_this.searchName == null || _this.searchName == '') {
+        _this.treeNodeSearch = [];
+        _this.isShow = true;
+        return;
+      }
+      axios['default']
+        .post(this.orgListUrl, {
+          search: this.searchName,
+          page: 1,
+          rows: 1000
+        })
+        .then(function(res) {
+          if (res.data.total > 0) {
+            _this.treeNodeSearch = res.data.rows;
+             console.log(222)
+             console.log(_this)
+             console.log(222)
+            _this.$nextTick(() => {
+              _this.$refs.treeSearch.setCurrentKey(res.data.rows[0].id);
+            });
+            _this.handelrNodeClick(res.data.rows[0]);
+          } else {
+            _this.treeNodeSearch = [];
+          }
+          _this.isShow = false;
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    }
+  },
+  //页面渲染之前调用方法 函数
+  created() {
+  },
+  mounted() {
+    let _this = this;
+    let deptCodes = [];
+    this.opt.alldeptcodes.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);
+      });
+       this.EventBus.$on('reset-checked-node', () => {
+      _this.searchName = '';
+      if (_this.$refs.tree) {
+        _this.$refs.tree.setCurrentKey(_this.$refs.tree.defaultExpandedKeys[0]);
+        _this.EventBus.$emit('refresh-source-grid', _this.$refs.tree.getCurrentNode());
+      }
+    });
+  },
+  //页面渲染完成调用方法 函数
+  watch: {
+    'opt.alldeptcodes'(old, newVal) {
+      let _this = this;
+      let deptCodes = [];
+      this.opt.alldeptcodes.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);
+        });
+        this.ruleEngine = this.opt.temRuleEngine;
+      }
+  }
+
+};
+</script>
+<style></style>