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

<template>
	<view> 
		<view style="margin:8px;position: fixed;z-index: 50;opacity:0.7;" >
			<button type="primary" style="border-radius: 5px;" class="mini-btn" size="mini" @click="modify" v-show="isShow">修改</button>
			<button type="primary" style="border-radius: 5px;margin-left:15px;" class="mini-btn" size="mini" @click="workFlow" v-show="isWorkFlow">流程审核</button>
		</view>		
		<uni-list>
			<uni-list-item   @click="goDetail(entity.requisitionCode)" clickable>
				<view slot="body" class="slot-box">
					<view class="row">
						<view class="column-left">申请单编号：</view>
						<view class="column-right section-title">{{entity.requisitionNumber}}</view>
					</view>
					<view class="row">
						<view class="column-left">申请单名称：</view>
						<view class="column-right">{{entity.requisitionName}}</view>
					</view>
					<view class="row">
						<view class="column-left">状态：</view>
						<view class="column-right">{{entity.state}}</view>
					</view>
					<view class="row">
						<view class="column-left">申请日期：</view>
						<view class="column-right">{{entity.requisitionDate}}</view>
					</view>
					<view class="row">
						<view class="column-left">经办人：</view>
						<view class="column-right">{{entity.person}}</view>
					</view>
					<view class="row" >
						<view class="column-left">经办部门：</view>
						<view class="column-right">{{unitCodeName}}</view>
					</view>
					<view class="row" >
						<view class="column-left">暂估金额：</view>
						<view class="column-right">{{entity.totalEstimateCash}}</view>
					</view>
					<view class="row">
						<view class="column-left">原因：</view>
						<view class="column-right">{{entity.requisitionReason}}</view>
					</view>
					<view class="row">
						<view class="column-left">备注：</view>
						<view class="column-right">{{entity.remark}}</view>
					</view>
					<view class="row">
						<view class="column-left">附件：</view>
						<view class="column-right">
							<view v-for="(item,index) in attachments" :key="index">								
								<a :href="'/api/common/ShowImg?code='+item.attachMentCode">{{item.fileName}}</a>
							</view>
						</view>
					</view>
				</view>
			</uni-list-item>
		</uni-list>	

		<uni-section title="关联合同" type="line"></uni-section>	 
		<uni-list> 
			<uni-list-item v-for="(item,index) in list" :key="index"  @click="goDetail(entity.requisitionCode)" clickable>
				<view slot="body" class="slot-box">
					<view class="row">
						<view class="column-left">合同名称：</view>
						<view class="column-right section-title">{{item.contractName}}</view>
					</view>
					<view class="row">
						<view class="column-left">合同编号：</view>
						<view class="column-right">{{item.contractID}}</view>
					</view>
					<view class="row">
						<view class="column-left">暂估金额</view>
						<view class="column-right">{{item.estimateCash}}</view>
					</view>
				</view>	 
			</uni-list-item>
		</uni-list>
		 
	</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: '',
				procedureName:"",
				isShow:false,        //修改按钮是否显示
				isWorkFlow:false,   //流程审核按钮是否显示
			}
		},
		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', res);
					let state=res.entity.state;
					that.entity = res.entity;
					that.procedureName=res.procedureName; 
					
					if (that.entity.state == 0) {
						that.entity.state = '待审';
						that.isShow=true;
					} 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 = '作废';
					}
					if(that.entity.requisitionType==1){
						uni.setNavigationBarTitle({
							title:'变更申请单详情页'
						})
					}
					else{
						uni.setNavigationBarTitle({
							title:'签证单详情页'
						})
					}
					console.info('procedureName',that.procedureName);
					/* 是否显示流程审核按钮 */
					if(!that.$util.isEmpty(that.procedureName)){
						if(state==0){
							that.isWorkFlow=true;
						}
						else{
							that.isWorkFlow=false;
						}
						console.info('isWorkFlow',that.isWorkFlow);
					}
					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;
				});
			},
			/* 流程审核按钮点击事件处理 */
			workFlow:function(){
				let url="../GetWorkFlowProcedureList/GetWorkFlowProcedureList?procedureName="+this.procedureName+"&applicationCode="+this.$util.getQuery("id");
				uni.navigateTo({    //跳转到流程控制列表页面
					url:url
				});
			},
			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>
	 
</style>