feat: add desc page demo (#328)

* feat: add desc page demo * types: add description types
vbenjs · Feb 11, 2024 · d9cc26f · d9cc26f
1 parent c092900
commit d9cc26f
Show file tree

Hide file tree

Showing 8 changed files with 508 additions and 3 deletions.
diff --git a/apps/admin/src/pages/demo/page/desc/basic/data.tsx b/apps/admin/src/pages/demo/page/desc/basic/data.tsx
@@ -0,0 +1,188 @@
+import { DescItem } from '@vben/components'
+
+export const refundData = {
+ a1: '1000000000',
+ a2: '已取货',
+ a3: '1234123421',
+ a4: '3214321432',
+}
+
+export const personData = {
+ b1: '付小小',
+ b2: '18100000000',
+ b3: '菜鸟仓储',
+ b4: '浙江省杭州市西湖区万塘路18号',
+ b5: '无',
+}
+export const refundSchema: DescItem[] = [
+ {
+ field: 'a1',
+ label: '取货单号',
+ },
+ {
+ field: 'a2',
+ label: '状态',
+ },
+ {
+ field: 'a3',
+ label: '销售单号',
+ },
+ {
+ field: 'a4',
+ label: '子订单',
+ },
+]
+export const personSchema: DescItem[] = [
+ {
+ field: 'b1',
+ label: '用户姓名',
+ },
+ {
+ field: 'b2',
+ label: '联系电话',
+ },
+ {
+ field: 'b3',
+ label: '常用快递',
+ },
+ {
+ field: 'b4',
+ label: '取货地址',
+ },
+ {
+ field: 'b5',
+ label: '备注',
+ },
+]
+
+export const refundTableSchema = [
+ {
+ title: '商品编号',
+ minWidth: 150,
+ field: 't1',
+ slots: {
+ default: 't1_default',
+ },
+ },
+ {
+ title: '商品名称',
+ minWidth: 150,
+ field: 't2',
+ },
+ {
+ title: '商品条码',
+ minWidth: 150,
+ field: 't3',
+ },
+ {
+ title: '单价 ',
+ minWidth: 150,
+ field: 't4',
+ },
+ {
+ title: '数量（件） ',
+ minWidth: 150,
+ field: 't5',
+ },
+ {
+ title: '金额',
+ minWidth: 150,
+ field: 't6',
+ },
+]
+export const refundTimeTableSchema = [
+ {
+ title: '时间',
+ minWidth: 150,
+ field: 't1',
+ },
+ {
+ title: '当前进度',
+ minWidth: 150,
+ field: 't2',
+ },
+ {
+ title: '状态',
+ minWidth: 150,
+ field: 't3',
+ slots: {
+ default: 't3_default',
+ },
+ },
+ {
+ title: '操作员ID',
+ field: 't4',
+ minWidth: 150,
+ },
+ {
+ title: '耗时',
+ field: 't5',
+ minWidth: 150,
+ },
+]
+
+export const refundTableData: any[] = [
+ {
+ t1: 1234561,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 1,
+ t6: 2.0,
+ },
+ {
+ t1: 1234562,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 2,
+ t6: 2.0,
+ },
+ {
+ t1: 1234562,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 2,
+ t6: 2.0,
+ },
+ {
+ t1: 1234562,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 2,
+ t6: 2.0,
+ },
+]
+
+export const refundTimeTableData: any[] = [
+ {
+ t1: '2017-10-01 14:10',
+ t2: '联系客户',
+ t3: '进行中',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员出发',
+ t3: '成功',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员接单',
+ t3: '成功',
+ t4: '系统',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '申请审批通过',
+ t3: '成功',
+ t4: '用户',
+ t5: '1h',
+ },
+]
diff --git a/apps/admin/src/pages/demo/page/desc/basic/index.vue b/apps/admin/src/pages/demo/page/desc/basic/index.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { useTable } from '@vben/vbencomponents'
+import { Description } from '@vben/components'
+
+import {
+ refundSchema,
+ refundData,
+ personSchema,
+ personData,
+ refundTableSchema,
+ refundTimeTableSchema,
+ refundTableData,
+ refundTimeTableData,
+} from './data'
+
+const handleSummary = ({ data }) => {
+ let totalT5 = 0
+ let totalT6 = 0
+ data.forEach((item) => {
+ totalT5 += item.t5
+ totalT6 += item.t6
+ })
+ return [['总计', '', '', '', totalT5, totalT6]]
+}
+
+const [registerRefundTable] = useTable({
+ title: '退货商品',
+ data: refundTableData,
+ columns: refundTableSchema,
+ pagination: false,
+ showFooter: true,
+ footerMethod: handleSummary,
+ align: 'center',
+})
+
+const [registerTimeTable] = useTable({
+ title: '退货进度',
+ columns: refundTimeTableSchema,
+ pagination: false,
+ data: refundTimeTableData,
+ align: 'center',
+})
+</script>
+
+<template>
+ <VbenCard title="基础详情页">
+ <Description
+ size="medium"
+ title="退款申请"
+ :bordered="false"
+ labelPlacement="left"
+ :data="refundData"
+ :schema="refundSchema"
+ />
+ <Description
+ size="medium"
+ title="用户信息"
+ :bordered="false"
+ labelPlacement="left"
+ :data="personData"
+ :schema="personSchema"
+ />
+
+ <VbenTable @register="registerRefundTable">
+ <template #t1_default="{ row }">
+ <VbenButton text tag="a" type="info" size="small">
+ {{ row.t1 }}
+ </VbenButton>
+ </template>
+ </VbenTable>
+ <VbenTable @register="registerTimeTable">
+ <template #t3_default="{ row }">
+ <VbenBadge type="success" dot />
+ <span class="ml-2">{{ row.t3 }}</span>
+ </template>
+ </VbenTable>
+ </VbenCard>
+</template>
diff --git a/apps/admin/src/pages/demo/page/desc/high/data.tsx b/apps/admin/src/pages/demo/page/desc/high/data.tsx
@@ -0,0 +1,61 @@
+export const refundTimeTableSchema = [
+ {
+ title: '时间',
+ minWidth: 150,
+ field: 't1',
+ },
+ {
+ title: '当前进度',
+ minWidth: 150,
+ field: 't2',
+ },
+ {
+ title: '状态',
+ minWidth: 150,
+ field: 't3',
+ slots: {
+ default: 't3_default',
+ },
+ },
+ {
+ title: '操作员ID ',
+ minWidth: 150,
+ field: 't4',
+ },
+ {
+ title: '耗时',
+ minWidth: 150,
+ field: 't5',
+ },
+]
+
+export const refundTimeTableData: any[] = [
+ {
+ t1: '2017-10-01 14:10',
+ t2: '联系客户',
+ t3: '进行中',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员出发',
+ t3: '成功',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员接单',
+ t3: '成功',
+ t4: '系统',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '申请审批通过',
+ t3: '成功',
+ t4: '用户',
+ t5: '1h',
+ },
+]