cloud-module-bpm 6.3.0

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

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <el-row style="float:left;padding:11px 7px 3px 9px;">{{
+      $t('base.selected_list')
+    }}</el-row>
+    <el-table
+      :data="tableData"
+      stripe
+      :height="tableHeight"
+      style="width: 100%;"
+      @row-click="handleRowClick"
+      :element-loading-text="$t('base.table.loading')"
+      element-loading-spinner="el-icon-loading"
+    >
+      <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="SelectedGrid"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-size="pagesize"
+      layout="total, prev, pager, next"
+      :total="total"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import { Row, Table, TableColumn, Pagination } from 'element-ui';
+export default {
+  props: {
+    opt: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    'el-row': Row,
+    'el-table': Table,
+    'el-table-column': TableColumn,
+    'el-pagination': Pagination
+  },
+  data() {
+    return {
+      tableHeight: 375,
+      tableData: [],
+      currentPage: 1,
+      pagesize: 10,
+      total: 0,
+      tempTableData:[]
+    };
+  },
+  created() {
+    let _this = this;
+    // this.tableHeight = window.outerHeight > 900 ? 430 : 310;
+    this.tableData = [];
+    this.EventBus.$on(
+      'refresh-selected-grid' + this.opt.taskDeKey,
+      selectData => {
+         _this.tempTableData = selectData;
+        // 每次重发数据默认显示第一页
+        _this.currentPage = 1;
+        _this.total = _this.tempTableData.length; 
+        _this.tableData = _this.tempTableData.slice(
+          _this.pagesize * (_this.currentPage - 1),
+          _this.pagesize * _this.currentPage
+        );
+      }
+    );
+  },
+  watch: {
+    opt(old, newVal) {
+      this.tableData = [];
+    }
+  },
+  methods: {
+    //行单击事件只有单人审批是选人才生效，其他审批方式，通过checkbox生效
+    handleRowClick(row, event, column) {
+      let _this = this;
+      // 删除掉临时数组中点击的元素
+      _this.tempTableData = _this.tempTableData.filter(t => t.code != row.code);
+      // 重新修改total值
+      _this.total  = _this.tempTableData.length;
+     
+      // 重新给currentPage赋值 若当前页数据等于0时，修改为上一页，若只剩一页则是第一页
+      if(_this.tempTableData.slice(
+          _this.pagesize * (_this.currentPage - 1),
+          _this.pagesize * _this.currentPage
+        ).length == 0) {
+          _this.currentPage = _this.currentPage > 1 ? _this.currentPage-1 : 1;
+        }
+      _this.tableData = _this.tempTableData.slice(
+          _this.pagesize * (_this.currentPage - 1),
+          _this.pagesize * _this.currentPage
+        );
+      this.EventBus.$emit('cancel-seleced-user' + this.opt.taskDeKey, row);
+    },
+    //页码变化时调用
+    handleCurrentChange(val) {
+      let _this = this;
+      _this.currentPage = val;
+      _this.tableData = _this.tempTableData.slice(
+          _this.pagesize * (_this.currentPage - 1),
+          _this.pagesize * _this.currentPage
+        );
+    }
+  }
+};
+</script>
+<style scoped>
+.el-table--scrollable-x .el-table__body-wrapper {
+  overflow-x: hidden;
+}
+.el-table__empty-block {
+  width: 100%;
+}
+.el-table th {
+  background-color: #fff;
+}
+.el-pagination {
+  position: unset !important;
+}
+.el-pagination {
+  position: absolute;
+  right: 40px;
+  margin: 10px auto;
+}
+.SelectedGrid .el-pager li {
+    min-width: 20px !important;
+}
+</style>

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: 375,
+      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>