xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-09-24 14:26:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化表格列设置

Browse Source
This commit is contained in:
zhoumingfa 2024-11-12 22:55:11 +08:00
parent 33a8ab3280
commit 364ca94973
2 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
smart-admin-web/javascript-ant-design-vue3/src/components/support/table-operator/index.vue
View File

@ -66,7 +66,15 @@
// 原始表格列数据（复制一份最原始的columns集合，以供后续各个地方使用）
let originalColumn = _.cloneDeep(props.modelValue);
onMounted(buildUserTableColumns);
onMounted(() => {
buildUserTableColumns();
// 监听全屏事件 解决按下 ESC 退出全屏 fullScreenFlag 未改变导致下次第一下点击全屏无效的问题
addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement === null) {
fullScreenFlag.value = false;
}
});
});
//构建用户的数据列
async function buildUserTableColumns() {

99
smart-admin-web/javascript-ant-design-vue3/src/components/support/table-operator/smart-table-column-modal.vue
View File

@ -9,46 +9,70 @@
*
-->
<template>
<a-modal :width="700" :open="visible" title="设置列" :destroyOnClose="true" :closable="false">
<a-alert type="info" show-icon class="smart-margin-bottom10">
<template #icon><smile-outlined /></template>
<template #message> 可以通过拖拽行直接修改顺序哦；（ <pushpin-outlined />为固定列，不可拖拽 ）</template>
</a-alert>
<a-table
id="smartTableColumnModalTable"
rowKey="columnKey"
row-class-name="column-row"
:columns="tableColumns"
:dataSource="tableData"
:rowSelection="{ checkStrictly: false, selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
:pagination="false"
size="small"
bordered
>
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.dataIndex === 'title'">
<a-button type="text" :class="record.fixed ? '' : 'handle'" size="small" style="width: 100%; text-align: left">
<template #icon v-if="!record.fixed"> <drag-outlined /> </template>
<template #icon v-if="record.fixed"> <pushpin-outlined /> </template>
{{ text }}
</a-button>
<a-modal :width="800" :open="visible" title="设置列" :destroyOnClose="true" :closable="false">
<div v-if="!tableId">
<a-alert type="error" show-icon class="smart-margin-bottom10">
<template #message> 您尚未设置 TableOperator 组件的 tableId</template>
</a-alert>
<a-alert type="error" class="smart-margin-bottom10">
<template #message>
1. 请在 src\constants\support\table-id-const.js 中配置 tableId 常量
<br />
<br />
2. 在自己的业务表格页面组件中使用如下：
<br />
导入: import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
<br />
使用: {{ '<TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.XXX" :refresh="queryData" />' }}
<br />
<br />
3. 具体用法可参考员工管理
</template>
<template v-if="column.dataIndex === 'width'">
<a-input-number v-model:value="record.width" style="width: 90px; margin-left: 10px; margin-right: 3px" size="small" />px
</a-alert>
</div>
<div v-else>
<a-alert type="info" show-icon class="smart-margin-bottom10">
<template #icon><smile-outlined /></template>
<template #message> 可以通过拖拽行直接修改顺序哦；（ <pushpin-outlined />为固定列，不可拖拽 ）</template>
</a-alert>
<a-table
id="smartTableColumnModalTable"
rowKey="columnKey"
row-class-name="column-row"
:columns="tableColumns"
:dataSource="tableData"
:rowSelection="{ checkStrictly: false, selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
:pagination="false"
size="small"
bordered
>
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.dataIndex === 'title'">
<a-button type="text" :class="record.fixed ? '' : 'handle'" size="small" style="width: 100%; text-align: left">
<template #icon>
<drag-outlined v-if="!record.fixed" />
<pushpin-outlined v-else />
</template>
{{ text }}
</a-button>
</template>
<template v-if="column.dataIndex === 'width'">
<a-input-number v-model:value="record.width" style="width: 90px; margin-left: 10px; margin-right: 3px" size="small" />px
</template>
<template v-if="column.dataIndex === 'operate'">
<div class="smart-table-operate" v-if="!record.fixed">
<a-button @click="up(index)" v-show="index > 0" type="link" class="handle" size="small" style="margin-right: 12px"> 上移 </a-button>
<a-button @click="down(index)" type="link" class="handle" size="small" v-show="index !== tableData.length - 1"> 下移</a-button>
</div>
</template>
</template>
<template v-if="column.dataIndex === 'operate'">
<div class="smart-table-operate" v-if="!record.fixed">
<a-button @click="up(index)" v-show="index > 0" type="link" class="handle" size="small" style="margin-right: 12px"> 上移 </a-button>
<a-button @click="down(index)" type="link" class="handle" size="small" v-show="index !== tableData.length - 1"> 下移</a-button>
</div>
</template>
</template>
</a-table>
</a-table>
</div>
<template #footer>
<a-button key="back" @click="hide">取消</a-button>
<a-button key="submit" type="primary" :loading="submitLoading" @click="save">保存</a-button>
<a-button key="back" :loading="submitLoading" @click="reset" danger style="margin-left: 20px">恢复默认</a-button>
<a-button v-if="tableId" key="submit" type="primary" :loading="submitLoading" @click="save">保存</a-button>
<a-button v-if="tableId" key="back" :loading="submitLoading" @click="reset" danger style="margin-left: 20px">恢复默认</a-button>
</template>
</a-modal>
</template>
@ -67,7 +91,7 @@
defineExpose({ show });
// ---------------- 显示 / 隐藏 --------------------
let tableId = 1;
let tableId = null;
const visible = ref(false);
//显示
function show(columns, showTableId) {
@ -83,6 +107,9 @@
//获取用户的列数据
async function getUserTableColumns(tableId, columns) {
if (!tableId) {
return;
}
SmartLoading.show();
let userTableColumnArray = [];
try {