@netang/quasar 0.0.22 → 0.0.24

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.
@@ -1,6 +1,5 @@
1
1
  <template>
2
2
  <q-field
3
- :class="fieldFocused ? 'q-field--float q-field--focused q-field--highlighted' : ''"
4
3
  :model-value="modelValue"
5
4
  @clear="onClear"
6
5
  v-bind="$attrs"
@@ -49,8 +48,8 @@
49
48
  <!-- 弹出层代理 -->
50
49
  <q-popup-proxy
51
50
  ref="popupRef"
52
- @before-show="onPopupBeforeShow"
53
- @before-hide="onPopupBeforeHide"
51
+ no-refocus
52
+ no-focus
54
53
  v-if="! readonly"
55
54
  >
56
55
  <q-card>
@@ -146,8 +145,6 @@ export default {
146
145
 
147
146
  // ==========【数据】============================================================================================
148
147
 
149
- // 字段组件获取焦点
150
- const fieldFocused = ref(false)
151
148
  // 弹出层节点
152
149
  const popupRef = ref(null)
153
150
  // 树节点
@@ -372,24 +369,6 @@ export default {
372
369
  emit('update:modelValue', newValue)
373
370
  }
374
371
 
375
- /**
376
- * 弹出层显示前回调
377
- */
378
- function onPopupBeforeShow() {
379
-
380
- // 字段组件获取焦点
381
- fieldFocused.value = true
382
- }
383
-
384
- /**
385
- * 弹出层隐藏前回调
386
- */
387
- function onPopupBeforeHide() {
388
-
389
- // 字段组件失去焦点
390
- fieldFocused.value = false
391
- }
392
-
393
372
  /**
394
373
  * 清空
395
374
  */
@@ -401,8 +380,6 @@ export default {
401
380
  // ==========【返回】=============================================================================================
402
381
 
403
382
  return {
404
- // 字段组件获取焦点
405
- fieldFocused,
406
383
  // 弹出层节点
407
384
  popupRef,
408
385
  // 树节点
@@ -424,11 +401,6 @@ export default {
424
401
  onClear,
425
402
  // 移除单个
426
403
  onRemoveItem,
427
-
428
- // 弹出层显示前回调
429
- onPopupBeforeShow,
430
- // 弹出层隐藏前回调
431
- onPopupBeforeHide,
432
404
  }
433
405
  },
434
406
  }
@@ -7,116 +7,118 @@
7
7
  <template
8
8
  v-for="(item, itemIndex) in options"
9
9
  >
10
- <!-- 如果有 name 插槽 -->
11
- <slot
12
- :name="`name-${item.name}`"
13
- :item="item"
14
- :item-index="itemIndex"
15
- v-if="$slots[`name-${item.name}`]"
16
- />
17
-
18
- <!-- 否则自定义组件 -->
19
- <n-search-item
20
- :data="item"
21
- v-model="modelValue[itemIndex]"
22
- v-slot="{ label, index, multiple }"
23
- v-else
24
- >
25
- <!-- 日期 -->
26
- <template v-if="item.type === 'date'">
10
+ <template v-if="! item.hide">
11
+ <!-- 如果有 name 插槽 -->
12
+ <slot
13
+ :name="`name-${item.name}`"
14
+ :item="item"
15
+ :item-index="itemIndex"
16
+ v-if="$slots[`name-${item.name}`]"
17
+ />
27
18
 
19
+ <!-- 否则自定义组件 -->
20
+ <n-search-item
21
+ :data="item"
22
+ v-model="modelValue[itemIndex]"
23
+ v-slot="{ label, index, multiple }"
24
+ v-else
25
+ >
28
26
  <!-- 日期 -->
29
- <n-field-date
30
- class="n-field-fieldset n-flex-1"
27
+ <template v-if="item.type === 'date'">
28
+
29
+ <!-- 日期 -->
30
+ <n-field-date
31
+ class="n-field-fieldset n-flex-1"
32
+ :label="label"
33
+ v-model="modelValue[itemIndex][index].value"
34
+ :type="modelValue[itemIndex][0].dateType"
35
+ dense
36
+ :end-date="index === 1"
37
+ outlined
38
+ clearable
39
+ />
40
+
41
+ <!-- 日期类型 -->
42
+ <q-select
43
+ v-model="modelValue[itemIndex][0].dateType"
44
+ :options="[
45
+ { label: '年', value: 'year' },
46
+ { label: '月', value: 'month' },
47
+ { label: '日', value: 'day' },
48
+ { label: '时', value: 'datetime' },
49
+ ]"
50
+ map-options
51
+ emit-value
52
+ outlined
53
+ dense
54
+ options-dense
55
+ v-if="index === 0"
56
+ />
57
+ </template>
58
+
59
+ <!-- 输入框 价格 -->
60
+ <n-input-price
61
+ class="n-field-fieldset"
31
62
  :label="label"
