cloud-web-corejs 1.0.250 → 1.0.251

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 (56) hide show
  1. package/package.json +1 -1
  2. package/src/views/bd/setting/formVersion/button.vue +55 -0
  3. package/src/views/bd/setting/formVersion/compareBasicSection.vue +125 -0
  4. package/src/views/bd/setting/formVersion/compareCodeSection.vue +539 -0
  5. package/src/views/bd/setting/formVersion/compareContMixin.scss +65 -0
  6. package/src/views/bd/setting/formVersion/compareContent.vue +63 -0
  7. package/src/views/bd/setting/formVersion/compareDialog.vue +88 -0
  8. package/src/views/bd/setting/formVersion/compareMixin.js +93 -0
  9. package/src/views/bd/setting/formVersion/fieldCompare.vue +54 -0
  10. package/src/views/bd/setting/formVersion/formScriptCompareView.vue +94 -0
  11. package/src/views/bd/setting/formVersion/formTemplateCompareView.vue +74 -0
  12. package/src/views/bd/setting/formVersion/ftHistoryDialog.vue +491 -0
  13. package/src/views/bd/setting/formVersion/link.vue +58 -0
  14. package/src/views/bd/setting/formVersion/preformDialog.vue +87 -0
  15. package/src/views/bd/setting/formVersion/reverButton.vue +82 -0
  16. package/src/views/bd/setting/formVersion/tableDetailDiff.js +99 -0
  17. package/src/views/bd/setting/formVersion/tableModelCompareView.vue +514 -0
  18. package/src/views/bd/setting/formVersion/textDiff.js +102 -0
  19. package/src/views/bd/setting/form_import_log/edit.vue +6 -3
  20. package/src/views/bd/setting/form_import_log/list.vue +5 -0
  21. package/src/views/bd/setting/form_script/edit.vue +196 -83
  22. package/src/views/bd/setting/form_script/edit1.vue +410 -220
  23. package/src/views/bd/setting/form_script/form_list.vue +19 -0
  24. package/src/views/bd/setting/form_script/list.vue +95 -21
  25. package/src/views/bd/setting/form_script/list1.vue +24 -0
  26. package/src/views/bd/setting/form_script/mixins/dialog.js +2 -2
  27. package/src/views/bd/setting/form_script/mixins/edit.js +265 -207
  28. package/src/views/bd/setting/form_script/mixins/edit1.js +259 -201
  29. package/src/views/bd/setting/form_script/mixins/form_list.js +322 -296
  30. package/src/views/bd/setting/form_script/mixins/list.js +163 -95
  31. package/src/views/bd/setting/form_script/mixins/list1.js +244 -155
  32. package/src/views/bd/setting/form_script/mixins/otherAuthDialog.js +1 -1
  33. package/src/views/bd/setting/form_template/batchWfObjConfigDialog.vue +1 -1
  34. package/src/views/bd/setting/form_template/edit.vue +355 -205
  35. package/src/views/bd/setting/form_template/formDesignerDialog.vue +171 -0
  36. package/src/views/bd/setting/form_template/list.vue +49 -74
  37. package/src/views/bd/setting/form_template/mixins/batchWfObjConfigDialog.js +3 -3
  38. package/src/views/bd/setting/form_template/mixins/edit.js +51 -8
  39. package/src/views/bd/setting/form_template/mixins/itemList.js +1 -1
  40. package/src/views/bd/setting/form_template/mixins/list.js +114 -82
  41. package/src/views/bd/setting/form_template/mixins/list2.js +3 -3
  42. package/src/views/bd/setting/form_template/mixins/otherAuthDialog.js +1 -1
  43. package/src/views/bd/setting/form_template/mixins/wf_list.js +3 -7
  44. package/src/views/bd/setting/form_template/wf_list.vue +161 -127
  45. package/src/views/bd/setting/request_setting/list.vue +15 -25
  46. package/src/views/bd/setting/table_model/edit.vue +702 -498
  47. package/src/views/bd/setting/table_model/list.vue +28 -0
  48. package/src/views/bd/setting/table_model/mixins/dialog.js +1 -1
  49. package/src/views/bd/setting/table_model/mixins/edit.js +228 -121
  50. package/src/views/bd/setting/table_model/mixins/list.js +55 -20
  51. package/src/views/bd/setting/table_model/mixins/otherAuthDialog.js +1 -1
  52. package/src/views/bd/setting/table_model/mixins/zdDialog.js +50 -46
  53. package/src/views/bd/setting/utils/index.js +15 -0
  54. package/src/views/user/form/vform/designer.vue +303 -287
  55. package/src/views/user/form/vform/formFieldMapping.js +2 -3
  56. package/src/views/user/form/vform/render.vue +8 -0
@@ -0,0 +1,82 @@
1
+ <template>
2
+ <span style="cursor: unset;margin-right: 10px;">
3
+ <el-button
4
+ type="primary"
5
+ plain
6
+ class="button-sty"
7
+ icon="el-icon-set-up"
8
+ @click="openPreformDialog"
9
+ >
10
+ {{ $t1("回退当前版本") }}
11
+ </el-button>
12
+ <preformDialog
13
+ v-if="showPreformDialog"
14
+ :visiable.sync="showPreformDialog"
15
+ @confirm="confirmPreformDialog"
16
+ ></preformDialog>
17
+ </span>
18
+ </template>
19
+ <script>
20
+ export default {
21
+ name: "reverButton",
22
+ props: {
23
+ hData: Object,
24
+ objType: {
25
+ type: String,
26
+ default: "",
27
+ },
28
+ objCode: {
29
+ type: String,
30
+ default: "",
31
+ },
32
+ },
33
+ components: {
34
+ preformDialog: () => import("./preformDialog.vue"),
35
+ },
36
+ data() {
37
+ return {
38
+ historyDialogVisible: false,
39
+ showPreformDialog: false,
40
+ formData: {
41
+ logContent: "",
42
+ },
43
+ };
44
+ },
45
+ methods: {
46
+ saveDataHandle(preformData) {
47
+ let url = null;
48
+ if (this.objType === "FormTemplate") {
49
+ url = USER_PREFIX + "/formTemplate/update";
50
+ } else if (this.objType === "FormScript") {
51
+ url = USER_PREFIX + "/formScript/update";
52
+ } else if (this.objType === "SzTaMb") {
53
+ url = USER_PREFIX + "/szTaMb/update";
54
+ }
55
+ this.$http({
56
+ // aes: true,
57
+ url: url,
58
+ method: `post`,
59
+ data: {
60
+ ...this.hData,
61
+ rb: 1,
62
+ logContent: preformData.logContent,
63
+ },
64
+ isLoading: true,
65
+ success: (res) => {
66
+ this.$message({
67
+ message: res.content,
68
+ type: "success",
69
+ });
70
+ this.$emit("reverCallback");
71
+ },
72
+ });
73
+ },
74
+ openPreformDialog() {
75
+ this.showPreformDialog = true;
76
+ },
77
+ confirmPreformDialog(preformData) {
78
+ this.saveDataHandle(preformData);
79
+ },
80
+ },
81
+ };
82
+ </script>
@@ -0,0 +1,99 @@
1
+ const DETAIL_COMPARE_FIELDS = [
2
+ "zdEn",
3
+ "taZdMc",
4
+ "zdCh",
5
+ "zdType",
6
+ "zdLength",
7
+ "treeFlag",
8
+ "referenceZd",
9
+ "relationZd",
10
+ "refServiceName",
11
+ "toTaBmZd",
12
+ "zdTypeValues",
13
+ "required",
14
+ "enabled",
15
+ "generateCode",
16
+ "atened",
17
+ "updateIgnore",
18
+ "codeType",
19
+ "orders",
20
+ ];
21
+
22
+ function isNull(val) {
23
+ return val == null || val === "";
24
+ }
25
+
26
+ function isSameValue(val1, val2) {
27
+ if (isNull(val1) && isNull(val2)) return true;
28
+ return val1 === val2;
29
+ }
30
+
31
+ export function getDetailRowKey(row, index = 0) {
32
+ if (!row) return `idx_${index}`;
33
+ return row.zdEn || row.taZdMc || `idx_${row.orders ?? index}`;
34
+ }
35
+
36
+ export function sortDetailRowsByZdEn(rows = []) {
37
+ return [...rows];
38
+ }
39
+
40
+ export function buildRowDiffMaps(preCellDiff = {}, curCellDiff = {}) {
41
+ const preRowDiff = {};
42
+ const curRowDiff = {};
43
+
44
+ Object.keys(preCellDiff).forEach((key) => {
45
+ const rowKey = key.split("__")[0];
46
+ preRowDiff[rowKey] = true;
47
+ });
48
+
49
+ Object.keys(curCellDiff).forEach((key) => {
50
+ const rowKey = key.split("__")[0];
51
+ curRowDiff[rowKey] = true;
52
+ });
53
+
54
+ return { preRowDiff, curRowDiff };
55
+ }
56
+
57
+ export function buildDetailDiffMaps(preRows = [], curRows = []) {
58
+ const preMap = new Map();
59
+ const curMap = new Map();
60
+
61
+ preRows.forEach((row, index) => {
62
+ preMap.set(getDetailRowKey(row, index), row);
63
+ });
64
+ curRows.forEach((row, index) => {
65
+ curMap.set(getDetailRowKey(row, index), row);
66
+ });
67
+
68
+ const preCellDiff = {};
69
+ const curCellDiff = {};
70
+ const allKeys = new Set([...preMap.keys(), ...curMap.keys()]);
71
+
72
+ allKeys.forEach((key) => {
73
+ const preRow = preMap.get(key);
74
+ const curRow = curMap.get(key);
75
+
76
+ if (!preRow) {
77
+ DETAIL_COMPARE_FIELDS.forEach((field) => {
78
+ curCellDiff[`${key}__${field}`] = "add";
79
+ });
80
+ return;
81
+ }
82
+
83
+ if (!curRow) {
84
+ DETAIL_COMPARE_FIELDS.forEach((field) => {
85
+ preCellDiff[`${key}__${field}`] = "delete";
86
+ });
87
+ return;
88
+ }
89
+
90
+ DETAIL_COMPARE_FIELDS.forEach((field) => {
91
+ if (!isSameValue(preRow[field], curRow[field])) {
92
+ preCellDiff[`${key}__${field}`] = "change";
93
+ curCellDiff[`${key}__${field}`] = "change";
94
+ }
95
+ });
96
+ });
97
+
98
+ return { preCellDiff, curCellDiff };
99
+ }
@@ -0,0 +1,514 @@
1
+ <template>
2
+ <div class="compare-view-wrap">
3
+ <compareBasicSection
4
+ sectionTitle="基础信息"
5
+ headerLabel="查看数据表定义模板"
6
+ :objType="objType"
7
+ :objCode="objCode"
8
+ :compareHData1="compareHData1"
9
+ :compareHData2="compareHData2"
10
+ :preVersion="preVersion"
11
+ :curVersion="curVersion"
12
+ :fields="basicFields"
13
+ @reverCallback="$emit('reverCallback')"
14
+ />
15
+ <div
16
+ class="compare-cont compare-detail-section"
17
+ :class="{ 'is-section-fullscreen': detailFullscreen }"
18
+ >
19
+ <div class="compare-detail-header">
20
+ <div class="compare-header-main">
21
+ <div class="title">
22
+ <b>{{ $t1("明细") }}</b>
23
+ </div>
24
+ </div>
25
+ <el-tooltip
26
+ class="item"
27
+ effect="dark"
28
+ :content="$t1('全屏')"
29
+ placement="top"
30
+ >
31
+ <el-link
32
+ class="is-full"
33
+ :underline="false"
34
+ @click="detailFullscreen = !detailFullscreen"
35
+ >
36
+ <i class="iconfont icon-quanping"></i>
37
+ </el-link>
38
+ </el-tooltip>
39
+ </div>
40
+ <div class="compare-detail-grid">
41
+ <span class="version-blue">{{ $t1("版本号") }}:{{ preVersion }}</span>
42
+ <div
43
+ class="grid-height"
44
+ :class="{ 'is-fullscreen-grid': detailFullscreen }"
45
+ >
46
+ <vxe-grid ref="table-pre" v-bind="preGridOption" />
47
+ </div>
48
+ </div>
49
+ <div class="compare-detail-grid">
50
+ <span class="version-green">{{ $t1("版本号") }}:{{ curVersion }}</span>
51
+ <div
52
+ class="grid-height"
53
+ :class="{ 'is-fullscreen-grid': detailFullscreen }"
54
+ >
55
+ <vxe-grid ref="table-cur" v-bind="curGridOption" />
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </template>
61
+
62
+ <script>
63
+ import compareMixin from "./compareMixin";
64
+ import compareBasicSection from "./compareBasicSection.vue";
65
+ import {
66
+ buildDetailDiffMaps,
67
+ buildRowDiffMaps,
68
+ getDetailRowKey,
69
+ sortDetailRowsByZdEn,
70
+ } from "./tableDetailDiff";
71
+
72
+ const zdTypeMap = {
73
+ Boolean: "布尔",
74
+ Integer: "整数",
75
+ Long: "长整数",
76
+ Decimal: "精度小数",
77
+ Money: "金额",
78
+ Text: "文本",
79
+ TextArea: "长文本",
80
+ DateTime: "日期时间",
81
+ Reference: "关联表(文本)",
82
+ ReferenceLong: "关联表(长整型)",
83
+ };
84
+
85
+ const treeFlagMap = {
86
+ name: "名称",
87
+ wbs: "WBS码",
88
+ parent: "上级ID",
89
+ treePath: "树ID路径",
90
+ treePathName: "树名称路径",
91
+ hasChild: "是否有下级",
92
+ grade: "层级",
93
+ };
94
+
95
+ export default {
96
+ name: "tableModelCompareView",
97
+ mixins: [compareMixin],
98
+ components: {
99
+ compareBasicSection,
100
+ },
101
+ data() {
102
+ return {
103
+ detailFullscreen: false,
104
+ preRows: [],
105
+ curRows: [],
106
+ preGridOption: {},
107
+ curGridOption: {},
108
+ detailDiff: {
109
+ preCellDiff: {},
110
+ curCellDiff: {},
111
+ },
112
+ detailRowDiff: {
113
+ pre: {},
114
+ cur: {},
115
+ },
116
+ };
117
+ },
118
+ computed: {
119
+ basicFields() {
120
+ return [
121
+ { key: "taBm", label: "数据库表名" },
122
+ { key: "taEn", label: "实体名称" },
123
+ { key: "taCh", label: "表描述" },
124
+ {
125
+ key: "taType",
126
+ label: "是否明细",
127
+ formatter: (val) => this.formatBool(val),
128
+ },
129
+ { key: "sszstEn", label: "所属主实体" },
130
+ {
131
+ key: "taRule",
132
+ label: "是否树结构",
133
+ formatter: (val) => this.formatBool(val),
134
+ },
135
+ {
136
+ key: "dataRange",
137
+ label: "数据范围",
138
+ formatter: (val) => this.formatDataRange(val),
139
+ },
140
+ { key: "menuKindName", label: "表单分类" },
141
+ {
142
+ key: "szTaMbTagDTOs",
143
+ label: "项目标签",
144
+ formatter: (val) => this.formatTags(val),
145
+ },
146
+ {
147
+ key: "enabled",
148
+ label: "是否启用",
149
+ formatter: (val) => this.formatBool(val, "启用", "禁用"),
150
+ },
151
+ { key: "serviceName", label: "服务名" },
152
+ { key: "sid", label: "唯一标识" },
153
+ ...this.auditFields(),
154
+ ];
155
+ },
156
+ },
157
+ mounted() {
158
+ this.initDetailGrids();
159
+ },
160
+ watch: {
161
+ detailFullscreen() {
162
+ this.updateDetailGridLayout();
163
+ },
164
+ },
165
+ methods: {
166
+ formatYesNo(cellValue) {
167
+ return this.$t1(cellValue ? "是" : "否");
168
+ },
169
+ formatZdType(cellValue) {
170
+ return this.$t1(zdTypeMap[cellValue] || cellValue || "");
171
+ },
172
+ formatTreeFlag(cellValue) {
173
+ return this.$t1(treeFlagMap[cellValue] || cellValue || "");
174
+ },
175
+ getDetailColumns(side) {
176
+ const rowDiffMap = this.detailRowDiff[side] || {};
177
+ return [
178
+ {
179
+ title: "",
180
+ field: "_diffFlag",
181
+ width: 32,
182
+ fixed: "left",
183
+ align: "center",
184
+ slots: {
185
+ default: ({ row, rowIndex }) => {
186
+ const rowKey = getDetailRowKey(row, rowIndex);
187
+ if (!rowDiffMap[rowKey]) return [null];
188
+ return [
189
+ <el-tooltip
190
+ enterable={false}
191
+ effect="dark"
192
+ content={this.$t1("存在差异项")}
193
+ placement="top"
194
+ >
195
+ <i class="el-icon-warning compare-row-diff-icon" />
196
+ </el-tooltip>,
197
+ ];
198
+ },
199
+ },
200
+ },
201
+ {
202
+ title: this.$t1("实体字段名称"),
203
+ field: "zdEn",
204
+ width: 150,
205
+ fixed: "left",
206
+ },
207
+ {
208
+ title: this.$t1("数据库表字段名"),
209
+ field: "taZdMc",
210
+ width: 150,
211
+ fixed: "left",
212
+ },
213
+ {
214
+ title: this.$t1("字段描述"),
215
+ field: "zdCh",
216
+ width: 150,
217
+ },
218
+ {
219
+ title: this.$t1("字段类型"),
220
+ field: "zdType",
221
+ width: 150,
222
+ formatter: ({ cellValue }) => this.formatZdType(cellValue),
223
+ },
224
+ {
225
+ title: this.$t1("字段长度"),
226
+ field: "zdLength",
227
+ width: 150,
228
+ },
229
+ {
230
+ title: this.$t1("树标识"),
231
+ field: "treeFlag",
232
+ width: 150,
233
+ formatter: ({ cellValue }) => this.formatTreeFlag(cellValue),
234
+ },
235
+ {
236
+ title: this.$t1("关联字段"),
237
+ field: "referenceZd",
238
+ width: 250,
239
+ },
240
+ {
241
+ title: this.$t1("来源关联字段"),
242
+ field: "relationZd",
243
+ width: 250,
244
+ },
245
+ {
246
+ title: this.$t1("关联表对应服务名"),
247
+ field: "refServiceName",
248
+ width: 200,
249
+ },
250
+ {
251
+ title: this.$t1("数据值对应表的字段"),
252
+ field: "toTaBmZd",
253
+ width: 250,
254
+ },
255
+ {
256
+ title: this.$t1("字段类型对应的默认值"),
257
+ field: "zdTypeValues",
258
+ width: 200,
259
+ },
260
+ {
261
+ title: this.$t1("是否必填项"),
262
+ field: "required",
263
+ width: 140,
264
+ formatter: ({ cellValue }) => this.formatYesNo(cellValue),
265
+ },
266
+ {
267
+ title: this.$t1("是否启用"),
268
+ field: "enabled",
269
+ width: 120,
270
+ formatter: ({ cellValue }) => this.formatYesNo(cellValue),
271
+ },
272
+ {
273
+ title: this.$t1("是否自动生成编码"),
274
+ field: "generateCode",
275
+ width: 180,
276
+ formatter: ({ cellValue }) => this.formatYesNo(cellValue),
277
+ },
278
+ {
279
+ title: this.$t1("数据库字段加密"),
280
+ field: "atened",
281
+ width: 180,
282
+ formatter: ({ cellValue }) => this.formatYesNo(cellValue),
283
+ },
284
+ {
285
+ title: this.$t1("是否更新忽略字段"),
286
+ field: "updateIgnore",
287
+ width: 180,
288
+ formatter: ({ cellValue }) => this.formatYesNo(cellValue),
289
+ },
290
+ {
291
+ title: this.$t1("编码类型"),
292
+ field: "codeType",
293
+ width: 150,
294
+ },
295
+ {
296
+ title: this.$t1("序号"),
297
+ field: "orders",
298
+ width: 150,
299
+ },
300
+ ];
301
+ },
302
+ getGridSizeConfig() {
303
+ if (this.detailFullscreen) {
304
+ return {
305
+ height: "100%",
306
+ maxHeight: null,
307
+ };
308
+ }
309
+ return {
310
+ height: "auto",
311
+ maxHeight: 320,
312
+ };
313
+ },
314
+ initDetailGrids() {
315
+ const rawPreRows = this.compareHData1?.szTaZdMbDTOs || [];
316
+ const rawCurRows = this.compareHData2?.szTaZdMbDTOs || [];
317
+ this.detailDiff = buildDetailDiffMaps(rawPreRows, rawCurRows);
318
+ const { preRowDiff, curRowDiff } = buildRowDiffMaps(
319
+ this.detailDiff.preCellDiff,
320
+ this.detailDiff.curCellDiff
321
+ );
322
+ this.detailRowDiff = { pre: preRowDiff, cur: curRowDiff };
323
+ this.preRows = sortDetailRowsByZdEn(rawPreRows);
324
+ this.curRows = sortDetailRowsByZdEn(rawCurRows);
325
+
326
+ const baseConfig = {
327
+ border: true,
328
+ resizable: true,
329
+ showOverflow: true,
330
+ scrollX: { enabled: true },
331
+ ...this.getGridSizeConfig(),
332
+ };
333
+ this.preGridOption = {
334
+ ...baseConfig,
335
+ columns: this.getDetailColumns("pre"),
336
+ data: this.preRows,
337
+ cellClassName: (params) => this.getPreCellClassName(params),
338
+ };
339
+ this.curGridOption = {
340
+ ...baseConfig,
341
+ columns: this.getDetailColumns("cur"),
342
+ data: this.curRows,
343
+ cellClassName: (params) => this.getCurCellClassName(params),
344
+ };
345
+ },
346
+ updateDetailGridLayout() {
347
+ const sizeConfig = this.getGridSizeConfig();
348
+ Object.assign(this.preGridOption, sizeConfig);
349
+ Object.assign(this.curGridOption, sizeConfig);
350
+ this.$nextTick(() => {
351
+ this.refreshDetailGrids();
352
+ });
353
+ },
354
+ refreshDetailGrids() {
355
+ [
356
+ { ref: "table-pre", rows: this.preRows },
357
+ { ref: "table-cur", rows: this.curRows },
358
+ ].forEach(({ ref, rows }) => {
359
+ const grid = this.$refs[ref];
360
+ if (!grid) return;
361
+ if (typeof grid.loadData === "function") {
362
+ grid.loadData(rows);
363
+ }
364
+ if (typeof grid.recalculate === "function") {
365
+ grid.recalculate(true);
366
+ }
367
+ });
368
+ },
369
+ getPreCellClassName({ row, column, rowIndex }) {
370
+ return this.getDetailCellClassName("pre", row, column, rowIndex);
371
+ },
372
+ getCurCellClassName({ row, column, rowIndex }) {
373
+ return this.getDetailCellClassName("cur", row, column, rowIndex);
374
+ },
375
+ getDetailCellClassName(side, row, column, rowIndex) {
376
+ const field = column.field;
377
+ if (!field || !row) return "";
378
+ const diffKey = `${getDetailRowKey(row, rowIndex)}__${field}`;
379
+ const diffMap =
380
+ side === "pre"
381
+ ? this.detailDiff.preCellDiff
382
+ : this.detailDiff.curCellDiff;
383
+ const diffType = diffMap[diffKey];
384
+ if (!diffType) return "";
385
+ if (diffType === "add") {
386
+ return "compare-diff-new";
387
+ }
388
+ return "compare-diff-old";
389
+ },
390
+ },
391
+ };
392
+ </script>
393
+
394
+ <style scoped lang="scss">
395
+ @import "./compareContMixin.scss";
396
+
397
+ .compare-detail-section {
398
+ @include compare-cont-shell;
399
+ @include compare-cont-full-link;
400
+ @include compare-version-label;
401
+
402
+ .compare-detail-grid {
403
+ margin-top: 8px;
404
+
405
+ .grid-height {
406
+ height: 320px !important;
407
+ }
408
+
409
+ .version-blue,
410
+ .version-green {
411
+ margin-bottom: 8px;
412
+ }
413
+ }
414
+
415
+ .compare-detail-header {
416
+ position: relative;
417
+ min-height: 28px;
418
+ margin-bottom: 4px;
419
+ padding-right: 24px;
420
+ }
421
+
422
+ .compare-header-main {
423
+ display: flex;
424
+ align-items: center;
425
+ flex-wrap: wrap;
426
+ gap: 0 16px;
427
+ }
428
+
429
+ .title {
430
+ margin-bottom: 0 !important;
431
+ }
432
+
433
+ .compare-diff-legend {
434
+ display: inline-flex;
435
+ align-items: center;
436
+ font-size: 12px;
437
+
438
+ .legend-item {
439
+ display: inline-block;
440
+ margin-right: 12px;
441
+ padding: 2px 8px;
442
+ border-radius: 2px;
443
+
444
+ &.legend-old {
445
+ background: rgba(245, 108, 108, 0.2);
446
+ color: #f56c6c;
447
+ }
448
+
449
+ &.legend-new {
450
+ background: rgba(103, 194, 58, 0.2);
451
+ color: #67c23a;
452
+ }
453
+ }
454
+ }
455
+
456
+ ::v-deep .compare-diff-old {
457
+ background-color: rgba(245, 108, 108, 0.2) !important;
458
+ color: #f56c6c;
459
+ }
460
+
461
+ ::v-deep .compare-diff-new {
462
+ background-color: rgba(103, 194, 58, 0.2) !important;
463
+ color: #67c23a;
464
+ }
465
+
466
+ ::v-deep .compare-row-diff-icon {
467
+ color: #e6a23c;
468
+ font-size: 14px;
469
+ cursor: default;
470
+ }
471
+
472
+ &.is-section-fullscreen {
473
+ position: fixed;
474
+ top: 0;
475
+ right: 0;
476
+ bottom: 0;
477
+ left: 0;
478
+ z-index: 9999;
479
+ display: flex;
480
+ flex-direction: column;
481
+ margin: 0;
482
+ overflow: hidden;
483
+ padding: 12px 16px 16px;
484
+ background: #fff;
485
+
486
+ .compare-detail-header {
487
+ flex-shrink: 0;
488
+ }
489
+
490
+ .compare-detail-grid {
491
+ flex: 1;
492
+ min-height: 0;
493
+ display: flex;
494
+ flex-direction: column;
495
+
496
+ .grid-height.is-fullscreen-grid {
497
+ flex: 1;
498
+ min-height: 0;
499
+ height: auto !important;
500
+ }
501
+ }
502
+ }
503
+ }
504
+
505
+ .compare-detail-grid + .compare-detail-grid {
506
+ margin-top: 16px;
507
+ }
508
+
509
+ .compare-detail-section.is-section-fullscreen {
510
+ .compare-detail-grid + .compare-detail-grid {
511
+ margin-top: 12px;
512
+ }
513
+ }
514
+ </style>