ly-tree-node.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <template>
  2. <view v-if="node.visible" class="ly-tree-node" name="LyTreeNode" ref="node">
  3. <view class="ly-tree-node__content" :class="{
  4. 'ly-tree-node__content-current': node.isCurrent && highlightCurrent
  5. }" :style="{
  6. 'padding-left': '2px'
  7. }">
  8. <text v-if="node.isLeaf" class="ly-tree-node__expand-icon-holder">
  9. </text>
  10. <text v-else class="ly-tree-node__expand-icon" @click.stop="handleExpandIconClick">
  11. {{node.expanded ? iconExpand : iconCollapse}}
  12. </text>
  13. <ly-checkbox v-if="checkboxVisible || radioVisible" :type="checkboxVisible ? 'checkbox' : 'radio'"
  14. :checked="node.checked" :indeterminate="node.indeterminate" :disabled="!!node.disabled"
  15. @check="handleCheckChange(!node.checked)" />
  16. <image v-if="node.loading" class="ly-tree-node__loading-icon" mode="widthFix"
  17. src="data:image/gif;base64,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">
  18. </image>
  19. <template v-if="node.icon && node.icon.length > 0">
  20. <image v-if="node.icon.indexOf('/') !== -1" class="ly-tree-node__icon" :src="node.icon" mode="widthFix"
  21. @error="handleImageError">
  22. </image>
  23. <text v-else class="ly-tree-node__icon" :class="node.icon">
  24. </text>
  25. </template>
  26. <text class="ly-tree-node__label" @click.stop="handleClick"
  27. :class="{active:node.label == '全县' || node.label == '部门' || node.label == '乡镇' || node.label == '街道'}">
  28. {{node.label}}
  29. </text>
  30. </view>
  31. <view v-if="(!renderAfterExpand || childNodeRendered)" class="ly-tree-node__children"
  32. :class="{'ly-tree-node__children-hide': !expanded}" role="group">
  33. <ly-tree-node v-for="cNodeId in node.childNodesId" :nodeId="cNodeId"
  34. :render-after-expand="renderAfterExpand" :show-checkbox="showCheckbox" :show-radio="showRadio"
  35. :check-only-leaf="checkOnlyLeaf" :key="getNodeKey(cNodeId)" :indent="indent" :icon-class="iconClass">
  36. </ly-tree-node>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import {
  42. getNodeKey
  43. } from './tool/util.js';
  44. import lyCheckbox from './components/ly-checkbox.vue';
  45. // #ifdef APP-NVUE
  46. var domModule = weex.requireModule('dom');
  47. domModule.addRule('fontFace', {
  48. 'fontFamily': "lyExpandIcons",
  49. 'src': "url('data:font/truetype;charset=utf-8;base64,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')"
  50. });
  51. // #endif
  52. export default {
  53. name: 'LyTreeNode',
  54. componentName: 'LyTreeNode',
  55. components: {
  56. lyCheckbox
  57. },
  58. props: {
  59. nodeId: [Number, String],
  60. renderAfterExpand: {
  61. type: Boolean,
  62. default: true
  63. },
  64. checkOnlyLeaf: {
  65. type: Boolean,
  66. default: false
  67. },
  68. showCheckbox: {
  69. type: Boolean,
  70. default: false
  71. },
  72. showRadio: {
  73. type: Boolean,
  74. default: false
  75. },
  76. indent: Number,
  77. iconClass: String
  78. },
  79. data() {
  80. return {
  81. node: {
  82. indeterminate: false,
  83. checked: false,
  84. expanded: false
  85. },
  86. expanded: false,
  87. childNodeRendered: false,
  88. oldChecked: null,
  89. oldIndeterminate: null,
  90. highlightCurrent: false,
  91. iconExpand: '\ue8ec',
  92. iconCollapse: '\ue8ed'
  93. };
  94. },
  95. inject: ['tree'],
  96. computed: {
  97. checkboxVisible() {
  98. if (this.checkOnlyLeaf) {
  99. return this.showCheckbox && this.node.isLeaf;
  100. }
  101. return this.showCheckbox;
  102. },
  103. radioVisible() {
  104. if (this.checkOnlyLeaf) {
  105. return this.showRadio && this.node.isLeaf;
  106. }
  107. return this.showRadio;
  108. }
  109. },
  110. watch: {
  111. 'node.indeterminate'(val) {
  112. this.handleSelectChange(this.node.checked, val);
  113. },
  114. 'node.checked'(val) {
  115. this.handleSelectChange(val, this.node.indeterminate);
  116. },
  117. 'node.expanded'(val) {
  118. this.$nextTick(() => this.expanded = val);
  119. if (val) {
  120. this.childNodeRendered = true;
  121. }
  122. }
  123. },
  124. methods: {
  125. getNodeKey(nodeId) {
  126. let node = this.tree.store.root.getChildNodes([nodeId])[0];
  127. return getNodeKey(this.tree.nodeKey, node.data);
  128. },
  129. handleSelectChange(checked, indeterminate) {
  130. if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
  131. if (this.checkOnlyLeaf && !this.node.isLeaf) return;
  132. if (this.checkboxVisible) {
  133. const allNodes = this.tree.store._getAllNodes();
  134. this.tree.$emit('check-change', {
  135. checked,
  136. indeterminate,
  137. node: this.node,
  138. data: this.node.data,
  139. checkedall: allNodes.every(item => item.checked)
  140. });
  141. } else {
  142. this.tree.$emit('radio-change', {
  143. checked,
  144. node: this.node,
  145. data: this.node.data,
  146. checkedall: false
  147. });
  148. }
  149. }
  150. if (!this.expanded && this.tree.expandOnCheckNode && checked) {
  151. this.handleExpandIconClick();
  152. }
  153. this.oldChecked = checked;
  154. this.indeterminate = indeterminate;
  155. },
  156. handleClick(e) {
  157. this.tree.store.setCurrentNode(this.node);
  158. this.tree.$emit('current-change', {
  159. node: this.node,
  160. data: this.tree.store.currentNode ? this.tree.store.currentNode.data : null,
  161. currentNode: this.tree.store.currentNode
  162. });
  163. this.tree.currentNode = this.node;
  164. if (this.tree.expandOnClickNode) {
  165. this.handleExpandIconClick();
  166. }
  167. if (this.tree.checkOnClickNode && !this.node.disabled) {
  168. (this.checkboxVisible || this.radioVisible) && this.handleCheckChange(!this.node.checked);
  169. }
  170. this.tree.$emit('node-click', this.node);
  171. // #ifdef APP-NVUE
  172. e.stopPropagation()
  173. // #endif
  174. },
  175. handleExpandIconClick() {
  176. if (this.node.isLeaf) return;
  177. if (this.expanded) {
  178. this.tree.$emit('node-collapse', this.node);
  179. this.node.collapse();
  180. } else {
  181. this.node.expand();
  182. this.tree.$emit('node-expand', this.node);
  183. if (this.tree.accordion) {
  184. uni.$emit(`${this.tree.elId}-tree-node-expand`, this.node);
  185. }
  186. }
  187. },
  188. handleCheckChange(checked) {
  189. if (this.node.disabled) return;
  190. if (this.checkboxVisible) {
  191. this.node.setChecked(checked, !(this.tree.checkStrictly || this.checkOnlyLeaf));
  192. } else {
  193. this.node.setRadioChecked(checked);
  194. }
  195. this.$nextTick(() => {
  196. this.tree.$emit('check', {
  197. node: this.node,
  198. data: this.node.data,
  199. checkedNodes: this.tree.store.getCheckedNodes(),
  200. checkedKeys: this.tree.store.getCheckedKeys(),
  201. halfCheckedNodes: this.tree.store.getHalfCheckedNodes(),
  202. halfCheckedKeys: this.tree.store.getHalfCheckedKeys()
  203. });
  204. });
  205. },
  206. handleImageError() {
  207. this.node.icon = this.tree.defaultNodeIcon;
  208. }
  209. },
  210. created() {
  211. if (!this.tree) {
  212. throw new Error('Can not find node\'s tree.');
  213. }
  214. const props = this.tree.props || {};
  215. const childrenKey = props['children'] || 'children';
  216. this.node = this.tree.store.nodesMap[this.nodeId];
  217. this.highlightCurrent = this.tree.highlightCurrent;
  218. if (this.node.expanded) {
  219. this.expanded = true;
  220. this.childNodeRendered = true;
  221. }
  222. this.$watch(`node.data.${childrenKey}`, () => {
  223. this.node.updateChildren();
  224. });
  225. if (this.tree.accordion) {
  226. uni.$on(`${this.tree.elId}-tree-node-expand`, node => {
  227. if (this.node.id !== node.id && this.node.level === node.level) {
  228. this.node.collapse();
  229. }
  230. });
  231. }
  232. },
  233. beforeDestroy() {
  234. this.$parent = null;
  235. }
  236. };
  237. </script>
  238. <style lang="scss" scoped>
  239. .ly-tree-node__content {
  240. /* #ifndef APP-NVUE */
  241. display: flex;
  242. /* #endif */
  243. flex-direction: row;
  244. align-items: center;
  245. height: 90rpx;
  246. }
  247. .ly-tree-node__expand-icon-holder {
  248. width: 20rpx;
  249. }
  250. .ly-tree-node__icon {
  251. width: 20rpx;
  252. height: 20rpx;
  253. overflow: hidden;
  254. margin-right: 14rpx;
  255. }
  256. .ly-tree-node__loading-icon {
  257. margin-right: 16rpx;
  258. width: 20rpx;
  259. height: 20rpx;
  260. }
  261. .ly-tree-node__label {
  262. width: 100%;
  263. font-size: 42rpx;
  264. white-space: nowrap;
  265. /*超出的空白区域不换行*/
  266. overflow: hidden;
  267. /*超出隐藏*/
  268. text-overflow: ellipsis;
  269. /*文本超出显示省略号*/
  270. color: #fff;
  271. }
  272. .active {
  273. font-size: 44rpx;
  274. font-weight: 700;
  275. }
  276. .ly-tree-node__children {
  277. overflow: hidden;
  278. background-color: transparent
  279. }
  280. .ly-tree-node__children-hide {
  281. height: 0px;
  282. line-height: 0px;
  283. }
  284. .ly-tree-node__content-current {
  285. border-top: 1px solid;
  286. border-bottom: 1px solid;
  287. border-image: linear-gradient(to right, #3c94d4, #fff, #064279) 1;
  288. background: linear-gradient(to right, #3c94d4, #064279);
  289. }
  290. /* icon-start */
  291. /* #ifndef APP-NVUE */
  292. @font-face {
  293. font-family: "lyExpandIcons";
  294. src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
  295. }
  296. /* #endif */
  297. .ly-tree-node__expand-icon {
  298. font-family: lyExpandIcons;
  299. font-size: 40rpx;
  300. font-style: normal;
  301. text-decoration: none;
  302. text-align: center;
  303. color: #DCDFE6;
  304. font-weight: 500;
  305. padding-right: 16rpx
  306. }
  307. /* icon-end */
  308. </style>