MTP2.0_WEB/src/layout/components/bottom.vue

<template>
    <section
        :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']"
    >
        <CapitalInfo class="capital-info-container" v-if="isCapitalLeft"></CapitalInfo>
        <main :class="[isCapitalLeft ? 'main-some' : 'main-all']">
            <firstMenu :list="orderList" :value="'title'" @selectMenu="selectMenu">
                <div class="right-menu-content">
                    <!-- 资金信息 -->
                    <a-select
                        class="capitalSelect"
                        style="width: 180px"
                        v-if="!isCapitalLeft"
                        @change="accountChange"
                        v-model:value="selectedAccountId"
                    >
                        <a-select-option
                            v-for="item in getAllTaAccount()"
                            :value="item.accountid"
                            :key="item.accountid"
                        >{{item.accountid}}</a-select-option>
                    </a-select>
                    <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
                </div>
            </firstMenu>
            <div v-show="isShowBottom">
                <component :is="componentId" v-if="componentId"></component>
            </div>
        </main>
    </section>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, reactive, ref } from 'vue';
import CapitalInfo from '@/common/components/capitalInfo/index.vue';
import firstMenu from '@/common/components/firstMenu/index.vue';
import thirdMenu from '@/common/components/thirdMenu/index.vue';
import quoteTable from '@/common/components/quoteTable/index.vue';
import { OperationTabMenu } from '@/services/go/commonService/interface';
import { handleOrderData } from '@/common/setup/order/orderData';
import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
import { handleShowBottom, getShowBottomValue } from '@/common/config/constrolBottom';
import { getAllTaAccount, getCanUseMoney, getFreeze, getSelectedAccount, setSelectedAccount } from '@/services/bus/account';
import { AccountListItem } from '@/services/dataCenter/interafce/account';
import { getTaAccount } from '@/services/go/TaAccount';
import Bus from '@/utils/eventBus/index';
import { isOemByEnum, OemType } from '@/common/config/projectName';
import { initData } from '@/common/methods';

export default defineComponent({
    name: 'layout-top',
    components: {
        CapitalInfo,
        firstMenu,
        quoteTable,
        thirdMenu,
        [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/order/spot_warran/index.vue')),
        [enumOrderComponents.funding_information]: defineAsyncComponent(() => import('@/views/order/funding_information/index.vue')),
        [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/order/performance_information/index.vue')),
        [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/order/pre_sale_warehouse_receipt/index.vue')),
        [enumOrderComponents.financing_manager]: defineAsyncComponent(() => import('@/views/order/financing_manager/index.vue')),
        [enumOrderComponents.commodity_contract]: defineAsyncComponent(() => import('@/views/order/commodity_contract/index.vue')),
    },
    setup() {
        const { orderList, componentId } = handleOrderData();
        const selectedAccount = getSelectedAccount();
        const selectedAccountId = ref<number>(selectedAccount.accountid);
        function accountChange(id: number) {
            const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
            setSelectedAccount(item);
        }
        // 资金变化，重新加载数据
        Bus.$on('moneyChangedNtf_UI', () => {
            getTaAccount().then(() => {
                accountChange(selectedAccountId.value);
            });
        });
        // 控制资金面板是否显示在左边
        const isCapitalLeft = ref<boolean>(true);
        initData(() => {
            if (isOemByEnum(OemType.wrspot)) {
                isCapitalLeft.value = false;
            }
        });
        // 切换组件
        function selectMenu(value: OperationTabMenu) {
            componentId.value = value.code as enumOrderComponents;
        }
        return {
            selectMenu,
            componentId,
            orderList,
            isShowBottom: getShowBottomValue(),
            getShowBottomValue,
            handleShowBottom,
            getAllTaAccount,
            selectedAccountId,
            accountChange,
            isCapitalLeft,
        };
    },
});
</script>
<style lang="less">
.right-menu-content {
    display: flex;
    .capitalSelect {
        margin-top: 3px;
        margin-right: 10px;
        .ant-select-selector {
            background-color: @m-grey6;
            border: none;
        }
        .ant-select-arrow {
            top: 15px;
        }
    }
}
.layout-bottom-all {
    height: 330px;
}
.layout-bottom-hidden {
    height: 40px;
}
.main-all {
    max-width: 100;
}
.main-some {
    max-width: calc(100% - 180px);
}
.layout-bottom {
    display: flex;
    width: 100%;
    transition: height 0.5s;
    overflow: hidden;
    .capital-info-container {
        width: 180px;
        border-right: 1px solid @m-black2;
    }
    main {
        max-width: 100%;
        flex: 1;
        .flex;
        flex-direction: column;
        background: @m-black1;
        position: relative;
        .conditionIcon {
            font-size: 16px;
            color: @m-grey1;
            width: 16px;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
            &:hover {
                color: @m-grey1-hover;
            }
        }
    }
}
</style>