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) || isOemByEnum(OemType.tian_jing_mai_dun)) {
                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: 2px;
        margin-right: 10px;
        .ant-select-selector {
            background-color: @m-grey6;
            border: none;
            height: 28px;
        }
        .ant-select-arrow {
            top: 15px;
        }
    }
}
.layout-bottom-all {
    height: 280px;
}
.layout-bottom-hidden {
    height: 40px;
}
.main-all {
    max-width: 100;
}
.main-some {
    max-width: calc(100% - 160px);
}
.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-black36;
        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>