mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-22 09:49:28 +08:00
fix(form): table全屏后蒙层在最上一层
This commit is contained in:
roymondchen
parent
86bdb9f099
commit
4ec0b69a8d
@ -1,180 +1,182 @@
|
||||
<template>
|
||||
<div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
|
||||
<span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
|
||||
<TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
|
||||
<TMagicTable
|
||||
v-if="model[modelName]"
|
||||
ref="tMagicTable"
|
||||
style="width: 100%"
|
||||
:row-key="config.rowKey || 'id'"
|
||||
:data="data"
|
||||
:lastData="lastData"
|
||||
:border="config.border"
|
||||
:max-height="config.maxHeight"
|
||||
:default-expand-all="true"
|
||||
:key="updateKey"
|
||||
@select="selectHandle"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
|
||||
<template v-slot="scope">
|
||||
<span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<TMagicTableColumn
|
||||
label="操作"
|
||||
:width="config.operateColWidth || 55"
|
||||
align="center"
|
||||
:fixed="config.fixed === false ? undefined : 'left'"
|
||||
<teleport to="body" :disabled="!isFullscreen">
|
||||
<div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
|
||||
<span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
|
||||
<TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
|
||||
<TMagicTable
|
||||
v-if="model[modelName]"
|
||||
ref="tMagicTable"
|
||||
style="width: 100%"
|
||||
:row-key="config.rowKey || 'id'"
|
||||
:data="data"
|
||||
:lastData="lastData"
|
||||
:border="config.border"
|
||||
:max-height="config.maxHeight"
|
||||
:default-expand-all="true"
|
||||
:key="updateKey"
|
||||
@select="selectHandle"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<slot name="operateCol" :scope="scope"></slot>
|
||||
<TMagicIcon
|
||||
v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
class="m-table-delete-icon"
|
||||
@click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
><Delete
|
||||
/></TMagicIcon>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
|
||||
<template v-slot="scope">
|
||||
<TMagicTooltip
|
||||
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
|
||||
content="点击上移，双击置顶"
|
||||
placement="top"
|
||||
>
|
||||
<TMagicButton
|
||||
plain
|
||||
size="small"
|
||||
type="primary"
|
||||
:icon="ArrowUp"
|
||||
:disabled="disabled"
|
||||
text
|
||||
@click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
@dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
></TMagicButton>
|
||||
</TMagicTooltip>
|
||||
<TMagicTooltip
|
||||
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
|
||||
content="点击下移，双击置底"
|
||||
placement="top"
|
||||
>
|
||||
<TMagicButton
|
||||
plain
|
||||
size="small"
|
||||
type="primary"
|
||||
:icon="ArrowDown"
|
||||
:disabled="disabled"
|
||||
text
|
||||
@click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
@dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
></TMagicButton>
|
||||
</TMagicTooltip>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<TMagicTableColumn
|
||||
v-if="selection"
|
||||
align="center"
|
||||
header-align="center"
|
||||
type="selection"
|
||||
width="45"
|
||||
></TMagicTableColumn>
|
||||
|
||||
<TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
|
||||
<template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<template v-for="(column, index) in config.items">
|
||||
<TMagicTableColumn
|
||||
v-if="column.type !== 'hidden' && display(column.display)"
|
||||
:prop="column.name"
|
||||
:width="column.width"
|
||||
:label="column.label"
|
||||
:sortable="column.sortable"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:key="column[mForm?.keyProp || '__key'] ?? index"
|
||||
:class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
|
||||
>
|
||||
<template #default="scope">
|
||||
<Container
|
||||
v-if="scope.$index > -1"
|
||||
labelWidth="0"
|
||||
:disabled="disabled"
|
||||
:prop="getProp(scope.$index)"
|
||||
:rules="column.rules"
|
||||
:config="makeConfig(column, scope.row)"
|
||||
:model="scope.row"
|
||||
:lastValues="lastData[scope.$index]"
|
||||
:is-compare="isCompare"
|
||||
:size="size"
|
||||
@change="$emit('change', model[modelName])"
|
||||
@addDiffCount="onAddDiffCount()"
|
||||
></Container>
|
||||
<TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
|
||||
<template v-slot="scope">
|
||||
<span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
</template>
|
||||
</TMagicTable>
|
||||
</TMagicTooltip>
|
||||
<slot></slot>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin: 10px 0">
|
||||
<TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
|
||||
>新增一行</TMagicButton
|
||||
>
|
||||
<TMagicTableColumn
|
||||
label="操作"
|
||||
:width="config.operateColWidth || 55"
|
||||
align="center"
|
||||
:fixed="config.fixed === false ? undefined : 'left'"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<slot name="operateCol" :scope="scope"></slot>
|
||||
<TMagicIcon
|
||||
v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
class="m-table-delete-icon"
|
||||
@click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
><Delete
|
||||
/></TMagicIcon>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<div style="display: flex">
|
||||
<TMagicButton
|
||||
:icon="Grid"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="toggleMode"
|
||||
v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
|
||||
>展开配置</TMagicButton
|
||||
<TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
|
||||
<template v-slot="scope">
|
||||
<TMagicTooltip
|
||||
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
|
||||
content="点击上移，双击置顶"
|
||||
placement="top"
|
||||
>
|
||||
<TMagicButton
|
||||
plain
|
||||
size="small"
|
||||
type="primary"
|
||||
:icon="ArrowUp"
|
||||
:disabled="disabled"
|
||||
text
|
||||
@click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
@dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
></TMagicButton>
|
||||
</TMagicTooltip>
|
||||
<TMagicTooltip
|
||||
v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
|
||||
content="点击下移，双击置底"
|
||||
placement="top"
|
||||
>
|
||||
<TMagicButton
|
||||
plain
|
||||
size="small"
|
||||
type="primary"
|
||||
:icon="ArrowDown"
|
||||
:disabled="disabled"
|
||||
text
|
||||
@click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
@dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
|
||||
></TMagicButton>
|
||||
</TMagicTooltip>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<TMagicTableColumn
|
||||
v-if="selection"
|
||||
align="center"
|
||||
header-align="center"
|
||||
type="selection"
|
||||
width="45"
|
||||
></TMagicTableColumn>
|
||||
|
||||
<TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
|
||||
<template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
|
||||
</TMagicTableColumn>
|
||||
|
||||
<template v-for="(column, index) in config.items">
|
||||
<TMagicTableColumn
|
||||
v-if="column.type !== 'hidden' && display(column.display)"
|
||||
:prop="column.name"
|
||||
:width="column.width"
|
||||
:label="column.label"
|
||||
:sortable="column.sortable"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:key="column[mForm?.keyProp || '__key'] ?? index"
|
||||
:class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
|
||||
>
|
||||
<template #default="scope">
|
||||
<Container
|
||||
v-if="scope.$index > -1"
|
||||
labelWidth="0"
|
||||
:disabled="disabled"
|
||||
:prop="getProp(scope.$index)"
|
||||
:rules="column.rules"
|
||||
:config="makeConfig(column, scope.row)"
|
||||
:model="scope.row"
|
||||
:lastValues="lastData[scope.$index]"
|
||||
:is-compare="isCompare"
|
||||
:size="size"
|
||||
@change="$emit('change', model[modelName])"
|
||||
@addDiffCount="onAddDiffCount()"
|
||||
></Container>
|
||||
</template>
|
||||
</TMagicTableColumn>
|
||||
</template>
|
||||
</TMagicTable>
|
||||
</TMagicTooltip>
|
||||
<slot></slot>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin: 10px 0">
|
||||
<TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
|
||||
>新增一行</TMagicButton
|
||||
>
|
||||
<TMagicButton
|
||||
:icon="FullScreen"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="toggleFullscreen"
|
||||
v-if="config.enableFullscreen !== false"
|
||||
>
|
||||
{{ isFullscreen ? '退出全屏' : '全屏编辑' }}
|
||||
</TMagicButton>
|
||||
<TMagicUpload
|
||||
v-if="importable"
|
||||
style="display: inline-block"
|
||||
ref="excelBtn"
|
||||
action="/noop"
|
||||
:disabled="disabled"
|
||||
:on-change="excelHandler"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
|
||||
</TMagicUpload>
|
||||
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
|
||||
>清空</TMagicButton
|
||||
|
||||
<div style="display: flex">
|
||||
<TMagicButton
|
||||
:icon="Grid"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="toggleMode"
|
||||
v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
|
||||
>展开配置</TMagicButton
|
||||
>
|
||||
<TMagicButton
|
||||
:icon="FullScreen"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="toggleFullscreen"
|
||||
v-if="config.enableFullscreen !== false"
|
||||
>
|
||||
{{ isFullscreen ? '退出全屏' : '全屏编辑' }}
|
||||
</TMagicButton>
|
||||
<TMagicUpload
|
||||
v-if="importable"
|
||||
style="display: inline-block"
|
||||
ref="excelBtn"
|
||||
action="/noop"
|
||||
:disabled="disabled"
|
||||
:on-change="excelHandler"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
|
||||
</TMagicUpload>
|
||||
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
|
||||
>清空</TMagicButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom" style="text-align: right" v-if="config.pagination">
|
||||
<TMagicPagination
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:hide-on-single-page="model[modelName].length < pagesize"
|
||||
:current-page="pagecontext + 1"
|
||||
:page-sizes="[pagesize, 60, 120, 300]"
|
||||
:page-size="pagesize"
|
||||
:total="model[modelName].length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</TMagicPagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom" style="text-align: right" v-if="config.pagination">
|
||||
<TMagicPagination
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:hide-on-single-page="model[modelName].length < pagesize"
|
||||
:current-page="pagecontext + 1"
|
||||
:page-sizes="[pagesize, 60, 120, 300]"
|
||||
:page-size="pagesize"
|
||||
:total="model[modelName].length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</TMagicPagination>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -2,22 +2,15 @@
|
||||
width: 100%;
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
&::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
& > .el-form-item__content {
|
||||
z-index: 101;
|
||||
position: relative;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user