用户选择组件 缺数据绑定

src/api/task.js

@@ -20,7 +20,8 @@ const api = {
   getTempletById: '/task/work-template/queryTemplateByTemplateId',
   copyTemplate: '/task/work-template/templateCopy',
   moveTemplate: '/task/work-template/templateMove',
-  roleTree: 'http://localhost:8080/roleTree'
+  roleTree: 'http://localhost:8080/roleTree',
+  userTree: 'http://localhost:8080/userTree',
 }
 
 export default api
@@ -187,3 +188,11 @@ export function roleTree(params) {
     params: params
   })
 }
+export function userTree(params) {
+  const url = api.userTree
+  return axios({
+    url,
+    method: 'get',
+    params: params
+  })
+}

src/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree/index.vue

@@ -8,6 +8,7 @@
               <div><strong>选择</strong></div>
               <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange"/>
               <a-tree
+                ref="roleTree"
                 @expand="onExpand"
                 :expandedKeys="expandedKeys"
                 :autoExpandParent="autoExpandParent"
@@ -15,6 +16,7 @@
                 :checkable="true"
                 :checkStrictly="true"
                 v-model="selectedList"
+                @check="handleCheck"
               >
                 <template slot="title" slot-scope="{title}">
                   <span v-if="title.indexOf(searchValue) > -1">
@@ -31,14 +33,14 @@
           <a-col class="content right" :span="12">
             <div class="ant-card-bordered">
               <div><strong>已选</strong></div>
-              <template v-for="(role, index) in selectedList.checked">
-                <a-tooltip v-if="role.name.length > 20" :key="role.id" :title="role.name">
+              <template v-for="(role, index) in selectedListForTags">
+                <a-tooltip v-if="role.title.length > 20" :key="role.id" :title="role.title">
                   <a-tag class="role" :key="role.id" :closable="true" :afterClose="() => handleClose(role)">
-                    {{`${role.name.slice(0, 20)}...`}}
+                    {{`${role.title.slice(0, 20)}...`}}
                   </a-tag>
                 </a-tooltip>
                 <a-tag class="role" v-else :key="role.id" :closable="true" :afterClose="() => handleClose(role)">
-                  {{role.name}}
+                  {{role.title}}
                 </a-tag>
               </template>
               <div v-if="!hasSelectedData">
@@ -57,6 +59,7 @@
 <script>
   import { Ellipsis } from '@/components'
   import ACol from 'ant-design-vue/es/grid/Col';
+  import roleSelectTree from "@/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree";
 
   const getParentKey = (key, tree) => {
     let parentKey
@@ -72,6 +75,19 @@
     }
     return parentKey
   }
+
+  const dataList = []
+  const generateList = (data) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i]
+      const key = node.key
+      dataList.push({ key, title: key })
+      if (node.children) {
+        generateList(node.children, node.key)
+      }
+    }
+  }
+
   export default {
     name: 'RoleSelectTree',
     components: {
@@ -84,19 +100,20 @@
         expandedKeys: [],
         searchValue: '',
         autoExpandParent: true,
-        selectedList: {}
+        selectedList: {},
+        selectedListForTags: []
       }
     },
     computed: {
       hasSelectedData() {
-        const flag = this.selectedList.checked && this.selectedList.checked.length > 0
+        const flag = this.selectedListForTags && this.selectedListForTags.length > 0
         return flag
       }
     },
     methods: {
       handleClose(removedTag) {
         const selectedList = this.selectedList && this.selectedList.checked
-        const tags = selectedList.filter(tag => tag !== removedTag)
+        const tags = selectedList.filter(tag => tag !== removedTag.key)
         console.log(tags)
         this.selectedList = Object.assign({}, this.selectedList, {
           checked: tags
@@ -123,7 +140,28 @@
           autoExpandParent: true,
         })
       },
+      handleCheck(checkedKeys, e) {
+        console.log('handleCheck', this.$refs.roleTree)
+        // const checked
+        const hasKey = this.selectedListForTags.some(item => {
+          return item.key === e.node.eventKey
+        })
+        // 取消选中
+        if (!e.checked && hasKey) {
+          this.selectedListForTags = this.selectedListForTags.filter(item => {
+            return item.key !== e.node.eventKey
+          })
+        }
+        // 选中
+        if (e.checked && !hasKey) {
+          this.selectedListForTags.push(e.node.dataRef)
+        }
+      }
     },
+    mounted(){
+      console.log('roleTree', this.$refs.roleTree)
+      generateList(this.gData)
+    }
   }
 </script>
 

src/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree/index.vue

@@ -3,17 +3,20 @@
     <div class="role">
       <div class="tree">
         <a-row class="wrap" type="flex" :gutter="16">
-          <a-col class="content left" :span="12">
+          <a-col class="content left" :span="16">
             <div class="ant-card-bordered">
               <div><strong>选择</strong></div>
-              <a-row>
+              <a-row type="flex">
                 <a-col :span="18">
                   <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange"/>
                   <a-tree
+                    class="usertree"
                     @expand="onExpand"
-                    :defaultExpandAll="true"
+                    :defaultExpandAll="false"
+                    :autoExpandParent="autoExpandParent"
                     :treeData="gData"
                     :showIcon="true"
+                    :expandedKeys="expandedKeys"
                     @select="handleSelect"
                   >
                     <template slot="title" slot-scope="{title}">
@@ -24,32 +27,38 @@
                       </span>
                       <span v-else>{{title}}</span>
                     </template>
-                    <template slot="icon" slot-scope="{title}">
-                      1111
-                    </template>
+                    <a-icon slot="folder" type="folder"/>
                   </a-tree>
                 </a-col>
-                <a-col :span="18">
-                  <div style="background-color: black"></div>
+                <a-col class="userlist" :span="6">
+                  <div class="list">
+                    <template v-for="(user, index) of userList">
+                      <div class="user" @click="userSelect(user)" :key="index">
+                        <span class="username">{{user.name}}</span>
+                      </div>
+                    </template>
+                  </div>
                 </a-col>
               </a-row>
 
             </div>
           </a-col>
 
-          <a-col class="content right" :span="12">
+          <a-col class="content right" :span="8">
             <div class="ant-card-bordered">
               <div><strong>已选</strong></div>
-              <template v-for="(role, index) in selectedList.checked">
-                <a-tooltip v-if="role.length > 20" :key="role" :title="role">
-                  <a-tag class="role" :key="role" :closable="true" :afterClose="() => handleClose(role)">
-                    {{`${role.slice(0, 20)}...`}}
+              <div class="userlist">
+                <template v-for="(user, index) in selectedList">
+                  <a-tooltip v-if="user.name.length > 20" :key="user.id" :title="user.name">
+                    <a-tag class="user" :key="index" :closable="true" :afterClose="() => handleClose(user)">
+                      {{`${user.name.slice(0, 20)}...`}}
+                    </a-tag>
+                  </a-tooltip>
+                  <a-tag class="user" v-else :key="index" :closable="true" :afterClose="() => handleClose(user)">
+                    {{user.name}}
                   </a-tag>
-                </a-tooltip>
-                <a-tag class="role" v-else :key="role" :closable="true" :afterClose="() => handleClose(role)">
-                  {{role}}
-                </a-tag>
-              </template>
+                </template>
+              </div>
               <div v-if="!hasSelectedData">
                 暂无
               </div>
@@ -67,62 +76,84 @@
   import { Ellipsis } from '@/components'
   import ACol from 'ant-design-vue/es/grid/Col';
   import ARow from 'ant-design-vue/es/grid/Row';
+  import { userTree } from '@/api/task';
 
-  const x = 3
-  const y = 2
-  const z = 1
-  const gData = []
-
-  const generateData = (_level, _preKey, _tns) => {
-    const preKey = _preKey || '0'
-    const tns = _tns || gData
-
-    const children = []
-    for (let i = 0; i < x; i++) {
-      const key = `${preKey}-${i}`
-      tns.push({ title: key, key, scopedSlots: { title: 'title' } })
-      if (i < y) {
-        children.push(key)
+  /**
+   * 搜索时查找父级 id
+   * @param key
+   * @param tree
+   */
+  const getParentKey = (key, tree) => {
+    let parentKey
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i]
+      if (node.children) {
+        if (node.children.some(item => item.key === key)) {
+          parentKey = node.key
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children)
+        }
       }
     }
-    if (_level < 0) {
-      return tns
-    }
-    const level = _level - 1
-    children.forEach((key, index) => {
-      tns[index].children = []
-      return generateData(level, key, tns[index].children)
-    })
+    return parentKey
   }
-  generateData(z)
 
