bt/imcs-bt-fe/imcs-bt-fe/uni-mall/pages/material/material.vue

<template>
	<view class="container">		
		<uni-section title="原料" type="line" padding>
			<uni-grid :column="4" :highlight="true">
				<uni-grid-item v-for="(item, index) in categoryList" :index="index" :key="index" style="height:400px;">
					<view class="grid-item-box" style="background-color: #fff;text-align:center;margin:10px 0;"
						@click="inputDialogToggle(item)">
						<text class="text">{{item.name}}</text>
						<!--<cover-image class="img" src="@/static/images/rectangle.png"></cover-image>
						<view class="progress-box">
							<progress :percent="item.val" stroke-width="100" inverse="false" style="width:300px;"
								v-if="item.status===0" />
							<progress :percent="item.val" stroke-width="100" inverse="false" activeColor="#ff0000"
								v-if="item.status===1" style="width:300px;" />
						</view>-->
						<view class="progressContainer">
							<view class="progress" :style="{ height: item.val + '%' }" v-if="item.status===0">
								<view class="progress-view"></view>
							</view>
							<view class="progress" :style="{ height: item.val + '%', backgroundColor:'#ff0000'}"
								v-if="item.status===1">
								<view class="progress-view"></view>
							</view>
							<text class="errMsg" v-if="item.status===1">{{item.errMsg}}</text>
							<text class="tip">{{item.val}}ml</text>
						</view>						

						<view class="num">
							<uni-badge class="uni-badge-left-margin" :text="item.id" type="primary"
								:customStyle="{background: '#00ffff', width: '60rpx',height:'60rpx',lineHeight:'60rpx',minWidth:'30rpx',fontSize:'40rpx'}" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<uni-section title="操作记录" type="line" padding>
			<uni-list>
				<uni-list-item title="时间"></uni-list-item>				
			</uni-list>
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">料筒</uni-th>
					<uni-th align="center">剩余原料</uni-th>
					<uni-th align="center">余量</uni-th>
					<uni-th align="center">换料原料</uni-th>
					<uni-th align="center">换料规格</uni-th>
					<uni-th align="center">到期日期</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in records" :key="item.id">
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td align="center">{{item.name}}</uni-td>
					<uni-td align="center">{{item.surplus}}</uni-td>
					<uni-td align="center">{{item.rawMaterial}}</uni-td>
					<uni-td align="center">{{item.specs}}</uni-td>
					<uni-td align="center">{{item.date}}</uni-td>
				</uni-tr>
			</uni-table>

			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center"></uni-th>
					<uni-th align="center">原料</uni-th>
					<uni-th align="center">规格</uni-th>
					<uni-th align="center">到期日期</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in records2" :key="item.id">
					<uni-td align="center">{{item.status===0?'修正前':'修正后'}}</uni-td>
					<uni-td align="center">{{item.name}}</uni-td>
					<uni-td align="center">{{item.specs}}</uni-td>
					<uni-td align="center">{{item.date}}</uni-td>
				</uni-tr>
			</uni-table>

			<uni-load-more status="more"></uni-load-more>
		</uni-section>

		<view class="example-body box" v-show="popShow">
			<uni-popup ref="inputDialog" type="dialog">
				<view class="popup">
					<uni-row class="uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">料筒</view>
						</uni-col>
						<uni-col :span="12">
							<view class="uni-col light">{{material.id}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="uni-row" >
						<uni-col :span="12">
							<view class="uni-col dark">料筒</view>
						</uni-col>
						<uni-col :span="12">
							<view class="uni-col light">{{material.id}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="uni-row">
						<uni-col :span="12">
							<view class="uni-col dark">产品</view>
						</uni-col>
						<uni-col :span="12">
							<view class="uni-col light">{{material.name}}</view>
						</uni-col>
					</uni-row>					
					<uni-row class="uni-row">
						<uni-col :span="12">
							<view class="uni-col dark">原料剩余</view>
						</uni-col>
						<uni-col :span="12">
							<view class="uni-col light">{{material.surplus}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="uni-row">
						<uni-col :span="12">
							<view class="uni-col dark">过期状态</view>
						</uni-col>
						<uni-col :span="12">
							<view class="uni-col light">{{material.status===0?'未过期':'过期'}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="uni-row">
						<uni-col :span="12">
							<view class="uni-col dark">到期日期</view>
						</uni-col>
						<uni-col :span="12">
							<view class="uni-col light">{{material.date}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="uni-row">
						<uni-col :span="12">
							<button @click="editDialog(material)" type="primary" size="mini">修正</button>
						</uni-col>
						<uni-col :span="12">
							<button @click="dialogClose" type="primary" size="mini">关闭</button>
						</uni-col>
					</uni-row>
				</view>	
			</uni-popup>			
		</view>
	
	    <view class="">	
			<MaterialDetail ref="edit" :dialog-visible="editShow" @close="editClose" ></MaterialDetail>
		</view>
	</view>
</template>

<script>
	import MaterialDetail from "@/pages/material/materialDetail.vue";
	export default {
		data() {
			return {
				index: 0,
				index2: 0,
				array: [1, 2, 3, 4, 5, 6, 7, 8],
				specs: [5, 10, 20],
				popShow: false,
				editShow: false,
				materials: ['燕麦', '魔芋粉', '牛肉粉', '红薯粉', '蜂蜜'],
				material: {
					equId: '',
					barrelCode:'',
					name: '',
					surplus: '',
					specs: '',
					date: '',
					status: ''
				},
				records: [{
					id: 1,
					name: '燕麦',
					rawMaterial: '燕麦',
					surplus: '2',
					specs: '10',
					date: '2021-11-14 12:13'
				}],
				records2: [{
					id: 1,
					name: '燕麦',
					surplus: '2',
					specs: '10',
					date: '2021-11-14 12:13',
					status: 0,
				}, {
					id: 2,
					name: '燕麦',
					surplus: '2',
					specs: '10',
					date: '2021-11-14 12:13',
					status: 1,
				}],
				categoryList: [{
					id: 1,
					name: "燕麦",
					val: 40,
					status: 1,
					errMsg: '原料不足',
				}, {
					id: 2,
					name: "魔芋粉",
					val: 60,
					status: 1,
					errMsg: '即将过期',
				}, {
					id: 3,
					name: "红薯粉",
					val: 80,
					status: 0,
					errMsg: '',
				}, {
					id: 4,
					name: "牛肉粉",
					val: 65,
					status: 0,
					errMsg: '',
				}, {
					id: 5,
					name: "蜂蜜",
					val: 40,
					status: 0,
					errMsg: '',
				}, {
					id: 6,
					name: "安赛蜜",
					val: 60,
					status: 0,
					errMsg: '',
				}, {
					id: 7,
					name: "牛奶",
					val: 80,
					status: 0,
					errMsg: '',
				}, {
					id: 8,
					name: "橙汁",
					val: 65,
					status: 0,
					errMsg: '',
				}],
			}
		},
		components: {
			MaterialDetail
		},
		methods: {
			inputDialogToggle(row) {
				this.popShow = true
				this.$refs.inputDialog.open()
				//this.$refs.detail.setMaterial(row);
				this.material = row;
			},
			dialogClose() {
				console.log('点击关闭')
				this.popShow = false
				this.$refs.inputDialog.close()
			},
			editDialog(row) {
				this.dialogClose()
				this.editShow = true
				console.log(row)
				this.$refs.edit.setMaterial(row);
			},
			editClose(){
				this.editShow = false
			},
			getMaterialData() {
				let that = this;
				util.request(api.MaterialList, {
					equId: this.$route.query.id
				}, 'GET', 'application/json').then(function(res) {
					if (res.code === 0) {
						that.records = res.data;
					}
				});
			},
			onLoad: function() {
				this.getMaterialData();
			} 
		}
	}
</script>

<style style="scss">
	.grid-item-box .text {
		padding: 20rpx 0;
		height: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
		width: inherit;
	}

	.grid-item-box .num {
		position: relative;	
		margin: 0 auto;
		z-index: 999;
	}

	.grid-item-box .tip {
		position: absolute;
		bottom: 20rpx;
		left: 30%;
		margin: 0 auto;
		color: #fff;
		z-index: 999;
		text-align: center;
	}

	.grid-item-box .errMsg {
		position: absolute;
		left: 30%;
		top: 120rpx;
		font-size: 36rpx;
		width: 80rpx;
		color: #ff0000;
		z-index: 9999;
		margin: 0 auto;
	}

	.fb-type {
		height: 104rpx;
		width: 80%;
		margin-left: 20%;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.fb-type .type-label {
		height: 36rpx;
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.fb-type .type-icon {
		height: 36rpx;
		width: 36rpx;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup {
		display: block;
		padding: 5rpx 10rpx 0;
		overflow: hidden;
		background-color: #fff;
	}
	.uni-row {
		margin-bottom: 10px;
		display: block;		
	}

	.uni-col {
		height: 36px;
		border-radius: 5px;
		text-align: center;
	}
</style>

<style scoped>
	.progressContainer {
		position: relative;
		width: 160rpx;
		height: 600rpx;
		background-color: #ddd;
		overflow: hidden;
		margin: 20rpx auto;
	}

	.progress {
		position: absolute;
		width: inherit;
		bottom: 0;
		background-color: #007aff;
	}

	.progress-view {
		width: inherit;
		height: inherit;
		position: absolute;
		top: 0;
	}

	/deep/ .uni-popup .uni-popup__wrapper {
		width: 600rpx;
		min-width: 400rpx;
	}
</style>