@netang/quasar 0.0.21 → 0.0.23
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.
- package/components/dialog/index.vue +1 -3
- package/components/drawer/index.vue +54 -21
- package/components/empty/index.vue +23 -0
- package/components/field-date/index.vue +2 -21
- package/components/field-table/index.vue +623 -214
- package/components/field-tree/index.vue +2 -30
- package/components/power-page/index.vue +47 -0
- package/components/private/table-visible-columns-button/index.vue +105 -0
- package/components/search/index.vue +95 -93
- package/components/table/index.vue +44 -100
- package/components/table-column-fixed/index.vue +20 -10
- package/components/table-pagination/index.vue +114 -4
- package/components/table-summary/index.vue +14 -2
- package/components/toolbar/index.vue +44 -304
- package/components/uploader/index.vue +6 -8
- package/components/uploader-query/index.vue +1 -3
- package/package.json +1 -1
- package/store/index.js +14 -0
- package/utils/$form.js +52 -0
- package/utils/{$role.js → $power.js} +323 -106
- package/utils/$table.js +353 -244
- package/utils/$tree.js +57 -33
- package/utils/http.js +5 -5
- package/utils/symbols.js +3 -0
- package/components/layout/index.vue +0 -126
|
@@ -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
|
-
|
|
53
|
-
|
|
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
|
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-page
|
|
3
|
+
v-bind="$attrs"
|
|
4
|
+
>
|
|
5
|
+
<!-- 空数据 -->
|
|
6
|
+
<n-empty
|
|
7
|
+
:empty-description="emptyDescription"
|
|
8
|
+
v-if="pageStatus === false"
|
|
9
|
+
/>
|
|
10
|
+
|
|
11
|
+
<!-- 插槽 -->
|
|
12
|
+
<slot v-else-if="pageStatus === true" />
|
|
13
|
+
|
|
14
|
+
<!-- 加载 -->
|
|
15
|
+
<q-inner-loading
|
|
16
|
+
:showing="pageLoading"
|
|
17
|
+
/>
|
|
18
|
+
</q-page>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
import { inject } from 'vue'
|
|
23
|
+
import { NPowerKey } from '../../utils/symbols'
|
|
24
|
+
|
|
25
|
+
export default {
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* 标识
|
|
29
|
+
*/
|
|
30
|
+
name: 'NPowerPage',
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* 组合式
|
|
34
|
+
*/
|
|
35
|
+
setup() {
|
|
36
|
+
// ==========【数据】============================================================================================
|
|
37
|
+
|
|
38
|
+
// 获取注入权限数据
|
|
39
|
+
const $power = inject(NPowerKey)
|
|
40
|
+
|
|
41
|
+
// ==========【返回】============================================================================================
|
|
42
|
+
return {
|
|
43
|
+
...$power,
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- 表格筛选可见列按钮-->
|
|
3
|
+
<q-btn
|
|
4
|
+
icon="checklist"
|
|
5
|
+
dense
|
|
6
|
+
round
|
|
7
|
+
flat
|
|
8
|
+
v-if="tableColumns.length"
|
|
9
|
+
>
|
|
10
|
+
<q-menu
|
|
11
|
+
self="top middle"
|
|
12
|
+
:offset="[0, 8]"
|
|
13
|
+
>
|
|
14
|
+
<q-list style="min-width: 250px" dense bordered>
|
|
15
|
+
|
|
16
|
+
<!-- 表格宫格 -->
|
|
17
|
+
<template v-if="tableGrid !== null">
|
|
18
|
+
<q-item
|
|
19
|
+
clickable
|
|
20
|
+
@click="tableGrid = ! tableGrid"
|
|
21
|
+
>
|
|
22
|
+
<q-item-section>宫格模式</q-item-section>
|
|
23
|
+
<q-item-section side>
|
|
24
|
+
<q-icon
|
|
25
|
+
size="xs"
|
|
26
|
+
name="check"
|
|
27
|
+
v-show="tableGrid"
|
|
28
|
+
/>
|
|
29
|
+
</q-item-section>
|
|
30
|
+
</q-item>
|
|
31
|
+
<q-separator />
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<!-- 筛选表格列 -->
|
|
35
|
+
<q-item
|
|
36
|
+
v-for="item in tableColumns"
|
|
37
|
+
clickable
|
|
38
|
+
@click="onTableVisible(item)"
|
|
39
|
+
>
|
|
40
|
+
<q-item-section>{{item.label}}</q-item-section>
|
|
41
|
+
<q-item-section side>
|
|
42
|
+
<q-icon
|
|
43
|
+
size="xs"
|
|
44
|
+
name="check"
|
|
45
|
+
v-show="utils.indexOf(tableVisibleColumns, item.name) > -1"
|
|
46
|
+
/>
|
|
47
|
+
</q-item-section>
|
|
48
|
+
</q-item>
|
|
49
|
+
</q-list>
|
|
50
|
+
</q-menu>
|
|
51
|
+
</q-btn>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script>
|
|
55
|
+
import { inject } from 'vue'
|
|
56
|
+
|
|
57
|
+
import { NTableKey } from '../../../utils/symbols'
|
|
58
|
+
|
|
59
|
+
export default {
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* 组合式
|
|
63
|
+
*/
|
|
64
|
+
setup() {
|
|
65
|
+
|
|
66
|
+
// ==========【方法】=============================================================================================
|
|
67
|
+
|
|
68
|
+
// 获取表格注入数据
|
|
69
|
+
const {
|
|
70
|
+
// 表格列数据(对象数组)
|
|
71
|
+
tableColumns,
|
|
72
|
+
// 表格可见列
|
|
73
|
+
tableVisibleColumns,
|
|
74
|
+
// 表格宫格
|
|
75
|
+
tableGrid,
|
|
76
|
+
} = inject(NTableKey)
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* 表格可见列点击
|
|
80
|
+
*/
|
|
81
|
+
function onTableVisible(item) {
|
|
82
|
+
const index = utils.indexOf(tableVisibleColumns.value, item.name)
|
|
83
|
+
if (index > -1) {
|
|
84
|
+
tableVisibleColumns.value.splice(index, 1)
|
|
85
|
+
} else {
|
|
86
|
+
tableVisibleColumns.value.push(item.name)
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// ==========【返回】=============================================================================================
|
|
91
|
+
|
|
92
|
+
return {
|
|
93
|
+
// 表格列数据(对象数组)
|
|
94
|
+
tableColumns,
|
|
95
|
+
// 表格可见列
|
|
96
|
+
tableVisibleColumns,
|
|
97
|
+
// 表格宫格
|
|
98
|
+
tableGrid,
|
|
99
|
+
|
|
100
|
+
// 表格可见列点击
|
|
101
|
+
onTableVisible,
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
}
|
|
105
|
+
</script>
|
|
@@ -7,116 +7,118 @@
|
|
|
7
7
|
<template
|
|
8
8
|
v-for="(item, itemIndex) in options"
|
|
9
9
|
>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
<
|
|
30
|
-
|
|
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
|
-
|
|
43
|
-
:
|
|
44
|
-
|
|
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
|
-
|
|
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
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
|
|
120
|
+
</n-search-item>
|
|
121
|
+
</template>
|
|
120
122
|
</template>
|
|
121
123
|
</div>
|
|
122
124
|
</q-scroll-area>
|