cloud-module-bpm 6.13.2 → 6.13.3

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

@@ -3,127 +3,217 @@
     <el-dialog
       :title="opt.title"
       :visible.sync="dialogVisible"
-      width="700px"
-      top="8vh"
+      width="900px"
+      top="2vh"
       @open="openDialog"
       :before-close="handleClose"
       :close-on-click-modal="false"
       append-to-body
-      custom-class="bpmjump"
+      class="jumpDialog"
     >
-      <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"
-                  :title="item.label"
+      <el-container>
+        <el-aside style="height:456px;width:65%;margin-right: 0px;margin-left: 0px;background: #e8ecf3">
+          <el-container>
+            <el-aside style="height:456px;width: 35%;max-width: 400px;margin:0px;border-radius: 0px;">
+              <v-tree
+                :opt="nextNode"
+                @refreshGrid="treeClickData"
+              />
+            </el-aside>
+            <!-- 待选择人员列表 -->
+            <el-main style="height:456px; width: 45%; padding: 0px; margin-left: 2px;">
+              <div class="selected-grid">
+                <!-- <el-row>
+                  <el-col style="text-align: left;padding: 7px 7px 0 7px">
+                    {{ $t('bpm.jump.choice_activity') }}
+                  </el-col>
+                </el-row> -->
+                <el-row>
+                  <el-col
+                    :span="7"
+                    style="float: left;padding-right: 40px;margin-top: 5px;padding-left: 7px;"
+                  >{{ $t('bpm.jump.activity_name') }}</el-col>
+
+                  <el-col
+                    :span="17"
+                    style="float:right;"
+                  >
+                    <el-select
+                      v-if="options.length > 0"
+                      style="width:225px"
+                      @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>
+                <el-row
+                  justify="space-between"
+                  style="padding: 5px;"
                 >
-                </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"
+                  <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
+                      @clear="restart"
+                      @change="searchClickData"
+                    >
+                      <el-button
+                        class="el-icon-search-button"
+                        slot="append"
+                        icon="el-icon-search"
+                        @click="searchClickData"
+                      ></el-button>
+                    </el-input>
+                  </el-col>
+                </el-row>
+
+                <el-table
+                  :data="initialTableData"
+                  :height="tableHeight"
+                  @select="handleSelect"
+                  ref="eltableCurrentRow"
+                  @select-all="handleSelectAll"
                 >