+  /**
+   * 将树状数据转换为list
+   * @param data
+   */
   const dataList = []
   const generateList = (data) => {
     for (let i = 0; i < data.length; i++) {
       const node = data[i]
       const key = node.key
-      dataList.push({ key, title: key })
+      dataList.push({ key, title: node.title })
       if (node.children) {
         generateList(node.children, node.key)
       }
     }
   }
-  generateList(gData)
 
-  const getParentKey = (key, tree) => {
-    let parentKey
-    for (let i = 0; i < tree.length; i++) {
-      const node = tree[i]
+  /**
+   * 将用户数据转换为list
+   * @param data
+   */
+  let userDataList = []
+  const generateUserList = (data) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i]
+      const userList = node.userList
+      userDataList = [...userDataList, ...userList]
       if (node.children) {
-        if (node.children.some(item => item.key === key)) {
-          parentKey = node.key
-        } else if (getParentKey(key, node.children)) {
-          parentKey = getParentKey(key, node.children)
+        generateUserList(node.children, node.key)
+      }
+    }
+  }
+
+  /**
+   * 格式化数据为  a-tree 可用的数据
+   * @param list
+   * @returns {*}
+   */
+  function t(list) {
+    let arr = list
+    for (var i = 0; i < arr.length; i++) {
+      const obj = {
+        slots: {
+          icon: 'folder'
         }
       }
+      if (arr[i].childDeptTreeResDTOS) {
+        obj.children = t(arr[i].childDeptTreeResDTOS);
+      }
+      arr[i].deptName && (obj.userList = arr[i].userInfoList)
+      arr[i].deptName && (obj.title = arr[i].deptName);
+      arr[i].deptId && (obj.key = arr[i].deptId);
+      arr[i] = obj;
     }
-    return parentKey
+    return arr;
   }
+
   export default {
     name: 'UserSelectTree',
     components: {
@@ -130,30 +161,42 @@
       ACol,
       Ellipsis
     },
-    props: {},
+    model: {
+      prop: 'selectedKeys',
+      event: 'change'
+    },
+    props: {
+      selectedKeys: {
+        type: Array,
+        default: function() {
+          return []
+        }
+      }
+    },
     data() {
       return {
+        gData: [],
         expandedKeys: [],
         searchValue: '',
         autoExpandParent: true,
-        gData,
-        selectedList: {}
+        selectedList: [],
+        currentTreeNode: {},
+        userList: []
       }
     },
     computed: {
       hasSelectedData() {
-        const flag = this.selectedList.checked && this.selectedList.checked.length > 0
+        const flag = this.selectedList && this.selectedList.length > 0
         return flag
       }
     },
     methods: {
       handleClose(removedTag) {
-        const selectedList = this.selectedList && this.selectedList.checked
+        const selectedList = this.selectedList
         const tags = selectedList.filter(tag => tag !== removedTag)
         console.log(tags)
-        this.selectedList = Object.assign({}, this.selectedList, {
-          checked: tags
-        })
+        this.selectedList = tags
+        this.$emit('change', this.selectedList)
         // this.$set(this.selectedList, 'checked', tags)
         // this.selectedList.checked = tags
         // this.$forceUpdate();
@@ -162,14 +205,16 @@
         this.expandedKeys = expandedKeys
         this.autoExpandParent = false
       },
-      handleSelect(selectedKeys, e){
+      handleSelect(selectedKeys, e) {
         console.log('handleSelect', selectedKeys, e)
+        this.currentTreeNode = e.node.dataRef
+        this.userList = this.currentTreeNode.userList
       },
       onChange(e) {
         const value = e.target.value
         const expandedKeys = dataList.map((item) => {
-          if (item.key.indexOf(value) > -1) {
-            return getParentKey(item.key, gData)
+          if (item.title.indexOf(value) > -1) {
+            return getParentKey(item.key, this.gData)
           }
           return null
         }).filter((item, i, self) => item && self.indexOf(item) === i)
@@ -179,14 +224,56 @@
           autoExpandParent: true,
         })
       },
+      userSelect(user) {
+        const hasUser = this.selectedList.some(item => {
+          return item === user
+        })
+        if (!hasUser) {
+          this.selectedList.push(user)
+          this.$emit('change', this.selectedList)
+        }
+      },
+      getUserTreeData() {
+        return userTree().then(res => {
+          const list = [res.data]
+          const treeData = list
+          this.gData = t(treeData)
+          console.log('getUserTreeData', this.gData)
+        })
+      },
     },
+    async mounted() {
+      await this.getUserTreeData()
+      this.gData[0] && (this.userList = this.gData[0].userList, this.currentTreeNode = this.gData[0])
+      generateList(this.gData)
+      generateUserList(this.gData)
+      this.selectedList = userDataList.filter(item => {
+        console.log(item)
+        return this.selectedKeys.some(id => {
+          return item.id === id
+        })
+      })
+    }
   }
 </script>
 
 <style lang="less" scoped>
