123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434 |
- <template>
- <a-card
- :class="[
- $style.treewrap,
- $style.ywlxtree,
- { [$style.collapse]: fold, [$style.single]: single },
- ]"
- >
- <!-- 选择部门 -->
- <a-tree-select
- v-if="isSelectDep"
- v-model="depvalue"
- :allow-clear="true"
- :tree-data="depOptions"
- @change="changedep"
- >
- </a-tree-select>
- <!-- 搜索框 -->
- <a-input-search
- v-if="isSearch"
- v-model="searchStr"
- placeholder=""
- allow-clear
- @change="onSearchChange"
- />
- <a-spin :spinning="spinning" :class="$style.spin" />
- <a-empty v-if="empty" />
- <a-tree
- v-else
- :key="refreshKey"
- ref="auditTree"
- v-model="checkedKeys"
- :block-node="false"
- :show-icon="true"
- :show-line="showLine"
- :check-strictly="true"
- :checkable="checkable"
- :draggable="draggable"
- :tree-data="treeData"
- :replace-fields="replaceFields"
- :selected-keys="defaultSelectedKeys"
- :expanded-keys="expandedKeys"
- :default-expanded-keys="defaultTreeExpandedKeys"
- :load-data="onLoadData"
- @select="treeSelect"
- @check="treeCheck"
- @expand="onExpand"
- @dragenter="onDragEnter"
- @drop="onDrop"
- >
- <template v-slot:title="{ text, props }">
- <span v-if="text.indexOf(searchValue) > -1">
- {{ text.substr(0, text.indexOf(searchValue))
- }}<span :class="$style.active">{{ searchValue }}</span
- >{{ text.substr(text.indexOf(searchValue) + searchValue.length) }}</span
- ><span v-else>{{ text }}</span>
- <!-- 后台返回数量,如果有数量的话就显示 -->
- <span v-if="props.count > 0">({{ props.count }})</span>
- </template>
- <!-- 如果已配置负责人,则展示用户图标 -->
- <template slot="hasuser" slot-scope="item">
- <a-icon type="team" @click="showUser(item)" />
- </template>
- </a-tree>
- <a-button v-if="showPrimary" type="primary" :class="$style.fold" @click="foldClick">
- <a-icon :type="icontype" />
- </a-button>
- </a-card>
- </template>
- <script>
- import { getUserInfo } from '@/common/store-mixin'
- import AuditPermissionTreeMixins from './audit-permission-tree-mixins'
- import auditOperateTreeService from './audit-operate-tree-service'
- import components from './_import-components/audit-operate-tree-import'
- export default {
- name: 'AuditOperateTree',
- metaInfo: {
- title: 'AuditOperateTree',
- },
- components,
- mixins: [AuditPermissionTreeMixins],
- props: {
- // 默认选中节点
- // selectedKeys: {
- // type: Array,
- // default: function() {
- // return [1]
- // },
- // },
- // 是否开启搜索
- isSearch: {
- type: Boolean,
- default: false,
- },
- // 是否显示复选框
- checkable: {
- type: Boolean,
- default: false,
- },
- // 是否可以拖拽
- draggable: {
- type: Boolean,
- default: false,
- },
- // 是否显示连线
- showLine: {
- type: Boolean,
- default: false,
- },
- // 根节点名称
- topNodeText: {
- type: String,
- default: 'XX科技1',
- },
- // 地址树接口数据源
- treeparams: {
- type: Object,
- default: () => {
- return {}
- },
- },
- // 默认展开节点id
- defaultExpandedKeys: {
- type: Array,
- default: () => {
- return ['0']
- },
- },
- // 是否显示部门选择下拉框
- isSelectDep: {
- type: Boolean,
- default: false,
- },
- // 部门下拉框列表值
- depOptions: {
- type: Array,
- default: () => {
- return []
- },
- },
- // 部门下拉框默认值
- defaultDepValue: {
- type: Array,
- default: () => {
- return []
- },
- },
- // 是否显示隐藏按钮
- showPrimary: {
- type: Boolean,
- default: true,
- },
- // 地址树是否单选
- single: {
- type: Boolean,
- default: false,
- },
- refreshKey: {
- type: Number,
- default: 0,
- },
- },
- data() {
- return {
- defaultTreeExpandedKeys: ['0'],
- defaultSelectedKeys: ['0'],
- selectedKeys: ['0'],
- depvalue: [], // 选择的组织数据
- checkedKeys: [], // 选中的节点数据
- treeData: [],
- dataList: [], // 数组dataList,搜索要用
- spinning: true,
- empty: false,
- icontype: 'left',
- fold: false,
- replaceFields: {
- title: 'text',
- key: 'id',
- },
- expandedKeys: ['0'],
- backupsExpandedKeys: [],
- autoExpandParent: false,
- searchValue: '',
- searchStr: '',
- defaultTopNodeText: '审计框架',
- defaultTopNodeId: '0',
- key: 1,
- treedata: [],
- }
- },
- created() {},
- methods: {
- // 小箭头点击事件
- foldClick() {
- this.fold = !this.fold
- if (this.fold) {
- this.icontype = 'right'
- } else {
- this.icontype = 'left'
- }
- },
- onDragEnter(info) {
- // expandedKeys 需要受控时设置
- this.expandedKeys = info.expandedKeys
- },
- // 拖拽节点方法
- onDrop(info) {
- // 被插入节点信息
- const dropKey = info.node.eventKey
- // 拖拽节点信息
- const dragKey = info.dragNode.eventKey
- const dropPos = info.node.pos.split('-')
- // -1表示之前 0表示合并 1表示之后
- const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
- const loop = (data, key, callback) => {
- data.forEach((item, index, arr) => {
- if (item.id === key) {
- return callback(item, index, arr)
- }
- if (item.children) {
- return loop(item.children, key, callback)
- }
- })
- }
- const data = this.treeData
- // Find dragObject
- let dragObj
- loop(data, dragKey, (item, index, arr) => {
- arr.splice(index, 1)
- dragObj = item
- })
- if (!info.dropToGap) {
- // Drop on the content
- loop(data, dropKey, (item) => {
- item.children = item.children || []
- // where to insert 示例添加到尾部,可以是随意位置
- item.children.push(dragObj)
- })
- } else if (
- (info.node.children || []).length > 0 && // Has children
- info.node.expanded && // Is expanded
- dropPosition === 1 // On the bottom gap
- ) {
- loop(data, dropKey, (item) => {
- item.children = item.children || []
- // where to insert 示例添加到尾部,可以是随意位置
- item.children.unshift(dragObj)
- })
- } else {
- let ar
- let i
- loop(data, dropKey, (item, index, arr) => {
- ar = arr
- i = index
- })
- if (dropPosition === -1) {
- ar.splice(i, 0, dragObj)
- } else {
- ar.splice(i + 1, 0, dragObj)
- }
- }
- this.treeData = data
- // 拖拽完成,调用接口
- const dragParams = {
- configId: this.treeparams.configId,
- id: dragKey,
- targetId: dropKey,
- position: dropPosition,
- }
- auditOperateTreeService.dragNode(dragParams).then((res) => {
- console.log(res)
- })
- },
- // 点击地址树展开时调用
- onLoadData(treeNode) {
- const userInfo = getUserInfo()
- // return auditOperateTreeService.getYearTree(userInfo.account).then((res) => {
- // treeNode.dataRef.children = res.data
- // this.treeData = this.transformData([...this.treeData])
- // this.generateList(this.treeData)
- // })
- },
- // 初始化地址树
- initTreeData(depId) {
- let topDepId = null
- const userInfo = getUserInfo()
- auditOperateTreeService.getYearTree(userInfo.account).then((res) => {
- topDepId = !depId ? 1 : depId
- console.log(res.data)
- this.treedata = res.data
- // this.defaultTopNodeId = res.data[0].id
- // this.defaultTopNodeText = res.data[0].text
- // this.defaultTreeExpandedKeys = [res.data[0].id]
- // this.defaultSelectedKeys = [res.data[0].id]
- // this.selectedKeys = [res.data[0].id]
- // node.dataRef.id
- // this.treeSelect([res.data[0].id], {
- // node: { dataRef: { id: res.data[0].id, text: res.data[0].text } },
- // })
- // auditOperateTreeService.getCategoryTree(topDepId).then((res) => {
- this.spinning = false
- const treeNode = [
- {
- id: this.defaultTopNodeId,
- text: this.defaultTopNodeText,
- leaf: false,
- props: {},
- children: res.data,
- key: this.defaultTopNodeId,
- },
- ]
- this.treeData = this.transformData(treeNode)
- this.expandedKeys = this.defaultTreeExpandedKeys
- this.generateList(this.treeData)
- this.empty = false
- })
- },
- },
- }
- </script>
- <style module lang="scss">
- @use '@/common/design' as *;
- .spin {
- width: 100%;
- line-height: 30;
- }
- .ywlxtree {
- :global(.ant-tree-title) {
- display: inline-block;
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- :global(.ant-input-search) {
- margin: 8px 0;
- overflow: hidden;
- }
- .active {
- color: $primary-color;
- }
- :global(.ant-select) {
- width: 100%;
- overflow: hidden;
- }
- }
- .treewrap {
- position: relative;
- display: flex;
- flex-direction: column;
- width: 35%;
- min-height: 100%;
- margin-right: $padding-lg;
- transition: width 0.2s;
- .fold {
- position: absolute;
- top: calc(50% - 30px);
- right: -15px;
- z-index: 2;
- width: 15px;
- height: 75px;
- padding: 0;
- border-radius: 0 10px 10px 0;
- }
- :global(.ant-tree) {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- :global(.ant-card-body) {
- background: $white;
- }
- }
- .collapse {
- width: 0 !important;
- :global(.ant-card-body) {
- background: transparent;
- :global(.ant-empty) {
- display: none;
- }
- }
- }
- // 单选样式
- .single {
- :global .ant-tree-checkbox {
- .ant-tree-checkbox-inner {
- border-radius: 100px;
- &::after {
- position: absolute;
- top: 3px;
- left: 3px;
- display: table;
- width: 8px;
- height: 8px;
- content: ' ';
- background-color: $primary-color;
- border: 0;
- border-radius: 8px;
- opacity: 0;
- transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
- transform: scale(0);
- }
- }
- &.ant-tree-checkbox-checked {
- &::after {
- position: absolute;
- top: 16.67%;
- left: 0;
- width: 100%;
- height: 66.67%;
- content: '';
- border: 1px solid #1890ff;
- border-radius: 50%;
- animation: antRadioEffect 0.36s ease-in-out;
- animation-fill-mode: both;
- }
- .ant-tree-checkbox-inner {
- background-color: $white;
- &::after {
- opacity: 1;
- transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
- transform: scale(1);
- }
- }
- }
- }
- }
- </style>
|