feat(desc-page): add desc page demo

vben
1 parent 0b6110a8
Showing 17 changed files with 573 additions and 44 deletions
CHANGELOG.zh_CN.md
build/config/lessModifyVars.ts
index.html
public/resource/img/loading.svg
src/api/demo/table.ts
src/components/registerGlobComp.ts
src/design/ant/index.less
src/design/color.less
src/router/menus/modules/demo/page.ts
src/router/routes/modules/demo/page.ts
src/views/dashboard/analysis/components/GrowCard.vue
src/views/dashboard/analysis/components/TaskCard.vue
src/views/dashboard/workbench/components/NewsList.vue
src/views/demo/page/desc/basic/data.tsx
src/views/demo/page/desc/basic/index.vue
src/views/demo/page/desc/high/data.tsx
src/views/demo/page/desc/high/index.vue
@@ -7,6 +7,7 @@
 - 新增可编辑行示例
 - 新增个人页
 - 新增表单页
+- 新增详情页
 ### 🎫 Chores
@@ -11,8 +11,10 @@ const modifyVars = {
   'warning-color': '#EFBD47', //   Warning color
   'link-color': primaryColor, //   Link color
   'disabled-color': '#C2C2CC', //  Failure color
-  'heading-color': '#2C3A61', //  Title color
-  'text-color': '#2C3A61', //  Main text color
+  'heading-color': 'rgba(0, 0, 0, 0.85)', //  Title color
+  'text-color': 'rgba(0, 0, 0, 0.85)', //  Main text color
+  // 'heading-color': '#2C3A61', //  Title color
+  // 'text-color': '#2C3A61', //  Main text color
   'text-color-secondary ': '#606266', // Subtext color
   'background-color-base': '#F0F2F5', // background color
   'font-size-base': '14px', //  Main font size
@@ -62,7 +62,7 @@
         display: block;
         margin: 20px auto 0 0;
         font-size: 30px;
-        color: #2c3a61;
+        color: rgba(0, 0, 0, 0.85);
       }
     </style>
   </head>
@@ -27,7 +27,7 @@
           min-width: 100px;
           margin-top: 4px;
           font-size: 13px;
-          color: #2C3A61;
+          color: rgba(0, 0, 0, 0.85);;
           text-align: left;
         }
   </style>
@@ -13,5 +13,8 @@ export function demoListApi(params: DemoParams) {
     url: Api.DEMO_LIST,
     method: 'GET',
     params,
+    headers: {
+      ignoreCancelToken: true,
+    },
   });
 }
@@ -31,6 +31,7 @@ import {
   Steps,
   PageHeader,
   Result,
+  Empty,
 } from 'ant-design-vue';
 import { getApp } from '/@/useApp';
@@ -75,5 +76,6 @@ export function registerGlobComp() {
     .use(Steps)
     .use(PageHeader)
     .use(Result)
+    .use(Empty)
     .use(Tabs);
 }
@@ -7,6 +7,12 @@
   width: 100%;
 }
+.collapse-container__body {
+  > .ant-descriptions {
+    margin-left: 6px;
+  }
+}
+
 // .ant-form-item-label {
 //   text-align: unset;
 // }
@@ -111,7 +111,7 @@
 // =================================
 // Main text color
-@text-color-base: #2c3a61;
+@text-color-base: @text-color;
 // Label color
 @text-color-call-out: #606266;
