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

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

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']

View File

@ -26,7 +26,9 @@ 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">
<NCollapse default-expanded-names="role-search">
<NCollapseItem :title="$t('common.search')" name="role-search">
<NForm :model="model" label-placement="left" :label-width="80"> <NForm :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive> <NGrid responsive="screen" item-responsive>
<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.roleName')" path="roleName" class="pr-24px">
@ -61,6 +63,8 @@ function search() {
</NFormItemGi> </NFormItemGi>
</NGrid> </NGrid>
</NForm> </NForm>
</NCollapseItem>
</NCollapse>
</NCard> </NCard>
</template> </template>

View File

@ -43,13 +43,20 @@ 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">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80"> <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive> <NGrid responsive="screen" item-responsive>
<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.userName')" path="userName" class="pr-24px">
<NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" /> <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
</NFormItemGi> </NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userGender')" path="userGender" class="pr-24px"> <NFormItemGi
span="24 s:12 m:6"
:label="$t('page.manage.user.userGender')"
path="userGender"
class="pr-24px"
>
<NSelect <NSelect
v-model:value="model.userGender" v-model:value="model.userGender"
:placeholder="$t('page.manage.user.form.userGender')" :placeholder="$t('page.manage.user.form.userGender')"
@ -66,7 +73,12 @@ async function search() {
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px"> <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px">
<NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" /> <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
</NFormItemGi> </NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userStatus')" path="userStatus" class="pr-24px"> <NFormItemGi
span="24 s:12 m:6"
:label="$t('page.manage.user.userStatus')"
path="userStatus"
class="pr-24px"
>
<NSelect <NSelect
v-model:value="model.status" v-model:value="model.status"
:placeholder="$t('page.manage.user.form.userStatus')" :placeholder="$t('page.manage.user.form.userStatus')"
@ -92,6 +104,8 @@ async function search() {
</NFormItemGi> </NFormItemGi>
</NGrid> </NGrid>
</NForm> </NForm>
</NCollapseItem>
</NCollapse>
</NCard> </NCard>
</template> </template>