cloud-module-bpm 6.13.2 → 6.13.3

package/packages/bpm-back-anylink-dialog/bpm-back-anylink-dialog.vue

@@ -3,172 +3,217 @@
     <el-dialog
       :title="opt.title"
       :visible.sync="dialogVisible"
-      width="650px"
-      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="9"
-              style="padding-right:125px"
-            >
-              {{ $t('bpm.back_anyLink.choice_activity') }}
-            </el-col>
-          </el-row>
-          <el-row
-            type="flex"
-            justify="center"
-          >
-            <span style="padding-right:5px;line-height:2;">
-              {{ $t('bpm.back_anyLink.activity_name') }}
-            </span>
+      <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-select
-              style="width:200px"
-              @change="handleChange"
-              v-model="value"
-              :placeholder="$t('bpm.back_anyLink.please_select')"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-                :title="item.label"
-              >
-              </el-option>
-            </el-select>
-          </el-row>
-        </div>
-        <div>
-          <el-row>
-            <el-col
-              :span="9"
-              style="padding-right:125px"
-            >{{
-              $t('bpm.back_anyLink.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.back_anyLink.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.back_anyLink.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.back_anyLink.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>
-            <el-col
-              :span="9"
-              style="padding-right:125px"
-            >{{
-              $t('bpm.back_anyLink.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.back_anyLink.name')"
-            >
-              <template slot-scope="scope">
-                <div
-                  :title="scope.row.name"
-                  class="cell-hidden"
+                  <el-col
+                    :span="17"
+                    style="float:right;"
+                  >
+                    <el-select
+                      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"
+                        :title="item.label"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-col>
+                </el-row>
+                <el-row
+                  justify="space-between"
+                  style="padding: 5px;"
                 >
-                  {{ scope.row.name }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="code"
-              :label="$t('bpm.back_anyLink.coding')"
-            >
-              <template slot-scope="scope">
-                <div
-                  :title="scope.row.code"
-                  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.code }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="deptName"
-              :label="$t('bpm.back_anyLink.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"
@@ -202,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-back-anylink',
   components: {
@@ -216,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: {
@@ -229,44 +276,115 @@ 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.back_anyLink.dialog_title')
       },
-      //流程key
-      toTaskDefKey: '',
+      //业务id 3f28804f736ee91401736eec34950000
+      businessId: '',
+      procInstId: '',
       //初始值
       initialTableData: [],
       //选中的值
       selectTableData: [],
-      //节点相关数据(节点，待选人员，节点审批方式)
-      resultData: {},
+      receiverIds: [],
       //下拉框
       options: [],
-      //下拉框初始值
       value: '',
-      //节点批准类型
-      approveType: ''
+      isShowPagination: false,
+      treeNode: {},
+      //流程key
+      toTaskDefKey: '',
+      //批准类型
+      approveType: '',
+      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++) {
@@ -278,11 +396,46 @@ 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 ('onlyApprove' == _this.approveType) {
+      if (
+        'onlyApprove' ==
+        _this.currentRuleEngine.runtime.nextNodes[0].approve.type
+      ) {
         this.selectTableData = [];
         this.$refs.eltableCurrentRow.clearSelection();
       } else {
@@ -304,11 +457,12 @@ export default {
         }
       }
     },
+
     handleSelect (select, row) {
       var _this = this;
-
       // 单人审批 只能选择一个
-      if ('onlyApprove' == _this.approveType) {
+      if ('onlyApprove' == _this.approveType)
+      {
         // 清楚数据
         _this.selectTableData = [];
         _this.$refs.eltableCurrentRow.clearSelection();
@@ -331,28 +485,6 @@ 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
@@ -360,26 +492,64 @@ export default {
       _this.selectTableData = [];
       _this.toTaskDefKey = val;
       _this.initialTableData = [];
-      if (_this.resultData[val] != null) {
-        _this.resultData[val].forEach(element => {
-          var obj = {};
-          obj.name = element.name;
-          obj.code = element.code;
-          obj.deptName = element.deptName;
-          _this.initialTableData.push(obj);
-        });
-        // 获取每个节点的审批方式
-        _this.approveType = _this.resultData.approveName[val];
-      }
+      _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) {
+        _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.receiverIds.push(element.code);
+         //   _this.initialTableData.push(obj);
+          });
+          //_this.total = _this.initialTableData.length;
+          _this.approveType = res.data.approve.type;
+        }
+
+        _this.currentRuleEngine = res.data;
+        _this.isShowPagination = false;
+      })
+      .catch(function (err) {
+        console.log(err);
+      });
+
+
     },
     openDialog () {
       var _this = this;
       _this.procInstId = _this.ruleEngine.runtime.mainForm.procInstId;
+      _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 () {
@@ -406,7 +576,10 @@ export default {
           console.log(err);
         });
     },
+    //保存
     handleSave () {
+
+
       var _this = this;
       if (_this.selectTableData.length == 0) {
         _this.$message.warning(
@@ -422,8 +595,88 @@ export default {
       _this.ruleEngine['resultToTaskDefKey'] = _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>