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.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="errMsg" v-if="item.exprStatus==='1'">即将到期</text>
							<text class="errMsg" v-if="item.mtrResidue <= item.residueWarn">原料不足</text>
							<text class="tip">{{item.mtrResidue || '0'}}ml</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}}</uni-td>
					<uni-td align="center">{{item.mtrName}}</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="暂无更多数据" 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">{{material.mtrResidue || '0'}}ml
								({{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>{{this.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>{{this.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="replaceMaterial">
							<!--<uni-data-select @change="bindPickerChange" v-model="index" collection="equMaterials" field="id as value, mtName as text" v-if="editShow"></uni-data-select>-->
							<picker @change="bindPickerChange" v-model="index2" :range="equMaterials" range-key="mtName"
								v-if="equMaterials.length>0">
								<view class="picker">
									<view class="fb-type">
										<view class="type-label">{{this.equMaterials[this.index2].mtName}}</view>
										<image class="type-icon"
											src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/pickerArrow-a8b918f05f.png">
										</image>
									</view>
								</view>
							</picker>
						</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');
	//import MaterialDetail from "@/pages/material/materialDetail.vue";
	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: [{
					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,
				}],
				rangeIds: [{
						value: 1,
						text: "1"
					},
					{
						value: 2,
						text: "2"
					},
					{
						value: 3,
						text: "3"
					}
				],
				equMaterials: [],
				allEquMaterials: [],
				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,
					'mtName': row.mtrName,
					'surplus': row.mtrResidue,
					'date': row.exprTime,
					'barrelCode': row.barrelCode,
					'equId': row.equId
				}
				this.$refs.editDialog.open()
				//this.$refs.edit.setMaterial(row);						 
				if (row.barrelType == null || row.barrelType == "") {
					this.equMaterials = this.allEquMaterials.filter(item => {
						return item.mtType != "4" && item.mtType != "5";
					});
				} else {
					this.equMaterials = this.allEquMaterials.filter(item => {
						return item.mtType == row.barrelType;
					});
				}				
				//console.log(this.form)
			},
			editClose() {
				this.editShow = false
				this.equMaterials = this.allEquMaterials
			},
			getMaterialData() {
				let that = this;
				util.request(api.MaterialList, {
					equId: this.$route.query.equId,
					barrelType: '',
				}, 'GET', 'application/json').then(function(res) {
					if (res.code === 0) {
						that.categoryList = res.data.records;
					}
				});
			},
			getRecordList() {
				let that = this;
				that.queryParams.model.equId = this.$route.query.equId
				util.request(api.RecordList, that.queryParams, 'Post', 'application/json').then(function(res) {
					if (res.code === 0) {
						that.records = res.data.records
						that.totalPages = res.data.pages
					}
				});
			},
			bindPickerChange: function(e) {
				this.index2 = e.detail.value
				this.form.replaceMaterial = this.equMaterials[this.index2].id
			},
			getEquMaterialData: function() {
				let that = this;
				util.request(api.EquMaterialList, {
					mtType: ''
				}, 'GET', 'application/json').then(function(res) {
					if (res.code === 0) {
						that.allEquMaterials = res.data;
					}
				});
			},
			update() {
				let that = this;
				util.request(api.RecordAdd, 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/material?equId='+that.$route.query.equId,
									        });
								  }, 2000);
							}
						});
					} else {
						util.toast(res.data);
					}
				});
			},
			onReachBottom: function() {
				if (this.totalPages > this.queryParams.current) {
					this.queryParams.current = this.queryParams.current + 1
				} else {
					return false;
				}
				this.getRecordList()
			},
			onLoad: function() {
				this.getMaterialData();
				this.getEquMaterialData();
				this.getRecordList();
			}
		}
	}
</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: 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/ .uni-popup .uni-popup__wrapper .popup {
		min-width: 800rpx;
	}

	/deep/ .editBox .uni-popup .uni-popup__wrapper .popup {
		min-height: 1200rpx;
	}

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