feat：table add table cell style

components/NormalTable/NormalTable.vue

@@ -3,44 +3,35 @@
 		<NormalTitle :elementInfo="elementInfo"></NormalTitle>
 		<scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
 			<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']"
+					v-if="elementInfo.table.tableHeader.showHeader">
 					<template v-for="(item, index) in elementInfo.table.column">
-						<view
-							class="th th_style"
-							:class="[index == 0 && !sticky ? 'row_fixed': '']"
-							:key="index"
-						>{{item.title}}</view>
+						<view class="th th_style" :class="[index == 0 && !sticky ? 'row_fixed': '']" :key="index">
+							{{item.title}}
+						</view>
 					</template>
 				</view>
 
-				<view
-					class="tr"
-					v-for="(cell, cellIndex) in chartTables"
-					:key="cellIndex"
+				<view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex"
 					:class="elementInfo.table.tableCell.stripes? (cellIndex % 2 === 1 ? 'even-striped' : 'odd-striped'): null"
-					@tap="cellClick(cell)"
-				>
-					<view
-						v-for="(item, index) in elementInfo.table.column"
-						:key="index"
-						class="td td_style"
+					@tap="cellClick(cell)">
+					<view v-for="(item, index) in elementInfo.table.column" :key="index" class="td td_style"
 						:class="[item.dataIndex == elementInfo.table.column[0].dataIndex ? 'row_fixed': '']"
-					>
+						:style="[tableCellStyle(index, cellIndex)]" :data-column="index" :data-row="cellIndex">
 						<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
 						<template v-else-if="item.slots.customRender == 'picture'">
-							<u-image
-								:height="100"
-								mode="aspectFit"
-								:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
-								crossOrigin="anonymous"
-								style="width:100%"
-								@click="imageClick(cellIndex, item.dataIndex)"
-							></u-image>
+							<u-image :height="100" mode="aspectFit"
+								:src="`${cell[item.dataIndex]}?${new Date().getTime()}`" crossOrigin="anonymous"
+								style="width:100%" @click="imageClick(cellIndex, item.dataIndex)"></u-image>
 						</template>
-						<template v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
-						<template v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</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>
+						<template
+							v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
+						<template
+							v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</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>
 						<template v-else>{{cell[item.dataIndex]}}</template>
 					</view>
 				</view>
