Skip to content

A
ant-design-pro-vue
Commit 3e060b65 by Sendya
Options

Added baseForm, stepForm

parent 86588f33
Showing with 689 additions and 161 deletions
src/components/layout/LayoutMain.vue
<template>
<a-layout class="layout">
<sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
<a-layout>
<!-- layout header -->
<layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
<!-- layout content -->
<a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
<!-- content -->
<slot></slot>
</a-layout-content>
<a-layout-footer style="padding: 0px">
<layout-footer />
</a-layout-footer>
</a-layout>
<a-layout class="layout">
<sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
<a-layout>
<!-- layout header -->
<layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
<!-- layout content -->
<a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
<!-- content -->
<slot></slot>
</a-layout-content>
<a-layout-footer style="padding: 0px">
<layout-footer/>
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<script>
import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from './LayoutHeader'
import LayoutFooter from './LayoutFooter'
import { asyncRouterMap } from '@/router/index'
import {asyncRouterMap} from '@/router/index'
export default {
name: "LayoutView",
......@@ -38,7 +38,7 @@
menus: []
}
},
created () {
created() {
this.menus = asyncRouterMap
},
methods: {
......@@ -52,158 +52,160 @@
<style lang="scss">
html {
// 打开滚动条固定显示
overflow-y: scroll;
}
html {
// 打开滚动条固定显示
overflow-y: scroll;
}
.layout {
min-height: 100vh;
overflow-x: hidden;
.layout {
min-height: 100vh;
overflow-x: hidden;
&.ant-layout-has-sider {
flex-direction: row;
}
&.ant-layout-has-sider {
flex-direction: row;
}
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
&:hover {
color: #1890ff;
background: #e6f7ff;
}
}
.trigger {
font-size: 20px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
&:hover {
color: #1890ff;
background: #e6f7ff;
}
}
.logo {
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
img {
height: 32px;
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
font-weight: 600;
}
}
.logo {
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
.sider {
box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
img {
height: 32px;
}
.header {
height: 64px;
padding: 0 12px 0 0;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
position: relative;
.user-wrapper {
float: right;
height: 100%;
.action {
cursor: pointer;
padding: 0 12px;
display: inline-block;
transition: all .3s;
height: 100%;
&:hover {
background: #e6f7ff;
}
.avatar {
margin: 20px 8px 20px 0;
color: #1890ff;
background: hsla(0,0%,100%,.85);
vertical-align: middle;
}
.icon {
font-size: 16px;
padding: 4px;
}
}
}
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 600;
}
}
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
z-index: 10;
}
// 内容区
.layout-content {
margin: 24px 24px 0px;
height: 100%;
.header {
height: 64px;
padding: 0 12px 0 0;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
position: relative;
.user-wrapper {
float: right;
height: 100%;
.action {
cursor: pointer;
padding: 0 12px;
display: inline-block;
transition: all .3s;
height: 100%;
&:hover {
background: #e6f7ff;
}
.avatar {
margin: 20px 8px 20px 0;
color: #1890ff;
background: hsla(0, 0%, 100%, .85);
vertical-align: middle;
}
.icon {
font-size: 16px;
padding: 4px;
}
}
}
}
// 内容区
.layout-content {
margin: 24px 24px 0px;
height: 100%;
}
// 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0;
}
.ant-dropdown-menu-item {
width: 160px;
}
// 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0;
.ant-dropdown-menu-item>.anticon:first-child,
.ant-dropdown-menu-item>a>.anticon:first-child,
.ant-dropdown-menu-submenu-title>.anticon:first-child
.ant-dropdown-menu-submenu-title>a>.anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
.ant-dropdown-menu-item {
width: 160px;
}
.ant-dropdown-menu-item > .anticon:first-child,
.ant-dropdown-menu-item > a > .anticon:first-child,
.ant-dropdown-menu-submenu-title > .anticon:first-child
.ant-dropdown-menu-submenu-title > a > .anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
// 数据列表 样式
.tableList {
}
.table-search {
// 数据列表 样式
.tableList {
&.open-more-condition {
.more-condition {
display: block;
}
}
.table-search {
.more-condition {
display: none;
}
&.open-more-condition {
.more-condition {
display: block;
}
}
.ant-form-item {
display: flex;
margin-bottom: 24px;
.more-condition {
display: none;
}
&>.ant-form-item-label {
flex: unset;
}
.ant-form-item {
display: flex;
margin-bottom: 24px;
.ant-form-item-control-wrapper {
flex: 1 1;
}
}
& > .ant-form-item-label {
flex: unset;
}
.ant-alert, .table-operator {
margin-bottom: 16px;
.ant-form-item-control-wrapper {
flex: 1 1;
}
}
}
.ant-alert, .table-operator {
margin-bottom: 16px;
}
}
</style>
\ No newline at end of file
src/components/layout/PageHeader.vue
......@@ -11,10 +11,6 @@
</a-breadcrumb>
<div class="detail">
<div v-if="avatar" class="avatar">
<a-avatar :src="avatar"/>
</div>
<div class="main">
<div class="row">
<img v-if="logo" :src="logo" class="logo"/>
......@@ -24,6 +20,9 @@
</div>
</div>
<div class="row">
<div v-if="avatar" class="avatar">
<a-avatar :src="avatar"/>
</div>
<div v-if="this.$slots.content" class="content">
<slot name="content"></slot>
</div>
......@@ -105,11 +104,12 @@
.detail {
display: flex;
margin-bottom: 16px;
/*margin-bottom: 16px;*/
.avatar {
flex: 0 1 72px;
margin: 0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
......@@ -125,6 +125,10 @@
.row {
display: flex;
width: 100%;
.avatar {
margin-bottom: 16px;
}
}
.title {
......@@ -146,7 +150,6 @@
margin-right: 16px;
}
.content {
margin-bottom: 16px;
flex: auto;
color: rgba(0,0,0,.45);
line-height: 22px;
......
src/components/layout/PageLayout.vue
......@@ -41,6 +41,9 @@
.link {
margin-top: 16px;
&:not(:empty) {
margin-bottom: 16px;
}
a {
margin-right: 32px;
height: 24px;
......
src/router/index.js
......@@ -86,7 +86,7 @@ export const asyncRouterMap = [
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('../views/form/BasicForm'),
component: () => import('../views/form/stepForm/StepForm'),
meta: { title: '分步表单' }
},
{
......
src/views/form/BasicForm.vue
<template>
<div>
BaseForm
</div>
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
<a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
<a-form-item
label="标题"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
fieldDecoratorId="name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入标题' }]}"
>
<a-input name="name" placeholder="给目标起个名字" />
</a-form-item>
<a-form-item
label="起止日期"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
fieldDecoratorId="buildTime"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择起止日期' }]}"
>
<a-range-picker name="buildTime" style="width: 100%" />
</a-form-item>
<a-form-item
label="目标描述"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
fieldDecoratorId="description"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入目标描述' }]}"
>
<a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
</a-form-item>
<a-form-item
label="衡量标准"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
fieldDecoratorId="type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入衡量标准' }]}"
>
<a-textarea rows="4" placeholder="请输入衡量标准"/>
</a-form-item>
<a-form-item
label="客户"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
</a-form-item>
<a-form-item
label="邀评人"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
</a-form-item>
<a-form-item
label="权重"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input-number :min="0" :max="100"/>
<span> %</span>
</a-form-item>
<a-form-item
label="目标公开"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
help="客户、邀评人默认被分享"
>
<a-radio-group v-model="value">
<a-radio :value="1">公开</a-radio>
<a-radio :value="2">部分公开</a-radio>
<a-radio :value="3">不公开</a-radio>
</a-radio-group>
<a-form-item>
<a-select mode="multiple" v-if="value === 2">
<a-select-option value="4">同事一</a-select-option>
<a-select-option value="5">同事二</a-select-option>
<a-select-option value="6">同事三</a-select-option>
</a-select>
</a-form-item>
</a-form-item>
<a-form-item :wrapperCol="{span: 10, offset: 7}">
<a-button htmlType="submit" type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</template>
<script>
export default {
name: "BaseForm"
name: "BaseForm",
data () {
return {
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
value: 1,
// form
form: null,
}
},
methods: {
// handler
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
// eslint-disable-next-line no-console
console.log('Received values of form: ', values)
}
})
}
}
}
</script>
......
src/views/form/stepForm/Step1.vue 0 → 100644
<template>
<div>
<a-form style="max-width: 500px; margin: 40px auto 0;">
<a-form-item
label="付款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-select value="1" placeholder="ant-design@alipay.com">
<a-select-option value="1">ant-design@alipay.com</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="收款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
<a-select defaultValue="alipay" style="width: 100px">
<a-select-option value="alipay">支付宝</a-select-option>
<a-select-option value="wexinpay">微信</a-select-option>
</a-select>
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
</a-input-group>
</a-form-item>
<a-form-item
label="收款人姓名"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-input value="Alex" />
</a-form-item>
<a-form-item
label="转账金额"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
>
<a-input prefix="￥" value="5000" />
</a-form-item>
<a-form-item :wrapperCol="{span: 19, offset: 5}">
<a-button type="primary" @click="nextStep">下一步</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: "Step1",
methods: {
nextStep () {
this.$emit('nextStep')
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/form/stepForm/Step2.vue 0 → 100644
<template>
<div>
<a-form style="max-width: 500px; margin: 40px auto 0;">
<a-alert
:closable="true"
message="确认转账后，资金将直接打入对方账户，无法退回。"
style="margin-bottom: 24px;"
/>
<a-form-item
label="付款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
ant-design@alipay.com
</a-form-item>
<a-form-item
label="收款账户"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
test@example.com
</a-form-item>
<a-form-item
label="收款人姓名"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
Alex
</a-form-item>
<a-form-item
label="转账金额"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
class="stepFormText"
>
￥ 5,000.00
</a-form-item>
<a-form-item :wrapperCol="{span: 19, offset: 5}">
<a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: "Step2",
data () {
return {
loading: false
}
},
methods: {
nextStep () {
let that = this
that.loading = true
setTimeout(function () {
that.$emit('nextStep')
}, 1500)
},
prevStep () {
this.$emit('prevStep')
}
}
}
</script>
<style lang="scss" scoped>
.stepFormText {
margin-bottom: 24px;
.ant-form-item-label,
.ant-form-item-control {
line-height: 22px;
}
}
</style>
\ No newline at end of file
src/views/form/stepForm/Step3.vue 0 → 100644
<template>
<div>
<a-form style="margin: 40px auto 0;">
<result title="操作成功" :is-success="true" description="预计两小时内到账">
<div class="information">
<a-row>
<a-col :sm="8" :xs="24">付款账户：</a-col>
<a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
</a-row>
<a-row>
<a-col :sm="8" :xs="24">收款账户：</a-col>
<a-col :sm="16" :xs="24">test@example.com</a-col>
</a-row>
<a-row>
<a-col :sm="8" :xs="24">收款人姓名：</a-col>
<a-col :sm="16" :xs="24">辉夜</a-col>
</a-row>
<a-row>
<a-col :sm="8" :xs="24">转账金额：</a-col>
<a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
</a-row>
</div>
<div slot="action">
<a-button type="primary" @click="finish">再转一笔</a-button>
<a-button style="margin-left: 8px">查看账单</a-button>
</div>
</result>
</a-form>
</div>
</template>
<script>
import Result from '../../result/Result'
export default {
name: "Step3",
components: {
Result
},
data () {
return {
loading: false
}
},
methods: {
finish () {
this.$emit('finish')
}
}
}
</script>
<style lang="scss" scoped>
.information {
line-height: 22px;
.ant-row:not(:last-child) {
margin-bottom: 24px;
}
}
.money {
font-family: "Helvetica Neue",sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 14px;
}
</style>
\ No newline at end of file
src/views/form/stepForm/StepForm.vue 0 → 100644
<template>
<a-card :bordered="false">
<a-steps class="steps" :current="currentTab">
<a-step title="填写转账信息" />
<a-step title="确认转账信息" />
<a-step title="完成" />
</a-steps>
<div class="content">
<step1 v-if="currentTab === 0" @nextStep="nextStep"></step1>
<step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"></step2>
<step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"></step3>
</div>
</a-card>
</template>
<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
export default {
name: "StepForm",
components: {
Step1,
Step2,
Step3
},
data () {
return {
description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
currentTab: 0,
// form
form: null,
}
},
methods: {
// handler
nextStep () {
if (this.currentTab < 2) {
this.currentTab += 1
}
},
prevStep () {
if (this.currentTab > 0) {
this.currentTab -= 1
}
},
finish () {
this.currentTab = 0
}
}
}
</script>
<style lang="scss" scoped>
.steps {
max-width: 750px;
margin: 16px auto;
}
</style>
\ No newline at end of file
src/views/result/Result.vue 0 → 100644
<template>
<div class="result">
<div>
<a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
</div>
<div class="title" v-if="title">{{ title }}</div>
<div class="description" v-if="description">{{ description }}</div>
<div class="content">
<slot></slot>
</div>
<div class="action">
<slot name="action"></slot>
</div>
</div>
</template>
<script>
export default {
name: "Result",
props: ['isSuccess', 'title', 'description']
}
</script>
<style lang="scss" scoped>
.result {
text-align: center;
width: 72%;
max-width: 560px;
margin: 0 auto;
padding: 24px 0 8px;
.icon {
font-size: 72px;
line-height: 72px;
margin-bottom: 24px;
}
.success {
color: #52c41a;
}
.error {
color: red;
}
.title {
font-size: 24px;
color: rgba(0, 0, 0, .85);
font-weight: 500;
line-height: 32px;
margin-bottom: 16px;
}
.description {
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 24px;
}
.content {
background: #fafafa;
padding: 24px 40px;
border-radius: 2px;
text-align: left;
}
.action {
margin-top: 32px;
}
}
</style>
\ No newline at end of file
src/views/result/Success.vue
<template>
<div>
Success
</div>
<a-card :bordered="false">
<result :is-success="true" :description="description" :title="title">
<template slot="action">
<a-button type="primary">返回列表</a-button>
<a-button style="margin-left: 8px">查看项目</a-button>
<a-button style="margin-left: 8px">打印</a-button>
</template>
<div>
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
<a-row style="margin-bottom: 16px">
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
<span style="color: rgba(0, 0, 0, 0.85)">项目 ID：</span>
20180724089
</a-col>
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
<span style="color: rgba(0, 0, 0, 0.85)">负责人：</span>
曲丽丽是谁？
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
<span style="color: rgba(0, 0, 0, 0.85)">生效时间：</span>
2016-12-12 ~ 2017-12-12
</a-col>
</a-row>
<a-steps :current="1" progressDot>
<a-step >
<span style="font-size: 14px" slot="title">创建项目</span>
<template slot="description">
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
<div style="margin: 8px 0 4px">
曲丽丽
<a-icon style="margin-left: 8px" type="dingding-o" />
</div>
<div>2016-12-12 12:32</div>
</div>
</template>
</a-step>
<a-step title="部门初审">
<span style="font-size: 14px" slot="title">部门初审</span>
<template slot="description">
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
<div style="margin: 8px 0 4px">
周毛毛
<a-icon style="margin-left: 8px; color: #00A0E9" type="dingding-o" />
</div>
<div><a href="">催一下</a></div>
</div>
</template>
</a-step>
<a-step title="财务复核">
<span style="font-size: 14px" slot="title">财务复核</span>
</a-step>
<a-step title="完成" >
<span style="font-size: 14px" slot="title">完成</span>
</a-step>
</a-steps>
</div>
</result>
</a-card>
</template>
<script>
import Result from './Result'
export default {
name: "Success"
name: "Success",
components: {
Result
},
data () {
return {
title: '提交成功',
description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。'
}
}
}
</script>
......
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