158 lines
3.3 KiB
Vue
158 lines
3.3 KiB
Vue
<template>
|
|
<div class="content-section">
|
|
<div class="invoice-container">
|
|
<div class="add-card" @click="handleAddInvoice">
|
|
<div class="add-text">添加</div>
|
|
</div>
|
|
<div class="invoice-list">
|
|
<div
|
|
v-for="invoice in invoiceList"
|
|
:key="invoice.id"
|
|
class="invoice-card"
|
|
>
|
|
<div class="invoice-icon">
|
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
|
|
<path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="invoice-info">
|
|
<div class="invoice-name">{{ invoice.name }}</div>
|
|
<div class="invoice-status">{{ invoice.status }}</div>
|
|
</div>
|
|
<div class="invoice-action" @click="handleDeleteInvoice(invoice)">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
|
|
defineProps({
|
|
invoiceList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['add-invoice', 'delete-invoice'])
|
|
|
|
// 添加开票
|
|
function handleAddInvoice() {
|
|
router.push('/invoice-header/add')
|
|
}
|
|
|
|
// 删除开票
|
|
function handleDeleteInvoice(invoice) {
|
|
$message.info('删除开票功能开发中')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
min-height: calc(100vh - 40px);
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.invoice-container {
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.add-card {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 24px;
|
|
width: 80px;
|
|
height: 32px;
|
|
background: #A30113;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.add-card:hover {
|
|
background: #880C22;
|
|
}
|
|
|
|
.add-text {
|
|
color: white;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.invoice-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.invoice-card {
|
|
background: #F5F7FA;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.invoice-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
|
|
border-color: #A30113;
|
|
}
|
|
|
|
.invoice-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.invoice-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.invoice-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.invoice-status {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
|
|
.invoice-action {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.invoice-action:hover {
|
|
background: rgba(163, 1, 19, 0.1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.invoice-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|