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

<template>
	<view> 
		<view style="margin:8px;position: fixed;z-index: 50;opacity:0.7;" >
			<button type="default" style="border-radius: 5px;" class="mini-btn" size="mini" @click="modify" v-show="entity.state==0">修改</button>
			<button type="default" style="border-radius: 5px;margin-left:15px;" class="mini-btn" size="mini" @click="delSupplier" v-show="entity.state==0">删除</button>
			<button type="default" style="border-radius: 5px;margin-left:15px;" class="mini-btn" size="mini" @click="submit" v-show="entity.state==0">提交</button>
			<button type="default" style="border-radius: 5px;margin-left:15px;" class="mini-btn" size="mini" @click="pass" v-show="entity.state==1">通过</button>
			<button type="default" style="border-radius: 5px;margin-left:15px;" class="mini-btn" size="mini" @click="back" v-show="entity.state==1">退回</button>
		</view>		
		<uni-list style="padding-top:30px;">
			<uni-list-item  >
				<view slot="body" class="slot-box">
					<view class="row">
						<view class="column-left">编号：</view>
						<view class="column-right section-title">{{entity.id}}</view>
					</view>
					<view class="row">
						<view class="column-left">标题：</view>
						<view class="column-right">{{entity.title}}</view>
					</view>
					<view class="row">
						<view class="column-left">状态：</view>
						<view class="column-right">{{entity.stateName}}</view>
					</view>
					<view class="row">
						<view class="column-left">申请日期：</view>
						<view class="column-right">{{entity.createDateStr}}</view>
					</view>
					<view class="row">
						<view class="column-left">项目：</view>
						<view class="column-right">{{entity.projectName}}</view>
					</view>
				
					<view class="row">
						<view class="column-left">原因：</view>
						<view class="column-right">{{entity.reason}}</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 class="row">
						<view class="column-left">转签证：</view>
						<view class="column-right"><router-link :to="'/pages/template/requisitionadd/requisitionadd?type=0&zzSupplierExid='+$util.getQuery('id')">转签证申请单</router-link></view>
					</view>
				</view>
			</uni-list-item>
		</uni-list>	

		
		 <view class="uni-form-item uni-column" v-show="isUpload">
		     <view class="title"  style="background-color: #efefef;"><text class="uni-form-item__title">上传文件</text></view>
		 	<view class="content">
		     <g-upfile ref='gUpfile' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control'
		      :columnNum="columnNum" :maxCount="maxCount" @limitFileSizeList='limitFileSizeList' @limitFileTypeList='limitFileTypeList'  :maxFileSize="20000"></g-upfile>
		 	</view>
		 </view>
		 <view class="uni-btn-v uni-column"  v-show="isUpload">
		 	<button type="primary" form-type="submit" style="border-radius: 15px;"  @click="upload">上传附件</button>
		 </view>
	</view>
</template>

<script>
	import {
		GetzzSupplierEx,DeletezzSupplierEx,SubmitzzSupplierEx,AuditzzSupplierEx
	} from "@/common/api/requisitionApi.js";
	import {		
		showImage
	} from "@/common/api/commonApi.js";

	export default {
		data() {
			return {
				entity: {}, //申请单				
				attachments: [], //附件
				unitCodeName: '',
				procedureName:"",				
				isShow:false,        //修改按钮是否显示
				isWorkFlow:false,   //流程审核按钮是否显示
				
				isUpload:false,    //是否显示上传组件及上传按钮
				control: true,
				columnNum: 3,
				imgList: [],
				urlList:[],
				maxCount:5,
				imageList: [],				
				countIndex: 5,
				count: [1, 2, 3, 4, 5],
			}
		},
		onLoad(event) {
			if (this.$store == null || this.$store.state == null) {
				uni.navigateTo({
					url: '../../LoginSupplier/LoginSupplier'
				});
				//console
				return;
			}
			console.info("当前登录状态:" + this.$store.state.isLogin);
			//console.info(this);
			this.$util.persistLogin(this);
		},
		created: function() {
			if(this.$store.state.user.userCode!=undefined)
			{
				uni.setNavigationBarTitle({
					title:"供应商申请明细"
				});
			}
			else{
				uni.setNavigationBarTitle({
					title:"我的申请明细"
				});
			}
			let id = this.$util.getQuery('id');
			if (!id) {
				uni.navigateTo({
					url: '../SupplierList/SupplierList'
				})
				return;
			}
			this.getDetail(id);
		},
		computed:function(){
			
		},
		methods: {
			getDetail(id) {
				let that = this;
				GetzzSupplierEx(id).then((res) => {
					console.info('GetzzSupplierEx res', res);
					if(typeof res!='string')
					{
						that.entity = res.entity;
						res.attachments.forEach(function(item, index, arr) {
							that.$set(that.attachments, index, item);
						});
						if(that.entity.state>=1&&that.$store.state.user.userCode==undefined)
						{
							that.isUpload=true;
						}
						else{
							that.isUpload=false;
						}
					}
					else{
						uni.showModal({
							content:res,
							
						});
						return;
					}
					
					
					

				});
			},
			/* 显示部门 */
			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/UpdatezzSupplierEx/UpdatezzSupplierEx?id=' + id
				});
			},
			delSupplier: function() { //删除
				let id = this.$util.getQuery("id");
				let supplierCode=this.$store.state.user.supplierCode;
				DeletezzSupplierEx(supplierCode,id).then((res)=>{
					console.info("删除结果",res);
					
					if(res=="success"){
						
						uni.navigateTo({
							url:'/pages/template/SupplierList/SupplierList'
						})
					}
					else{
						uni.showToast({
							title:res,
							icon:'none',
							duration:3000
						})
					}
					
				});
			},
			submit: function() { //提交审核
				let id = this.$util.getQuery("id")-0;
				var dto={id:id,projectCode:this.entity.projectCode,supplierCode:this.entity.supplierCode,state:1};
				console.info('提交dto',dto);
				SubmitzzSupplierEx(dto).then((res)=>{
					console.info("提交结果",res);
					
					if(res=="success"){
						
						uni.navigateTo({
							url:'/pages/template/SupplierList/SupplierList'
						})
					}
					else{
						uni.showToast({
							title:res,
							icon:'none',
							duration:3000
						})
					}
					
				});
				
			},
			pass: function() { //审核通过
				let id = this.$util.getQuery("id")-0;
				var dto={id:id,projectCode:this.entity.projectCode,supplierCode:this.entity.supplierCode,state:2};
				console.info('通过dto',dto);
				AuditzzSupplierEx(dto).then((res)=>{
					console.info("审核结果",res);
					
					if(res=="success"){
						if(this.$store.state.user.userCode!=undefined){
							uni.navigateTo({
								url:'/pages/template/SupplierList/SupplierList?projectCode='+this.$store.state.projectCode
							})
						}
						else{
							uni.navigateTo({
								url:'/pages/template/SupplierList/SupplierList'
							})
						}
						
					}
					else{
						uni.showToast({
							title:res,
							icon:'none',
							duration:3000
						})
					}
					
				});
			},
			back: function() { //审核退回
				let id = this.$util.getQuery("id")-0;
				var dto={id:id,projectCode:this.entity.projectCode,supplierCode:this.entity.supplierCode,state:0};
				console.info('退回dto',dto);
				AuditzzSupplierEx(dto).then((res)=>{
					console.info("审核结果",res);
					
					if(res=="success"){
						
						if(this.$store.state.user.userCode!=undefined){
							uni.navigateTo({
								url:'/pages/template/SupplierList/SupplierList?projectCode='+this.$store.state.projectCode
							})
							console.info("aa");
						}
						else{
							uni.navigateTo({
								url:'/pages/template/SupplierList/SupplierList'
							})
						}
					}
					else{
						uni.showToast({
							title:res,
							icon:'none',
							duration:3000
						})
					}
					
				});
			},
			/*
			上传后返回的值：
			list：上传后图片数组
			v：返回当前上传图片的临时路径
			*/
			chooseFile(list, v) {
				console.log("上传图片_list：", list)
				console.log("上传图片_v：", v);
				this.urlList=list;
				console.info("urlList",this.urlList);
				
			},
			
			
			/*
			删除图片：
			list：删除返回删除后剩余的图片数组
			eq：返回删除的数组
			*/
			imgDelete(list, eq) {
				console.log("删除图片_list：", list);
				console.log("删除图片_eq：", eq);
				this.urlList=list;
				console.info("urlList",this.urlList);
			},
			/*限制文件大小列表*/
			limitFileSizeList(list){
				console.info('limitFileSizeList:',list);
				if(list){
					if(list.length>0){
						uni.showModal({
							title:'警告',
							content: list.join()+' 文件大小超过2000KB',
							showCancel:false
						});
					}
				}
			},
			/*限制文件类型列表*/
			limitFileTypeList(list,allowFileType){
				console.info('limitFileTypeList:',list);
				console.info('limitFileTypeList:',allowFileType);
				if(list){
					if(list.length>0){
						uni.showModal({
							title:'警告',
							content: list.join()+' 文件类型必须是'+allowFileType.join(),
							showCancel:false
						});
					}
				}
			},
			upload:function(){
				this.uploadFileToServe(this.$util.getQuery("id")) ;
			},
			/*
			执行上传服务：
			urlList：要上传的图片：数组类型
			*/
			uploadFileToServe(masterCode) {
				let _this=this;
				var urlList=_this.urlList;
				if (!urlList || urlList.length <= 0) {
					return;
				};
				//console.info(urlList);
			
			
				//return;
				for (let i = 0; i < urlList.length; i++) {
			        console.info('x-token',_this.$store.state.token.tokenStr);
					uni.uploadFile({
						url: '/api/Common/UploadImage', 
						filePath: urlList[i],
						name: 'file',
						formData: {
							createPerson:_this.$store.state.user.supplierCode,
							masterCode:masterCode,
							attachMentType:'zzSupplierExAttach'
						},
						headers: {
							'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime(),
							'X-Token':_this.$store.state.token.tokenStr
							//这里要把content-type设置为multipard/form-data，同时还要设置boundary
						},
						success: (uploadFileRes) => {
							console.log("图片上传:",uploadFileRes.data);
							this.getDetail(masterCode);
							//this.urlList=[];
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	 
</style>