ZhongMianAdmin/packages/app-cdfg/src/components/Header/Edit.vue

<template>
    <div x-name="header-edit" class="header-wrapper">
        <span class="title">{{ title }}<b />{{ $t(`menu.${router.name}`) }}</span>
        <div class="buttons" v-show="show">
            <ui-button type="normal" @click.stop="onCancel">{{ $t('common.exit') }}</ui-button>
            <ui-button type="primary" @click.stop="onSave">{{ $t('common.save') }}</ui-button>
        </div>
    </div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { Loading, Dialog } from '@kankan/components'
import { getApp, getNum } from '@/app'
import { useI18n } from '@/i18n'
const { t } = useI18n({ useScope: 'global' })
const store = useStore()
const title = computed(() => store.getters['scene/metadata'].title)
const module = computed(() => store.getters.editModule)
const router = computed(() => store.getters.router)
const enterVisible = computed(() => store.getters['tag/enterVisible'])
const show = computed(() => {
    // 基础设置的编辑按钮需要特性处理
    if (store.getters.toolbar && store.getters.toolbar.show && module.value == 'settings') {
        return false
    }
    return true
})
const onSave = () => {
    Loading.show()
    store
        .dispatch(`${module.value}/save`)
        .then(response => {
            console.log(response)
            Loading.hide()
            if (response) {
                if (response.success) {
                    Dialog.toast.hide()
                    Dialog.toast({ content: t('common.saveSuccess'), type: 'success' })
                } else {
                    Dialog.toast.hide()
                    Dialog.toast({ content: t('common.busy'), type: 'error' })
                }
            } else {
            }
        })
        .catch(error => {
            console.log(error)
            Loading.hide()
            if (error) {
                // console.error(error)
                // Dialog.toast.hide()

                Dialog[error.type]({
                    content: t(error.msg),
                    type: error.tips,
                })
                // if (typeof error === 'object' && error.errorMsg) {
                //     Dialog.toast({ content: '保存失败，' + error.errorMsg, type: 'error' })
                // } else {
                //     Dialog.toast({ content: '保存失败，请重试！', type: 'error' })
                // }
            }
        })
}
const onCancel = () => {
    if (router.value.name == 'tag' && enterVisible.value) {
        if (!getApp().TagManager.edit.checkNeedSaveTagVisi()) {
            store.commit(`${module.value}/cancel`)
            return
        }
    }
    if (router.value.name == 'roam') {
        if (!getApp().WalkManager.edit.checkNeedSave()) {
            store.commit(`${module.value}/cancel`)
            return
        }
    }

    Dialog.confirm({
        content: t('toast.saveTips'),
        title: t('common.tips'),
        okText: t('common.confirm'),
        noText: t('common.cancel'),
        func: state => {
            if (state == 'ok') {
                store.commit(`${module.value}/cancel`)
            }
        },
    })
}
</script>
<style lang="scss" scoped>
.header-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title {
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    b {
        display: inline-block;
        width: 2px;
        height: 14px;
        margin: 0 10px;
        background: rgba(255, 255, 255, 0.16);
    }
}
.buttons {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    button {
        width: 105px;
        margin-right: 10px;
    }
}
</style>