htui-yllkbz 1.3.40 → 1.3.43
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 +64 -43
- package/lib/htui.common.js.gz +0 -0
- package/lib/htui.umd.js +64 -43
- 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 +1 -1
- package/src/packages/HtTable/index.vue +335 -215
|
@@ -1,195 +1,298 @@
|
|
|
1
|
-
|
|
2
1
|
<!--
|
|
3
2
|
* @Descripttion: ht-table
|
|
4
3
|
* @version:
|
|
5
4
|
* @Author: hutao
|
|
6
5
|
* @Date: 2021-11-11 11:23:24
|
|
7
6
|
* @LastEditors: hutao
|
|
8
|
-
* @LastEditTime: 2022-
|
|
7
|
+
* @LastEditTime: 2022-08-09 16:46:10
|
|
9
8
|
-->
|
|
10
9
|
<template>
|
|
11
|
-
<div v-loading="state.loading"
|
|
12
|
-
style="background:#fff">
|
|
10
|
+
<div v-loading="state.loading" style="background:#fff">
|
|
13
11
|
<article>
|
|
14
|
-
<el-table
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
12
|
+
<el-table
|
|
13
|
+
ref="comTable"
|
|
14
|
+
:height="height"
|
|
15
|
+
:max-height="maxHeight"
|
|
16
|
+
:border="border"
|
|
17
|
+
:stripe="stripe !== undefined ? stripe : true"
|
|
18
|
+
:size="size || 'small'"
|
|
19
|
+
:fit="fit"
|
|
20
|
+
:header-row-style="
|
|
21
|
+
headerRowStyle || { background: 'var(--primary-92)' }
|
|
22
|
+
"
|
|
23
|
+
:header-row-class-name="headerRowClassName"
|
|
24
|
+
:header-cell-class-name="headerCellClassName"
|
|
25
|
+
:header-cell-style="headerCellStyle"
|
|
26
|
+
:show-header="showHeader"
|
|
27
|
+
:empty-text="emptyText || '暂无数据'"
|
|
28
|
+
:row-style="rowStyle"
|
|
29
|
+
:row-class-name="rowClassName"
|
|
30
|
+
:current-row-key="currentRowKey"
|
|
31
|
+
:highlight-current-row="highlightCurrentRow"
|
|
32
|
+
:row-key="rowKey || 'id'"
|
|
33
|
+
:data="data"
|
|
34
|
+
tooltip-effect="dark"
|
|
35
|
+
@row-click="
|
|
36
|
+
(row, column, event) => $emit('row-click', row, column, event)
|
|
37
|
+
"
|
|
38
|
+
@row-contextmenu="
|
|
39
|
+
(row, column, event) => $emit('row-contextmenu', row, column, event)
|
|
40
|
+
"
|
|
41
|
+
@row-dblclick="
|
|
42
|
+
(row, column, event) => $emit('row-dblclick', row, column, event)
|
|
43
|
+
"
|
|
44
|
+
@header-click="(column, event) => $emit('header-click', column, event)"
|
|
45
|
+
@header-contextmenu="
|
|
46
|
+
(column, event) => $emit('header-contextmenu', column, event)
|
|
47
|
+
"
|
|
48
|
+
@sort-change="
|
|
49
|
+
({ column, prop, order }) =>
|
|
50
|
+
$emit('sort-change', { column, prop, order })
|
|
51
|
+
"
|
|
52
|
+
@filter-change="(filter) => $emit('filter-change', filter)"
|
|
53
|
+
@current-change="
|
|
54
|
+
(currentRow, oldCurrentRow) =>
|
|
55
|
+
$emit('current-change', currentRow, oldCurrentRow)
|
|
56
|
+
"
|
|
57
|
+
@select="(selection, row) => $emit('select', selection, row)"
|
|
58
|
+
@select-all="(selection) => $emit('select-all', selection)"
|
|
59
|
+
@selection-change="(selection) => $emit('selection-change', selection)"
|
|
60
|
+
@cell-mouse-enter="
|
|
61
|
+
(row, column, cell, event) =>
|
|
62
|
+
$emit('cell-mouse-enter', row, column, cell, event)
|
|
63
|
+
"
|
|
64
|
+
@cell-mouse-leave="
|
|
65
|
+
(row, column, cell, event) =>
|
|
66
|
+
$emit('cell-mouse-leave', row, column, cell, event)
|
|
67
|
+
"
|
|
68
|
+
@cell-click="
|
|
69
|
+
(row, column, cell, event) =>
|
|
70
|
+
$emit('cell-click', row, column, cell, event)
|
|
71
|
+
"
|
|
72
|
+
@cell-dblclick="
|
|
73
|
+
(row, column, cell, event) =>
|
|
74
|
+
$emit('cell-dblclick', row, column, cell, event)
|
|
75
|
+
"
|
|
76
|
+
>
|
|
77
|
+
<el-table-column
|
|
78
|
+
width="55"
|
|
79
|
+
:resizable="false"
|
|
80
|
+
v-if="checked"
|
|
81
|
+
:reserve-selection="reserveSelection"
|
|
82
|
+
:selectable="(row) => row[selectKey] !== false"
|
|
83
|
+
type="selection"
|
|
84
|
+
>
|
|
55
85
|
</el-table-column>
|
|
56
|
-
<el-table-column
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
86
|
+
<el-table-column
|
|
87
|
+
v-if="!hideOrder"
|
|
88
|
+
:resizable="false"
|
|
89
|
+
:label="keyName === undefined ? '序号' : keyName"
|
|
90
|
+
:align="'center'"
|
|
91
|
+
width="55"
|
|
92
|
+
>
|
|
61
93
|
<template slot="header">
|
|
62
94
|
<slot :name="'header_order'">
|
|
63
|
-
<div @click="showFilterModel"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
95
|
+
<div @click="showFilterModel" v-if="showFilter" title="筛选排序">
|
|
96
|
+
<el-button type="text"
|
|
97
|
+
><i class="el-icon-s-grid"></i
|
|
98
|
+
></el-button>
|
|
67
99
|
</div>
|
|
68
|
-
<span v-else>{{keyName||'序号'}}</span>
|
|
69
|
-
|
|
100
|
+
<span v-else>{{ keyName || '序号' }}</span>
|
|
70
101
|
</slot>
|
|
71
102
|
</template>
|
|
72
|
-
<template slot-scope="{row,column
|
|
73
|
-
<slot
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
103
|
+
<template slot-scope="{ row, column, $index }">
|
|
104
|
+
<slot
|
|
105
|
+
name="body_order"
|
|
106
|
+
:row="row"
|
|
107
|
+
:column="column"
|
|
108
|
+
:$index="$index"
|
|
109
|
+
>
|
|
110
|
+
{{
|
|
111
|
+
(state.pageInfo.currentPage - 1) * state.pageInfo.pageSize +
|
|
112
|
+
($index + 1)
|
|
113
|
+
}}
|
|
78
114
|
</slot>
|
|
79
|
-
|
|
80
115
|
</template>
|
|
81
116
|
</el-table-column>
|
|
82
|
-
<template v-for="(item,index) in state.showColumns">
|
|
83
|
-
<el-table-column
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
117
|
+
<template v-for="(item, index) in state.showColumns">
|
|
118
|
+
<el-table-column
|
|
119
|
+
:label="item.title"
|
|
120
|
+
:key="`${item.key}_${index}`"
|
|
121
|
+
:fixed="item.fixed"
|
|
122
|
+
:align="item.align"
|
|
123
|
+
v-if="!item.hide && item.checked"
|
|
124
|
+
:resizable="item.resizable"
|
|
125
|
+
:header-align="item.headerAlign"
|
|
126
|
+
:column-key="item.columnKey"
|
|
127
|
+
:class-name="item.className"
|
|
128
|
+
:prop="item.key"
|
|
129
|
+
:show-overflow-tooltip="
|
|
130
|
+
item.type === 'common' ||
|
|
131
|
+
item.type === 'org' ||
|
|
132
|
+
item.type === 'userId'
|
|
133
|
+
? false
|
|
134
|
+
: item.showOverflowTooltip === false
|
|
135
|
+
? false
|
|
136
|
+
: true
|
|
137
|
+
"
|
|
138
|
+
:sortable="item.sortable"
|
|
139
|
+
:sort-method="item.sortMethod"
|
|
140
|
+
:sort-orders="item.sortOrders"
|
|
141
|
+
:formatter="item.formatter"
|
|
142
|
+
:sort-by="item.sortBy"
|
|
143
|
+
:min-width="item.minWidth"
|
|
144
|
+
:width="item.width"
|
|
145
|
+
>
|
|
146
|
+
<template slot-scope="{ row, column, rowIndex }">
|
|
147
|
+
<slot
|
|
148
|
+
:name="item.key"
|
|
149
|
+
:row="row"
|
|
150
|
+
:column="column"
|
|
151
|
+
:rowIndex="rowIndex"
|
|
152
|
+
>
|
|
106
153
|
<!-- 处理部门 -->
|
|
107
|
-
<template v-if="item.type==='org'">
|
|
108
|
-
<HtOrgInfo
|
|
109
|
-
|
|
110
|
-
|
|
154
|
+
<template v-if="item.type === 'org'">
|
|
155
|
+
<HtOrgInfo
|
|
156
|
+
v-if="getPropByPath(row, item.key)"
|
|
157
|
+
:org-id="getPropByPath(row, item.key)"
|
|
158
|
+
type="tag"
|
|
159
|
+
></HtOrgInfo>
|
|
111
160
|
<span v-else>--</span>
|
|
112
161
|
</template>
|
|
113
162
|
<!-- 处理基础数据 -->
|
|
114
|
-
<template v-else-if="item.type==='common'">
|
|
115
|
-
<HtShowBaseData
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
163
|
+
<template v-else-if="item.type === 'common'">
|
|
164
|
+
<HtShowBaseData
|
|
165
|
+
v-if="getPropByPath(row, item.key)"
|
|
166
|
+
:hide-code="item.hideCode"
|
|
167
|
+
:user-id="
|
|
168
|
+
item.commonType === 'userId'
|
|
169
|
+
? JSON.stringify([getPropByPath(row, item.key)])
|
|
170
|
+
: '[]'
|
|
171
|
+
"
|
|
172
|
+
:department-id="
|
|
173
|
+
item.commonType === 'departmentId'
|
|
174
|
+
? JSON.stringify([getPropByPath(row, item.key)])
|
|
175
|
+
: '[]'
|
|
176
|
+
"
|
|
177
|
+
:role-id="
|
|
178
|
+
item.commonType === 'roleId'
|
|
179
|
+
? JSON.stringify([getPropByPath(row, item.key)])
|
|
180
|
+
: '[]'
|
|
181
|
+
"
|
|
182
|
+
:base-data-id="
|
|
183
|
+
item.commonType === 'baseDataId'
|
|
184
|
+
? getPropByPath(row, item.key)
|
|
185
|
+
: ''
|
|
186
|
+
"
|
|
187
|
+
:base-data-value="
|
|
188
|
+
item.commonType === 'baseDataValue'
|
|
189
|
+
? getPropByPath(row, item.key)
|
|
190
|
+
: ''
|
|
191
|
+
"
|
|
192
|
+
:base-data-name="
|
|
193
|
+
item.commonType === 'baseDataName'
|
|
194
|
+
? getPropByPath(row, item.key)
|
|
195
|
+
: ''
|
|
196
|
+
"
|
|
197
|
+
:base-data-info="true"
|
|
198
|
+
>
|
|
124
199
|
</HtShowBaseData>
|
|
125
200
|
|
|
126
201
|
<span v-else>--</span>
|
|
127
202
|
</template>
|
|
128
203
|
<!-- 处理部门人员 -->
|
|
129
|
-
<template v-else-if="item.type==='userId'">
|
|
130
|
-
<HtShowBaseData
|
|
131
|
-
|
|
132
|
-
|
|
204
|
+
<template v-else-if="item.type === 'userId'">
|
|
205
|
+
<HtShowBaseData
|
|
206
|
+
v-if="getPropByPath(row, item.key)"
|
|
207
|
+
:user-id="JSON.stringify(getPropByPath(row, item.key))"
|
|
208
|
+
:base-data-info="true"
|
|
209
|
+
>
|
|
133
210
|
</HtShowBaseData>
|
|
134
211
|
|
|
135
212
|
<span v-else>--</span>
|
|
136
213
|
</template>
|
|
137
214
|
<!-- 处理时间 -->
|
|
138
|
-
<template v-else-if="item.type==='time'">
|
|
139
|
-
<div
|
|
140
|
-
|
|
141
|
-
|
|
215
|
+
<template v-else-if="item.type === 'time'">
|
|
216
|
+
<div
|
|
217
|
+
v-if="getPropByPath(row, item.key)"
|
|
218
|
+
class="ht-column-cell"
|
|
219
|
+
>
|
|
220
|
+
<span v-if="!item.spread">
|
|
221
|
+
{{
|
|
222
|
+
getPropByPath(row, item.key)
|
|
223
|
+
.replace('T', ' ')
|
|
224
|
+
.slice(0, 19)
|
|
225
|
+
}}</span
|
|
226
|
+
>
|
|
142
227
|
<template v-else>
|
|
143
|
-
<p style="color:var(--primary);margin:0;padding:0">
|
|
144
|
-
|
|
228
|
+
<p style="color:var(--primary);margin:0;padding:0">
|
|
229
|
+
{{ getPropByPath(row, item.key).slice(11, 19) }}
|
|
230
|
+
</p>
|
|
231
|
+
<p style="margin:0;padding:0">
|
|
232
|
+
{{
|
|
233
|
+
getPropByPath(row, item.key)
|
|
234
|
+
.replace('T', ' ')
|
|
235
|
+
.slice(0, 10)
|
|
236
|
+
}}
|
|
237
|
+
</p>
|
|
145
238
|
</template>
|
|
146
239
|
</div>
|
|
147
240
|
<span v-else>--</span>
|
|
148
241
|
</template>
|
|
149
242
|
<!-- 处理布尔值显示 -->
|
|
150
|
-
<template v-else-if="item.type==='boolean'">
|
|
151
|
-
<el-tag
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
243
|
+
<template v-else-if="item.type === 'boolean'">
|
|
244
|
+
<el-tag
|
|
245
|
+
:type="'success'"
|
|
246
|
+
:size="'small'"
|
|
247
|
+
v-if="getPropByPath(row, item.key)"
|
|
248
|
+
>是</el-tag
|
|
249
|
+
>
|
|
250
|
+
<el-tag type="danger" :size="'small'" v-else>否</el-tag>
|
|
157
251
|
</template>
|
|
158
252
|
<!-- 处理图片显示 -->
|
|
159
|
-
<template v-else-if="item.type==='img'">
|
|
160
|
-
<span v-if="getPropByPath(row,item.key)">
|
|
161
|
-
<el-image
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
253
|
+
<template v-else-if="item.type === 'img'">
|
|
254
|
+
<span v-if="getPropByPath(row, item.key)">
|
|
255
|
+
<el-image
|
|
256
|
+
style="width: 38px; height: 38px;margin-right:5px"
|
|
257
|
+
:key="fileToken"
|
|
258
|
+
v-for="fileToken in getPropByPath(row, item.key).split(
|
|
259
|
+
','
|
|
260
|
+
)"
|
|
261
|
+
:src="'/files/api/filing/file/download/' + fileToken"
|
|
262
|
+
:preview-src-list="[
|
|
263
|
+
'/files/api/filing/file/download/' + fileToken,
|
|
264
|
+
]"
|
|
265
|
+
>
|
|
166
266
|
</el-image>
|
|
167
267
|
</span>
|
|
168
268
|
</template>
|
|
169
269
|
<!-- 处理附件显示 -->
|
|
170
|
-
<template v-else-if="item.type==='file'">
|
|
171
|
-
<span v-if="getPropByPath(row,item.key)">
|
|
172
|
-
<i
|
|
173
|
-
|
|
174
|
-
|
|
270
|
+
<template v-else-if="item.type === 'file'">
|
|
271
|
+
<span v-if="getPropByPath(row, item.key)">
|
|
272
|
+
<i
|
|
273
|
+
class="el-icon-paperclip"
|
|
274
|
+
@click="showFiles(getPropByPath(row, item.key))"
|
|
275
|
+
style="color:var(--primary);cursor:pointer"
|
|
276
|
+
>{{ getPropByPath(row, item.key).split(',').length }}</i
|
|
277
|
+
>
|
|
175
278
|
</span>
|
|
176
279
|
<span v-else>--</span>
|
|
177
280
|
</template>
|
|
178
281
|
<!-- 其他 -->
|
|
179
|
-
<span v-else>{{getPropByPath(row,item.key)}}</span>
|
|
282
|
+
<span v-else>{{ getPropByPath(row, item.key) }}</span>
|
|
180
283
|
</slot>
|
|
181
|
-
|
|
182
284
|
</template>
|
|
183
285
|
<!-- 处理重定义table头相关信息 header_key -->
|
|
184
|
-
<template slot-scope="{column
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
286
|
+
<template slot-scope="{ column, $index }" slot="header">
|
|
287
|
+
<slot
|
|
288
|
+
:name="'header_' + item.key"
|
|
289
|
+
:column="column"
|
|
290
|
+
:$index="$index"
|
|
291
|
+
>{{ item.title }}</slot
|
|
292
|
+
>
|
|
189
293
|
</template>
|
|
190
294
|
</el-table-column>
|
|
191
295
|
</template>
|
|
192
|
-
|
|
193
296
|
</el-table>
|
|
194
297
|
</article>
|
|
195
298
|
<footer v-if="!hidePage">
|
|
@@ -199,86 +302,103 @@
|
|
|
199
302
|
|
|
200
303
|
<el-col :span="12">
|
|
201
304
|
<!-- <p style="width:90px;float:left">共{{data.length}}条</p> -->
|
|
202
|
-
<PageInfo
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
305
|
+
<PageInfo
|
|
306
|
+
:hide-on-single-page="pagination && pagination.hideOnSinglePage"
|
|
307
|
+
:small="pagination && pagination.small"
|
|
308
|
+
@onchange="(e) => $emit('onchange', e)"
|
|
309
|
+
:page-sizes="pagination && pagination.pageSizes"
|
|
310
|
+
:page-info="state.pageInfo"
|
|
311
|
+
></PageInfo>
|
|
207
312
|
</el-col>
|
|
208
|
-
|
|
209
313
|
</el-row>
|
|
210
314
|
</footer>
|
|
211
315
|
<!-- 详情弹框 -->
|
|
212
|
-
<el-dialog
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
316
|
+
<el-dialog
|
|
317
|
+
:visible.sync="state.visibleFilter"
|
|
318
|
+
title="属性设置"
|
|
319
|
+
v-if="state.visibleFilter"
|
|
320
|
+
:append-to-body="true"
|
|
321
|
+
:modal-append-to-body="false"
|
|
322
|
+
:close-on-click-modal="true"
|
|
323
|
+
width="400px"
|
|
324
|
+
>
|
|
325
|
+
<p
|
|
326
|
+
slot="title"
|
|
327
|
+
style="font-weight:700;font-size:18px;float:left;margin:0"
|
|
328
|
+
>
|
|
329
|
+
自定义列展示
|
|
330
|
+
</p>
|
|
331
|
+
<div style="overflow:hidden;height:35vh;margin-top:12px">
|
|
332
|
+
<el-scrollbar style="height: calc(35vh + 17px)">
|
|
333
|
+
<el-tree
|
|
334
|
+
:data="getAllColumns"
|
|
335
|
+
ref="tree"
|
|
336
|
+
show-checkbox
|
|
337
|
+
:expand-on-click-node="false"
|
|
338
|
+
node-key="key"
|
|
339
|
+
:check-on-click-node="false"
|
|
340
|
+
@node-drag-start="handleDragStart"
|
|
341
|
+
@node-drag-enter="handleDragEnter"
|
|
342
|
+
@node-drag-leave="handleDragLeave"
|
|
343
|
+
@node-drag-over="handleDragOver"
|
|
344
|
+
@node-drag-end="handleDragEnd"
|
|
345
|
+
@node-drop="handleDrop"
|
|
346
|
+
:default-checked-keys="state.checkedColumnKeys"
|
|
347
|
+
@check-change="changeColumns"
|
|
348
|
+
:allow-drag="allowDrag"
|
|
349
|
+
draggable
|
|
350
|
+
:allow-drop="allowDrop"
|
|
351
|
+
>
|
|
352
|
+
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
353
|
+
<slot :name="'header_' + data.key" :column="data"
|
|
354
|
+
>{{ data.title
|
|
355
|
+
}}<span style="color:#C0C4CC">{{
|
|
356
|
+
data.property ? `(${data.property})` : ''
|
|
357
|
+
}}</span></slot
|
|
358
|
+
>
|
|
243
359
|
</span>
|
|
244
360
|
</el-tree>
|
|
245
361
|
</el-scrollbar>
|
|
246
|
-
|
|
247
362
|
</div>
|
|
248
363
|
<span slot="footer">
|
|
249
|
-
<el-button type="primary"
|
|
250
|
-
|
|
251
|
-
<el-button @click="state.visibleFilter=false">取消</el-button>
|
|
364
|
+
<el-button type="primary" @click="confirmSortAndshow">确定</el-button>
|
|
365
|
+
<el-button @click="state.visibleFilter = false">取消</el-button>
|
|
252
366
|
<el-button @click="resetColumn">重置</el-button>
|
|
253
367
|
</span>
|
|
254
368
|
</el-dialog>
|
|
255
369
|
<!-- 附件详情弹框 -->
|
|
256
|
-
<el-dialog
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
370
|
+
<el-dialog
|
|
371
|
+
:visible.sync="state.visibleFile"
|
|
372
|
+
v-if="state.visibleFile"
|
|
373
|
+
title="附件查看"
|
|
374
|
+
:append-to-body="true"
|
|
375
|
+
:modal-append-to-body="false"
|
|
376
|
+
:close-on-click-modal="true"
|
|
377
|
+
width="400px"
|
|
378
|
+
:center="true"
|
|
379
|
+
>
|
|
380
|
+
<p
|
|
381
|
+
slot="title"
|
|
382
|
+
style="font-weight:700;font-size:18px;float:left;margin:0"
|
|
383
|
+
>
|
|
384
|
+
附件查看
|
|
385
|
+
</p>
|
|
265
386
|
|
|
266
|
-
<div style=
|
|
267
|
-
<el-scrollbar style=
|
|
268
|
-
<HtUploadFiles :disabled="true"
|
|
269
|
-
v-model="state.files"></HtUploadFiles>
|
|
387
|
+
<div style="overflow:hidden;height:calc(30vh)">
|
|
388
|
+
<el-scrollbar style="height: calc(100% + 17px)">
|
|
389
|
+
<HtUploadFiles :disabled="true" v-model="state.files"></HtUploadFiles>
|
|
270
390
|
</el-scrollbar>
|
|
271
391
|
</div>
|
|
272
392
|
</el-dialog>
|
|
273
393
|
</div>
|
|
274
394
|
</template>
|
|
275
|
-
<script lang=
|
|
276
|
-
import { Component, Prop, Vue, Watch } from
|
|
277
|
-
import { Column, PageInfoType } from
|
|
278
|
-
import PageInfo from
|
|
279
|
-
import HtUploadFiles from
|
|
280
|
-
import HtShowBaseData from
|
|
281
|
-
import HtOrgInfo from
|
|
395
|
+
<script lang="ts">
|
|
396
|
+
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
|
397
|
+
import { Column, PageInfoType } from '@/packages/type';
|
|
398
|
+
import PageInfo from '@/packages/PageInfo/index.vue';
|
|
399
|
+
import HtUploadFiles from '@/packages/HtUploadFiles/index.vue';
|
|
400
|
+
import HtShowBaseData from '@/packages/HtShowBaseData';
|
|
401
|
+
import HtOrgInfo from '@/packages/HtOrgInfo';
|
|
282
402
|
interface State {
|
|
283
403
|
pageInfo: PageInfoType;
|
|
284
404
|
loading: boolean;
|
|
@@ -300,7 +420,7 @@ interface State {
|
|
|
300
420
|
files?: string;
|
|
301
421
|
}
|
|
302
422
|
@Component({
|
|
303
|
-
name:
|
|
423
|
+
name: 'HtTable',
|
|
304
424
|
components: {
|
|
305
425
|
PageInfo,
|
|
306
426
|
HtUploadFiles,
|
|
@@ -330,14 +450,14 @@ export default class HtTable extends Vue {
|
|
|
330
450
|
@Prop() rowKey?: string;
|
|
331
451
|
@Prop() stripe?: boolean;
|
|
332
452
|
@Prop() border?: boolean;
|
|
333
|
-
@Prop() size?:
|
|
453
|
+
@Prop() size?: 'medium' | 'small' | 'mini';
|
|
334
454
|
@Prop() fit?: boolean;
|
|
335
455
|
@Prop() showHeader?: boolean;
|
|
336
456
|
@Prop() rowClassName?: any;
|
|
337
457
|
/** 是否启用复选框 */
|
|
338
458
|
@Prop() checked!: boolean;
|
|
339
459
|
/** 设置的禁用字段值--与check同步 */
|
|
340
|
-
@Prop({ default:
|
|
460
|
+
@Prop({ default: 'selectable' }) selectKey?: string;
|
|
341
461
|
/** 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 */
|
|
342
462
|
@Prop() selectable?: any;
|
|
343
463
|
@Prop() currentRowKey?: string | number;
|
|
@@ -390,7 +510,7 @@ export default class HtTable extends Vue {
|
|
|
390
510
|
this.state.visibleFilter = false;
|
|
391
511
|
if (this.uuId) {
|
|
392
512
|
window.localStorage.setItem(
|
|
393
|
-
|
|
513
|
+
'table_' + this.uuId,
|
|
394
514
|
JSON.stringify(this.columns || [])
|
|
395
515
|
);
|
|
396
516
|
}
|
|
@@ -420,7 +540,7 @@ export default class HtTable extends Vue {
|
|
|
420
540
|
this.getShowKeys(this.state.allColumns);
|
|
421
541
|
}
|
|
422
542
|
/** 展示附件信息 */
|
|
423
|
-
showFiles(val =
|
|
543
|
+
showFiles(val = '') {
|
|
424
544
|
this.state.files = val;
|
|
425
545
|
this.state.visibleFile = true;
|
|
426
546
|
}
|
|
@@ -459,7 +579,7 @@ export default class HtTable extends Vue {
|
|
|
459
579
|
}
|
|
460
580
|
/** 节点是否被插入 */
|
|
461
581
|
allowDrop(draggingNode: any, dropNode: any, type: string) {
|
|
462
|
-
return type !==
|
|
582
|
+
return type !== 'inner';
|
|
463
583
|
}
|
|
464
584
|
/** 节点是否允许拖动 */
|
|
465
585
|
allowDrag(draggingNode: any) {
|
|
@@ -468,10 +588,10 @@ export default class HtTable extends Vue {
|
|
|
468
588
|
/** 处理table里面根据字段获取对应的值 */
|
|
469
589
|
getPropByPath(obj: any, path: string, strict = true) {
|
|
470
590
|
let tempObj = obj;
|
|
471
|
-
path = path.replace(/\[(\w+)\]/g,
|
|
472
|
-
path = path.replace(/^\./,
|
|
591
|
+
path = path.replace(/\[(\w+)\]/g, '.$1');
|
|
592
|
+
path = path.replace(/^\./, '');
|
|
473
593
|
|
|
474
|
-
const keyArr = path.split(
|
|
594
|
+
const keyArr = path.split('.');
|
|
475
595
|
let i = 0;
|
|
476
596
|
for (let len = keyArr.length; i < len - 1; ++i) {
|
|
477
597
|
if (!tempObj && !strict) break;
|
|
@@ -524,7 +644,7 @@ export default class HtTable extends Vue {
|
|
|
524
644
|
|
|
525
645
|
if (this.uuId) {
|
|
526
646
|
window.localStorage.setItem(
|
|
527
|
-
|
|
647
|
+
'table_' + this.uuId,
|
|
528
648
|
JSON.stringify(allColumns)
|
|
529
649
|
);
|
|
530
650
|
}
|
|
@@ -537,7 +657,7 @@ export default class HtTable extends Vue {
|
|
|
537
657
|
});
|
|
538
658
|
|
|
539
659
|
/** 自定义列回调 */
|
|
540
|
-
this.$emit(
|
|
660
|
+
this.$emit('customColumn', allColumns);
|
|
541
661
|
}
|
|
542
662
|
|
|
543
663
|
/** 获取显示出来的table头信息 */
|
|
@@ -550,7 +670,7 @@ export default class HtTable extends Vue {
|
|
|
550
670
|
/** 缓存起来下次使用 --todo只做了显示没有做排序缓存 */
|
|
551
671
|
if (this.uuId) {
|
|
552
672
|
window.localStorage.setItem(
|
|
553
|
-
|
|
673
|
+
'table_' + this.uuId,
|
|
554
674
|
JSON.stringify(showColumnKeys)
|
|
555
675
|
);
|
|
556
676
|
}
|
|
@@ -560,7 +680,7 @@ export default class HtTable extends Vue {
|
|
|
560
680
|
}
|
|
561
681
|
|
|
562
682
|
/** 监听 */
|
|
563
|
-
@Watch(
|
|
683
|
+
@Watch('pageInfo')
|
|
564
684
|
setPageInfo(val?: PageInfoType) {
|
|
565
685
|
if (val) {
|
|
566
686
|
const pageInfo: PageInfoType = val;
|
|
@@ -577,7 +697,7 @@ export default class HtTable extends Vue {
|
|
|
577
697
|
|
|
578
698
|
return allColumns.filter((item) => !item.hide);
|
|
579
699
|
}
|
|
580
|
-
@Watch(
|
|
700
|
+
@Watch('columns', { immediate: true })
|
|
581
701
|
setColumns(columns?: Column[]) {
|
|
582
702
|
if (!columns) {
|
|
583
703
|
return;
|
|
@@ -589,7 +709,7 @@ export default class HtTable extends Vue {
|
|
|
589
709
|
//---showColumnKeys 要改变
|
|
590
710
|
//---排列顺序要改变 todo
|
|
591
711
|
const allColumns: string | null = window.localStorage.getItem(
|
|
592
|
-
|
|
712
|
+
'table_' + this.uuId
|
|
593
713
|
);
|
|
594
714
|
if (allColumns) {
|
|
595
715
|
this.state.allColumns = JSON.parse(allColumns);
|
|
@@ -614,4 +734,4 @@ export default class HtTable extends Vue {
|
|
|
614
734
|
}
|
|
615
735
|
}
|
|
616
736
|
</script>
|
|
617
|
-
<style lang=
|
|
737
|
+
<style lang="scss" scoped></style>
|