GTsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化搜索框样式

Browse Source
This commit is contained in:
xlsea 2024-04-18 09:47:26 +08:00
parent 41aef1cd1e
commit bf075380e1
12 changed files with 142 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/operate-drawer.vue
View File

@ -3,7 +3,7 @@ import { computed, nextTick, onUnmounted, reactive, ref, watch } from 'vue';
import { useAppStore } from '@/store/modules/app';
defineOptions({
name: 'NamespaceOperateDrawer'
name: 'OperateDrawer'
});
interface Props {

67
src/components/common/search-form.vue Normal file
View File

@ -0,0 +1,67 @@
<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({
name: 'SearchForm'
});
interface Props {
model: Record<string, any>;
}
defineProps<Props>();
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
async function reset() {
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive>
<slot></slot>
<NFormItemGi span="24 m:12 m:6" class="pr-24px lg:p-t-0 md:p-t-16px">
<NSpace class="min-w-172px w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
</template>
<style scoped></style>

9
src/typings/api.d.ts vendored
View File

@ -483,6 +483,8 @@ declare namespace Api {
groupName: string;
/** 业务ID */
businessId: string;
/** 业务名称 */
businessName?: string;
/** 状态 */
notifyStatus: string;
/** 通知类型 */
@ -514,12 +516,7 @@ declare namespace Api {
>;
/** notify-config list */
type NotifyConfigList = Common.PaginatingQueryRecord<
{
/** 业务名称 */
businessName: string;
} & NotifyConfig
>;
type NotifyConfigList = Common.PaginatingQueryRecord<NotifyConfig>;
}
/**

2
src/typings/components.d.ts vendored
View File

@ -89,6 +89,8 @@ declare module 'vue' {
ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Search: typeof import('../components/common/search-form.vue')['default']
SearchForm: typeof import('./../components/common/search-form.vue')['default']
SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']
SvgIcon: typeof import('./../components/custom/svg-icon.vue')['default']
SystemLogo: typeof import('./../components/common/system-logo.vue')['default']

15
src/views/group-config/index.vue
View File

@ -149,7 +149,13 @@ function edit(id: string) {
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<GroupConfigSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
<NCard :title="$t('page.groupConfig.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<NCard
:title="$t('page.groupConfig.title')"
:bordered="false"
size="small"
header-class="view-card-header"
class="sm:flex-1-hidden card-wrapper"
>
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
@ -164,7 +170,6 @@ function edit(id: string) {
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="962"
:loading="loading"
@ -183,8 +188,4 @@ function edit(id: string) {
</div>
</template>
<style scoped>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>
<style scoped></style>

22
src/views/group-config/modules/groupConfig-operate-drawer.vue
View File

@ -85,21 +85,13 @@ watch(visible, () => {
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
<NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
<NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
</NFormItem>
</NForm>
</OperateDrawer>
</template>
<style scoped></style>

45
src/views/group-config/modules/groupConfig-search.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { $t } from '@/locales';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({
name: 'GroupConfigSearch'
@ -13,51 +12,23 @@ interface Emits {
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.GroupConfig.GroupConfigSearchParams>('model', { required: true });
async function reset() {
await restoreValidation();
function reset() {
emit('reset');
}
async function search() {
await validate();
function search() {
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px">
<NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" />
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
<SearchForm :model="model" @search="search" @reset="reset">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px">
<NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" />
</NFormItemGi>
</SearchForm>
</template>
<style scoped>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>
<style scoped></style>

45
src/views/namepase/modules/namespace-search.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({
name: 'NamespaceSearch'
@ -15,51 +12,23 @@ interface Emits {
const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.Namespace.NamespaceSearchParams>('model', { required: true });
async function reset() {
await restoreValidation();
function reset() {
emit('reset');
}
async function search() {
await validate();
function search() {
emit('search');
}
</script>
<template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">
<NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" />
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
<SearchForm :model="model" @search="search" @reset="reset">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">
<NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" />
</NFormItemGi>
</SearchForm>
</template>
<style scoped></style>

63
src/views/notify/recipient/modules/notify-recipient-search.vue
View File

@ -1,8 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
import SearchForm from '@/components/common/search-form.vue';
defineOptions({
name: 'NotifyRecipientSearch'
@ -15,59 +13,32 @@ interface Emits {
const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.NotifyRecipient.NotifyRecipientParams>('model', { required: true });
async function reset() {
await restoreValidation();
function reset() {
emit('reset');
}
async function search() {
await validate();
function search() {
emit('search');
}
</script>
<template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive>
<NFormItemGi
span="24 s:12 m:6"
:label="$t('page.notifyRecipient.recipientName')"
path="userName"
class="pr-24px"
>
<NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px">
<NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable />
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
<SearchForm :model="model" @search="search" @reset="reset">
<NFormItemGi
span="24 s:12 m:6"
:label-width="100"
:label="$t('page.notifyRecipient.recipientName')"
path="userName"
class="pr-24px"
>
<NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px">
<NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable />
</NFormItemGi>
</SearchForm>
</template>
<style scoped></style>

57
src/views/notify/scene/modules/notify-config-search.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({
name: 'NotifyConfigSearch'
@ -15,57 +12,29 @@ interface Emits {
const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.NotifyConfig.NotifySearchParams>('model', { required: true });
async function reset() {
await restoreValidation();
function reset() {
emit('reset');
}
async function search() {
await validate();
function search() {
emit('search');
}
</script>
<template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.groupName')" path="userName" class="pr-24px">
<NSelect v-model:value="model.groupName" :placeholder="$t('page.notifyConfig.groupName')" clearable />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyStatus')" path="userName" class="pr-24px">
<NSelect v-model:value="model.notifyStatus" :placeholder="$t('page.notifyConfig.notifyStatus')" clearable />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyScene')" path="userName" class="pr-24px">
<NSelect v-model:value="model.notifyScene" :placeholder="$t('page.notifyConfig.notifyScene')" clearable />
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
<SearchForm :model="model" @search="search" @reset="reset">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.groupName')" path="userName" class="pr-24px">
<NSelect v-model:value="model.groupName" :placeholder="$t('page.notifyConfig.groupName')" clearable />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyStatus')" path="userName" class="pr-24px">
<NSelect v-model:value="model.notifyStatus" :placeholder="$t('page.notifyConfig.notifyStatus')" clearable />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyScene')" path="userName" class="pr-24px">
<NSelect v-model:value="model.notifyScene" :placeholder="$t('page.notifyConfig.notifyScene')" clearable />
</NFormItemGi>
</SearchForm>
</template>
<style scoped></style>

8
src/views/pods/index.vue
View File

@ -121,7 +121,7 @@ const { checkedRowKeys } = useTableOperate(data, getData);
:title="$t('page.pods.title')"
:bordered="false"
size="small"
header-style="font-weight: 800;"
header-class="view-card-header"
class="sm:flex-1-hidden card-wrapper"
>
<template #header-extra>
@ -150,8 +150,4 @@ const { checkedRowKeys } = useTableOperate(data, getData);
</div>
</template>
<style scoped>
:deep(.n-card-header) {
--n-title-font-weight: 600 !important;
}
</style>
<style scoped></style>

45
src/views/pods/modules/pods-search.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
defineOptions({
name: 'PodsSearch'
@ -15,51 +12,23 @@ interface Emits {
const emit = defineEmits<Emits>();
const appStore = useAppStore();
const title = ref(appStore.isMobile ? $t('common.search') : undefined);
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.Dashboard.DashboardPodsParams>('model', { required: true });
async function reset() {
await restoreValidation();
function reset() {
emit('reset');
}
async function search() {
await validate();
function search() {
emit('search');
}
</script>
<template>
<NCard :title="title" :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="60" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">
<NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" />
</NFormItemGi>
<NFormItemGi span="24 m:12" class="pr-24px">
<NSpace class="w-full">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCard>
<SearchForm :model="model" @search="search" @reset="reset">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">
<NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" />
</NFormItemGi>
</SearchForm>
</template>
<style scoped></style>