Skip to content

Commit 820cd54

Browse files
LHRUNLHRUN
committed
fix(ui): fixed styling issues related to the QR code export feature
1 parent f7743f7 commit 820cd54

6 files changed

Lines changed: 69 additions & 35 deletions

File tree

cmdb-ui/src/modules/cmdb/components/QRCodeBatchExport.vue renamed to cmdb-ui/src/modules/cmdb/components/QRCodeBatchExport/index.vue

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
<template>
22
<a-modal
33
v-model="visible"
4-
:title="$t('cmdb.ci.qrcodeBatchTitle')"
54
width="800px"
65
:footer="null"
76
:maskClosable="true"
87
>
9-
<p class="qrcode-batch-tip">{{ $t('cmdb.ci.qrcodeBatchTip') }}</p>
8+
<p slot="title">
9+
{{ $t('cmdb.ci.qrcodeBatchTitle') }}
10+
<a-tooltip :title="$t('cmdb.ci.qrcodeBatchTip')">
11+
<a-icon style="color: #999; cursor: pointer;" type="question-circle" />
12+
</a-tooltip>
13+
</p>
1014

1115
<div v-if="qrcodeList.length === 0 && !generating" class="qrcode-batch-empty">
1216
<a-empty :description="$t('cmdb.ci.qrcodeBatchEmpty')" />
1317
</div>
1418

1519
<div v-if="generating" class="qrcode-batch-generating">
1620
<a-spin />
17-
<span>正在生成 {{ generatedCount }} / {{ totalCount }} ...</span>
21+
<span>{{ $t('cmdb.ci.qrcodeBatchGenerating', { generatedCount, totalCount }) }}</span>
1822
</div>
1923

