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',
+  },
+]