商品信息

src/views/information/goods/components/leftMenu/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="leftMenu">
-        <a-menu theme="dark" mode="inline" class="left-menu"  @click="menuClick">
+    <div class="leftMenu">
+        <a-menu theme="dark" mode="inline" class="left-menu" @click="menuClick">
             <a-sub-menu v-for="item in menuList" :key="item.key">
                 <template #title>
                     <span>
@@ -12,177 +12,176 @@
                 </a-menu-item>
             </a-sub-menu>
         </a-menu>
-  </div>
+    </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
-import APP from '@/services';
+    import { defineComponent, ref, PropType } from 'vue';
+    import APP from '@/services';
 
-interface Key {
-    [propName: string]: string;
-}
-// 菜单栏
-const handleMenu = () => {
-    const collapsed = ref<boolean>(false);
-    const selectedKeys = ref<string[]>(['1-1']);
-    const openKeys = ref<string[]>(['1']);
-    const preOpenKeys = ref<string[]>(['1']);
-    // const menuList = APP.getRef('menus');
-    const menuList = [
-        {
-          key: '1',
-          title: '正常',
-          children: [
-            {
-              key: '1-1',
-              title: '铜杆(吨)',
-            },
+    interface Key {
+        [propName: string]: string;
+    }
+    // 菜单栏
+    const handleMenu = () => {
+        const collapsed = ref<boolean>(false);
+        const selectedKeys = ref<string[]>(['1-1']);
+        const openKeys = ref<string[]>(['1']);
+        const preOpenKeys = ref<string[]>(['1']);
+        // const menuList = APP.getRef('menus');
+        const menuList = [
             {
-              key: '1-2',
-              title: '铜板(吨)',
+                key: '1',
+                title: '正常',
+                children: [
+                    {
+                        key: '1-1',
+                        title: '铜杆(吨)',
+                    },
+                    {
+                        key: '1-2',
+                        title: '铜板(吨)',
+                    },
+                ],
             },
-          ],
-        },
-        {
-          key: '2',
-          title: '停用',
-          children: [
             {
-              key: '2-1',
-              title: 'SHFE-银锭(千克)',
+                key: '2',
+                title: '停用',
+                children: [
+                    {
+                        key: '2-1',
+                        title: 'SHFE-银锭(千克)',
+                    },
+                ],
             },
-          ],
-        },
-      ];
+        ];
 
-    // 控制菜单是否隐藏
-    function collapse(collapsed: boolean) {
-        if (collapsed) {
-            preOpenKeys.value = openKeys.value;
-            openKeys.value = [];
-        } else {
-            openKeys.value = preOpenKeys.value;
+        // 控制菜单是否隐藏
+        function collapse(collapsed: boolean) {
+            if (collapsed) {
+                preOpenKeys.value = openKeys.value;
+                openKeys.value = [];
+            } else {
+                openKeys.value = preOpenKeys.value;
+            }
         }
-    }
 
-    function menuClick(value: any) {
-        console.log(value);
-    }
-    return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick };
-};
+        function menuClick(value: any) {
+            console.log(value);
+        }
+        return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick };
+    };
 
-export default defineComponent({
-    name: 'leftMenu',
-    props: {
-        list: {
-            default: [],
-            type: Object as PropType<Key[]>,
+    export default defineComponent({
+        name: 'leftMenu',
+        props: {
+            list: {
+                default: [],
+                type: Object as PropType<Key[]>,
+            },
+            value: {
+                // 需要绑定的值得 key
+                default: '',
+                type: String,
+            },
         },
-        value: {
-            // 需要绑定的值得 key
-            default: '',
-            type: String,
+        components: {},
+        setup(props, context) {
+            const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick } = handleMenu();
+            const current = ref<string[]>(['0']);
+
+            return {
+                current,
+                menuClick,
+                collapsed,
+                collapse,
+                selectedKeys,
+                openKeys,
+                menuList,
+            };
         },
-    },
-    components: {},
-    setup(props, context) {
-        const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick } = handleMenu();
-        const current = ref<string[]>(['0']);
-        
-        return {
-            current,
-            menuClick,
-            collapsed,
-            collapse,
-            selectedKeys,
-            openKeys,
-            menuList,
-        };
-    },
-});
+    });
 </script>
 
 <style lang="less">
-.leftMenu {
-    height: 100%;
-    ul.ant-menu.ant-menu-inline {
-        background-color: transparent;
-        li.ant-menu-submenu {
-            padding-bottom: 0;
-            .ant-menu-submenu-title {
-                color: @m-grey2;
-                font-size: 16px;
-                height: 45px;
-                line-height: 45px;
-                margin-top: 0;
-                margin-bottom: 0;
-                padding: 0;
-                padding-left: 32px !important;
-                .icon {
-                    font-size: 20px;
-                }
-                .menu-item_title {
-                    display: inline-block;
-                    font-size: 16px;
+    .leftMenu {
+        height: 100%;
+        ul.ant-menu.ant-menu-inline {
+            background-color: transparent;
+            li.ant-menu-submenu {
+                padding-bottom: 0;
+                .ant-menu-submenu-title {
                     color: @m-grey2;
-                }
-                .ant-menu-submenu-arrow {
-                    left: 12px;
-                    color: @m-white0;
-                }
-            }
-            .ant-menu-inline.ant-menu-sub {
-                background-color: transparent;
-                box-shadow: none;
-                .ant-menu-item {
-                    padding-left: 64px !important;
-                    height: 30px;
-                    line-height: 30px;
-                    color: @m-grey2;
-                    font-size: 14px;
+                    font-size: 16px;
+                    height: 45px;
+                    line-height: 45px;
                     margin-top: 0;
                     margin-bottom: 0;
-                    padding-right: 0;
+                    padding: 0;
+                    padding-left: 32px !important;
+                    .icon {
+                        font-size: 20px;
+                    }
+                    .menu-item_title {
+                        display: inline-block;
+                        font-size: 16px;
+                        color: @m-grey2;
+                    }
+                    .ant-menu-submenu-arrow {
+                        left: 12px;
+                        color: @m-white0;
+                    }
+                }
+                .ant-menu-inline.ant-menu-sub {
+                    background-color: transparent;
+                    box-shadow: none;
+                    .ant-menu-item {
+                        padding-left: 64px !important;
+                        height: 30px;
+                        line-height: 30px;
+                        color: @m-grey2;
+                        font-size: 14px;
+                        margin-top: 0;
+                        margin-bottom: 0;
+                        padding-right: 0;
+                    }
                 }
             }
-        }
-        li.ant-menu-submenu-open {
-            .ant-menu-submenu-title {
-                color: @m-white0;
-                .icon {
+            li.ant-menu-submenu-open {
+                .ant-menu-submenu-title {
                     color: @m-white0;
+                    .icon {
+                        color: @m-white0;
+                    }
                 }
-            }
-            .ant-menu-sub {
-                .ant-menu-item.ant-menu-item-selected {
-                    color: @m-blue0;
-                    background-color: transparent;
+                .ant-menu-sub {
+                    .ant-menu-item.ant-menu-item-selected {
+                        color: @m-blue0;
+                        background-color: transparent;
+                    }
                 }
             }
         }
     }
-}       
-.ant-menu-vertical {
-    .ant-menu-submenu-vertical {
-        height: 60px;
-        line-height: 60px;
-        padding: 5px 0;
-        .ant-menu-submenu-title {
-            height: 50px;
-            line-height: 50px;
-            .icon {
-                font-size: 20px;
+    .ant-menu-vertical {
+        .ant-menu-submenu-vertical {
+            height: 60px;
+            line-height: 60px;
+            padding: 5px 0;
+            .ant-menu-submenu-title {
+                height: 50px;
+                line-height: 50px;
+                .icon {
+                    font-size: 20px;
+                }
             }
         }
-    }
-    .ant-menu-submenu {
-        .ant-menu-submenu-title {
-            .menu-item_title {
-                display: none;
+        .ant-menu-submenu {
+            .ant-menu-submenu-title {
+                .menu-item_title {
+                    display: none;
+                }
             }
         }
-    }
-}
-
-</style>;
+    }</style
+>;

src/views/information/goods/components/rightSpot/index.vue

@@ -1,299 +1,301 @@
 <template>
-  <div class="rightSpot">
-    <div class="title">
-        <!-- <a-icon type="gold"/> -->
-        <div class="tltLeft">
-            <span class="blue">铜杆（吨）</span>
-            <span class="green ml10">正常</span>
+    <div class="rightSpot">
+        <div class="title">
+            <!-- <a-icon type="gold"/> -->
+            <div class="tltLeft">
+                <span class="blue">铜杆（吨）</span>
+                <span class="green ml10">正常</span>
+            </div>
+            <div class="tltBtns">
+                <a-button class="blueBtn">修改</a-button>
+                <a-button class="redBtn">停用</a-button>
+            </div>
         </div>
-        <div class="tltBtns">
-            <a-button class="blueBtn">修改</a-button>
-            <a-button class="redBtn">停用</a-button>
-        </div>
-    </div>
-    <div class="spotCont">
-        <a-collapse class="spotCollapse" :bordered="false">
-            <template #expandIcon="props">
-                <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
-                    <use xlink:href="#icon-shouqi1"></use>
-                </svg> 
-                <svg class="icon svg-icon" aria-hidden="true" v-else>
-                    <use xlink:href="#icon-shouqi2"></use>
-                </svg> 
-            </template>
-            <a-collapse-panel key="1">
-                <template #header>
+        <div class="spotCont">
+            <a-collapse class="spotCollapse" :bordered="false">
+                <template #expandIcon="props">
+                    <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
+                        <use xlink:href="#icon-shouqi1"></use>
+                    </svg>
+                    <svg class="icon svg-icon" aria-hidden="true" v-else>
+                        <use xlink:href="#icon-shouqi2"></use>
+                    </svg>
+                </template>
+                <a-collapse-panel key="1">
+                    <template #header>
                         <a-row class="headRow">
                             <a-col :span="8">品类（3）</a-col>
                             <a-col :span="8">单位</a-col>
                             <a-col :span="8">标仓系数</a-col>
                         </a-row>
-                </template>
-                <a-row class="contRow">
-                    <a-col :span="8">10mm</a-col>
-                    <a-col :span="8">吨</a-col>
-                    <a-col :span="8">1.0</a-col>
-                </a-row>
-                <a-row class="contRow">
-                    <a-col :span="8">12mm</a-col>
-                    <a-col :span="8">吨</a-col>
-                    <a-col :span="8">1.1</a-col>
-                </a-row>
-                <a-row class="contRow">
-                    <a-col :span="8">15mm</a-col>
-                    <a-col :span="8">吨</a-col>
-                    <a-col :span="8">1.2</a-col>
-                </a-row>
-            </a-collapse-panel>
-            <a-collapse-panel key="2">
-                <template #header>
-                    <a-row class="headRow">
-                        <a-col :span="24">品牌（2）</a-col>
+                    </template>
+                    <a-row class="contRow">
+                        <a-col :span="8">10mm</a-col>
+                        <a-col :span="8">吨</a-col>
+                        <a-col :span="8">1.0</a-col>
                     </a-row>
-                </template>
-                <a-row class="contRow">
-                    <a-col :span="24">江铜</a-col>
-                </a-row>
-                <a-row class="contRow">
-                    <a-col :span="24">云铜</a-col>
-                </a-row>
-            </a-collapse-panel>
-            <a-collapse-panel key="3">
-                <template #header>
-                    <a-row class="headRow">
-                        <a-col :span="8">套保品种（2）</a-col>
-                        <a-col :span="8">单位</a-col>
-                        <a-col :span="8">套保系数</a-col>
+                    <a-row class="contRow">
+                        <a-col :span="8">12mm</a-col>
+                        <a-col :span="8">吨</a-col>
+                        <a-col :span="8">1.1</a-col>
                     </a-row>
-                </template>
-                <a-row class="contRow">
-                    <a-col :span="8">江铜</a-col>
-                    <a-col :span="8">江铜</a-col>
-                    <a-col :span="8">江铜</a-col>
-                </a-row>
-                <a-collapse default-active-key="4">
-                    <template #expandIcon="props">
-                        <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
-                            <use xlink:href="#icon-shouqi1"></use>
-                        </svg> 
-                        <svg class="icon svg-icon" aria-hidden="true" v-else>
-                            <use xlink:href="#icon-shouqi2"></use>
-                        </svg> 
+                    <a-row class="contRow">
+                        <a-col :span="8">15mm</a-col>
+                        <a-col :span="8">吨</a-col>
+                        <a-col :span="8">1.2</a-col>
+                    </a-row>
+                </a-collapse-panel>
+                <a-collapse-panel key="2">
+                    <template #header>
+                        <a-row class="headRow">
+                            <a-col :span="24">品牌（2）</a-col>
+                        </a-row>
                     </template>
-                    <a-collapse-panel key="4">
-                        <template #header>
-                            <a-row class="headRow">
-                                <a-col :span="8">期货品种（2）</a-col>
-                                <a-col :span="8">单位</a-col>
-                                <a-col :span="8">品种系数</a-col>
-                            </a-row>
-                        </template>
-                        <a-row class="contRow">
-                            <a-col :span="8">江铜</a-col>
-                            <a-col :span="8">江铜</a-col>
-                            <a-col :span="8">江铜</a-col>
+                    <a-row class="contRow">
+                        <a-col :span="24">江铜</a-col>
+                    </a-row>
+                    <a-row class="contRow">
+                        <a-col :span="24">云铜</a-col>
+                    </a-row>
+                </a-collapse-panel>
+                <a-collapse-panel key="3">
+                    <template #header>
+                        <a-row class="headRow">
+                            <a-col :span="8">套保品种（2）</a-col>
+                            <a-col :span="8">单位</a-col>
+                            <a-col :span="8">套保系数</a-col>
                         </a-row>
-                    </a-collapse-panel>
-                </a-collapse>
-                <a-row class="contRow">
-                    <a-col :span="8">江铜</a-col>
-                    <a-col :span="8">江铜</a-col>
-                    <a-col :span="8">江铜</a-col>
-                </a-row>
-                <a-collapse default-active-key="4">
-                    <template #expandIcon="props">
-                        <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
-                            <use xlink:href="#icon-shouqi1"></use>
-                        </svg> 
-                        <svg class="icon svg-icon" aria-hidden="true" v-else>
-                            <use xlink:href="#icon-shouqi2"></use>
-                        </svg> 
                     </template>
-                    <a-collapse-panel key="4">
-                        <template #header>
-                            <a-row class="headRow">
-                                <a-col :span="8">期货品种（2）</a-col>
-                                <a-col :span="8">单位</a-col>
-                                <a-col :span="8">品种系数</a-col>
+                    <a-row class="contRow">
+                        <a-col :span="8">江铜</a-col>
+                        <a-col :span="8">江铜</a-col>
+                        <a-col :span="8">江铜</a-col>
+                    </a-row>
+                    <a-collapse default-active-key="4">
+                        <template #expandIcon="props">
+                            <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
+                                <use xlink:href="#icon-shouqi1"></use>
+                            </svg>
+                            <svg class="icon svg-icon" aria-hidden="true" v-else>
+                                <use xlink:href="#icon-shouqi2"></use>
+                            </svg>
+                        </template>
+                        <a-collapse-panel key="4">
+                            <template #header>
+                                <a-row class="headRow">
+                                    <a-col :span="8">期货品种（2）</a-col>
+                                    <a-col :span="8">单位</a-col>
+                                    <a-col :span="8">品种系数</a-col>
+                                </a-row>
+                            </template>
+                            <a-row class="contRow">
+                                <a-col :span="8">江铜</a-col>
+                                <a-col :span="8">江铜</a-col>
+                                <a-col :span="8">江铜</a-col>
                             </a-row>
+                        </a-collapse-panel>
+                    </a-collapse>
+                    <a-row class="contRow">
+                        <a-col :span="8">江铜</a-col>
+                        <a-col :span="8">江铜</a-col>
+                        <a-col :span="8">江铜</a-col>
+                    </a-row>
+                    <a-collapse default-active-key="4">
+                        <template #expandIcon="props">
+                            <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
+                                <use xlink:href="#icon-shouqi1"></use>
+                            </svg>
+                            <svg class="icon svg-icon" aria-hidden="true" v-else>
+                                <use xlink:href="#icon-shouqi2"></use>
+                            </svg>
                         </template>
-                        <a-row class="contRow">
-                            <a-col :span="8">江铜</a-col>
-                            <a-col :span="8">江铜</a-col>
-                            <a-col :span="8">江铜</a-col>
-                        </a-row>
-                        <a-row class="contRow">
-                            <a-col :span="8">江铜</a-col>
-                            <a-col :span="8">江铜</a-col>
-                            <a-col :span="8">江铜</a-col>
-                        </a-row>
-                    </a-collapse-panel>
-                </a-collapse>
-            </a-collapse-panel>
-        </a-collapse>
+                        <a-collapse-panel key="4">
+                            <template #header>
+                                <a-row class="headRow">
+                                    <a-col :span="8">期货品种（2）</a-col>
+                                    <a-col :span="8">单位</a-col>
+                                    <a-col :span="8">品种系数</a-col>
+                                </a-row>
+                            </template>
+                            <a-row class="contRow">
+                                <a-col :span="8">江铜</a-col>
+                                <a-col :span="8">江铜</a-col>
+                                <a-col :span="8">江铜</a-col>
+                            </a-row>
+                            <a-row class="contRow">
+                                <a-col :span="8">江铜</a-col>
+                                <a-col :span="8">江铜</a-col>
+                                <a-col :span="8">江铜</a-col>
+                            </a-row>
+                        </a-collapse-panel>
+                    </a-collapse>
+                </a-collapse-panel>
+            </a-collapse>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
-import APP from '@/services';
-export default defineComponent({
-    name: 'rightSpot',
-    props: {
-
-    },
-    components: {},
-    setup(props, context) {
-        
-        return {
-            
-        };
-    },
-});
+    import { defineComponent, ref, PropType } from 'vue';
+    import APP from '@/services';
+    import { initData } from '@/common/methods';
+    import { queryDeliveryGoods } from './setup';
+    export default defineComponent({
+        name: 'rightSpot',
+        props: {},
+        components: {},
+        setup(props, context) {
+            const { goodsList } = queryDeliveryGoods({});
+            initData(() => {});
+            return {
+                goodsList,
+            };
+        },
+    });
 </script>
 
 <style lang="less">
-.rightSpot {
-    width: 100%;
-    height: 100%;
-    padding: 10px 12px;
-    .flex;
-    flex-direction: column;
-    .title {
+    .rightSpot {
         width: 100%;
-        height: 35px;
+        height: 100%;
+        padding: 10px 12px;
         .flex;
-        justify-content: space-between;
-        div {
-            align-self: center;
-            align-items: center;
-        }
-        .tltLeft {
-            font-size: 16px;
-        }
-        .tltBtns {
-            .ant-btn+.ant-btn {
-                margin-left: 10px;
+        flex-direction: column;
+        .title {
+            width: 100%;
+            height: 35px;
+            .flex;
+            justify-content: space-between;
+            div {
+                align-self: center;
+                align-items: center;
+            }
+            .tltLeft {
+                font-size: 16px;
+            }
+            .tltBtns {
+                .ant-btn + .ant-btn {
+                    margin-left: 10px;
+                }
             }
         }
-
+        .spotCont {
+            width: 100%;
+            padding: 0 30px;
+        }
     }
-    .spotCont {
-        width: 100%;
-        padding: 0 30px;
+    .blue {
+        color: @m-blue0;
     }
-}
-.blue {
-    color: @m-blue0;
-}
-.green {
-    color: @m-green0;
-}
-.ml10 {
-    margin-left: 10px;
-}
-.blueBtn {
-    width: 80px;
-    height: 26px;
-    text-align: center;
-    background: linear-gradient(0deg, @m-blue2, @m-blue0);
-    box-shadow: -1px 0px 0px 0px #121618;
-    .rounded-corners(3px);
-    border: 0;
-    color: @m-white0;
-    font-size: 14px;
-    &:hover,&:focus {
-         background: linear-gradient(0deg, @m-blue2-hover, @m-blue0-hover);
-         color: @m-white0-hover;
+    .green {
+        color: @m-green0;
     }
-}
-.redBtn {
-    width: 80px;
-    height: 26px;
-    background: linear-gradient(0deg, @m-red0, @m-red1);
-    .rounded-corners(3px);
-    border: 0;
-    color: @m-white0;
-    font-size: 14px;
-    &:hover,&:focus {
-         background: linear-gradient(0deg, @m-red0-hover, @m-red1-hover);
-         color: @m-white0-hover;
+    .ml10 {
+        margin-left: 10px;
     }
-}
-.ant-collapse {
-    background-color: transparent;
-    border: 0;
-    .ant-collapse-item {
+    .blueBtn {
+        width: 80px;
+        height: 26px;
+        text-align: center;
+        background: linear-gradient(0deg, @m-blue2, @m-blue0);
+        box-shadow: -1px 0px 0px 0px #121618;
+        .rounded-corners(3px);
         border: 0;
-        .ant-collapse-header {
-            background-color: transparent;
-            border-bottom: 0;
+        color: @m-white0;
+        font-size: 14px;
+        &:hover,
+        &:focus {
+            background: linear-gradient(0deg, @m-blue2-hover, @m-blue0-hover);
+            color: @m-white0-hover;
         }
-        .ant-collapse-content {
-            background-color: transparent;
-            border-top: 0;
+    }
+    .redBtn {
+        width: 80px;
+        height: 26px;
+        background: linear-gradient(0deg, @m-red0, @m-red1);
+        .rounded-corners(3px);
+        border: 0;
+        color: @m-white0;
+        font-size: 14px;
+        &:hover,
+        &:focus {
+            background: linear-gradient(0deg, @m-red0-hover, @m-red1-hover);
+            color: @m-white0-hover;
         }
     }
-}
-.ant-collapse.spotCollapse.ant-collapse-borderless {
-    margin-top: 10px;
-    background-color: transparent;
-    .ant-collapse-item {
-        border-bottom: 0;
-        .ant-collapse-header {
-            color: @m-grey17;
-            font-size: 14px;
-            border-bottom: 1px solid @m-grey18;
-            padding: 10px 8px 10px 44px;
-            height: 43px;
-            .ant-collapse-arrow {
-                fill: @m-grey17;
-                width: 16px;
-                height: 16px;
-                font-size: 16px;
-                left: 0;
+    .ant-collapse {
+        background-color: transparent;
+        border: 0;
+        .ant-collapse-item {
+            border: 0;
+            .ant-collapse-header {
+                background-color: transparent;
+                border-bottom: 0;
             }
-        }
-        .ant-collapse-content {
-            .ant-collapse-content-box {
-                padding: 0 0 0 30px;
+            .ant-collapse-content {
                 background-color: transparent;
-                .ant-row.contRow {
-                    width: 100%;
-                    height: 40px;
-                    line-height: 40px;
+                border-top: 0;
+            }
+        }
+    }
+    .ant-collapse.spotCollapse.ant-collapse-borderless {
+        margin-top: 10px;
+        background-color: transparent;
+        .ant-collapse-item {
+            border-bottom: 0;
+            .ant-collapse-header {
+                color: @m-grey17;
+                font-size: 14px;
+                border-bottom: 1px solid @m-grey18;
+                padding: 10px 8px 10px 44px;
+                height: 43px;
+                .ant-collapse-arrow {
+                    fill: @m-grey17;
+                    width: 16px;
+                    height: 16px;
                     font-size: 16px;
-                    color: @m-white1;
-                    margin-bottom: 10px;
-                    background: #0F161C;
-                    border: 1px solid #172B56;
-                    border-radius: 3px;
-                    padding-left: 14px;
-                    padding-right: 12px;
-                    .ant-col:last-child {
-                        text-align: right;
+                    left: 0;
+                }
+            }
+            .ant-collapse-content {
+                .ant-collapse-content-box {
+                    padding: 0 0 0 30px;
+                    background-color: transparent;
+                    .ant-row.contRow {
+                        width: 100%;
+                        height: 40px;
+                        line-height: 40px;
+                        font-size: 16px;
+                        color: @m-white1;
+                        margin-bottom: 10px;
+                        background: #0f161c;
+                        border: 1px solid #172b56;
+                        border-radius: 3px;
+                        padding-left: 14px;
+                        padding-right: 12px;
+                        .ant-col:last-child {
+                            text-align: right;
+                        }
+                        .ant-col:first-child {
+                            text-align: left;
+                        }
                     }
-                    .ant-col:first-child {
-                        text-align: left;
+                    .contRow:first-child {
+                        margin-top: 9px;
+                    }
+                    .contRow:last-child {
+                        margin-bottom: 20px;
                     }
-                }
-                .contRow:first-child {
-                    margin-top: 9px;
-                }
-                .contRow:last-child {
-                    margin-bottom: 20px;
                 }
             }
         }
     }
-}
-.ant-row.headRow {
-    .ant-col:first-child {
-        text-align: left;
-    }
-    .ant-col:nth-child(3) {
-        text-align: right;
-    }
-}
-</style>;
+    .ant-row.headRow {
+        .ant-col:first-child {
+            text-align: left;
+        }
+        .ant-col:nth-child(3) {
+            text-align: right;
+        }
+    }</style
+>;

src/views/information/goods/components/rightSpot/setup.ts

@@ -0,0 +1,13 @@
+import { QueryDeliveryGoods } from '@/services/go/ermcp/goodsInfo';
+import { ErmcpDeliveryGoodsReq, ErmcpDeliveryGoodsRsp } from '@/services/go/ermcp/goodsInfo/interface';
+import { reactive, ref } from '@vue/reactivity';
+
+export function queryDeliveryGoods(req: ErmcpDeliveryGoodsReq) {
+    let goodsList = ref<ErmcpDeliveryGoodsRsp[] | []>([]);
+    QueryDeliveryGoods(req).then((res) => {
+        goodsList.value = res;
+    });
+    return {
+        goodsList,
+    };
+}

src/views/information/goods/list/spot-variety/index.vue

@@ -1,72 +1,71 @@
 <template>
-  <!-- 现货品种 -->
-  <div class="spot-variety">
-    <filterCustomTable @search="search">
-      <a-button class="operBtn"
-                @click="addAction">新增</a-button>
-    </filterCustomTable>
-    <div class="spotTableCont">
-      <div class="leftSpot">
-        <leftMenu></leftMenu>
-      </div>
-      <div class="rightCont">
-        <rightSpot></rightSpot>
-      </div>
+    <!-- 现货品种 -->
+    <div class="spot-variety">
+        <filterCustomTable @search="search">
+            <a-button class="operBtn" @click="addAction">新增</a-button>
+        </filterCustomTable>
+        <div class="spotTableCont">
+            <div class="leftSpot">
+                <leftMenu></leftMenu>
+            </div>
+            <div class="rightCont">
+                <rightSpot></rightSpot>
+            </div>
+        </div>
+        <!-- 新增商品 -->
+        <AddGoods />
     </div>
-    <!-- 新增商品 -->
-    <AddGoods />
-  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+    import { defineComponent } from 'vue';
 
-import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
-import leftMenu from '@/views/information/goods/components/leftMenu/index.vue';
-import rightSpot from '@/views/information/goods/components/rightSpot/index.vue';
-import { openModal } from '@/common/setup/modal/index';
-import { initData } from '@/common/methods/index';
-import AddGoods from '@/views/information/goods/components/add/index.vue';
+    import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
+    import leftMenu from '@/views/information/goods/components/leftMenu/index.vue';
+    import rightSpot from '@/views/information/goods/components/rightSpot/index.vue';
+    import { openModal } from '@/common/setup/modal/index';
+    import { initData } from '@/common/methods/index';
+    import AddGoods from '@/views/information/goods/components/add/index.vue';
 
-export default defineComponent({
-    name: 'spot-variety',
-    components: {
-        filterCustomTable,
-        leftMenu,
-        rightSpot,
-        AddGoods,
-    },
-    setup() {
-        const { openAction: addAction } = openModal('addGoods');
-        initData(() => {
-            // 加载数据在这里
-        });
-        return { addAction };
-    },
-});
+    export default defineComponent({
+        name: 'spot-variety',
+        components: {
+            filterCustomTable,
+            leftMenu,
+            rightSpot,
+            AddGoods,
+        },
+        setup() {
+            const { openAction: addAction } = openModal('addGoods');
+            initData(() => {
+                // 加载数据在这里
+            });
+            return { addAction };
+        },
+    });
 </script>
 
 <style lang="less">
-.spot-variety {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    .spotTableCont {
+    .spot-variety {
         width: 100%;
-        height: calc(100% - 45px);
-        overflow-y: auto;
-        .inlineflex;
-        .leftSpot {
-            width: 180px;
-            height: 100%;
-            background: @m-black4;
+        height: 100%;
+        .flex;
+        flex-direction: column;
+        .spotTableCont {
+            width: 100%;
+            height: calc(100% - 45px);
+            overflow-y: auto;
+            .inlineflex;
+            .leftSpot {
+                width: 180px;
+                height: 100%;
+                background: @m-black4;
+            }
+            .rightCont {
+                flex: 1;
+                height: 100%;
+                background: @m-black2;
+            }
         }
-        .rightCont {
-            flex: 1;
-            height: 100%;
-            background: @m-black2;
-        }
-    }
-}
-</style>;
+    }</style
+>;