-                  {{ 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')"
+                  <el-table-column type="selection"> </el-table-column>
+                  <el-table-column
+                    prop="name"
+                    :label="$t('bpm.jump.name')"
+                  >
+                    <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('bpm.jump.coding')"
+                  >
+                    <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('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>
+                <!--tree分页-->
+                <el-pagination
+                  v-if="isShowPagination"
+                  class="SourceGrid"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page="currentPage"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total"
+                  :pager-count="pagerCount"
+                ></el-pagination>
+                <!--下拉框分页-->
+                <el-pagination
+                  v-if="isShowPagination == false"
+                  class="SourceGrid"
+                  @size-change="elSelectHandleSizeChange"
+                  @current-change="elSelectHandleCurrentChange"
+                  :current-page="currentPage"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total"
+                  :pager-count="pagerCount"
+                ></el-pagination>
+              </div>
+            </el-main>
+          </el-container>
+        </el-aside>
+        <!-- 已选择人员列表-->
+        <el-main style="height: 456px; padding: 0px; width: 35%; margin-left: 10px;">
+          <div>
+            <el-row style="float:left;padding:7px;">
+              {{ $t('bpm.jump.selected_personnel_list') }}
+            </el-row>
+            <el-table
+              :data="selectTableData"
+              :height="tableHeight + 85"
+              @row-click="handleRowClick"
             >
-              <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>
+              <el-table-column
+                prop="name"
+                :label="$t('bpm.jump.name')"
+              >
+                <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('bpm.jump.coding')"
+              >
+                <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('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-main>
+      </el-container>
       <span
         slot="footer"
         class="dialog-footer"
@@ -157,6 +247,7 @@ import {
   TabPane
 } from 'element-ui';
 import axios from 'cloud-module-base/packages/httpConfig/http';
+import tree from './Tree';
 export default {
   name: 'bpm-jump',
   components: {
@@ -171,7 +262,8 @@ export default {
     'el-row': Row,
     'el-input': Input,
     'el-tabs': Tabs,
-    'el-tab-pane': TabPane
+    'el-tab-pane': TabPane,
+    'v-tree': tree
   },
   //父组件传过来的数据属性
   props: {
@@ -184,45 +276,114 @@ export default {
       required: true
     }
   },
+  watch: {
+    ruleEngine: {
+      deep: true,
+      handler: function (newVal, old) {
+        if (newVal && newVal.runtime && newVal.runtime.nextNodes && newVal.runtime.nextNodes.length > 0) {
+
+
+          let nextNodeWatch = newVal.runtime.nextNodes[0];
+          this.total = nextNodeWatch.bpmUsers.length;
+          // this.sourceAllData = nextNodeWatch.bpmUsers || [];
+          // this.empTableData = this.sourceAllData.slice(
+          //   this.pageSize * (this.currentPage - 1),
+          //   this.pageSize * this.currentPage
+          // );
+          this.receiverIds = [];
+          nextNodeWatch.bpmUsers.forEach(bpmUser => {
+            var obj = {};
+            obj.name = bpmUser.name;
+            obj.code = bpmUser.code;
+            obj.deptName = bpmUser.deptName;
+            this.initialTableData.push(obj);
+            this.receiverIds.push(bpmUser.code);
+          });
+        }
+      }
+    }
+  },
   data () {
     return {
+      currentRuleEngine: {},
+      currentPage: 1,
+      pageSize: 10,
+      pagerCount: 5,
+      total: 10,
+      tableHeight: 300,
+      maxHeight: '483px',
+      searchName: '',
+      empUrl: '/api/identity/bpm-user/list-by-deptcode', //人员数据接口
       //默认参数
       opt: {
         title: this.$t('bpm.jump.dialog_title')
       },
-      //业务id  从父组件ruleEngine中runtime->mainFrom中获取businessId = ruleEngine.runtime.mainForm.businessId
+      //业务id 3f28804f736ee91401736eec34950000
       businessId: '',
-      //流程key
-      toTaskDefKey: '',
       //初始值
       initialTableData: [],
       //选中的值
       selectTableData: [],
+      receiverIds: [],
       //下拉框
       options: [],
-      //下拉框初始值
       value: '',
+      isShowPagination: false,
+      treeNode: {},
+      //流程key
+      toTaskDefKey: '',
       //批准类型
       approveType: '',
-      currentRuleEngine: {}
+      nextNode: {}
     };
   },
-  created () { },
+  created () {
+    // this.tableHeight = window.outerHeight > 900 ? 386 : 256;
+  },
   methods: {
+    //============tree分页===========
+    //每页显示数据个数变化时调用
+    handleSizeChange (val) {
+      this.pageSize = val;
+      this.searchClickData();
+    },
+    //页码变化时调用
+    handleCurrentChange (val) {
+      this.currentPage = val;
+      this.searchClickData();
+    },
+
+    //============下拉框分页===========
+    //每页显示数据个数变化时调用
+    elSelectHandleSizeChange (val) {
+      this.pageSize = val;
+    },
+    //页码变化时调用
+    elSelectHandleCurrentChange (val) {
+      this.currentPage = val;
+      this.resultDataChange();
+    },
+    resultDataChange () {
+      if (this.initialTableData) {
+        var result = this.initialTableData.slice(
+          this.pageSize * (this.currentPage - 1),
+          this.pageSize * this.currentPage
+        );
+        this.initialTableData = result;
+      } else {
+        this.initialTableData = [];
+      }
+    },
+
     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;
-        }
-      }
+    removeData (selectTableData, row) {
+      let index = this.indexOfselectTableData(row);
       if (index != -1) {
-        userData.splice(index, 1);
+        selectTableData.splice(index, 1);
       }
       //更新待选的人员
       for (var i = 0; i < this.initialTableData.length; i++) {
@@ -234,8 +395,40 @@ export default {
         }
       }
     },
+    //是选中还是取消
+    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;
+    },
 
-    //全部取消或者删除
+    // 是否已选中该条数据
+    indexOfselectTableData2 () {
+      _this.initialTableData.forEach(element => {
+        var index = _this.indexOfselectTableData(element);
+        if (index != -1) {
+          _this.selectTableData.splice(index, 1);
+        }
+      });
+    },
+
+    //全选或者全取消
     handleSelectAll (select) {
       var _this = this;
       if (
@@ -263,9 +456,9 @@ export default {
         }
       }
     },
+
     handleSelect (select, row) {
       var _this = this;
-
       // 单人审批 只能选择一个
       if (
         'onlyApprove' ==
@@ -293,35 +486,13 @@ export default {
         }
       }
     },
-    //是选中还是取消
-    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.currentRuleEngine = {};
       _this.ruleEngine['bpmIsLatest'] = false;
       // 为了解决入参过多的问题
       let temRuleEngine = JSON.parse(JSON.stringify(_this.ruleEngine));
@@ -336,24 +507,30 @@ export default {
       }
       axios['bpm-engine']
         .post(
-          '/api/engine/bpm/query/jump/candidate/' +
+          '/api/engine/bpm//query/jump/candidate/' +
           _this.businessId +
           '/' +
           _this.toTaskDefKey,
           temRuleEngine
         )
         .then(function (res) {
+          _this.nextNode = res.data.runtime.nextNodes[0];
+          _this.receiverIds = [];
           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.receiverIds.push(element.code);
+           //   _this.initialTableData.push(obj);
             });
-            _this.currentRuleEngine = res.data;
+            //_this.total = _this.initialTableData.length;
             _this.approveType = res.data.approve.type;
           }
+
+          _this.currentRuleEngine = res.data;
+          _this.isShowPagination = false;
         })
         .catch(function (err) {
           console.log(err);
@@ -363,10 +540,14 @@ export default {
       var _this = this;
       _this.businessId = _this.ruleEngine.runtime.mainForm.businessId;
       _this.requestData();
+      _this.selectTableData = [];
+
     },
     //关闭对话框
     handleClose () {
       this.options = [];
+      this.searchName = '';
+      this.treeNode = {};
       this.$emit('dialog-close', this.dialogVisible);
     },
     requestData () {
@@ -382,8 +563,7 @@ export default {
             obj.value = key;
             _this.options.push(obj);
           }
-
-          //下拉框初始化选中数据
+          //初始化选中数据
           _this.value = _this.options[0].value;
           _this.handleChange(_this.value);
         })
@@ -391,25 +571,109 @@ export default {
           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 = [];
+    },
+    restart () {
+
+      handleChange(this.value);
+    },
+    treeClickData (treeNode) {
+      if (treeNode) {
+        this.treeNode = treeNode;
+      }
+      let _this = this;
+      let param = {
+        page: this.currentPage,
+        rows: this.pageSize,
+        deptCode: this.treeNode.code ? this.treeNode.code : this.treeNode.deptCode,
+        search: this.searchName,
+        userNames: this.receiverIds.join(',')
+      };
+      axios['bpm-engine']
+        .post(this.empUrl, param)
+        .then(function (res) {
+          if (res.success) {
+            _this.initialTableData = [];
+            res.data.rows.forEach(arr => {
+
+              var obj = {};
+              obj.name = arr.name;
+              obj.code = arr.code;
+              obj.deptName = arr.deptName;
+              _this.initialTableData.push(obj);
+            });
+            // _this.empTableData = res.data.rows;
+            _this.total = res.data.total;
+            _this.isShowPagination = true;
+            //必须等列表重新渲染完毕，才能执行此方法。
+
+          }
+          _this.loading = false;
+        })
+        .catch(function (err) {
+          console.log(err);
+        });
+    },
+    searchClickData () {
+      let _this = this;
+      let param = {
+        page: this.currentPage,
+        rows: this.pageSize,
+        deptCode: this.treeNode.code ? this.treeNode.code : this.treeNode.deptCode,
+        search: this.searchName,
+        userNames: this.receiverIds.join(',')
+      };
+      axios['bpm-engine']
+        .post(this.empUrl, param)
+        .then(function (res) {
+          if (res.success) {
+            _this.initialTableData = [];
+            res.data.rows.forEach(arr => {
+
+              var obj = {};
+              obj.name = arr.name;
+              obj.code = arr.code;
+              obj.deptName = arr.deptName;
+              _this.initialTableData.push(obj);
+            });
+            // _this.empTableData = res.data.rows;
+            _this.total = res.data.total;
+            _this.isShowPagination = true;
+            //必须等列表重新渲染完毕，才能执行此方法。
+
+          }
+          _this.loading = false;
+        })
+        .catch(function (err) {
+          console.log(err);
+        });
     }
   },
-  mounted () { }
+
+  mounted () {
+
+  }
 };
 </script>
+<style></style>