update

src/common/setup/order/orderData.ts

@@ -1,20 +1,27 @@
+import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { initData } from '@/common/methods';
 import APP from '@/services';
 import { OperationTabMenu } from '@/services/go/commonService/interface';
 import { ref } from 'vue';
+
 // 处理页面下半部分数据
 export function handleOrderData() {
     // 单据菜单数据
     const orderList = ref<OperationTabMenu[]>([])
     const isBottom = ref<boolean>(false)
+    const componentId = ref<enumOrderComponents>()
     initData(() => {
         const menuList = APP.getRef('menus');
         const findResult = menuList.value.find((e: OperationTabMenu) => e.code === 'bottom' && e.type === 4);
         if (findResult) {
             isBottom.value = true
-            orderList.value = findResult.children
+            const list = findResult.children;
+            orderList.value = list
+            if (list.length) {
+                componentId.value = list[0].code
+            }
         }
     });
 
-    return { isBottom, orderList }
+    return { isBottom, orderList, componentId }
 }

src/layout/components/bottom.vue

@@ -9,61 +9,22 @@
              @click="openOrCloseBottom"></div>
       </firstMenu>
       <div v-show="isShowBottom">
-        <quoteTable :columns="columns"
-                    :dataSource="data" />
-        <thirdMenu></thirdMenu>
+        <component :is="componentId"
+                   v-if="componentId">
+        </component>
       </div>
     </main>
   </section>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineAsyncComponent, defineComponent, 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 { MenuItem } from '@/common/components/contextMenu/interface';
-import APP from '@/services';
-import { initData } from '@/common/methods';
 import { OperationTabMenu } from '@/services/go/commonService/interface';
 import { handleOrderData } from '@/common/setup/order/orderData';
-
-const columns = [
-    { title: '序号', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
-    { title: '品种', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', align: 'center' },
-    { title: '种类', dataIndex: 'address', key: '1', width: 200, align: 'center' },
-    { title: '品牌', dataIndex: 'address', key: '2', width: 200, align: 'center' },
-    { title: '数量', dataIndex: 'address', key: '3', width: 200, align: 'center' },
-    { title: '价格', dataIndex: 'address', key: '4', width: 200, align: 'center' },
-    { title: '仓库', dataIndex: 'address', key: '5', width: 200, align: 'center' },
-    { title: '所在地', dataIndex: 'address', key: '6', width: 200, align: 'center' },
-    { title: '挂牌方', dataIndex: 'address', key: '7', width: 'auto', align: 'center' },
-    // {
-    //     title: 'Action',
-    //     key: 'operation',
-    //     fixed: 'right',
-    //     align: 'center',
-    //     width: 100,
-    //     slots: { customRender: 'action' },
-    // },
-];
-
-interface DataItem {
-    key: number;
-    name: string;
-    age: number;
-    address: string;
-}
-
-const data: DataItem[] = [];
-for (let i = 0; i < 100; i++) {
-    data.push({
-        key: i,
-        name: `Edrward ${i}`,
-        age: 32,
-        address: `London Park no. ${i}`,
-    });
-}
+import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 
 // 控制底部打开与关闭
 function handleBottom() {
@@ -81,14 +42,22 @@ export default defineComponent({
         firstMenu,
         quoteTable,
         thirdMenu,
+        [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/business/order/spot_warran/index.vue')),
+        [enumOrderComponents.funding_information]: defineAsyncComponent(() => import('@/views/business/order/funding_information/index.vue')),
+        [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/business/order/performance_information/index.vue')),
+        [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/business/order/pre_sale_warehouse_receipt/index.vue')),
     },
     setup() {
         // 控制底部展开逻辑
         const { isShowBottom, openOrCloseBottom } = handleBottom();
-        const { orderList } = handleOrderData();
+        const { orderList, componentId } = handleOrderData();
+        // 切换组件
+        function selectMenu(value: OperationTabMenu) {
+            componentId.value = value.code as enumOrderComponents;
+        }
         return {
-            columns,
-            data,
+            selectMenu,
+            componentId,
             orderList,
             isShowBottom,
             openOrCloseBottom,