mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
perf: 优化搜索组件
This commit is contained in:
parent
378e270f41
commit
c64c436b9f
52
resources/assets/js/components/SearchButton.vue
Normal file
52
resources/assets/js/components/SearchButton.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div v-if="windowTouch">
|
||||
<Button :loading="loading" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<Button v-if="filtering" type="text" @click="onCancelFilter">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loading" type="text" icon="md-refresh" @click="onRefresh">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
<Tooltip
|
||||
v-else
|
||||
theme="light"
|
||||
:placement="placement"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loading" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="filtering" type="text" @click="onCancelFilter">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loading" type="text" @click="onRefresh">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SearchButton',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filtering: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSearch() {
|
||||
this.$emit('search');
|
||||
},
|
||||
onRefresh() {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
onCancelFilter() {
|
||||
this.$emit('cancelFilter');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -33,14 +33,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip theme="light" placement="right" transfer-class-name="search-button-clear" transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search"
|
||||
@click="onSearch">{{ $L('搜索') }}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs = false">{{ $L('取消筛选') }}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{ $L('刷新') }}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -54,8 +53,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "ComplaintManagement",
|
||||
components: {SearchButton},
|
||||
data() {
|
||||
const typeList = [
|
||||
{ id: 10, label: "诈骗诱导转账" },
|
||||
|
||||
@ -17,17 +17,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -55,8 +51,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "ProjectArchived",
|
||||
components: {SearchButton},
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
|
||||
@ -41,17 +41,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -79,8 +75,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "ProjectManagement",
|
||||
components: {SearchButton},
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
|
||||
@ -36,17 +36,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -79,8 +75,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "ReportMy",
|
||||
components: {SearchButton},
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
|
||||
@ -66,17 +66,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -129,10 +125,11 @@
|
||||
|
||||
<script>
|
||||
import Forwarder from "./Forwarder/index.vue";
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "ReportReceive",
|
||||
components: {Forwarder},
|
||||
components: {SearchButton, Forwarder},
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
|
||||
@ -45,17 +45,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -84,9 +80,11 @@
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "TaskArchived",
|
||||
components: {SearchButton},
|
||||
props: {
|
||||
projectId: {
|
||||
type: Number,
|
||||
|
||||
@ -45,17 +45,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="right"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -84,9 +80,11 @@
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
|
||||
export default {
|
||||
name: "TaskDeleted",
|
||||
components: {SearchButton},
|
||||
props: {
|
||||
projectId: {
|
||||
type: Number,
|
||||
|
||||
@ -142,17 +142,13 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="search-button">
|
||||
<Tooltip
|
||||
theme="light"
|
||||
<SearchButton
|
||||
:loading="loadIng > 0"
|
||||
:filtering="keyIs"
|
||||
placement="bottom"
|
||||
transfer-class-name="search-button-clear"
|
||||
transfer>
|
||||
<Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
|
||||
<div slot="content">
|
||||
<Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
|
||||
<Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@search="onSearch"
|
||||
@refresh="getLists"
|
||||
@cancelFilter="keyIs=false"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -369,11 +365,12 @@ import UserSelect from "../../../components/UserSelect.vue";
|
||||
import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
|
||||
import ImgUpload from "../../../components/ImgUpload";
|
||||
import ResizeLine from "../../../components/ResizeLine.vue";
|
||||
import SearchButton from "../../../components/SearchButton.vue";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "TeamManagement",
|
||||
components: {ResizeLine, UserAvatarTip, UserSelect, ImgUpload},
|
||||
components: {SearchButton, ResizeLine, UserAvatarTip, UserSelect, ImgUpload},
|
||||
props: {
|
||||
checkinMode: {
|
||||
type: Boolean,
|
||||
|
||||
4
resources/assets/sass/pages/common.scss
vendored
4
resources/assets/sass/pages/common.scss
vendored
@ -660,6 +660,10 @@ body {
|
||||
> button + button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.ivu-btn-text {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user