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

<template>
	<div class="set-item-box">
		<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>
			<!-- line -->
			<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 class="process-item-content" v-if="item.children">
				<!-- 附件 -->
				<div v-if="item.type === 1">
					<div class="process-set-item" v-for="(node,index) in item.children" :key="node.id">
						<!-- 状态 -->
						<div :class="'process-set-state ' + returnItemClass(item,node)">
							<div class="process-set-state-2">
								<div class="process-set-state-1"></div>
							</div>
						</div>
						<!-- 标题 -->
						<div class="process-item-title">
							<span class="label">{{node.name}}</span>
							<i class="el-icon-edit-outline color-primary" v-if="type === 'edit'"
								@click="edit('update', node.id)">
							</i>
							<i class="el-icon-delete color-danger" v-if="type === 'edit'"
								@click="edit('delete', node.id)">
							</i>
						</div>
						<!-- 内容 -->
						<div class="process-item-content" v-if="node.children">
							<!-- 可附件 -->
							<div v-if="(item.status === 1 || item.status === 4) && item.roleId === roleType">
								<upload ref="upload" v-model="node.attachmentContent" type="edit" text="上传文件"
									accept="*">
								</upload>
							</div>
							<div v-else-if="item.status === 2 && roleType === 2">
								<upload v-model="node.attachmentContent"></upload>
								<div class="operation-button" v-if="node.status !== 3 && node.status !== 4">
									<div class="operation-button-item success" @click="updateStatus(node,3)">
										<i class="el-icon-check"></i>
									</div>
									<div class="operation-button-item warning" @click="updateStatus(node,4)">
										<i class="el-icon-close"></i>
									</div>
								</div>
							</div>
							<!-- 展示 -->
							<div v-else-if="item.status !== 1 && node.attachmentContent">
								<upload v-model="node.attachmentContent">
								</upload>
							</div>
						</div>
					</div>
					<div class="operation-button"
						v-if="(item.status === 1 || item.status === 4) && item.roleId === roleType">
						<el-button size="mini" @click="fileSubmit(item)">保存草稿</el-button>
						<el-button size="mini" type="primary" @click="fileSubmit(item, 2)">提交</el-button>
					</div>
					<div class="operation-button" v-else-if="item.status === 2 && roleType === 2">
						<el-button size="mini" type="primary" @click="updateStatus(item,3)">通过</el-button>
					</div>
					<!-- 新增 -->
					<div class="process-set-insert" @click="edit('insert', item.id)" v-if="type === 'edit'">
						新增
					</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 v-if="roleType === 1 && item.payStatus === '支付成功'">
							<span class="color-primary" v-if="!item.invoice" @click="applyInvoice(item)">
								开具发票
							</span>
							<span class="color-warning" v-else-if="!item.invoice.state">发票开具中</span>
							<span class="color-success" style="cursor: pointer;" v-else @click="lookOrder(item)">
								查看发票
							</span>
						</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>
					</div>
				</div>
				<process-set-item v-else :list="item.children" :type="type" :parent="item" :roleType="roleType">
				</process-set-item>
			</div>
		</div>
		<!-- 新增 -->
		<div class="process-set-insert" @click="edit('insert', parent ? parent.id : -1, parent)"
			v-if="type === 'edit' && (parent ? (parent.type != 3 && parent.type != 2) : true)">
			新增
		</div>
		<el-dialog :close-on-click-modal="false" title="支付订单" :visible.sync="dialogVisible" width="600px"
			:append-to-body="true">
			<pay-order v-if="dialogVisible" :orderNo="nowItem.proceOrderNo" @callback="callback"></pay-order>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" :title="type === 1?'开具发票':'过程支付'" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<edit v-if="visible && dialogType === 1" @callback="callback" :orderNo="nowItem.proceOrderNo"></edit>
			<create-order v-if="visible && dialogType === 2" :serveId="nowItem.id" @callback="callback">
			</create-order>
		</el-dialog>
		<el-drawer title="发票详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<invoice-detail v-if="drawer" :detailId="nowItem.invoice.id"></invoice-detail>
		</el-drawer>
	</div>
</template>

<script>
	const processSetItem = () => import('./processSetItem.vue');
	const upload = () => import('@/components/common/upload');
	const createOrder = () => import('./createOrder.vue');
	const edit = () => import('@/components/work/finace/invoice/apply/edit');
	const invoiceDetail = () => import('@/components/work/finace/invoice/apply/detail');
	const payOrder = () => import('@/components/website/payOrder');
	import {
		updateProcessData,
		updateProcessStatus
	} from '@/api/system'
	export default {
		props: ['list', 'type', 'parent', 'roleType'],
		data() {
			return {
				nowItem: {},
				visible: false,
				drawer: false,
				detailId: '',
				dialogType: 1,
				dialogVisible: false
			}
		},
		mounted() {},
		methods: {
			applyInvoice(item, type) {
				this.dialogType = type || 1;
				this.nowItem = item;
				this.visible = true;
			},
			lookOrder(item) {
				this.nowItem = item;
				this.drawer = true;
			},
			payment(item) {
				this.nowItem = item;
				if (!item.proceOrderNo || item.payStatus === '超时已关闭') return this.applyInvoice(item, 2);
				this.dialogVisible = true;
			},
			returnItemClass(item, node) {
				let str = '';
				let status = node ? (item.status > node.status ? item.status : node.status) : item.status;
				switch (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, parent) {
				this.$store.dispatch('app/changeProcessSet', {
					type,
					id,
					parent
				});
			},
			async fileSubmit(item, status) {
				if (status) updateProcessStatus(status, item.id);
				for (let i = 0; i < item.children.length; i++) {
					await this.submit(item.children[i])
				}
				this.$message.success('操作成功');
			},
			submit(item, status) {
				let data = {
					id: item.id,
					sequence: item.sequence,
					attachmentContent: item.attachmentContent
				};
				return updateProcessData(data);
			},
			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) {
				if (type === 'init' || type === 'cancel') this.visible = false;
				if (type === 'payState') {
					if (operationType === 'success') this.updateStatus(this.nowItem, 3);
				}
				if (type === 'init') this.edit('reload');
				if (type === 'reload') this.edit('reload');
			}
		},
		components: {
			processSetItem,
			upload,
			createOrder,
			edit,
			invoiceDetail,
			payOrder
		}
	}
</script>

<style>
</style>