JLH/JLHAPP/src/components/lj-win-editable-mx.vue

<!--为单据明细浏览、修改共用页面，切换编辑/非编辑状态的机制-->
<template>
    <lj-win-common :title="title" ref="baseWin">
        <template v-if="showDefaultSaveEditButton">
            <template v-if="editing">
                <!--<mu-button icon slot="header_right" @click="$emit('add')"><i class="iconfont icon-add"></i></mu-button>-->
                <template v-if="diaplaySaveButton">
                    <mu-button icon slot="header_right" @click="handleSaveButton"><i class="iconfont icon-check"></i>
                    </mu-button>
                </template>
            </template>
            <template v-else>
                <mu-button icon slot="header_right" @click="$emit('update:editing', true)"><i
                        class="iconfont icon-edit"></i>
                </mu-button>
            </template>
        </template>

        <slot name="header_right" slot="header_right"></slot>
        <slot name="header_sub" slot="header_sub"></slot>
        <div  slot="body" ref="bodyref">
            <slot name="body_top"></slot>
            <mu-row v-if="addable && editing" class="lj-group" @click="$emit('add')" style="text-align: center;">
                <mu-col>{{mxAddButtonText}}<i class="iconfont icon-add"></i></mu-col>
            </mu-row>
            <slot name="body_bottom"></slot>
        </div>
        <!--<slot name="body" slot="body" ref="bodyref">-->
        <!--</slot>-->
        <slot slot="footer" name="footer"></slot>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";

    export default {
        name: "lj-win-editable-mx",
        components: {LjWinCommon},
        props: {
            showDefaultSaveEditButton:{
                type: Boolean,
                default: true
            },
            editing: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ""
            },
            saveHandler: {
                type: Function
            },
            addable: {
                type: Boolean,
                default: true
            },
            diaplaySaveButton: {
                type: Boolean,
                default: true
            },
            mxAddButtonText:{
                type: String,
                default : "增加明细"
            }
        },
        created() {
            if (this.getInitEditing) {
                this.editing = this.getInitEditing();
            }
        },
        data() {
            return {
            }
        },
        methods: {
            handleSaveButton() {
                if (!this.saveHandler) {
                    console.error("lj-win-editable-mx:未指定saveHandler");
                    return;
                }
                this.saveHandler(this.saveHandlerCallBack);
            },
            saveHandlerCallBack(saveResult){
                if (typeof(saveResult) !== "boolean") {
                    console.error("lj-win-editable-mx:saveHandler返回值错误（true:成功;false:失败）");
                    return;
                }
                if (saveResult) {
                    this.$emit('update:editing', false);
                }
            }
        }
    }
</script>

<style scoped>

</style>