Skip to content

E
ec-report-refactor
Commit 57bb82ac authored by leon's avatar leon
Browse files
Options

feat：table add table cell style

parent 927bd1b8
Hide whitespace changes
Inline Side-by-side
Showing with 336 additions and 239 deletions
components/NormalTable/NormalTable.vue
View file @ 57bb82ac
<template> <template>
<view class="normal-table"> <view class="normal-table">
<NormalTitle :elementInfo="elementInfo"></NormalTitle> <NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]"> <scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
<view class="table"> <view class="table">
<view class= 'tr' :class="[sticky ? 'table_header_sticky' : 'table_header']" v-if="elementInfo.table.tableHeader.showHeader"> <view class='tr' :class="[sticky ? 'table_header_sticky' : 'table_header']"
<template v-for="(item, index) in elementInfo.table.column"> v-if="elementInfo.table.tableHeader.showHeader">
<view <template v-for="(item, index) in elementInfo.table.column">
class="th th_style" <view class="th th_style" :class="[index == 0 && !sticky ? 'row_fixed': '']" :key="index">
:class="[index == 0 && !sticky ? 'row_fixed': '']" {{item.title}}
:key="index" </view>
>{{item.title}}</view> </template>
</template> </view>
</view>
<view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex"
<view :class="elementInfo.table.tableCell.stripes? (cellIndex % 2 === 1 ? 'even-striped' : 'odd-striped'): null"
class="tr" @tap="cellClick(cell)">
v-for="(cell, cellIndex) in chartTables" <view v-for="(item, index) in elementInfo.table.column" :key="index" class="td td_style"
:key="cellIndex" :class="[item.dataIndex == elementInfo.table.column[0].dataIndex ? 'row_fixed': '']"
:class="elementInfo.table.tableCell.stripes? (cellIndex % 2 === 1 ? 'even-striped' : 'odd-striped'): null" :style="[tableCellStyle(index, cellIndex)]" :data-column="index" :data-row="cellIndex">
@tap="cellClick(cell)" <template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
> <template v-else-if="item.slots.customRender == 'picture'">
<view <u-image :height="100" mode="aspectFit"
v-for="(item, index) in elementInfo.table.column" :src="`${cell[item.dataIndex]}?${new Date().getTime()}`" crossOrigin="anonymous"
:key="index" style="width:100%" @click="imageClick(cellIndex, item.dataIndex)"></u-image>
class="td td_style" </template>
:class="[item.dataIndex == elementInfo.table.column[0].dataIndex ? 'row_fixed': '']" <template
> v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template> <template
<template v-else-if="item.slots.customRender == 'picture'"> v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</template>
<u-image <template
:height="100" v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
mode="aspectFit" <template
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`" v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template>
crossOrigin="anonymous" <template v-else>{{cell[item.dataIndex]}}</template>
style="width:100%" </view>
@click="imageClick(cellIndex, item.dataIndex)" </view>
></u-image> </view>
</template> </scroll-view>
<template v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template> </view>
<template v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</template> </template>
<template v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
<template v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template> <script>
<template v-else>{{cell[item.dataIndex]}}</template> import echartElementData from '@/mixins/echartElementData.js'
</view>
</view> export default {
</view> name: "NormalTable",
</scroll-view> mixins: [echartElementData],
</view> data() {
</template> return {
chartTables: [],
<script> align: {
import echartElementData from '@/mixins/echartElementData.js' left: 'start',
center: 'center',
export default { right: 'flex-end'
name:"NormalTable", },
mixins: [echartElementData], sticky: false
data() { };
return { },
chartTables: [], computed: {
align: { tableConfigStyle() {
left: 'start', const {
center: 'center', frameStyle,
right: 'flex-end' frameWidth,
}, frameColor,
sticky: false bordered
}; } = this.elementInfo.table
}, const {
computed: { evenColor,
tableConfigStyle() { oddColor,
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table backgroundColor: cellBackgroundColor,
const { evenColor, oddColor, backgroundColor: cellBackgroundColor, titlePostion: cellTitlePostion, titleFontSize: cellTitleFontSize, cellRowHeight, titleColor: cellTitleColor} = this.elementInfo.table.tableCell titlePostion: cellTitlePostion,
const { headerRowHeight, titleColor: headerTitleColor, backgroundColor: headerBackgroundColor, titlePostion: headerTitlePostion, titleFontSize: headerTitleFontSize } = this.elementInfo.table.tableHeader titleFontSize: cellTitleFontSize,
const cellWidth = this.elementInfo.table.column.length > 10 ? 130 : 240 cellRowHeight,
return { titleColor: cellTitleColor
'--table-width': `${cellWidth * this.elementInfo.table.column.length}rpx`, } = this.elementInfo.table.tableCell
'--cell-width': `0 0 ${cellWidth}rpx`, const {
'--cell--background-color': cellBackgroundColor, headerRowHeight,
'--even-color': evenColor, titleColor: headerTitleColor,
'--odd-color': oddColor, backgroundColor: headerBackgroundColor,
'--header-background-color': headerBackgroundColor, titlePostion: headerTitlePostion,
'--header-row-height': `${headerRowHeight}px`, titleFontSize: headerTitleFontSize
'--header-color': headerTitleColor, } = this.elementInfo.table.tableHeader
'--header-font-size': `${this.$u.common.pxToRpx(headerTitleFontSize)}rpx`, const cellWidth = this.elementInfo.table.column.length > 10 ? 130 : 240
'--header-text-align': headerTitlePostion || 'center', return {
'--header-border': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none', '--table-width': `${cellWidth * this.elementInfo.table.column.length}rpx`,
'--cell-text-align': cellTitlePostion, '--cell-width': `0 0 ${cellWidth}rpx`,
'--cell-justify-content': this.align[cellTitlePostion], '--cell--background-color': cellBackgroundColor,
'--cell-font-size': `${cellTitleFontSize || 14}px`, '--even-color': evenColor,
'--cell-row-height': `${cellRowHeight || 30}px`, '--odd-color': oddColor,
'--cell-color': cellTitleColor '--header-background-color': headerBackgroundColor,
} '--header-row-height': `${headerRowHeight}px`,
}, '--header-color': headerTitleColor,
}, '--header-font-size': `${this.$u.common.pxToRpx(headerTitleFontSize)}rpx`,
mounted() { '--header-text-align': headerTitlePostion || 'center',
uni.$on(this.elementInfo.id, ({sticky}) => { '--header-border': bordered ?
this.sticky = sticky `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}` : 'none',
}) '--cell-text-align': cellTitlePostion,
}, '--cell-justify-content': this.align[cellTitlePostion],
destroyed() { '--cell-font-size': `${cellTitleFontSize || 14}px`,
uni.$off(elementInfo.id) '--cell-row-height': `${cellRowHeight || 30}px`,
}, '--cell-color': cellTitleColor
methods: { }
initChart() { },
const that = this },
that.$nextTick(() => { mounted() {
that.chartTables = that.elementData.dataList.chartTables uni.$on(this.elementInfo.id, ({
}) sticky
}, }) => {
cellClick(e) { this.sticky = sticky
const { index, data } = this.elementInfo.child })
const paramName = this.elementInfo.table.primaryKey },
const value = e[paramName] destroyed() {
uni.$emit('handleLinkParams', { index, paramName, value: value }) uni.$off(elementInfo.id)
}, },
methods: {
// 图片增加点击事件，查看全部图片 initChart() {
imageClick(index, key) { const that = this
const images = [] that.$nextTick(() => {
var caches = uni.getStorageSync('cacheImages') if (that.elementData.dataList.columns) {
for(var i = 0; i < this.chartTables.length; i++) { const columns = that.elementData.dataList.columns.map(item => {
const imageUrl = this.chartTables[i][key] if (!item.slots) {
if(caches.hasOwnProperty(imageUrl)) { item.slots = {
images.push(caches[imageUrl]) customRender: ''
} else {
images.push(imageUrl)
}
}
uni.previewImage({
current: index,
urls: images
})
},
/**
* 缓存图片数据
*/
cacheImages(key) {
var caches = uni.getStorageSync('cacheImages')
if(!caches) {
caches = {}
}
this.chartTables.forEach(item => {
// 如果包含当前url，就不再下载
const url = item[key]
if(!caches.hasOwnProperty(url)) {
uni.downloadFile({
url: url,
success: (res) => {
if(res.statusCode === 200) {
caches[url] = res.tempFilePath
uni.setStorageSync('cacheImages', caches)
} }
} }
return item
}) })
} that.elementInfo.table.column = columns
}) }
} that.chartTables = that.elementData.dataList.chartTables
})
} },
}
</script> tableCellStyle(column, index) {
const that = this
<style scoped lang="scss"> const columns = that.elementInfo.table.column
.normal-table { const col = columns[column]
width: 100%; if (col && col.hasOwnProperty('condition')) {
height: calc(100% - 20px); const condition = col.condition
margin-top: 20px; // 设置了单元格样式
} if (condition && condition.length) {
.scroll-view_H { var color = ''
display: flex; var backgroundColor = ''
flex-wrap: nowrap; const data = that.chartTables[index]
width: 100%; const value = data[columns[column].dataIndex]
height: 100%; if (value) {
} condition.forEach((item) => {
.table { const op = item.op
width: var(--table-width); const val = item.value
box-sizing: border-box; let flag = false
background-color: var(--cell--background-color); if (op === 'GTR' && value > val) {
.table_header { flag = true
position: sticky; }
top: 0; if (op === 'GEQ' && value >= val) {
z-index: 2; flag = true
} }
.table_header_sticky { if (op === 'EQU' && value === val) {
position: fixed; flag = true
top: 0; }
z-index: 2; if (op === 'LSS' && value < val) {
} flag = true
.row_fixed { }
position: sticky; if (op === 'LEQ' && value <= val) {
left: 0; flag = true
z-index: 1; }
} if (op === 'NEQ' && value != val) {
} flag = true
.tr { }
display: flex; if (op === 'CONT' && value.toString().includes(val)) {
flex-direction: row; flag = true
} }
.th { if (flag) {
flex: var(--cell-width); color = item.color
font-size: 28rpx; backgroundColor = item.backgroundColor
color: $u-main-color; }
padding: 10px 0px; })
background-color: rgb(245, 246, 248); }
} if (color.length || backgroundColor.length) {
return {
.td{ color: color,
flex: var(--cell-width); backgroundColor: backgroundColor
align-self: stretch; }
padding: 10px 0px ; }
font-size: 28rpx; }
color: $u-content-color; }
display: flex;
align-items: center; },
justify-content: center;
} cellClick(e) {
const {
.th_style { index,
line-height: var(--header-row-height); data
font-size: var(--header-font-size); } = this.elementInfo.child
color: var(--header-color); const paramName = this.elementInfo.table.primaryKey
background-color: var(--header-background-color); const value = e[paramName]
text-align: var(--header-text-align); uni.$emit('handleLinkParams', {
border-bottom: var(--header-border); index,
} paramName,
value: value
.td_style { })
text-align: var(--cell-text-align); },
justify-content: var(--cell-justify-content);
font-size: var(--cell-font-size); // 图片增加点击事件，查看全部图片
line-height: var(--cell-row-height); imageClick(index, key) {
color: var(--cell-color); const images = []
border-bottom: var(--header-border); var caches = uni.getStorageSync('cacheImages')
} for (var i = 0; i < this.chartTables.length; i++) {
const imageUrl = this.chartTables[i][key]
.even-striped, .even-striped .row_fixed { if (caches.hasOwnProperty(imageUrl)) {
background-color: var(--even-color); images.push(caches[imageUrl])
} } else {
.odd-striped, .odd-striped .row_fixed { images.push(imageUrl)
background-color: var(--odd-color); }
} }
</style> uni.previewImage({
\ No newline at end of file current: index,
urls: images
})
},
/**
* 缓存图片数据
*/
cacheImages(key) {
var caches = uni.getStorageSync('cacheImages')
if (!caches) {
caches = {}
}
this.chartTables.forEach(item => {
// 如果包含当前url，就不再下载
const url = item[key]
if (!caches.hasOwnProperty(url)) {
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
caches[url] = res.tempFilePath
uni.setStorageSync('cacheImages', caches)
}
}
})
}
})
}
}
}
</script>
<style scoped lang="scss">
.normal-table {
width: 100%;
height: calc(100% - 20px);
margin-top: 20px;
}
.scroll-view_H {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.table {
width: var(--table-width);
box-sizing: border-box;
background-color: var(--cell--background-color);
.table_header {
position: sticky;
top: 0;
z-index: 2;
}
.table_header_sticky {
position: fixed;
top: 0;
z-index: 2;
}
.row_fixed {
position: sticky;
left: 0;
z-index: 1;
}
}
.tr {
display: flex;
flex-direction: row;
}
.th {
flex: var(--cell-width);
font-size: 28rpx;
color: $u-main-color;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.td {
flex: var(--cell-width);
align-self: stretch;
padding: 10px 0px;
font-size: 28rpx;
color: $u-content-color;
display: flex;
align-items: center;
justify-content: center;
}
.th_style {
line-height: var(--header-row-height);
font-size: var(--header-font-size);
color: var(--header-color);
background-color: var(--header-background-color);
text-align: var(--header-text-align);
border-bottom: var(--header-border);
}
.td_style {
text-align: var(--cell-text-align);
justify-content: var(--cell-justify-content);
font-size: var(--cell-font-size);
line-height: var(--cell-row-height);
color: var(--cell-color);
border-bottom: var(--header-border);
}
.even-striped,
.even-striped .row_fixed {
background-color: var(--even-color);
}
.odd-striped,
.odd-striped .row_fixed {
background-color: var(--odd-color);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment