@netang/quasar 0.1.21 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/field-tree/index.vue +3 -5
  2. package/components/private/components/move-to-tree/index.vue +154 -154
  3. package/components/table/index.vue +2 -2
  4. package/components/tree/index.vue +1636 -0
  5. package/package.json +1 -1
  6. package/utils/$tree.js +145 -202
package/components/field-tree/index.vue CHANGED
@@ -89,10 +89,9 @@
89
89
  >
90
90
  <q-card>
91
91
  <!-- 树 -->
92
- <q-tree
93
- class="q-pa-sm q-pr-md"
92
+ <n-tree
94
93
  ref="treeRef"
95
- style="min-width:260px;"
94
+ style="min-width:260px;max-height:380px;"
96
95
  :filter="inputValue"
97
96
  :nodes="currentTreeNodes"
98
97
  :node-key="nodeKey"
@@ -107,14 +106,13 @@
107
106
  >
108
107
  <template v-slot:default-header="{ node }">
109
108
  <div
110
- class="cursor-pointer full-width"
111
109
  :class="{
112
110
  'text-primary': checkTreeNodeActive(node),
113
111
  }"
114
112
  @click="onNode($event, node)"
115
113
  >{{node.label}}</div>
116
114
  </template>
117
- </q-tree>
115
+ </n-tree>
118
116
 
119
117
  <!-- loading -->
120
118
  <div class="flex flex-center" style="height:100px" v-else>
