htui-yllkbz 1.3.38 → 1.3.41
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 +129 -92
- package/lib/htui.common.js.gz +0 -0
- package/lib/htui.css +1 -1
- package/lib/htui.umd.js +129 -92
- package/lib/htui.umd.js.gz +0 -0
- package/lib/htui.umd.min.js +3 -3
- package/lib/htui.umd.min.js.gz +0 -0
- package/package.json +1 -1
- package/src/packages/HtBaseData/index.vue +10 -0
- package/src/packages/HtSelectBaseData/index.vue +3 -1
- package/src/packages/HtSelectOrg/index.vue +3 -1
- package/src/packages/HtSelectUser/index.vue +3 -1
- package/src/packages/HtTable/index.vue +333 -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 14:18:27
|
|
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,101 @@
|
|
|
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="false"
|
|
321
|
+
:close-on-click-modal="true"
|
|
322
|
+
width="400px"
|
|
323
|
+
>
|
|
324
|
+
<p
|
|
325
|
+
slot="title"
|
|
326
|
+
style="font-weight:700;font-size:18px;float:left;margin:0"
|
|
327
|
+
>
|
|
328
|
+
自定义列展示
|
|
329
|
+
</p>
|
|
330
|
+
<div style="overflow:hidden;height:35vh;margin-top:12px">
|
|
331
|
+
<el-scrollbar style="height: calc(35vh + 17px)">
|
|
332
|
+
<el-tree
|
|
333
|
+
:data="getAllColumns"
|
|
334
|
+
ref="tree"
|
|
335
|
+
show-checkbox
|
|
336
|
+
:expand-on-click-node="false"
|
|
337
|
+
node-key="key"
|
|
338
|
+
:check-on-click-node="false"
|
|
339
|
+
@node-drag-start="handleDragStart"
|
|
340
|
+
@node-drag-enter="handleDragEnter"
|
|
341
|
+
@node-drag-leave="handleDragLeave"
|
|
342
|
+
@node-drag-over="handleDragOver"
|
|
343
|
+
@node-drag-end="handleDragEnd"
|
|
344
|
+
@node-drop="handleDrop"
|
|
345
|
+
:default-checked-keys="state.checkedColumnKeys"
|
|
346
|
+
@check-change="changeColumns"
|
|
347
|
+
:allow-drag="allowDrag"
|
|
348
|
+
draggable
|
|
349
|
+
:allow-drop="allowDrop"
|
|
350
|
+
>
|
|
351
|
+
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
352
|
+
<slot :name="'header_' + data.key" :column="data"
|
|
353
|
+
>{{ data.title
|
|
354
|
+
}}<span style="color:#C0C4CC">{{
|
|
355
|
+
data.property ? `(${data.property})` : ''
|
|
356
|
+
}}</span></slot
|
|
357
|
+
>
|
|
243
358
|
</span>
|
|
244
359
|
</el-tree>
|
|
245
360
|
</el-scrollbar>
|
|
246
|
-
|
|
247
361
|
</div>
|
|
248
362
|
<span slot="footer">
|
|
249
|
-
<el-button type="primary"
|
|
250
|
-
|
|
251
|
-
<el-button @click="state.visibleFilter=false">取消</el-button>
|
|
363
|
+
<el-button type="primary" @click="confirmSortAndshow">确定</el-button>
|
|
364
|
+
<el-button @click="state.visibleFilter = false">取消</el-button>
|
|
252
365
|
<el-button @click="resetColumn">重置</el-button>
|
|
253
366
|
</span>
|
|
254
367
|
</el-dialog>
|
|
255
368
|
<!-- 附件详情弹框 -->
|
|
256
|
-
<el-dialog
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
369
|
+
<el-dialog
|
|
370
|
+
:visible.sync="state.visibleFile"
|
|
371
|
+
v-if="state.visibleFile"
|
|
372
|
+
title="附件查看"
|
|
373
|
+
:append-to-body="false"
|
|
374
|
+
:close-on-click-modal="true"
|
|
375
|
+
width="400px"
|
|
376
|
+
:center="true"
|
|
377
|
+
>
|
|
378
|
+
<p
|
|
379
|
+
slot="title"
|
|
380
|
+
style="font-weight:700;font-size:18px;float:left;margin:0"
|
|
381
|
+
>
|
|
382
|
+
附件查看
|
|
383
|
+
</p>
|
|
265
384
|
|
|
266
|
-
<div style=
|
|
267
|
-
<el-scrollbar style=
|
|
268
|
-
<HtUploadFiles :disabled="true"
|
|
269
|
-
v-model="state.files"></HtUploadFiles>
|
|
385
|
+
<div style="overflow:hidden;height:calc(30vh)">
|
|
386
|
+
<el-scrollbar style="height: calc(100% + 17px)">
|
|
387
|
+
<HtUploadFiles :disabled="true" v-model="state.files"></HtUploadFiles>
|
|
270
388
|
</el-scrollbar>
|
|
271
389
|
</div>
|
|
272
390
|
</el-dialog>
|
|
273
391
|
</div>
|
|
274
392
|
</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
|
|
393
|
+
<script lang="ts">
|
|
394
|
+
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
|
395
|
+
import { Column, PageInfoType } from '@/packages/type';
|
|
396
|
+
import PageInfo from '@/packages/PageInfo/index.vue';
|
|
397
|
+
import HtUploadFiles from '@/packages/HtUploadFiles/index.vue';
|
|
398
|
+
import HtShowBaseData from '@/packages/HtShowBaseData';
|
|
399
|
+
import HtOrgInfo from '@/packages/HtOrgInfo';
|
|
282
400
|
interface State {
|
|
283
401
|
pageInfo: PageInfoType;
|
|
284
402
|
loading: boolean;
|
|
@@ -300,7 +418,7 @@ interface State {
|
|
|
300
418
|
files?: string;
|
|
301
419
|
}
|
|
302
420
|
@Component({
|
|
303
|
-
name:
|
|
421
|
+
name: 'HtTable',
|
|
304
422
|
components: {
|
|
305
423
|
PageInfo,
|
|
306
424
|
HtUploadFiles,
|
|
@@ -330,14 +448,14 @@ export default class HtTable extends Vue {
|
|
|
330
448
|
@Prop() rowKey?: string;
|
|
331
449
|
@Prop() stripe?: boolean;
|
|
332
450
|
@Prop() border?: boolean;
|
|
333
|
-
@Prop() size?:
|
|
451
|
+
@Prop() size?: 'medium' | 'small' | 'mini';
|
|
334
452
|
@Prop() fit?: boolean;
|
|
335
453
|
@Prop() showHeader?: boolean;
|
|
336
454
|
@Prop() rowClassName?: any;
|
|
337
455
|
/** 是否启用复选框 */
|
|
338
456
|
@Prop() checked!: boolean;
|
|
339
457
|
/** 设置的禁用字段值--与check同步 */
|
|
340
|
-
@Prop({ default:
|
|
458
|
+
@Prop({ default: 'selectable' }) selectKey?: string;
|
|
341
459
|
/** 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 */
|
|
342
460
|
@Prop() selectable?: any;
|
|
343
461
|
@Prop() currentRowKey?: string | number;
|
|
@@ -390,7 +508,7 @@ export default class HtTable extends Vue {
|
|
|
390
508
|
this.state.visibleFilter = false;
|
|
391
509
|
if (this.uuId) {
|
|
392
510
|
window.localStorage.setItem(
|
|
393
|
-
|
|
511
|
+
'table_' + this.uuId,
|
|
394
512
|
JSON.stringify(this.columns || [])
|
|
395
513
|
);
|
|
396
514
|
}
|
|
@@ -420,7 +538,7 @@ export default class HtTable extends Vue {
|
|
|
420
538
|
this.getShowKeys(this.state.allColumns);
|
|
421
539
|
}
|
|
422
540
|
/** 展示附件信息 */
|
|
423
|
-
showFiles(val =
|
|
541
|
+
showFiles(val = '') {
|
|
424
542
|
this.state.files = val;
|
|
425
543
|
this.state.visibleFile = true;
|
|
426
544
|
}
|
|
@@ -459,7 +577,7 @@ export default class HtTable extends Vue {
|
|
|
459
577
|
}
|
|
460
578
|
/** 节点是否被插入 */
|
|
461
579
|
allowDrop(draggingNode: any, dropNode: any, type: string) {
|
|
462
|
-
return type !==
|
|
580
|
+
return type !== 'inner';
|
|
463
581
|
}
|
|
464
582
|
/** 节点是否允许拖动 */
|
|
465
583
|
allowDrag(draggingNode: any) {
|
|
@@ -468,10 +586,10 @@ export default class HtTable extends Vue {
|
|
|
468
586
|
/** 处理table里面根据字段获取对应的值 */
|
|
469
587
|
getPropByPath(obj: any, path: string, strict = true) {
|
|
470
588
|
let tempObj = obj;
|
|
471
|
-
path = path.replace(/\[(\w+)\]/g,
|
|
472
|
-
path = path.replace(/^\./,
|
|
589
|
+
path = path.replace(/\[(\w+)\]/g, '.$1');
|
|
590
|
+
path = path.replace(/^\./, '');
|
|
473
591
|
|
|
474
|
-
const keyArr = path.split(
|
|
592
|
+
const keyArr = path.split('.');
|
|
475
593
|
let i = 0;
|
|
476
594
|
for (let len = keyArr.length; i < len - 1; ++i) {
|
|
477
595
|
if (!tempObj && !strict) break;
|
|
@@ -524,7 +642,7 @@ export default class HtTable extends Vue {
|
|
|
524
642
|
|
|
525
643
|
if (this.uuId) {
|
|
526
644
|
window.localStorage.setItem(
|
|
527
|
-
|
|
645
|
+
'table_' + this.uuId,
|
|
528
646
|
JSON.stringify(allColumns)
|
|
529
647
|
);
|
|
530
648
|
}
|
|
@@ -537,7 +655,7 @@ export default class HtTable extends Vue {
|
|
|
537
655
|
});
|
|
538
656
|
|
|
539
657
|
/** 自定义列回调 */
|
|
540
|
-
this.$emit(
|
|
658
|
+
this.$emit('customColumn', allColumns);
|
|
541
659
|
}
|
|
542
660
|
|
|
543
661
|
/** 获取显示出来的table头信息 */
|
|
@@ -550,7 +668,7 @@ export default class HtTable extends Vue {
|
|
|
550
668
|
/** 缓存起来下次使用 --todo只做了显示没有做排序缓存 */
|
|
551
669
|
if (this.uuId) {
|
|
552
670
|
window.localStorage.setItem(
|
|
553
|
-
|
|
671
|
+
'table_' + this.uuId,
|
|
554
672
|
JSON.stringify(showColumnKeys)
|
|
555
673
|
);
|
|
556
674
|
}
|
|
@@ -560,7 +678,7 @@ export default class HtTable extends Vue {
|
|
|
560
678
|
}
|
|
561
679
|
|
|
562
680
|
/** 监听 */
|
|
563
|
-
@Watch(
|
|
681
|
+
@Watch('pageInfo')
|
|
564
682
|
setPageInfo(val?: PageInfoType) {
|
|
565
683
|
if (val) {
|
|
566
684
|
const pageInfo: PageInfoType = val;
|
|
@@ -577,7 +695,7 @@ export default class HtTable extends Vue {
|
|
|
577
695
|
|
|
578
696
|
return allColumns.filter((item) => !item.hide);
|
|
579
697
|
}
|
|
580
|
-
@Watch(
|
|
698
|
+
@Watch('columns', { immediate: true })
|
|
581
699
|
setColumns(columns?: Column[]) {
|
|
582
700
|
if (!columns) {
|
|
583
701
|
return;
|
|
@@ -589,7 +707,7 @@ export default class HtTable extends Vue {
|
|
|
589
707
|
//---showColumnKeys 要改变
|
|
590
708
|
//---排列顺序要改变 todo
|
|
591
709
|
const allColumns: string | null = window.localStorage.getItem(
|
|
592
|
-
|
|
710
|
+
'table_' + this.uuId
|
|
593
711
|
);
|
|
594
712
|
if (allColumns) {
|
|
595
713
|
this.state.allColumns = JSON.parse(allColumns);
|
|
@@ -614,4 +732,4 @@ export default class HtTable extends Vue {
|
|
|
614
732
|
}
|
|
615
733
|
}
|
|
616
734
|
</script>
|
|
617
|
-
<style lang=
|
|
735
|
+
<style lang="scss" scoped></style>
|