feat: add search panel
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
<script setup>
|
||||
import { TenantService } from '@/service/TenantService';
|
||||
import SearchField from '@/components/SearchField.vue';
|
||||
import SearchPanel from '@/components/SearchPanel.vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
@@ -198,21 +200,20 @@ onMounted(() => {
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="m-0">租户列表</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="m-0">租户列表</h4>
|
||||
</div>
|
||||
|
||||
<SearchPanel :loading="loading" @search="onSearch" @reset="onReset">
|
||||
<SearchField label="名称 / Code">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="keyword" placeholder="名称 / Code" @keyup.enter="onSearch" />
|
||||
<InputText v-model="keyword" placeholder="请输入" class="w-full" @keyup.enter="onSearch" />
|
||||
</IconField>
|
||||
<Button label="查询" icon="pi pi-search" severity="secondary" @click="onSearch" />
|
||||
<Button label="重置" icon="pi pi-refresh" severity="secondary" @click="onReset" />
|
||||
</div>
|
||||
</div>
|
||||
</SearchField>
|
||||
</SearchPanel>
|
||||
|
||||
<DataTable
|
||||
:value="tenants"
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import SearchField from '@/components/SearchField.vue';
|
||||
import SearchPanel from '@/components/SearchPanel.vue';
|
||||
import StatisticsStrip from '@/components/StatisticsStrip.vue';
|
||||
import { UserService } from '@/service/UserService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
@@ -202,48 +204,34 @@ onMounted(() => {
|
||||
<div>
|
||||
<StatisticsStrip :items="statisticsItems" containerClass="card mb-4" />
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="m-0">用户列表</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="m-0">用户列表</h4>
|
||||
</div>
|
||||
|
||||
<SearchPanel :loading="loading" @search="onSearch" @reset="onReset">
|
||||
<SearchField label="用户名">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="username" placeholder="用户名" @keyup.enter="onSearch" />
|
||||
<InputText v-model="username" placeholder="请输入" class="w-full" @keyup.enter="onSearch" />
|
||||
</IconField>
|
||||
<Button label="查询" icon="pi pi-search" severity="secondary" @click="onSearch" />
|
||||
<Button label="重置" icon="pi pi-refresh" severity="secondary" @click="onReset" />
|
||||
</div>
|
||||
</div>
|
||||
</SearchField>
|
||||
</SearchPanel>
|
||||
|
||||
<DataTable
|
||||
:value="users"
|
||||
dataKey="id"
|
||||
:loading="loading"
|
||||
lazy
|
||||
:paginator="true"
|
||||
:rows="rows"
|
||||
:totalRecords="totalRecords"
|
||||
:first="(page - 1) * rows"
|
||||
:rowsPerPageOptions="[10, 20, 50, 100]"
|
||||
sortMode="single"
|
||||
:sortField="sortField"
|
||||
:sortOrder="sortOrder"
|
||||
@page="onPage"
|
||||
@sort="onSort"
|
||||
<DataTable :value="users" dataKey="id" :loading="loading" lazy :paginator="true" :rows="rows"
|
||||
:totalRecords="totalRecords" :first="(page - 1) * rows" :rowsPerPageOptions="[10, 20, 50, 100]"
|
||||
sortMode="single" :sortField="sortField" :sortOrder="sortOrder" @page="onPage" @sort="onSort"
|
||||
currentPageReportTemplate="显示第 {first} - {last} 条,共 {totalRecords} 条"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
scrollable
|
||||
scrollHeight="flex"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
scrollable scrollHeight="flex" responsiveLayout="scroll">
|
||||
<Column field="id" header="ID" sortable style="min-width: 6rem" />
|
||||
<Column field="username" header="用户名" sortable style="min-width: 14rem" />
|
||||
<Column field="status" header="状态" sortable style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status_description || data.status || '-'" :severity="getStatusSeverity(data.status)" class="cursor-pointer" @click="openStatusDialog(data)" />
|
||||
<Tag :value="data.status_description || data.status || '-'"
|
||||
:severity="getStatusSeverity(data.status)" class="cursor-pointer"
|
||||
@click="openStatusDialog(data)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="roles" header="角色" style="min-width: 16rem">
|
||||
@@ -282,12 +270,15 @@ onMounted(() => {
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block font-medium mb-2">用户状态</label>
|
||||
<Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="选择状态" :disabled="statusLoading" fluid />
|
||||
<Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value"
|
||||
placeholder="选择状态" :disabled="statusLoading" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false" :disabled="statusLoading" />
|
||||
<Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading" :disabled="!statusValue" />
|
||||
<Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false"
|
||||
:disabled="statusLoading" />
|
||||
<Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading"
|
||||
:disabled="!statusValue" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user