perf: 优化修改工作流未保存关闭提示

resources/assets/js/components/DrawerOverlay.vue

@@ -63,6 +63,7 @@
                 type: Boolean,
                 default: false
             },
+            beforeClose: Function
         },
 
         data() {
@@ -136,12 +137,25 @@
         },
 
         methods: {
-            mask () {
+            mask() {
                 if (this.maskClosable) {
                     this.close()
                 }
             },
             close() {
+                if (!this.beforeClose) {
+                    return this.handleClose();
+                }
+
+                const before = this.beforeClose();
+
+                if (before && before.then) {
+                    before.then(this.handleClose);
+                } else {
+                    this.handleClose();
+                }
+            },
+            handleClose () {
                 this.$emit("input", false)
             },
             escClose(e) {

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -407,8 +407,9 @@
         <DrawerOverlay
             v-model="workflowShow"
             placement="right"
+            :beforeClose="workflowBeforeClose"
             :size="1280">
-            <ProjectWorkflow v-if="workflowShow" :project-id="projectId"/>
+            <ProjectWorkflow ref="workflow" v-if="workflowShow" :project-id="projectId"/>
         </DrawerOverlay>
 
         <!--查看项目动态-->
@@ -1179,6 +1180,27 @@ export default {
             this.$store.dispatch('toggleProjectParameter', 'completedTask');
         },
 
+        workflowBeforeClose() {
+            return new Promise(resolve => {
+                if (!this.$refs.workflow.existDiff()) {
+                    resolve()
+                    return
+                }
+                $A.modalConfirm({
+                    content: '设置尚未保存，是否放弃修改？',
+                    cancelText: '放弃',
+                    okText: '保存',
+                    onCancel: () => {
+                        resolve()
+                    },
+                    onOk: () => {
+                        this.$refs.workflow.saveAll()
+                        resolve()
+                    }
+                });
+            })
+        },
+
         myFilter(task, chackCompleted = true) {
             if (task.archived_at) {
                 return false;

resources/assets/js/pages/manage/components/ProjectWorkflow.vue

@@ -261,6 +261,12 @@ export default {
             return JSON.stringify(project_flow_item) != project_flow_bak
         },
 
+        existDiff() {
+            return !!this.list.find(data => {
+                return this.contrast(data.project_flow_item, data.project_flow_bak)
+            });
+        },
+
         onCreate() {
             let id = -1 * $A.randNum(1000, 10000);
             this.list.push({
@@ -468,6 +474,14 @@ export default {
                 $A.modalError(msg);
             });
         },
+
+        saveAll() {
+            this.list.some(data => {
+                if (this.contrast(data.project_flow_item, data.project_flow_bak)) {
+                    this.onSave(data)
+                }
+            });
+        },
     }
 }
 </script>