feat: 优化沃尔玛分组管理界面，调整表单结构和按钮布局
This commit is contained in:
danial
@@ -1,149 +1,146 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '沃尔玛分组']" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-card class="general-card" title="分组管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="searchForm"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input
|
||||
v-model="searchForm.name"
|
||||
placeholder="请输入分组名称"
|
||||
allow-clear
|
||||
<a-space direction="vertical" fill>
|
||||
<a-card class="general-card" title="分组管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="searchForm"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input
|
||||
v-model="searchForm.name"
|
||||
placeholder="请输入分组名称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="userId" label="创建人">
|
||||
<a-select v-model="searchForm.userId">
|
||||
<a-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.userName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="userId" label="创建人">
|
||||
<a-select v-model="searchForm.userId">
|
||||
<a-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.userName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-button
|
||||
v-if="checkTokenFromLogin()"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>
|
||||
新增
|
||||
</a-button>
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="ID" data-index="id" :width="80" />
|
||||
<a-table-column title="分组名称" data-index="name" />
|
||||
<a-table-column title="描述" data-index="notes" />
|
||||
<a-table-column
|
||||
title="创建时间"
|
||||
data-index="createdAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column
|
||||
title="更新时间"
|
||||
data-index="updatedAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column title="操作" :width="200" fixed="right">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="warning"
|
||||
size="mini"
|
||||
@click="handleEdit(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-edit />
|
||||
</template>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="danger"
|
||||
size="mini"
|
||||
@click="handleDelete(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-space>
|
||||
<a-modal
|
||||
v-model:visible="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
@cancel="dialogVisible = false"
|
||||
@before-ok="handleSubmit"
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-button
|
||||
v-if="checkTokenFromLogin()"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>
|
||||
新增
|
||||
</a-button>
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="ID" data-index="id" :width="80" />
|
||||
<a-table-column title="分组名称" data-index="name" />
|
||||
<a-table-column title="描述" data-index="notes" />
|
||||
<a-table-column
|
||||
title="创建时间"
|
||||
data-index="createdAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column
|
||||
title="更新时间"
|
||||
data-index="updatedAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column title="操作" :width="200" fixed="right">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="warning"
|
||||
size="mini"
|
||||
@click="handleEdit(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-edit />
|
||||
</template>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="danger"
|
||||
size="mini"
|
||||
@click="handleDelete(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-space>
|
||||
<a-modal
|
||||
v-model:visible="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
@cancel="dialogVisible = false"
|
||||
@before-ok="handleSubmit"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
>
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input v-model="form.name" placeholder="请输入分组名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="description" label="描述">
|
||||
<a-textarea
|
||||
v-model="form.description"
|
||||
placeholder="请输入描述"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input v-model="form.name" placeholder="请输入分组名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="description" label="描述">
|
||||
<a-textarea
|
||||
v-model="form.description"
|
||||
placeholder="请输入描述"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user