@@ -53,7 +44,7 @@
 	import echartElementData from '@/mixins/echartElementData.js'
 
 	export default {
-		name:"NormalTable",
+		name: "NormalTable",
 		mixins: [echartElementData],
 		data() {
 			return {
@@ -68,9 +59,28 @@
 		},
 		computed: {
 			tableConfigStyle() {
-				const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
-				const { evenColor, oddColor, backgroundColor: cellBackgroundColor, titlePostion: cellTitlePostion, titleFontSize: cellTitleFontSize, cellRowHeight, titleColor: cellTitleColor} = this.elementInfo.table.tableCell
-				const { headerRowHeight, titleColor: headerTitleColor, backgroundColor: headerBackgroundColor, titlePostion: headerTitlePostion, titleFontSize: headerTitleFontSize } = this.elementInfo.table.tableHeader
+				const {
+					frameStyle,
+					frameWidth,
+					frameColor,
+					bordered
+				} = this.elementInfo.table
+				const {
+					evenColor,
+					oddColor,
+					backgroundColor: cellBackgroundColor,
+					titlePostion: cellTitlePostion,
+					titleFontSize: cellTitleFontSize,
+					cellRowHeight,
+					titleColor: cellTitleColor
+				} = this.elementInfo.table.tableCell
+				const {
+					headerRowHeight,
+					titleColor: headerTitleColor,
+					backgroundColor: headerBackgroundColor,
+					titlePostion: headerTitlePostion,
+					titleFontSize: headerTitleFontSize
+				} = this.elementInfo.table.tableHeader
 				const cellWidth = this.elementInfo.table.column.length > 10 ? 130 : 240
 				return {
 					'--table-width': `${cellWidth * this.elementInfo.table.column.length}rpx`,
@@ -83,7 +93,8 @@
 					'--header-color': headerTitleColor,
 					'--header-font-size': `${this.$u.common.pxToRpx(headerTitleFontSize)}rpx`,
 					'--header-text-align': headerTitlePostion || 'center',
-					'--header-border': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
+					'--header-border': bordered ?
+						`${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}` : 'none',
 					'--cell-text-align': cellTitlePostion,
 					'--cell-justify-content': this.align[cellTitlePostion],
 					'--cell-font-size': `${cellTitleFontSize || 14}px`,
@@ -93,7 +104,9 @@
 			},
 		},
 		mounted() {
-			uni.$on(this.elementInfo.id, ({sticky}) => {
+			uni.$on(this.elementInfo.id, ({
+				sticky
+			}) => {
 				this.sticky = sticky
 			})
 		},
@@ -104,23 +117,97 @@
 			initChart() {
 				const that = this
 				that.$nextTick(() => {
+					if (that.elementData.dataList.columns) {
+						const columns = that.elementData.dataList.columns.map(item => {
+							if (!item.slots) {
+								item.slots = {
+									customRender: ''
+								}
+							}
+							return item
+						})
+						that.elementInfo.table.column = columns
+					}
 					that.chartTables = that.elementData.dataList.chartTables
 				})
 			},
+
+			tableCellStyle(column, index) {
+				const that = this
+				const columns = that.elementInfo.table.column
+				const col = columns[column]
+				if (col && col.hasOwnProperty('condition')) {
+					const condition = col.condition
+					// 设置了单元格样式
+					if (condition && condition.length) {
+						var color = ''
+						var backgroundColor = ''
+						const data = that.chartTables[index]
+						const value = data[columns[column].dataIndex]
+						if (value) {
+							condition.forEach((item) => {
+								const op = item.op
+								const val = item.value
+								let flag = false
+								if (op === 'GTR' && value > val) {
+									flag = true
+								}
+								if (op === 'GEQ' && value >= val) {
+									flag = true
+								}
+								if (op === 'EQU' && value === val) {
+									flag = true
+								}
+								if (op === 'LSS' && value < val) {
+									flag = true
+								}
+								if (op === 'LEQ' && value <= val) {
+									flag = true
+								}
+								if (op === 'NEQ' && value != val) {
+									flag = true
+								}
+								if (op === 'CONT' && value.toString().includes(val)) {
+									flag = true
+								}
+								if (flag) {
+									color = item.color
+									backgroundColor = item.backgroundColor
+								}
+							})
+						}
+						if (color.length || backgroundColor.length) {
+							return {
+								color: color,
+								backgroundColor: backgroundColor
+							}
+						}
+					}
+				}
+
+			},
+
 			cellClick(e) {
-				const { index, data } = this.elementInfo.child
+				const {
+					index,
+					data
+				} = this.elementInfo.child
 				const paramName = this.elementInfo.table.primaryKey
 				const value = e[paramName]
-				uni.$emit('handleLinkParams', { index, paramName, value: value })
+				uni.$emit('handleLinkParams', {
+					index,
+					paramName,
+					value: value
+				})
 			},
 
 			// 图片增加点击事件，查看全部图片
 			imageClick(index, key) {
 				const images = []
 				var caches = uni.getStorageSync('cacheImages')
-				for(var i = 0; i < this.chartTables.length; i++) {
+				for (var i = 0; i < this.chartTables.length; i++) {
 					const imageUrl = this.chartTables[i][key]
-					if(caches.hasOwnProperty(imageUrl)) {
+					if (caches.hasOwnProperty(imageUrl)) {
 						images.push(caches[imageUrl])
 					} else {
 						images.push(imageUrl)
@@ -136,17 +223,17 @@
 			 */
 			cacheImages(key) {
 				var caches = uni.getStorageSync('cacheImages')
-				if(!caches) {
+				if (!caches) {
 					caches = {}
 				}
 				this.chartTables.forEach(item => {
 					// 如果包含当前url，就不再下载
 					const url = item[key]
-					if(!caches.hasOwnProperty(url)) {
+					if (!caches.hasOwnProperty(url)) {
 						uni.downloadFile({
 							url: url,
 							success: (res) => {
-								if(res.statusCode === 200) {
+								if (res.statusCode === 200) {
 									caches[url] = res.tempFilePath
 									uni.setStorageSync('cacheImages', caches)
 								}
@@ -161,82 +248,92 @@
 </script>
 
 <style scoped lang="scss">
-.normal-table {
+	.normal-table {
 		width: 100%;
 		height: calc(100% - 20px);
 		margin-top: 20px;
-}
-.scroll-view_H {
+	}
+
+	.scroll-view_H {
 		display: flex;
 		flex-wrap: nowrap;
 		width: 100%;
 		height: 100%;
-}
-.table {
+	}
+
+	.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 {
+	}
+
+	.tr {
 		display: flex;
 		flex-direction: row;
-}
-.th {
+	}
+
+	.th {
 		flex: var(--cell-width);
 		font-size: 28rpx;
 		color: $u-main-color;
 		padding: 10px 0px;
 		background-color: rgb(245, 246, 248);
-}
+	}
 
-.td{
+	.td {
 		flex: var(--cell-width);
 		align-self: stretch;
-	padding: 10px 0px ;
+		padding: 10px 0px;
 		font-size: 28rpx;
 		color: $u-content-color;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-}
+	}
 
-.th_style {
+	.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 {
+	.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 {
+	.even-striped,
+	.even-striped .row_fixed {
 		background-color: var(--even-color);
-}
-.odd-striped, .odd-striped .row_fixed {
+	}
+
+	.odd-striped,
+	.odd-striped .row_fixed {
 		background-color: var(--odd-color);
-}
+	}
 </style>