@xilonglab/vue-main 1.6.55 → 1.6.56

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 (8) hide show
  1. package/dist/page/app.vue +86 -86
  2. package/dist/page/login.vue +185 -185
  3. package/dist/page/setting.vue +88 -86
  4. package/dist/style/element.css +4 -4
  5. package/dist/style/reset.css +42 -42
  6. package/package.json +16 -16
  7. package/packages/form/XlSearchSelect.vue +5 -28
  8. package/packages/view/XlDataView.vue +269 -269
package/packages/view/XlDataView.vue CHANGED
@@ -1,269 +1,269 @@
1
- <script setup>
2
- defineOptions({ name: "XlDataView" })
3
-
4
- import { inject, computed } from 'vue'
5
-
6
- const emits = defineEmits(['loaded'])
7
-
8
- const props = defineProps({
9
- selectable: {
10
- type: Boolean,
11
- default: false,
12
- },
13
- columns: {
14
- type: Array,
15
- default: () => [],
16
- },
17
- showSummary: {
18
- type: Boolean,
19
- default: true,
20
- },
21
- rowClick: {
22
- type: Function,
23
- default: () => { },
24
- },
25
- summaryMethod: {
26
- type: Function,
27
- },
28
- showIndex: {
29
- type: Boolean,
30
- default: false,
31
- },
32
- disableAdd: {
33
- type: Boolean,
34
- default: false,
35
- },
36
- pagination: {
37
- type: Object,
38
- default() {
39
- return {
40
- pageNum: 1,
41
- pageSize: 20,
42
- total: 0,
43
- };
44
- },
45
- },
46
- spanMethod: {
47
- type: Function,
48
- default: () => { },
49
- },
50
- headerCellStyle: {
51
- type: Function,
52
- default: () => { },
53
- },
54
- rowClassName: {
55
- type: Function,
56
- default: () => { },
57
- },
58
- rowKey: {
59
- type: Function,
60
- default: () => { },
61
- },
62
- rowDblClick: {
63
- type: Function,
64
- default: () => { },
65
- },
66
- selectionChange: {
67
- type: Function,
68
- default: () => { },
69
- },
70
- layout: {
71
- type: String,
72
- default: 'prev, pager, next, jumper'
73
- },
74
- small: {
75
- type: Boolean,
76
- default: false
77
- },
78
- chinese: {
79
- type: String,
80
- default: ''
81
- },
82
- english: {},
83
- type: {
84
- type: String,
85
- default: ''
86
- },
87
- width: {
88
- default: 70
89
- },
90
- labelWidth: {
91
- default: 90
92
- },
93
- handler: {
94
- type: Function,
95
- default: () => { },
96
- },
97
- defaultExpandAll: {
98
- type: Boolean,
99
- default: false,
100
- },
101
- expandRowKeys: {
102
- type: Array,
103
- default: () => [],
104
- },
105
- expandChange: {
106
- type: Function,
107
- default: () => {},
108
- },
109
- filterChange: {
110
- type: Function,
111
- default: () => {},
112
- },
113
- });
114
-
115
- const { refs, api, params, obj, chartOptions, total } = inject('injections')
116
- </script>
117
-
118
-
119
- <template>
120
- <div :class="['xl-data-view', english]">
121
- <xl-tool-bar :type="type" :table="refs.table" :params="params" @query="() => api.stat()">
122
- <template #inputs>
123
- <xl-search-inputs :columns="columns" :params="params"/>
124
- <slot name="inputs" />
125
- </template>
126
- <template #buttons>
127
- <slot name="buttons" />
128
- <el-button class="add-btn" v-if="!disableAdd" type="success" @click="() => api.onAdd()">新增</el-button>
129
- </template>
130
- </xl-tool-bar>
131
- <xl-query-page-table v-show="params.view != 'chart'" :ref="refs.table" :api="api" :params="params"
132
- v-bind="$props" :summary-method="summaryMethod?summaryMethod:()=>({0:total})" :sort-change="(data) => api.sort(data)"
133
- @loaded="(rsp) => emits('loaded', rsp)">
134
- <template v-for="col in columns" :key="col.prop">
135
- <template v-if="!col.hidden">
136
- <!-- 支持通过 slot 属性使用插槽 -->
137
- <slot
138
- v-if="col.type === 'slot'"
139
- :name="`${col.prop}-col`"
140
- />
141
-
142
- <!-- 支持直接指定组件引用 -->
143
- <component
144
- v-else-if="col.component"
145
- :is="col.component"
146
- />
147
- <!-- 内置类型组件 -->
148
- <xl-datetime-col
149
- v-else-if="col.type === 'datetime'"
150
- :l="col.label"
151
- :p="col.prop"
152
- />
153
- <xl-col v-else-if="col.type === 'clamp'"
154
- :l="col.label"
155
- :width="col.width"
156
- v-slot="{ row }"
157
- >
158
- <p class="text-left clamp1" :title="row[col.prop]">
159
- {{ row[col.prop] }}
160
- </p>
161
- </xl-col>
162
- <xl-map-col
163
- v-else-if="col.type === 'map'"
164
- :l="col.label"
165
- :p="col.prop"
166
- :width="col.width"
167
- :map="col.map"
168
- />
169
- <xl-dual-map-col
170
- v-else-if="col.type === 'dual-map'"
171
- :l="col.label"
172
- :p="col.prop"
173
- :width="col.width"
174
- :map1="col.map1"
175
- :map2="col.map2"
176
- />
177
- <xl-status-col
178
- v-else-if="col.type === 'status'"
179
- :l="col.label"
180
- :p="col.prop"
181
- :map="col.map"
182
- />
183
- <xl-review-col
184
- v-else-if="col.type === 'review'"
185
- :l="col.label"
186
- :p="col.prop"
187
- />
188
- <xl-clamp-col
189
- v-else-if="col.type === 'clamp'"
190
- :l="col.label"
191
- :p="col.prop"
192
- :width="col.width"
193
- />
194
- <xl-bool-col
195
- v-else-if="col.type === 'bool'"
196
- :l="col.label"
197
- :p="col.prop"
198
- :width="col.width"
199
- />
200
- <!-- 默认列组件 -->
201
- <xl-col
202
- v-else
203
- :l="col.label"
204
- :p="col.prop"
205
- :width="col.width"
206
- />
207
- </template>
208
- </template>
209
- <slot name="columns" />
210
- </xl-query-page-table>
211
- <xl-data-form-dialog
212
- :ref="refs.editDialog"
213
- :chinese="chinese"
214
- :width="width"
215
- :label-width="labelWidth"
216
- :obj="obj"
217
- :columns="columns"
218
- :handler="handler"
219
- >
220
- <template v-for="col in columns" :key="col.prop">
221
- <xl-form-col
222
- v-if="col.form"
223
- :span="col.form.span"
224
- :l="col.label"
225
- :p="col.prop"
226
- >
227
- <slot
228
- v-if="col.type === 'slot'"
229
- :name="`${col.prop}-form`"
230
- />
231
- <component
232
- v-else
233
- :is="`xl-${col.form.type || 'input'}`"
234
- v-model="obj[col.prop]"
235
- v-bind="col.form || {}"
236
- />
237
- </xl-form-col>
238
- </template>
239
- </xl-data-form-dialog>
240
- <slot name="others" />
241
- <xl-message-dialog l="确认删除?" :ref="refs.deleteDialog" @confirm="() => api.delete()" />
242
- </div>
243
- </template>
244
-
245
-
246
- <style lang="less">
247
- .xl-data-view {
248
-
249
- div.cell {
250
- padding: 0 !important;
251
- }
252
-
253
- .clamp(@lines) {
254
- overflow: hidden;
255
- display: -webkit-box;
256
- -webkit-line-clamp: @lines;
257
- -webkit-box-orient: vertical;
258
- text-align: left;
259
- }
260
-
261
- .clamp1 {
262
- .clamp(1);
263
- }
264
-
265
- .text-left {
266
- text-align: left;
267
- }
268
- }
269
- </style>
1
+ <script setup>
2
+ defineOptions({ name: "XlDataView" })
3
+
4
+ import { inject, computed } from 'vue'
5
+
6
+ const emits = defineEmits(['loaded'])
7
+
8
+ const props = defineProps({
9
+ selectable: {
10
+ type: Boolean,
11
+ default: false,
12
+ },
13
+ columns: {
14
+ type: Array,
15
+ default: () => [],
16
+ },
17
+ showSummary: {
18
+ type: Boolean,
19
+ default: true,
20
+ },
21
+ rowClick: {
22
+ type: Function,
23
+ default: () => { },
24
+ },
25
+ summaryMethod: {
26
+ type: Function,
27
+ },
28
+ showIndex: {
29
+ type: Boolean,
30
+ default: false,
31
+ },
32
+ disableAdd: {
33
+ type: Boolean,
34
+ default: false,
35
+ },
36
+ pagination: {
37
+ type: Object,
38
+ default() {
39
+ return {
40
+ pageNum: 1,
41
+ pageSize: 20,
42
+ total: 0,
43
+ };
44
+ },
45
+ },
46
+ spanMethod: {
47
+ type: Function,
48
+ default: () => { },
49
+ },
50
+ headerCellStyle: {
51
+ type: Function,
52
+ default: () => { },
53
+ },
54
+ rowClassName: {
55
+ type: Function,
56
+ default: () => { },
57
+ },
58
+ rowKey: {
59
+ type: Function,
60
+ default: () => { },
61
+ },
62
+ rowDblClick: {
63
+ type: Function,
64
+ default: () => { },
65
+ },
66
+ selectionChange: {
67
+ type: Function,
68
+ default: () => { },
69
+ },
70
+ layout: {
71
+ type: String,
72
+ default: 'prev, pager, next, jumper'
73
+ },
74
+ small: {
75
+ type: Boolean,
76
+ default: false
77
+ },
78
+ chinese: {
79
+ type: String,
80
+ default: ''
81
+ },
82
+ english: {},
83
+ type: {
84
+ type: String,
85
+ default: ''
86
+ },
87
+ width: {
88
+ default: 70
89
+ },
90
+ labelWidth: {
91
+ default: 90
92
+ },
93
+ handler: {
94
+ type: Function,
95
+ default: () => { },
96
+ },
97
+ defaultExpandAll: {
98
+ type: Boolean,
99
+ default: false,
100
+ },
101
+ expandRowKeys: {
102
+ type: Array,
103
+ default: () => [],
104
+ },
105
+ expandChange: {
106
+ type: Function,
107
+ default: () => {},
108
+ },
109
+ filterChange: {
110
+ type: Function,
111
+ default: () => {},
112
+ },
113
+ });
114
+
115
+ const { refs, api, params, obj, chartOptions, total } = inject('injections')
116
+ </script>
117
+
118
+
119
+ <template>
120
+ <div :class="['xl-data-view', english]">
121
+ <xl-tool-bar :type="type" :table="refs.table" :params="params" @query="() => api.stat()">
122
+ <template #inputs>
123
+ <xl-search-inputs :columns="columns" :params="params"/>
124
+ <slot name="inputs" />
125
+ </template>
126
+ <template #buttons>
127
+ <slot name="buttons" />
128
+ <el-button class="add-btn" v-if="!disableAdd" type="success" @click="() => api.onAdd()">新增</el-button>
129
+ </template>
130
+ </xl-tool-bar>
131
+ <xl-query-page-table v-show="params.view != 'chart'" :ref="refs.table" :api="api" :params="params"
132
+ v-bind="$props" :summary-method="summaryMethod?summaryMethod:()=>({0:total})" :sort-change="(data) => api.sort(data)"
133
+ @loaded="(rsp) => emits('loaded', rsp)">
134
+ <template v-for="col in columns" :key="col.prop">
135
+ <template v-if="!col.hidden">
136
+ <!-- 支持通过 slot 属性使用插槽 -->
137
+ <slot
138
+ v-if="col.type === 'slot'"
139
+ :name="`${col.prop}-col`"
140
+ />
141
+
142
+ <!-- 支持直接指定组件引用 -->
143
+ <component
144
+ v-else-if="col.component"
145
+ :is="col.component"
146
+ />
147
+ <!-- 内置类型组件 -->
148
+ <xl-datetime-col
149
+ v-else-if="col.type === 'datetime'"
150
+ :l="col.label"
151
+ :p="col.prop"
152
+ />
153
+ <xl-col v-else-if="col.type === 'clamp'"
154
+ :l="col.label"
155
+ :width="col.width"
156
+ v-slot="{ row }"
157
+ >
158
+ <p class="text-left clamp1" :title="row[col.prop]">
159
+ {{ row[col.prop] }}
160
+ </p>
161
+ </xl-col>
162
+ <xl-map-col
163
+ v-else-if="col.type === 'map'"
164
+ :l="col.label"
165
+ :p="col.prop"
166
+ :width="col.width"
167
+ :map="col.map"
168
+ />
169
+ <xl-dual-map-col
170
+ v-else-if="col.type === 'dual-map'"
171
+ :l="col.label"
172
+ :p="col.prop"
173
+ :width="col.width"
174
+ :map1="col.map1"
175
+ :map2="col.map2"
176
+ />
177
+ <xl-status-col
178
+ v-else-if="col.type === 'status'"
179
+ :l="col.label"
180
+ :p="col.prop"
181
+ :map="col.map"
182
+ />
183
+ <xl-review-col
184
+ v-else-if="col.type === 'review'"
185
+ :l="col.label"
186
+ :p="col.prop"
187
+ />
188
+ <xl-clamp-col
189
+ v-else-if="col.type === 'clamp'"
190
+ :l="col.label"
191
+ :p="col.prop"
192
+ :width="col.width"
193
+ />
194
+ <xl-bool-col
195
+ v-else-if="col.type === 'bool'"
196
+ :l="col.label"
197
+ :p="col.prop"
198
+ :width="col.width"
199
+ />
200
+ <!-- 默认列组件 -->
201
+ <xl-col
202
+ v-else
203
+ :l="col.label"
204
+ :p="col.prop"
205
+ :width="col.width"
206
+ />
207
+ </template>
208
+ </template>
209
+ <slot name="columns" />
210
+ </xl-query-page-table>
211
+ <xl-data-form-dialog
212
+ :ref="refs.editDialog"
213
+ :chinese="chinese"
214
+ :width="width"
215
+ :label-width="labelWidth"
216
+ :obj="obj"
217
+ :columns="columns"
218
+ :handler="handler"
219
+ >
220
+ <template v-for="col in columns" :key="col.prop">
221
+ <xl-form-col
222
+ v-if="col.form"
223
+ :span="col.form.span"
224
+ :l="col.label"
225
+ :p="col.prop"
226
+ >
227
+ <slot
228
+ v-if="col.type === 'slot'"
229
+ :name="`${col.prop}-form`"
230
+ />
231
+ <component
232
+ v-else
233
+ :is="`xl-${col.form.type || 'input'}`"
234
+ v-model="obj[col.prop]"
235
+ v-bind="col.form || {}"
236
+ />
237
+ </xl-form-col>
238
+ </template>
239
+ </xl-data-form-dialog>
240
+ <slot name="others" />
241
+ <xl-message-dialog l="确认删除?" :ref="refs.deleteDialog" @confirm="() => api.delete()" />
242
+ </div>
243
+ </template>
244
+
245
+
246
+ <style lang="less">
247
+ .xl-data-view {
248
+
249
+ div.cell {
250
+ padding: 0 !important;
251
+ }
252
+
253
+ .clamp(@lines) {
254
+ overflow: hidden;
255
+ display: -webkit-box;
256
+ -webkit-line-clamp: @lines;
257
+ -webkit-box-orient: vertical;
258
+ text-align: left;
259
+ }
260
+
261
+ .clamp1 {
262
+ .clamp(1);
263
+ }
264
+
265
+ .text-left {
266
+ text-align: left;
267
+ }
268
+ }
269
+ </style>