dccloud/uni-app-front/pages/template/requisitiondetail/requisitiondetail.vue

<template>
	<view>
		<view style="margin:10px 10px;">
			<button type="default" style="border-radius: 5px;" class="mini-btn" size="mini" @click="modify">修改</button>
		</view>
		<view class="article-title">
			{{entity.requisitionName}}
		</view>
		<uni-list>
			<uni-list-item :title="'编号：' +entity.requisitionNumber">
			</uni-list-item>
			<uni-list-item :title="'状态：'+entity.state" />
			<uni-list-item :title="'申请日期：'+entity.requisitionDate" />
			<uni-list-item>
				<view slot="header" class="header-slot-box" style="width: 50%;">
					经 办 人：{{entity.person}}
				</view>
				<view slot="footer" class="footer-slot-box" style="width: 50%;">
					暂估金额：{{entity.totalEstimateCash}}
				</view>
			</uni-list-item>
			<uni-list-item>
				<view slot="body" class="body-slot-box" style="width: 100%;">
					经办部门：{{unitCodeName}}
				</view>

			</uni-list-item>
			<uni-list-item direction="column">
				<view slot="header" class="slot-box">
					原因:
				</view>
				<view slot="body" class="slot-box-main">
					{{entity.requisitionReason}}
				</view>
			</uni-list-item>
			<uni-list-item direction="column">
				<view slot="header" class="slot-box">
					备注:
				</view>
				<view slot="body" class="slot-box-main">
					{{entity.remark}}
				</view>
			</uni-list-item>
			<uni-list-item direction="column">
				<view slot="header" class="slot-box" style="white-space: nowrap;">
					附件：
				</view>
				<view slot="body" class="slot-box-main">
					<view v-for="(item,index) in attachments" :key="index">
						<!-- <image :src="'/api/common/ShowImg?code='+item.attachMentCode" style="width: 200px;"/> -->
						<a :href="'/api/common/ShowImg?code='+item.attachMentCode">{{item.fileName}}</a>
					</view>
				</view>
			</uni-list-item>
		</uni-list>

		<uni-section title="关联合同" type="line"></uni-section>		
		 
		<view class="uni-form-item uni-column">
			

			<uni-list>
				<uni-list-item v-for="(item,index) in list" :key="index"  :title="item.contractID" :note="item.contractName" :rightText="item.estimateCash.toString()">
					
				</uni-list-item>
			</uni-list>
		</view>

	</view>
</template>

<script>
	import {
		GetRequistionDetail
	} from "@/common/api/requisitionApi.js";
	import {
		GetUserDepartment,
		showImage
	} from "@/common/api/commonApi.js";

	export default {
		data() {
			return {
				entity: {}, //申请单
				list: [], //关联合同
				attachments: [], //附件
				unitCodeName: ''
			}
		},
		onLoad(event) {
			if (this.$store == null || this.$store.state == null) {
				uni.navigateTo({
					url: '../../login/login'
				});
				return;
			}
			console.info("当前登录状态:" + this.$store.state.isLogin);
			//console.info(this);
			this.$util.persistLogin(this);
		},
		created: function() {
			let id = this.$util.getQuery('id');
			if (!id) {
				uni.navigateTo({
					url: '../requisitionlist/requisitionlist'
				})
				return;
			}
			this.getDetail(id);
		},
		computed:function(){
			
		},
		methods: {
			getDetail(reqisitionCode) {
				let that = this;
				GetRequistionDetail(reqisitionCode).then((res) => {
					console.info('GetRequistionDetail', res);
					that.entity = res.entity;
					if (that.entity.state == 0) {
						that.entity.state = '待审';
					} else if (that.entity.state == 1) {
						that.entity.state = '审核中';
					} else if (that.entity.state == 2) {
						that.entity.state = '已审';
					} else if (that.entity.state == 3) {
						that.entity.state = '作废';
					}
					that.entity.requisitionDate = that.entity.requisitionDate.substring(0, 10);
					that.GetDepartment(that.entity.unitCode);

					res.list.forEach(function(item, index, arr) {
						that.$set(that.list, index, item);
					});
					console.info('that.list', that.list);
					res.attachments.forEach(function(item, index, arr) {
						that.$set(that.attachments, index, item);
					})

				});
			},
			GetDepartment: function(unitcode) {
				let that = this;
				GetUserDepartment(unitcode).then((res) => {
					console.info(res);
					that.unitCodeName = res;
				});
			},
			showImage: function(code) {
				console.info('showimage', code);
				uni.navigateTo({
					url: '/api/common/ShowImg?code=' + code
				})

			},
			modify: function() { //跳转到修改页面
				let id = this.$util.getQuery("id");
				uni.navigateTo({
					url: '/pages/template/requisitionedit/requisitionedit?id=' + id
				});
			}
		}
	}
</script>

<style scoped>
	.article-meta {
		padding: 20rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

	}

	.article-title {
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		font-size: 18px;
		font-weight: 600;
	}

	.text {
		font-size: 13rpx;
	}

	.flex-item {
		width: 120px;
		height: 30px;
		margin: 10px;
	}

	.flex-item1 {
		width: 150px;
		height: 30px;
		margin: 10px;
	}

	.slot-box {
		width: 10%;
		margin: 5px 5px;
		font-size: 14px;
	}

	.slot-box-main {
		width: 90%;
		margin: 5px 5px;
		font-size: 14px;
	}

	.header-slot-box {
		font-size: 14px;
		margin: 5px 5px;
		width: 20%;
		justify-content: center;
	}

	.body-slot-box {
		font-size: 14px;
		margin: 5px 5px;
		width: 60%;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		justify-content: center;
	}

	.footer-slot-box {
		font-size: 14px;
		margin: 5px 5px;
		width: 20%;
		justify-content: center;
	}
	/deep/ .uni-list-item__extra-text{
		font-size:15px;
		color:#666666;
	}
	/deep/ .uni-list-item__content-note{
		font-size:15px;
		color:#666666;
	}
</style>