school-developer/src/flow/components/onebtn-design/header.vue

<template>
    <div>
        <div class="header">
            <el-tabs v-model="form.active" @tab-click="methods.activeMenu">
                <el-tab-pane label="① 表单设置" name="formSetting"></el-tab-pane>
                <el-tab-pane label="② 表单设计" name="formDesign"></el-tab-pane>
                <el-tab-pane label="③ 流程设计" name="flowDesign"></el-tab-pane>
            </el-tabs>

            <div class="btn-publish" v-if="form.active !== 'flowDesign'">
                <el-button icon="CaretRight" type="primary" @click="methods.activeMenu({paneName: form.active === 'formSetting' ? 'formDesign' : 'flowDesign'})">下一步
                </el-button>
            </div>

            <div class="btn-publish" v-if="form.active === 'flowDesign'">
                <template v-if="!validateRunFlow(props)">
                    <el-button icon="Upload" type="primary" @click="methods.publish(null, true)">升版本
                    </el-button>
                    <el-button icon="CirclePlus" type="primary"  @click="methods.publish('-1')">暂存
                    </el-button>
                </template>
                <el-button icon="Promotion" type="primary" @click="methods.publish('1')">发布
                </el-button>
            </div>
            <div class="btn-back">
                <el-button @click="methods.exitFlowForm" icon="Back" circle></el-button>
                <span style="margin-left: 20px;">
                    <i :class="props.currFlowForm.icon"></i>
                    <span>{{props.currFlowForm.formName }} V{{ props.currFlowForm.version }}
                    </span>
                </span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="FlowDesignHeader">
    import {useI18n} from "vue-i18n"
    import {useMessageBox} from "/@/hooks/message";
    import {notifyLeft} from "/@/flow";
    import {validateNull} from "/@/utils/validate";

    const {t} = useI18n();
    const {proxy} = getCurrentInstance();
    const $emit = defineEmits(["handleDesignFlow", "syncCurrFlowForm", "publish"]);
    const props = defineProps({
        currFlowForm: {
            type: Object,
            default: null,
        }
    });
    const form = reactive({
        active: "formSetting",
        interval: {},
        intervalTime: 2
    });

    const methods = {
        publish(status, version) {
            $emit('publish', form.active, () => {
                props.currFlowForm[form.active] = true
            }, status, version)
        },
        async exitFlowForm() {
            let text = ''
            // 判断是否都保存
            if (props.currFlowForm.formSetting !== true) text += '【表单设置】,'
            if (props.currFlowForm.formDesign !== true) text += '【表单设计】,'
            if (props.currFlowForm.flowDesign !== true) text += '【流程设计】'
            if (!text) {
                $emit("handleDesignFlow", false);
                return
            }
            try {
                await useMessageBox().confirm(text + '未保存，是否继续退出?');
            } catch {
                return;
            }
            $emit("handleDesignFlow", false);
        },
        activeMenu(tab) {
            let menu = tab.paneName
            let active = form.active;
            // 判断是否在操作中
            if (props.currFlowForm.flowDesigning === true) {
                if (!validateNull(form.interval)) clearInterval(form.interval);
                let intervalTime = 0;
                form.interval = setInterval(() => {
                    methods.validateFlowDesigning(menu, active, intervalTime)
                    intervalTime++;
                }, 1000);
                return true
            }
            methods.doActiveMenu(menu, active);
        },
        validateFlowDesigning(menu, active, intervalTime = 0){
            notifyLeft('流程设计操作中，请稍后', 'warning')
            if (intervalTime >= form.intervalTime)  {
                props.currFlowForm.flowDesigning = false
            }
            if (props.currFlowForm.flowDesigning === true) return
            methods.doActiveMenu(menu, active)
            clearInterval(form.interval);
        },
        doActiveMenu(menu, active){
            $emit("syncCurrFlowForm", menu, active, (preSave)=>{
                if (!preSave) menu = active
                props.currFlowForm[menu] = false;
                form.active = menu;
                props.currFlowForm.active = menu;
            });
        },
        // 关闭提示
        listenPage() {
            window.onbeforeunload = function (e) {
                e = e || window.event;
                if (e) {
                    e.returnValue = "关闭提示";
                }
                return "关闭提示";
            };
        }
    }

    onMounted(() => {
        methods.listenPage();
    });
</script>
<style lang="scss" scoped>
  .header {
    min-width: 980px;

    .el-tabs {
      position: absolute;
      top: 15px;
      z-index: 999;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .btn-publish {
      position: absolute;
      top: 20px;
      z-index: 1000;
      right: 40px !important;

      i {
        margin-right: 6px;
      }

      button {
        width: 74px;
        height: 28px;
        border-radius: 15px;
      }
    }

    .btn-back {
      position: absolute;
      top: 20px;
      z-index: 1000;
      left: 20px !important;
      font-size: 18px;

      i {
        margin-right: 6px;
      }

      button {
        width: 44px;
        height: 28px;
        border-radius: 15px;
      }
    }
  }
</style>