Skip to content

A
ant-design-pro-vue
Commit 275876ea by Sendya
Options

Add list

parent ee08fcfe
Showing with 353 additions and 140 deletions
src/components/tools/HeadInfo.vue 0 → 100644
<template>
<div class="head-info">
<span>{{ title }}</span>
<p>{{ content }}</p>
<em v-if="bordered" />
</div>
</template>
<script>
export default {
name: "HeadInfo",
props: ['title', 'content', 'bordered']
}
</script>
<style lang="scss" scoped>
.head-info{
position: relative;
text-align: center;
padding: 0 32px;
span {
color: rgba(0,0,0,.45);
display: inline-block;
font-size: 14px;
line-height: 22px;
margin-bottom: 4px;
}
p {
color: rgba(0,0,0,.85);
font-size: 24px;
line-height: 32px;
margin: 0;
}
em {
background-color: #e8e8e8;
position: absolute;
height: 56px;
width: 1px;
top: 0;
right: 0;
}
}
</style>
\ No newline at end of file
src/router/index.js
......@@ -99,19 +99,19 @@ export const asyncRouterMap = [
path: '/list',
component: Layout,
name: 'list',
redirect: '/list/query',
redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table' },
children: [
{
path: '/list/query',
path: '/list/query-list',
name: 'QueryList',
component: () => import('../views/list/TableList'),
meta: { title: '查询表格' }
},
{
path: '/list/basic',
path: '/list/basic-list',
name: 'BasicList',
component: () => import('../views/list/TableList'),
component: () => import('../views/list/StandardList'),
meta: { title: '标准列表' }
},
{
......
src/views/Layout.vue
......@@ -180,10 +180,6 @@ export default {
.content {
margin: 24px 24px 0;
.ant-card {
min-height: 400px;
}
}
}
......
src/views/Login.vue
......@@ -95,141 +95,148 @@
<script>
import md5 from "md5";
import api from '../api/'
import { mapActions } from "vuex";
import {mapActions} from "vuex";
export default {
data() {
return {
customActiveKey: "tab1",
loginBtn: false,
// login type: 0 email, 1 username, 2 telephone
loginType: 0,
form: null,
state: {
time: 60,
smsSendBtn: false,
},
formLogin: {
username: "",
password: "",
captcha: "",
mobile: "",
rememberMe: true
},
}
data() {
return {
customActiveKey: "tab1",
loginBtn: false,
// login type: 0 email, 1 username, 2 telephone
loginType: 0,
form: null,
state: {
time: 60,
smsSendBtn: false,
},
formLogin: {
username: "",
password: "",
captcha: "",
mobile: "",
rememberMe: true
},
}
},
methods: {
...mapActions(["Login"]),
// handler
handleUsernameOrEmail(rule, value, callback) {
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if (regex.test(value)) {
this.loginType = 0
} else {
this.loginType = 1
}
callback()
},
methods: {
...mapActions(["Login"]),
// handler
handleUsernameOrEmail(rule, value, callback) {
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if (regex.test(value)) {
this.loginType = 0
} else {
this.loginType = 1
}
callback()
},
handleTabClick(key) {
this.customActiveKey = key
// this.form.resetFields()
},
handleSubmit() {
let flag = false
if (this.customActiveKey === 'tab1') {
this.form.validateFields(['username', 'password'], { force: true }, (err) => {
if (!err) {
flag = true
}
})
} else {
this.form.validateFields(['mobile', 'captcha'], { force: true }, (err) => {
if (!err) {
flag = true
this.loginType = 2 // 登录类型修改为手机登录
}
handleTabClick(key) {
this.customActiveKey = key
// this.form.resetFields()
},
handleSubmit() {
let that = this
let flag = false
if (that.customActiveKey === 'tab1') {
that.form.validateFields(['username', 'password'], {force: true}, (err) => {
if (!err) {
flag = true
}
})
} else {
that.form.validateFields(['mobile', 'captcha'], {force: true}, (err) => {
if (!err) {
flag = true
that.loginType = 2 // 登录类型修改为手机登录
}
})
}
if (!flag) return
that.loginBtn = true
let loginParams = {
password: md5(that.formLogin.password),
remember_me: that.formLogin.rememberMe
};
switch (that.loginType) {
case 0:
loginParams.email = that.formLogin.username
break;
case 1:
loginParams.username = that.formLogin.username
break;
case 2:
default:
loginParams.mobile = that.formLogin.mobile
loginParams.captcha = that.formLogin.captcha
break;
}
that.Login(loginParams).then(() => {
that.loginBtn = false
that.$router.push({name: "dashboard"})
that.$message.success(that.timefix() +'，欢迎回来', 3)
}).catch((err) => {
that.requestFailed(err);
})
},
getCaptcha(e) {
e.preventDefault()
let that = this
this.form.validateFields(['mobile'], {force: true},
(err) => {
if (!err) {
this.state.smsSendBtn = true;
let interval = window.setInterval(() => {
if (that.state.time-- <= 0) {
that.state.time = 60;
that.state.smsSendBtn = false;
window.clearInterval(interval);
}
}, 1000);
const hide = this.$message.loading('验证码发送中..', 0);
this.$http.post(api.SendSms, {mobile: that.formLogin.mobile})
.then(res => {
setTimeout(hide, 2500);
this.$notification['success']({
message: '提示',
description: '验证码获取成功，您的验证码为：' + res.result.captcha,
duration: 8
})
}
if (!flag) return
this.loginBtn = true
let loginParams = {
password: md5(this.formLogin.password),
remember_me: this.formLogin.rememberMe
};
switch (this.loginType) {
case 0:
loginParams.email = this.formLogin.username
break;
case 1:
loginParams.username = this.formLogin.username
break;
case 2:
default:
loginParams.mobile = this.formLogin.mobile
loginParams.captcha = this.formLogin.captcha
break;
}
this.Login(loginParams).then(() => {
this.loginBtn = false
this.$router.push({ name: "dashboard" })
}).catch((err) => {
})
.catch(err => {
setTimeout(hide, 1);
clearInterval(interval);
that.state.time = 60;
that.state.smsSendBtn = false;
this.requestFailed(err);
})
},
getCaptcha(e) {
e.preventDefault()
let that = this
this.form.validateFields(['mobile'], { force: true },
(err) => {
if (!err) {
this.state.smsSendBtn = true;
let interval = window.setInterval(() => {
if (that.state.time-- <= 0) {
that.state.time = 60;
that.state.smsSendBtn = false;
window.clearInterval(interval);
}
}, 1000);
const hide = this.$message.loading('验证码发送中..', 0);
this.$http.post(api.SendSms, { mobile: that.formLogin.mobile })
.then(res => {
setTimeout(hide, 2500);
this.$notification['success']({
message: '提示',
description: '验证码获取成功，您的验证码为：' + res.result.captcha,
duration: 8
})
})
.catch(err => {
setTimeout(hide, 1);
clearInterval(interval);
that.state.time = 60;
that.state.smsSendBtn = false;
this.requestFailed(err);
});
}
}
);
},
requestFailed(err) {
this.$notification['error']({
message: '错误',
description: ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
duration: 4,
});
this.loginBtn = false;
},
}
});
}
}
);
},
timefix() {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 20 ? '下午好' : '晚上好')))
},
requestFailed(err) {
this.$notification['error']({
message: '错误',
description: ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
duration: 4,
});
this.loginBtn = false;
},
}
}
</script>
......
src/views/list/StandardList.vue 0 → 100644
<template>
<div>
<a-card :bordered="false">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="我的待办" content="8个任务" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="本周完成任务数" content="24个"/>
</a-col>
</a-row>
</a-card>
<a-card
style="margin-top: 24px"
:bordered="false"
title="标准列表">
<div slot="extra">
<a-radio-group>
<a-radio-button>全部</a-radio-button>
<a-radio-button>进行中</a-radio-button>
<a-radio-button>等待中</a-radio-button>
</a-radio-group>
<a-input-search style="margin-left: 16px; width: 272px;" />
</div>
<div class="operate">
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
</div>
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
<a-list-item :key="index" v-for="(item, index) in data">
<a-list-item-meta :description="item.description">
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
<a slot="title">{{ item.title }}</a>
</a-list-item-meta>
<div slot="actions">
<a>编辑</a>
</div>
<div slot="actions">
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item><a>编辑</a></a-menu-item>
<a-menu-item><a>删除</a></a-menu-item>
</a-menu>
<a>更多<a-icon type="down"/></a>
</a-dropdown>
</div>
<div class="list-content">
<div class="list-content-item">
<span>Owner</span>
<p>{{ item.owner }}</p>
</div>
<div class="list-content-item">
<span>开始时间</span>
<p>{{ item.startAt }}</p>
</div>
<div class="list-content-item">
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
</div>
</div>
</a-list-item>
</a-list>
</a-card>
</div>
</template>
<script>
import HeadInfo from '@/components/tools/HeadInfo'
const data = []
data.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
owner: '付晓晓',
startAt: '2018-07-26 22:44',
progress: {
value: 90
}
})
data.push({
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
owner: '曲丽丽',
startAt: '2018-07-26 22:44',
progress: {
value: 54
}
})
data.push({
title: 'Ant Design',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
description: '生命就像一盒巧克力，结果往往出人意料',
owner: '林东东',
startAt: '2018-07-26 22:44',
progress: {
value: 66
}
})
data.push({
title: 'Ant Design Pro',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
owner: '周星星',
startAt: '2018-07-26 22:44',
progress: {
value: 30
}
})
data.push({
title: 'Bootstrap',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
owner: '吴加好',
startAt: '2018-07-26 22:44',
progress: {
status: 'exception',
value: 100
}
})
export default {
name: "StandardList",
components: {
HeadInfo
},
data () {
return {
data
}
}
}
</script>
<style lang="scss" scoped>
.ant-avatar-lg {
width: 48px;
height: 48px;
line-height: 48px;
}
.list-content-item {
color: rgba(0, 0, 0, .45);
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-left: 40px;
span {
line-height: 20px;
}
p {
margin-top: 4px;
margin-bottom: 0;
line-height: 22px;
}
}
</style>
\ No newline at end of file
vue.config.js
......@@ -10,8 +10,8 @@ module.exports = {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
/* 'primary-color': '#1DA57A',
'link-color': '#1DA57A',*/
'border-radius-base': '2px',
},
javascriptEnabled: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment