liug_mobile/pages/index/detail.vue

<template>
	<view class="pages">
		<view class="vtitle">检测申请方填写</view>
		<view class="form_group">
			<view class="lable">委托单编号</view>
			<view class="tag">
				<text class="span">{{ item.wt_num }}</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">标题</view>
			<view class="tag">
				<input v-model="item.title" placeholder="输入标题" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">申请单位/部门</view>
			<view class="tag">
				<input v-model="item.dept" placeholder="输入申请单位/部门" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">试验目的</view>
			<view class="tag">
				<input v-model="item.purpose" placeholder="输入试验目的" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>

		<view class="form_group">
			<view class="lable">申请人</view>
			<view class="tag">
				<input v-model="item.applicant" placeholder="输入申请人" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">电话</view>
			<view class="tag">
				<input v-model="item.tel" placeholder="输入电话" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">试验部门</view>
			<view class="tag">
				<input v-model="item.test_dept" placeholder="输入试验部门" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">所属项目</view>
			<view class="tag">
				<input v-model="item.item" placeholder="输入所属项目" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">试验类型</view>
			<view class="tag">
				<view class="span">
					<picker @change="bindChange($event, 'experiment_type')" :range="array2">
						<view class="picks">{{ item.experiment_type ? item.experiment_type : '选择2' }}</view>
					</picker>
					<picker @change="bindChange($event, 'product')" :range="array1">
						<view class="picks">{{ item.product ? item.product : '选择1' }}</view>
					</picker>
				</view>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">项目编号</view>
			<view class="tag">
				<input v-model="item.item_num" placeholder="输入项目编号" />
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">结果形式</view>
			<view class="tag"><u-subsection :list="radio" :current="current" @change="change"></u-subsection></view>
		</view>
		<view class="form_group">
			<view class="lable">模板</view>
			<view class="tag" @click="dshow = true">
				<text class="span">2个模板</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">附件上传</view>
			<view class="tag" @click="dshow = true"><text class="span">最大上传5个</text></view>
		</view>
		<view class="form_group">
			<uni-file-picker :limit="5" @select="upload($event, item)" file-mediatype="all">
				<button class="up">
					<text class="icon">&#xe604;</text>
					<text>选择文件</text>
				</button>
			</uni-file-picker>
			<view class="ufiles">
				<view class="fil" v-for="(item, index) in item.unstructured" :key="index" @click="look(item)">
					<view class="icon" v-if="item.fileType.toLowerCase() == '.png' || item.fileType.toLowerCase() == '.jpg'">&#xe63e;</view>
					<view class="icon" v-else>&#xeb66;</view>
					<view class="name">
						<view class="omit">{{ item.name }}</view>
						<view class="desc">{{ (item.size / 1024).toFixed(2) }}kb</view>
					</view>
					<view class="del" @click.stop="del(item)">删除</view>
					<view class="clear"></view>
				</view>
			</view>
		</view>
		<view class="vtitle">设置审批人员</view>
		<view class="form_group" @click="select('1')">
			<view class="lable">需求审核-产品经理或主管人员</view>
			<view class="tag">
				<text class="span">{{ item.WTXQSH }}</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group" @click="select('2')">
			<view class="lable">试验审核-试验对接人</view>
			<view class="tag">
				<text class="span">{{ item.WTSYSH }}</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group" @click="select('3')">
			<view class="lable">需求批准-本部门领导</view>
			<view class="tag">
				<text class="span">{{ item.WTXQPZ }}</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group" @click="select('4')">
			<view class="lable">试验批准</view>
			<view class="tag">
				<text class="span">{{ item.WTSYPZ }}</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group" @click="select('5')">
			<view class="lable">任务分派-任务分派人</view>
			<view class="tag">
				<text class="span">{{ item.WTRWFP }}</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="vtitle">样机</view>
		<view class="form_group">
			<view class="lable">GH560</view>
			<view class="tag">
				<text class="span">XH890656565556</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="form_group">
			<view class="lable">GH560</view>
			<view class="tag">
				<text class="span">XH890656565556</text>
				<text class="icon more">&#xe631;</text>
			</view>
		</view>
		<view class="footer" v-if="btnshow">
			<view class="flex">
				<view class="f"><button class="btn br" @click="submission()">提交</button></view>
				<view class="f" v-if="state == 1"><button class="btn br back" @click="back()">回退</button></view>
			</view>
		</view>
		<u-popup :show="dshow" mode="center" @close="dshow = false" round="5" closeable customStyle="width:92%">
			<view class="popup">
				<u-divider text="模板下载"></u-divider>
				<view class="citem" @click="download('https://img-operation.csdnimg.cn/csdn/silkroad/img/1670234405428.jpg')">
					<view class="title omit">提交流程面板提交流程面板提交流程面板</view>
					<view class="xz">点击下载</view>
				</view>
				<view class="citem" @click="download('https://img-operation.csdnimg.cn/csdn/silkroad/img/1670234405428.jpg')">
					<view class="title omit">提交流程面板提交流程面板提交流程面板</view>
					<view class="xz">点击下载</view>
				</view>
				<view class="citem" @click="download('https://img-operation.csdnimg.cn/csdn/silkroad/img/1670234405428.jpg')">
					<view class="title omit">提交流程面板提交流程面板提交流程面板</view>
					<view class="xz">点击下载</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" mode="bottom" @close="show = false" closeable round="15">
			<view class="popup">
				<u-divider text="提交流程面板"></u-divider>
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view v-for="(item, index) in nextNodes" :key="index" class="bitem" @click="bselect(item, 'nextNodes')">
						<view class="icon select check" v-if="item.check">&#xe600;</view>
						<view class="icon select" v-else>&#xe8bb;</view>
						<view class="title">{{ item.name }}</view>
					</view>
				</scroll-view>
				<view class="confrim-btn"><button class="btn" @click="submit()">确定</button></view>
			</view>
		</u-popup>
		<u-popup :show="bshow" mode="bottom" @close="bshow = false" closeable round="15">
			<view class="popup">
				<u-divider text="回退流程面板"></u-divider>
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view v-for="(item, index) in backNodes" :key="index" class="bitem" @click="bselect(item, 'backNodes')">
						<view class="icon select check" v-if="item.check">&#xe600;</view>
						<view class="icon select" v-else>&#xe8bb;</view>
						<view class="title">{{ item.name }}</view>
					</view>
				</scroll-view>
				<view class="confrim-btn"><button class="btn" @click="workflowsback()">确定</button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
let qrcode = require('@/common/code.js');
export default {
	data() {
		return {
			ip: this.http.urls.ip,
			p: {},
			item: {},
			current: 0,
			radio: [
				{
					name: '正式报告'
				},
				{
					name: '仅原始数据'
				},
				{
					name: '协助试验'
				}
			],
			id: '',
			items: {
				document: {
					items: {}
				}
			},
			array1: ['类型1', '类型2', '类型3', '类型4'], //实验类型1
			array2: ['类型2', '类型12', '类型13', '类型14'], //实验类型2
			show: false,
			bshow: false,
			dshow: false,
			itemt: {},
			up: {},
			content: '标题',
			nextNodes: [],
			backNodes: [],
			touser: {
				nodeid: '1649917385058',
				isToPerson: true,
				userids: '__jFFZYvLIG6uFc7CdBMg'
			},
			btnshow: false,
			state: 0
		};
	},
	onLoad(e) {
		this.id = e.id;
		//传过来的id
		this.state = e.ste;
		if (e.ste == 1) {
			/* this.http.request({
					url: this.http.urls.xxxx + e.id,
					success: res => {
						this.item = res.data.data;
					}
				}); */
			this.getDocuments();
		} else if (e.ste == 2) {
			this.empty();
		}
		//选中审批人员监听函数,其它类型的参考这个
		uni.$on('select', res => {
			console.log('asd2:' + JSON.stringify(res));
			if (res.ste == 1) {
				this.item.WTXQSH = res.items.__L5a8n9ZH5gJC0CL1s6X.value;
			} else if (res.ste == 2) {
				this.item.WTSYSH = res.items.__0ils0bIBD7Vf90TjVb3.value;
			} else if (res.ste == 3) {
				this.item.WTXQPZ = res.items.__uiMgMPHg9jmqTXzwdzl.value;
			} else if (res.ste == 4) {
				this.item.WTSYPZ = res.items.__WSh3KXD8wfeyU3FbipN.value;
			} else if (res.ste == 5) {
				this.item.WTRWFP = res.items.__IzBqxyYJhOYJntHpmEv.value;
			}
		});
	},
	methods: {
		//选择实验类型
		bindChange(e, type) {
			this.item[type] = this.array1[e.target.value];
			this.$forceUpdate();
		},
		//下载模板
		download(url) {
			const a = document.createElement('a');
			a.href = url;
			a.download = 'download';
			a.click();
			this.dshow = false;
		},
		//提交或回退
		bselect(e, tag) {
			this[tag].forEach(item => {
				item.check = false;
			});
			e.check = true;
			this.itemt.nextNodeIds = [];
			this.itemt.nextNodeIds.push(e.id);
			this.$forceUpdate();
		}, //详情
		getDocuments() {
			this.http.request({
				url: this.http.urls.documents + this.id,
				data: this.item,
				success: res => {
					this.item = res.data.data.items;
					this.p = res.data.data;
					this.item.unstructured = JSON.parse(this.item.unstructured);
					if (this.p.lastFlowOperation == undefined || this.p.auditorList.includes(this.getUser().id)) {
						console.log('this.p1:' + JSON.stringify(this.p));
						this.btnshow = true;
					}

					//this.current=res.data.data.items.report_type;
					if (this.item.report_type == '正式报告') {
						this.current = 0;
					} else if (this.item.report_type == '仅原始数据') {
						this.current = 1;
					} else if (this.item.report_type == '协助试验') {
						this.current = 2;
					}
					this.iteml = res.data.data;

					this.items.applicationId = '__gAPYBW4YxB3UePM3lqO';
					this.items.docId = this.iteml.id;
					this.items.id = this.iteml.id;
					this.items.formId = this.iteml.formid;
					this.items.parentId = '';
					this.items.subSelects = [];
					this.items.templateForm = '';
					this.items.viewId = '';
					this.items.document.items = this.item;
					this.items.document.applicationId = '__gAPYBW4YxB3UePM3lqO';
					this.items.document.exparams = {};
					this.items.document.formId = this.iteml.formid;
					this.items.document.id = this.iteml.id;
					this.items.document.parentId = '';
					this.items.document.sign = '';
					this.items.document.stateId = this.iteml.stateid;
					this.items.document.subDocuments = [];
					this.items.document.templateForm = '';
					this.items.document.versions = '0';
				}
			});
		},
		empty() {
			this.btnshow = true;
			this.http.request({
				url: this.http.urls.empty,
				data: this.item,
				success: res => {
					console.log('res2:' + JSON.stringify(res));
					this.item = res.data.data.items;
					this.p = res.data.data;
					console.log('this.p1:' + JSON.stringify(this.p));
					//this.current=res.data.data.items.report_type;
					if (this.item.report_type == '正式报告') {
						this.current = 0;
					} else if (this.item.report_type == '仅原始数据') {
						this.current = 1;
					} else if (this.item.report_type == '协助试验') {
						this.current = 2;
					}
					this.iteml = res.data.data;

					this.items.applicationId = '__gAPYBW4YxB3UePM3lqO';
					this.items.docId = this.iteml.id;
					this.items.id = this.iteml.id;
					this.items.formId = this.iteml.formid;
					this.items.parentId = '';
					this.items.subSelects = [];
					this.items.templateForm = '';
					this.items.viewId = '';
					this.items.document.items = this.item;
					this.items.document.applicationId = '__gAPYBW4YxB3UePM3lqO';
					this.items.document.exparams = {};
					this.items.document.formId = this.iteml.formid;
					this.items.document.id = this.iteml.id;
					this.items.document.parentId = '';
					this.items.document.sign = '';
					this.items.document.stateId = this.iteml.stateid;
					this.items.document.subDocuments = [];
					this.items.document.templateForm = '';
					this.items.document.versions = '0';
				}
			});
		},
		//选择结果形式
		change(e) {
			this.current = e;
			console.log('aa:' + this.radio[this.current].name);
			this.item.report_type = this.radio[this.current].name;
		},
		//选择审批人员
		select(e) {
			uni.navigateTo({
				url: '/pages/index/select?ste=' + e
			});
		},
		//选择文件上传
		upload(e, item) {
			uni.showLoading({ title: '正在上传.....', mask: true });
			e.tempFilePaths.forEach((temp, index) => {
				uni.uploadFile({
					url: this.http.urls.upload,
					filePath: temp,
					name: 'files',
					formData: {
						applicationId: '__gAPYBW4YxB3UePM3lqO',
						allowedTypes: '00',
						fieldId: this.id + '_unstructured',
						fileSaveMode: '00',
						path: 'ITEM_PATH',
						actionType: ''
					},
					header: { accessToken: this.getUser().accessToken },
					success: res => {
						uni.hideLoading();
						let data = JSON.parse(res.data);
						if (data.errcode == 0) {
							this.item.unstructured.push({
								name: data.data[0].fileName,
								path: data.data[0].filePath,
								size: data.data[0].fileSize,
								fileType: data.data[0].fileType
							});
							this.$forceUpdate();
						} else {
							uni.showModal({ content: '上传失败', showCancel: false });
						}
					},
					fail: res => {
						uni.hideLoading();
						uni.showModal({ content: '上传失败', showCancel: false });
					}
				});
			});
		},
		//删除上传的文件
		del(item) {
			this.item.unstructured.splice(this.item.unstructured.indexOf(item), 1);
		},
		//文件预览
		look(item) {
			console.log('asd:' + JSON.stringify(item));
			uni.openDocument({
				//新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
				filePath: this.ip + item.path,
				showMenu: true,
				success: res => {
					console.log('打开文档成功');
				}
			});
		},
		//提交
		add() {
			this.http.request({
				url: this.http.urls.user_task_add,
				data: this.item,
				method: 'POST',
				success: res => {
					uni.showModal({
						title: '提示',
						content: '提交成功',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
				}
			});
		},
		//提交流程面板
		submission() {
			this.http.request({
				url: this.http.urls.documents + this.id + '/panels/submission',
				data: this.items,
				method: 'POST',
				success: res => {
					//this.item=res.data.data;
					console.log('zx22:' + JSON.stringify(res));
					this.show = true;

					this.title = res.data.data.name;
					this.nextNodes = res.data.data.nextNodes;
					this.itemt.flowId = res.data.data.flowId;
					this.itemt.flowType = '80';
					this.itemt.currentNodeId = res.data.data.currentNodeId;
					this.itemt.attitude = '';
					this.itemt.signature = '';
					this.itemt.submitTo = '';
					this.itemt.circulatorInfo = '';
					this.itemt.subFlowApproverInfo = '';
					this.itemt.subFlowApproverInfoAll = '';
					this.itemt.document = this.items.document;
					//this.content=res.data.data.formname;
				}
			});
		}, //提交流程
		submit() {
			//this.itemt.document.items.purpose="试验目的5656";
			//this.itemt.document.items.title="标题5656";
			this.itemt.applicationId = '__gAPYBW4YxB3UePM3lqO';
			this.itemt.docId = this.iteml.id;
			this.itemt.id = this.iteml.id;
			this.itemt.formId = this.iteml.formid;
			this.itemt.parentId = '';
			this.itemt.subFlowApprover = [];
			this.itemt.subSelects = [];
			this.itemt.submitTo = [];
			this.itemt.templateForm = '';
			this.itemt.viewId = '';
			this.http.request({
				url: this.http.urls.documents + this.id + '/workflows/submit',
				data: this.itemt,

				method: 'PUT',
				success: res => {
					//this.item=res.data.data;
					console.log('zx22:' + JSON.stringify(res));
					this.show = false;

					this.title = res.data.data.name;
					this.nextNodes = res.data.data.nextNodes;
					uni.$emit('index');
					uni.redirectTo({
						url: '/pages/index/index'
					});
					//this.content=res.data.data.formname;
				}
			});
		}, //刷新数据
		//回退流程面板
		back() {
			this.http.request({
				url: this.http.urls.documents + this.id + '/panels/back',
				data: this.items,

				method: 'POST',
				success: res => {
					//this.item=res.data.data;
					console.log('zx22:' + JSON.stringify(res.data.data));
					this.bshow = true;

					this.title = res.data.data.name;
					this.backNodes = res.data.data.backNodes;
					this.itemt.flowId = res.data.data.flowId;
					this.itemt.flowType = '81';
					this.itemt.currentNodeId = res.data.data.currentNodeId;
					this.itemt.attitude = '';
					this.itemt.signature = '';
					this.itemt.submitTo = '';
					this.itemt.circulatorInfo = '';
					this.itemt.subFlowApproverInfo = '';
					this.itemt.subFlowApproverInfoAll = '';
					this.itemt.document = this.items.document;
					//this.content=res.data.data.formname;
				}
			});
		}, //提交回退流程
		workflowsback() {
			//this.itemt.document.items.purpose="试验目的111";
			this.itemt.applicationId = '__gAPYBW4YxB3UePM3lqO';
			this.itemt.docId = this.iteml.id;
			this.itemt.id = this.iteml.id;
			this.itemt.formId = this.iteml.formid;
			this.itemt.parentId = '';
			this.itemt.subFlowApprover = [];
			this.itemt.subSelects = [];
			this.itemt.submitTo = [];
			this.itemt.templateForm = '';
			this.itemt.viewId = '';
			this.http.request({
				url: this.http.urls.documents + this.id + '/workflows/back',
				data: this.itemt,

				method: 'PUT',
				success: res => {
					//this.item=res.data.data;
					console.log('zx22:' + JSON.stringify(res));
					this.bshow = false;

					this.title = res.data.data.name;
					this.nextNodes = res.data.data.nextNodes;
					uni.$emit('index');
					uni.redirectTo({
						url: '/pages/index/index'
					});
					//this.content=res.data.data.formname;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.pages {
	padding-bottom: 85px;
}
</style>