process_sheet/vue/src/views/template/List.vue

<template>
  <div class="page-card">
    <div class="toolbar">
      <span>模板由管理后台上传识版。本页列出官方模板和本厂模板，点套打即可按标准底图填入工单/产品数据。</span>
    </div>
    <div class="tpl-grid" v-loading="loading">
      <el-card class="tpl-card" shadow="hover" v-for="row in rows" :key="row.id">
        <div class="cover" :style="coverBox(row)" :class="{ clickable: !!coverOf(row) }" @click="openPreview(row)">
          <img v-if="coverOf(row)" class="cover-img" :src="coverOf(row)" :alt="row.name" />
          <div v-else class="cover-empty">暂无底图</div>
          <div v-if="coverOf(row)" class="cells">
            <div
              v-for="cell in cellsOf(row)"
              :key="cell.id"
              class="cell"
              :style="cellStyle(cell)"
              :title="cellLabel(cell)"
            />
          </div>
          <span v-if="coverOf(row)" class="zoom-tip">点击放大</span>
        </div>
        <h3 :title="row.name">{{ row.name }}</h3>
        <p class="meta">{{ sourceText(row) }} · {{ paperText(row) }} · {{ cellsOf(row).length }} 格</p>
        <p v-if="row.market && row.market.on_sale" class="listed">
          商城在售 · 单次 {{ row.market.price_single }} / 买断 {{ row.market.price_buyout }}
        </p>
        <el-button v-if="hasPerms('print.do')" size="small" type="success" @click="openPrint({ templateId: row.id })">套打</el-button>
        <el-button
          v-if="store.isOwner && row.can_publish"
          size="small"
          type="warning"
          plain
          @click="openPublish(row)"
        >{{ row.market && row.market.on_sale ? '改商城价' : '上架商城' }}</el-button>
        <el-button v-if="hasPerms('template.delete') && row.can_delete !== false && Number(row.is_system) !== 1" size="small" type="danger" plain @click="onDel(row)">删除</el-button>
      </el-card>
    </div>
    <el-empty v-if="!loading && !rows.length" description="还没有可用模板。请联系管理员在后台上传标准图和色块图。" />
    <PublishMarketDialog v-model="publishVisible" :template="publishRow" @done="load" />
    <el-dialog
      v-model="previewVisible"
      :title="previewRow ? previewRow.name : '模板预览'"
      width="auto"
      top="4vh"
      append-to-body
      class="tpl-preview-dialog"
      destroy-on-close
    >
      <div v-if="previewRow" class="preview-stage">
        <div class="preview-cover" :style="previewBox(previewRow)">
          <img class="cover-img" :src="coverOf(previewRow)" :alt="previewRow.name" />
          <div class="cells">
            <div
              v-for="cell in cellsOf(previewRow)"
              :key="cell.id"
              class="cell"
              :style="cellStyle(cell)"
              :title="cellLabel(cell)"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { templateDel, templateList } from '@/api/ps'
import { fileUrl } from '@/utils/file'
import { openPrint } from '@/utils/print'
import { useUserStore } from '@/store/modules/user'
import PublishMarketDialog from '@/components/PublishMarketDialog.vue'
import { hasPerms } from '@/utils/auth'
const store = useUserStore()
const rows = ref([])
const loading = ref(false)
const publishVisible = ref(false)
const publishRow = ref(null)
const previewVisible = ref(false)
const previewRow = ref(null)

function openPublish(row) {
  publishRow.value = row
  publishVisible.value = true
}

function pageSize(row) {
  const page = (row && row.schema && row.schema.page) || {}
  const w = Number(page.w) || Number(row.page_w) || 210
  const h = Number(page.h) || Number(row.page_h) || 297
  return { w, h }
}

function coverBox(row) {
  const { w, h } = pageSize(row)
  return { paddingTop: ((h / w) * 100) + '%' }
}

function previewBox(row) {
  const { w, h } = pageSize(row)
  return {
    '--pw': String(w),
    '--ph': String(h),
  }
}

function coverOf(row) {
  const schema = (row && row.schema) || {}
  return fileUrl(
    row.cover_url || row.cover || schema.background || schema.file_url || ''
  )
}

function openPreview(row) {
  if (!coverOf(row)) {
    return
  }
  previewRow.value = row
  previewVisible.value = true
}

function cellsOf(row) {
  const schema = row.schema && typeof row.schema === 'object' ? row.schema : {}
  const cells = Array.isArray(schema.cells) ? schema.cells : []
  if (cells.length) {
    return cells
  }
  const elements = Array.isArray(schema.elements) ? schema.elements : []
  return elements.filter((el) => el && (el.type === 'field' || el.role === 'fill' || el.key))
}

function cellLabel(cell) {
  return cell.label || cell.key || '空格'
}

function cellStyle(cell) {
  return {
    left: (cell.x || 0) + '%',
    top: (cell.y || 0) + '%',
    width: Math.max(1.2, cell.w || 4) + '%',
    height: Math.max(1.2, cell.h || 3) + '%',
  }
}

function sourceText(row) {
  if (Number(row.is_system) === 1 || Number(row.factory_id) === 0) {
    return '官方'
  }
  if (row.source === 'ai') {
    return '后台识版'
  }
  if (row.source === 'market') {
    return '商城购入'
  }
  return '本厂'
}

function paperText(row) {
  const page = (row.schema && row.schema.page) || {}
  const size = row.paper_size || page.paper_size || ''
  const w = page.w || row.page_w
  const h = page.h || row.page_h
  if (w && h) {
    return (size ? size + ' ' : '') + w + '×' + h + 'mm'
  }
  return size || '未标纸张'
}

async function onDel(row) {
  await ElMessageBox.confirm('删除后不可恢复，确定删除模板「' + row.name + '」？', '删除模板')
  await templateDel(row.id)
  ElMessage.success('已删除')
  load()
}

async function load() {
  loading.value = true
  try {
    const data = await templateList({ limit: 100 })
    const list = (data && (data.rows || data.data)) || []
    rows.value = Array.isArray(list) ? list : []
  } catch (err) {
    rows.value = []
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<style scoped>
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.tpl-card :deep(.el-card__body) { padding: 10px; }
.cover {
  position: relative;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f5f8;
}
.cover.clickable { cursor: zoom-in; }
.cover-img,
.cover-empty,
.cells {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cover-img { object-fit: fill; display: block; }
.cover-empty {
  color: #8a97a6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.zoom-tip {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  line-height: 1.6;
  pointer-events: none;
}
.cells { pointer-events: none; }
.cell {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.95);
  background: rgba(64, 158, 255, 0.18);
}
h3 {
  margin: 0 0 4px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta { color: #7a8794; margin: 0 0 6px; font-size: 12px; }
.listed { color: #e6a23c; margin: 0 0 8px; font-size: 12px; }
.preview-stage {
  display: flex;
  justify-content: center;
}
.preview-cover {
  position: relative;
  width: min(86vw, calc(72vh * var(--pw, 148) / var(--ph, 210)));
  aspect-ratio: var(--pw, 148) / var(--ph, 210);
  max-height: 72vh;
  background: #fff;
  overflow: hidden;
}
@media (max-width: 1400px) {
  .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
</style>

<style>
.tpl-preview-dialog.el-dialog {
  margin: 4vh auto;
}
.tpl-preview-dialog .el-dialog__body {
  padding: 8px 16px 16px;
}
</style>