2 changed files with 310 additions and 58 deletions
@ -0,0 +1,248 @@ |
|||
<template> |
|||
<div> |
|||
<a-tree |
|||
v-model="checkedKeys" |
|||
:expanded-keys="expandedKeys" |
|||
@expand="onExpand" |
|||
:auto-expand-parent="autoExpandParent" |
|||
class="fill-width" |
|||
:block-node="true" |
|||
@select="onSelect" |
|||
:checkable="false" |
|||
> |
|||
<template v-for="item in treeData"> |
|||
<a-tree-node :key="item.did"> |
|||
<a-tree-node v-for="itemA in item.positionInfoList" :key="item.did + itemA.pid"> |
|||
<a-tree-node v-for="itemB in itemA.memberInfoList" :key="itemA.pid + itemB.mid"> |
|||
<div class="d-flex flex-row justify-space-between align-center" slot="title"> |
|||
<div>{{ itemB.mname }}，{{ itemB.phone }}</div> |
|||
</div> |
|||
</a-tree-node> |
|||
<div class="d-flex flex-row justify-space-between align-center" slot="title"> |
|||
<div> |
|||
{{ itemA.pname }} |
|||
<a-tag color="blue" class="ml-2" v-for="tag in itemA.roleList" :key="tag.rid" @click="changeRole(itemA.pid)"> |
|||
{{ tag.rname }} |
|||
</a-tag> |
|||
</div> |
|||
<div> |
|||
<!-- <a-icon |
|||
class="mr-2" |
|||
:style="{ fontSize: '20px' }" |
|||
v-if="isSelect === item.did + itemA.pid" |
|||
type="plus" |
|||
@click="showAddMember(itemA.did)" |
|||
></a-icon> --> |
|||
<a-popover v-model="itemA.show" placement="topRight" trigger="click"> |
|||
<a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did + itemA.pid" type="more" /> |
|||
<template slot="content"> |
|||
<div class="d-flex align-center"> |
|||
<a-button type="primary" class="mr-2" @click="editPositionModal(itemA)"> 修改 </a-button> |
|||
<a-button type="danger" @click="delPositionInfo(itemA)"> 删除 </a-button> |
|||
</div> |
|||
</template> |
|||
</a-popover> |
|||
</div> |
|||
</div> |
|||
</a-tree-node> |
|||
<div class="d-flex flex-row justify-space-between align-center" slot="title"> |
|||
<div> |
|||
{{ item.departmentName }} |
|||
<a-tag color="#87d068" class="ml-2" style="border-radius: 10px"> |
|||
{{ (item.positionInfoList ? item.positionInfoList.length : 0) + (item.sonDepartment ? item.sonDepartment.length : 0) }} |
|||
</a-tag> |
|||
</div> |
|||
<div> |
|||
<a-icon |
|||
class="mr-2" |
|||
:style="{ fontSize: '20px' }" |
|||
v-if="isSelect === item.did" |
|||
type="plus" |
|||
@click="showAddItem(item.did)" |
|||
></a-icon> |
|||
<!-- <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="m |
|||
ore" @click="showEditItem(item)" /> --> |
|||
<a-popover v-model="item.departmentIsShow" placement="topRight" trigger="click"> |
|||
<a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="more" /> |
|||
<template slot="content"> |
|||
<div class="d-flex align-center"> |
|||
<a-button type="primary" class="mr-2" @click="editDepartmentModal(item)"> 修改 </a-button> |
|||
<a-button type="danger" @click="delpartment(item)"> 删除 </a-button> |
|||
</div> |
|||
</template> |
|||
</a-popover> |
|||
</div> |
|||
</div> |
|||
<TreeNode |
|||
:key="item.did + '1'" |
|||
ref="tree-node" |
|||
v-if="item.sonDepartment" |
|||
:tree-data="item.sonDepartment" |
|||
@showAddItem="showAddItem" |
|||
@showEditItem="showEditItem" |
|||
@showAddMember="showAddMember" |
|||
@showEditMember="showEditMember" |
|||
@changeRole="changeRole" |
|||
@editPositionModal="editPositionModal" |
|||
@editDepartmentModal="editDepartmentModal" |
|||
/> |
|||
</a-tree-node> |
|||
</template> |
|||
</a-tree> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TreeNode from './TreeNode.vue'; |
|||
|
|||
export default { |
|||
name: 'TreeNode', |
|||
isTreeNode: true, |
|||
components: { TreeNode }, |
|||
props: { |
|||
treeData: { |
|||
default: () => [], |
|||
type: Array, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
isSelect: '', |
|||
expandedKeys: [], |
|||
autoExpandParent: true, |
|||
checkedKeys: [], |
|||
}; |
|||
}, |
|||
watch: { |
|||
treeData: { |
|||
handler() { |
|||
this.expandedKeys = []; |
|||
if (this.treeData.length) { |
|||
for (let i = 0; i < this.treeData.length; i++) { |
|||
this.expandedKeys.push(this.treeData[i].did); |
|||
} |
|||
} |
|||
}, |
|||
deep: true, |
|||
}, |
|||
}, |
|||
created() { |
|||
this.expandedKeys = []; |
|||
if (this.treeData.length) { |
|||
for (let i = 0; i < this.treeData.length; i++) { |
|||
this.expandedKeys.push(this.treeData[i].did); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 显示修改部门信息 |
|||
editDepartmentModal(item) { |
|||
console.log('item: ', item); |
|||
this.$emit('editDepartmentModal', item); |
|||
}, |
|||
// 显示修改职位信息 |
|||
editPositionModal(item) { |
|||
this.$emit('editPositionModal', item); |
|||
}, |
|||
// 删除部门 |
|||
delpartment(item) { |
|||
console.log('item: ', item); |
|||
}, |
|||
// 删除职位信息 |
|||
delPositionInfo(item) { |
|||
console.log('item: ', item); |
|||
}, |
|||
// 显示修改关联角色 |
|||
changeRole(id) { |
|||
this.$emit('changeRole', id); |
|||
}, |
|||
onSelect(selectedKeys, info) { |
|||
console.log('selected', selectedKeys, info); |
|||
this.isSelect = selectedKeys[0]; |
|||
}, |
|||
showAddItem(id) { |
|||
this.$emit('showAddItem', id); |
|||
}, |
|||
showEditItem(item) { |
|||
this.$emit('showEditItem', item); |
|||
}, |
|||
showAddMember(id) { |
|||
this.$emit('showAddMember', id); |
|||
}, |
|||
showEditMember(item) { |
|||
this.visible = true; |
|||
// this.$emit('showEditMember', item); |
|||
}, |
|||
onExpand(expandedKeys) { |
|||
this.expandedKeys = expandedKeys; |
|||
this.autoExpandParent = false; |
|||
}, |
|||
// 全部折叠 |
|||
foldAll() { |
|||
this.expandedKeys = []; |
|||
}, |
|||
// 全部展开 |
|||
openAll() { |
|||
var expandedKeys = []; |
|||
if (this.treeData.length) { |
|||
for (let i = 0; i < this.treeData.length; i++) { |
|||
const item = this.treeData[i]; |
|||
expandedKeys.push(item.did); |
|||
for (let j = 0; j < item.positionInfoList.length; j++) { |
|||
const itemA = item.positionInfoList[j]; |
|||
expandedKeys.push(item.did + itemA.pid); |
|||
} |
|||
} |
|||
} |
|||
this.expandedKeys = expandedKeys; |
|||
var child = this.$refs['tree-node']; |
|||
console.log('child: ', child); |
|||
if (child) { |
|||
child.foldAll(); |
|||
} |
|||
}, |
|||
// 全选/取消全选 |
|||
chooseAll(isTrue) { |
|||
if (isTrue) { |
|||
var checkedKeys = []; |
|||
if (this.treeData.length) { |
|||
for (let i = 0; i < this.treeData.length; i++) { |
|||
const item = this.treeData[i]; |
|||
checkedKeys.push(item.did); |
|||
for (let j = 0; j < item.positionInfoList.length; j++) { |
|||
const itemA = item.positionInfoList[j]; |
|||
checkedKeys.push(item.did + itemA.pid); |
|||
} |
|||
} |
|||
} |
|||
this.checkedKeys = checkedKeys; |
|||
var child = this.$refs['tree-node']; |
|||
if (child) { |
|||
child.foldAll(); |
|||
} |
|||
} else { |
|||
this.checkedKeys = []; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
ul { |
|||
margin: 0; |
|||
padding: 0 !important; |
|||
} |
|||
/deep/.ant-tree li span.ant-tree-switcher, |
|||
.ant-tree li span.ant-tree-iconEle { |
|||
margin-top: 8px !important; |
|||
} |
|||
/deep/.ant-tree li { |
|||
min-height: 54px; |
|||
line-height: 40px; |
|||
font-size: 16px; |
|||
} |
|||
/deep/.ant-tree li .ant-tree-node-content-wrapper { |
|||
min-height: 40px; |
|||
line-height: 40px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue