MTP2.0_WEB/src/views/order/commodity_contract/index.vue

<template>
  <!-- 商品合约 -->
  <section class="spot_warran">
    <component :is="componentId"
               v-if="componentId"></component>
    <thirdMenu :list="tabList"
               @selectMenu="changeTab"
               :value="'title'">
      <!-- 议价单 -->
      <div class="goods-apply"
           v-if="componentId === BARGIN">
        <!-- <span @click="changeBargain(ApplyType.my)">我的议价</span>
                <span @click="changeBargain(ApplyType.counterpart)">对方议价</span>-->
        <a-radio-group class="conditionCommonRadioGroup"
                       v-model:value="bargainValue">
          <a-radio @focus="changeBargain(ApplyType.my)"
                   :value="ApplyType.my">我的申请</a-radio>
          <a-radio @focus="changeBargain(ApplyType.counterpart)"
                   :value="ApplyType.counterpart">对方申请</a-radio>
        </a-radio-group>
      </div>
    </thirdMenu>
  </section>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue';
import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
import thirdMenu from '@/common/components/thirdMenu/index.vue';
import { handleOrderDetailList } from '@/common/setup/order/orderData';
import Bus from '@/utils/eventBus/index';
import { ApplyType } from '@/common/constants/enumCommon';

const BARGIN = 'commodity_contract_bargain'; // 议价单

export default defineComponent({
    name: enumOrderComponents.commodity_contract,
    components: {
        thirdMenu,
        [enumOrderComponents.commodity_contract_summary]: defineAsyncComponent(() => import('./components/commodity_contract_summary/index.vue')),
        [enumOrderComponents.commodity_contract_commission]: defineAsyncComponent(() => import('./components/commodity_contract_commission/index.vue')),
        [enumOrderComponents.commodity_contract_make_deal]: defineAsyncComponent(() => import('./components/commodity_contract_make_deal/index.vue')),
        [enumOrderComponents.commodity_contract_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_settlement/index.vue')),
        [BARGIN]: defineAsyncComponent(() => import('./components/commodity_contract_bargain/index.vue')),
    },
    setup() {
        // 切换 我的
        function changeBargain(value: ApplyType) {
            Bus.$emit('bargain', value);
        }
        const bargainValue = ref<ApplyType>(ApplyType.my);
        return { ...handleOrderDetailList(enumOrderComponents.commodity_contract), changeBargain, BARGIN, ApplyType, bargainValue };
    },
});
</script>

<style lang="less">
.goods-apply {
    position: absolute;
    bottom: 2px;
    right: 20px;
}
</style>;