easydo-chengfa/src/views/procurement/plan/detail.vue

<template>
	<sc-dialog v-model="visible" width="80%" top="13vh" @closed="$emit('closed')">
		<template v-slot:header>
			<el-tabs v-model="activeName" @tab-change="$refs.planTracking.getToken()">
				<el-tab-pane label="计划信息" name="purchase_plan"></el-tab-pane>
				<el-tab-pane v-if="form.processInstanceId" label="流程跟踪" name="purchase_plan_tracking"></el-tab-pane>
			</el-tabs>
		</template>

		<el-tabs v-model="activeName">
			<el-tab-pane name="purchase_plan">
				<scPlan ref="scPlan" :id="form.id" :lg="12" :disabled="!showFooter"></scPlan>
			</el-tab-pane>
			<el-tab-pane v-if="form.processInstanceId" name="purchase_plan_tracking">
				<tracking ref="planTracking" :processInstanceId="form.processInstanceId"></tracking>
			</el-tab-pane>
		</el-tabs>

		<template v-if="showFooter" #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="validateForm(mode)">保 存</el-button>
			<el-button type="primary" :loading="isSaveing" @click="validateForm('saveApprove')">提 交</el-button>
		</template>
	</sc-dialog>

	<approve-iframe v-if="popoverShow" ref="approveIframe" @success="approve" @closed="popoverShow = false"></approve-iframe>
</template>

<script>
	import scPlan from "@/components/scChengTou/purchase/plan";
	import Tracking from "@/components/scChengTou/purchase/tracking";

	export default {
		emits: ["success", "closed"],
		components: {
			scPlan,
			Tracking
		},

		data() {
			return {
				mode: "add",
				visible: false,
				isSaveing: false,
				popoverShow: false,

				activeName: "purchase_plan",
				form: {}
			}
		},

		computed: {
			showFooter() {
				return !this.form.status || this.form.status == "active";
			}
		},

		methods: {
			// 显示
			open(mode = "add") {
				this.mode = mode;
				this.visible = true;
				return this;
			},

			// 表单注入数据
			setData({ id, status, processTaskId, processInstanceId }) {
				this.form["id"] = id;
				this.form["status"] = status;
				this.form["processTaskId"] = processTaskId;
				this.form["processInstanceId"] = processInstanceId;
			},

			// 表单提交方法
			validateForm(mode) {
				this.$refs.scPlan.$refs.dialogForm.validate(valid => {
					if (valid) {
						if (mode == "saveApprove") {
							if (!this.form.status) {
								this.popoverShow = true;
								this.$nextTick(() => this.$refs.approveIframe.open("purchase_plan").setData());
							} else this.submit("resubmit");
						} else this.submit(mode);
					} else {
						return false;
					}
				});
			},
			
			submit(mode, templateId) {
				const data = Object.assign({}, this.$refs.scPlan.form);
				if (templateId) data["templateId"] = templateId;
				if (mode == "resubmit") data["processTaskId"] = this.form.processTaskId;

				this.isSaveing = true;
				this.$API.procurement.plan[mode](data).then(() => {
					this.isSaveing = false;
					this.$message.success("操作成功");
					this.visible = false;
					this.$emit("success", mode);
				}).catch(() => this.isSaveing = false);
			},

			approve(data) {
				this.submit("saveApprove", data.processDefinitionId || null);
			}
		}
	}
</script>

<style lang="scss" scoped>
.sc-dialog:deep(.el-dialog) {
  .el-dialog__header {
    padding: 0;

    &::after {
      display: none;
    }

    .sc-dialog__headerbtn button {
      margin-left: 0;
    }

    .el-tabs {
      flex-basis: 100%;
      --el-tabs-header-height: 50px;

      .el-tabs__header {
        margin-bottom: 0;

        .el-tabs__nav-wrap::after {
          height: 1px;
        }

        .el-tabs__item {
          padding-bottom: 10px;
        }
      }

      .el-tabs__content {
        display: none;
      }
    }
  }

  .el-dialog__body {
    padding-bottom: 0;

    .el-tabs .el-tabs__header {
      display: none;
    }
  }
}
</style>