From 670b97e616fac085a4f8bf3d515c84277939a504 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Mon, 23 Jul 2018 18:10:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96GloablHeader=E3=80=81?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95=E6=A8=A1=E5=9D=97=E3=80=81?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9EPageHeader=E3=80=81=E6=A0=B9=E6=8D=AErouter?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E7=94=9F=E6=88=90breadcrumb=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/BasicForm.vue      | 117 +++++++++++++++++++++++++
 src/components/form/Form.vue           |  42 +++++++++
 src/components/form/index.js           |   0
 src/components/layout/GloablHeader.vue |   9 +-
 src/components/page/PageHeader.vue     |  53 +++++++++++
 src/router/index.js                    |   6 +-
 6 files changed, 224 insertions(+), 3 deletions(-)
 create mode 100644 src/components/form/BasicForm.vue
 create mode 100644 src/components/form/Form.vue
 create mode 100644 src/components/form/index.js
 create mode 100644 src/components/page/PageHeader.vue

diff --git a/src/components/form/BasicForm.vue b/src/components/form/BasicForm.vue
new file mode 100644
index 0000000..e58f43c
--- /dev/null
+++ b/src/components/form/BasicForm.vue
@@ -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>
diff --git a/src/components/form/Form.vue b/src/components/form/Form.vue
new file mode 100644
index 0000000..bf2a5dc
--- /dev/null
+++ b/src/components/form/Form.vue
@@ -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>
diff --git a/src/components/form/index.js b/src/components/form/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/GloablHeader.vue b/src/components/layout/GloablHeader.vue
index bba0132..15857cd 100644
--- a/src/components/layout/GloablHeader.vue
+++ b/src/components/layout/GloablHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-header style="background: #fff; padding: 0 12px 0 0;box-shadow: 0 1px 4px rgba(0,21,41,.08);">
+  <a-layout-header class="gloabl-header">
     <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
     <div style="float: right">
         <header-search class="header-item"/>
@@ -73,4 +73,11 @@ export default {
     font-size: 16px;
     color: rgba(0,0,0,.65);
   }
+  .gloabl-header{
+    background: #fff;
+    padding: 0 12px 0 0;
+    -webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    position: relative;
+  }
 </style>
diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
new file mode 100644
index 0000000..e71c21f
--- /dev/null
+++ b/src/components/page/PageHeader.vue
@@ -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>
diff --git a/src/router/index.js b/src/router/index.js
index 74753c9..11324b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,8 @@ import Exception from '@/components/exception/Exception'
 import NotFound from '@/components/exception/404'
 import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
+import Form from '@/components/form/Form'
+import BasicForm from '@/components/form/BasicForm'
 
 Vue.use(Router)
 
@@ -19,13 +21,13 @@ export default new Router({
     {
       path: '/form',
       name: '表单页',
-      component: Exception,
+      component: Form,
       icon: 'form',
       children: [
         {
           path: '/form/basic',
           name: '基础表单',
-          component: NotFound,
+          component: BasicForm,
           icon: 'none'
         },
         {