FE_bankTeaching/src/components/needBefore/index.vue

<template>
    <!-- <div class="flex mt-8 ml-12 text-xl title"> -->
    <div v-if="!this.unNeed">
        <h1 class="title" @click="goto">请完成上一个步骤！</h1>
    </div>
    <div v-else>
        <h1 class="title2" @click="goto2">您无需完成该操作！</h1>
    </div>
</template>

<script>

const obj = {
    // 'consumerClient': '/counter/list/manage/consumerClient',
    // 'currentAccount/openAccount': '/counter/list/manage/currentAccount',
    // 'currentAccount/deposit': '/counter/list/manage/currentAccount'
    'consumerClient': '客户信息 -> 个人客户信息建立',
    'corporateClient': '客户信息 -> 公司客户信息建立',
    'currentAccount/openAccount': '活期业务 -> 开户',
    'currentAccount/deposit': '活期业务 -> 存款',
    'currentAccount/withdrawal': '活期业务 -> 取款',
    'currentAccount/transferAccounts': '活期业务 -> 转账',
    'currentAccount/settle': '活期业务 -> 结清',
    'currentAccount/Cancell': '活期业务 -> 销户',
    'timeDeposit/openAccount': '整存整取 -> 开户',
    'timeDeposit/deposit': '整存整取 -> 存款',
    'timeDeposit/withdrawal': '整存整取 -> 取款',
    'timeDeposit/deposit': '整存整取 -> 存款',
    'business/openAccount': '公司业务 -> 开户'
}

import {mapGetters} from 'vuex'
export default {
    props: {
        moduleName: {
            type: String,
            require: true
        },
        unNeed: {
            type: Boolean,
            default: false
        }
    },
    created() {
        if(this.unNeed) {
            this.$message({
                message: '您无需完成该操作！',
                type: 'info'
            });
        }else {
            this.$message({
                message: '请先完成' + obj[this.moduleName],
                type: 'info'
            });
        }
        
    },
    methods: {
        goto() {
            // this.$router.push(obj[this.moduleName])
            console.log(this.moduleName)
            this.$message({
                message: '请先完成' + obj[this.moduleName],
                type: 'info'
            });
        },
        goto2() {
            this.$message({
                message: '您无需完成该操作！',
                type: 'info'
            });
        },
    },
    computed: {
        ...mapGetters({
            needsModule: 'system/needsModule',
        })
    }
}
</script>

<style scoped lang='scss'>
    .title{
        width: 100%;
        height: 10vh;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .title2{
        width: 100%;
        height: 10vh;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>