doc-search.vue 2.4 KB
<template>
    <div class="search-box">
        <i-form ref="formInline" inline>
            <i-form-item>
                <Input v-model="keyword" style="width: 300px;">
                    <Select v-model="searchType" slot="prepend" style="width: 100px">
                        <Option value="controller">controller</Option>
                        <Option value="keyword">关键词</Option>
                    </Select>
                </Input>
            </i-form-item>
            <i-form-item>
                <i-button type="primary" @click="searchGroup" v-show="store.groupName">搜当前分组</i-button>
                <i-button type="primary" @click="searchAll" >搜全部</i-button>
                <i-button type="warning" @click="reset">清空</i-button>
            </i-form-item>
        </i-form>
    </div>
</template>

<script>
import {
    FETCH_API_REQUEST
} from 'store/types';
import {mapState} from 'vuex';
export default {
    name: 'DocSearch',
    computed: {
        ...mapState(['store'])
    },
    data() {
        return {
            searchType: 'controller',
            keyword: ''
        };
    },
    methods: {
        searchGroup() {
            if (this.keyword) {
                this.$store.dispatch(FETCH_API_REQUEST, {
                    groupName: this.store.groupName,
                    keyword: this.keyword,
                    searchType: this.searchType
                }).then(() => {
                    window.scrollTo(0, 0);
                });
            }
        },
        searchAll() {
            if (this.keyword) {
                this.$store.dispatch(FETCH_API_REQUEST, {
                    groupName: '',
                    keyword: this.keyword,
                    searchType: this.searchType
                }).then(() => {
                    window.scrollTo(0, 0);
                });
            }
        },
        reset() {
            if (this.store.apiSearchType) {
                this.keyword = '';
                this.$store.dispatch(FETCH_API_REQUEST, {
                    groupName: this.store.groupName,
                    keyword: '',
                    searchType: ''
                }).then(() => {
                    window.scrollTo(0, 0);
                });
            }
        }
    }
};
</script>

<style lang="scss">
.search-box {
    padding: 20px;
    border-bottom: solid 1px #dddee1;

    .ivu-form-item {
        margin-bottom: 0;
    }
}
</style>