32
63
  v-model="modelValue[itemIndex][index].value"
33
- :type="modelValue[itemIndex][0].dateType"
34
64
  dense
35
- :end-date="index === 1"
36
65
  outlined
37
66
  clearable
38
- />
67
+ v-else-if="item.type === 'price'"
68
+ >
69
+ <!--<template v-slot:append>-->
70
+ <!-- <q-btn round dense flat icon="search" />-->
71
+ <!--</template>-->
72
+ </n-input-price>
39
73
 
40
- <!-- 日期类型 -->
74
+ <!-- 输入框 文字 -->
75
+ <q-input
76
+ class="n-field-fieldset"
77
+ :label="label"
78
+ v-model="modelValue[itemIndex][index].value"
79
+ dense
80
+ outlined
81
+ clearable
82
+ v-else-if="item.searchType === 'input'"
83
+ >
84
+ <!--<template v-slot:append>-->
85
+ <!-- <q-btn round dense flat icon="search" />-->
86
+ <!--</template>-->
87
+ </q-input>
88
+
89
+ <!-- 下拉列表 -->
41
90
  <q-select
42
- v-model="modelValue[itemIndex][0].dateType"
43
- :options="[
44
- { label: '年', value: 'year' },
45
- { label: '月', value: 'month' },
46
- { label: '日', value: 'day' },
47
- { label: '时', value: 'datetime' },
48
- ]"
91
+ class="n-field-fieldset"
92
+ :label="label"
93
+ v-model="modelValue[itemIndex][index].value"
49
94
  map-options
50
95
  emit-value
51
96
  outlined
52
97
  dense
98
+ :multiple="multiple"
99
+ :use-chips="multiple"
53
100
  options-dense
54
- v-if="index === 0"
101
+ clearable
102
+ v-bind="item.select"
103
+ v-else-if="item.searchType === 'select'"
55
104
  />
56
- </template>
57
-
58
- <!-- 输入框 价格 -->
59
- <n-input-price
60
- class="n-field-fieldset"
61
- :label="label"
62
- v-model="modelValue[itemIndex][index].value"
63
- dense
64
- outlined
65
- clearable
66
- v-else-if="item.type === 'price'"
67
- >
68
- <!--<template v-slot:append>-->
69
- <!-- <q-btn round dense flat icon="search" />-->
70
- <!--</template>-->
71
- </n-input-price>
72
-
73
- <!-- 输入框 文字 -->
74
- <q-input
75
- class="n-field-fieldset"
76
- :label="label"
77
- v-model="modelValue[itemIndex][index].value"
78
- dense
79
- outlined
80
- clearable
81
- v-else-if="item.searchType === 'input'"
82
- >
83
- <!--<template v-slot:append>-->
84
- <!-- <q-btn round dense flat icon="search" />-->
85
- <!--</template>-->
86
- </q-input>
87
-
88
- <!-- 下拉列表 -->
89
- <q-select
90
- class="n-field-fieldset"
91
- :label="label"
92
- v-model="modelValue[itemIndex][index].value"
93
- map-options
94
- emit-value
95
- outlined
96
- dense
97
- :multiple="multiple"
98
- :use-chips="multiple"
99
- options-dense
100
- clearable
101
- v-bind="item.select"
102
- v-else-if="item.searchType === 'select'"
103
- />
104
105
 
