mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2026-01-16 00:57:09 +08:00
style: 优化表格页面样式及表格纵向滚动条
This commit is contained in:
@@ -1,84 +1,83 @@
|
||||
<template>
|
||||
<div class="gi_page">
|
||||
<a-card title="菜单管理" class="general-card">
|
||||
<GiTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1700, maxHeight: '81vh' }"
|
||||
:pagination="false"
|
||||
:disabled-column-keys="['title']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #expand-icon="{ expanded }">
|
||||
<IconDown v-if="expanded" />
|
||||
<IconRight v-else />
|
||||
</template>
|
||||
<template #custom-left>
|
||||
<a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-select
|
||||
v-model="queryForm.status"
|
||||
:options="DisEnableStatusList"
|
||||
placeholder="请选择状态"
|
||||
allow-clear
|
||||
style="width: 150px"
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</template>
|
||||
<template #custom-right>
|
||||
<a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()">
|
||||
<template #icon><icon-plus /></template>
|
||||
<span>新增</span>
|
||||
<div class="table-page">
|
||||
<GiTable
|
||||
ref="tableRef"
|
||||
title="菜单管理"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
|
||||
:pagination="false"
|
||||
:disabled-column-keys="['title']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #expand-icon="{ expanded }">
|
||||
<IconDown v-if="expanded" />
|
||||
<IconRight v-else />
|
||||
</template>
|
||||
<template #custom-left>
|
||||
<a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-select
|
||||
v-model="queryForm.status"
|
||||
:options="DisEnableStatusList"
|
||||
placeholder="请选择状态"
|
||||
allow-clear
|
||||
style="width: 150px"
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</template>
|
||||
<template #custom-right>
|
||||
<a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()">
|
||||
<template #icon><icon-plus /></template>
|
||||
<span>新增</span>
|
||||
</a-button>
|
||||
<a-tooltip content="展开/折叠">
|
||||
<a-button class="gi_hover_btn-border" @click="onExpanded">
|
||||
<template #icon>
|
||||
<icon-list v-if="!isExpanded" />
|
||||
<icon-mind-mapping v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-tooltip content="展开/折叠">
|
||||
<a-button class="gi_hover_btn-border" @click="onExpanded">
|
||||
<template #icon>
|
||||
<icon-list v-if="!isExpanded" />
|
||||
<icon-mind-mapping v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #title="{ record }">
|
||||
<GiSvgIcon :name="record.icon" :size="15" />
|
||||
<span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag>
|
||||
<a-tag v-if="record.type === 2" color="green">菜单</a-tag>
|
||||
<a-tag v-if="record.type === 3">按钮</a-tag>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #isExternal="{ record }">
|
||||
<a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #isHidden="{ record }">
|
||||
<a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #isCache="{ record }">
|
||||
<a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['system:menu:update']" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
|
||||
新增
|
||||
</a-link>
|
||||
<a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
</a-card>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #title="{ record }">
|
||||
<GiSvgIcon :name="record.icon" :size="15" />
|
||||
<span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag>
|
||||
<a-tag v-if="record.type === 2" color="green">菜单</a-tag>
|
||||
<a-tag v-if="record.type === 3">按钮</a-tag>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #isExternal="{ record }">
|
||||
<a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #isHidden="{ record }">
|
||||
<a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #isCache="{ record }">
|
||||
<a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['system:menu:update']" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
|
||||
新增
|
||||
</a-link>
|
||||
<a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<MenuAddModal ref="MenuAddModalRef" :menus="dataList" @save-success="search" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user