aiot-app/pages/hr/components/A4Preview.vue

<template>
  <view class="a4-wrap">
    <view class="a4-sheet">
      <view v-if="parsed.type === 'empty'" class="a4-empty">暂无画布正文</view>
      <rich-text v-else-if="parsed.type === 'html'" class="a4-html" :nodes="parsed.html" />
      <view v-else-if="parsed.type === 'text'" class="a4-raw">{{ parsed.text }}</view>
      <view v-else class="a4-body">
        <block v-for="block in parsed.blocks" :key="block.key">
          <view v-if="block.kind === 'title'" class="a4-title">
            <text v-for="(seg, i) in block.segments" :key="i" :class="{ 'a4-var': seg.isVar }">{{ seg.text }}</text>
          </view>
          <view v-else-if="block.kind === 'table'" class="a4-table">
            <view v-for="(row, r) in rowsOf(block)" :key="r" class="a4-tr">
              <view v-for="(cell, c) in row" :key="c" class="a4-td">
                <text v-for="(seg, i) in cell" :key="i" :class="{ 'a4-var': seg.isVar }">{{ seg.text }}</text>
              </view>
            </view>
          </view>
          <view v-else-if="block.kind === 'sign'" class="a4-sign">
            <text v-for="(seg, i) in block.segments" :key="i" :class="{ 'a4-var': seg.isVar }">{{ seg.text }}</text>
          </view>
          <view v-else class="a4-para">
            <text v-for="(seg, i) in block.segments" :key="i" :class="{ 'a4-var': seg.isVar }">{{ seg.text }}</text>
          </view>
        </block>
      </view>
    </view>
    <view class="a4-legend">
      <text class="a4-legend-var">变量</text>
      <text class="a4-legend-tip">绿色标记为待回填的变量，A4 比例展示</text>
    </view>
  </view>
</template>

<script>
import { parseA4Content } from "@/utils/hr/a4-preview";

export default {
  name: "A4Preview",
  props: {
    content: { type: String, default: "" },
  },
  computed: {
    parsed() {
      return parseA4Content(this.content);
    },
  },
  methods: {
    rowsOf(block) {
      return Array.isArray(block.rows) ? block.rows : [];
    },
  },
};
</script>

<style scoped lang="scss">
.a4-wrap {
  margin-top: 6rpx;
}
.a4-sheet {
  width: 100%;
  min-height: 880rpx;
  padding: 44rpx 36rpx;
  box-sizing: border-box;
  border: 1rpx solid #e8e9eb;
  border-radius: 12rpx;
  background: #fff;
  box-shadow: 0 6rpx 22rpx rgba(31, 35, 41, 0.05);
}
.a4-title {
  margin-bottom: 32rpx;
  font-size: 34rpx;
  font-weight: 700;
  text-align: center;
  color: #1f2329;
  line-height: 1.6;
}
.a4-para {
  margin-bottom: 18rpx;
  font-size: 26rpx;
  line-height: 1.9;
  color: #1f2329;
  word-break: break-all;
}
.a4-sign {
  margin-top: 40rpx;
  font-size: 26rpx;
  line-height: 1.9;
  text-align: right;
  color: #1f2329;
}
.a4-var {
  padding: 0 8rpx;
  border-radius: 6rpx;
  background: #f0f8f2;
  color: #157a2c;
  font-size: 24rpx;
}
.a4-table {
  margin-bottom: 20rpx;
  border-top: 1rpx solid #e8e9eb;
  border-left: 1rpx solid #e8e9eb;
}
.a4-tr {
  display: flex;
}
.a4-td {
  flex: 1;
  min-width: 0;
  padding: 14rpx 16rpx;
  border-right: 1rpx solid #e8e9eb;
  border-bottom: 1rpx solid #e8e9eb;
  font-size: 24rpx;
  line-height: 1.7;
  color: #1f2329;
  word-break: break-all;
}
.a4-raw {
  font-size: 24rpx;
  line-height: 1.8;
  color: #1f2329;
  white-space: pre-wrap;
  word-break: break-all;
}
.a4-html {
  font-size: 26rpx;
  line-height: 1.9;
  color: #1f2329;
}
.a4-empty {
  padding-top: 320rpx;
  text-align: center;
  color: #a0a7b0;
  font-size: 26rpx;
}
.a4-legend {
  margin-top: 16rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.a4-legend-var {
  padding: 0 10rpx;
  border-radius: 6rpx;
  background: #f0f8f2;
  color: #157a2c;
  font-size: 22rpx;
}
.a4-legend-tip {
  font-size: 22rpx;
  color: #a0a7b0;
}
</style>