|
|
@@ -0,0 +1,135 @@
|
|
|
+<template>
|
|
|
+ <wide-table-printer
|
|
|
+ :columns="columns"
|
|
|
+ :data="tableData"
|
|
|
+ print-label="销售数据报表"
|
|
|
+ :rows-per-page="30"
|
|
|
+ :default-landscape="true"
|
|
|
+ />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import WideTablePrinter from '@/components/print-wide-table'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'App',
|
|
|
+ components: {
|
|
|
+ WideTablePrinter
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: '序号',
|
|
|
+ prop: 'id',
|
|
|
+ width: 60,
|
|
|
+ align: 'center',
|
|
|
+ // fixed: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '订单编号',
|
|
|
+ prop: 'orderId',
|
|
|
+ width: 120,
|
|
|
+ // fixed: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户名称',
|
|
|
+ prop: 'customer',
|
|
|
+ width: 120,
|
|
|
+ // fixed: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '产品名称',
|
|
|
+ prop: 'product',
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '产品类别',
|
|
|
+ prop: 'category',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '单价',
|
|
|
+ prop: 'price',
|
|
|
+ width: 80,
|
|
|
+ align: 'right',
|
|
|
+ formatter: value => `¥${value.toFixed(2)}`
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '数量',
|
|
|
+ prop: 'quantity',
|
|
|
+ width: 60,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '金额',
|
|
|
+ prop: 'amount',
|
|
|
+ width: 90,
|
|
|
+ align: 'right',
|
|
|
+ formatter: value => `¥${value.toFixed(2)}`
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '销售日期',
|
|
|
+ prop: 'saleDate',
|
|
|
+ width: 100,
|
|
|
+ formatter: value => new Date(value).toLocaleDateString()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '销售人员',
|
|
|
+ prop: 'salesPerson',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '地区',
|
|
|
+ prop: 'region',
|
|
|
+ width: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '付款方式',
|
|
|
+ prop: 'paymentMethod',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '订单状态',
|
|
|
+ prop: 'status',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '备注',
|
|
|
+ prop: 'notes',
|
|
|
+ width: 200
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableData: Array.from({ length: 100 }, (_, i) => ({
|
|
|
+ id: i + 1,
|
|
|
+ orderId: `ORD${10000 + i}`,
|
|
|
+ customer: `客户${i % 10 + 1}`,
|
|
|
+ product: `产品${i % 20 + 1}`,
|
|
|
+ category: ['电子产品', '家居用品', '办公用品', '服装'][i % 4],
|
|
|
+ price: Math.round(Math.random() * 900 + 100),
|
|
|
+ quantity: Math.round(Math.random() * 10 + 1),
|
|
|
+ amount: 0, // 将在created中计算
|
|
|
+ saleDate: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
|
+ salesPerson: ['张三', '李四', '王五', '赵六'][i % 4],
|
|
|
+ region: ['华东', '华北', '华南', '西部'][i % 4],
|
|
|
+ paymentMethod: ['信用卡', '支付宝', '微信', '银行转账'][i % 4],
|
|
|
+ status: ['已完成', '处理中', '已取消', '已发货'][i % 4],
|
|
|
+ notes: i % 5 === 0 ? '特殊订单,需要优先处理' : ''
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.tableData.forEach(item => {
|
|
|
+ item.amount = item.price * item.quantity
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- <style sc>
|
|
|
+#app {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 20px auto;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+</style> -->
|