From 1ce46133c5a892be6fc7016bfddfa2ac994af927 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Tue, 24 Jul 2018 18:02:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BA=95=E9=83=A8=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=A0=8FFooterToolBar=E3=80=81=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=A8=A1=E5=9D=97=EF=BC=88=E9=AB=98=E7=BA=A7?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=EF=BC=89=E3=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/advancedForm/AdvancedForm.vue        |  56 ++++++
 .../form/advancedForm/RepositoryForm.vue      | 128 ++++++++++++++
 .../form/advancedForm/TableForm.vue           | 166 ++++++++++++++++++
 src/components/form/advancedForm/TaskForm.vue | 120 +++++++++++++
 src/components/form/index.js                  |   0
 src/components/form/{ => stepForm}/Step1.vue  |   0
 src/components/form/{ => stepForm}/Step2.vue  |   0
 src/components/form/{ => stepForm}/Step3.vue  |   2 +-
 .../form/{ => stepForm}/StepForm.vue          |   0
 src/components/layout/GloablLayout.vue        |   2 +-
 src/components/tool/FooterToolBar.vue         |  32 ++++
 src/router/index.js                           |   5 +-
 12 files changed, 507 insertions(+), 4 deletions(-)
 create mode 100644 src/components/form/advancedForm/AdvancedForm.vue
 create mode 100644 src/components/form/advancedForm/RepositoryForm.vue
 create mode 100644 src/components/form/advancedForm/TableForm.vue
 create mode 100644 src/components/form/advancedForm/TaskForm.vue
 delete mode 100644 src/components/form/index.js
 rename src/components/form/{ => stepForm}/Step1.vue (100%)
 rename src/components/form/{ => stepForm}/Step2.vue (100%)
 rename src/components/form/{ => stepForm}/Step3.vue (94%)
 rename src/components/form/{ => stepForm}/StepForm.vue (100%)
 create mode 100644 src/components/tool/FooterToolBar.vue

diff --git a/src/components/form/advancedForm/AdvancedForm.vue b/src/components/form/advancedForm/AdvancedForm.vue
new file mode 100644
index 0000000..7244d62
--- /dev/null
+++ b/src/components/form/advancedForm/AdvancedForm.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <a-card class="card" title="仓库管理" :bordered="false">
+      <repository-form ref="repository" :showSubmit="false" />
+    </a-card>
+    <a-card class="card" title="任务管理" :bordered="false">
+      <task-form ref="task" :showSubmit="false" />
+    </a-card>
+    <a-card title="用户管理" :bordered="false">
+      <table-form />
+    </a-card>
+    <footer-tool-bar>
+      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+    </footer-tool-bar>
+  </div>
+</template>
+
+<script>
+import ACard from 'vue-antd-ui/es/card/Card'
+import RepositoryForm from './RepositoryForm'
+import TaskForm from './TaskForm'
+import TableForm from './TableForm'
+import FooterToolBar from '../../tool/FooterToolBar'
+import AButton from 'vue-antd-ui/es/button/button'
+
+export default {
+  name: 'AdvancedForm',
+  components: {AButton, FooterToolBar, TableForm, TaskForm, RepositoryForm, ACard},
+  data () {
+    return {
+      desc: '高级表单常见于一次性输入和提交大批量数据的场景。',
+      loading: false
+    }
+  },
+  methods: {
+    validate () {
+      this.$refs.repository.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+      this.$refs.task.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .card{
+    margin-bottom: 24px;
+  }
+</style>
diff --git a/src/components/form/advancedForm/RepositoryForm.vue b/src/components/form/advancedForm/RepositoryForm.vue
new file mode 100644
index 0000000..cb2cfbd
--- /dev/null
+++ b/src/components/form/advancedForm/RepositoryForm.vue
@@ -0,0 +1,128 @@
+<template>
+  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="仓库名"
+          fieldDecoratorId="repository.name"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入仓库名称" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="仓库域名"
+          fieldDecoratorId="repository.domain"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
+        >
+          <a-input addonBefore="http://" addonAfter=".github.io" placeholder="请输入"/>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库管理员"
+          fieldDecoratorId="repository.manager"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
+        >
+          <a-select placeholder="请选择管理员">
+            <a-select-option value="王同学">王同学</a-select-option>
+            <a-select-option value="李同学">李同学</a-select-option>
+            <a-select-option value="黄同学">黄同学</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="审批人"
+          fieldDecoratorId="repository.auditor"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
+        >
+          <a-select placeholder="请选择审批员">
+            <a-select-option value="王晓丽">王晓丽</a-select-option>
+            <a-select-option value="李军">李军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="生效日期"
+          fieldDecoratorId="repository.effectiveDate"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
+        >
+          <a-range-picker />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库类型"
+          fieldDecoratorId="repository.type"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
+        >
+          <a-select placeholder="请选择仓库类型">
+            <a-select-option value="公开">公开</a-select-option>
+            <a-select-option value="私密">私密</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import AForm from 'vue-antd-ui/es/form/Form'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import ARow from 'vue-antd-ui/es/grid/Row'
+import AInput from 'vue-antd-ui/es/input/Input'
+import ASelect from 'vue-antd-ui/es/select/index'
+import ADatePicker from 'vue-antd-ui/es/date-picker'
+import AButton from 'vue-antd-ui/es/button/button'
+
+const ASelectOption = ASelect.Option
+const ARangePicker = ADatePicker.RangePicker
+
+export default {
+  name: 'RepositoryForm',
+  props: ['showSubmit'],
+  components: {AButton, ARangePicker, ASelectOption, ASelect, AInput, ARow, ACol, AFormItem, AForm},
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    },
+    validate (rule, value, f) {
+      if (value !== undefined && value !== 'iczer') {
+        f('输入\'iczer\'试下？')
+      }
+      f()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .form{
+    .form-row{
+      margin: 0 -8px
+    }
+    .ant-col-md-12,
+    .ant-col-sm-24,
+    .ant-col-lg-6,
+    .ant-col-lg-8,
+    .ant-col-lg-10,
+    .ant-col-xl-8,
+    .ant-col-xl-6{
+      padding: 0 8px
+    }
+  }
+</style>
diff --git a/src/components/form/advancedForm/TableForm.vue b/src/components/form/advancedForm/TableForm.vue
new file mode 100644
index 0000000..6cdac3f
--- /dev/null
+++ b/src/components/form/advancedForm/TableForm.vue
@@ -0,0 +1,166 @@
+<template>
+  <form :autoFormCreate="(form) => this.form = form">
+    <a-table
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="false"
+    >
+      <template  v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
+          <a-input
+            :key="col"
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            :placeholder="columns[i].title"
+            @change="e => handleChange(e.target.value, record.key, col)"
+          />
+          <template v-else>{{text}}</template>
+      </template>
+      <template slot="operation" slot-scope="text, record, index">
+        <template v-if="record.editable">
+          <span v-if="record.isNew">
+            <a @click="saveRow(record.key)">添加</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+            <span v-else>
+            <a @click="saveRow(record.key)">保存</a>
+            <a-divider type="vertical" />
+            <a @click="cancle(record.key)">取消</a>
+          </span>
+        </template>
+        <span v-else>
+          <a @click="toggle(record.key)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+            <a>删除</a>
+          </a-popconfirm>
+        </span>
+      </template>
+    </a-table>
+    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMeber">新增成员</a-button>
+  </form>
+</template>
+
+<script>
+import ATable from 'vue-antd-ui/es/table'
+import AButton from 'vue-antd-ui/es/button/button'
+import AInput from 'vue-antd-ui/es/input/Input'
+import ADivider from 'vue-antd-ui/es/divider/index'
+import APopconfirm from 'vue-antd-ui/es/popconfirm/index'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+
+const columns = [
+  {
+    title: '成员姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: '20%',
+    scopedSlots: { customRender: 'name' }
+  },
+  {
+    title: '工号',
+    dataIndex: 'workId',
+    key: 'workId',
+    width: '20%',
+    scopedSlots: { customRender: 'workId' }
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'department',
+    key: 'department',
+    width: '40%',
+    scopedSlots: { customRender: 'department' }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    scopedSlots: { customRender: 'operation' }
+  }
+]
+
+const dataSource = [
+  {
+    key: '1',
+    name: '小明',
+    workId: '001',
+    editable: false,
+    department: '行政部'
+  },
+  {
+    key: '2',
+    name: '李莉',
+    workId: '002',
+    editable: false,
+    department: 'IT部'
+  },
+  {
+    key: '3',
+    name: '王小帅',
+    workId: '003',
+    editable: false,
+    department: '财务部'
+  }
+]
+
+export default {
+  name: 'TableForm',
+  components: {AFormItem, APopconfirm, ADivider, AInput, AButton, ATable},
+  data () {
+    return {
+      columns,
+      dataSource
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+    },
+    newMeber () {
+      this.dataSource.push({
+        key: '99',
+        name: '',
+        workId: '',
+        department: '',
+        editable: true,
+        isNew: true
+      })
+    },
+    remove (key) {
+      const newData = this.dataSource.filter(item => item.key !== key)
+      this.dataSource = newData
+    },
+    saveRow (key) {
+      let target = this.dataSource.filter(item => item.key === key)[0]
+      target.editable = false
+      target.isNew = false
+    },
+    toggle (key) {
+      let target = this.dataSource.filter(item => item.key === key)[0]
+      target.editable = !target.editable
+    },
+    getRowByKey (key, newData) {
+      const data = this.dataSource
+      return (newData || data).filter(item => item.key === key)[0]
+    },
+    cancle (key) {
+      let target = this.dataSource.filter(item => item.key === key)[0]
+      target.editable = false
+    },
+    handleChange (value, key, column) {
+      const newData = [...this.dataSource]
+      const target = newData.filter(item => key === item.key)[0]
+      if (target) {
+        target[column] = value
+        this.dataSource = newData
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form/advancedForm/TaskForm.vue b/src/components/form/advancedForm/TaskForm.vue
new file mode 100644
index 0000000..f36c3da
--- /dev/null
+++ b/src/components/form/advancedForm/TaskForm.vue
@@ -0,0 +1,120 @@
+<template>
+  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="任务名"
+          fieldDecoratorId="task.name"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入任务名称" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="任务描述"
+          fieldDecoratorId="task.description"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入任务描述"/>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="执行人"
+          fieldDecoratorId="task.executor"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
+        >
+          <a-select placeholder="请选择执行人">
+            <a-select-option value="黄丽丽">黄丽丽</a-select-option>
+            <a-select-option value="李大刀">李大刀</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="责任人"
+          fieldDecoratorId="task.manager"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
+        >
+          <a-select placeholder="请选择责任人">
+            <a-select-option value="王伟">王伟</a-select-option>
+            <a-select-option value="李红军">李红军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="提醒时间"
+          fieldDecoratorId="task.time"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
+        >
+          <a-time-picker style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="任务类型"
+          fieldDecoratorId="task.type"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
+        >
+          <a-select placeholder="请选择任务类型">
+            <a-select-option value="定时执行">定时执行</a-select-option>
+            <a-select-option value="周期执行">周期执行</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import AForm from 'vue-antd-ui/es/form/Form'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import ARow from 'vue-antd-ui/es/grid/Row'
+import AInput from 'vue-antd-ui/es/input/Input'
+import ASelect from 'vue-antd-ui/es/select/index'
+import AButton from 'vue-antd-ui/es/button/button'
+import ATimePicker from 'vue-antd-ui/es/time-picker/index'
+
+const ASelectOption = ASelect.Option
+
+export default {
+  name: 'TaskForm',
+  props: ['showSubmit'],
+  components: {ATimePicker, AButton, ASelectOption, ASelect, AInput, ARow, ACol, AFormItem, AForm},
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .form{
+    .form-row{
+      margin: 0 -8px
+    }
+    .ant-col-md-12,
+    .ant-col-sm-24,
+    .ant-col-lg-6,
+    .ant-col-lg-8,
+    .ant-col-lg-10,
+    .ant-col-xl-8,
+    .ant-col-xl-6{
+      padding: 0 8px
+    }
+  }
+</style>
diff --git a/src/components/form/index.js b/src/components/form/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/form/Step1.vue b/src/components/form/stepForm/Step1.vue
similarity index 100%
rename from src/components/form/Step1.vue
rename to src/components/form/stepForm/Step1.vue
diff --git a/src/components/form/Step2.vue b/src/components/form/stepForm/Step2.vue
similarity index 100%
rename from src/components/form/Step2.vue
rename to src/components/form/stepForm/Step2.vue
diff --git a/src/components/form/Step3.vue b/src/components/form/stepForm/Step3.vue
similarity index 94%
rename from src/components/form/Step3.vue
rename to src/components/form/stepForm/Step3.vue
index 8695f82..9aa6bfe 100644
--- a/src/components/form/Step3.vue
+++ b/src/components/form/stepForm/Step3.vue
@@ -14,7 +14,7 @@
 import AForm from 'vue-antd-ui/es/form/Form'
 import AFormItem from 'vue-antd-ui/es/form/FormItem'
 import AButton from 'vue-antd-ui/es/button/button'
-import Result from '../result/Result'
+import Result from '../../result/Result'
 export default {
   name: 'Step3',
   components: {Result, AButton, AFormItem, AForm},
diff --git a/src/components/form/StepForm.vue b/src/components/form/stepForm/StepForm.vue
similarity index 100%
rename from src/components/form/StepForm.vue
rename to src/components/form/stepForm/StepForm.vue
diff --git a/src/components/layout/GloablLayout.vue b/src/components/layout/GloablLayout.vue
index 2404dfc..cca99ed 100644
--- a/src/components/layout/GloablLayout.vue
+++ b/src/components/layout/GloablLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <a-layout>
-    <a-layout-sider width="256px" collapsible v-model="collapsed" :trigger="null">
+    <a-layout-sider width="256px" style="z-index: 10" collapsible v-model="collapsed" :trigger="null">
       <div class="logo">
         <a href="/">
           <img src="static/img/vue-antd-logo.png">
diff --git a/src/components/tool/FooterToolBar.vue b/src/components/tool/FooterToolBar.vue
new file mode 100644
index 0000000..12a0dae
--- /dev/null
+++ b/src/components/tool/FooterToolBar.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="toolbar">
+    <div style="float: left">
+      <slot name="extra"></slot>
+    </div>
+    <div style="float: right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FooterToolBar'
+}
+</script>
+
+<style lang="less" scoped>
+  .toolbar{
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    height: 56px;
+    line-height: 56px;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    padding: 0 24px;
+    z-index: 9;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 8997e88..4761b9b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,8 @@ import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
 import Form from '@/components/form/Form'
 import BasicForm from '@/components/form/BasicForm'
-import StepForm from '@/components/form/StepForm'
+import StepForm from '@/components/form/stepForm/StepForm'
+import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
 
 Vue.use(Router)
 
@@ -40,7 +41,7 @@ export default new Router({
         {
           path: '/form/advanced',
           name: '高级表单',
-          component: NotFound,
+          component: AdvancedForm,
           icon: 'none'
         }
       ]