|
|
@@ -1,139 +0,0 @@
|
|
|
-<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>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent, computed, reactive, ref, toRefs, unref, onMounted, onUpdated, onUnmounted, provide, inject } from 'vue';
|
|
|
-import { initData } from '@/common/methods';
|
|
|
-import forwardOrder from './order/index.vue';
|
|
|
-import firstMenu from '@/common/components/firstMenu/index.vue';
|
|
|
-import quoteTable from '@/common/components/quoteTable/index.vue';
|
|
|
-import { MenuItem } from '@/common/components/contextMenu/interface';
|
|
|
-import orderTable from '@/common/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: '12',
|
|
|
- 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) {}
|
|
|
- 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: {
|
|
|
- forwardOrder,
|
|
|
- firstMenu,
|
|
|
- quoteTable,
|
|
|
- orderTable,
|
|
|
- forwardTrade,
|
|
|
- },
|
|
|
- setup() {
|
|
|
- initData(() => {
|
|
|
- // 加载数据在这里
|
|
|
- });
|
|
|
- const { list, selectMenu } = handleMenu();
|
|
|
- const contextMenuList = ref<MenuItem[]>([
|
|
|
- {
|
|
|
- lable: '下单',
|
|
|
- callback: () => {},
|
|
|
- },
|
|
|
- ]);
|
|
|
- return {
|
|
|
- data,
|
|
|
- columns,
|
|
|
- list,
|
|
|
- selectMenu,
|
|
|
- contextMenuList,
|
|
|
- orderCulums,
|
|
|
- };
|
|
|
- },
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-.forward-section {
|
|
|
- // height: 100%;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-</style
|
|
|
->;
|