mirror of https://github.com/halo-dev/halo-admin
ruibaby
6 years ago
parent
be76cc6520
commit
09d80a298a
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="exception">
|
||||
<div class="img">
|
||||
<img :src="config[type].img"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>{{ config[type].title }}</h1>
|
||||
<div class="desc">{{ config[type].desc }}</div>
|
||||
<div class="action">
|
||||
<a-button type="primary" @click="handleToHome">返回首页</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import types from './type'
|
||||
|
||||
export default {
|
||||
name: 'Exception',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: '404'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: types
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToHome() {
|
||||
this.$router.push({ name: 'Dashboard' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.exception {
|
||||
min-height: 500px;
|
||||
height: 80%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: 150px;
|
||||
.img {
|
||||
display: inline-block;
|
||||
padding-right: 52px;
|
||||
zoom: 1;
|
||||
img {
|
||||
height: 360px;
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: inline-block;
|
||||
flex: auto;
|
||||
h1 {
|
||||
color: #434e59;
|
||||
font-size: 72px;
|
||||
font-weight: 600;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.desc {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.exception {
|
||||
margin-top: 30px;
|
||||
.img {
|
||||
padding-right: unset;
|
||||
|
||||
img {
|
||||
height: 40%;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,2 +0,0 @@
|
||||
import ExceptionPage from './ExceptionPage.vue'
|
||||
export default ExceptionPage
|
||||
@ -1,19 +0,0 @@
|
||||
const types = {
|
||||
403: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
|
||||
title: '403',
|
||||
desc: '抱歉，你无权访问该页面'
|
||||
},
|
||||
404: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
|
||||
title: '404',
|
||||
desc: '抱歉，你访问的页面不存在或仍在开发中'
|
||||
},
|
||||
500: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
|
||||
title: '500',
|
||||
desc: '抱歉，服务器出错了'
|
||||
}
|
||||
}
|
||||
|
||||
export default types
|
||||
@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<div :class="[prefixCls]">
|
||||
<slot name="subtitle">
|
||||
<div :class="[`${prefixCls}-subtitle`]">{{ typeof subTitle === 'string' ? subTitle : subTitle() }}</div>
|
||||
</slot>
|
||||
<div class="number-info-value">
|
||||
<span>{{ total }}</span>
|
||||
<span class="sub-total">
|
||||
{{ subTotal }}
|
||||
<icon :type="`caret-${status}`" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'ant-design-vue/es/icon'
|
||||
|
||||
export default {
|
||||
name: 'NumberInfo',
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-number-info'
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
subTotal: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
subTitle: {
|
||||
type: [String, Function],
|
||||
default: ''
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: 'up'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "index";
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
import NumberInfo from './NumberInfo'
|
||||
|
||||
export default NumberInfo
|
||||
@ -1,55 +0,0 @@
|
||||
@import "../index";
|
||||
|
||||
@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info";
|
||||
|
||||
.@{numberInfo-prefix-cls} {
|
||||
|
||||
.ant-pro-number-info-subtitle {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.number-info-value {
|
||||
margin-top: 4px;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
|
||||
& > span {
|
||||
color: @heading-color;
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.sub-total {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-lg;
|
||||
vertical-align: top;
|
||||
margin-right: 0;
|
||||
i {
|
||||
font-size: 12px;
|
||||
transform: scale(0.82);
|
||||
margin-left: 4px;
|
||||
}
|
||||
:global {
|
||||
.anticon-caret-up {
|
||||
color: @red-6;
|
||||
}
|
||||
.anticon-caret-down {
|
||||
color: @green-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
import { Tag } from 'ant-design-vue'
|
||||
const { CheckableTag } = Tag
|
||||
|
||||
export default {
|
||||
name: 'TagSelectOption',
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-tag-select-option'
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Object],
|
||||
default: ''
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localChecked: this.checked || false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'checked'(val) {
|
||||
this.localChecked = val
|
||||
},
|
||||
'$parent.items': {
|
||||
handler: function(val) {
|
||||
this.value && val.hasOwnProperty(this.value) && (this.localChecked = val[this.value])
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { $slots, value } = this
|
||||
const onChange = (checked) => {
|
||||
this.$emit('change', { value, checked })
|
||||
}
|
||||
return (<CheckableTag key={value} vModel={this.localChecked} onChange={onChange}>
|
||||
{$slots.default}
|
||||
</CheckableTag>)
|
||||
}
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
||||
import Option from './TagSelectOption.jsx'
|
||||
import { filterEmpty } from '@/components/_util/util'
|
||||
|
||||
export default {
|
||||
Option,
|
||||
name: 'TagSelect',
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: 'ant-pro-tag-select'
|
||||
},
|
||||
defaultValue: {
|
||||
type: PropTypes.array,
|
||||
default: null
|
||||
},
|
||||
value: {
|
||||
type: PropTypes.array,
|
||||
default: null
|
||||
},
|
||||
expandable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideCheckAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expand: false,
|
||||
localCheckAll: false,
|
||||
items: this.getItemsKey(filterEmpty(this.$slots.default)),
|
||||
val: this.value || this.defaultValue || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(checked) {
|
||||
const key = Object.keys(this.items).filter(key => key === checked.value)
|
||||
this.items[key] = checked.checked
|
||||
const bool = Object.values(this.items).lastIndexOf(false)
|
||||
if (bool === -1) {
|
||||
this.localCheckAll = true
|
||||
} else {
|
||||
this.localCheckAll = false
|
||||
}
|
||||
},
|
||||
onCheckAll(checked) {
|
||||
Object.keys(this.items).forEach(v => {
|
||||
this.items[v] = checked.checked
|
||||
})
|
||||
},
|
||||
getItemsKey(items) {
|
||||
const totalItem = {}
|
||||
items.forEach(item => {
|
||||
totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
|
||||
})
|
||||
return totalItem
|
||||
},
|
||||
// CheckAll Button
|
||||
renderCheckAll() {
|
||||
return !this.hideCheckAll && (<Option key={'total'} checked={this.localCheckAll} onChange={this.onCheckAll}>All</Option>) || null
|
||||
},
|
||||
// expandable
|
||||
renderExpandable() {
|
||||
|
||||
},
|
||||
// render option
|
||||
renderTags(items) {
|
||||
const listeners = {
|
||||
change: (checked) => {
|
||||
this.onChange(checked)
|
||||
this.$emit('change', checked)
|
||||
}
|
||||
}
|
||||
|
||||
return items.map(vnode => {
|
||||
const options = vnode.componentOptions
|
||||
options.listeners = listeners
|
||||
return vnode
|
||||
})
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { $props: { prefixCls } } = this
|
||||
const classString = {
|
||||
[`${prefixCls}`]: true
|
||||
}
|
||||
const tagItems = filterEmpty(this.$slots.default)
|
||||
return (
|
||||
<div class={classString}>
|
||||
{this.renderCheckAll()}
|
||||
{this.renderTags(tagItems)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<exception-page type="403" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExceptionPage from './ExceptionPage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ExceptionPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in new issue