fix search header style
This commit is contained in:
@@ -5,7 +5,6 @@
|
|||||||
v-model.trim="keyword"
|
v-model.trim="keyword"
|
||||||
class="search"
|
class="search"
|
||||||
placeholder="搜索编码、姓名、电话"
|
placeholder="搜索编码、姓名、电话"
|
||||||
clearable
|
|
||||||
borderless
|
borderless
|
||||||
/>
|
/>
|
||||||
<t-button
|
<t-button
|
||||||
@@ -245,7 +244,7 @@ async function doExport(): Promise<void> {
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.customer-list {
|
.customer-list {
|
||||||
padding: calc(var(--app-nav-height)) 0 5.5rem 0;
|
padding: var(--app-nav-height) 0 5.5rem 0;
|
||||||
|
|
||||||
.filter {
|
.filter {
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
@@ -261,7 +260,7 @@ async function doExport(): Promise<void> {
|
|||||||
|
|
||||||
.search {
|
.search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid rgba(148, 163, 184, .28);
|
border: 1px solid var(--td-component-border);
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
|
|||||||
+35
-29
@@ -1,12 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-can="corePermissionCodes.tag.read" class="tag-list">
|
<div v-can="corePermissionCodes.tag.read" class="tag-list">
|
||||||
<t-input
|
<div class="header bg-white">
|
||||||
v-model.trim="keyword"
|
<t-input
|
||||||
class="search"
|
v-model.trim="keyword"
|
||||||
type="search"
|
class="search"
|
||||||
borderless
|
type="search"
|
||||||
placeholder="搜索标签"
|
borderless
|
||||||
/>
|
placeholder="搜索标签"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<t-pull-down-refresh
|
<t-pull-down-refresh
|
||||||
v-model="isRefreshing"
|
v-model="isRefreshing"
|
||||||
:refresh-timeout="30000"
|
:refresh-timeout="30000"
|
||||||
@@ -34,12 +36,6 @@
|
|||||||
<div v-if="!tagList.length" class="empty" v-text="emptyText" />
|
<div v-if="!tagList.length" class="empty" v-text="emptyText" />
|
||||||
<div v-if="tagList.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
<div v-if="tagList.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||||
</t-pull-down-refresh>
|
</t-pull-down-refresh>
|
||||||
<t-button v-can="corePermissionCodes.tag.create" class="create" theme="primary" @click="openCreateDialog">
|
|
||||||
<template #icon>
|
|
||||||
<t-icon name="add" />
|
|
||||||
</template>
|
|
||||||
新增标签
|
|
||||||
</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
<t-dialog
|
<t-dialog
|
||||||
v-model:visible="editDialogVisible"
|
v-model:visible="editDialogVisible"
|
||||||
@@ -65,6 +61,7 @@
|
|||||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||||
import { type Page, useUserStore } from "timi-web";
|
import { type Page, useUserStore } from "timi-web";
|
||||||
import TagAPI from "@/api/TagAPI";
|
import TagAPI from "@/api/TagAPI";
|
||||||
|
import { useNavBarStore } from "@/store/navBarStore";
|
||||||
import type { Tag } from "@/types/Tag";
|
import type { Tag } from "@/types/Tag";
|
||||||
import { corePermissionCodes } from "@/utils/permission";
|
import { corePermissionCodes } from "@/utils/permission";
|
||||||
import { Message } from "@/utils/message.ts";
|
import { Message } from "@/utils/message.ts";
|
||||||
@@ -74,6 +71,7 @@ defineOptions({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
const navBarStore = useNavBarStore();
|
||||||
|
|
||||||
const pageSize = 100;
|
const pageSize = 100;
|
||||||
const keyword = ref("");
|
const keyword = ref("");
|
||||||
@@ -250,7 +248,13 @@ async function removeTag(id: string): Promise<void> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(reload);
|
onMounted(async () => {
|
||||||
|
navBarStore.clearRight();
|
||||||
|
if (userStore.hasPermissions(corePermissionCodes.tag.create)) {
|
||||||
|
navBarStore.setRightText("新增", "var(--td-brand-color)", openCreateDialog);
|
||||||
|
}
|
||||||
|
await reload();
|
||||||
|
});
|
||||||
|
|
||||||
watch(keyword, () => {
|
watch(keyword, () => {
|
||||||
window.clearTimeout(keywordTimer);
|
window.clearTimeout(keywordTimer);
|
||||||
@@ -260,18 +264,33 @@ watch(keyword, () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
navBarStore.clearRight();
|
||||||
window.clearTimeout(keywordTimer);
|
window.clearTimeout(keywordTimer);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.tag-list {
|
.tag-list {
|
||||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
padding: var(--app-nav-height) 0 2rem 0;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
top: var(--app-nav-height);
|
||||||
|
z-index: 10;
|
||||||
|
padding: .5rem;
|
||||||
|
position: sticky;
|
||||||
|
box-shadow: var(--td-shadow-1);
|
||||||
|
|
||||||
|
.search {
|
||||||
|
border: 1px solid var(--td-component-border);
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tag-panel {
|
.tag-panel {
|
||||||
gap: .75rem;
|
gap: .75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 1rem;
|
padding: 1rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
@@ -311,13 +330,6 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
|
||||||
margin: 0 1rem 1rem;
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
border: 1px solid var(--td-component-border);
|
|
||||||
border-radius: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
color: #52607a;
|
color: #52607a;
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
@@ -330,12 +342,6 @@ onUnmounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create {
|
|
||||||
left: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-dialog {
|
.edit-dialog {
|
||||||
|
|||||||
Reference in New Issue
Block a user