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

<template>
	<view class="container">
		<uni-section title="原料" type="line" padding>
			<uni-grid :column="2" :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.mtrName||'空'}}</text>
						<view class="progressContainer">
							<view class="progress" :style="{ height: Math.round(item.mtrResidue) + '%' }"
								v-if="item.exprStatus==='0'">
								<view class="progress-view"></view>
							</view>
							<view class="progress"
								:style="{ height: Math.round(item.mtrResidue) + '%', backgroundColor:'#ff0000'}" v-else>
								<view class="progress-view"></view>
							</view>
							<text class="expMsg" v-if="item.exprCloseStatus==='1' && item.exprStatus==='0' ">即将到期</text>							
							<text class="errMsg" v-if="parseInt(item.mtrResidue) <= parseInt(item.residueWarn)">原料不足</text>
							<text class="tip">{{parseInt(item.mtrResidue) || '0'}}个</text>
						</view>

						<view class="num">
							<uni-badge class="uni-badge-left-margin" :text="item.barrelCode" 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.barrelCode||''}}</uni-td>
					<uni-td align="center">{{item.mtName||'空'}}</uni-td>
					<uni-td align="center">{{item.surplus||'0'}}</uni-td>
					<uni-td align="center">{{item.mtrName||'空'}}</uni-td>
					<uni-td align="center">{{item.specs||'0'}}</uni-td>
					<uni-td align="center">{{item.date||''}}</uni-td>
				</uni-tr>
			</uni-table>

			<!--<uni-table border stripe emptyText="暂无更多数据" v-show="false">
				
				<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="inputBox" v-show="popShow" style="min-width:800rpx;">
			<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.barrelCode}}</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.mtrName || '空'}}</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">{{parseInt(material.mtrResidue) || '0'}}个
								({{material.mtrResidue > material.residueWarn?'原料充足':'原料不足' }})</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.exprStatus==='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.exprTime||'空'}}</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="editBox" v-show="editShow">
			<!--<MaterialDetail ref="edit" :dialog-visible="editShow" @close="editClose" ></MaterialDetail>-->
			<uni-popup ref="editDialog" type="dialog">
				<view class="popup">
					<uni-forms class="uni-forms" :modelValue="form">
						<uni-forms-item class="form-item" label="料筒" name="barrelCode">
							<!--<text>{{this.form.barrelCode||'空'}}</text>-->
							<text style="line-height: 25px;height:25px;">{{form.barrelCode}}</text>
						</uni-forms-item>
						<uni-forms-item class="form-item" label="到期日期" name="date">
							<uni-datetime-picker type="date" v-model="form.date" />
						</uni-forms-item>
						<uni-forms-item class="form-item" label="剩余原料" name="currentMaterial">
							<text style="line-height: 25px;height:25px;">{{form.mtName||'空'}}</text>
						</uni-forms-item>
						<uni-forms-item class="form-item" label="余量" name="surplus">
							<uni-number-box :min="0" :max="100" v-model="form.surplus" :disabled="true">
							</uni-number-box>
						</uni-forms-item>
						<uni-forms-item class="form-item" label="加料" name="specs">
							<uni-number-box :min="0" :max="100" v-model="form.specs"></uni-number-box>
						</uni-forms-item>
					</uni-forms>
					<uni-row class="uni-row" style="margin-top: 200rpx">
						<uni-col :span="12">
							<button @click="update" type="primary" size="mini">确定</button>
						</uni-col>
						<uni-col :span="12">
							<button @click="editClose" type="primary" size="mini">关闭</button>
						</uni-col>
					</uni-row>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js");
	const api = require('@/utils/api.js');

	export default {
		data() {
			return {
				index: 0,
				index2: 0,
				array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				specs: [5, 10, 20],
				popShow: false,
				editShow: false,
				materials: ['燕麦', '魔芋粉', '牛肉粉', '红薯粉', '蜂蜜'],
				material: {
					equId: '',
					barrelCode: '',
					mtrName: '',
					surplus: '',
					specs: '',
					date: '',
					status: ''
				},
				form: {
					materialId: '',
					equId: '',
					barrelCode: '',
					currentMaterial: '',
					mtName: '',
					replaceMaterial: '',
					surplus: '',
					specs: '',
					date: ''
				},
				records: [],
				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,
				}],
				rangeIds: [{
						value: 1,
						text: "1"
					},
					{
						value: 2,
						text: "2"
					},
					{
						value: 3,
						text: "3"
					}
				],
				queryParams: util.initQueryParams(),
				totalPages: 1,
				rangeSurplus: [{
						value: 1,
						text: "5"
					},
					{
						value: 2,
						text: "10"
					},
					{
						value: 3,
						text: "20"
					}
				],
				rangeSpecs: [{
						value: 1,
						text: "5"
					},
					{
						value: 2,
						text: "10"
					},
					{
						value: 3,
						text: "20"
					}
				],
				rangeDates: [{
						value: "2021-11-14",
						text: "2021-11-14"
					},
					{
						value: "2021-12-24",
						text: "2021-12-24"
					},
					{
						value: "2022-08-01",
						text: "2022-08-01"
					}
				],
				categoryList: [{
					id: 1,
					barrleCode: 1,
					mtrName: "燕麦",
					mtrResidue: 40,
					status: 1,
					exprStatus: '0',
					errMsg: '原料不足',
				}, {
					id: 2,
					barrleCode: 2,
					mtrName: "魔芋粉",
					mtrResidue: 60,
					status: 1,
					exprStatus: '0',
					errMsg: '即将过期',
				}, {
					id: 3,
					barrleCode: 3,
					mtrName: "红薯粉",
					mtrResidue: 80,
					exprStatus: '1',
					status: 0,
					errMsg: '',
				}, {
					id: 4,
					barrleCode: 4,
					mtrName: "牛肉粉",
					mtrResidue: 65,
					exprStatus: '0',
					status: 0,
					errMsg: '',
				}, {
					id: 5,
					barrleCode: 5,
					mtrName: "蜂蜜",
					mtrResidue: 40,
					exprStatus: '1',
					status: 0,
					errMsg: '',
				}, {
					id: 6,
					barrleCode: 6,
					mtrName: "安赛蜜",
					mtrResidue: 60,
					status: 0,
					exprStatus: '0',
					errMsg: '',
				}, {
					id: 7,
					barrleCode: 7,
					mtrName: "牛奶",
					mtrResidue: 80,
					status: 0,
					exprStatus: '1',
					errMsg: '',
				}, {
					id: 8,
					barrleCode: 8,
					mtrName: "橙汁",
					mtrResidue: 65,
					exprStatus: '0',
					status: 0,
					errMsg: '',
				}],
			}
		},
		components: {
			//MaterialDetail
		},
		methods: {
			inputDialogToggle(row) {
				//if (row.mtrResidue) {
				this.popShow = true
				this.$refs.inputDialog.open()
				//this.$refs.detail.setMaterial(row);
				this.material = row;
				//}
			},
			dialogClose() {
				this.popShow = false
				this.$refs.inputDialog.close()
			},
			editDialog(row) {
				this.dialogClose()
				this.editShow = true
				this.form = {
					'barrelType': row.barrelType,
					'materialId': row.id,
					'currentMaterial': row.mtrId,
					'replaceMaterial': row.mtrId,
					'mtName': row.mtrName,
					'surplus': row.mtrResidue,
					'date': row.exprTime,
					'barrelCode': row.barrelCode,
					'equId': row.equId
				}
				this.$refs.editDialog.open()
				//this.$refs.edit.setMaterial(row);
				//console.log(this.form)
			},
			editClose() {
				this.editShow = false
			},
			getMaterialData(equId) {
				let that = this;
				util.request(api.MaterialList, {
					equId: equId,
					barrelType: '1'
				}, 'GET', 'application/json').then(function(res) {
					if (res.code === 0) {
						that.categoryList = res.data.records;
					}
				});
			},
			getRecordList(equId) {
				let that = this;
				that.queryParams.model.equId = equId
				that.queryParams.model.barrelType = "1"
				util.request(api.RecordList, that.queryParams, 'Post', 'application/json').then(function(res) {
					if (res.code === 0) {
						that.records = that.records.concat(res.data.records)
						that.totalPages = res.data.pages
					}
				});
			},
			update() {				
				let that = this;
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;
				let equId = page.split('equId=')[1]
				equId = equId? equId: ""
				util.request(api.CupRecordAdd, this.form, "POST", "application/json").then(function(res) {
					if (res.code === 0) {
						uni.showToast({
							title: "操作结果",
							icon: 'success',
							duration: 1000,
							complete: function() {
								setTimeout(function() {
									that.editClose()
									   uni.reLaunch({
									        url: '/pages/material/cup?equId='+equId,
									   });
								}, 2000)
							}
						});
					} else {
						util.toast(res.data);
					}
				});
			},
			onReachBottom: function() {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;
				let equId = page.split('equId=')[1]
				equId = equId? equId: ""
				if (this.totalPages > this.queryParams.current) {
					this.queryParams.current = this.queryParams.current + 1
				} else {
					return false;
				}
				this.getRecordList(equId)
			},
			onLoad: function(option) {
				let equId = option.equId? option.equId : ""
				this.getMaterialData(equId);
				this.getRecordList(equId);
			}
		}
	}
</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: 28%;
		top: 180rpx;
		font-size: 36rpx;
		width: 80rpx;
		color: #f0ad4e;
		z-index: 9999;
		margin: 0 auto;
	}
	
	.grid-item-box .expMsg {
		position: absolute;
		left: 28%;
		top: 60rpx;
		font-size: 36rpx;
		width: 80rpx;
		color: #f0ad4e;
		z-index: 9999;
		margin: 0 auto;
	}

	.fb-type {
		height: 104rpx;
		width: 75%;
		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;
	}

	.fb-type {
		height: 84rpx;
		width: 60%;
		margin-left: 40%;
		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;
	}

	.form-item {
		display: flex;
		align-items: center;
		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-forms .uni-forms-item__label {
		width: 180rpx;
		padding: 0;
	}

	

	/deep/ .editBox .uni-numbox {
		margin-left: 35%;
	}
</style>