feature: dialog,sideslider 关闭前确认

lib/client/src/common/leave-confirm.js

@@ -0,0 +1,34 @@
+
+import Vue from 'vue'
+
+/**
+ * @desc 页面编辑状态未保存离开确认
+ * @param { String } message
+ * @returns { Promise }
+ */
+export const leaveConfirm = (message = '离开将会导致未保存信息丢失') => {
+    if (!window.leaveConfirm || window.leaveConfirm === 'dialog') {
+        return Promise.resolve(true)
+    }
+    const vm = new Vue()
+    const h = vm.$createElement
+    return new Promise((resolve, reject) => {
+        vm.$bkInfo({
+            title: '确认离开当前页？',
+            subHeader: h('p', {
+                style: {
+                    color: '#63656e',
+                    fontSize: '14px',
+                    textAlign: 'center'
+                }
+            }, message),
+            confirmFn: () => {
+                window.leaveConfirm = false
+                resolve(true)
+            },
+            cancelFn: () => {
+                reject(Error('cancel'))
+            }
+        })
+    })
+}

lib/client/src/components/lc-dialog/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <bk-dialog
+        ref="dialog"
+        v-bind="$attrs"
+        v-on="$listeners"
+        class="lc-dialog"
+        :before-close="beforeClose"
+        :value="value"
+        @input="handleInputValue">
+        <slot />
+        <template
+            v-if="$slots.footer"
+            #footer>
+            <slot name="footer" />
+        </template>
+    </bk-dialog>
+</template>
+<script>
+    import { leaveConfirm } from '@/common/leave-confirm'
+
+    export default {
+        name: 'LcDialog',
+        inheritAttrs: false,
+        props: {
+            value: Boolean
+        },
+        data () {
+            return {}
+        },
+        watch: {
+            value: {
+                handler (val) {
+                    if (val) {
+                        this.pageLeaveConfirmMemo = window.leaveConfirm
+                        window.leaveConfirm = 'dialog'
+                    }
+                },
+                immediate: true
+            }
+        },
+        created () {
+            this.pageLeaveConfirmMemo = false
+        },
+
+        methods: {
+            beforeClose () {
+                return leaveConfirm()
+            },
+            /**
+             * @desc 关闭弹框
+             */
+            handleInputValue () {
+                window.leaveConfirm = this.pageLeaveConfirmMemo
+                this.$emit('input', false)
+                this.$emit('change', false)
+            }
+        }
+    }
+</script>

lib/client/src/components/lc-form/index.vue

@@ -0,0 +1,66 @@
+<template>
+    <div
+        ref="form"
+        class="lc-form"
+        @click="handleApplyChange">
+        <bk-form
+            ref="bkForm"
+            :model="model"
+            v-bind="$attrs">
+            <slot />
+        </bk-form>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'LcForm',
+        inheritAttrs: false,
+        props: {
+            model: {
+                type: Object
+            }
+        },
+        data () {
+            return {
+                max: 0,
+                isApplyChange: false
+            }
+        },
+        watch: {
+            model: {
+                handler () {
+                    setTimeout(() => {
+                        if (this.isApplyChange) {
+                            window.leaveConfirm = true
+                        }
+                    })
+                },
+                deep: true
+            }
+        },
+        methods: {
+            /**
+             * @desc 标记用户是否主动操作过表单项
+             */
+            handleApplyChange () {
+                this.isApplyChange = true
+                console.log('handleApplyChangehandleApplyChange')
+            },
+            /**
+             * @desc 验证表单
+             */
+            validate () {
+                return this.$refs.bkForm.validate().catch((error) => {
+                    this.$refs.form.querySelector('.jb-form-item.is-error').scrollIntoView()
+                    return Promise.reject(error)
+                })
+            },
+            /**
+             * @desc 清除表单验证信息
+             */
+            clearError () {
+                this.$refs.bkForm.clearError()
+            }
+        }
+    }
+</script>

lib/client/src/components/lc-form/item.vue

@@ -0,0 +1,21 @@
+
+<template>
+    <bk-form-item
+        ref="bkFormItem"
+        class="lc-form-item"
+        v-bind="$attrs"
+        v-on="$listeners">
+        <slot />
+    </bk-form-item>
+</template>
+<script>
+    export default {
+        name: 'LcFormItem',
+        inheritAttrs: false,
+        methods: {
+            clearValidator () {
+                this.$refs.bkFormItem.clearValidator()
+            }
+        }
+    }
+</script>

lib/client/src/components/lc-sideslider/index.vue

@@ -0,0 +1,71 @@
+<template>
+    <bk-sideslider
+        ref="bkSideslider"
+        v-bind="$attrs"
+        class="lc-sideslider"
+        :is-show="isShow"
+        quick-close
+        transfer
+        :before-close="beforeClose"
+        @update:isShow="updateShow">
+        <template slot="header">
+            <slot name="header">
+                {{ title }}
+            </slot>
+        </template>
+        <template slot="content">
+            <slot name="content" />
+        </template>
+        <template
+            v-if="$slots.footer"
+            #footer>
+            <slot name="footer" />
+        </template>
+    </bk-sideslider>
+</template>
+<script>
+    import { leaveConfirm } from '@/common/leave-confirm'
+
+    export default {
+        name: 'LcSideslider',
+        inheritAttrs: false,
+        props: {
+            isShow: {
+                type: Boolean,
+                required: true
+            },
+            title: String
+        },
+        data () {
+            return {}
+        },
+        watch: {
+            isShow: {
+                handler (val) {
+                    if (val) {
+                        // 当页面可以进行编辑时，其中一项是通过sideslider来编辑的，需要先记录页面的编辑状态
+                        this.pageLeaveConfirmMemo = window.leaveConfirm
+                        window.leaveConfirm = 'dialog'
+                    }
+                },
+                immediate: true
+            }
+        },
+        created () {
+            this.pageLeaveConfirmMemo = false
+        },
+        methods: {
+            beforeClose () {
+                console.log('sideslier befor clse', window.leaveConfirm)
+                return leaveConfirm()
+            },
+            /**
+             * @desc 关闭弹层
+             */
+            updateShow () {
+                window.leaveConfirm = this.pageLeaveConfirmMemo
+                this.$emit('update:isShow', false)
+            }
+        }
+    }
+</script>

lib/client/src/components/methods/forms/edit-market-func-sideslider.vue

@@ -1,11 +1,10 @@
 <template>
-    <bk-sideslider
+    <lc-sideslider
         :is-show="isShow"
         :quick-close="true"
         :width="1200"
         :title="form.id ? '编辑函数' : '新建函数'"
-        :before-close="confirmClose"
-        @hidden="handleClose">
+        @update:isShow="close">
         <section class="func-form-home" slot="content">
             <form-name :form.sync="form" ref="name" :function-list="functionList"></form-name>
             <form-detail :form.sync="form" ref="detail"></form-detail>
@@ -14,15 +13,21 @@
             <form-monaco :form.sync="form" :function-list="[]" class="monaco" ref="monaco"></form-monaco>
         </section>
         <section slot="footer" class="add-footer">
-            <bk-button theme="primary" @click="submitAddMarketFunc" :loading="isLoading">提交</bk-button>
+            <bk-button
+                theme="primary"
+                @click="submitAddMarketFunc"
+                :loading="isLoading">
+                提交
+            </bk-button>
             <bk-button @click="handleClose">取消</bk-button>
         </section>
-    </bk-sideslider>
+    </lc-sideslider>
 </template>
 
 <script>
     import mixins from './form-mixins'
     import { mapActions } from 'vuex'
+    import { leaveConfirm } from '@/common/leave-confirm'
 
     export default {
         mixins: [mixins],
@@ -44,17 +49,19 @@
                 'createFunction',
                 'updateFunction'
             ]),
-
+            close () {
+                this.$emit('update:isShow', false)
+                this.$emit('update:funcData', {})
+            },
             submitAddMarketFunc () {
                 this.validate().then((postData) => {
                     this.isLoading = true
                     const curMethod = this.form.id
                         ? this.updateFunction
                         : this.createFunction
                     curMethod(postData).then(() => {
-                        this.formChanged = false
+                        window.leaveConfirm = false
                         this.$emit('refresh')
-                        this.handleClose()
                     }).catch((err) => {
                         if (err?.code === 499) {
                             this
@@ -72,25 +79,18 @@
                         this.isLoading = false
                     })
                 }).catch((validator) => {
-                    this.$bkMessage({ message: validator.content || validator, theme: 'error' })
-                })
-            },
-
-            confirmClose () {
-                if (this.formChanged) {
-                    this.$bkInfo({
-                        title: '请确认是否关闭',
-                        subTitle: '存在未保存的函数，关闭后不会保存更改',
-                        confirmFn: this.handleClose
+                    this.$bkMessage({
+                        message: validator.content || validator,
+                        theme: 'error'
                     })
-                } else {
-                    this.handleClose()
-                }
+                })
             },
 
             handleClose () {
-                this.$emit('update:isShow', false)
-                this.$emit('update:funcData', {})
+                leaveConfirm('存在未保存的函数，关闭后不会保存更改')
+                    .then(() => {
+                        this.close()
+                    })
             }
         }
     }

lib/client/src/components/methods/forms/form-items/api-data.vue

@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item" v-if="form.funcType === 1">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item" v-if="form.funcType === 1">
+        <lc-form-item
             label="Api Data"
             property="funcApiData"
             error-display-type="normal"
@@ -15,8 +15,8 @@
                 :placeholder="`请输入请求体数据包，例如：{ name: {{name}}, age: 17 }`"
                 @input="(funcApiData) => updateValue({ funcApiData })">
             </bk-input>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>

lib/client/src/components/methods/forms/form-items/code.vue

@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
+        <lc-form-item
             label="函数标识"
             :required="true"
             :rules="[requireRule('函数标识'), codeRepeatRule, codeRule, keyWordRule]"
@@ -12,8 +12,8 @@
                 :disabled="disabled"
                 @input="(funcCode) => updateValue({ funcCode })">
             </bk-input>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>