FactorySystemWeb/src/views/Team/components/ShowView.vue

<template>
	<lay-container fluid="true" class="content-box">
		<lay-table v-if="dataColumn.length>0" :height="viewHeight+'px'" :columns="dataColumn" :data-source="dataList"
			:row-style="rowStyle">
		</lay-table>
	</lay-container>
</template>

<style scoped>
	.content-box {
		margin: 30px 10px;
		display: block;
		position: relative;
		clear: both;
		float: none;
	}
</style>
<script>
	import {
		ref
	} from 'vue';

	export default {
		setup() {
			const dataColumn = ref([]);
			const dataList = ref([]);
			const dataColor = ref([]);
			let colors = ["1E9FFF", "009688", "393D49", "5FB878"];
			const rowStyle = function(row, rowIndex) {
				let color = "";
				for (let idx = 0; idx < dataColor.value.length; idx++) {
					if (rowIndex > dataColor.value[idx]) color = "color:#" + colors[idx];
				}
				return color;
			}
			return {
				dataColumn,
				dataList,
				dataColor,
				rowStyle,
			}
		},
		props: {
			viewList: {
				type: Object,
				default: () => [],
			},
			viewHeight: {
				type: Number,
				default: () => 600,
			}
		},
		mounted() {
			this.initPage();
		},
		methods: {
			
			initPage() {
				let dataColumn = [{
					type: "number",
					title: "序号",
					width: "56"
				}];
				let dataList = [];
				let dataColor = []
				this.viewList.forEach((item) => {
					if (item.length > 0) {
						if (dataColumn.length == 1) {
							for (let key in item[0]) {
								let width = (key.indexOf("描述") != -1 || key == "文本" || key == "物料") ? "300px" :
									"130px";
								width = key.indexOf("编码") != -1 ? "200px" : width;
								dataColumn.push({
									key: key,
									title: key.split('.').pop(),
									align: "center",
									width: width
								});
							}
						}
						item.forEach((item2) => {
							dataList.push(item2);
						});
						dataColor.push(dataList.length - 1);
					}
				});
				this.dataColumn = dataColumn;
				this.dataList = dataList;
				this.dataColor = dataColor
			},
			cancelClick() {
				this.$emit('cancelClick', false);
			}
		}
	}
</script>