<!-- 审批模板卡片选择（按 businessType 过滤） -->
|
<template>
|
<div class="approval-template-picker">
|
<p v-if="hint" class="picker-hint">{{ hint }}</p>
|
<div v-loading="loading" class="template-grid">
|
<div
|
v-for="card in cards"
|
:key="card.key || card.id"
|
class="template-card"
|
@click="emit('pick', card)"
|
>
|
<span class="template-card-type" :style="typeStyle(card.approvalType)">
|
{{ card.label }}
|
</span>
|
<span class="template-card-desc">{{ card.summaryPlaceholder }}</span>
|
</div>
|
<el-empty
|
v-if="!loading && !cards.length"
|
:description="emptyText"
|
:image-size="80"
|
class="template-empty"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { approvalTypeStyle } from "../../approve-list/approveListConstants.js";
|
|
defineProps({
|
cards: { type: Array, default: () => [] },
|
loading: { type: Boolean, default: false },
|
hint: { type: String, default: "" },
|
emptyText: { type: String, default: "该类型下暂无可用审批模板" },
|
});
|
|
const emit = defineEmits(["pick"]);
|
|
function typeStyle(approvalType) {
|
return approvalTypeStyle(approvalType);
|
}
|
</script>
|
|
<style scoped>
|
.picker-hint {
|
font-size: 13px;
|
color: var(--el-text-color-secondary);
|
margin: 0 0 16px;
|
}
|
.template-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
gap: 12px;
|
min-height: 120px;
|
}
|
.template-empty {
|
grid-column: 1 / -1;
|
}
|
.template-card {
|
padding: 14px 16px;
|
border: 1px solid var(--el-border-color-lighter);
|
border-radius: var(--radius-md, 8px);
|
cursor: pointer;
|
transition: border-color 0.2s, box-shadow 0.2s;
|
background: var(--el-fill-color-blank);
|
}
|
.template-card:hover {
|
border-color: var(--el-color-primary);
|
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
|
}
|
.template-card-type {
|
display: inline-block;
|
padding: 2px 8px;
|
border-radius: 4px;
|
font-size: 13px;
|
font-weight: 600;
|
margin-bottom: 8px;
|
}
|
.template-card-desc {
|
display: block;
|
font-size: 12px;
|
color: var(--el-text-color-secondary);
|
line-height: 1.5;
|
}
|
</style>
|