+  .wrap{
+    height: 453px;
+  }
   .tree {
     overflow: hidden;
   }
+  .left .usertree{
+    max-height: 350px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .left .userlist, .right .userlist{
+    max-height: 390px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 
   .wrap > .content {
     /*flex: 1;*/
@@ -200,15 +287,28 @@
     width: 100%;
   }
 
-  .wrap .right .role {
+  .wrap .right .user {
     display: block;
     position: relative;
     margin-bottom: 5px;
   }
 
-  .wrap .right .role /deep/ .anticon-close {
+  .wrap .right .user /deep/ .anticon-close {
     position: absolute;
     right: 3px;
     line-height: 22px;
   }
+  .userlist .list .user{
+    padding: 4px 15px;
+    cursor: pointer;
+  }
+  .userlist .list .user .username{
+    cursor: pointer;
+    transition: color .3s linear 0s;
+  }
+  .userlist .list .username:hover{
+    cursor: pointer;
+    font-weight: bold;
+    color: #2eabff;
+  }
 </style>

src/views/testComponents/index.vue

 <template>
   <div>
     <mt-show-input v-model="mtShowInputText"></mt-show-input>
-    <role-select-tree :gData="roleTree"></role-select-tree>
-    <!--<user-select-tree></user-select-tree>-->
+    <!--<role-select-tree :gData="roleTree"></role-select-tree>-->
+    <!--<user-select-tree :gData="userTree" v-if="userTree.length>0"></user-select-tree>-->
+    <div id="user-select-tree">
+      <a-button type="primary" @click="showModal">Open Modal</a-button>
+      <a-modal
+        v-model="visible"
+        :width="700"
+        style="top: 20px;"
+        @ok="handleOk"
+      >
+        <div class="title" slot="title">
+          <span>选择人员<span style="color: #00000073">(可多选)</span></span>
+        </div>
+        <user-select-tree :selectedKeys="[1042237480110104577, 1042237480391122946]"></user-select-tree>
+      </a-modal>
+    </div>
   </div>
 
 </template>
 
 <script>
-  import mtShowInput from "@comp/mt-show-input";
+  import mtShowInput from '@comp/mt-show-input';
   import roleSelectTree from "@/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree";
   import userSelectTree from "@/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree";
 
-  import { roleTree } from '@/api/task';
-
-  const generateData = (_obj, _keys) => {
-
-    const children = []
-    for (let i = 0; i < _obj; i++) {
-      tns.push({ title: key, key, scopedSlots: { title: 'title' }})
-      if (i < y) {
-        children.push(key)
-      }
-    }
-    if (_level < 0) {
-      return tns
-    }
-    const level = _level - 1
-    children.forEach((key, index) => {
-      tns[index].children = []
-      return generateData(level, key, tns[index].children)
-    })
-  }
+  import { roleTree, userTree } from '@/api/task';
 
   export default {
     name: 'test',
     data() {
       return {
+        visible: false,
         mtShowInputText: '王旭',
-        roleTree: []
+        roleTree: [],
       }
     },
     components: {
@@ -47,16 +43,23 @@
       userSelectTree
     },
     methods: {
+      showModal() {
+        this.visible = true
+      },
+      handleOk(e) {
+        console.log(e);
+        this.visible = false
+      },
       getRoleTreeData() {
         roleTree().then(res => {
           const list = res.data || []
           const treeData = list.map(role => {
             const obj = Object.assign({}, {
-              key: role,
+              key: role.id,
               title: role.name,
               children: role.roles.map(cRole => {
                 const cObj = Object.assign({}, {
-                  key: cRole,
+                  key: cRole.id,
                   title: cRole.name
                 })
                 return cObj
@@ -67,11 +70,9 @@
           this.roleTree = treeData
           console.log('getRoleTreeData', this.roleTree)
         })
-      },
-
+      }
     },
     mounted() {
-      this.getRoleTreeData()
     }
   }
 </script>