xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-21 02:56:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(projects): Manage search area using collapsed components , close #537 (#549)

Browse Source
This commit is contained in:
paynezhuang 2024-07-15 14:46:04 +08:00 committed by GitHub
parent fcf866783c
commit 074077dfaa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 104 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,6 +46,8 @@ declare module 'vue' {
NButton: typeof import('naive-ui')['NButton'] NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard'] NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox'] NCheckbox: typeof import('naive-ui')['NCheckbox']
NCollapse: typeof import('naive-ui')['NCollapse']
NCollapseItem: typeof import('naive-ui')['NCollapseItem']
NColorPicker: typeof import('naive-ui')['NColorPicker'] NColorPicker: typeof import('naive-ui')['NColorPicker']
NDataTable: typeof import('naive-ui')['NDataTable'] NDataTable: typeof import('naive-ui')['NDataTable']
NDescriptions: typeof import('naive-ui')['NDescriptions'] NDescriptions: typeof import('naive-ui')['NDescriptions']

74
src/views/manage/role/modules/role-search.vue
View File

@ -26,41 +26,45 @@ function search() {
</script> </script>
<template> <template>
<NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper"> <NCard :bordered="false" size="small" class="card-wrapper">
<NForm :model="model" label-placement="left" :label-width="80"> <NCollapse default-expanded-names="role-search">
<NGrid responsive="screen" item-responsive> <NCollapseItem :title="$t('common.search')" name="role-search">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px"> <NForm :model="model" label-placement="left" :label-width="80">
<NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" /> <NGrid responsive="screen" item-responsive>
</NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px"> <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
<NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" /> </NFormItemGi>
</NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="status" class="pr-24px"> <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
<NSelect </NFormItemGi>
v-model:value="model.status" <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="status" class="pr-24px">
:placeholder="$t('page.manage.role.form.roleStatus')" <NSelect
:options="translateOptions(enableStatusOptions)" v-model:value="model.status"
clearable :placeholder="$t('page.manage.role.form.roleStatus')"
/> :options="translateOptions(enableStatusOptions)"
</NFormItemGi> clearable
<NFormItemGi span="24 s:12 m:6"> />
<NSpace class="w-full" justify="end"> </NFormItemGi>
<NButton @click="reset"> <NFormItemGi span="24 s:12 m:6">
<template #icon> <NSpace class="w-full" justify="end">
<icon-ic-round-refresh class="text-icon" /> <NButton @click="reset">
</template> <template #icon>
{{ $t('common.reset') }} <icon-ic-round-refresh class="text-icon" />
</NButton> </template>
<NButton type="primary" ghost @click="search"> {{ $t('common.reset') }}
<template #icon> </NButton>
<icon-ic-round-search class="text-icon" /> <NButton type="primary" ghost @click="search">
</template> <template #icon>
{{ $t('common.search') }} <icon-ic-round-search class="text-icon" />
</NButton> </template>
</NSpace> {{ $t('common.search') }}
</NFormItemGi> </NButton>
</NGrid> </NSpace>
</NForm> </NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard> </NCard>
</template> </template>

112
src/views/manage/user/modules/user-search.vue
View File

@ -43,55 +43,69 @@ async function search() {
</script> </script>
<template> <template>
<NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper"> <NCard :bordered="false" size="small" class="card-wrapper">
<NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80"> <NCollapse>
<NGrid responsive="screen" item-responsive> <NCollapseItem :title="$t('common.search')" name="user-search">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userName')" path="userName" class="pr-24px"> <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
<NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" /> <NGrid responsive="screen" item-responsive>
</NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userName')" path="userName" class="pr-24px">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userGender')" path="userGender" class="pr-24px"> <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
<NSelect </NFormItemGi>
v-model:value="model.userGender" <NFormItemGi
:placeholder="$t('page.manage.user.form.userGender')" span="24 s:12 m:6"
:options="translateOptions(userGenderOptions)" :label="$t('page.manage.user.userGender')"
clearable path="userGender"
/> class="pr-24px"
</NFormItemGi> >
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.nickName')" path="nickName" class="pr-24px"> <NSelect
<NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" /> v-model:value="model.userGender"
</NFormItemGi> :placeholder="$t('page.manage.user.form.userGender')"
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userPhone')" path="userPhone" class="pr-24px"> :options="translateOptions(userGenderOptions)"
<NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" /> clearable
</NFormItemGi> />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px"> </NFormItemGi>
<NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" /> <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.nickName')" path="nickName" class="pr-24px">
</NFormItemGi> <NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userStatus')" path="userStatus" class="pr-24px"> </NFormItemGi>
<NSelect <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userPhone')" path="userPhone" class="pr-24px">
v-model:value="model.status" <NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
:placeholder="$t('page.manage.user.form.userStatus')" </NFormItemGi>
:options="translateOptions(enableStatusOptions)" <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px">
clearable <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
/> </NFormItemGi>
</NFormItemGi> <NFormItemGi
<NFormItemGi span="24 m:12" class="pr-24px"> span="24 s:12 m:6"
<NSpace class="w-full" justify="end"> :label="$t('page.manage.user.userStatus')"
<NButton @click="reset"> path="userStatus"
<template #icon> class="pr-24px"
<icon-ic-round-refresh class="text-icon" /> >
</template> <NSelect
{{ $t('common.reset') }} v-model:value="model.status"
</NButton> :placeholder="$t('page.manage.user.form.userStatus')"
<NButton type="primary" ghost @click="search"> :options="translateOptions(enableStatusOptions)"
<template #icon> clearable
<icon-ic-round-search class="text-icon" /> />
</template> </NFormItemGi>
{{ $t('common.search') }} <NFormItemGi span="24 m:12" class="pr-24px">
</NButton> <NSpace class="w-full" justify="end">
</NSpace> <NButton @click="reset">
</NFormItemGi> <template #icon>
</NGrid> <icon-ic-round-refresh class="text-icon" />
</NForm> </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>
</NCollapseItem>
</NCollapse>
</NCard> </NCard>
</template> </template>