realty/virgo.wzfrontend/workark/src/components/flow/flowDetail.vue

<template>
	<div class="hui-flex">
		<div class="hui-flex-box">
			<div class="hui-detail">
				<div class="hui-detail-box">
					<div class="hui-detail-title">基础信息</div>
					<property-flow-detail v-if="detail.flowType === 1" :formData="detail"></property-flow-detail>
					<change-flow-detail v-if="detail.flowType === 2" :formData="detail"></change-flow-detail>
					<depreciation-flow-detail v-if="detail.flowType === 3"
						:formData="detail"></depreciation-flow-detail>
					<inventory-flow-detail v-if="detail.flowType === 4" :formData="detail"></inventory-flow-detail>
					<device-flow-detail v-if="detail.flowType === 5" :formData="detail"></device-flow-detail>
				</div>
				<div class="hui-detail-box">
					<div class="hui-detail-title">附件抄送</div>
					<div class="hui-detail-content">
						<div class="hui-detail-item">
							<div class="hui-detail-label">流程附件</div>
							<div class="hui-detail-value">
								<upload ref="upload" :list="detail.attachment ? JSON.parse(detail.attachment) : []"
									type="preview">
								</upload>
							</div>
						</div>
						<div class="hui-detail-item">
							<div class="hui-detail-label">抄送人</div>
							<div class="hui-detail-value">
								<cc :ccList="detail.receiver ? JSON.parse(detail.receiver) : []"></cc>
							</div>
						</div>
					</div>
				</div>
				<div class="hui-detail-box">
					<div class="hui-detail-title">审核流程</div>
					<div class="hui-detail-content">
						<flow :flowlist="flowUserList"></flow>
					</div>
				</div>
			</div>
		</div>
		<div class="hui-drawer-submit" v-if="activeList.length>0">
			<el-button size="small" type="primary" v-for="item in activeList" :key="item.id" @click="action(item)">
				{{item.viewName}}
			</el-button>
		</div>
		<el-dialog :close-on-click-modal="false" :title="actionData.viewName" :visible.sync="dialogVisible" width="60%"
			:append-to-body="true">
			<flow-action v-if="dialogVisible" :action="actionData" :projectFlowId="detail.projectFlowId"
				@callback="callback" @updateFlowState="updateFlowState">
			</flow-action>
		</el-dialog>
	</div>
</template>

