style: 优化表格页面样式及表格纵向滚动条

This commit is contained in:
2024-05-12 19:27:27 +08:00
parent c1c5f7f632
commit 861f6203cc
14 changed files with 614 additions and 551 deletions

View File

@@ -1,73 +1,72 @@
<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: 1000 }"
:pagination="false"
:disabled-tools="['size']"
:disabled-column-keys="['name']"
@refresh="search"
>
<template #expand-icon="{ expanded }">
<IconDown v-if="expanded" />
<IconRight v-else />
</template>
<template #custom-left>
<a-input v-model="queryForm.description" 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:dept:add']" type="primary" @click="onAdd()">
<template #icon><icon-plus /></template>
<span>新增</span>
<div class="table-page">
<GiTable
ref="tableRef"
row-key="id"
title="部门管理"
:data="dataList"
:columns="columns"
:loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="false"
:disabled-tools="['size']"
:disabled-column-keys="['name']"
@refresh="search"
>
<template #expand-icon="{ expanded }">
<IconDown v-if="expanded" />
<IconRight v-else />
</template>
<template #custom-left>
<a-input v-model="queryForm.description" 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:dept:add']" type="primary" @click="onAdd()">
<template #icon><icon-plus /></template>
<span>新增</span>
</a-button>
<a-tooltip content="导出">
<a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
<template #icon>
<icon-download />
</template>
</a-button>
<a-tooltip content="导出">
<a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
<template #icon>
<icon-download />
</template>
</a-button>
</a-tooltip>
</template>
<template #status="{ record }">
<GiCellStatus :status="record.status" />
</template>
<template #isSystem="{ record }">
<a-tag v-if="record.isSystem" color="red" size="small"></a-tag>
<a-tag v-else color="arcoblue" size="small"></a-tag>
</template>
<template #action="{ record }">
<a-space>
<a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
<a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
<a-link
v-permission="['system:dept:delete']"
status="danger"
:title="record.isSystem ? '系统内置数据不能删除' : undefined"
:disabled="record.disabled"
@click="onDelete(record)"
>
删除
</a-link>
</a-space>
</template>
</GiTable>
</a-card>
</a-tooltip>
</template>
<template #status="{ record }">
<GiCellStatus :status="record.status" />
</template>
<template #isSystem="{ record }">
<a-tag v-if="record.isSystem" color="red" size="small"></a-tag>
<a-tag v-else color="arcoblue" size="small"></a-tag>
</template>
<template #action="{ record }">
<a-space>
<a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
<a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
<a-link
v-permission="['system:dept:delete']"
status="danger"
:title="record.isSystem ? '系统内置数据不能删除' : undefined"
:disabled="record.disabled"
@click="onDelete(record)"
>
删除
</a-link>
</a-space>
</template>
</GiTable>
<DeptAddModal ref="DeptAddModalRef" @save-success="search" />
</div>