新增TagSelect组件

chenghx

2018-08-03 9a4afee5c2e51faa179786965d802e94997fec1b

新增TagSelect组件

 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">

 src/components/list/ApplicationList.vue

File was deleted

 src/components/list/ArticleList.vue

File was deleted

 src/components/list/ProjectList.vue

File was deleted

 src/components/list/Search/ApplicationList.vue

New file
@@ -0,0 +1,21 @@
<template>
  <div>
    <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: {SearchForm, ACard}
}
</script>

<style scoped>

</style>

 src/components/list/Search/ArticleList.vue

New file
@@ -0,0 +1,21 @@
<template>
  <div>
    <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: {SearchForm, ACard}
}
</script>

<style scoped>

</style>

 src/components/list/Search/ProjectList.vue

New file
@@ -0,0 +1,21 @@
<template>
  <div>
    <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: {SearchForm, ACard}
}
</script>

<style scoped>

</style>

 src/components/list/Search/SearchForm.vue

New file
@@ -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>

 src/components/list/Search/SearchLayout.vue

File was renamed from src/components/list/SearchLayout.vue
@@ -32,11 +32,11 @@
  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 @@
          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')

 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 @@
          font-size: 20px;
          font-weight: 500;
          color: rgba(0,0,0,.85);
          margin-bottom: 16px;
        }
        .content{
          margin-bottom: 16px;

 src/components/tool/TagSelect.vue

New file
@@ -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>

 src/components/tool/TagSelectOption.vue

New file
@@ -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>

 src/router/index.js

@@ -16,10 +16,10 @@
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'