realty/virgo.wzfrontend/workark/src/components/work/system/serveSet/processSetItem.vue

<template>
	<div>
		<div class="process-set-item" v-for="(item,index) in list" :key="item.id">
			<div :class="'process-set-state ' + returnItemClass(item)">
				<div class="process-set-state-2">
					<div class="process-set-state-1"></div>
				</div>
			</div>
			<div :class="'line line-top ' + returnItemClass(item)" v-if="index > 0"></div>
			<div :class="'line line-bottom ' + returnItemClass(item)" v-if="index < list.length-1 || type === 'edit'">
			</div>
			<div class="process-item-title">
				<span class="label">{{index+1}}.{{item.name}}</span>
				<i class="el-icon-edit-outline color-primary" v-if="type === 'edit'"
					@click="edit('update', item.id)"></i>
				<i class="el-icon-delete color-danger" v-if="type === 'edit'" @click="edit('delete', item.id)"></i>
			</div>
			<!-- 可附件 -->
			<div v-if="item.type === 1">
				<div v-if="(item.status === 1 || item.status === 4) && item.roleId === roleType">
					<upload ref="upload" :list="!item.attachmentContent?[]:JSON.parse(item.attachmentContent)"
						type="edit" text="上传文件" accept="*">
					</upload>
					<div class="operation-button">
						<el-button size="mini" @click="submit(item)">保存草稿</el-button>
						<el-button size="mini" type="primary" @click="submit(item, 2)">提交</el-button>
					</div>
				</div>
				<div v-else-if="item.status === 2 && roleType === 2">
					<upload :list="!item.attachmentContent ? [] : JSON.parse(item.attachmentContent)">
					</upload>
					<div class="operation-button">
						<el-button size="mini" type="primary" @click="updateStatus(item,3)">通过</el-button>
						<el-button size="mini" type="danger" @click="updateStatus(item,4)">不通过</el-button>
					</div>
				</div>
				<!-- 展示 -->
				<div v-else-if="item.status !== 1 && item.attachmentContent">
					<upload :list="!item.attachmentContent ? [] : JSON.parse(item.attachmentContent)">
					</upload>
				</div>
			</div>
			<!-- 可付款 -->
			<div v-else-if="item.type === 2">
				<div v-if="(item.status === 1 || item.status === 4) && item.roleId === roleType">
					<div>
						<span>待付款</span>
						<span class="color-danger">¥</span>
						<span class="color-danger">{{item.totalFee}}</span>
					</div>
					<div class="operation-button">
						<el-button size="mini" type="primary" @click="payment(item)">确认付款</el-button>
					</div>
				</div>
				<!-- 展示 -->
				<div v-else-if="item.type === 2 && item.status === 3">
					<div class="hui-state">
						<div class="hui-state-bage hui-state-success"></div>
						<div class="hui-state-label">
							<span>已支付</span>
							<span class="color-success">¥</span>
							<span class="color-success">{{item.totalFee}}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 不可添加附件 -->
			<div v-else-if="item.children.length === 0">
				<div class="operation-buttons" v-if="(item.status === 1 || item.status === 4) && roleType === 2">
					<el-button size="mini" type="primary" @click="updateStatus(item,3)">通过</el-button>
					<el-button size="mini" type="danger" @click="updateStatus(item,4)">不通过</el-button>
				</div>
			</div>
			<div class="process-item-content" v-if="item.children">
				<process-set-item :list="item.children" :type="type" :parentId="item.id" :roleType="roleType">
				</process-set-item>
			</div>
		</div>
		<div class="process-set-insert" @click="edit('insert', parentId || -1)" v-if="type === 'edit'">新增</div>
		<el-dialog :close-on-click-modal="false" title="支付订单" :visible.sync="dialogVisible" width="600px"
			:append-to-body="true">
			<pay-order v-if="dialogVisible" :orderNo="order.orderNo" @callback="callback"></pay-order>
		</el-dialog>
	</div>
</template>

<script>
	const processSetItem = () => import('./processSetItem.vue');
	const upload = () => import('@/components/common/upload');
	const payOrder = () => import('@/components/website/payOrder');
	import {
		updateProcessData,
		updateProcessStatus
	} from '@/api/system'
	import {
		createProcessOrder,
		getOrderListByQuery
	} from '@/api/serve'
	export default {
		props: ['list', 'type', 'parentId', 'roleType'],
		data() {
			return {
				dialogVisible: false,
				order: {},
				timeOut: null,
				nowItem: {}
			}
		},
		beforeDestroy() {
			if (!this.timeOut) return;
			clearTimeout(this.timeOut);
			this.timeOut = null
		},
		mounted() {},
		methods: {
			payment(item) {
				this.nowItem = item;
				this.$loading();
				getOrderListByQuery({
					proceId: item.id
				}).then(res => {
					if (res.state) {
						if (res.data.length === 0) {
							createProcessOrder(item.id, this.$store.getters.organization.id).then(res => {
								if (res.state) {
									this.order = res.data;
									this.$loading.close();
									this.dialogVisible = true;
								} else {
									this.$loading.close();
								}
							})
						} else {
							this.order = res.data[0];
							this.$loading.close();
							this.dialogVisible = true;
						}
					} else {
						this.$loading.close();
					}
				})
			},
			returnItemClass(item) {
				let str = '';
				switch (item.status) {
					case 1:
					case 2:
						str = 'waiting'
						break;
					case 3:
						str = 'success'
						break;
					case 4:
						str = 'error'
						break;
					default:
						str = 'info'
						break;
				}
				return str;
			},
			edit(type, id) {
				this.$store.dispatch('app/changeProcessSet', {
					type,
					id
				});
			},
			submit(item, status) {
				if (!this.$refs.upload) return;
				if (this.$refs.upload[0].fileList.length === 0) return this.$message.warning('至少上传一个文件');
				let data = {
					id: item.id,
					sequence: item.sequence
				};
				data['attachmentContent'] = JSON.stringify(this.$refs.upload[0].fileList);
				updateProcessData(data).then(res => {
					if (res.state) {
						if (status) {
							this.updateStatus(item, status);
						} else {
							this.$message.success('操作成功');
						}
					}
				})
			},
			updateStatus(item, status) {
				updateProcessStatus(status, item.id).then(res => {
					if (res.state) {
						this.$message.success('操作成功');
						this.edit('reload', status === 3 ? item.id : 0);
					}
				})
			},
			callback(type,operationType) {
				this.visible = false;
				if (type === 'payState') {
					this.timeOut = setTimeout(() => {
						if(this.operationType === 'success') this.updateStatus(this.nowItem, 3);
						clearTimeout(this.timeOut);
						this.timeOut = null;
					}, 1000)
				}
			}
		},
		components: {
			processSetItem,
			upload,
			payOrder
		}
	}
</script>

<style>
</style>