cloud-module-bpm 6.13.2 → 6.13.3

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

@@ -1,91 +1,230 @@
 <template>
-    <!-- 
-      load：加载子树数据方法 当lazy为true时可用
-      lazy:默认为false
-      data:数据展示
-      node-key:树节点唯一标识
-      @node-click:节点被点击时回调
-      default-expanded-keys:默认展开节点的key的数组
-     -->
-    <el-tree
-      class="flow-tree"
-      :load="loadNode"
-      :data="treeNode"
-      lazy
-      node-key="id"
-      highlight-current
-      ref="tree"
-      :props="treeProps"
-      @node-click="handelrNodeClick"
-      :default-expanded-keys="defaultExpandedKeys" 
-    >
-      <span class="custom-tree-node cell-hidden" slot-scope="{ node, data }">
-        <!-- 通过部门层级选择标签 -->
-        <div :title="node.label" class="cell-hidden">
-        <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>
-        </div>
-      </span>
-    </el-tree>
+  <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="overflow-y: auto;height:91%">
+      <div>
+        <el-tree
+          class="flow-tree"
+          :data="treeNode"
+          v-show="isShow"
+          node-key="id"
+          highlight-current
+          ref="tree"
+          :props="treeProps"
+          @node-click="handelrNodeClick"
+          :default-expanded-keys="defaultExpandedKeys"
+        >
+          <span
+            class="custom-tree-node cell-hidden"
+            slot-scope="{ node, data }"
+          >
+            <!-- 通过部门层级选择标签 -->
+            <div
+              :title="node.label"
+              class="cell-hidden"
+            >
+              <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>
+            </div>
+          </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 {
   //初始化数据
-  data() {
+  data () {
     return {
       treeNode: [],
       treeData: [],
       defaultExpandedKeys: [],
+      treeNodeSearch: [],
+      searchName: '',
+      orgListUrl: "/api/identity/bpm-dept/tree-by-search", //组织机构列表筛选接口
+      orgUrl: '/api/identity/bpm-dept/tree-by-deptcodes', //组织机构树接口
       treeProps: {
         children: "children", //指定子树为节点对象的某个属性值
         label: "name", //指定节点标签为节点对象的某个属性值
         id: "id"
       },
+      isShow: true,
       id: "-1"
     };
   },
   components: {
-    'el-tree':Tree,
-    'el-container':Container
+    'el-tree': Tree,
+    'el-container': Container
+  },
+
+  props: {
+    opt: {
+      type: Object,
+      required: false
+    }
+  },
+  watch: {
+    opt: {
+      deep: true,
+      handler (opt) {
+        let _this = this;
+        let deptCodes = [];
+        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;
+            console.log(_this.treeNode);
+            _this.defaultExpandedKeys.push(res.data[0].id);
+            _this.$emit('refreshGrid', res.data[0]);
+          })
+          .catch(function (err) {
+            console.log(err);
+          });
+      },
+      immediate: true
+    },
+    treeNode: {
+      deep: true,
+      handler (treeNode) {
+        console.log("333" + treeNode);
+      }
+    }
   },
   //方法
   methods: {
+    restart () {
+      let _this = this;
+      let param = {
+        page: this.currentPage,
+        rows: this.pageSize,
+      };
+      this.isShow = true;
+      _this.EventBus.$emit('refresh-source-grid', param);
+    },
     //请求方法
-    loadNode(node, resolve) {
+    loadNode (node, resolve) {
       let _this = this;
       axios['system-manager']
         .post("/api/ou/org/tree", {
           id: node.data.id
         })
-        .then(function(res) {
+        .then(function (res) {
           resolve(res.data);
           if (node.data.length == 0 && res.data.length > 0) {
-              _this.defaultExpandedKeys.push(res.data[0].id);
+            _this.defaultExpandedKeys.push(res.data[0].id);
             // _this.$nextTick(() => {
             //   _this.$refs.tree.setCurrentKey(res.data[0].id);
             //   _this.EventBus.$emit("refreshGrid", res.data[0]); //EventBus事件总线，通过emit方法与父组件沟通。$emit触发当前实例上的所有事件
             // });
           }
         })
-        .catch(function(err) {
+        .catch(function (err) {
           console.log(err);
         });
+
+
     },
 
     //节点点击事件
-    handelrNodeClick(data) {
-      this.EventBus.$emit("refreshGrid", data);
+    handelrNodeClick (treeNode) {
+
+      this.$emit('refreshGrid', treeNode);
+    },
+    searchTree () {
+      let _this = this;
+      if (_this.searchName == null || _this.searchName == '') {
+        _this.treeNodeSearch = [];
+        _this.isShow = true;
+      }
+
+      let deptCodes = [];
+      this.opt.bpmUsers.forEach(bpmUser => {
+        if (bpmUser.deptCode && !deptCodes.includes(bpmUser.deptCode)) {
+          deptCodes.push(bpmUser.deptCode);
+        }
+      });
+      _this.isShow = false;
+      axios['bpm-engine']
+        .post(this.orgListUrl, {
+          search: this.searchName,
+          deptCodes: deptCodes.join(',')
+        })
+        .then(function (res) {
+          _this.treeNodeSearch = res.data;
+          _this.$nextTick(() => {
+            _this.$refs.treeSearch.setCurrentKey(res.data[0].id);
+          });
+          _this.handelrNodeClick(res.data[0]);
+
+        })
+        .catch(function (err) {
+          console.log(err);
+        });
     }
   },
   //页面渲染之前调用方法 函数
-  created() {},
+  created () { },
   //页面渲染完成调用方法 函数
-  mounted() {}
+  mounted () {
+
+  }
 };
 </script>
 <style scoped>
-
 </style>

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

@@ -14,21 +14,32 @@
       <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;padding-top:5px;margin:0px;border-radius: 0px;">
-              <v-tree />
+            <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-row>
                   <el-col style="text-align: left;padding: 7px 7px 0 7px">
                     {{ $t('bpm.jump.choice_activity') }}
                   </el-col>
-                </el-row>
+                </el-row> -->
                 <el-row>
-                  <el-col align="center">{{ $t('bpm.jump.activity_name') }}
+                  <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
-                      style="width:200px"
+                      style="width:225px"
                       @change="handleChange"
                       v-model="value"
                       :placeholder="$t('bpm.jump.please_select')"
@@ -44,11 +55,35 @@
                     </el-select>
                   </el-col>
                 </el-row>
-                <el-row>
-                  <el-col style="text-align: left;padding: 7px 7px 0 7px">{{
-                    $t('bpm.jump.for_personnel')
-                    }}</el-col>
+                <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
+                      @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"
@@ -241,6 +276,33 @@ 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: {},
@@ -250,6 +312,8 @@ export default {
       total: 10,
       tableHeight: 300,
       maxHeight: '483px',
+      searchName: '',
+      empUrl: '/api/identity/bpm-user/list-by-deptcode', //人员数据接口
       //默认参数
       opt: {
         title: this.$t('bpm.jump_latest.dialog_title')
@@ -260,6 +324,7 @@ export default {
       initialTableData: [],
       //选中的值
       selectTableData: [],
+      receiverIds: [],
       //下拉框
       options: [],
       value: '',
@@ -268,7 +333,8 @@ export default {
       //流程key
       toTaskDefKey: '',
       //批准类型
-      approveType: ''
+      approveType: '',
+      nextNode: {}
     };
   },
   created () {
@@ -279,12 +345,12 @@ export default {
     //每页显示数据个数变化时调用
     handleSizeChange (val) {
       this.pageSize = val;
-      this.treeClickData();
+      this.searchClickData();
     },
     //页码变化时调用
     handleCurrentChange (val) {
       this.currentPage = val;
-      this.treeClickData();
+      this.searchClickData();
     },
 
     //============下拉框分页===========
@@ -447,15 +513,20 @@ export default {
           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.total = _this.initialTableData.length;
+            //_this.total = _this.initialTableData.length;
             _this.approveType = res.data.approve.type;
           }
 
@@ -471,10 +542,13 @@ export default {
       _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 () {
@@ -520,40 +594,136 @@ export default {
 
       _this.$emit('dialog-save', _this.ruleEngine);
     },
+    restart () {
 
-    treeClickData () {
-      var _this = this;
-      axios['system-manager']
-        .post('/api/ou/emp/listOrgUnselectedUserByOrg', {
-          id: _this.treeNode.id,
-          dLevelCode: _this.treeNode.dLevelCode,
-          page: _this.currentPage,
-          rows: _this.pageSize
+      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);
+        });
+      // var _this = this;
+      // axios['system-manager']
+      //   .post('/api/ou/emp/listOrgUnselectedUserByOrg', {
+      //     id: _this.treeNode.id,
+      //     dLevelCode: _this.treeNode.dLevelCode,
+      //     page: _this.currentPage,
+      //     rows: _this.pageSize,
+      //     name: _this.searchName
+      //   })
+      //   .then(function (res) {
+      //     if (res.status == '1') {
+      //       _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.total = res.data.total;
+      //       _this.isShowPagination = true;
+      //     }
+      //   });
+    },
+    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.status == '1') {
+          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);
         });
+      // var _this = this;
+      // axios['system-manager']
+      //   .post('/api/ou/emp/listOrgUnselectedUserByOrg', {
+      //     id: _this.treeNode.id,
+      //     dLevelCode: _this.treeNode.dLevelCode,
+      //     page: _this.currentPage,
+      //     rows: _this.pageSize,
+      //     name: _this.searchName
+      //   })
+      //   .then(function (res) {
+      //     if (res.status == '1') {
+      //       _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.total = res.data.total;
+      //       _this.isShowPagination = true;
+      //     }
+      //   });
     }
   },
 
   mounted () {
-    var _this = this;
-    this.EventBus.$on('refreshGrid', treeNode => {
-      _this.treeNode = treeNode;
-      _this.currentPage = 1;
-      _this.treeClickData();
-    });
+
+
+
   }
 };
 </script>