|
|
|
@ -11,12 +11,13 @@ |
|
|
|
<!-- 纸张类型选择 --> |
|
|
|
<div class="paper-type-select"> |
|
|
|
<el-select |
|
|
|
:value="selectedPaper" |
|
|
|
:value="normalizedSelectedPaper" |
|
|
|
@change="handlePaperChange" |
|
|
|
placeholder="选择纸张类型" |
|
|
|
size="small" |
|
|
|
:loading="loading" |
|
|
|
:style="horizontalMode ? 'width: 120px;' : 'width: 100%;'" |
|
|
|
filterable |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="option in paperOptions" |
|
|
|
@ -31,74 +32,6 @@ |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 打印方向选择 --> |
|
|
|
<!-- <div class="orientation-select" :class="{ 'horizontal-inline': horizontalMode }"> |
|
|
|
<el-radio-group |
|
|
|
:value="orientation" |
|
|
|
@change="handleOrientationChange" |
|
|
|
size="small" |
|
|
|
> |
|
|
|
<el-radio label="portrait">纵向</el-radio> |
|
|
|
<el-radio label="landscape">横向</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</div>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 纸张预览 --> |
|
|
|
<div class="paper-preview"> |
|
|
|
<div class="preview-container"> |
|
|
|
<div |
|
|
|
class="preview-paper" |
|
|
|
:style="previewStyle" |
|
|
|
:class="{ landscape: orientation === 'landscape' }" |
|
|
|
> |
|
|
|
<div class="preview-label"> |
|
|
|
{{ currentSize.width }}×{{ currentSize.height }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 当前画布信息 --> |
|
|
|
<div class="canvas-info"> |
|
|
|
<div class="info-item"> |
|
|
|
<span class="label">画布尺寸:</span> |
|
|
|
<span class="value">{{ currentSize.width }} × {{ currentSize.height }}px</span> |
|
|
|
</div> |
|
|
|
<div class="info-item"> |
|
|
|
<span class="label">打印方向:</span> |
|
|
|
<span class="value"> |
|
|
|
{{ orientationText }} |
|
|
|
<i :class="orientationIcon" style="margin-left: 4px;"></i> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div v-if="originalPaperInfo" class="info-item"> |
|
|
|
<span class="label">纸张规格:</span> |
|
|
|
<span class="value">{{ originalPaperInfo }}</span> |
|
|
|
</div> |
|
|
|
<div v-if="currentSize.description" class="info-item description"> |
|
|
|
<span class="label">说明:</span> |
|
|
|
<span class="value">{{ currentSize.description }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 快速尺寸按钮 --> |
|
|
|
<div class="quick-sizes"> |
|
|
|
<div class="quick-title">常用尺寸</div> |
|
|
|
<div class="quick-buttons"> |
|
|
|
<el-button |
|
|
|
v-for="size in quickSizes" |
|
|
|
:key="size.value" |
|
|
|
:type="selectedPaper === size.value ? 'primary' : ''" |
|
|
|
size="mini" |
|
|
|
@click="handlePaperChange(size.value)" |
|
|
|
> |
|
|
|
{{ size.label }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -163,33 +96,18 @@ export default { |
|
|
|
paper: paper |
|
|
|
})) |
|
|
|
}, |
|
|
|
currentSize() { |
|
|
|
// 如果是数字ID，从动态纸张中获取 |
|
|
|
if (typeof this.selectedPaper === 'number') { |
|
|
|
const paper = this.dynamicPapers.find(p => p.id === this.selectedPaper) |
|
|
|
if (paper) { |
|
|
|
return dynamicPaperConfig.calculatePixelSize(paper, 203, this.orientation) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 兼容旧的字符串格式 |
|
|
|
if (typeof this.selectedPaper === 'string') { |
|
|
|
const legacyPaper = dynamicPaperConfig.findPaperByLegacyType(this.selectedPaper) |
|
|
|
if (legacyPaper) { |
|
|
|
return dynamicPaperConfig.calculatePixelSize(legacyPaper, 203, this.orientation) |
|
|
|
} |
|
|
|
// 降级到原有方法 |
|
|
|
return getCanvasSize(this.selectedPaper, this.orientation) |
|
|
|
// 确保选中的纸张ID是正确的类型 |
|
|
|
normalizedSelectedPaper() { |
|
|
|
if (this.selectedPaper === null || this.selectedPaper === undefined) { |
|
|
|
return null |
|
|
|
} |
|
|
|
|
|
|
|
// 如果没有选择纸张，返回默认尺寸 |
|
|
|
if (this.dynamicPapers.length > 0) { |
|
|
|
const defaultPaper = this.dynamicPapers[0] |
|
|
|
return dynamicPaperConfig.calculatePixelSize(defaultPaper, 203, this.orientation) |
|
|
|
// 如果是字符串类型的数字，转换为数字 |
|
|
|
if (typeof this.selectedPaper === 'string' && /^\d+$/.test(this.selectedPaper)) { |
|
|
|
return parseInt(this.selectedPaper, 10) |
|
|
|
} |
|
|
|
|
|
|
|
return { width: 400, height: 300, name: '默认', description: '默认尺寸' } |
|
|
|
return this.selectedPaper |
|
|
|
}, |
|
|
|
|
|
|
|
orientationText() { |
|
|
|
return this.orientation === 'portrait' ? '纵向' : '横向' |
|
|
|
}, |
|
|
|
@ -200,41 +118,10 @@ export default { |
|
|
|
label: paper.name.replace('英寸', '').replace('×', '×') |
|
|
|
})) |
|
|
|
}, |
|
|
|
// 显示原始纸张尺寸信息 |
|
|
|
originalPaperInfo() { |
|
|
|
if (typeof this.selectedPaper === 'number') { |
|
|
|
const paper = this.dynamicPapers.find(p => p.id === this.selectedPaper) |
|
|
|
return paper ? `${paper.name} (${paper.widthMm}×${paper.heightMm}mm)` : '' |
|
|
|
} |
|
|
|
|
|
|
|
// 兼容旧格式 |
|
|
|
const paper = PAPER_SIZES[this.selectedPaper] |
|
|
|
return paper ? `${paper.name} (${paper.width}×${paper.height}px)` : '' |
|
|
|
}, |
|
|
|
// 方向图标 |
|
|
|
orientationIcon() { |
|
|
|
return this.orientation === 'portrait' ? 'el-icon-mobile-phone' : 'el-icon-monitor' |
|
|
|
}, |
|
|
|
// 预览样式 |
|
|
|
previewStyle() { |
|
|
|
const { width, height } = this.currentSize |
|
|
|
const maxWidth = 80 |
|
|
|
const maxHeight = 50 |
|
|
|
|
|
|
|
// 计算缩放比例 |
|
|
|
const scaleX = maxWidth / width |
|
|
|
const scaleY = maxHeight / height |
|
|
|
const scale = Math.min(scaleX, scaleY, 1) |
|
|
|
|
|
|
|
const previewWidth = width * scale |
|
|
|
const previewHeight = height * scale |
|
|
|
|
|
|
|
return { |
|
|
|
width: `${previewWidth}px`, |
|
|
|
height: `${previewHeight}px`, |
|
|
|
backgroundColor: this.orientation === 'landscape' ? '#e3f2fd' : '#f3e5f5' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 加载纸张数据 |
|
|
|
@ -243,14 +130,14 @@ export default { |
|
|
|
this.loading = true |
|
|
|
await dynamicPaperConfig.loadPapers() |
|
|
|
this.dynamicPapers = dynamicPaperConfig.getActivePapers() |
|
|
|
|
|
|
|
|
|
|
|
// 设置默认纸张ID |
|
|
|
if (this.dynamicPapers.length > 0 && !this.defaultPaperId) { |
|
|
|
// 优先选择4×2英寸作为默认纸张 |
|
|
|
const defaultPaper = this.dynamicPapers.find(p => p.name.includes('4×2')) || this.dynamicPapers[0] |
|
|
|
this.defaultPaperId = defaultPaper.id |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log('纸张选择器加载完成:', this.dynamicPapers.length, '个纸张') |
|
|
|
} catch (error) { |
|
|
|
console.error('加载纸张数据失败:', error) |
|
|
|
@ -276,8 +163,9 @@ export default { |
|
|
|
|
|
|
|
// 获取当前选择的纸张对象 |
|
|
|
getCurrentPaper() { |
|
|
|
if (typeof this.selectedPaper === 'number') { |
|
|
|
return this.dynamicPapers.find(p => p.id === this.selectedPaper) |
|
|
|
const paperId = this.normalizedSelectedPaper |
|
|
|
if (typeof paperId === 'number') { |
|
|
|
return this.dynamicPapers.find(p => p.id === paperId) |
|
|
|
} |
|
|
|
return null |
|
|
|
} |
|
|
|
|
