mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 17:07:19 +08:00
feat: add result page
This commit is contained in:
xiaoxian521
parent
849b46533d
commit
8e7a79cf94
@ -62,6 +62,7 @@ import ubuntuFill from "@iconify-icons/ri/ubuntu-fill";
|
|||||||
import questionLine from "@iconify-icons/ri/question-line";
|
import questionLine from "@iconify-icons/ri/question-line";
|
||||||
import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
|
import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
|
||||||
import informationLine from "@iconify-icons/ri/information-line";
|
import informationLine from "@iconify-icons/ri/information-line";
|
||||||
|
import closeCircleLine from "@iconify-icons/ri/close-circle-line";
|
||||||
addIcon("arrow-right-s-line", arrowRightSLine);
|
addIcon("arrow-right-s-line", arrowRightSLine);
|
||||||
addIcon("arrow-left-s-line", arrowLeftSLine);
|
addIcon("arrow-left-s-line", arrowLeftSLine);
|
||||||
addIcon("logout-circle-r-line", logoutCircleRLine);
|
addIcon("logout-circle-r-line", logoutCircleRLine);
|
||||||
@ -70,6 +71,7 @@ addIcon("ubuntu-fill", ubuntuFill);
|
|||||||
addIcon("question-line", questionLine);
|
addIcon("question-line", questionLine);
|
||||||
addIcon("checkbox-circle-line", checkboxCircleLine);
|
addIcon("checkbox-circle-line", checkboxCircleLine);
|
||||||
addIcon("information-line", informationLine);
|
addIcon("information-line", informationLine);
|
||||||
|
addIcon("close-circle-line", closeCircleLine);
|
||||||
|
|
||||||
// Font Awesome 4
|
// Font Awesome 4
|
||||||
import faUser from "@iconify-icons/fa/user";
|
import faUser from "@iconify-icons/fa/user";
|
||||||
|
|||||||
@ -52,6 +52,9 @@ import {
|
|||||||
ElOption,
|
ElOption,
|
||||||
ElTimeline,
|
ElTimeline,
|
||||||
ElTimelineItem,
|
ElTimelineItem,
|
||||||
|
ElResult,
|
||||||
|
ElSteps,
|
||||||
|
ElStep,
|
||||||
// 指令
|
// 指令
|
||||||
ElLoading,
|
ElLoading,
|
||||||
ElInfiniteScroll
|
ElInfiniteScroll
|
||||||
@ -112,7 +115,10 @@ const components = [
|
|||||||
ElSelect,
|
ElSelect,
|
||||||
ElOption,
|
ElOption,
|
||||||
ElTimeline,
|
ElTimeline,
|
||||||
ElTimelineItem
|
ElTimelineItem,
|
||||||
|
ElResult,
|
||||||
|
ElSteps,
|
||||||
|
ElStep
|
||||||
];
|
];
|
||||||
|
|
||||||
export function useElementPlus(app: App) {
|
export function useElementPlus(app: App) {
|
||||||
|
|||||||
@ -1,7 +1,77 @@
|
|||||||
<script setup lang="ts"></script>
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div></div>
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="font-medium">失败页</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-result
|
||||||
|
icon="error"
|
||||||
|
title="提交失败"
|
||||||
|
sub-title="请核对并修改以下信息后，再重新提交。"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<el-button type="primary">返回修改</el-button>
|
||||||
|
</template>
|
||||||
|
</el-result>
|
||||||
|
<el-descriptions
|
||||||
|
:column="1"
|
||||||
|
title="您提交的内容有如下错误："
|
||||||
|
style="background: rgb(250, 250, 250)"
|
||||||
|
class="p-6 ml-10 mr-10"
|
||||||
|
>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<span class="flex items-center -mt-6">
|
||||||
|
<IconifyIconOffline
|
||||||
|
icon="close-circle-line"
|
||||||
|
color="#F56C6C"
|
||||||
|
width="18px"
|
||||||
|
height="18px"
|
||||||
|
/>
|
||||||
|
<span class="ml-1 mr-4">您的账户已被冻结</span>
|
||||||
|
<a
|
||||||
|
href="javascript:void(0);"
|
||||||
|
class="flex items-center"
|
||||||
|
style="color: var(--el-color-primary)"
|
||||||
|
>立即解冻
|
||||||
|
<IconifyIconOffline
|
||||||
|
icon="arrow-right-s-line"
|
||||||
|
color="var(--el-color-primary)"
|
||||||
|
width="18px"
|
||||||
|
height="18px"
|
||||||
|
/></a>
|
||||||
|
</span>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<span class="flex items-center -mt-8">
|
||||||
|
<IconifyIconOffline
|
||||||
|
icon="close-circle-line"
|
||||||
|
color="#F56C6C"
|
||||||
|
width="18px"
|
||||||
|
height="18px"
|
||||||
|
/>
|
||||||
|
<span class="ml-1 mr-4">您的账户还不具备申请资格</span>
|
||||||
|
<a
|
||||||
|
href="javascript:void(0);"
|
||||||
|
class="flex items-center"
|
||||||
|
style="color: var(--el-color-primary)"
|
||||||
|
>立即升级
|
||||||
|
<IconifyIconOffline
|
||||||
|
icon="arrow-right-s-line"
|
||||||
|
color="var(--el-color-primary)"
|
||||||
|
width="18px"
|
||||||
|
height="18px"
|
||||||
|
/></a>
|
||||||
|
</span>
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
:deep(.el-descriptions__body) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,79 @@
|
|||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
const { lastBuildTime } = __APP_INFO__;
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div></div>
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="font-medium">成功页</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-result
|
||||||
|
icon="success"
|
||||||
|
title="提交成功"
|
||||||
|
sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<div class="flex">
|
||||||
|
<el-button type="primary">返回列表</el-button>
|
||||||
|
<el-button>查看项目</el-button>
|
||||||
|
<el-button>打印</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-result>
|
||||||
|
<div style="background: rgb(250, 250, 250)" class="p-6 ml-10 mr-10">
|
||||||
|
<el-descriptions title="项目名称" class="mb-5">
|
||||||
|
<el-descriptions-item label="项目 ID：">12345</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="负责人：">明明</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="生效时间：">{{
|
||||||
|
lastBuildTime
|
||||||
|
}}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-steps :active="2">
|
||||||
|
<el-step title="创建项目">
|
||||||
|
<template #description>
|
||||||
|
<p>明明</p>
|
||||||
|
<p>{{ lastBuildTime }}</p>
|
||||||
|
</template>
|
||||||
|
</el-step>
|
||||||
|
<el-step title="部门初审">
|
||||||
|
<template #description>
|
||||||
|
<p class="flex items-center">
|
||||||
|
亮亮
|
||||||
|
<span
|
||||||
|
role="img"
|
||||||
|
aria-label="dingding"
|
||||||
|
class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
|
||||||
|
style="color: rgb(0, 160, 233); margin-left: 8px"
|
||||||
|
><svg
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
focusable="false"
|
||||||
|
data-icon="dingding"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M573.7 252.5C422.5 197.4 201.3 96.7 201.3 96.7c-15.7-4.1-17.9 11.1-17.9 11.1-5 61.1 33.6 160.5 53.6 182.8 19.9 22.3 319.1 113.7 319.1 113.7S326 357.9 270.5 341.9c-55.6-16-37.9 17.8-37.9 17.8 11.4 61.7 64.9 131.8 107.2 138.4 42.2 6.6 220.1 4 220.1 4s-35.5 4.1-93.2 11.9c-42.7 5.8-97 12.5-111.1 17.8-33.1 12.5 24 62.6 24 62.6 84.7 76.8 129.7 50.5 129.7 50.5 33.3-10.7 61.4-18.5 85.2-24.2L565 743.1h84.6L603 928l205.3-271.9H700.8l22.3-38.7c.3.5.4.8.4.8S799.8 496.1 829 433.8l.6-1h-.1c5-10.8 8.6-19.7 10-25.8 17-71.3-114.5-99.4-265.8-154.5z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
催一下
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</el-step>
|
||||||
|
<el-step title="财务复核"></el-step>
|
||||||
|
<el-step title="完成"></el-step>
|
||||||
|
</el-steps>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
:deep(.el-descriptions__body) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user