You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
13 KiB
498 lines
13 KiB
<script>
|
|
export default {
|
|
props: {
|
|
height: {
|
|
type: Number
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
tableItem: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
indent: {
|
|
type: Number,
|
|
default: 18
|
|
},
|
|
cellStyle: {
|
|
type: Function,
|
|
default: () => {
|
|
}
|
|
},
|
|
rowStyle: {
|
|
type: Function,
|
|
default: () => {
|
|
}
|
|
},
|
|
headerRowStyle: {
|
|
type: Function,
|
|
default: () => {
|
|
}
|
|
},
|
|
headerCellStyle: {
|
|
type: Function,
|
|
default: () => {
|
|
}
|
|
},
|
|
defaultExpandAll: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
expandRowKeys:{
|
|
type: Array,
|
|
default: ()=>[]
|
|
},
|
|
rowKey:{
|
|
type:[String,Function],
|
|
default:'id'
|
|
},
|
|
showHeader: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showSummary: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
summaryMethod: {
|
|
type: Function
|
|
},
|
|
treeProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {children: 'children', hasChildren: 'hasChildren'}
|
|
}
|
|
},
|
|
tableStyle: {
|
|
type: Object,
|
|
default: () => {
|
|
return {width: '100%', marginBottom: "20px"}
|
|
}
|
|
},
|
|
btnWidth: {
|
|
type: Number,
|
|
default: 190
|
|
},
|
|
|
|
// 分页相关
|
|
isPage: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
pageSize: {
|
|
type: Number
|
|
},
|
|
pageSizeOpts:{
|
|
type:Array,
|
|
default:()=>[10, 20, 30, 40]
|
|
},
|
|
showSizer:{
|
|
type:Boolean,
|
|
default:true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableHeight: 0,
|
|
isShowPage: true
|
|
}
|
|
},
|
|
methods: {
|
|
initLoad() {
|
|
var that = this;
|
|
var clientHeight = document.documentElement.clientHeight
|
|
var lxHeader_height = 96.5; //查询 头部
|
|
var paginationHeight = 37; //分页的高度
|
|
var topHeight = 50; //页面 头部
|
|
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
|
|
that.tableHeight = tableHeight;
|
|
},
|
|
deleteClick(row) {
|
|
this.$emit('delete', row)
|
|
},
|
|
editorClick(row) {
|
|
this.$emit('editor', row)
|
|
},
|
|
selectClick(selection, row) {
|
|
this.$emit('select', selection, row)
|
|
},
|
|
selectAllClick(selection){
|
|
this.$emit('select-all',selection)
|
|
},
|
|
cellClick(row, column, cell) {
|
|
this.$emit('cellClick', row, column, cell)
|
|
},
|
|
|
|
createPage() {
|
|
if (this.isPage)
|
|
return (
|
|
<div>
|
|
|
|
<transition
|
|
enter-active-class="slide-in-bottom"
|
|
leave-to-class="slide-out-down">
|
|
<Page
|
|
page-size-opts={this.pageSizeOpts}
|
|
show-total={true}
|
|
page-size={this.pageSize}
|
|
v-show={this.isShowPage}
|
|
total={this.total}
|
|
size="small"
|
|
show-elevator={true}
|
|
show-sizer={this.showSizer}
|
|
class="xy-table-page"
|
|
on={{
|
|
['on-page-size-change']: (e) => this.$emit('pageSizeChange', e),
|
|
['on-change']: (e) => this.$emit('pageIndexChange', e)
|
|
}}>
|
|
</Page>
|
|
</transition>
|
|
</div>
|
|
)
|
|
},
|
|
toggleRowSelection(row) {
|
|
this.$nextTick(() => {
|
|
this.$refs.table.toggleRowSelection(row);
|
|
})
|
|
},
|
|
clearSelection() {
|
|
this.$refs.table.clearSelection();
|
|
},
|
|
toggleAllSelection() {
|
|
this.$refs.table.toggleAllSelection()
|
|
}
|
|
},
|
|
created() {
|
|
this.initLoad()
|
|
},
|
|
mounted() {
|
|
},
|
|
render(h) {
|
|
let {
|
|
createPage,
|
|
summaryMethod,
|
|
cellClick,
|
|
btnWidth,
|
|
selectClick,
|
|
selectAllClick,
|
|
height,
|
|
createIndexRow,
|
|
tableStyle,
|
|
treeProps,
|
|
showSummary,
|
|
showHeader,
|
|
$scopedSlots,
|
|
showIndex,
|
|
defaultExpandAll,
|
|
headerCellStyle,
|
|
headerRowStyle,
|
|
rowStyle,
|
|
cellStyle,
|
|
indent,
|
|
tableHeight,
|
|
tableItem,
|
|
list,
|
|
rowKey,
|
|
deleteClick,
|
|
editorClick
|
|
} = this
|
|
return (
|
|
<div class="table-tree" style={{'position': 'relative'}}>
|
|
{tableItem && tableItem.length > 0 ?
|
|
(<el-table
|
|
ref="table"
|
|
show-summary={showSummary}
|
|
show-header={showHeader}
|
|
summary-method={summaryMethod}
|
|
header-row-style={headerRowStyle}
|
|
header-cell-style={headerCellStyle}
|
|
row-style={rowStyle}
|
|
cell-style={cellStyle}
|
|
indent={indent}
|
|
data={list}
|
|
height={height ?? tableHeight}
|
|
class="v-table"
|
|
style={tableStyle}
|
|
row-key={rowKey}
|
|
border={true}
|
|
default-expand-all={defaultExpandAll}
|
|
tree-props={treeProps}
|
|
fit={true}
|
|
on={{
|
|
['select']: selectClick,
|
|
['cell-click']: cellClick,
|
|
['select-all']: selectAllClick}}>
|
|
<el-table-column
|
|
type="index"
|
|
width="50" fixed="left" align="center" >
|
|
</el-table-column>
|
|
|
|
{
|
|
tableItem.map((item, index) => {
|
|
//自定义表格内容
|
|
if (item.customFn) {
|
|
return (
|
|
<el-table-column
|
|
align={item.align ?? 'center'}
|
|
sortable={item.sortable ?? true}
|
|
width={item.width ?? 'auto'}
|
|
min-width={item.minWidth ?? item.width}
|
|
header-align={item.headerAlign ?? 'center'}
|
|
label={item.label}
|
|
prop={item.prop}
|
|
scopedSlots={{
|
|
default(scope) {
|
|
return item.customFn(scope.row,scope)
|
|
}
|
|
}}>
|
|
</el-table-column>
|
|
)
|
|
} else if (item.multiHd) {
|
|
//二级表头结构表格内容
|
|
return (
|
|
<el-table-column
|
|
header-align={item.headerAlign ?? 'center'}
|
|
label={item.label}>
|
|
{item.multiHd.map((item1, index1) => {
|
|
if (item1.customFn) {
|
|
return (
|
|
<el-table-column
|
|
align={item1.align ?? 'center'}
|
|
header-align={item1.headerAlign ?? 'center'}
|
|
label={item1.label}
|
|
width={item1.width ?? 'auto'}
|
|
min-width={item1.minWidth ?? item1.width}
|
|
sortable={item1.sortable ?? true}
|
|
scopedSlots={{
|
|
default(scope) {
|
|
return item1.customFn(scope.row)
|
|
}
|
|
}}>
|
|
</el-table-column>
|
|
)
|
|
} else {
|
|
return (
|
|
<el-table-column
|
|
fixed={item1.fixed ?? false}
|
|
align={item1.align ?? 'center'}
|
|
header-align={item1.headerAlign ?? 'center'}
|
|
prop={`${item.Fprop ? item.Fprop + '.' : ''}${item1.prop}`}
|
|
label={item1.label}
|
|
width={item1.width ?? 'auto'}
|
|
min-width={item1.minWidth ?? item1.width}
|
|
sortable={item1.sortable ?? true}
|
|
type={item1.type ?? ''}
|
|
formatter={item1.formatter}>
|
|
</el-table-column>
|
|
)
|
|
}
|
|
})}
|
|
</el-table-column>
|
|
)
|
|
} else {
|
|
//默认内容
|
|
return (
|
|
<el-table-column
|
|
fixed={item.fixed ?? false}
|
|
formatter={item.formatter}
|
|
width={item.width ?? 'auto'}
|
|
min-width={item.minWidth ?? item.width}
|
|
header-align={item.headerAlign ?? 'center'}
|
|
align={item.align ?? 'center'}
|
|
label={item.label}
|
|
prop={item.prop}
|
|
sortable={item.sortable ?? true}
|
|
type={item.type}
|
|
selectable={item.selectable}
|
|
scopedSlots={item.type === 'expand' ? {
|
|
default(props){
|
|
return item.expandFn(props)
|
|
}
|
|
} : ''}>
|
|
</el-table-column>
|
|
)
|
|
}
|
|
})}
|
|
|
|
{
|
|
$scopedSlots.btns ? $scopedSlots.btns() :
|
|
(<el-table-column
|
|
fixed="right"
|
|
label="操作"
|
|
width={btnWidth}
|
|
header-align="center"
|
|
scopedSlots={{
|
|
default(scope) {
|
|
return (
|
|
<div>
|
|
<Poptip
|
|
transfer={true}
|
|
confirm
|
|
title="确认要删除吗"
|
|
on={{['on-ok']: () => deleteClick(scope.row)}}>
|
|
<i-button
|
|
type="error"
|
|
size="small"
|
|
style="margin-left: 10px;"
|
|
ghost>删除
|
|
</i-button>
|
|
</Poptip>
|
|
|
|
<i-button
|
|
type="primary"
|
|
size="small"
|
|
style="margin-left: 10px;"
|
|
ghost
|
|
onClick={() => editorClick(scope.row)}>编辑
|
|
</i-button>
|
|
</div>
|
|
)
|
|
}
|
|
}}>
|
|
</el-table-column>)
|
|
}
|
|
</el-table>)
|
|
:
|
|
<el-table height={height ?? tableHeight}/>}
|
|
|
|
<el-backtop
|
|
target=".el-table__body-wrapper"
|
|
visibility-height={120}
|
|
bottom={100}
|
|
right={36}>
|
|
</el-backtop>
|
|
{createPage()}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../styles/variables.scss";
|
|
|
|
::v-deep .el-table{
|
|
margin-bottom: 0!important;
|
|
}
|
|
.xy-table-page {
|
|
display: flex;
|
|
justify-content: right;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
background: rgba(140, 140, 140, 0.6);
|
|
|
|
z-index: 10;
|
|
padding: 6px 10px !important;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
&__close {
|
|
cursor: pointer;
|
|
border-radius: 100%;
|
|
|
|
padding: 4px;
|
|
z-index: 11;
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 8px;
|
|
|
|
&:hover {
|
|
transform: scale(1.1, 1.1);
|
|
}
|
|
}
|
|
|
|
::v-deep .ivu-page-item, .ivu-page-options {
|
|
background: transparent !important;
|
|
}
|
|
|
|
::v-deep .ivu-page-item a {
|
|
color: #fff;
|
|
}
|
|
|
|
::v-deep .ivu-page-item-active a {
|
|
color: $primaryColor;
|
|
}
|
|
|
|
::v-deep .ivu-page-total {
|
|
color: #fff !important;
|
|
}
|
|
|
|
::v-deep .ivu-page-options-elevator {
|
|
color: #fff !important;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
::v-deep .ivu-page-options {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.slide-in-bottom {
|
|
transform-origin: 0 100%;
|
|
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
@keyframes slide-in-bottom {
|
|
0% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.slide-out-down {
|
|
transform-origin: 0 100%;
|
|
animation: slide-out-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
@keyframes slide-out-down {
|
|
0% {
|
|
transform: scaleY(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.icon-scale-left {
|
|
animation: icon-scale-left 0.5s forwards ease-out;
|
|
@keyframes icon-scale-left {
|
|
from {
|
|
|
|
}
|
|
to {
|
|
clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
|
|
background: rgba(140, 140, 140, 0.7);
|
|
transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px) rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-recover {
|
|
animation: icon-recover 0.5s forwards ease-out;
|
|
@keyframes icon-recover {
|
|
from {
|
|
background: rgba(120, 120, 120, 0.8);
|
|
transform: scale(0.8, 0.8) translateX(-30px) rotate(-90deg);
|
|
}
|
|
to {
|
|
}
|
|
}
|
|
}
|
|
</style>
|