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

style(sj_1.0.0_beta4): 表格搜索按钮右靠齐

Browse Source
This commit is contained in:
xlsea 2024-06-04 15:44:56 +08:00
parent 8702f3f542
commit e1aef477cb
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/search-form.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { computed, ref } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form'; import { useNaiveForm } from '@/hooks/common/form';
@ -38,6 +38,11 @@ async function search() {
Object.assign(props.model, { ...props.model, page: 1 }); Object.assign(props.model, { ...props.model, page: 1 });
emit('search'); emit('search');
} }
const btnSpan = computed(() => {
const keyNum = Object.keys(props.model).length - 2;
return `24 m:12 m:${(4 - (keyNum % 4)) * 6}`;
});
</script> </script>
<template> <template>
@ -45,7 +50,7 @@ async function search() {
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile"> <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
<NGrid responsive="screen" item-responsive :y-gap="5"> <NGrid responsive="screen" item-responsive :y-gap="5">
<slot></slot> <slot></slot>
<NFormItemGi :y-gap="8" span="24 m:12 m:6" class="pr-24px lg:p-t-0 md:p-t-16px"> <NFormItemGi :y-gap="8" :span="btnSpan" class="pr-24px lg:p-t-0 md:p-t-16px">
<NSpace class="min-w-172px w-full" justify="end"> <NSpace class="min-w-172px w-full" justify="end">
<NButton @click="reset"> <NButton @click="reset">
<template #icon> <template #icon>

3
src/views/user/manager/index.vue
View File

@ -25,8 +25,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
size: 10, size: 10,
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
// the value can not be undefined, otherwise the property in Form will not be reactive // the value can not be undefined, otherwise the property in Form will not be reactive
username: null, username: null
role: null
}, },
columns: () => [ columns: () => [
{ {