@xilonglab/vue-main 1.6.16 → 1.6.17

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