<script>
	const upload = () => import('@/components/common/upload');
	const flowAction = () => import('@/components/flow/flowAction');
	const flow = () => import('@/components/flow/flow');
	const cc = () => import('@/components/common/cc');
	const propertyFlowDetail = () => import('@/components/work/property/propertyFlowDetail');
	const changeFlowDetail = () => import('@/components/work/property/changeFlowDetail');
	const depreciationFlowDetail = () => import('@/components/work/property/depreciationFlowDetail');
	const inventoryFlowDetail = () => import('@/components/work/property/inventoryFlowDetail');

	import {
		getFlowById,
		generationFlow,
		updateFlow,
		getFlowApprove,
		getUserFlowAction,
		insertDevice,
		updateDevice
	} from '@/api/property'
	export default {
		props: ['detailId'],
		data() {
			return {
				detail: {},
				activeList: [],
				dialogVisible: false,
				actionData: {},
				flowUserList: [],
				receiver: ''
			}
		},
		mounted() {
			if (this.detailId) this.init();
		},
		methods: {
			init() {
				getFlowById(this.detailId).then(res => {
					if (res.state) {
						let flowData = JSON.parse(res.data.flowData);
						this.detail = Object.assign(res.data, flowData);
						let flowUserList = this.detail.flowUserList ? JSON.parse(this.detail.flowUserList) : [];
						if (this.detail.projectFlowId) {
							this.initFlow(flowUserList);
						} else {
							this.flowUserList = flowUserList;
						}
						if (!this.detail.projectFlowId && this.detail.createdByUserId === this.$store.getters.user
							.userId) this.activeList = [{
							id: -1,
							viewName: '生成流程'
						}]
					}
				})
			},
			initFlow(flowUserList) {
				getUserFlowAction(this.detail.projectFlowId).then(res => {
					if (res.state) {
						this.activeList = res.data.filter(node => {
							if (node.viewName == '提交') return this.detail.createdByUserId === this.$store
								.getters.user.userId;
							return node.viewName != '查看'
						});
					}
				});
				getFlowApprove(this.detail.projectFlowId).then(res => {
					if (res.state) {
						let approverList = res.data.approverList;
						let submiterId = res.data.submiter && res.data.submiter.userId;
						//提交者
						let activityList = []
						if (res.data.statusStr != '待提交') {
							activityList = res.data.activityList.filter(node => node.activityUser.userId ===
								submiterId).map(node => {
								let comment = JSON.parse(node.activityComment) || {};
								return {
									id: node.id,
									name: node.activityUser.userName,
									partName: "提交审核",
									portrait: node.activityUser.portrait,
									status: 1,
									remark: comment.text,
									file: comment.enclosure,
									date: this.$dayjs(node.activityDate).format('YYYY-MM-DD')
								}
							});
						}
						let list = flowUserList.map((node, index) => {
							let item = approverList[index];
							let comment = JSON.parse(item.comment) || {};
							node['status'] = item.status;
							node['remark'] = comment.text;
							node['file'] = comment.enclosure;
							if (comment.text) node['date'] = this.$dayjs(item.statusDate).format(
								'YYYY-MM-DD');
							return node;
						})
						this.flowUserList = activityList.length === 0 ? list : [activityList[activityList.length -
							1]].concat(list);
						let noList = this.flowUserList.filter(node => !node.status);
						if (noList.length === 0) return;
						this.receiver = noList[0].id;
					}
				});
			},
			action(item) {
				if (item.id === -1) return this.flowOperation();
				this.actionData = item;
				this.dialogVisible = true;
			},
			callback(type) {
				this.dialogVisible = false;
				if (type === 'init') this.init();
			},
			flowOperation() {
				if (JSON.parse(this.detail.flowUserList).length === 0) return this.$message.warning('未设置审核人');
				this.$confirm('生成流程后不允许再修改数据，确定生成?', () => {
					this.$loading();
					generationFlow(this.returnSubmitData()).then(res => {
						if (res.state) {
							updateFlow({
								id: this.detail.id,
								projectFlowId: res.data.id
							}).then(node => {
								this.updateFlowState(1);
								this.$message.success('操作成功');
								this.init();
							});
						}
						this.$loading.close();
					});
				});
			},
			updateFlowState(state, operation) {
				updateFlow({
					id: this.detail.id,
					state: state
				}).then(node => {
					if (node.state) {
						if (state === 3) this.passFlow();
						if (this.receiver && operation != '退回') {
							let postMessageData = {
								operation: operation + '了',
								receiver: this.receiver,
								messageType: 2, //流程类型-2
								dataType: this.detail.flowType, //1.资产登记/设备流程
								dataId: this.detail.id
							}
							this.$msg.sendFlowMessage(this.detail, postMessageData);
							let ccList = this.detail.receiver ? JSON.parse(this.detail.receiver) : [];
							if (ccList.length > 0) {
								postMessageData['receiver'] = ccList.join(',');
								postMessageData['isCC'] = 1;
								this.$msg.sendFlowMessage(this.detail, postMessageData);
							}
						}
						this.$emit('callback', 'init');
					}
				});
			},
			passFlow() {
				let flowData = JSON.parse(this.detail.flowData);
				if (this.detail.flowType === 1) {
					flowData['attachment'] = JSON.stringify(this.detail.attachment);
					flowData['document'] = JSON.stringify(this.detail.document);
					insertDevice(flowData)
				}
				if (this.detail.flowType === 2) {
					flowData['id'] = this.detail.deviceId;
					delete flowData.remark;
					updateDevice(flowData)
				}
			},
			returnSubmitData() {
				let organization = this.$store.getters.organization;
				let userList = JSON.parse(this.detail.flowUserList).map((item, index) => {
					let obj = {
						organizedName: organization.name,
						organizationId: organization.id,
						userId: item.id,
						userName: item.name,
						partName: item.partName,
						portrait: item.portrait
					}
					return {
						flowUsers: [obj],
						sequence: (index + 1),
						status: 0
					}
				})
				let flowName = this.$msg.messageType[0].dataType.filter(node => node.id === this.detail.flowType)[0].title;
				return {
					flowUserList: JSON.stringify([{
						name: organization.name,
						organizationId: organization.id,
						flowUserList: JSON.stringify(userList)
					}]),
					coment: '{}',
					submiter: this.$store.getters.user.id,
					subscribers: [],
					flowName: flowName + '流程'
				}
			}
		},
		components: {
			upload,
			flow,
			flowAction,
			cc,
			propertyFlowDetail,
			changeFlowDetail,
			depreciationFlowDetail,
			inventoryFlowDetail
		},
	}
</script>
<style lang="scss">

</style>