package/components/private/components/move-to-tree/index.vue CHANGED
@@ -1,154 +1,154 @@
1
- <template>
2
- <div class="q-pa-sm q-gutter-sm">
3
-
4
- <!-- 搜索框 -->
5
- <q-input
6
- v-model="treeFilter"
7
- placeholder="搜索"
8
- dense
9
- outlined
10
- clearable
11
- />
12
-
13
- <!-- 分类树 -->
14
- <q-tree
15
- ref="treeRef"
16
- color="grey-5"
17
- :nodes="treeNodes"
18
- :filter="treeFilter"
19
- :node-key="treeNodeKey"
20
- v-model:expanded="treeExpanded"
21
- selected-color="primary"
22
- v-model:selected="treeSelected"
23
- no-selection-unset
24
- />
25
- </div>
26
- </template>
27
-
28
- <script>
29
- import { ref, isRef, watch, inject } from 'vue'
30
-
31
- import $n_isValidArray from '@netang/utils/isValidArray'
32
-
33
- import { NDialogKey } from '../../../../utils/symbols'
34
-
35
- export default {
36
-
37
- /**
38
- * 标识
39
- */
40
- name: 'NMoveToTree',
41
-
42
- /**
43
- * 组合式
44
- */
45
- setup() {
46
-
47
- // ==========【注入】============================================================================================
48
-
49
- // 获取对话框注入数据
50
- const {
51
- // 提交数据
52
- submit,
53
- // 父级声明属性
54
- props,
55
- } = inject(NDialogKey)
56
-
57
- const {
58
- // 树节点列表
59
- nodes,
60
- // 树展开节点
61
- expanded,
62
- // 节点唯一键值
63
- nodeKey,
64
-
65
- } = Object.assign({
66
- nodeKey: 'id',
67
- }, props)
68
-
69
- // 对话框提交数据
70
- submit(onSubmit)
71
-
72
- // ==========【数据】=============================================================================================
73
-
74
- // 树节点
75
- const treeRef = ref(null)
76
-
77
- // 树节点列表
78
- const treeNodes = format(nodes)
79
-
80
- // 树节点唯一键值
81
- const treeNodeKey = ref(nodeKey)
82
-
83
- // 树筛选
84
- const treeFilter = ref('')
85
-
86
- // 树展开节点
87
- const treeExpanded = format(expanded)
88
-
89
- // 树选择数据
90
- const treeSelected = ref(0)
91
-
92
- // 当前选择值
93
- const currentValue = ref({})
94
-
95
- // ==========【监听数据】==========================================================================================
96
-
97
- /**
98
- * 监听树选择数据
99
- */
100
- watch(treeSelected, function(value) {
101
- // 设置当前选择值
102
- currentValue.value = {
103
- value,
104
- node: treeRef.value.getNodeByKey(value),
105
- }
106
- })
107
-
108
- // ==========【方法】=============================================================================================
109
-
110
- /**
111
- * 提交
112
- */
113
- function onSubmit() {
114
- return currentValue.value
115
- }
116
-
117
- /**
118
- * 格式化列表
119
- */
120
- function format(val) {
121
-
122
- if (val) {
123
-
124
- if (isRef(val)) {
125
- return ref(val.value)
126
- }
127
-
128
- if ($n_isValidArray(val)) {
129
- return ref(val)
130
- }
131
- }
132
-
133
- return ref([])
134
- }
135
-
136
- // ==========【返回】=============================================================================================
137
-
138
- return {
139
- // 树节点
140
- treeRef,
141
- // 树列表
142
- treeNodes,
143
- // 节点唯一键值
144
- treeNodeKey,
145
- // 树筛选
146
- treeFilter,
147
- // 树展开节点
148
- treeExpanded,
149
- // 树选择数据
150
- treeSelected,
151
- }
152
- }
153
- }
154
- </script>
1
+ <template>
2
+ <div class="q-pa-sm q-gutter-sm">
3
+
4
+ <!-- 搜索框 -->
5
+ <q-input
6
+ v-model="treeFilter"
7
+ placeholder="搜索"
8
+ dense
9
+ outlined
10
+ clearable
11
+ />
12
+
13
+ <!-- 分类树 -->
14
+ <!--selected-color="primary"-->
15
+ <n-tree
16
+ ref="treeRef"
17
+ color="grey-5"
18
+ :nodes="treeNodes"
19
+ :filter="treeFilter"
20
+ :node-key="treeNodeKey"
21
+ v-model:expanded="treeExpanded"
22
+ v-model:selected="treeSelected"
23
+ no-selection-unset
24
+ />
25
+ </div>
26
+ </template>
27
+
28
+ <script>
29
+ import { ref, isRef, watch, inject } from 'vue'
30
+
31
+ import $n_isValidArray from '@netang/utils/isValidArray'
32
+
33
+ import { NDialogKey } from '../../../../utils/symbols'
34
+
35
+ export default {
36
+
37
+ /**
38
+ * 标识
39
+ */
40
+ name: 'NMoveToTree',
41
+
42
+ /**
43
+ * 组合式
44
+ */
45
+ setup() {
46
+
47
+ // ==========【注入】============================================================================================
48
+
49
+ // 获取对话框注入数据
50
+ const {
51
+ // 提交数据
52
+ submit,
53
+ // 父级声明属性
54
+ props,
55
+ } = inject(NDialogKey)
56
+
57
+ const {
58
+ // 树节点列表
59
+ nodes,
60
+ // 树展开节点
61
+ expanded,
62
+ // 节点唯一键值
63
+ nodeKey,
64
+
65
+ } = Object.assign({
66
+ nodeKey: 'id',
67
+ }, props)
68
+
69
+ // 对话框提交数据
70
+ submit(onSubmit)
71
+
72
+ // ==========【数据】=============================================================================================
73
+
74
+ // 树节点
75
+ const treeRef = ref(null)
76
+
77
+ // 树节点列表
78
+ const treeNodes = format(nodes)
79
+
80
+ // 树节点唯一键值
81
+ const treeNodeKey = ref(nodeKey)
82
+
83
+ // 树筛选
84
+ const treeFilter = ref('')
85
+
86
+ // 树展开节点
87
+ const treeExpanded = format(expanded)
88
+
89
+ // 树选择数据
90
+ const treeSelected = ref(0)
91
+
92
+ // 当前选择值
93
+ const currentValue = ref({})
94
+
95
+ // ==========【监听数据】==========================================================================================
96
+
97
+ /**
98
+ * 监听树选择数据
99
+ */
100
+ watch(treeSelected, function(value) {
101
+ // 设置当前选择值
102
+ currentValue.value = {
103
+ value,
104
+ node: treeRef.value.getNodeByKey(value),
105
+ }
106
+ })
107
+
108
+ // ==========【方法】=============================================================================================
109
+
110
+ /**
111
+ * 提交
112
+ */
113
+ function onSubmit() {
114
+ return currentValue.value
115
+ }
116
+
117
+ /**
118
+ * 格式化列表
119
+ */
120
+ function format(val) {
121
+
122
+ if (val) {
123
+
124
+ if (isRef(val)) {
125
+ return ref(val.value)
126
+ }
127
+
128
+ if ($n_isValidArray(val)) {
129
+ return ref(val)
130
+ }
131
+ }
132
+
133
+ return ref([])
134
+ }
135
+
136
+ // ==========【返回】=============================================================================================
137
+
138
+ return {
139
+ // 树节点
140
+ treeRef,
141
+ // 树列表
142
+ treeNodes,
143
+ // 节点唯一键值
144
+ treeNodeKey,
145
+ // 树筛选
146
+ treeFilter,
147
+ // 树展开节点
148
+ treeExpanded,
149
+ // 树选择数据
150
+ treeSelected,
151
+ }
152
+ }
153
+ }
154
+ </script>
package/components/table/index.vue CHANGED
@@ -49,14 +49,14 @@
49
49
  </div>
50
50
 
51
51
  <!-- 分类树 -->
52
- <q-tree
52
+ <!--selected-color="primary"-->
53
+ <n-tree
53
54
  color="grey-5"
54
55
  ref="treeRef"
55
56
  :nodes="treeNodes"
56
57
  :filter="treeFilterValue"
57
58
  :node-key="treeNodeKey"
58
59
  :label-key="treeLabelKey"
59
- selected-color="primary"
60
60
  v-model:selected="treeSelected"
61
61
  no-selection-unset
62
62
  default-expand-all