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">
			<template v-slot:toolbar>
				<lay-button v-if="this.buttonName" size="sm" type="primary" @click="upload">{{ buttonName }}
				</lay-button>
			</template>
		</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';
	import {
		uploadViewMaterial,
		uploadProductVersion,		
		uploadBom
	} from "/src/api/api/sapUpload";
import { layer } from '@layui/layer-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;
			};
			const buttonName = ref("");
			return {
				dataColumn,
				dataList,
				dataColor,
				rowStyle,
				buttonName
			}
		},
		props: {
			viewList: {
				type: Object,
				default: () => [],
			},
			viewHeight: {
				type: Number,
				default: () => 600,
			},
			viewType: {
				type: Number,
				default: () => 0
			}
		},
		mounted() {
			if (this.viewType == 1) {
				this.buttonName = "物料上传"
			}

			if (this.viewType == 4) {
				this.buttonName = "通用生产版本上传"
			}

			if (this.viewType == 5) {
				this.buttonName = "通用BOM上传"
			}
			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);
			},
			async upload() {
				if (this.viewType == 1) {
					let idx = layer.load(2);
					let result = await uploadViewMaterial(this.dataList)
					console.log('result', result);
					layer.close(idx);

					if (result > 0) {
						layer.msg('物料上传成功');
					} else {
						layer.msg('物料上传失败');
					}
				}

				if (this.viewType == 4) {
					let idx = layer.load(2);
					let result = await uploadProductVersion(this.dataList)
					console.log('result', result);
					layer.close(idx);

					if (result > 0) {
						layer.msg('通用生产版本上传');
					} else {
						layer.msg('通用生产版本上传');
					}
				}	

				if (this.viewType == 5) {
					let idx = layer.load(2);
					let result = await uploadBom(this.dataList)
					console.log('result', result);
					layer.close(idx);

					if (result > 0) {
						layer.msg('通用BOM上传成功');
					} else {
						layer.msg('通用BOM上传失败');
					}
				}			
			}
		}
	}
</script>