ocpview-plus 0.0.2 → 1.0.2

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.
@@ -0,0 +1,93 @@
1
+ <template>
2
+ <div>
3
+ <Card
4
+ :padding="0"
5
+ dis-hover
6
+ :bordered="false"
7
+ style="background: #fff; padding: 14px 16px 14px 16px"
8
+ >
9
+ <div ref="toolbar" style="padding-bottom: 14px">
10
+ <QueryBar
11
+ :config="myConfig.queryConfig"
12
+ :dictData="dictData"
13
+ :moduleMethod="moduleMethod"
14
+ @conditionAction="conditionAction"
15
+ @doAction="doAction"
16
+ />
17
+ </div>
18
+ <Card
19
+ class="billquerygrid"
20
+ :padding="0"
21
+ :bordered="false"
22
+ dis-hover
23
+ >
24
+ <Dropdown
25
+ trigger="custom"
26
+ :visible="colsetFlag"
27
+ style="
28
+ position: absolute;
29
+ z-index: 99;
30
+ right: 15px;
31
+ top: 1px;
32
+ padding: 7.5px;
33
+ background-color: #f5f7fa;
34
+ "
35
+ placement="bottom-end"
36
+ :transfer="transferFlag"
37
+ @on-clickoutside="closeColset"
38
+ >
39
+ <Tooltip placement="top">
40
+ <template #content>
41
+ <div>
42
+ <span style="font-size: 12px"> 表头设计 </span>
43
+ </div>
44
+ </template>
45
+ <p style="cursor: pointer" @click.stop="openColSet">
46
+ <Icon
47
+ custom="iconfont icon-custom-colset"
48
+ style="margin-top: 4px"
49
+ size="16"
50
+ color="#515a6e"
51
+ />
52
+ </p>
53
+ </Tooltip>
54
+ <template #list>
55
+ <DropdownMenu>
56
+ <GridColSet
57
+ ref="gridcol"
58
+ :config="myConfig.gridConfig"
59
+ @doAction="doAction"
60
+ />
61
+ </DropdownMenu>
62
+ </template>
63
+ </Dropdown>
64
+ <BillListPanelTable
65
+ v-if="reset"
66
+ ref="grid"
67
+ :config="changeGridConfig"
68
+ :dictData="dictData"
69
+ @dbclick="dbclick"
70
+ />
71
+ </Card>
72
+ </Card>
73
+ </div>
74
+ </template>
75
+ <script>
76
+ import billquerygrid from "../billquerygrid.vue";
77
+ import BillListPanelTable from "./BillListPanelTable.vue";
78
+
79
+ export default {
80
+ name: "BillListPanel",
81
+ extends: billquerygrid,
82
+ components: { BillListPanelTable },
83
+ data() {
84
+ return {};
85
+ },
86
+ computed: {},
87
+ mounted() {
88
+ // console.log("我继承覆写了1111");
89
+ },
90
+ };
91
+ </script>
92
+
93
+ <style lang="scss" scoped></style>
@@ -0,0 +1,373 @@
1
+ <template>
2
+ <div>
3
+ <div ref="head">
4
+ <Row v-if="showCondition">
5
+ <Col span="24">
6
+ <ConditionBox
7
+ ref="condition"
8
+ :config="myConfig"
9
+ @conditionAction="conditionAction"
10
+ :dictData="dictData"
11
+ :isPop="isPop"
12
+ ></ConditionBox>
13
+ </Col>
14
+ </Row>
15
+ </div>
16
+ <template v-if="!myConfig.multiSelectGrid">
17
+ <Card :padding="0" :bordered="false" dis-hover>
18
+ <!-- 表格覆写点开始 -->
19
+ <vxe-grid
20
+ ref="table"
21
+ border="inner"
22
+ :columns="RewriteColumns"
23
+ :data="RewriteData"
24
+ :height="tableHeight"
25
+ :max-height="tableMaxHeight"
26
+ :loading="loading"
27
+ :sort-config="{ remote: true, trigger: 'cell' }"
28
+ @sort-change="RewriteTableOnSortChange"
29
+ @cell-dblclick="RewriteTableCellDBlclick"
30
+ >
31
+ <template #loading>
32
+ <Spin size="large" style="display: inline-block"></Spin>
33
+ </template>
34
+ </vxe-grid>
35
+ <!-- <Table
36
+ ref="table"
37
+ :class="isFlag"
38
+ :row-class-name="myConfig.rowClassName"
39
+ :loading="loading"
40
+ :show-summary="myConfig.showSummary"
41
+ :summary-method="handleSummary"
42
+ :size="myConfig.tableSize"
43
+ :stripe="myConfig.showStripe"
44
+ :border="myConfig.showBorder"
45
+ :height="tableHeight"
46
+ :max-height="tableMaxHeight"
47
+ :show-header="myConfig.showHeader"
48
+ :columns="tableColumns"
49
+ :data="tempData"
50
+ @on-sort-change="sortChagne"
51
+ @on-current-change="onCurrentChange"
52
+ :highlight-row="myConfig.highLightRow"
53
+ @on-row-dblclick="dbclick"
54
+ @on-select="onSelect"
55
+ @on-select-cancel="onSelectCancel"
56
+ @on-selection-change="OnSelectionChange"
57
+ @on-row-click="click"
58
+ @on-column-width-resize="onColumnWidthResize"
59
+ >
60
+ <template
61
+ v-for="config in soltTableColumns"
62
+ v-slot:[config.key]="{ row, index }"
63
+ :key="'show_' + config.key"
64
+ >
65
+ <ShowText
66
+ :label="formatValue(index, config, row)"
67
+ :contentAlign="config.contentAlign"
68
+ :class="config.cellClassName"
69
+ :config="config"
70
+ :rowIndex="index"
71
+ ></ShowText>
72
+ </template>
73
+ </Table> -->
74
+ <!-- 表格覆写点结束 -->
75
+ </Card>
76
+ <div ref="page" name="page">
77
+ <div v-if="myConfig.showPage" style="padding-top: 10px">
78
+ <Card
79
+ :bordered="false"
80
+ :padding="0"
81
+ :dis-hover="true"
82
+ style="border-radius: 0px"
83
+ >
84
+ <Row
85
+ type="flex"
86
+ justify="end"
87
+ style="padding-right: 10px"
88
+ >
89
+ <PageCustom
90
+ v-model="culPage"
91
+ :total="myConfig.pageConfig.total_results"
92
+ :size="myConfig.pageSize"
93
+ :current="myConfig.pageConfig.page_no"
94
+ :page-size="myConfig.pageConfig.page_size"
95
+ :page-size-opts="
96
+ myConfig.pageConfig.pageSizeList
97
+ "
98
+ @on-page-size-change="changePageSize"
99
+ @on-change="changePage"
100
+ :show-total="myConfig.pageShowTotal"
101
+ :show-elevator="myConfig.pageShowElevator"
102
+ :show-sizer="myConfig.pageShowSizer"
103
+ ></PageCustom>
104
+ </Row>
105
+ </Card>
106
+ </div>
107
+ </div>
108
+ </template>
109
+ <template v-else>
110
+ <Row type="flex" justify="center" align="middle">
111
+ <Col :span="gridCol">
112
+ <Card :padding="0" bordered dis-hover>
113
+ <template #title>
114
+ <span v-text="myConfig.gridTitle"></span>
115
+ </template>
116
+ <Table
117
+ ref="table"
118
+ :row-class-name="myConfig.rowClassName"
119
+ :show-summary="myConfig.showSummary"
120
+ :summary-method="handleSummary"
121
+ :loading="loading"
122
+ :size="myConfig.tableSize"
123
+ :stripe="myConfig.showStripe"
124
+ :border="myConfig.showBorder"
125
+ :height="tableHeight"
126
+ :max-height="tableMaxHeight"
127
+ :show-header="myConfig.showHeader"
128
+ :columns="tableColumns"
129
+ :data="tempData"
130
+ @on-sort-change="sortChagne"
131
+ @on-current-change="onCurrentChange"
132
+ :highlight-row="myConfig.highLightRow"
133
+ @on-row-dblclick="dbclick"
134
+ @on-select="onSelect"
135
+ @on-select-cancel="onSelectCancel"
136
+ @on-selection-change="OnSelectionChange"
137
+ @on-row-click="click"
138
+ @on-column-width-resize="onColumnWidthResize"
139
+ >
140
+ <template
141
+ v-for="config in soltTableColumns"
142
+ v-slot:[config.key]="{ row, index }"
143
+ :key="'show_' + config.key"
144
+ >
145
+ <ShowText
146
+ :label="formatValue(index, config, row)"
147
+ :contentAlign="config.contentAlign"
148
+ :class="config.cellClassName"
149
+ :config="config"
150
+ :rowIndex="index"
151
+ ></ShowText>
152
+ </template>
153
+ </Table>
154
+ </Card>
155
+ <div ref="page" name="page">
156
+ <div
157
+ v-if="myConfig.showPage"
158
+ ref="page"
159
+ style="padding-top: 10px"
160
+ >
161
+ <Card
162
+ :bordered="false"
163
+ :padding="0"
164
+ :dis-hover="true"
165
+ style="border-radius: 0px"
166
+ >
167
+ <Row
168
+ type="flex"
169
+ justify="end"
170
+ style="padding-right: 10px"
171
+ :gutter="0"
172
+ >
173
+ <PageCustom
174
+ v-model="culPage"
175
+ :total="
176
+ myConfig.pageConfig.total_results
177
+ "
178
+ :size="myConfig.pageSize"
179
+ :current="myConfig.pageConfig.page_no"
180
+ :page-size="
181
+ myConfig.pageConfig.page_size
182
+ "
183
+ :page-size-opts="
184
+ myConfig.pageConfig.pageSizeList
185
+ "
186
+ @on-page-size-change="changePageSize"
187
+ @on-change="changePage"
188
+ :show-total="myConfig.pageShowTotal"
189
+ :show-elevator="
190
+ myConfig.pageShowElevator
191
+ "
192
+ :show-sizer="myConfig.pageShowSizer"
193
+ ></PageCustom>
194
+ </Row>
195
+ </Card>
196
+ </div>
197
+ </div>
198
+ </Col>
199
+ <Col span="2">
200
+ <Row
201
+ type="flex"
202
+ justify="center"
203
+ align="middle"
204
+ style="padding: 5px"
205
+ >
206
+ <Tooltip content="删除" placement="left">
207
+ <Button
208
+ type="primary"
209
+ size="small"
210
+ icon="ios-arrow-back"
211
+ :disabled="!rightActive"
212
+ @click="moveToLeft"
213
+ ></Button>
214
+ </Tooltip>
215
+ </Row>
216
+ <Row
217
+ type="flex"
218
+ justify="center"
219
+ align="middle"
220
+ style="padding: 5px"
221
+ >
222
+ <Tooltip content="添加" placement="right">
223
+ <Button
224
+ type="primary"
225
+ size="small"
226
+ icon="ios-arrow-forward"
227
+ :disabled="!leftActive"
228
+ @click="moveToRight"
229
+ ></Button>
230
+ </Tooltip>
231
+ </Row>
232
+ </Col>
233
+ <Col :span="multiGridCol" style="padding-bottom: 40px">
234
+ <Card :padding="0" bordered dis-hover>
235
+ <template #title>
236
+ <span v-text="myConfig.multiGridTitle"></span>
237
+ </template>
238
+ <Table
239
+ ref="multiSelectTable"
240
+ :row-class-name="myConfig.rowClassName"
241
+ :size="myConfig.tableSize"
242
+ :stripe="myConfig.showStripe"
243
+ :border="myConfig.showBorder"
244
+ :height="tableHeight"
245
+ :max-height="tableMaxHeight"
246
+ :show-header="myConfig.showHeader"
247
+ :columns="multiTableColumns"
248
+ :data="tempMultiSelectData"
249
+ :highlight-row="myConfig.highLightRow"
250
+ @on-selection-change="OnMultiSelectionChange"
251
+ >
252
+ <template
253
+ v-for="config in multiSoltTableColumns"
254
+ v-slot:[config.key]="{ row, index }"
255
+ :key="'mshow_' + config.key"
256
+ >
257
+ <ShowText
258
+ :label="formatMulValue(index, config, row)"
259
+ :contentAlign="config.contentAlign"
260
+ ></ShowText>
261
+ </template>
262
+ </Table>
263
+ </Card>
264
+ </Col>
265
+ </Row>
266
+ </template>
267
+ </div>
268
+ </template>
269
+ <script>
270
+ import simpleviewgrid from "../simpleviewgrid.vue";
271
+
272
+ export default {
273
+ name: "BillListPanelTable",
274
+ extends: simpleviewgrid,
275
+ data() {
276
+ return {};
277
+ },
278
+ computed: {
279
+ /**
280
+ * 表格列定义清洗
281
+ */
282
+ RewriteColumns() {
283
+ return this.tableColumns.map((item) => {
284
+ const columnsItemType = this.getColumnsItemType(item.key);
285
+ return {
286
+ ...(item.title && {
287
+ title: item.title,
288
+ }),
289
+ ...(item.name && {
290
+ field: item.name,
291
+ }),
292
+ ...(item.width && {
293
+ width: item.width < 60 ? 60 : item.width,
294
+ }),
295
+ ...(item.minWidth && {
296
+ minWidth: item.minWidth < 60 ? 60 : item.minWidth,
297
+ }),
298
+ ...(item.align && {
299
+ align: item.align,
300
+ }),
301
+ ...(item.resizable && {
302
+ resizable: item.resizable,
303
+ }),
304
+ sortable: true,
305
+ ...(columnsItemType && {
306
+ type: columnsItemType,
307
+ sortable: false,
308
+ }),
309
+ // showOverflow: "tooltip",
310
+ formatter: (params) => {
311
+ const { row, cellValue } = params;
312
+ const valueFormat = this.$Method.formatValue(
313
+ cellValue,
314
+ row,
315
+ item
316
+ );
317
+ return valueFormat;
318
+ },
319
+ };
320
+ });
321
+ },
322
+ /**
323
+ * 表格数据
324
+ */
325
+ RewriteData() {
326
+ return this.tempData.map((item) => {
327
+ return {
328
+ ...item,
329
+ };
330
+ });
331
+ },
332
+ },
333
+ methods: {
334
+ /**
335
+ * 【覆写】获取多选数据事件
336
+ */
337
+ getSelection() {
338
+ const selectDataList = this.$refs.table.getCheckboxRecords(true);
339
+ return [...selectDataList];
340
+ },
341
+ /**
342
+ * 表格列 type 类型转义
343
+ */
344
+ getColumnsItemType(key) {
345
+ const columnsItemType = {
346
+ selection: "checkbox",
347
+ index: "seq",
348
+ };
349
+ return this.$utils.get(columnsItemType, key, null);
350
+ },
351
+ /**
352
+ * 表格排序事件
353
+ */
354
+ RewriteTableOnSortChange(params) {
355
+ const { order, field } = params;
356
+ const orderType = order ? order : "normal";
357
+ this.sortChagne({ order: orderType, key: field });
358
+ },
359
+ /**
360
+ * 表格双击事件
361
+ */
362
+ RewriteTableCellDBlclick(params) {
363
+ const { row } = params;
364
+ this.dbclick(row);
365
+ },
366
+ },
367
+ mounted() {
368
+ // console.log("我继承覆写了22222", this.myConfig);
369
+ },
370
+ };
371
+ </script>
372
+
373
+ <style lang="scss" scoped></style>