init

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

@@ -0,0 +1,177 @@
+<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>