105
- <!-- 下拉树 -->
106
- <n-field-tree
107
- class="n-field-fieldset"
108
- :label="label"
109
- v-model="modelValue[itemIndex][index].value"
110
- dense
111
- outlined
112
- clearable
113
- accordion
114
- :multiple="multiple"
115
- v-bind="item.tree"
116
- v-else-if="item.searchType === 'tree'"
117
- />
106
+ <!-- 下拉树 -->
107
+ <n-field-tree
108
+ class="n-field-fieldset"
109
+ :label="label"
110
+ v-model="modelValue[itemIndex][index].value"
111
+ dense
112
+ outlined
113
+ clearable
114
+ accordion
115
+ :multiple="multiple"
116
+ v-bind="item.tree"
117
+ v-else-if="item.searchType === 'tree'"
118
+ />
118
119
 
119
- </n-search-item>
120
+ </n-search-item>
121
+ </template>
120
122
  </template>
121
123
  </div>
122
124
  </q-scroll-area>
@@ -56,7 +56,6 @@
56
56
  <q-page-container>
57
57
  <q-page>
58
58
  <q-table
59
- ref="tableRef"
60
59
  class="n-table absolute-full"
61
60
  :class="{
62
61
  'n-table--last-fixed': showTableFixed,
@@ -72,7 +71,7 @@
72
71
  :rows-per-page-options="tableRowsPerPageOptions"
73
72
  :grid="tableGrid"
74
73
  @row-click="tableRowClick"
75
- @row-dblclick="tableRowDblclick"
74
+ @row-dblclick="currentTableRowDblclick"
76
75
  @request="tableRequest"
77
76
  flat
78
77
  virtual-scroll
@@ -152,7 +151,7 @@
152
151
  <script>
153
152
  import { ref, watch, computed, inject } from 'vue'
154
153
 
155
- import { NPowerKey, NTableKey } from '../../utils/symbols'
154
+ import { NDialogKey, NTableKey } from '../../utils/symbols'
156
155
 
