FactorySystemWeb/src/views/half/components/ShowData1.vue

<template>
	<div class="box-data">
		<lay-scroll  height="800px">
			<lay-quote>配方变更详情</lay-quote>
			<lay-container class="dataInfo">

				<lay-row space="10">
					<lay-col md="6"><div class="grid-demo" style="text-align: right;">原配方：</div></lay-col>
					<lay-col md="18"><div class="grid-demo" style="text-align: left;">配方号+版本号+描述</div></lay-col>
					<lay-col md="6"><div class="grid-demo" style="text-align: right;">变更后的配方：</div></lay-col>
					<lay-col md="18"><div class="grid-demo" style="text-align: left;">配方号+版本号+描述</div></lay-col>
				</lay-row>
			</lay-container>
			<lay-quote v-if="dataList.length>0">视图</lay-quote>
			<lay-container class="tableInfo" v-if="dataList.length>0">
				<lay-table :columns="dataColumn" :dataSource="dataList">
					<template v-slot:operator="{ data }">
						<lay-button v-if="data.seeCode!=''" size="xs" type="primary" @click="_getTeamworkView(data,1)">
							查看
						</lay-button>
						<lay-button v-if="data.outCode!=''" size="xs" type="primary" @click="_getTeamworkView(data,2)">
							导出
						</lay-button>
					</template>
				</lay-table>
			</lay-container>
		</lay-scroll>
		<lay-layer area="90%" v-model="showEditBox" title="视图查看">
			<ShowView :viewList="viewList" :viewHeight="viewHeight" @cancelClick="cancelClick"></ShowView>
		</lay-layer>
	</div>
</template>

<style scoped>
	.box-data {
		margin: 10px auto;
		display: block;
	}

	.dataInfo {
		max-width: 960px;
		margin: 14px auto 20px;
		overflow: hidden;
		clear: both;
		float: none;
	}

	.pro-item.state1 {
		background-color: rgb(50, 189, 182, 0.9);
		background-image: url('../../../assets/state1.png');
		box-shadow: 4px 4px 4px rgb(50, 189, 182, 0.4);
	}

	.pro-item.state2 {
		background-color: rgb(22, 138, 221, 0.9);
		background-image: url('../../../assets/state2.png');
		box-shadow: 4px 4px 4px rgb(22, 138, 221, 0.4);
	}

	.pro-item.none {
		float: none !important;
		display: block !important;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}

	.pro-item.none .left {
		margin-top: 11px;
	}

	.pro-item {
		background: rgb(187, 187, 187, 0.9) url('../../../assets/state0.png') no-repeat left top;
		-webkit-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		width: 48%;
		margin: 10px 1%;
		padding: 16px 5px;
		box-shadow: 4px 4px 4px rgb(187, 187, 187, 0.4);
	}

	.pro-item .left {
		width: 34%;
		display: block;
		text-align: center;
		float: left;
		margin-top: 13px;
		margin-bottom: 5px;
	}

	.pro-item .left.margin {
		margin-top: 6px;
		margin-bottom: 0;
	}

	.pro-item .left.margin .group {
		margin: 6px auto 2px;
	}

	.pro-item .left .num {
		-webkit-border-radius: 32px;
		-ms-border-radius: 32px;
		-o-border-radius: 32px;
		-moz-border-radius: 32px;
		border-radius: 32px;
		display: block;
		line-height: 32px;
		font-size: 22px;
		width: 32px;
		border: 1px solid #222;
		margin: 0 auto;
	}

	.pro-item .left .group {
		font-weight: 500;
		line-height: 22px;
		margin: 10px auto 8px;
		font-size: 16px;
		max-width: 100px;
		display: block;
		overflow: hidden;
	}

	.pro-item .right {
		width: 63%;
		display: inline-block;
		line-height: 22px;
	}

	.pro-item .right p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}

	.pro-next {
		display: block;
		background: url('../../../assets/state-next.jpg') no-repeat center;
		height: 30px;
		margin: 10px auto;
	}

	.tableInfo {
		max-width: 96%;
		margin: 20px auto;
		overflow: hidden;
		clear: both;
		float: none;
	}
</style>
<script>
	import {
		ref,
		watch
	} from 'vue';
	import {
		getTeamProcessList,
		getTeamworkView
	} from "/src/api/api/teamwork";
	import {
		getBasicRoleList
	} from "/src/api/api/user";

	import ShowView from './ShowView.vue';

	export default {
		components: {
			ShowView
		},
		setup() {
			const dataList = ref([]);
			let dataColumn = [{
					title: "视图",
					key: "name",
				},
				{
					title: "操作",
					key: "operator",
					width: "148px",
					customSlot: "operator",
					align: "center"
				}
			];
			const dataProcess = ref({});
			//总共有几种视图类型
			const viewTypeCount = ref(5);
			const showEditBox = ref(false);
			const viewList = ref([]);
			const viewHeight = ref(500);
			return {
				dataList,
				dataColumn,
				dataProcess,
				viewTypeCount,
				showEditBox,
				viewList,
				viewHeight
			}
		},
		props: {
			dataInfoObj: {
				type: Object,
				default: () => {},
			}
		},
		mounted() {
			this._getViewList();
		},
		methods: {

			//获取视图
			async _getViewList() {
				this.dataList = [{"name":"新物料视图","seeCode":"1","outCode":"6"},{"name":"受影响的物料视图","seeCode":"5","outCode":"10"},{"name":"配方视图","seeCode":"5","outCode":"10"}];
			},
			async _getTeamworkView(data, type) {
				let viewType = parseInt(type == 1 ? data.seeCode : data.outCode);
				if (type == 2) viewType = viewType - this.viewTypeCount;
				let postData = {
					FTeamID: this.dataInfoObj.FID,
					FViewType: viewType,
					FType: type,
					HalfId : this.dataInfoObj.FMaterialHalfIDs
				};
				if (this.dataInfoObj.FProgress == "100" || this.dataInfoObj.FProgress == "100%") {
					postData.FFinish = 1;
				}
				let idx = layer.load(2);
				let result = await getTeamworkView(postData);
				layer.close(idx);
				if (type == 1) {
					let list = [];
					let count = 0;
					for (let key in result) {
						list.push(result[key]);
						count += result[key].length;
					};
					if (count == 0) {
						layer.msg("请稍等，视图信息还在编辑中", {
							time: 2000,
							icon: 3
						});
					} else {
						this.viewList = list;
						this.viewHeight = Math.ceil(this.dataInfoObj.FHeight * 0.6);
						this.showEditBox = true;
					}
				} else {
					window.open(result);
				}
			},
			//日期处理
			dateFormat(dataStr) {
				if (dataStr == null || dataStr == "") return "";
				return dataStr.replace('T', ' ').split('.')[0];
			},
			cancelClick(isFirst) {
				this.$emit('cancelClick', isFirst ? isFirst : false);
			}
		}
	}
</script>