2024
<div v-if="qrcodeList.length" class="qrcode-batch-grid" ref="qrcodeGrid">
@@ -93,7 +97,7 @@ export default {
9397
if (canvas) {
9498
try {
9599
await QRCode.toCanvas(canvas, item.url, {
96-
width: 150,
100+
width: 140,
97101
margin: 1,
98102
color: { dark: '#000000', light: '#ffffff' }
99103
})
@@ -135,7 +139,20 @@ export default {
135139
return
136140
}
137141
138-
const content = grid.innerHTML
142+
const printGrid = grid.cloneNode(true)
143+
const sourceCanvases = grid.querySelectorAll('canvas')
144+
const printCanvases = printGrid.querySelectorAll('canvas')
145+
printCanvases.forEach((canvas, index) => {
146+
const sourceCanvas = sourceCanvases[index]
147+
if (!sourceCanvas) return
148+
const img = printWindow.document.createElement('img')
149+
img.src = sourceCanvas.toDataURL('image/png')
150+
img.width = sourceCanvas.width || 140
151+
img.height = sourceCanvas.height || 140
152+
canvas.replaceWith(img)
153+
})
154+
155+
const content = printGrid.innerHTML
139156
printWindow.document.write(`
140157
<html>
141158
<head>
@@ -146,6 +163,7 @@ export default {
146163
.qrcode-batch-item { text-align: center; width: 170px; }
147164
.qrcode-batch-item-label { font-size: 12px; margin: 4px 0 2px; word-break: break-all; }
148165
.qrcode-batch-item-id { font-size: 11px; color: #999; margin: 0; }
166+
.qrcode-batch-item img { display: block; margin: 0 auto; }
149167
@media print {
150168
.qrcode-batch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
151169
.qrcode-batch-item { page-break-inside: avoid; }
@@ -192,7 +210,8 @@ export default {
192210
flex-wrap: wrap;
193211
gap: 16px;
194212
justify-content: center;
195-
padding: 8px 0;
213+
max-height: 50vh;
214+
overflow-y: auto;
196215
}
197216
198217
.qrcode-batch-item {

cmdb-ui/src/modules/cmdb/components/QRCodeButton.vue renamed to cmdb-ui/src/modules/cmdb/components/QRCodeButton/index.vue

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,18 @@ export default {
3939
name: 'QRCodeButton',
4040
props: {
4141
typeId: {
42-
type: [Number, String],
43-
required: true
42+
required: false,
43+
default: null,
44+
validator(value) {
45+
return value === null || typeof value === 'number' || typeof value === 'string'
46+
}
4447
},
4548
ciId: {
46-
type: [Number, String],
47-
required: true
49+
required: false,
50+
default: null,
51+
validator(value) {
52+
return value === null || typeof value === 'number' || typeof value === 'string'
53+
}
4854
}
4955
},
5056
data() {
@@ -53,13 +59,22 @@ export default {
5359
}
5460
},
5561
computed: {
62+
hasValidId() {
63+
return this.typeId !== null && this.typeId !== undefined && this.ciId !== null && this.ciId !== undefined
64+
},
5665
mobileUrl() {
66+
if (!this.hasValidId) {
67+
return ''
68+
}
5769
const origin = window.location.origin
5870
return `${origin}/cmdb/mobile/${this.typeId}/${this.ciId}`
5971
}
6072
},
6173
methods: {
6274
async showQRCode() {
75+
if (!this.hasValidId) {
76+
return
77+
}
6378
this.visible = true
6479
this.$nextTick(() => {
6580
this.generateQRCode()
@@ -83,13 +98,16 @@ export default {
8398
},
8499
downloadQRCode() {
85100
const canvas = this.$refs.qrcodeCanvas
86-
if (!canvas) return
101+
if (!canvas || !this.hasValidId) return
87102
const link = document.createElement('a')
88103
link.download = `cmdb-ci-${this.ciId}-qrcode.png`
89104
link.href = canvas.toDataURL('image/png')
90105
link.click()
91106
},
92107
copyMobileUrl() {
108+
if (!this.hasValidId) {
109+
return
110+
}
93111
this.$copyText(this.mobileUrl)
94112
.then(() => {
95113
this.$message.success(this.$t('copySuccess'))

‎cmdb-ui/src/modules/cmdb/lang/en.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -966,7 +966,8 @@ if __name__ == "__main__":
966966
childRelations: 'Downstream Relations',
967967
recentHistory: 'Recent Changes',
968968
scanToView: 'Scan to View',
969-
printQRCode: 'Print QR Codes'
969+
printQRCode: 'Print QR Codes',
970+
qrcodeBatchGenerating: 'Generating {generatedCount} / {totalCount} ...'
970971
},
971972
serviceTree: {
972973
remove: 'Remove',

‎cmdb-ui/src/modules/cmdb/lang/zh.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -962,7 +962,8 @@ if __name__ == "__main__":
962962
childRelations: '下游关系',
963963
recentHistory: '最近变更',
964964
scanToView: '扫码查看',
965-
printQRCode: '打印二维码'
965+
printQRCode: '打印二维码',
966+
qrcodeBatchGenerating: '正在生成 {generatedCount} / {totalCount} ...'
966967
},
967968
serviceTree: {
968969
remove: '移除',

‎cmdb-ui/src/modules/cmdb/views/ci/instanceList.vue‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,6 @@
5454
<ops-icon type="ops-cmdb-citype" />
5555
{{ $t('cmdb.menu.citypeManage') }}
5656
</a-menu-item>
57-
<a-menu-item
58-
key="qrcodeExportAll"
59-
@click="openBatchQRCodeAll"
60-
>
61-
<a-icon type="qrcode" />
62-
{{ $t('cmdb.ci.qrcodeExportAll') }}
63-
</a-menu-item>
6457
</a-menu>
6558
</a-dropdown>
6659
</a-space>
@@ -179,7 +172,7 @@ import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch
179172
import MetadataDrawer from './modules/MetadataDrawer.vue'
180173
import CMDBGrant from '../../components/cmdbGrant'
181174
import CiRollbackForm from './modules/ciRollbackForm.vue'
182-
import QRCodeBatchExport from '@/modules/cmdb/components/QRCodeBatchExport.vue'
175+
import QRCodeBatchExport from '@/modules/cmdb/components/QRCodeBatchExport/index.vue'
183176
import SearchForm from '@/modules/cmdb/components/searchForm/SearchForm.vue'
184177
import CreateInstanceForm from './modules/CreateInstanceForm'
185178
import CiDetailDrawer from './modules/ciDetailDrawer.vue'
@@ -456,19 +449,20 @@ export default {
456449
})
457450
},
458451
openBatchQRCode() {
459-
const ciList = this.selectedRowKeys.map((ciId) => ({
460-
ciId,
461-
typeId: this.typeId,
462-
label: (this.instanceList.find((i) => (i.ci_id || i._id) === ciId) || {}).name || `CI ${ciId}`
463-
}))
464-
this.$refs.qrcodeBatchExport.open(ciList)
465-
},
466-
openBatchQRCodeAll() {
467-
const ciList = this.instanceList.map((ci) => ({
468-
ciId: ci.ci_id || ci._id,
469-
typeId: ci._type || this.typeId,
470-
label: ci.name || ci.hostname || ci.ip || `CI ${ci.ci_id || ci._id}`
471-
}))
452+
const showAttrName = this.attrList.find((attr) => attr?.id === this.CIType?.show_id)?.name || ''
453+
const uniqueAttrName = this.attrList.find((attr) => attr?.id === this.CIType?.unique_id)?.name || ''
454+
455+
const ciList = this.selectedRowKeys.map((ciId) => {
456+
const item = this.instanceList.find((i) => i._id === ciId) || {}
457+
const label = item?.[showAttrName] || item?.[uniqueAttrName] || `CI ${ciId}`
458+
459+
return {
460+
ciId,
461+
typeId: this.typeId,
462+
label,
463+
}
464+
})
465+
472466
this.$refs.qrcodeBatchExport.open(ciList)
473467
},
474468
batchDownload({ filename, type, checkedKeys, exportQRCode }) {

‎cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ import TriggerTable from '../../operation_history/modules/triggerTable.vue'
226226
import RelatedItsm from './ciDetailRelatedItsm.vue'
227227
import CIRollbackForm from './ciRollbackForm.vue'
228228
import OperateTypeTag from '../../operation_history/components/OperateTypeTag.vue'
229-
import QRCodeButton from '@/modules/cmdb/components/QRCodeButton.vue'
229+
import QRCodeButton from '@/modules/cmdb/components/QRCodeButton/index.vue'
230230
231231
export default {
232232
name: 'CiDetailTab',
@@ -610,6 +610,7 @@ export default {
610610
}
611611
.ant-tabs-extra-content {
612612
line-height: 44px;
613+
margin-right: 24px;
613614
}
614615
.ci-detail-table {
615616
height: 100%;

0 commit comments

Comments
 (0)