-/*
- * @description: Do not edit
- * @author: cxiaoting
- * @Date: 2020-11-13 14:00:37
- * @LastEditors: cxiaoting
- * @LastEditTime: 2020-11-13 18:07:11
- */
 import type { MenuModule } from '/@/router/types.d';
 const menu: MenuModule = {
   orderNo: 20,
@@ -37,6 +30,23 @@ const menu: MenuModule = {
         ],
       },
       {
+        path: 'desc',
+        name: '详情页',
+        tag: {
+          content: 'new',
+        },
+        children: [
+          {
+            path: 'basic',
+            name: '基础详情页',
+          },
+          {
+            path: 'high',
+            name: '高级详情页',
+          },
+        ],
+      },
+      {
         path: 'result',
         name: '结果页',
         tag: {
@@ -51,6 +51,34 @@ const page: AppRouteModule = {
       ],
     },
     // =============================form end=============================
+    // =============================desc start=============================
+    {
+      path: '/desc',
+      name: 'DescPage',
+      redirect: '/page-demo/desc/basic',
+      meta: {
+        title: '详情页',
+      },
+      children: [
+        {
+          path: 'basic',
+          name: 'DescBasicPage',
+          component: () => import('/@/views/demo/page/desc/basic/index.vue'),
+          meta: {
+            title: '基础详情页',
+          },
+        },
+        {
+          path: 'high',
+          name: 'DescHighPage',
+          component: () => import('/@/views/demo/page/desc/high/index.vue'),
+          meta: {
+            title: '高级详情页',
+          },
+        },
+      ],
+    },
+    // =============================desc end=============================
     // =============================result start=============================
     {
@@ -81,6 +109,34 @@ const page: AppRouteModule = {
     },
     // =============================result end=============================
+    // =============================account start=============================
+    {
+      path: '/account',
+      name: 'AccountPage',
+      redirect: '/page-demo/account/setting',
+      meta: {
+        title: '个人页',
+      },
+      children: [
+        {
+          path: 'center',
+          name: 'AccountCenterPage',
+          component: () => import('/@/views/demo/page/account/center/index.vue'),
+          meta: {
+            title: '个人中心',
+          },
+        },
+        {
+          path: 'setting',
+          name: 'AccountSettingPage',
+          component: () => import('/@/views/demo/page/account/setting/index.vue'),
+          meta: {
+            title: '个人设置',
+          },
+        },
+      ],
+    },
+    // =============================account end=============================
     // =============================exception start=============================
     {
       path: '/exception',
@@ -153,35 +209,6 @@ const page: AppRouteModule = {
       ],
     },
     // =============================exception end=============================
-
-    // =============================account start=============================
-    {
-      path: '/account',
-      name: 'AccountPage',
-      redirect: '/page-demo/account/setting',
-      meta: {
-        title: '个人页',
-      },
-      children: [
-        {
-          path: 'center',
-          name: 'AccountCenterPage',
-          component: () => import('/@/views/demo/page/account/center/index.vue'),
-          meta: {
-            title: '个人中心',
-          },
-        },
-        {
-          path: 'setting',
-          name: 'AccountSettingPage',
-          component: () => import('/@/views/demo/page/account/setting/index.vue'),
-          meta: {
-            title: '个人设置',
-          },
-        },
-      ],
-    },
-    // =============================account end=============================
   ],
 };
@@ -69,7 +69,7 @@
       font-family: PingFangSC-Regular;
       font-size: 16px;
       letter-spacing: 0;
-      color: #2c3a61;
+      color: @text-color-base;
       opacity: 0.7;
     }
@@ -108,7 +108,7 @@
       font-family: PingFangSC-Medium;
       font-size: 16px;
       line-height: 24px;
-      color: #2c3a61;
+      color: rgba(0, 0, 0, 0.85);
     }
     &__desc {
@@ -89,7 +89,7 @@
         &__title {
           font-size: 14px;
           line-height: 22px;
-          color: #2c3a61;
+          color: rgba(0, 0, 0, 0.85);
         }
       }
     }
+import { DescItem } from '/@/components/Description/index';
+import { BasicColumn } from '/@/components/Table/src/types/table';
+import Button from '/@/components/Button/index.vue';
+
+import { Badge } from 'ant-design-vue';
+
+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: BasicColumn[] = [
+  {
+    title: '商品编号',
+    width: 150,
+    dataIndex: 't1',
+    customRender: ({ record }) => {
+      return (
+        <Button type="link" size="small">
+          {() => record.t1}
+        </Button>
+      );
+    },
+  },
+  {
+    title: '商品名称',
+    width: 150,
+    dataIndex: 't2',
+  },
+  {
+    title: '商品条码',
+    width: 150,
+    dataIndex: 't3',
+  },
+  {
+    title: '单价	',
+    width: 150,
+    dataIndex: 't4',
+  },
+  {
+    title: '数量（件）	',
+    width: 150,
+    dataIndex: 't5',
+  },
+  {
+    title: '金额',
+    width: 150,
+    dataIndex: 't6',
+  },
+];
+export const refundTimeTableSchema: BasicColumn[] = [
+  {
+    title: '时间',
+    width: 150,
+    dataIndex: 't1',
+  },
+  {
+    title: '当前进度',
+    width: 150,
+    dataIndex: 't2',
+  },
+  {
+    title: '状态',
+    width: 150,
+    dataIndex: 't3',
+    customRender: ({ record }) => {
+      return <Badge status="success" text={record.t3} />;
+    },
+  },
+  {
+    title: '操作员ID	',
+    width: 150,
+    dataIndex: 't4',
+  },
+  {
+    title: '耗时',
+    width: 150,
+    dataIndex: 't5',
+  },
+];
+
+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',
+  },
+];
+<template>
+  <div>
+    <a-page-header title="基础详情页" :ghost="false" />
+
+    <div class="m-5 desc-wrap">
+      <Description
+        size="middle"
+        title="退款申请"
+        :bordered="false"
+        :column="3"
+        :data="refundData"
+        :schema="refundSchema"
+      />
+      <a-divider />
+      <Description
+        size="middle"
+        title="用户信息"
+        :bordered="false"
+        :column="3"
+        :data="personData"
+        :schema="personSchema"
+      />
+      <a-divider />
+
+      <BasicTable @register="registerRefundTable" />
+      <a-divider />
+      <BasicTable @register="registerTimeTable" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Description } from '/@/components/Description/index';
+  import { BasicTable, useTable } from '/@/components/Table';
+
+  import {
+    refundSchema,
+    refundData,
+    personSchema,
+    personData,
+    refundTableSchema,
+    refundTimeTableSchema,
+    refundTableData,
+    refundTimeTableData,
+  } from './data';
+  export default defineComponent({
+    components: { Description, BasicTable },
+    setup() {
+      const [registerRefundTable] = useTable({
+        title: '退货商品',
+        dataSource: refundTableData,
+        columns: refundTableSchema,
+        pagination: false,
+        showIndexColumn: false,
+        scroll: { y: 300 },
+        showSummary: true,
+        summaryFunc: handleSummary,
+      });
+
+      const [registerTimeTable] = useTable({
+        title: '退货进度',
+        columns: refundTimeTableSchema,
+        pagination: false,
+        dataSource: refundTimeTableData,
+        showIndexColumn: false,
+        scroll: { y: 300 },
+      });
+
+      function handleSummary(tableData: any[]) {
+        let totalT5 = 0;
+        let totalT6 = 0;
+        tableData.forEach((item) => {
+          totalT5 += item.t5;
+          totalT6 += item.t6;
+        });
+        return [
+          {
+            t1: '总计',
+            t5: totalT5,
+            t6: totalT6,
+          },
+        ];
+      }
+      return {
+        registerRefundTable,
+        registerTimeTable,
+        refundSchema,
+        refundData,
+        personSchema,
+        personData,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .desc-wrap {
+    padding: 16px;
+    background: #fff;
+  }
+</style>
+import { BasicColumn } from '/@/components/Table/src/types/table';
+
+import { Badge } from 'ant-design-vue';
+
+export const refundTimeTableSchema: BasicColumn[] = [
+  {
+    title: '时间',
+    width: 150,
+    dataIndex: 't1',
+  },
+  {
+    title: '当前进度',
+    width: 150,
+    dataIndex: 't2',
+  },
+  {
+    title: '状态',
+    width: 150,
+    dataIndex: 't3',
+    customRender: ({ record }) => {
+      return <Badge status="success" text={record.t3} />;
+    },
+  },
+  {
+    title: '操作员ID	',
+    width: 150,
+    dataIndex: 't4',
+  },
+  {
+    title: '耗时',
+    width: 150,
+    dataIndex: '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',
+  },
+];
+<template>
+  <div>
+    <a-page-header title="单号：234231029431" class="high-desc">
+      <template #extra>
+        <a-button key="3"> 操作一 </a-button>
+        <a-button key="2"> 操作二 </a-button>
+        <a-button key="1" type="primary"> 主操作 </a-button>
+      </template>
+      <template #footer>
+        <a-tabs default-active-key="1">
+          <a-tab-pane key="1" tab="详情" />
+          <a-tab-pane key="2" tab="规则" />
+        </a-tabs>
+      </template>
+      <a-descriptions size="small" :column="2">
+        <a-descriptions-item label="创建人"> 曲丽丽 </a-descriptions-item>
+        <a-descriptions-item label="订购产品"> XX 服务 </a-descriptions-item>
+        <a-descriptions-item label="创建时间"> 2017-01-10 </a-descriptions-item>
+        <a-descriptions-item label="关联单据"> <a>12421</a> </a-descriptions-item>
+        <a-descriptions-item label="生效日期"> 2017-07-07 ~ 2017-08-08 </a-descriptions-item>
+        <a-descriptions-item label="备注"> 请于两个工作日内确认 </a-descriptions-item>
+      </a-descriptions>
+    </a-page-header>
+
+    <div class="m-5 desc-wrap">
+      <a-card title="流程进度" :bordered="false">
+        <a-steps :current="1" progress-dot size="small">
+          <a-step title="创建项目">
+            <template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template>
+          </a-step>
+          <a-step title="部门初审">
+            <template #description> <p>Chad</p> </template>
+          </a-step>
+          <a-step title="财务复核" />
+          <a-step title="完成" />
+        </a-steps>
+      </a-card>
+
+      <a-card title="用户信息" :bordered="false" class="mt-5">
+        <a-descriptions :column="3">
+          <a-descriptions-item label="用户姓名"> 付小小 </a-descriptions-item>
+          <a-descriptions-item label="会员卡号"> XX 32943898021309809423 </a-descriptions-item>
+          <a-descriptions-item label="身份证"> 3321944288191034921 </a-descriptions-item>
+          <a-descriptions-item label="联系方式"> 18112345678 </a-descriptions-item>
+          <a-descriptions-item label="联系地址" :span="2">
+            曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+          </a-descriptions-item>
+        </a-descriptions>
+
+        <a-descriptions title="信息组" :column="3">
+          <a-descriptions-item label="某某数据"> 111 </a-descriptions-item>
+          <a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item>
+          <a-descriptions-item label="某某数据"> 725 </a-descriptions-item>
+          <a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item>
+        </a-descriptions>
+
+        <h4>信息组</h4>
+        <a-card title="多层级信息组">
+          <a-descriptions title="组名称" :column="3">
+            <a-descriptions-item label="负责人"> 林东东 </a-descriptions-item>
+            <a-descriptions-item label="角色码"> 1234567 </a-descriptions-item>
+            <a-descriptions-item label="所属部门"> XX公司 - YY部 </a-descriptions-item>
+            <a-descriptions-item label="过期时间"> 2017-08-08 </a-descriptions-item>
+            <a-descriptions-item label="描述" :span="2">
+              这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+            </a-descriptions-item>
+          </a-descriptions>
+          <a-divider />
+          <a-descriptions title="组名称" :column="1">
+            <a-descriptions-item label="学名">
+              Citrullus lanatus (Thunb.) Matsum. et
+              Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
+            </a-descriptions-item>
+          </a-descriptions>
+          <a-divider />
+          <a-descriptions title="组名称" :column="1">
+            <a-descriptions-item label="负责人"> 付小小 </a-descriptions-item>
+            <a-descriptions-item label="角色码"> 1234568 </a-descriptions-item>
+          </a-descriptions>
+        </a-card>
+      </a-card>
+      <a-card title="用户近半年来电记录" class="my-5">
+        <a-empty />
+      </a-card>
+      <BasicTable @register="registerTimeTable" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Description } from '/@/components/Description/index';
+  import { BasicTable, useTable } from '/@/components/Table';
+
+  import { refundTimeTableSchema, refundTimeTableData } from './data';
+  export default defineComponent({
+    components: { Description, BasicTable },
+    setup() {
+      const [registerTimeTable] = useTable({
+        title: '退货进度',
+        columns: refundTimeTableSchema,
+        pagination: false,
+        dataSource: refundTimeTableData,
+        showIndexColumn: false,
+        scroll: { y: 300 },
+      });
+
+      return {
+        registerTimeTable,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .high-desc {
+    background: #fff;
+  }
+</style>