原材料需求差异分析

src/views/plant/materialAnalysis/version/index.vue

@@ -0,0 +1,143 @@
+<template>
+	<ContentContainer class="material-version-wrapper">
+		<div class="content-table-wrap clearfix">
+			<div class="content-left fl">
+				<el-table
+					class="version-table"
+					:data="versionData"
+					height="98%"
+					highlight-current-row
+					@current-change="handleCurrentTableOne"
+					v-loading="loading"
+					size="mini"
+					border>
+					<el-table-column label="版本号" :show-overflow-tooltip="true" prop="AP_CustDemandVerHead-VersionId">
+						<template #default="scope">
+							<span>{{ scope.row['AP_CustDemandVerHead-VersionId'] }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="客户" :show-overflow-tooltip="true" prop="AP_CustDemandVerHead-CustomerId">
+						<template #default="scope">
+							<span>{{ scope.row['AP_CustDemandVerHead-CustomerId'] }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="状态" :show-overflow-tooltip="true" prop="AP_CustDemandVerHead-Status">
+						<template #default="scope">
+							<span>{{ scope.row['AP_CustDemandVerHead-Status'] }}</span>
+						</template>
+					</el-table-column>
+				</el-table>
+			</div>
+			<div class="content-middle fl" v-if="withTheRingRadio === 'ring'">
+				<div class="middle-vs">vs</div>
+			</div>
+			<div class="content-right fl" v-if="withTheRingRadio === 'ring'">
+				<el-table
+					class="version-table"
+					:data="versionData"
+					height="98%"
+					@current-change="handleCurrentTableTwo"
+					highlight-current-row
+					v-loading="loading"
+					size="mini"
+					border>
+					<el-table-column label="版本号" :show-overflow-tooltip="true" prop="AP_CustDemandVerHead-VersionId">
+						<template #default="scope">
+							<span>{{ scope.row['AP_CustDemandVerHead-VersionId'] }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="客户" :show-overflow-tooltip="true" prop="AP_CustDemandVerHead-CustomerId">
+						<template #default="scope">
+							<span>{{ scope.row['AP_CustDemandVerHead-CustomerId'] }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="状态" :show-overflow-tooltip="true" prop="AP_CustDemandVerHead-Status">
+						<template #default="scope">
+							<span>{{ scope.row['AP_CustDemandVerHead-Status'] }}</span>
+						</template>
+					</el-table-column>
+				</el-table>
+			</div>
+		</div>
+	</ContentContainer>
+</template>
+<script>
+import { get } from "@/server/api.js"
+export default {
+	props: ["customerId", "withTheRingRadio"],
+	data() {
+		return {
+			loading: false,
+			versionData: [],
+			tableVersionOne: '',
+			tableVersionTwo: '',
+		}
+	},
+	methods: {
+		// 获取版本列表数据
+		getVersionData(id) {
+			this.loading = true
+			get(`/admin/ap/custdemandverhead/selectlist`, {customerId: id}).then(({ code, data }) => {
+				if (code === 200) {
+					this.loading = false
+					this.versionData = data
+				}
+			})
+		},
+		handleCurrentTableOne(val) {
+			this.tableVersionOne = val['AP_CustDemandVerHead-VersionId']
+		},
+		handleCurrentTableTwo(val) {
+			this.tableVersionTwo = val['AP_CustDemandVerHead-VersionId']
+		}
+	},
+	watch: {	
+		customerId: {
+			handler (data) {
+				this.getVersionData(data)
+			},
+			deep: true
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.material-version-wrapper {
+	height: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 0;
+	height: 100%;
+	.content-table-wrap {
+		width: 100%;
+		height: 100%;
+		.content-left, .content-right {
+			width: calc(50% - 45px);
+			height: 100%;
+		}
+		.content-left {
+			padding-left: 10px;
+		}
+		.content-middle {
+			width: 70px;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.middle-vs {
+				width: 52px;
+				height: 52px;
+				background: linear-gradient(180deg, #EDEFF1 0%, #D7DBDF 100%);
+				border-radius: 8px;
+				border: 1px solid #90959A;
+				font-size: 20px;
+				text-align: center;
+				line-height: 52px;
+			}
+		}
+	}
+	.version-table {
+		width: 100%;
+	}
+}
+</style>