Tree.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  4. import { watchEffect, ref, defineComponent, computed } from 'vue';
  5. import classNames from '../_util/classNames';
  6. import VcTree from '../vc-tree';
  7. import PropTypes from '../_util/vue-types';
  8. import { filterEmpty } from '../_util/props-util';
  9. import initDefaultProps from '../_util/props-util/initDefaultProps';
  10. import { treeProps as vcTreeProps } from '../vc-tree/props';
  11. import useConfigInject from '../_util/hooks/useConfigInject';
  12. import renderSwitcherIcon from './utils/iconUtil';
  13. import dropIndicatorRender from './utils/dropIndicator';
  14. import devWarning from '../vc-util/devWarning';
  15. import { warning } from '../vc-util/warning';
  16. import omit from '../_util/omit';
  17. export var treeProps = function treeProps() {
  18. var baseTreeProps = vcTreeProps();
  19. return _objectSpread(_objectSpread({}, baseTreeProps), {}, {
  20. showLine: {
  21. type: [Boolean, Object],
  22. default: undefined
  23. },
  24. /** 是否支持多选 */
  25. multiple: {
  26. type: Boolean,
  27. default: undefined
  28. },
  29. /** 是否自动展开父节点 */
  30. autoExpandParent: {
  31. type: Boolean,
  32. default: undefined
  33. },
  34. /** checkable状态下节点选择完全受控(父子节点选中状态不再关联)*/
  35. checkStrictly: {
  36. type: Boolean,
  37. default: undefined
  38. },
  39. /** 是否支持选中 */
  40. checkable: {
  41. type: Boolean,
  42. default: undefined
  43. },
  44. /** 是否禁用树 */
  45. disabled: {
  46. type: Boolean,
  47. default: undefined
  48. },
  49. /** 默认展开所有树节点 */
  50. defaultExpandAll: {
  51. type: Boolean,
  52. default: undefined
  53. },
  54. /** 默认展开对应树节点 */
  55. defaultExpandParent: {
  56. type: Boolean,
  57. default: undefined
  58. },
  59. /** 默认展开指定的树节点 */
  60. defaultExpandedKeys: {
  61. type: Array
  62. },
  63. /** (受控)展开指定的树节点 */
  64. expandedKeys: {
  65. type: Array
  66. },
  67. /** (受控)选中复选框的树节点 */
  68. checkedKeys: {
  69. type: [Array, Object]
  70. },
  71. /** 默认选中复选框的树节点 */
  72. defaultCheckedKeys: {
  73. type: Array
  74. },
  75. /** (受控)设置选中的树节点 */
  76. selectedKeys: {
  77. type: Array
  78. },
  79. /** 默认选中的树节点 */
  80. defaultSelectedKeys: {
  81. type: Array
  82. },
  83. selectable: {
  84. type: Boolean,
  85. default: undefined
  86. },
  87. loadedKeys: {
  88. type: Array
  89. },
  90. draggable: {
  91. type: Boolean,
  92. default: undefined
  93. },
  94. showIcon: {
  95. type: Boolean,
  96. default: undefined
  97. },
  98. icon: {
  99. type: Function
  100. },
  101. switcherIcon: PropTypes.any,
  102. prefixCls: String,
  103. /**
  104. * @default{title,key,children}
  105. * deprecated, please use `fieldNames` instead
  106. * 替换treeNode中 title,key,children字段为treeData中对应的字段
  107. */
  108. replaceFields: {
  109. type: Object
  110. },
  111. blockNode: {
  112. type: Boolean,
  113. default: undefined
  114. },
  115. openAnimation: PropTypes.any,
  116. onDoubleclick: baseTreeProps.onDblclick,
  117. 'onUpdate:selectedKeys': Function,
  118. 'onUpdate:checkedKeys': Function,
  119. 'onUpdate:expandedKeys': Function
  120. });
  121. };
  122. export default defineComponent({
  123. compatConfig: {
  124. MODE: 3
  125. },
  126. name: 'ATree',
  127. inheritAttrs: false,
  128. props: initDefaultProps(treeProps(), {
  129. checkable: false,
  130. selectable: true,
  131. showIcon: false,
  132. blockNode: false
  133. }),
  134. slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
  135. // emits: [
  136. // 'update:selectedKeys',
  137. // 'update:checkedKeys',
  138. // 'update:expandedKeys',
  139. // 'expand',
  140. // 'select',
  141. // 'check',
  142. // 'doubleclick',
  143. // 'dblclick',
  144. // ],
  145. setup: function setup(props, _ref) {
  146. var attrs = _ref.attrs,
  147. expose = _ref.expose,
  148. emit = _ref.emit,
  149. slots = _ref.slots;
  150. warning(!(props.treeData === undefined && slots.default), '`children` of Tree is deprecated. Please use `treeData` instead.');
  151. var _useConfigInject = useConfigInject('tree', props),
  152. prefixCls = _useConfigInject.prefixCls,
  153. direction = _useConfigInject.direction,
  154. virtual = _useConfigInject.virtual;
  155. var treeRef = ref();
  156. var scrollTo = function scrollTo(scroll) {
  157. var _treeRef$value;
  158. (_treeRef$value = treeRef.value) === null || _treeRef$value === void 0 ? void 0 : _treeRef$value.scrollTo(scroll);
  159. };
  160. expose({
  161. treeRef: treeRef,
  162. onNodeExpand: function onNodeExpand() {
  163. var _treeRef$value2;
  164. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  165. args[_key] = arguments[_key];
  166. }
  167. (_treeRef$value2 = treeRef.value) === null || _treeRef$value2 === void 0 ? void 0 : _treeRef$value2.onNodeExpand.apply(_treeRef$value2, args);
  168. },
  169. scrollTo: scrollTo,
  170. selectedKeys: computed(function () {
  171. var _treeRef$value3;
  172. return (_treeRef$value3 = treeRef.value) === null || _treeRef$value3 === void 0 ? void 0 : _treeRef$value3.selectedKeys;
  173. }),
  174. checkedKeys: computed(function () {
  175. var _treeRef$value4;
  176. return (_treeRef$value4 = treeRef.value) === null || _treeRef$value4 === void 0 ? void 0 : _treeRef$value4.checkedKeys;
  177. }),
  178. halfCheckedKeys: computed(function () {
  179. var _treeRef$value5;
  180. return (_treeRef$value5 = treeRef.value) === null || _treeRef$value5 === void 0 ? void 0 : _treeRef$value5.halfCheckedKeys;
  181. }),
  182. loadedKeys: computed(function () {
  183. var _treeRef$value6;
  184. return (_treeRef$value6 = treeRef.value) === null || _treeRef$value6 === void 0 ? void 0 : _treeRef$value6.loadedKeys;
  185. }),
  186. loadingKeys: computed(function () {
  187. var _treeRef$value7;
  188. return (_treeRef$value7 = treeRef.value) === null || _treeRef$value7 === void 0 ? void 0 : _treeRef$value7.loadingKeys;
  189. }),
  190. expandedKeys: computed(function () {
  191. var _treeRef$value8;
  192. return (_treeRef$value8 = treeRef.value) === null || _treeRef$value8 === void 0 ? void 0 : _treeRef$value8.expandedKeys;
  193. })
  194. });
  195. watchEffect(function () {
  196. devWarning(props.replaceFields === undefined, 'Tree', '`replaceFields` is deprecated, please use fieldNames instead');
  197. });
  198. var handleCheck = function handleCheck(checkedObjOrKeys, eventObj) {
  199. emit('update:checkedKeys', checkedObjOrKeys);
  200. emit('check', checkedObjOrKeys, eventObj);
  201. };
  202. var handleExpand = function handleExpand(expandedKeys, eventObj) {
  203. emit('update:expandedKeys', expandedKeys);
  204. emit('expand', expandedKeys, eventObj);
  205. };
  206. var handleSelect = function handleSelect(selectedKeys, eventObj) {
  207. emit('update:selectedKeys', selectedKeys);
  208. emit('select', selectedKeys, eventObj);
  209. };
  210. return function () {
  211. var _classNames;
  212. var showIcon = props.showIcon,
  213. showLine = props.showLine,
  214. _props$switcherIcon = props.switcherIcon,
  215. _switcherIcon = _props$switcherIcon === void 0 ? slots.switcherIcon : _props$switcherIcon,
  216. _props$icon = props.icon,
  217. icon = _props$icon === void 0 ? slots.icon : _props$icon,
  218. blockNode = props.blockNode,
  219. checkable = props.checkable,
  220. selectable = props.selectable,
  221. _props$fieldNames = props.fieldNames,
  222. fieldNames = _props$fieldNames === void 0 ? props.replaceFields : _props$fieldNames,
  223. _props$motion = props.motion,
  224. motion = _props$motion === void 0 ? props.openAnimation : _props$motion,
  225. _props$itemHeight = props.itemHeight,
  226. itemHeight = _props$itemHeight === void 0 ? 28 : _props$itemHeight,
  227. onDoubleclick = props.onDoubleclick,
  228. onDblclick = props.onDblclick;
  229. var newProps = _objectSpread(_objectSpread(_objectSpread({}, attrs), omit(props, ['onUpdate:checkedKeys', 'onUpdate:expandedKeys', 'onUpdate:selectedKeys', 'onDoubleclick'])), {}, {
  230. showLine: Boolean(showLine),
  231. dropIndicatorRender: dropIndicatorRender,
  232. fieldNames: fieldNames,
  233. icon: icon,
  234. itemHeight: itemHeight
  235. });
  236. var children = slots.default ? filterEmpty(slots.default()) : undefined;
  237. return _createVNode(VcTree, _objectSpread(_objectSpread({}, newProps), {}, {
  238. "virtual": virtual.value,
  239. "motion": motion,
  240. "ref": treeRef,
  241. "prefixCls": prefixCls.value,
  242. "class": classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls.value, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls.value, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames), attrs.class),
  243. "direction": direction.value,
  244. "checkable": checkable,
  245. "selectable": selectable,
  246. "switcherIcon": function switcherIcon(nodeProps) {
  247. return renderSwitcherIcon(prefixCls.value, _switcherIcon, showLine, nodeProps);
  248. },
  249. "onCheck": handleCheck,
  250. "onExpand": handleExpand,
  251. "onSelect": handleSelect,
  252. "onDblclick": onDblclick || onDoubleclick,
  253. "children": children
  254. }), _objectSpread(_objectSpread({}, slots), {}, {
  255. checkable: function checkable() {
  256. return _createVNode("span", {
  257. "class": "".concat(prefixCls.value, "-checkbox-inner")
  258. }, null);
  259. }
  260. }));
  261. };
  262. }
  263. });