tqApp-webView/pagesBase/materialRecord/module/item.vue

<template>
	<view class="box-container">
		<view class="box-head">
			{{renderItem(item,'deptName','--')}} - {{renderItem(item,'outflowUser','--')}}
		</view>
		<view class="box-body" @click="handleDetaisl(item)">
			<u-row>
				<u-col :span="12">
					
					<view class="item">
						<view class="label">申领单号：</view>
						<view class="value">{{renderItem(item,'id','--')}}</view>
					</view>
					<view class="item">
						<view class="label">申领时间：</view>
						<view class="value">{{renderItem(item,'outflowTime','--')}}</view>
					</view>
					<view class="item">
						<view class="label">物品名称：</view>
						<view class="value">{{renderItem(item,'materialName','--')}}</view>
					</view>
					<view class="item">
						<view class="label">申领数量：</view>
						<view class="value">{{renderItem(item,'num','--')}}</view>
					</view>
					<view class="item" v-if="item.outflowType==1">
						<view class="label">预计归还日期：</view>
						<view class="value">{{renderItem(item,'backDate','--')}}</view>
					</view>
					<view class="item">
						<view class="label">备注：</view>
						<view class="value">{{renderItem(item,'remark','--')}}</view>
					</view>
					
				</u-col>
				
			</u-row>
		</view>
		
		<view class="box-footer" v-if="item.outflowType==1">
			<u-row style="justify-content: flex-end;">
				<u-col :span="4" style="padding: 20rpx 30rpx;" v-if="item.backSts==0">
					<u-button type="info"  :custom-style="{
							width: '100%',
							height: '28px',
						  }"  @click="handleBack(item)">归还
					</u-button>
				</u-col>	
			</u-row>
		</view>
		
		
	</view>
</template>

<script>
import { renderItem } from '@/utils/gdtq'
import {materialBack} from '@/api/system/material.js'

export default {
	components: {
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {}
	},
	methods: {
		handleBack(item) {
			uni.showModal({
				title: '提示',
				content: `确认归还？`,
				showCancel:true,
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						const {id} = item
						let {code} = await materialBack({id})
						if(code == 0) {
							this.$emit('getList')
						}
					}
				}
			})	
		},
    handleDetaisl(item){
      console.log('item',item);
    }
		
	},
}
</script>

<style lang="scss" scoped>
	.box-container {
		background: #fff;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		.box-head {
			border-bottom: 1px solid #ddd;
			padding: 20rpx;
			font-weight: 700;
		}
		.box-body {
			padding: 20rpx;
			.item {
				margin: 4rpx;
				display: flex;
				.label {
					
				}
				.value {
					flex: 1;
				}
			}
		}
		.box-footer {
			border-top: 1px solid #ddd;
			// padding: 20rpx;
		}
	}
	
	.primary {
		color: $uni-color-primary;
	}
</style>