perf: 优化搜索组件

This commit is contained in:
kuaifan 2025-03-18 18:36:20 +08:00
parent 378e270f41
commit c64c436b9f
10 changed files with 125 additions and 80 deletions

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

View File

@ -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: "诈骗诱导转账" },

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -660,6 +660,10 @@ body {
> button + button {
margin-left: 8px;
}
.ivu-btn-text {
box-shadow: none;
}
}
}
}