Skip to content

M
mt-education-web
Commit 12e1aa86 authored by WangXu's avatar WangXu
Browse files
Options

用户选择组件 缺数据绑定

parent 3aa0f9c9
Hide whitespace changes
Inline Side-by-side
Showing with 2248 additions and 2103 deletions
src/api/task.js
View file @ 12e1aa86
......@@ -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/mock/services/test.js
View file @ 12e1aa86
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree/index.vue
View file @ 12e1aa86
......@@ -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
View file @ 12e1aa86
......@@ -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
View file @ 12e1aa86
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment