htui-yllkbz 1.5.45 → 1.5.46
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/lib/htui.common.js +298 -126
- package/lib/htui.common.js.gz +0 -0
- package/lib/htui.umd.js +298 -126
- package/lib/htui.umd.js.gz +0 -0
- package/lib/htui.umd.min.js +1 -1
- package/lib/htui.umd.min.js.gz +0 -0
- package/package.json +2 -2
- package/src/packages/HtDialog/index.ts +15 -0
- package/src/packages/HtDialog/index.vue +144 -0
- package/src/packages/HtDrawer/index.vue +56 -57
- package/src/packages/HtModel/index.vue +40 -35
- package/src/packages/HtTable/index.vue +169 -63
- package/src/packages/index.ts +4 -3
|
@@ -4,64 +4,116 @@
|
|
|
4
4
|
* @Author: hutao
|
|
5
5
|
* @Date: 2021-11-11 11:23:24
|
|
6
6
|
* @LastEditors: hutao
|
|
7
|
-
* @LastEditTime:
|
|
7
|
+
* @LastEditTime: 2025-02-21 17:24:17
|
|
8
8
|
-->
|
|
9
9
|
<template>
|
|
10
|
-
<div v-loading="state.loading"
|
|
10
|
+
<div v-loading="state.loading"
|
|
11
|
+
style="background:#fff">
|
|
11
12
|
<article>
|
|
12
|
-
<el-table ref="comTable"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
13
|
+
<el-table ref="comTable"
|
|
14
|
+
:height="height"
|
|
15
|
+
:max-height="maxHeight"
|
|
16
|
+
:sum-text="sumText"
|
|
17
|
+
:show-summary="showSummary"
|
|
18
|
+
:summary-method="summaryMethod"
|
|
19
|
+
:border="border"
|
|
20
|
+
:default-expand-all="defaultExpandAll"
|
|
21
|
+
:expand-row-keys="expandRowKeys"
|
|
22
|
+
:stripe="stripe !== undefined ? stripe : true"
|
|
23
|
+
:size="size || 'small'"
|
|
24
|
+
:fit="fit"
|
|
25
|
+
:span-method="spanMethodCom"
|
|
26
|
+
:header-row-style="headerRowStyle || { background: 'var(--primary-92)' }
|
|
27
|
+
"
|
|
28
|
+
:header-row-class-name="headerRowClassName"
|
|
29
|
+
:header-cell-class-name="headerCellClassName"
|
|
30
|
+
:header-cell-style="headerCellStyle"
|
|
31
|
+
:show-header="showHeader"
|
|
32
|
+
:empty-text="emptyText || '暂无数据'"
|
|
33
|
+
:row-style="rowStyle"
|
|
34
|
+
:cell-style="cellStyle"
|
|
35
|
+
:row-class-name="rowClassName"
|
|
36
|
+
:cell-class-name="cellClassName"
|
|
37
|
+
:current-row-key="currentRowKey"
|
|
38
|
+
:highlight-current-row="highlightCurrentRow"
|
|
39
|
+
:row-key="rowKey || 'id'"
|
|
40
|
+
:data="data"
|
|
41
|
+
tooltip-effect="dark"
|
|
42
|
+
:tree-props="treeProps"
|
|
43
|
+
@row-click="(row, column, event) => $emit('row-click', row, column, event)
|
|
44
|
+
"
|
|
45
|
+
@row-contextmenu="(row, column, event) => $emit('row-contextmenu', row, column, event)
|
|
46
|
+
"
|
|
47
|
+
@row-dblclick="(row, column, event) => $emit('row-dblclick', row, column, event)
|
|
48
|
+
"
|
|
49
|
+
@header-click="(column, event) => $emit('header-click', column, event)"
|
|
50
|
+
@header-contextmenu="(column, event) => $emit('header-contextmenu', column, event)
|
|
51
|
+
"
|
|
52
|
+
@header-dragend="headerDragend"
|
|
53
|
+
@sort-change="({ column, prop, order }) =>
|
|
25
54
|
$emit('sort-change', { column, prop, order })
|
|
26
|
-
"
|
|
27
|
-
|
|
55
|
+
"
|
|
56
|
+
@expand-change="(row, da) => $emit('expand-change', row, da)"
|
|
57
|
+
@filter-change="(filter) => $emit('filter-change', filter)"
|
|
58
|
+
@current-change="(currentRow, oldCurrentRow) =>
|
|
28
59
|
$emit('current-change', currentRow, oldCurrentRow)
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
60
|
+
"
|
|
61
|
+
@select="(selection, row) => $emit('select', selection, row)"
|
|
62
|
+
@select-all="(selection) => $emit('select-all', selection)"
|
|
63
|
+
@selection-change="(selection) => $emit('selection-change', selection)"
|
|
64
|
+
@cell-mouse-enter="(row, column, cell, event) =>
|
|
32
65
|
$emit('cell-mouse-enter', row, column, cell, event)
|
|
33
|
-
"
|
|
66
|
+
"
|
|
67
|
+
@cell-mouse-leave="(row, column, cell, event) =>
|
|
34
68
|
$emit('cell-mouse-leave', row, column, cell, event)
|
|
35
|
-
"
|
|
69
|
+
"
|
|
70
|
+
@cell-click="(row, column, cell, event) =>
|
|
36
71
|
$emit('cell-click', row, column, cell, event)
|
|
37
|
-
"
|
|
72
|
+
"
|
|
73
|
+
@cell-dblclick="(row, column, cell, event) =>
|
|
38
74
|
$emit('cell-dblclick', row, column, cell, event)
|
|
39
75
|
">
|
|
40
76
|
<template slot="empty">
|
|
41
77
|
<slot name="empty"> </slot>
|
|
42
78
|
</template>
|
|
43
|
-
<el-table-column width="55"
|
|
44
|
-
|
|
79
|
+
<el-table-column width="55"
|
|
80
|
+
:resizable="false"
|
|
81
|
+
v-if="checked"
|
|
82
|
+
:reserve-selection="reserveSelection"
|
|
83
|
+
:selectable="(row) => row[selectKey] !== false"
|
|
84
|
+
type="selection">
|
|
45
85
|
</el-table-column>
|
|
46
|
-
<el-table-column v-if="isExpand"
|
|
86
|
+
<el-table-column v-if="isExpand"
|
|
87
|
+
type="expand">
|
|
47
88
|
<!-- 展开行专用 -->
|
|
48
89
|
<template slot-scope="props">
|
|
49
|
-
<slot name="expand"
|
|
90
|
+
<slot name="expand"
|
|
91
|
+
:row="props.row"
|
|
92
|
+
:column="props.column"
|
|
93
|
+
:rowIndex="props.$index">
|
|
50
94
|
</slot>
|
|
51
95
|
</template>
|
|
52
96
|
</el-table-column>
|
|
53
|
-
<el-table-column v-if="!hideOrder"
|
|
54
|
-
|
|
97
|
+
<el-table-column v-if="!hideOrder"
|
|
98
|
+
:resizable="false"
|
|
99
|
+
:label="keyName === undefined ? '序号' : keyName"
|
|
100
|
+
:align="'center'"
|
|
101
|
+
width="55">
|
|
55
102
|
<template slot="header">
|
|
56
103
|
<slot :name="'header_order'">
|
|
57
|
-
<div @click="showFilterModel"
|
|
104
|
+
<div @click="showFilterModel"
|
|
105
|
+
v-if="showFilter"
|
|
106
|
+
title="筛选排序">
|
|
58
107
|
<el-button type="text"><i class="el-icon-s-grid"></i></el-button>
|
|
59
108
|
</div>
|
|
60
109
|
<span v-else>{{ keyName || '序号' }}</span>
|
|
61
110
|
</slot>
|
|
62
111
|
</template>
|
|
63
112
|
<template slot-scope="{ row, column, $index }">
|
|
64
|
-
<slot name="body_order"
|
|
113
|
+
<slot name="body_order"
|
|
114
|
+
:row="row"
|
|
115
|
+
:column="column"
|
|
116
|
+
:$index="$index">
|
|
65
117
|
{{
|
|
66
118
|
(state.pageInfo.currentPage - 1) * state.pageInfo.pageSize +
|
|
67
119
|
($index + 1)
|
|
@@ -72,29 +124,51 @@
|
|
|
72
124
|
|
|
73
125
|
<template v-for="(item, index) in showColumns">
|
|
74
126
|
|
|
75
|
-
<HtTableColumn :key="`${item.key}_${index}`"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
127
|
+
<HtTableColumn :key="`${item.key}_${index}`"
|
|
128
|
+
:item="item"
|
|
129
|
+
:getAllBaseData="getAllBaseData"
|
|
130
|
+
:getAllOrg="getAllOrg"
|
|
131
|
+
:getAllRole="getAllRole"
|
|
132
|
+
:getAllUser="getAllUser"
|
|
133
|
+
@showFiles="showFiles">
|
|
134
|
+
<template v-for="child in allChildren"
|
|
135
|
+
:slot="child.key"
|
|
136
|
+
slot-scope="scope">
|
|
137
|
+
<slot :name="child.key"
|
|
138
|
+
:row="scope.row"
|
|
139
|
+
:column="scope.column"
|
|
140
|
+
:rowIndex="scope.rowIndex">
|
|
79
141
|
</slot>
|
|
80
142
|
</template>
|
|
81
|
-
<template v-for="child in allChildren"
|
|
82
|
-
|
|
143
|
+
<template v-for="child in allChildren"
|
|
144
|
+
slot-scope="{ column, $index }"
|
|
145
|
+
:slot="'header_' + child.key">
|
|
146
|
+
<slot :name="'header_' + child.key"
|
|
147
|
+
:column="column"
|
|
148
|
+
:$index="$index"></slot>
|
|
83
149
|
</template>
|
|
84
150
|
|
|
85
|
-
<template :slot="item.key"
|
|
151
|
+
<template :slot="item.key"
|
|
152
|
+
slot-scope="scope">
|
|
86
153
|
|
|
87
|
-
<slot :name="item.key"
|
|
154
|
+
<slot :name="item.key"
|
|
155
|
+
:row="scope.row"
|
|
156
|
+
:column="scope.column"
|
|
157
|
+
:rowIndex="scope.rowIndex">
|
|
88
158
|
</slot>
|
|
89
159
|
</template>
|
|
90
|
-
<template slot-scope="{ column, $index }"
|
|
91
|
-
|
|
160
|
+
<template slot-scope="{ column, $index }"
|
|
161
|
+
:slot="'header_' + item.key">
|
|
162
|
+
<slot :name="'header_' + item.key"
|
|
163
|
+
:column="column"
|
|
164
|
+
:$index="$index"></slot>
|
|
92
165
|
</template>
|
|
93
166
|
</HtTableColumn>
|
|
94
167
|
</template>
|
|
95
168
|
</el-table>
|
|
96
169
|
</article>
|
|
97
|
-
<footer v-if="!hidePage"
|
|
170
|
+
<footer v-if="!hidePage"
|
|
171
|
+
class="ht-table-footer">
|
|
98
172
|
<el-row name="footer">
|
|
99
173
|
<!-- 此处建议使用el-col -->
|
|
100
174
|
<slot name="footerLeft"></slot>
|
|
@@ -102,26 +176,49 @@
|
|
|
102
176
|
<el-col :span="$slots['footerLeft'] ? 12 : 24">
|
|
103
177
|
<!-- <p style="width:90px;float:left">共{{data.length}}条</p> -->
|
|
104
178
|
<PageInfo :hide-on-single-page="pagination && pagination.hideOnSinglePage"
|
|
105
|
-
|
|
106
|
-
|
|
179
|
+
:small="pagination && pagination.small"
|
|
180
|
+
:style="pageStyle"
|
|
181
|
+
@onchange="(e) => $emit('onchange', e)"
|
|
182
|
+
:page-sizes="pagination && pagination.pageSizes"
|
|
183
|
+
:page-info="state.pageInfo"></PageInfo>
|
|
107
184
|
</el-col>
|
|
108
185
|
</el-row>
|
|
109
186
|
</footer>
|
|
110
187
|
<!-- 详情弹框 -->
|
|
111
|
-
<el-dialog :visible.sync="state.visibleFilter"
|
|
112
|
-
|
|
113
|
-
|
|
188
|
+
<el-dialog :visible.sync="state.visibleFilter"
|
|
189
|
+
title="属性设置"
|
|
190
|
+
v-if="state.visibleFilter"
|
|
191
|
+
:append-to-body="true"
|
|
192
|
+
:modal-append-to-body="true"
|
|
193
|
+
:close-on-click-modal="true"
|
|
194
|
+
width="400px">
|
|
195
|
+
<p slot="title"
|
|
196
|
+
style="font-weight:700;font-size:18px;float:left;margin:0">
|
|
114
197
|
自定义列展示
|
|
115
198
|
</p>
|
|
116
199
|
<div style="overflow:hidden;height:35vh;margin-top:12px">
|
|
117
200
|
<el-scrollbar style="height: calc(35vh + 17px)">
|
|
118
|
-
<el-tree :data="getAllColumns"
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
201
|
+
<el-tree :data="getAllColumns"
|
|
202
|
+
ref="tree"
|
|
203
|
+
show-checkbox
|
|
204
|
+
:expand-on-click-node="false"
|
|
205
|
+
node-key="key"
|
|
206
|
+
:check-on-click-node="false"
|
|
207
|
+
@node-drag-start="handleDragStart"
|
|
208
|
+
@node-drag-enter="handleDragEnter"
|
|
209
|
+
@node-drag-leave="handleDragLeave"
|
|
210
|
+
@node-drag-over="handleDragOver"
|
|
211
|
+
@node-drag-end="handleDragEnd"
|
|
212
|
+
@node-drop="handleDrop"
|
|
213
|
+
:default-checked-keys="state.checkedColumnKeys"
|
|
214
|
+
@check-change="changeColumns"
|
|
215
|
+
:allow-drag="allowDrag"
|
|
216
|
+
:draggable="draggable"
|
|
217
|
+
:allow-drop="allowDrop">
|
|
218
|
+
<span class="custom-tree-node"
|
|
219
|
+
slot-scope="{ node, data }">
|
|
220
|
+
<slot :name="'header_' + data.key"
|
|
221
|
+
:column="data">{{ data.title
|
|
125
222
|
}}<span style="color:#C0C4CC">{{
|
|
126
223
|
data.property ? `(${data.property})` : ''
|
|
127
224
|
}}</span></slot>
|
|
@@ -130,21 +227,30 @@
|
|
|
130
227
|
</el-scrollbar>
|
|
131
228
|
</div>
|
|
132
229
|
<span slot="footer">
|
|
133
|
-
<el-button type="primary"
|
|
230
|
+
<el-button type="primary"
|
|
231
|
+
@click="confirmSortAndshow">确定</el-button>
|
|
134
232
|
<el-button @click="state.visibleFilter = false">取消</el-button>
|
|
135
233
|
<el-button @click="resetColumn">重置</el-button>
|
|
136
234
|
</span>
|
|
137
235
|
</el-dialog>
|
|
138
236
|
<!-- 附件详情弹框 -->
|
|
139
|
-
<el-dialog :visible.sync="state.visibleFile"
|
|
140
|
-
|
|
141
|
-
|
|
237
|
+
<el-dialog :visible.sync="state.visibleFile"
|
|
238
|
+
v-if="state.visibleFile"
|
|
239
|
+
title="附件查看"
|
|
240
|
+
:append-to-body="true"
|
|
241
|
+
:modal-append-to-body="true"
|
|
242
|
+
:close-on-click-modal="true"
|
|
243
|
+
width="400px"
|
|
244
|
+
:center="true">
|
|
245
|
+
<p slot="title"
|
|
246
|
+
style="font-weight:700;font-size:18px;float:left;margin:0">
|
|
142
247
|
附件查看
|
|
143
248
|
</p>
|
|
144
249
|
|
|
145
250
|
<div style="overflow:hidden;height:calc(30vh)">
|
|
146
251
|
<el-scrollbar style="height: calc(100% + 17px)">
|
|
147
|
-
<HtUploadFiles :disabled="true"
|
|
252
|
+
<HtUploadFiles :disabled="true"
|
|
253
|
+
v-model="state.files"></HtUploadFiles>
|
|
148
254
|
</el-scrollbar>
|
|
149
255
|
</div>
|
|
150
256
|
</el-dialog>
|
|
@@ -412,6 +518,7 @@ export default class HtTable extends Vue {
|
|
|
412
518
|
const allColumnsStr: string | null = window.localStorage.getItem(
|
|
413
519
|
"table_" + this.uuId
|
|
414
520
|
);
|
|
521
|
+
|
|
415
522
|
if (allColumnsStr) {
|
|
416
523
|
const Columns = JSON.parse(allColumnsStr);
|
|
417
524
|
|
|
@@ -505,7 +612,6 @@ export default class HtTable extends Vue {
|
|
|
505
612
|
const stateColumns: Column[] = JSON.parse(
|
|
506
613
|
JSON.stringify(this.state.showColumns)
|
|
507
614
|
);
|
|
508
|
-
|
|
509
615
|
stateColumns.forEach((item) => {
|
|
510
616
|
if (item.children?.length && item.checked == false) {
|
|
511
617
|
const isChecked = !!item.children.find((item) => item.checked);
|
|
@@ -513,7 +619,7 @@ export default class HtTable extends Vue {
|
|
|
513
619
|
item.children = item.children.filter((item) => item.checked !== false);
|
|
514
620
|
}
|
|
515
621
|
});
|
|
516
|
-
console.log("showColumns", stateColumns);
|
|
622
|
+
//console.log("showColumns", stateColumns);
|
|
517
623
|
return stateColumns;
|
|
518
624
|
}
|
|
519
625
|
|
|
@@ -610,13 +716,13 @@ export default class HtTable extends Vue {
|
|
|
610
716
|
return this.spanMethod
|
|
611
717
|
? this.spanMethod
|
|
612
718
|
: this.data && this.data.length > 1
|
|
613
|
-
|
|
719
|
+
? getSpanMethod(
|
|
614
720
|
this.data,
|
|
615
721
|
this.spanMethodProps?.colRows || [],
|
|
616
722
|
this.spanMethodProps?.sameColRows || [],
|
|
617
723
|
this.spanMethodProps?.relateProps || {}
|
|
618
724
|
)
|
|
619
|
-
|
|
725
|
+
: undefined;
|
|
620
726
|
}
|
|
621
727
|
}
|
|
622
728
|
</script>
|
package/src/packages/index.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* @Author: hutao
|
|
5
5
|
* @Date: 2021-10-21 10:08:41
|
|
6
6
|
* @LastEditors: hutao
|
|
7
|
-
* @LastEditTime:
|
|
7
|
+
* @LastEditTime: 2025-03-12 17:07:44
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
// 导入组件
|
|
@@ -37,6 +37,7 @@ import HtMenu from './HtMenu'
|
|
|
37
37
|
import HtRow from './HtRow'
|
|
38
38
|
import HtCol from './HtCol'
|
|
39
39
|
import HtModel from "./HtModel"
|
|
40
|
+
import HtDialog from "./HtDialog"
|
|
40
41
|
import HtBread from './HtBread'
|
|
41
42
|
import HtPopover from './HtPopover'
|
|
42
43
|
import HtTimeLine from './HtTimeLine'
|
|
@@ -50,7 +51,7 @@ import HtRealTime from './HtRealTime'
|
|
|
50
51
|
|
|
51
52
|
|
|
52
53
|
// 存储组件列表
|
|
53
|
-
const components = [HtRealTime, HtRow, HtTimeLineItem, HtCol, HtTimeLine, HtBread, HtPopover, HtModel, HtMenu, HtSelectCategory, HtSelectUnit, HtSelectPosition, HtMore, HtSelectTimeSlot, HtSelectCron, HtBaseData, HtDrawer, HtShowBaseType, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
|
|
54
|
+
const components = [HtRealTime, HtDialog,HtRow, HtTimeLineItem, HtCol, HtTimeLine, HtBread, HtPopover, HtModel, HtMenu, HtSelectCategory, HtSelectUnit, HtSelectPosition, HtMore, HtSelectTimeSlot, HtSelectCron, HtBaseData, HtDrawer, HtShowBaseType, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
|
|
54
55
|
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
|
|
55
56
|
const install = function (Vue: any) {
|
|
56
57
|
// 判断是否安装
|
|
@@ -69,6 +70,6 @@ export default {
|
|
|
69
70
|
HtRow, HtCol, HtRealTime, HtModel, HtBread, HtPopover,
|
|
70
71
|
HtSelectTable, HtSelectPosition, HtPagination, HtShowBaseType, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtMore,
|
|
71
72
|
HtSelectUnit, HtSelectCategory, HtMenu,
|
|
72
|
-
HtSelectBaseData, HtSelectOrg, HtTimeLine, HtTimeLineItem, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData, HtDrawer, HtSelectCron, HtSelectTimeSlot
|
|
73
|
+
HtSelectBaseData, HtSelectOrg,HtDialog, HtTimeLine, HtTimeLineItem, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData, HtDrawer, HtSelectCron, HtSelectTimeSlot
|
|
73
74
|
}
|
|
74
75
|
|