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

<template>
	<div class="box-data">
		<lay-scroll v-if="dataInfoObj.FHeight" :height="dataInfoObj.FHeight+'px'">
			<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;">
							{{ dataInfoObj.FTestCode }}+{{ dataInfoObj.FVersionCode }}+{{ dataInfoObj.FDesc }}</div>
					</lay-col>
				</lay-row>
				<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;">
							{{ dataInfoObj.FNewTestCode }}+{{ dataInfoObj.FNewVersionCode }}+{{ dataInfoObj.FNewDesc }}
						</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" :viewType="viewType" @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 {
	getTeamworkView
} from "/src/api/api/halfmaterialteamwork";
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 showEditBox1 = ref(false);
		const viewList = ref([]);
		const viewHeight = ref(500);
		const objInfoObj = ref([]);
		const viewType = ref(0);
		return {
			dataList,
			dataColumn,
			dataProcess,
			viewTypeCount,
			showEditBox,
			showEditBox1,
			viewList,
			viewHeight,
			objInfoObj,
			viewType
		}
	},
	props: {
		dataInfoObj: {
			type: Object,
			default: () => { },
		}
	},
	mounted() {
		this._getViewList();
	},
	methods: {

		//获取视图
		async _getViewList() {

			let result =[
				{"FID":43,"FCode":"1","FName":"物料视图","FRemark":"视图查看","F1":"","F2":""},
				{"FID":44,"FCode":"2","FName":"配方视图","FRemark":"视图查看","F1":"","F2":""},
				{"FID":45,"FCode":"3","FName":"生产工艺路线视图","FRemark":"视图查看","F1":"","F2":""},
				{"FID":46,"FCode":"4","FName":"生产版本视图","FRemark":"视图查看","F1":"","F2":""},
				{"FID":47,"FCode":"5","FName":"组装BOM视图","FRemark":"视图查看","F1":"","F2":""},
				{"FID":48,"FCode":"6","FName":"物料视图","FRemark":"视图导出","F1":"","F2":""},
				{"FID":49,"FCode":"7","FName":"配方视图","FRemark":"视图导出","F1":"","F2":""},
				{"FID":50,"FCode":"8","FName":"生产工艺路线视图","FRemark":"视图导出","F1":"","F2":""},
				{"FID":51,"FCode":"9","FName":"生产版本视图","FRemark":"视图导出","F1":"","F2":""},
				{"FID":52,"FCode":"10","FName":"组装BOM视图","FRemark":"视图导出","F1":"","F2":""}
			];

			let result2 = await getBasicRoleList({
				FRoleType: 39,
				TeamId: this.dataInfoObj.FID,
				Type: 2

			}) || [];

			console.log('result', result);
			console.log('this.dataInfoObj', this.dataInfoObj);
			let dataList = [];
			let hasType = "1,2".split(',');
			result.forEach((item) => {
				let viewData = dataList.find(s => s.name == item.FName) || null;

				if (viewData == null) {
					if (hasType.indexOf(item.FCode) != -1) {
						viewData = {
							name: item.FName,
							seeCode: "",
							outCode: ""
						};
						if (result2) {
							let dataResult = result2.find((x) => {
								return x.FID == item.FID;
							})
							if (dataResult) {
								if (item.FRemark.indexOf("查看") != -1) viewData.seeCode = item.FCode;
								if (item.FRemark.indexOf("导出") != -1) viewData.outCode = item.FCode;
							}

						}

						dataList.push(viewData);
					}
				} else {
					if (result2) {
						let dataResult = result2.find((x) => {
							return x.FID == item.FID;
						})
						if (dataResult) {
							if (item.FRemark.indexOf("查看") != -1) viewData.seeCode = item.FCode;
							if (item.FRemark.indexOf("导出") != -1) viewData.outCode = item.FCode;
						}

					}
				}
			});

			this.dataList = dataList;


			//this.dataList = [{ "name": "物料视图", "code": "1", "outCode": "6","seeCode":"1" }, { "name": "配方视图", "code": "2", "outCode": "7","seeCode":"2" }];
		},
		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
			};
			this.viewType = viewType;
			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(500);
					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>