chenghx
6 years ago
parent
417f7d5f7b
commit
670b97e616
6 changed files with 224 additions and 3 deletions
@ -0,0 +1,117 @@ |
||||
<template> |
||||
<a-card :body-style="{padding: '24px 32px'}" :bordered="false"> |
||||
<a-form> |
||||
<a-form-item |
||||
label="标题" |
||||
:labelCol="{span: 7}" |
||||
:wrapperCol="{span: 10}" |
||||
> |
||||
<a-input placeholder="给目标起个名字" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="起止日期" |
||||
:labelCol="{span: 7}" |
||||
:wrapperCol="{span: 10}" |
||||
> |
||||
<a-range-picker style="width: 100%" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="目标描述" |
||||
:labelCol="{span: 7}" |
||||
:wrapperCol="{span: 10}" |
||||
> |
||||
<a-textarea rows="4" placeholder="请输入你阶段性工作目标"/> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="衡量标准" |
||||
:labelCol="{span: 7}" |
||||
:wrapperCol="{span: 10}" |
||||
> |
||||
<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 type="primary">提交</a-button> |
||||
<a-button style="margin-left: 8px">保存</a-button> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import ACard from 'vue-antd-ui/es/card/Card' |
||||
import AForm from 'vue-antd-ui/es/form/Form' |
||||
import AFormItem from 'vue-antd-ui/es/form/FormItem' |
||||
import AInput from 'vue-antd-ui/es/input/Input' |
||||
import ADatePicker from 'vue-antd-ui/es/date-picker' |
||||
import ATextarea from 'vue-antd-ui/es/input/TextArea' |
||||
import AInputNumber from 'vue-antd-ui/es/input-number/index' |
||||
import ARadioGroup from 'vue-antd-ui/es/radio/Group' |
||||
import ARadio from 'vue-antd-ui/es/radio/Radio' |
||||
import ASelect from 'vue-antd-ui/es/select/index' |
||||
import AButton from "vue-antd-ui/es/button/button"; |
||||
|
||||
const ARangePicker = ADatePicker.RangePicker |
||||
const ASelectOption = ASelect.Option |
||||
export default { |
||||
name: 'BasicForm', |
||||
components: { |
||||
AButton, |
||||
ASelectOption, ASelect, ARadio, ARadioGroup, AInputNumber, ATextarea, ARangePicker, AInput, AFormItem, AForm, ACard}, |
||||
data () { |
||||
return { |
||||
title: '基础表单', |
||||
desc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。', |
||||
value: 1 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,42 @@ |
||||
<template> |
||||
<div style="margin: -24px -24px 0px"> |
||||
<page-header :breadcrumb="breadcrumb" :title="title"> |
||||
<div slot="content">{{desc}}</div> |
||||
</page-header> |
||||
<div style="margin: 24px 24px 0px"> |
||||
<router-view ref="page"/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import PageHeader from '../page/PageHeader' |
||||
export default { |
||||
name: 'Form', |
||||
components: {PageHeader}, |
||||
data () { |
||||
return { |
||||
title: '', |
||||
breadcrumb: [], |
||||
desc: '' |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getPageHeaderInfo() |
||||
}, |
||||
beforeUpdate () { |
||||
this.getPageHeaderInfo() |
||||
}, |
||||
methods: { |
||||
getPageHeaderInfo () { |
||||
this.title = this.$route.name |
||||
this.breadcrumb = this.$route.matched |
||||
this.desc = this.$refs.page.desc |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,53 @@ |
||||
<template> |
||||
<div class="page-header"> |
||||
<div class="breadcrumb"> |
||||
<a-breadcrumb> |
||||
<a-breadcrumb-item><a href="#/dashboard">首页</a></a-breadcrumb-item> |
||||
<a-breadcrumb-item :key="item.path" v-for="item in breadcrumb">{{item.name}}</a-breadcrumb-item> |
||||
</a-breadcrumb> |
||||
</div> |
||||
<div class="detail"> |
||||
<h1 v-if="title" class="title">{{title}}</h1> |
||||
<div class="content"><slot name="content"></slot></div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ABreadcrumb from 'vue-antd-ui/es/breadcrumb' |
||||
|
||||
const ABreadcrumbItem = ABreadcrumb.Item |
||||
export default { |
||||
name: 'PageHeader', |
||||
components: {ABreadcrumbItem, ABreadcrumb}, |
||||
props: { |
||||
title: { |
||||
type: String, |
||||
required: true |
||||
}, |
||||
breadcrumb: { |
||||
type: Array, |
||||
required: false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.page-header{ |
||||
background: #fff; |
||||
padding: 16px 32px 0; |
||||
border-bottom: 1px solid #e8e8e8; |
||||
.breadcrumb{ |
||||
margin-bottom: 16px; |
||||
} |
||||
.title{ |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
color: rgba(0,0,0,.85); |
||||
} |
||||
.content{ |
||||
margin-bottom: 16px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue