feat: add result page demo

6 years ago · 21e0548e34
9 changed files with 301 additions and 120 deletions
--- a/src/router/menus/modules/demo/comp.ts
+++ b/src/router/menus/modules/demo/comp.ts
@ -88,6 +88,16 @@ const menu: MenuModule = {
          },
        ],
      },
+      {
+        path: '/form',
+        name: '验证组件',
+        children: [
+          {
+            path: '/base',
+            name: '拖拽校验',
+          },
+        ],
+      },
    ],
  },
 };
--- a/src/router/menus/modules/demo/exception.ts
+++ b/src/router/menus/modules/demo/exception.ts
@ -1,35 +0,0 @@
-import type { MenuModule } from '/@/router/types.d';
-const menu: MenuModule = {
-  orderNo: 500,
-  menu: {
-    name: '异常页',
-    path: '/exception',
-    children: [
-      {
-        path: '403',
-        name: '403',
-      },
-      {
-        path: '404',
-        name: '404',
-      },
-      {
-        path: '500',
-        name: '500',
-      },
-      {
-        path: 'net-work-error',
-        name: '网络错误',
-      },
-      {
-        path: 'page-time-out',
-        name: '页面超时',
-      },
-      {
-        path: 'not-data',
-        name: '无数据',
-      },
-    ],
-  },
-};
-export default menu;
--- a/src/router/menus/modules/demo/feat.ts
+++ b/src/router/menus/modules/demo/feat.ts
@ -1,8 +1,8 @@
 import type { MenuModule } from '/@/router/types.d';
 const menu: MenuModule = {
-  orderNo: 10,
+  orderNo: 19,
  menu: {
-    name: '页面功能',
+    name: '功能',
    path: '/feat',
    children: [
      {
--- a/src/router/menus/modules/demo/page.ts
+++ b/src/router/menus/modules/demo/page.ts
@ -0,0 +1,57 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 20,
+  menu: {
+    name: '页面',
+    path: '/page-demo',
+    tag: {
+      dot: true,
+    },
+    children: [
+      {
+        path: 'result',
+        name: '结果页',
+        tag: {
+          content: 'new',
+        },
+        children: [
+          {
+            path: 'success',
+            name: '成功页',
+          },
+          {
+            path: 'fail',
+            name: '失败页',
+          },
+        ],
+      },
+      {
+        path: 'exception',
+        name: '异常页',
+        children: [
+          {
+            path: '403',
+            name: '403',
+          },
+          {
+            path: '404',
+            name: '404',
+          },
+          {
+            path: '500',
+            name: '500',
+          },
+          {
+            path: 'net-work-error',
+            name: '网络错误',
+          },
+          {
+            path: 'not-data',
+            name: '无数据',
+          },
+        ],
+      },
+    ],
+  },
+};
+export default menu;
--- a/src/router/menus/modules/demo/permission.ts
+++ b/src/router/menus/modules/demo/permission.ts
@ -1,6 +1,6 @@
 import type { MenuModule } from '/@/router/types.d';
 const menu: MenuModule = {
-  orderNo: 20,
+  orderNo: 15,
  menu: {
    name: '权限管理',
    path: '/permission',
--- a/src/router/routes/modules/demo/exception.ts
+++ b/src/router/routes/modules/demo/exception.ts
@ -1,82 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
-import { ExceptionEnum } from '/@/enums/exceptionEnum';
-
-const ExceptionPage = () => import('/@/views/sys/exception/Exception');
-
-export default {
-  layout: {
-    path: '/exception',
-    name: 'ExceptionPage',
-    component: PAGE_LAYOUT_COMPONENT,
-    redirect: '/exception/404',
-    meta: {
-      icon: 'ant-design:exception-outlined',
-      title: '异常页',
-    },
-  },
-
-  routes: [
-    {
-      path: '/403',
-      name: 'PageNotAccess',
-      component: ExceptionPage,
-      props: {
-        status: ExceptionEnum.PAGE_NOT_ACCESS,
-      },
-      meta: {
-        title: '403',
-        afterCloseLoading: true,
-      },
-    },
-    {
-      path: '/404',
-      name: 'PageNotFound',
-      component: ExceptionPage,
-      props: {
-        status: ExceptionEnum.PAGE_NOT_FOUND,
-      },
-      meta: {
-        title: '404',
-        afterCloseLoading: true,
-      },
-    },
-    {
-      path: '/500',
-      name: 'ServiceError',
-      component: ExceptionPage,
-      props: {
-        status: ExceptionEnum.ERROR,
-      },
-      meta: {
-        title: '500',
-        afterCloseLoading: true,
-      },
-    },
-    {
-      path: '/net-work-error',
-      name: 'NetWorkError',
-      component: ExceptionPage,
-      props: {
-        status: ExceptionEnum.NET_WORK_ERROR,
-      },
-      meta: {
-        title: '网络错误',
-        afterCloseLoading: true,
-      },
-    },
-    {
-      path: '/not-data',
-      name: 'NotData',
-      component: ExceptionPage,
-      props: {
-        status: ExceptionEnum.PAGE_NOT_DATA,
-      },
-      meta: {
-        title: '无数据',
-        afterCloseLoading: true,
-      },
-    },
-  ],
-} as AppRouteModule;
--- a/src/router/routes/modules/demo/page.ts
+++ b/src/router/routes/modules/demo/page.ts
@ -0,0 +1,120 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
+import { ExceptionEnum } from '/@/enums/exceptionEnum';
+
+const ExceptionPage = () => import('/@/views/sys/exception/Exception');
+
+export default {
+  path: '/page-demo',
+  name: 'PageDemo',
+  component: PAGE_LAYOUT_COMPONENT,
+  redirect: '/page-demo/exception',
+  meta: {
+    icon: 'mdi:page-next-outline',
+    title: '页面',
+  },
+  children: [
+    // =============================result start=============================
+    {
+      path: '/result',
+      name: 'ResultPage',
+      redirect: '/page-demo/result/success',
+      meta: {
+        title: '结果页',
+      },
+      children: [
+        {
+          path: 'success',
+          name: 'ResultSuccessPage',
+          component: () => import('/@/views/demo/page/result/success/index.vue'),
+          meta: {
+            title: '成功页',
+          },
+        },
+        {
+          path: 'fail',
+          name: 'ResultFailPage',
+          component: () => import('/@/views/demo/page/result/fail/index.vue'),
+          meta: {
+            title: '失败页',
+          },
+        },
+      ],
+    },
+    // =============================result end=============================
+
+    // =============================exception start=============================
+    {
+      path: '/exception',
+      name: 'ExceptionPage',
+      redirect: '/page-demo/exception/404',
+      meta: {
+        title: '异常页',
+      },
+      children: [
+        {
+          path: '403',
+          name: 'PageNotAccess',
+          component: ExceptionPage,
+          props: {
+            status: ExceptionEnum.PAGE_NOT_ACCESS,
+          },
+          meta: {
+            title: '403',
+            afterCloseLoading: true,
+          },
+        },
+        {
+          path: '404',
+          name: 'PageNotFound',
+          component: ExceptionPage,
+          props: {
+            status: ExceptionEnum.PAGE_NOT_FOUND,
+          },
+          meta: {
+            title: '404',
+            afterCloseLoading: true,
+          },
+        },
+        {
+          path: '500',
+          name: 'ServiceError',
+          component: ExceptionPage,
+          props: {
+            status: ExceptionEnum.ERROR,
+          },
+          meta: {
+            title: '500',
+            afterCloseLoading: true,
+          },
+        },
+        {
+          path: 'net-work-error',
+          name: 'NetWorkError',
+          component: ExceptionPage,
+          props: {
+            status: ExceptionEnum.NET_WORK_ERROR,
+          },
+          meta: {
+            title: '网络错误',
+            afterCloseLoading: true,
+          },
+        },
+        {
+          path: 'not-data',
+          name: 'NotData',
+          component: ExceptionPage,
+          props: {
+            status: ExceptionEnum.PAGE_NOT_DATA,
+          },
+          meta: {
+            title: '无数据',
+            afterCloseLoading: true,
+          },
+        },
+      ],
+    },
+    // =============================exception end=============================
+  ],
+} as AppRouteModule;
--- a/src/views/demo/page/result/fail/index.vue
+++ b/src/views/demo/page/result/fail/index.vue
@ -0,0 +1,55 @@
+<template>
+  <div class="m-5 result-error">
+    <Result status="error" title="提交失败" sub-title="请核对并修改以下信息后，再重新提交。">
+      <template #extra>
+        <a-button key="console" type="primary"> 返回修改 </a-button>
+      </template>
+    </Result>
+    <div class="result-error__content">
+      <div class="result-error__content-title">您提交的内容有如下错误：</div>
+      <div class="mb-4">
+        <CloseCircleOutlined class="mr-2 result-error__content-icon" />
+        您的账户已被冻结
+        <a class="ml-4">立即解冻 ></a>
+      </div>
+      <div class="mb-4">
+        <CloseCircleOutlined class="mr-2 result-error__content-icon" />
+        您的账户还不具备申请资格
+        <a class="ml-4">立即解冻 ></a>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Result } from 'ant-design-vue';
+  import { CloseCircleOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    components: {
+      Result,
+      CloseCircleOutlined,
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .result-error {
+    padding: 48px 32px;
+    background: #fff;
+
+    &__content {
+      padding: 24px 40px;
+      background: #fafafa;
+
+      &-title {
+        margin-bottom: 16px;
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+      }
+
+      &-icon {
+        color: #ff4d4f;
+      }
+    }
+  }
+</style>
--- a/src/views/demo/page/result/success/index.vue
+++ b/src/views/demo/page/result/success/index.vue
@ -0,0 +1,56 @@
+<template>
+  <div class="m-5 result-success">
+    <Result
+      status="success"
+      title="提交成功"
+      sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
+    >
+      <template #extra>
+        <a-button key="console" type="primary"> 返回列表 </a-button>
+        <a-button key="buy"> 查看项目 </a-button>
+        <a-button key="buy"> 打印 </a-button>
+      </template>
+    </Result>
+    <div class="result-success__content">
+      <Descriptions title="项目名称">
+        <DescriptionItem label="项目 ID"> 111222 </DescriptionItem>
+        <DescriptionItem label="负责人"> Vben </DescriptionItem>
+        <DescriptionItem label="生效时间"> 2016-12-12 ~ 2017-12-12 </DescriptionItem>
+      </Descriptions>
+      <Steps :current="1" progress-dot size="small">
+        <Step title="创建项目">
+          <template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template>
+        </Step>
+        <Step title="部门初审">
+          <template #description> <p>Chad</p> </template>
+        </Step>
+        <Step title="财务复核" />
+        <Step title="完成" />
+      </Steps>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Result, Steps, Descriptions } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      Result,
+      Steps,
+      Step: Steps.Step,
+      Descriptions,
+      DescriptionItem: Descriptions.Item,
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .result-success {
+    padding: 48px 32px;
+    background: #fff;
+
+    &__content {
+      padding: 24px 40px;
+      background: #fafafa;
+    }
+  }
+</style>