lanhu/admin
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

搜索框添加一键清除功能

Browse Source
This commit is contained in:
Eamon
2026-05-14 16:04:35 +08:00
parent 284b0d6afe
commit 616901acdd
12 changed files with 263 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/(root)/cust/create.tsx
View File

@@ -214,6 +214,7 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
{...field}
placeholder="请输入用户名"
autoComplete="off"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
@@ -225,7 +226,7 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>手机号 *</FieldLabel>
<Input {...field} placeholder="请输入手机号" />
<Input {...field} placeholder="请输入手机号" clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -246,6 +247,7 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
{...field}
type="password"
placeholder="请输入密码（至少6位）"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
@@ -261,6 +263,7 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
{...field}
type="password"
placeholder="请再次输入密码"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
@@ -275,7 +278,7 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>邮箱</FieldLabel>
<Input {...field} placeholder="请输入邮箱" />
<Input {...field} placeholder="请输入邮箱" clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -311,7 +314,7 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>QQ联系方式</FieldLabel>
<Input {...field} placeholder="请输入QQ联系方式" />
<Input {...field} placeholder="请输入QQ联系方式" clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -322,7 +325,11 @@ export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>微信/联系方式</FieldLabel>
<Input {...field} placeholder="请输入微信或联系方式" />
<Input
{...field}
placeholder="请输入微信或联系方式"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}

22
src/app/(root)/cust/page.tsx
View File

@@ -99,6 +99,8 @@ export default function CustPage() {
(page: number, size: number) => {
const result: FilterValues = {}
const filters = getValues()
console.log(filters, "filters")
if (filters.account?.trim()) result.account = filters.account.trim()
if (filters.name?.trim()) result.name = filters.name.trim()
if (filters.identified && filters.identified !== "all")
@@ -134,7 +136,11 @@ export default function CustPage() {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-80 flex">
<FieldLabel>账号/手机号/邮箱</FieldLabel>
<Input {...field} placeholder="请输入账号/手机号/邮箱" />
<Input
{...field}
placeholder="请输入账号/手机号/邮箱"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -146,7 +152,7 @@ export default function CustPage() {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-40 flex">
<FieldLabel>姓名</FieldLabel>
<Input {...field} placeholder="请输入姓名" />
<Input {...field} placeholder="请输入姓名" clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -200,7 +206,7 @@ export default function CustPage() {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-40 flex">
<FieldLabel>开始时间</FieldLabel>
<Input type="date" {...field} />
<Input type="date" {...field} clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -212,14 +218,12 @@ export default function CustPage() {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-40 flex">
<FieldLabel>结束时间</FieldLabel>
<Input type="date" {...field} />
<Input type="date" {...field} clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Auth scope={ScopeUserWrite}>
<AddUserDialog onSuccess={refreshTable} />
</Auth>
<Button type="submit">搜索</Button>
<Button
type="button"
variant="outline"
@@ -237,7 +241,9 @@ export default function CustPage() {
>
重置
</Button>
<Button type="submit">搜索</Button>
<Auth scope={ScopeUserWrite}>
<AddUserDialog onSuccess={refreshTable} />
</Auth>
</div>
</form>

10
src/app/(root)/cust/update.tsx
View File

@@ -226,7 +226,7 @@ export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>用户名</FieldLabel>
<Input {...field} placeholder="请输入用户名" />
<Input {...field} placeholder="请输入用户名" clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -238,7 +238,7 @@ export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>邮箱</FieldLabel>
<Input {...field} placeholder="请输入邮箱" />
<Input {...field} placeholder="请输入邮箱" clearable />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -254,6 +254,7 @@ export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
{...field}
type="password"
placeholder="选填,修改请输入新密码（至少6位）"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
@@ -270,6 +271,7 @@ export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
{...field}
type="password"
placeholder="请再次输入密码"
clearable
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
@@ -348,7 +350,7 @@ export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
render={({ field }) => (
<Field>
<FieldLabel>QQ</FieldLabel>
<Input {...field} placeholder="QQ号" />
<Input {...field} placeholder="QQ号" clearable />
</Field>
)}
/>
@@ -359,7 +361,7 @@ export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
render={({ field }) => (
<Field>
<FieldLabel>微信</FieldLabel>
<Input {...field} placeholder="微信号" />
<Input {...field} placeholder="微信号" clearable />
</Field>
)}
/>