From 9a4afee5c2e51faa179786965d802e94997fec1b Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Fri, 3 Aug 2018 17:58:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9ETagSelect=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/PageLayout.vue          |  2 +-
 .../list/{ => Search}/ApplicationList.vue     |  8 ++--
 .../list/{ => Search}/ArticleList.vue         |  8 ++--
 .../list/{ => Search}/ProjectList.vue         |  8 ++--
 src/components/list/Search/SearchForm.vue     | 46 +++++++++++++++++++
 .../list/{ => Search}/SearchLayout.vue        |  7 +--
 src/components/page/PageHeader.vue            |  5 +-
 src/components/tool/TagSelect.vue             | 36 +++++++++++++++
 src/components/tool/TagSelectOption.vue       | 34 ++++++++++++++
 src/router/index.js                           |  8 ++--
 10 files changed, 143 insertions(+), 19 deletions(-)
 rename src/components/list/{ => Search}/ApplicationList.vue (58%)
 rename src/components/list/{ => Search}/ArticleList.vue (57%)
 rename src/components/list/{ => Search}/ProjectList.vue (57%)
 create mode 100644 src/components/list/Search/SearchForm.vue
 rename src/components/list/{ => Search}/SearchLayout.vue (94%)
 create mode 100644 src/components/tool/TagSelect.vue
 create mode 100644 src/components/tool/TagSelectOption.vue

diff --git a/src/components/layout/PageLayout.vue b/src/components/layout/PageLayout.vue
index 1e9d9a8..846fe4a 100644
--- a/src/components/layout/PageLayout.vue
+++ b/src/components/layout/PageLayout.vue
@@ -2,7 +2,7 @@
   <div style="margin: -24px -24px 0px">
     <page-header :breadcrumb="breadcrumb" :title="title" :logo="avatar">
       <slot slot="content" name="headerContent"></slot>
-      <div slot="content" v-if="!this.$slots.headerContent">
+      <div slot="content" v-if="!this.$slots.headerContent && desc">
         <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
         <div class="link">
           <template  v-for="(link, index) in linkList">
diff --git a/src/components/list/ApplicationList.vue b/src/components/list/Search/ApplicationList.vue
similarity index 58%
rename from src/components/list/ApplicationList.vue
rename to src/components/list/Search/ApplicationList.vue
index e9c6ce0..ca1e2f8 100644
--- a/src/components/list/ApplicationList.vue
+++ b/src/components/list/Search/ApplicationList.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
-    <a-card style="" :bordered="false">
-      bbb
+    <search-form />
+    <a-card :bordered="false">
+      contentB
     </a-card>
   </div>
 </template>
 
 <script>
 import ACard from 'vue-antd-ui/es/card/Card'
+import SearchForm from './SearchForm'
 export default {
   name: 'ApplicationList',
-  components: {ACard}
+  components: {SearchForm, ACard}
 }
 </script>
 
diff --git a/src/components/list/ArticleList.vue b/src/components/list/Search/ArticleList.vue
similarity index 57%
rename from src/components/list/ArticleList.vue
rename to src/components/list/Search/ArticleList.vue
index 72d4411..c1e9859 100644
--- a/src/components/list/ArticleList.vue
+++ b/src/components/list/Search/ArticleList.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
-    <a-card style="" :bordered="false">
-      aaaa
+    <search-form />
+    <a-card :bordered="false">
+      contentA
     </a-card>
   </div>
 </template>
 
 <script>
 import ACard from 'vue-antd-ui/es/card/Card'
+import SearchForm from './SearchForm'
 export default {
   name: 'ArticleList',
-  components: {ACard}
+  components: {SearchForm, ACard}
 }
 </script>
 
diff --git a/src/components/list/ProjectList.vue b/src/components/list/Search/ProjectList.vue
similarity index 57%
rename from src/components/list/ProjectList.vue
rename to src/components/list/Search/ProjectList.vue
index 0f46f2a..31b20d5 100644
--- a/src/components/list/ProjectList.vue
+++ b/src/components/list/Search/ProjectList.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
-    <a-card style="" :bordered="false">
-      ccc
+    <search-form />
+    <a-card :bordered="false">
+      contentC
     </a-card>
   </div>
 </template>
 
 <script>
 import ACard from 'vue-antd-ui/es/card/Card'
+import SearchForm from './SearchForm'
 export default {
   name: 'ProjectList',
-  components: {ACard}
+  components: {SearchForm, ACard}
 }
 </script>
 
diff --git a/src/components/list/Search/SearchForm.vue b/src/components/list/Search/SearchForm.vue
new file mode 100644
index 0000000..1f26b06
--- /dev/null
+++ b/src/components/list/Search/SearchForm.vue
@@ -0,0 +1,46 @@
+<template>
+  <a-card :bordered="false" class="search-form">
+    <a-form>
+      <a-form-item
+        label="所属类目"
+        :labelCol="{span: 1}"
+        :wrapperCol="{span: 23}"
+      >
+        <tag-select>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+          <tag-select-option>科目一</tag-select-option>
+        </tag-select>
+      </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 TagSelect from '../../tool/TagSelect'
+
+const TagSelectOption = TagSelect.Option
+
+export default {
+  name: 'SearchForm',
+  components: {TagSelectOption, TagSelect, AInput, AFormItem, AForm, ACard}
+}
+</script>
+
+<style lang="less" scoped>
+  .search-form{
+    margin-bottom: 24px;
+  }
+</style>
diff --git a/src/components/list/SearchLayout.vue b/src/components/list/Search/SearchLayout.vue
similarity index 94%
rename from src/components/list/SearchLayout.vue
rename to src/components/list/Search/SearchLayout.vue
index 64fd6eb..1f9b833 100644
--- a/src/components/list/SearchLayout.vue
+++ b/src/components/list/Search/SearchLayout.vue
@@ -32,11 +32,11 @@ export default {
   components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput},
   data () {
     return {
-      activeKey: ''
+      activeKey: '1'
     }
   },
   watch: {
-    '$route': (val) => {
+    '$route': function (val) {
       switch (val.path) {
         case '/list/search/article':
           this.activeKey = '1'
@@ -48,12 +48,13 @@ export default {
           this.activeKey = '3'
           break
         default:
-          this.activeKey = '1'
+          this.activeKey = '2'
       }
     }
   },
   methods: {
     navigate (key) {
+      this.activeKey = key
       switch (key) {
         case '1':
           this.$router.push('/list/search/article')
diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
index 4a82712..c072980 100644
--- a/src/components/page/PageHeader.vue
+++ b/src/components/page/PageHeader.vue
@@ -14,8 +14,8 @@
           <div class="action"><slot name="action"></slot></div>
         </div>
         <div class="row">
-          <div class="content"><slot name="content"></slot></div>
-          <div class="extra"><slot name="extra"></slot></div>
+          <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
+          <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
         </div>
       </div>
 
@@ -80,6 +80,7 @@ export default {
           font-size: 20px;
           font-weight: 500;
           color: rgba(0,0,0,.85);
+          margin-bottom: 16px;
         }
         .content{
           margin-bottom: 16px;
diff --git a/src/components/tool/TagSelect.vue b/src/components/tool/TagSelect.vue
new file mode 100644
index 0000000..9297bed
--- /dev/null
+++ b/src/components/tool/TagSelect.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="tag-select">
+    <tag-select-option>全部</tag-select-option>
+    <slot></slot>
+    <a class="trigger">展开<a-icon type="down"/></a>
+  </div>
+</template>
+
+<script>
+import ASelect from 'vue-antd-ui/es/select/index'
+import ACheckableTag from 'vue-antd-ui/es/tag/CheckableTag'
+import TagSelectOption from './TagSelectOption'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+export default {
+  name: 'TagSelect',
+  Option: TagSelectOption,
+  components: {AIcon, TagSelectOption, ACheckableTag, ASelect}
+}
+</script>
+
+<style lang="less" scoped>
+  .tag-select{
+    user-select: none;
+    margin-left: -8px;
+    position: relative;
+    overflow: hidden;
+    max-height: 32px;
+    line-height: 32px;
+    padding-right: 50px;
+  }
+  .trigger{
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+</style>
diff --git a/src/components/tool/TagSelectOption.vue b/src/components/tool/TagSelectOption.vue
new file mode 100644
index 0000000..74d2d38
--- /dev/null
+++ b/src/components/tool/TagSelectOption.vue
@@ -0,0 +1,34 @@
+<template>
+  <a-checkable-tag class="tag-default" v-model="checked">
+    <slot></slot>
+  </a-checkable-tag>
+</template>
+
+<script>
+import ACheckableTag from 'vue-antd-ui/es/tag/CheckableTag'
+export default {
+  name: 'TagSelectOption',
+  components: {ACheckableTag},
+  options: {
+    size: {
+      type: String,
+      required: false,
+      default: 'default'
+    }
+  },
+  data () {
+    return {
+      checked: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .tag-default{
+    font-size: 14px;
+    padding: 0 8px;
+    height: auto;
+    margin-right: 24px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 551c7cc..a7ddb12 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,10 +16,10 @@ import Error from '@/components/result/Error'
 import QueryList from '@/components/list/QueryList'
 import StandardList from '@/components/list/StandardList'
 import CardList from '@/components/list/CardList'
-import SearchLayout from '@/components/list/SearchLayout'
-import ArticleList from '@/components/list/ArticleList'
-import ApplicationList from '@/components/list/ApplicationList'
-import ProjectList from '@/components/list/ProjectList'
+import SearchLayout from '@/components/list/search/SearchLayout'
+import ArticleList from '@/components/list/search/ArticleList'
+import ApplicationList from '@/components/list/search/ApplicationList'
+import ProjectList from '@/components/list/search/ProjectList'
 import WorkPlace from '@/components/dashboard/WorkPlace'
 import Login from '@/components/login/Login'