152 lines
3.9 KiB
Vue
152 lines
3.9 KiB
Vue
<template>
|
|
<section class="AiBigTable"/>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import AiEmpty from "./AiEmpty";
|
|
|
|
export default {
|
|
name: "AiBigTable",
|
|
components: {AiEmpty},
|
|
model: {
|
|
prop: "data",
|
|
event: "input"
|
|
},
|
|
props: {
|
|
/**
|
|
* 表数据
|
|
*/
|
|
data: {default: () => []},
|
|
/**
|
|
* 表格配置
|
|
*/
|
|
colConfigs: {default: () => []},
|
|
/**
|
|
* 是否显示边框
|
|
*/
|
|
border: Boolean,
|
|
/**
|
|
* 是否启用dom对象
|
|
*/
|
|
isDom: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
html2canvas: null
|
|
}
|
|
},
|
|
methods: {
|
|
renderTable() {
|
|
const table = document.createElement("div")
|
|
table.style.display = 'flex'
|
|
table.style.flexDirection = 'column'
|
|
table.appendChild(this.renderHead())
|
|
if (this.data.length > 0) {
|
|
this.data.map(e => table.appendChild(this.renderRow(e)))
|
|
} else table.appendChild(this.renderEmpty())
|
|
if (this.isDom) {
|
|
this.$el.appendChild(table)
|
|
} else {
|
|
this.$el.appendChild(table)
|
|
this.$load(this.html2canvas).then(() => this.html2canvas(table, {
|
|
allowTaint: true,
|
|
useCORS: true,
|
|
height: this.$el.offsetHeight,
|
|
width: this.$el.offsetWidth
|
|
})).then(ctx => {
|
|
this.$el.removeChild(table)
|
|
this.$el.appendChild(ctx)
|
|
})
|
|
}
|
|
},
|
|
renderHead() {
|
|
const head = document.createElement("div")
|
|
head.style.display = 'flex'
|
|
head.style.alignItems = 'center'
|
|
head.style.fontWeight = 'bold'
|
|
head.style.background = 'rgba(243, 246, 249, 1)'
|
|
if (this.border) {
|
|
head.style.borderLeft = '1px solid #eee'
|
|
head.style.borderTop = '1px solid #eee'
|
|
} else {
|
|
head.style.borderBottom = '1px solid #eee'
|
|
}
|
|
this.colConfigs.map(e => {
|
|
const cell = this.renderCell(e)
|
|
head.appendChild(cell)
|
|
})
|
|
return head
|
|
},
|
|
renderRow(item) {
|
|
const row = document.createElement("div")
|
|
row.style.display = 'flex'
|
|
row.style.alignItems = 'center'
|
|
if (this.border) {
|
|
row.style.borderLeft = '1px solid #eee'
|
|
} else {
|
|
row.style.borderBottom = '1px solid #eee'
|
|
}
|
|
this.colConfigs.map(e => {
|
|
const cell = this.renderCell(e, item)
|
|
row.appendChild(cell)
|
|
})
|
|
return row
|
|
},
|
|
renderCell(config, row) {
|
|
const cell = document.createElement("div")
|
|
cell.style.display = 'flex'
|
|
cell.style.alignItems = 'center'
|
|
cell.style.minheight = '32px'
|
|
cell.style.padding = '0 8px'
|
|
if (this.border) {
|
|
cell.style.borderBottom = '1px solid #eee'
|
|
cell.style.borderRight = '1px solid #eee'
|
|
}
|
|
if (config.align) {
|
|
cell.style.justifyContent = config.align
|
|
}
|
|
if (config.width) {
|
|
cell.style.width = config.width.toString().replace(/(\d+)/g, '$1px')
|
|
cell.style.flexShrink = 0
|
|
} else {
|
|
cell.style.flex = 1
|
|
cell.style.minWidth = 0
|
|
}
|
|
cell.innerHTML = row?.[config.prop] || config.label
|
|
return cell
|
|
},
|
|
renderEmpty() {
|
|
const empty = document.createElement("div")
|
|
empty.style.background = 'url("https://cdn.cunwuyun.cn/dvcp/empty.svg") no-repeat'
|
|
empty.style.width = '100%'
|
|
empty.style.height = '140px'
|
|
empty.style.backgroundPosition = 'center 0'
|
|
empty.style.backgroundSize = '120px'
|
|
empty.style.borderBottom = '1px solid #eee'
|
|
empty.style.borderLeft = '1px solid #eee'
|
|
empty.style.borderRight = '1px solid #eee'
|
|
empty.style.textAlign = 'center'
|
|
empty.style.color = '#999'
|
|
empty.style.paddingTop = '110px'
|
|
empty.innerHTML = "暂无数据"
|
|
return empty
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$injectLib("https://cdn.cunwuyun.cn/html2canvas.min.js", () => {
|
|
this.html2canvas = window?.html2canvas
|
|
this.$nextTick(this.renderTable)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiBigTable {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
</style>
|