157
156
  export default {
158
157
 
@@ -197,11 +196,35 @@ export default {
197
196
 
198
197
  // ==========【数据】============================================================================================
199
198
 
200
- // 获取权限注入
201
- const $power = inject(NPowerKey)
202
-
199
+ // 获取表格注入
203
200
  const $table = inject(NTableKey)
204
201
 
202
+ // 获取对话框注入
203
+ const $dialog = inject(NDialogKey)
204
+ const inDialog = !! $dialog
205
+
206
+ // 当前双击表格行
207
+ let currentTableRowDblclick
208
+
209
+ // 如果在对话框内部
210
+ if (inDialog) {
211
+ // 提交表格已选数据给对话框
212
+ $dialog.submit(() => $table.tableSelected.value)
213
+
214
+ // 对话框中的表格双击表格行
215
+ currentTableRowDblclick = function (e, row) {
216
+ // 如果不是多选
217
+ if ($table.tableSelection !== 'multiple') {
218
+ $table.tableSelected.value = [ row ]
219
+ $dialog.confirm()
220
+ }
221
+ }
222
+
223
+ } else {
224
+ // 表格实例中的双击表格行
225
+ currentTableRowDblclick = $table.tableRowDblclick
226
+ }
227
+
205
228
  // 树节点
206
229
  const treeRef = ref(null)
207
230
 
@@ -211,30 +234,13 @@ export default {
211
234
  // 树选择数据
212
235
  const treeSelected = ref('')
213
236
 
214
- // 当前请求地址
215
- // const currentUrl = ref(props.url ? props.url : useRoute().fullPath)
216
-
217
- // // 表格参数
218
- // const tableParams = Object.assign({}, props.tableParams, {
219
- // // 请求地址
220
- // url: currentUrl.value,
221
- // })
222
- //
223
- // // 如果不显示搜索
224
- // if (props.noSearch) {
225
- // tableParams.search = false
226
- // }
227
-
228
237
  // ==========【计算属性】==========================================================================================
229
238
 
230
239
  /**
231
240
  * 插槽标识
232
241
  */
233
242
  const slotNames = computed(function() {
234
- if (utils.isValidObject(slots)) {
235
- return Object.keys(slots)
236
- }
237
- return []
243
+ return utils.isValidObject(slots) ? Object.keys(slots) : []
238
244
  })
239
245
 
240
246
  // ==========【监听数据】=========================================================================================
@@ -273,8 +279,6 @@ export default {
273
279
  // ==========【返回】=============================================================================================
274
280
 
275
281
  return {
276
- // 解构权限实例
277
- ...$power,
278
282
  // 解构表格实例
279
283
  ...$table,
280
284
 
@@ -287,6 +291,9 @@ export default {
287
291
 
288
292
  // 插槽 body 单元格标识
289
293
  slotNames,
294
+
295
+ // 当前双击表格行
296
+ currentTableRowDblclick,
290
297
  }
291
298
  },
292
299
  }
@@ -1,11 +1,12 @@
1
1
  <template>
2
2
  <div>
3
3
  <!-- 页码 -->
4
- <span class="q-table__bottom-item">{{props.pagination.page}} / {{Math.ceil(props.pagination.rowsNumber / props.pagination.rowsPerPage)}}</span>
4
+ <span class="q-table__bottom-item">{{props.pagination.page}} / {{props.pagesNumber}}</span>
5
5
 
6
6
  <!-- 第一页 -->
7
7
  <q-btn
8
8
  v-if="props.pagesNumber > 2"
9
+ :class="{ dense }"
9
10
  icon="first_page"
10
11
  color="grey-8"
11
12
  round
@@ -17,6 +18,7 @@
17
18
 
18
19
  <!-- 上页 -->
19
20
  <q-btn
21
+ :class="{ dense }"
20
22
  icon="chevron_left"
21
23
  color="grey-8"
22
24
  round
@@ -28,6 +30,7 @@
28
30
 
29
31
  <!-- 下页 -->
30
32
  <q-btn
33
+ :class="{ dense }"
31
34
  icon="chevron_right"
32
35
  color="grey-8"
33
36
  round
@@ -39,6 +42,7 @@
39
42
 
40
43
  <!-- 最后一页 -->
41
44
  <q-btn
45
+ :class="{ dense }"
42
46
  v-if="props.pagesNumber > 2"
43
47
  icon="last_page"
44
48
  color="grey-8"
@@ -51,20 +55,22 @@
51
55
 
52
56
  <!-- 刷新 -->
53
57
  <q-btn
58
+ :class="{ dense }"
54
59
  icon="refresh"
55
60
  color="grey-8"
56
61
  round
57
62
  dense
58
63
  flat
59
64
  @click="tableRefresh"
60
- v-if="hasTable"
65
+ v-if="! noRefresh && hasRefresh"
61
66
  />
62
67
 
63
68
  <!-- 当前页面工具栏无权限按钮时显示 -->
64
- <template v-if="! toolbarPowerBtns.length">
69
+ <template v-if="! noPower && ! toolbarPowerBtns.length">
65
70
 
66
71
  <!-- 左边侧滑菜单切换按钮-->
67
72
  <q-btn
73
+ :class="{ dense }"
68
74
  :icon="leftDrawer.icon"
69
75
  dense
70
76
  round
@@ -74,10 +80,14 @@
74
80
  />
75
81
 
76
82
  <!-- 表格筛选可见列按钮 -->
77
- <table-visible-columns-button v-if="hasTable" />
83
+ <table-visible-columns-button
84
+ :class="{ dense }"
85
+ v-if="hasTable"
86
+ />
78
87
 
79
88
  <!-- 右边侧滑菜单切换按钮-->
80
89
  <q-btn
90
+ :class="{ dense }"
81
91
  :icon="rightDrawer.icon"
82
92
  dense
83
93
  round
@@ -117,6 +127,12 @@ export default {
117
127
  props: {
118
128
  // 传值
119
129
  props: Object,
130
+ // 是否关闭权限
131
+ noPower: Boolean,
132
+ // 是否关闭刷新按钮
133
+ noRefresh: Boolean,
134
+ // 紧凑模式
135
+ dense: Boolean,
120
136
  },
121
137
 
122
138
  /**
@@ -139,6 +155,8 @@ export default {
139
155
 
140
156
  // 获取表格注入
141
157
  const $table = inject(NTableKey)
158
+ const hasTable = !! $table
159
+
142
160
  const {
143
161
  // 表格刷新
144
162
  tableRefresh,
@@ -146,9 +164,12 @@ export default {
146
164
 
147
165
  // ==========【返回】=============================================================================================
148
166
 
167
+
149
168
  return {
150
169
  // 是否有表格
151
- hasTable: !! $table,
170
+ hasTable,
171
+ // 是否有刷新按钮
172
+ hasRefresh: hasTable && !! $table.routeFullPath,
152
173
  // 表格刷新
153
174
  tableRefresh,
154
175
  // 当前页面工具栏权限按钮
@@ -161,3 +182,12 @@ export default {
161
182
  },
162
183
  }
163
184
  </script>
185
+
186
+ <style lang="scss" scoped>
187
+ @import "@/assets/sass/var.scss";
188
+
189
+ // 紧凑模式
190
+ .dense {
191
+ font-size: 12px;
192
+ }
193
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netang/quasar",
3
- "version": "0.0.22",
3
+ "version": "0.0.24",
4
4
  "description": "netang-quasar",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -137,15 +137,10 @@
137
137
  &.q-field {
138
138
  &--labeled {
139
139
  .q-field__prefix,
140
- .q-field__suffix {
141
- padding-top: 0 !important;
142
- padding-bottom: 0 !important;
143
- }
144
-
145
-
140
+ .q-field__suffix,
146
141
  .q-field__native {
147
- padding-top: 0 !important;
148
- padding-bottom: 0 !important;
142
+ padding-top: 5px !important;
143
+ padding-bottom: 5px !important;
149
144
  }
150
145
 
151
146
  .q-field__label {
@@ -157,6 +152,12 @@
157
152
  }
158
153
 
159
154
  &--float {
155
+ .q-field__prefix,
156
+ .q-field__suffix,
157
+ .q-field__native {
158
+ padding-top: 7px !important;
159
+ }
160
+
160
161
  .q-field__label {
161
162
  transform: translateY(-120%) scale(0.85) !important;
162
163
  background-color: var(--n-mode-color) !important;
package/utils/$power.js CHANGED
@@ -39,14 +39,24 @@ function create(params) {
39
39
  }, params)
40
40
 
41
41
  // 获取权限路由
42
- const $route = utils.isValidString(o.path) ?
43
- // 如果为自定义路由
44
- utils.router.resolve({
45
- path: o.path,
46
- query: o.query,
47
- })
48
- // 否则获取当前路由
49
- : utils.router.getRoute()
42
+ const $route = o.path === false
43
+ // 如果没有路由
44
+ ? {
45
+ fullPath: '',
46
+ path: '',
47
+ query: utils.isValidObject(o.query) ? o.query : {},
48
+ }
49
+ // 否则获取路由
50
+ : (
51
+ utils.isValidString(o.path) ?
52
+ // 如果为自定义路由
53
+ utils.router.resolve({
54
+ path: o.path,
55
+ query: utils.isValidObject(o.query) ? o.query : {},
56
+ })
57
+ // 否则获取当前路由
58
+ : utils.router.getRoute()
59
+ )
50
60
 
51
61
  // quasar 对象
52
62
  const $q = useQuasar()