新建仓单贸易

src/components/capitalInfo/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="capital-info">
+
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue';
+
+interface Key {
+    [propName: string]: string;
+}
+
+export default defineComponent({
+    name: 'first-menu',
+    props: {
+        list: {
+            default: [],
+            type: Object as PropType<Key[]>,
+        },
+        value: {
+            // 需要绑定的值得 key
+            default: '',
+            type: String,
+        },
+    },
+    components: {},
+    setup(props, context) {
+        const current = ref<string[]>(['0']);
+        function menuClick(value: any) {
+            const index = +value.key;
+            context.emit('selectMenu', props.list[index]);
+        }
+        return {
+            current,
+            menuClick,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.capital-info {
+}
+</style>;

src/components/firstMenu/index.vue

@@ -1,71 +1,72 @@
 <template>
-    <div class="menu_container">
-        <a-menu
-            class="a-menu_container"
+  <div class="first-menu">
+    <a-menu class="a-menu_container"
             theme="dark"
             v-model:selectedKeys="current"
             @click="menuClick"
             mode="horizontal">
-            <a-menu-item :key="String(index)" v-for="(item, index) in list">
-                {{ item[value]}}
-            </a-menu-item>
-        </a-menu>
-        <div class="menu_right">
-            <slot></slot>
-        </div>
+      <a-menu-item :key="String(index)"
+                   v-for="(item, index) in list">
+        {{ item[value]}}
+      </a-menu-item>
+    </a-menu>
+    <div class="menu_right">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
-    import { defineComponent, ref, PropType } from 'vue';
+import { defineComponent, ref, PropType } from 'vue';
 
-    interface Key {
-        [propName: string]: string
-    }
+interface Key {
+    [propName: string]: string;
+}
 
-    export default defineComponent({
-        name: 'first-menu',
-        props: {
-            list: {
-                default: [],
-                type: Object as PropType<Key[]>,
-            },
-            value: {    // 需要绑定的值得 key
-                default: '',
-                type: String,
-            }
+export default defineComponent({
+    name: 'first-menu',
+    props: {
+        list: {
+            default: [],
+            type: Object as PropType<Key[]>,
         },
-        components: {},
-        setup(props, context) {
-            const current = ref<string[]>(['0']);
-            function menuClick(value: any) {
-                const index = +value.key;
-                context.emit('selectMenu', props.list[index])
-            }
-            return {
-                current,
-                menuClick
-            };
+        value: {
+            // 需要绑定的值得 key
+            default: '',
+            type: String,
         },
-    });
+    },
+    components: {},
+    setup(props, context) {
+        const current = ref<string[]>(['0']);
+        function menuClick(value: any) {
+            const index = +value.key;
+            context.emit('selectMenu', props.list[index]);
+        }
+        return {
+            current,
+            menuClick,
+        };
+    },
+});
 </script>
 
 <style lang="less">
 .noBorderBottom {
     border-bottom: none;
 }
-.menu_container {
+.first-menu {
     .flex();
     justify-content: space-between;
     border-bottom: 1px solid @m-blue0 !important;
-     background-color: @m-black1;
+    background-color: @m-black1;
     .a-menu_container {
         padding-top: 5px;
         .flex();
         height: 34px;
         line-height: 34px;
         .ant-menu-item {
-            background: linear-gradient(0deg, #343D46 0%, #38444F 100%);
+            background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
             margin-left: 3px;
             font-size: 16px;
             columns: @m-grey2;
@@ -74,16 +75,16 @@
             font-family: Adobe Heiti Std;
             font-weight: normal;
             &:hover {
-                .noBorderBottom
+                .noBorderBottom;
             }
         }
         .ant-menu-item-active {
-            .noBorderBottom
+            .noBorderBottom;
         }
         .ant-menu-item-selected {
             .noBorderBottom;
             color: @m-white;
-            background: linear-gradient(0deg, #3270D2 0%, #3A87F7 100%);
+            background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
             &:hover {
                 color: @m-white;
             }

src/components/secondeMenu/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="second_menu">
+
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue';
+
+interface Key {
+    [propName: string]: string;
+}
+
+export default defineComponent({
+    name: 'second_menu',
+    props: {
+        list: {
+            default: [],
+            type: Object as PropType<Key[]>,
+        },
+        value: {
+            // 需要绑定的值得 key
+            default: '',
+            type: String,
+        },
+    },
+    components: {},
+    setup(props, context) {
+        const current = ref<string[]>(['0']);
+        function menuClick(value: any) {
+            const index = +value.key;
+            context.emit('selectMenu', props.list[index]);
+        }
+        return {
+            current,
+            menuClick,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.noBorderBottom {
+    border-bottom: none;
+}
+.menu_container {
+    .flex();
+    justify-content: space-between;
+    border-bottom: 1px solid @m-blue0 !important;
+    background-color: @m-black1;
+    .a-menu_container {
+        padding-top: 5px;
+        .flex();
+        height: 34px;
+        line-height: 34px;
+        .ant-menu-item {
+            background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
+            margin-left: 3px;
+            font-size: 16px;
+            columns: @m-grey2;
+            border-radius: 5px 5px 0px 0px;
+            cursor: pointer;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            &:hover {
+                .noBorderBottom;
+            }
+        }
+        .ant-menu-item-active {
+            .noBorderBottom;
+        }
+        .ant-menu-item-selected {
+            .noBorderBottom;
+            color: @m-white;
+            background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
+            &:hover {
+                color: @m-white;
+            }
+        }
+    }
+}
+</style>;

src/main.ts

@@ -9,23 +9,6 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-// export const qtWebChannel: any = null;
-
-// const webChannelTransport = {
-//     send() {
-//         console.log('QWebChannel simulator activated !');
-//     },
-//     onmessage() { },
-// };
-
-// new QWebChannel(window.qt.webChannelTransport, (channel: any) => {
-//     console.log('okoko');
-//     // all published objects are available in channel.objects under
-//     // the identifier set in their attached WebChannel.id property
-//     qtWebChannel = channel.objects.bridge;
-// });
-// console.log(QWebChannel);
-
 const app = createApp(App);
 app.use(router);
 app.use(Antd).mount('#app');

src/router/index.ts

@@ -33,7 +33,13 @@ const routes: Array<RouteRecordRaw> = [
                 path: '/forward',
                 name: 'forward',
                 component: () => import('@/views/market/forward/index.vue'),
-            }
+            },
+            {
+                path: '/warehouse-trade',
+                name: 'warehouseTrade',
+                component: () => import('@/views/market/warehouseTrade/index.vue'),
+            },
+
         ],
     },
     {

src/views/account/login.vue

@@ -7,7 +7,6 @@
         <div class="login-background">
           <div>
             <img src="@/assets/images/logo.png"
-                 @click="qtAction('ok')"
                  alt="" />
           </div>
         </div>
@@ -74,7 +73,6 @@ import { localStorageUtil } from '@/utils/tool/storage/index';
 import { setLoadComplete } from '@/setup/methods/index';
 import eventBus from '@/utils/eventBus/index';
 import { QWebChannel } from '@/utils/tool/qwebchannel.js';
-// import { qtWebChannel } from '@/main';
 
 interface Form {
     account: string;
@@ -106,33 +104,50 @@ declare global {
         };
     }
 }
-
-let qtWebChannel: any = null;
-const webChannelTransport = window.qt.webChannelTransport
-new QWebChannel(webChannelTransport, (channel: any) => {
-    alert('成功！！！');
-    // all published objects are available in channel.objects under
-    // the identifier set in their attached WebChannel.id property
-    qtWebChannel = channel.objects.bridge;
-    console.log('qtWebChannel', qtWebChannel);
-});
-
-function qtAction(value: any) {
-    if (qtWebChannel) {
-        qtWebChannel.getSystemInfo().then((res: any) => {
-            console.log(res);
-
-            var arr = [];
-            for (var i = 0, j = res.length; i < j; ++i) {
-                arr.push(res.charCodeAt(i));
-            }
-            console.log(new Uint8Array(arr));
+function qtAction() {
+    // 获取 与qt交互实例
+    let qtWebChannel: any = null;
+    const webChannelTransport = window.qt?.webChannelTransport;
+    if (webChannelTransport) {
+        new QWebChannel(webChannelTransport, (channel: any) => {
+            // all published objects are available in channel.objects under
+            // the identifier set in their attached WebChannel.id property
+            qtWebChannel = channel.objects.bridge;
+            console.log('qtWebChannel', qtWebChannel);
         });
-    } else {
-        alert('qtWebChannel is null');
     }
+
+    function getQtInfo(): Promise<Uint8Array[]> {
+        if (qtWebChannel) {
+            return qtWebChannel.getSystemInfo().then((res: any) => {
+                const arr = [];
+                for (var i = 0, j = res.length; i < j; ++i) {
+                    arr.push(res.charCodeAt(i));
+                }
+                return new Uint8Array(arr);
+            });
+        } else {
+            console.warn('qtWebChannel is null');
+            return Promise.resolve([]);
+        }
+    }
+    return { getQtInfo };
 }
 
+// function qtAction(value: any) {
+//     if (qtWebChannel) {
+//         qtWebChannel.getSystemInfo().then((res: any) => {
+//             const arr = [];
+//             for (var i = 0, j = res.length; i < j; ++i) {
+//                 arr.push(res.charCodeAt(i));
+//             }
+//             console.log(new Uint8Array(arr));
+//         });
+//     } else {
+//         alert('qtWebChannel is null');
+//     }
+// }
+
 export default defineComponent({
     name: 'login',
     components: {},
@@ -148,7 +163,7 @@ export default defineComponent({
         form.password = '';
         setRememberAccount();
         // qt
-
+        const { getQtInfo } = qtAction();
         function loginAction() {
             formDom.value.validate().then(() => {
                 loading.value = true;
@@ -187,19 +202,7 @@ export default defineComponent({
                     goHomeloading.value = false;
                 });
         };
-        onMounted(() => {
-            // setTimeout(() => {
-            //     if (qtWebChannel) {
-            //         qtWebChannel.operateResult.connect((response: any) => {
-            //             alert(response);
-            //             console.log('response', response);
-            //         });
-            //     } else {
-            //         alert('qtWebChannel is null!!!!');
-            //     }
-            // });
-        });
-        return { qtAction, form, loginAction, rules, formDom, loading, goHomeloading, goHome };
+        return { form, loginAction, rules, formDom, loading, goHomeloading, goHome };
     },
 });
 </script>

src/views/market/forward/components/forwarTrade/index.vue

@@ -1,74 +1,75 @@
 <template>
-    <div class="forward-trade"> </div>
+  <div class="forward-trade"> </div>
 </template>
 
 <script lang="ts">
-    import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
-    import { initData } from '@/setup/methods/index';
-    // 1.头部菜单栏
-    const useMenu = () => {
-        interface headerMenu {
-            name: string;
-            path: string;
-            icon?: string;
-        }
-        const selectedKeys = ref<string[]>(['/login']);
-        const menu: headerMenu[] = reactive([
-            { path: '/login', name: '您好请登录' },
-            { path: '/logon', name: '免费注册' },
-            { path: '/', name: '商城' },
-            { path: '/order', name: '我的订单' },
-            { path: '/pack', name: '我的包裹' },
-            { path: '/myGoods', name: '我的商品' },
-            { path: '/news', name: '消息中心' },
-        ]);
+import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
+import { initData } from '@/setup/methods/index';
+// 1.头部菜单栏
+const useMenu = () => {
+    interface headerMenu {
+        name: string;
+        path: string;
+        icon?: string;
+    }
+    const selectedKeys = ref<string[]>(['/login']);
+    const menu: headerMenu[] = reactive([
+        { path: '/login', name: '您好请登录' },
+        { path: '/logon', name: '免费注册' },
+        { path: '/', name: '商城' },
+        { path: '/order', name: '我的订单' },
+        { path: '/pack', name: '我的包裹' },
+        { path: '/myGoods', name: '我的商品' },
+        { path: '/news', name: '消息中心' },
+    ]);
+    return {
+        selectedKeys,
+        menu,
+    };
+};
+export default defineComponent({
+    name: 'forward-trade',
+    components: {},
+    setup() {
+        // beforeCreate -> 使用 setup()
+        // created -> 使用 setup()
+        // beforeMount -> onBeforeMount
+        // mounted -> onMounted
+        // beforeUpdate -> onBeforeUpdate
+        // updated -> onUpdated
+        // beforeDestroy -> onBeforeUnmount
+        // destroyed -> onUnmounted
+        // errorCaptured -> onErrorCaptured
+        initData(() => {
+            // 加载数据在这里
+        });
+        onMounted((): void => {
+            console.log('mounted!');
+        });
+        onUpdated((): void => {
+            console.log('updated!');
+        });
+        onUnmounted((): void => {
+            console.log('unmounted!');
+        });
         return {
-            selectedKeys,
-            menu,
+            ...useMenu(),
         };
-    };
-    export default defineComponent({
-        name: 'forward-trade',
-        components: {},
-        setup() {
-            // beforeCreate -> 使用 setup()
-            // created -> 使用 setup()
-            // beforeMount -> onBeforeMount
-            // mounted -> onMounted
-            // beforeUpdate -> onBeforeUpdate
-            // updated -> onUpdated
-            // beforeDestroy -> onBeforeUnmount
-            // destroyed -> onUnmounted
-            // errorCaptured -> onErrorCaptured
-            initData(() => {
-                // 加载数据在这里
-            });
-            onMounted((): void => {
-                console.log('mounted!');
-            });
-            onUpdated((): void => {
-                console.log('updated!');
-            });
-            onUnmounted((): void => {
-                console.log('unmounted!');
-            });
-            return {
-                ...useMenu(),
-            };
-        },
-    });
+    },
+});
 </script>
 
 <style lang="less">
-    .forward-trade {
-        position: absolute;
-        top: 35px;
-        right: -2px;
-        width: 441px;
-        height: 310px;
-        background: #1d2f3f;
-        border: 2px solid #3a87f7;
-        border-radius: 5px;
-        z-index: 9;
-    }</style
+.forward-trade {
+    position: absolute;
+    top: 35px;
+    right: -2px;
+    width: 441px;
+    height: 310px;
+    background: #1d2f3f;
+    border: 2px solid #3a87f7;
+    border-radius: 5px;
+    z-index: 9;
+}
+</style
 >;

src/views/market/forward/index.vue

@@ -1,134 +1,141 @@
 <template>
-    <section class="forward-section">
-        <forwardTrade />
-        <firstMenu :list="list" :value="'value'" @selectMenu="selectMenu" />
-        <quoteTable :columns="columns" :dataSource="data" :contextMenuList="contextMenuList" />
-        <firstMenu :list="list" :value="'value'" @selectMenu="selectMenu" />
-        <orderTable :columns="orderCulums" :dataSource="data" />
-    </section>
+  <section class="forward-section">
+    <forwardTrade />
+    <firstMenu :list="list"
+               :value="'value'"
+               @selectMenu="selectMenu" />
+    <quoteTable :columns="columns"
+                :dataSource="data"
+                :contextMenuList="contextMenuList" />
+    <firstMenu :list="list"
+               :value="'value'"
+               @selectMenu="selectMenu" />
+    <orderTable :columns="orderCulums"
+                :dataSource="data" />
+  </section>
 </template>
 
 <script lang="ts">
-    import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
-    import { initData } from '@/setup/methods/index';
-    import forwardOrder from './order/index.vue';
-    import firstMenu from '@/components/firstMenu/index.vue';
-    import quoteTable from '@/components/quoteTable/index.vue';
-    import { MenuItem } from '@/components/contextMenu/interface';
-    import orderTable from '@/components/orderTable/index.vue';
-    import forwardTrade from './components/forwarTrade/index.vue';
+import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
+import { initData } from '@/setup/methods/index';
+import forwardOrder from './order/index.vue';
+import firstMenu from '@/components/firstMenu/index.vue';
+import quoteTable from '@/components/quoteTable/index.vue';
+import { MenuItem } from '@/components/contextMenu/interface';
+import orderTable from '@/components/orderTable/index.vue';
+import forwardTrade from './components/forwarTrade/index.vue';
 
-    const columns = [
-        { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
-        { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', align: 'center' },
-        { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
-        { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
-        { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
-        { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
-        { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
-        { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
-        { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
-        //   { title: 'Column 8', dataIndex: 'address', key: '11', width: 200 , align: 'center' },
-        //   { title: 'Column 8', dataIndex: 'address', key: '12', width: 200 , align: 'center' },
-        //   { title: 'Column 8', dataIndex: 'address', key: '13', width: 200 , align: 'center' },
-        {
-            title: 'Action',
-            key: 'operation',
-            fixed: 'right',
-            align: 'center',
-            width: 100,
-            slots: { customRender: 'action' },
-        },
-    ];
+const columns = [
+    { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
+    { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', align: 'center' },
+    { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
+    { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
+    { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
+    { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
+    { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
+    { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
+    { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
+    //   { title: 'Column 8', dataIndex: 'address', key: '11', width: 200 , align: 'center' },
+    //   { title: 'Column 8', dataIndex: 'address', key: '12', width: 200 , align: 'center' },
+    //   { title: 'Column 8', dataIndex: 'address', key: '13', width: 200 , 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;
-    }
+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}`,
-        });
-    }
+const data: DataItem[] = [];
+for (let i = 0; i < 100; i++) {
+    data.push({
+        key: i,
+        name: `Edrward ${i}`,
+        age: 32,
+        address: `London Park no. ${i}`,
+    });
+}
 
-    function handleMenu() {
-        const list = [
-            { key: '1', value: 'one' },
-            { key: '2', value: 'two' },
-            { key: '3', value: 'three' },
-        ];
-        function selectMenu(item: any) {
-            console.log(item);
-        }
-        return { list, selectMenu };
+function handleMenu() {
+    const list = [
+        { key: '1', value: 'one' },
+        { key: '2', value: 'two' },
+        { key: '3', value: 'three' },
+    ];
+    function selectMenu(item: any) {
+        console.log(item);
     }
+    return { list, selectMenu };
+}
 
-    const orderCulums = [
-        { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
-        { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
-        { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
-        { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
-        { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
-        { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
-        { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '11', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '12', width: 200, align: 'center' },
-        { title: 'Column 8', dataIndex: 'address', key: '13', width: 200, align: 'center' },
-        { title: 'Column 9', dataIndex: 'address', key: '14', width: 200, align: 'center' },
-        { title: 'Column 9', dataIndex: 'address', key: '15', width: 200, align: 'center' },
-        { title: 'Column 10', dataIndex: 'address', key: '16', width: 200, align: 'center' },
-    ];
+const orderCulums = [
+    { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
+    { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
+    { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
+    { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
+    { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
+    { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
+    { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '11', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '12', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '13', width: 200, align: 'center' },
+    { title: 'Column 9', dataIndex: 'address', key: '14', width: 200, align: 'center' },
+    { title: 'Column 9', dataIndex: 'address', key: '15', width: 200, align: 'center' },
+    { title: 'Column 10', dataIndex: 'address', key: '16', width: 200, align: 'center' },
+];
 
-    export default defineComponent({
-        name: 'forward',
-        components: {
-            forwardOrder,
-            firstMenu,
-            quoteTable,
-            orderTable,
-            forwardTrade,
-        },
-        setup() {
-            initData(() => {
-                // 加载数据在这里
-            });
-            const { list, selectMenu } = handleMenu();
-            const contextMenuList = ref<MenuItem[]>([
-                {
-                    lable: '下单',
-                    callback: () => {
-                        console.log('kkk');
-                    },
+export default defineComponent({
+    name: 'forward',
+    components: {
+        forwardOrder,
+        firstMenu,
+        quoteTable,
+        orderTable,
+        forwardTrade,
+    },
+    setup() {
+        initData(() => {
+            // 加载数据在这里
+        });
+        const { list, selectMenu } = handleMenu();
+        const contextMenuList = ref<MenuItem[]>([
+            {
+                lable: '下单',
+                callback: () => {
+                    console.log('kkk');
                 },
-            ]);
-            return {
-                data,
-                columns,
-                list,
-                selectMenu,
-                contextMenuList,
-                orderCulums,
-            };
-        },
-    });
+            },
+        ]);
+        return {
+            data,
+            columns,
+            list,
+            selectMenu,
+            contextMenuList,
+            orderCulums,
+        };
+    },
+});
 </script>
 
 <style lang="less">
-    .forward-section {
-        // height: 100%;
-        position: relative;
-    }</style
->;
+.forward-section {
+    // height: 100%;
+    position: relative;
+}
+</style>;

src/views/market/warehouseTrade/chart/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="warehouse-trade-chart">
+    仓单贸易图表
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'arehouse-trade-chart',
+    components: {},
+    setup() {
+        return {};
+    },
+});
+</script>
+
+<style lang="less">
+.chart {
+    // height: 100%;
+    position: relative;
+}
+</style>;

src/views/market/warehouseTrade/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <!-- 仓单贸易 -->
+  <section class="forward-section warehouse-trade">
+    <firstMenu :list="list"
+               :value="'value'"
+               @selectMenu="selectMenu" />
+    <quoteTable :columns="columns"
+                :dataSource="data"
+                :contextMenuList="contextMenuList" />
+    <div class="warehouse-trade-order">
+      单据
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
+import { initData } from '@/setup/methods/index';
+import firstMenu from '@/components/firstMenu/index.vue';
+import quoteTable from '@/components/quoteTable/index.vue';
+import { MenuItem } from '@/components/contextMenu/interface';
+import orderTable from '@/components/orderTable/index.vue';
+
+const columns = [
+    { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', align: 'center' },
+    { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', align: 'center' },
+    { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
+    { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
+    { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
+    { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
+    { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
+    { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
+    { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
+    //   { title: 'Column 8', dataIndex: 'address', key: '11', width: 200 , align: 'center' },
+    //   { title: 'Column 8', dataIndex: 'address', key: '12', width: 200 , align: 'center' },
+    //   { title: 'Column 8', dataIndex: 'address', key: '13', width: 200 , 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}`,
+    });
+}
+
+function handleMenu() {
+    const list = [
+        { key: '1', value: 'one' },
+        { key: '2', value: 'two' },
+        { key: '3', value: 'three' },
+    ];
+    function selectMenu(item: any) {
+        console.log(item);
+    }
+    return { list, selectMenu };
+}
+
+const orderCulums = [
+    { title: 'Column 1', dataIndex: 'address', key: '1', width: 156, align: 'center' },
+    { title: 'Column 2', dataIndex: 'address', key: '2', width: 156, align: 'center' },
+    { title: 'Column 3', dataIndex: 'address', key: '3', width: 156, align: 'center' },
+    { title: 'Column 4', dataIndex: 'address', key: '4', width: 200, align: 'center' },
+    { title: 'Column 5', dataIndex: 'address', key: '5', width: 200, align: 'center' },
+    { title: 'Column 6', dataIndex: 'address', key: '6', width: 200, align: 'center' },
+    { title: 'Column 7', dataIndex: 'address', key: '7', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '8', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '9', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '10', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '11', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '12', width: 200, align: 'center' },
+    { title: 'Column 8', dataIndex: 'address', key: '13', width: 200, align: 'center' },
+    { title: 'Column 9', dataIndex: 'address', key: '14', width: 200, align: 'center' },
+    { title: 'Column 9', dataIndex: 'address', key: '15', width: 200, align: 'center' },
+    { title: 'Column 10', dataIndex: 'address', key: '16', width: 200, align: 'center' },
+];
+
+export default defineComponent({
+    name: 'forward',
+    components: {
+        firstMenu,
+        quoteTable,
+        orderTable,
+    },
+    setup() {
+        initData(() => {
+            // 加载数据在这里
+        });
+        const { list, selectMenu } = handleMenu();
+        const contextMenuList = ref<MenuItem[]>([
+            {
+                lable: '下单',
+                callback: () => {
+                    console.log('kkk');
+                },
+            },
+        ]);
+        return {
+            data,
+            columns,
+            list,
+            selectMenu,
+            contextMenuList,
+            orderCulums,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.warehouse-trade {
+    // height: 100%;
+    position: relative;
+}
+</style>;