重构:优化配置管理的列表展示

This commit is contained in:
YunaiV 2023-03-10 21:19:18 +08:00
parent 922c4a1b6c
commit d989fa2081

View File

@ -1,19 +1,12 @@
<template> <template>
<content-wrap> <content-wrap>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
:model="queryParams"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="参数名称" prop="name"> <el-form-item label="参数名称" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.name"
placeholder="请输入参数名称" placeholder="请输入参数名称"
clearable clearable
style="width: 240px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
@ -22,7 +15,6 @@
v-model="queryParams.key" v-model="queryParams.key"
placeholder="请输入参数键名" placeholder="请输入参数键名"
clearable clearable
style="width: 240px"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
@ -39,7 +31,6 @@
<el-form-item label="创建时间" prop="createTime"> <el-form-item label="创建时间" prop="createTime">
<el-date-picker <el-date-picker
v-model="queryParams.createTime" v-model="queryParams.createTime"
style="width: 240px"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
type="daterange" type="daterange"
range-separator="-" range-separator="-"
@ -49,27 +40,11 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleQuery"> <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item> <el-button type="primary" @click="openModal('create')" v-hasPermi="['infra:config:create']">
</el-form>
<!-- 操作栏 -->
<!-- TODO 间隔貌似有点问题 没发现 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="openModal('create')"
v-hasPermi="['infra:config:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button> </el-button>
</el-col>
<el-col :span="1.5">
<el-button <el-button
type="success" type="success"
plain plain
@ -79,13 +54,8 @@
> >
<Icon icon="ep:download" class="mr-5px" /> 导出 <Icon icon="ep:download" class="mr-5px" /> 导出
</el-button> </el-button>
<el-button text @click="showSearch = !showSearch"> </el-form-item>
<Icon :icon="showSearch ? 'ep:arrow-up' : 'ep:arrow-down'" /> </el-form>
</el-button>
</el-col>
<!-- TODO 芋艿右侧导航 -->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
</el-row>
<!-- 列表 --> <!-- 列表 -->
<el-table v-loading="loading" :data="list" align="center"> <el-table v-loading="loading" :data="list" align="center">
@ -112,7 +82,7 @@
width="180" width="180"
:formatter="dateFormatter" :formatter="dateFormatter"
/> />
<el-table-column label="操作" align="center" width="140"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button <el-button
link link
@ -120,15 +90,15 @@
@click="openModal('update', scope.row.id)" @click="openModal('update', scope.row.id)"
v-hasPermi="['infra:config:update']" v-hasPermi="['infra:config:update']"
> >
<Icon icon="ep:edit" /> 修改 编辑
</el-button> </el-button>
<el-button <el-button
link link
type="primary" type="danger"
@click="handleDelete(scope.row.id)" @click="handleDelete(scope.row.id)"
v-hasPermi="['infra:config:delete']" v-hasPermi="['infra:config:delete']"
> >
<Icon icon="ep:delete" /> 删除 删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -147,7 +117,6 @@ import ConfigForm from './form.vue'
const message = useMessage() // const message = useMessage() //
const { t } = useI18n() // const { t } = useI18n() //
const showSearch = ref(true) //
const loading = ref(true) // const loading = ref(true) //
const total = ref(0) // const total = ref(0) //
const list = ref([]) // const list = ref([]) //