hc-tree.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <el-radio-group v-model="radioKeys" @change="treeRadioChange">
  3. <ElTree class="hc-tree-node tree-line" :class="ui" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="primaryKeyId"
  4. :default-expanded-keys="defaultExpandedCids" @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu" :indent="0">
  5. <template #default="{ node, data }">
  6. <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
  7. <!--树组件,节点名称-->
  8. <div class="label level-name" v-if="node.level === 1">{{ node.label }}</div>
  9. <div class="label" v-else>
  10. <el-radio class="size-xl" :label="data['primaryKeyId']" @click.stop v-if="isRadio">{{ node.label }}</el-radio>
  11. <span v-else>{{ node.label }}</span>
  12. </div>
  13. <!--树组件,操作菜单-->
  14. <div class="menu-icon" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
  15. <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">
  16. <HcIcon name="apps" ui="text-2xl"/>
  17. </div>
  18. </div>
  19. <!--树组件,操作菜单 END-->
  20. </div>
  21. </template>
  22. </ElTree>
  23. </el-radio-group>
  24. <!--右键菜单-->
  25. <HcContextMenu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect" v-if="menusData.length > 0" @closed="handleMenuClosed">
  26. <template #sort="{item}">
  27. <HcIcon :name="item.icon" :line="false" class="menu-item-icon"/>
  28. <span class="menu-item-name">{{item.label}}</span>
  29. </template>
  30. </HcContextMenu>
  31. </template>
  32. <script setup>
  33. import {ref,nextTick,watch} from "vue";
  34. import dataFillQuery from '~api/data-fill/query';
  35. import {isArrItem, getArrValue, getObjValue, isNullES} from "js-fast-way"
  36. //参数
  37. const props = defineProps({
  38. ui: {
  39. type: String,
  40. default: ''
  41. },
  42. menus: {
  43. type: Array,
  44. default: () => ([])
  45. },
  46. projectId: {
  47. type: [String,Number],
  48. default: ''
  49. },
  50. contractId: {
  51. type: [String,Number],
  52. default: ''
  53. },
  54. autoExpandKeys: {
  55. type: Array,
  56. default: () => ([])
  57. },
  58. idPrefix: {
  59. type: String,
  60. default: 'hc-tree-'
  61. },
  62. isAutoKeys: {
  63. type: Boolean,
  64. default: true
  65. },
  66. isAutoClick: {
  67. type: Boolean,
  68. default: true
  69. },
  70. isRadio: {
  71. type: Boolean,
  72. default: false
  73. },
  74. radioKey: {
  75. type: String,
  76. default: ''
  77. },
  78. })
  79. //变量
  80. const ElTreeRef = ref(null)
  81. const treeRefNode = ref(null)
  82. const treeRefData = ref(null)
  83. const ElTreeProps = ref({
  84. label: 'title',
  85. children: 'children',
  86. isLeaf: 'notExsitChild'
  87. })
  88. const menusData = ref(props.menus)
  89. const isAutoKeys = ref(props.isAutoKeys)
  90. const TreeExpandKey = ref(props.autoExpandKeys)
  91. const projectId = ref(props.projectId);
  92. const contractId = ref(props.contractId);
  93. const idPrefix = ref(props.idPrefix);
  94. const radioKeys = ref(Number(props.radioKey));
  95. //监听
  96. watch(() => [
  97. props.menus,
  98. props.isAutoKeys,
  99. props.autoExpandKeys,
  100. props.projectId,
  101. props.contractId,
  102. props.idPrefix,
  103. props.radioKey,
  104. ], ([menus, AutoKeys, expandKeys, UserProjectId, UserContractId, UserIdPrefix, radioKey]) => {
  105. menusData.value = menus
  106. isAutoKeys.value = AutoKeys
  107. TreeExpandKey.value = expandKeys
  108. projectId.value = UserProjectId
  109. contractId.value = UserContractId
  110. idPrefix.value = UserIdPrefix
  111. radioKeys.value = Number(radioKey)
  112. })
  113. //事件
  114. const emit = defineEmits(['menuTap','nodeTap', 'nodeLoading', 'radioChange'])
  115. //单选框事件
  116. const treeRadioChange = (val) => {
  117. emit('radioChange', val)
  118. }
  119. //树形结构异步加载数据
  120. const defaultExpandedCids = ref([])
  121. const ElTreeLoadNode = async (node, resolve) => {
  122. if (contractId.value) {
  123. let contractIdRelation = '', parentId = '', primaryKeyId = '';
  124. if (node.level !== 0) {
  125. const nodeData = getObjValue(node?.data);
  126. contractIdRelation = nodeData?.contractIdRelation || ''
  127. parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
  128. primaryKeyId = nodeData?.id || ''
  129. }
  130. //获取数据
  131. const {error, code, data} = await dataFillQuery.queryWbsTreeData({
  132. contractId: contractId.value || '',
  133. contractIdRelation,
  134. primaryKeyId,
  135. parentId
  136. })
  137. //处理数据
  138. if (!error && code === 200) {
  139. let clickKey = '', defaultExpandedArr = [];
  140. const keys = TreeExpandKey.value || []
  141. const resData = getArrValue(data)
  142. if (keys.length > 0) {
  143. let lastKey = keys[keys.length-1];
  144. for (const item of resData) {
  145. //自动展开
  146. if (isArrItem(keys,item?.primaryKeyId)) {
  147. defaultExpandedArr.push(item?.primaryKeyId)
  148. }
  149. //最后一个,选中点击
  150. if (item?.primaryKeyId === lastKey) {
  151. clickKey = item?.primaryKeyId
  152. }
  153. }
  154. } else if (node.level === 0) {
  155. defaultExpandedArr.push(resData[0]?.primaryKeyId)
  156. }
  157. //自动展开
  158. defaultExpandedCids.value = defaultExpandedArr
  159. if (node.level === 0) {
  160. emit('nodeLoading')
  161. }
  162. resolve(resData)
  163. //最后一个,执行点击
  164. if (props.isAutoClick && clickKey) {
  165. await nextTick(() => {
  166. document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
  167. })
  168. }
  169. } else {
  170. if (node.level === 0) {
  171. emit('nodeLoading')
  172. }
  173. resolve([])
  174. }
  175. } else {
  176. resolve([])
  177. }
  178. }
  179. //节点被点击
  180. const ElTreeClick = async (data,node) => {
  181. if (isAutoKeys.value) {
  182. let autoKeysArr = []
  183. await getNodeExpandKeys(node, autoKeysArr)
  184. const autoKeys = autoKeysArr.reverse()
  185. emit('nodeTap', {node, data, keys: autoKeys})
  186. } else {
  187. emit('nodeTap', {node, data, keys: []})
  188. }
  189. }
  190. //处理自动展开的节点KEY
  191. const getNodeExpandKeys = async (node, newKeys) => {
  192. const parent = node?.parent ?? []
  193. const primaryKeyId = node?.data?.primaryKeyId ?? ''
  194. if (primaryKeyId) {
  195. newKeys.push(primaryKeyId)
  196. await getNodeExpandKeys(parent, newKeys)
  197. }
  198. }
  199. //鼠标右键事件
  200. const contextMenuRef = ref(null)
  201. const ElTreeLabelContextMenu = (e,data,node) => {
  202. const rows = menusData.value || [];
  203. if (node.level !== 1 && rows.length > 0) {
  204. e.preventDefault();
  205. treeRefNode.value = node;
  206. treeRefData.value = data;
  207. node.showTreeMenu = true
  208. //展开菜单
  209. contextMenuRef.value?.showMenu(e)
  210. }
  211. }
  212. //鼠标右键菜单被点击
  213. const handleMenuSelect = ({key}) => {
  214. const node = treeRefNode.value;
  215. const data = treeRefData.value;
  216. emit('menuTap', {key, node, data})
  217. }
  218. const handleMenuClosed = () => {
  219. const node = treeRefNode.value;
  220. if (!isNullES(node)) {
  221. treeRefNode.value['showTreeMenu'] = false
  222. }
  223. }
  224. //设置树菜单的标记数据
  225. const removeElTreeNode = (key) => {
  226. //根据 data 或者 key 拿到 Tree 组件中的 node
  227. let node = ElTreeRef.value.getNode(key)
  228. //删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性
  229. ElTreeRef.value.remove(node)
  230. }
  231. // 暴露出去
  232. defineExpose({
  233. removeElTreeNode
  234. })
  235. </script>
  236. <style lang="scss" scoped>
  237. @import "../../../styles/app/tree.scss";
  238. .data-custom-tree-node {
  239. .menu-icon {
  240. position: absolute;
  241. pointer-events: none;
  242. transition: opacity 0.2s;
  243. opacity: 0;
  244. right: 0;
  245. background: rgba(255, 255, 255, 0.25);
  246. border-radius: 2px;
  247. .cu-tree-node-popover-menu-icon {
  248. display: flex;
  249. align-items: center;
  250. justify-content: center;
  251. }
  252. }
  253. &:hover {
  254. .menu-icon {
  255. opacity: 1;
  256. pointer-events: all;
  257. cursor: context-menu;
  258. }
  259. }
  260. .menu-icon.show {
  261. opacity: 1;
  262. pointer-events: all;
  263. cursor: context-menu;
  264. }
  265. }
  266. </style>