用户选择组件 缺数据绑定

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/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>