commit

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

@@ -0,0 +1,123 @@
+<template>
+  <!-- 过滤现货品种表格 -->
+  <div class="filter-custom-table">
+    <a-input v-model:value="nickname"
+             class="tableConditionInput"
+             placeholder="模糊搜索现货品种" />
+    <a-button class="selectBtn"
+              @click="search">搜索</a-button>
+    <!-- <a-button class="selectBtn"
+              @click="reset">重置</a-button> -->
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, SetupContext } from 'vue';
+
+// 搜索
+function handleSearch(context: SetupContext) {
+    const nickname = ref<string>('');
+    const name = ref<string>('');
+    const phone = ref<string>('');
+    interface Value {
+        key: string;
+        value: string;
+    }
+    let useType = '';
+    const userinfotype = ref<number>(0);
+    function handleChange(value: Value) {
+        useType = value.value;
+        search();
+    }
+    function search() {
+        const result = { nickname: [nickname.value], name: [name.value], mobile: [phone.value], userinfotype: [useType] };
+        context.emit('search', result);
+    }
+    function reset() {
+        nickname.value = '';
+        name.value = '';
+        phone.value = '';
+        userinfotype.value = 0;
+        useType = '';
+        search();
+    }
+
+    return { nickname, name, phone, search, reset, userinfotype, handleChange };
+}
+
+export default defineComponent({
+    name: 'filter-custom-table',
+    components: {},
+    setup(props, context) {
+        return {
+            ...handleSearch(context),
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.filter-custom-table {
+    width: 100%;
+    display: inline-flex;
+    padding-top: 9px;
+    padding-bottom: 6px;
+}
+.tableConditionInput {
+    margin-left: 3px;
+}
+.ant-select-single:not(.ant-select-customize-input) {
+    margin-right: 10px;
+    // background: #252D34;
+    // .rounded-corners(3px);
+    .ant-select-selector {
+        height: 30px;
+        padding: 0 8px;
+        background: @m-grey9;
+        border: none;
+        .rounded-corners(3px);
+        color: @m-grey10;
+        .ant-select-arrow {
+            right: 8px;
+            color: @m-grey1;
+        }
+    }
+    .ant-select-arrow {
+        color: @m-grey1;
+    }
+    .ant-select-selection-item {
+        color: @m-white1;
+    }
+}
+.conditionSelect + .conditionSelect {
+    margin-left: 10px;
+}
+.selectBtn.ant-btn {
+    margin-left: 10px;
+    width: 80px;
+    height: 30px;
+    line-height: 31px;
+    text-align: center;
+    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    .rounded-corners(3px);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+}
+.operBtn.ant-btn:extend(.selectBtn.ant-btn) {
+    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+}
+</style>;

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

@@ -0,0 +1,188 @@
+<template>
+  <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>
+                        <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
+                    </span>
+                </template>
+                <a-menu-item :key="subItem.code" v-for="subItem in item.children">
+                    <span>{{ subItem.title }}</span>
+                </a-menu-item>
+            </a-sub-menu>
+        </a-menu>
+  </div>
+</template>
+
+<script lang="ts">
+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: 'SHFE-沪银(千克)',
+            },
+            {
+              key: '1-2',
+              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 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[]>,
+        },
+        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,
+        };
+    },
+});
+</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;
+                    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 {
+                    color: @m-white0;
+                }
+            }
+            .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-submenu {
+        .ant-menu-submenu-title {
+            .menu-item_title {
+                display: none;
+            }
+        }
+    }
+}
+
+</style>;

src/views/information/goods/index.vue

@@ -31,5 +31,7 @@ export default defineComponent({
 
 <style lang="less">
 .goods-info {
+  width: 100%;
+  height: calc(100% - 40px);
 }
 </style>;

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

@@ -1,18 +1,33 @@
 <template>
   <!-- 现货品种 -->
   <div class="spot-variety">
-    现货品种
+    <filterCustomTable @search="search">
+        <a-button class="operBtn" @click="openAction">新增</a-button>
+    </filterCustomTable>
+    <div class="spotTableCont">
+      <div class="leftSpot">
+       <leftMenu></leftMenu>
+      </div>
+      <div class="rightSpot">
+
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 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 { initData } from '@/setup/methods/index';
 
 export default defineComponent({
     name: 'spot-variety',
-    components: {},
+    components: {
+      filterCustomTable,
+      leftMenu
+    },
     setup() {
         initData(() => {
             // 加载数据在这里
@@ -24,5 +39,23 @@ export default defineComponent({
 
 <style lang="less">
 .spot-variety {
+  width: 100%;
+  height: 100%;
+  .spotTableCont {
+    width: 100%;
+    height: calc(100% - 45px);
+    overflow-y: auto;
+    .leftSpot {
+      width: 180px;
+      height: 100%;
+      background: @m-black4;
+    }
+    .rightSpot {
+      flex: 1;
+      height: 100%;
+      max-width: calc(100% - 180px);
+      background: @m-black2;
+    }
+  }
 }
 </style>;