修改控制弹窗逻辑

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://192.168.31.175:8080/cfg?key=test_175"
+    "apiUrl": "http://192.168.31.114:8080/cfg?key=test_114"
 }

src/components/drawer/index.vue

@@ -1,18 +1,16 @@
 <template>
   <div class="drawer">
-   <a-drawer
-      :placement="placement"
-      :closable="false"
-      :visible="visible"
-      @close="onClose"
-      class="bottom"
-    >
-      <div class="collapse"></div>
+    <a-drawer :placement="placement"
+              :closable="false"
+              :visible="visible"
+              class="bottom">
+      <div class="collapse"
+           @click="cancel"></div>
       <div class="collapseCont">
-          <div class="title">{{ title }}</div>
-          <div class="content">
+        <div class="title">{{ title }}</div>
+        <div class="content">
 
-          </div>
+        </div>
       </div>
     </a-drawer>
   </div>
@@ -20,6 +18,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, PropType } from 'vue';
+import { closeModal, ModalName } from '@/setup/controlModal/index';
 
 interface Key {
     [propName: string]: string;
@@ -28,32 +27,26 @@ interface Key {
 export default defineComponent({
     name: 'drawer',
     props: {
+        modalName: {
+            default: 'drawer',
+            type: String as PropType<keyof ModalName>,
+        },
         title: {
             default: '',
-            type: String
-        },
-        visible: {
-            default: true,
-            type: Boolean,
+            type: String,
         },
         placement: {
             // 需要绑定的值得 key
             default: 'right',
             type: String,
         },
-        onClose: {
-            default: () => {},
-            type: Function
-        }
     },
     components: {},
     setup(props, context) {
-        // let vis = ref(1);
-        // function onClose(visib: boolean) {
-        //     props.visible.value = visib;
-        // }
+        const { visible, cancel, handleOk } = closeModal(props.modalName);
         return {
-            // vis
+            visible,
+            cancel,
         };
     },
 });

src/layout/index.vue

@@ -7,15 +7,12 @@
       </div>
       <LayoutBottom />
     </template>
-    <Drawer 
-    :title="'挂牌'"
-    :visible="visible"></Drawer>
   </div>
 </template>
 <script lang="ts">
 import LayoutTop from './top.vue';
 import LayoutBottom from './bottom.vue';
-import Drawer from '@/components/drawer/index.vue';
+
 import { defineComponent, ref } from 'vue';
 
 // 控制下半部分是否显示
@@ -32,15 +29,12 @@ export default defineComponent({
     components: {
         LayoutTop,
         LayoutBottom,
-        Drawer
     },
     setup() {
         const { isShowBottomPart, chooseMenu } = submitBottomIsShow();
         const visible = ref<boolean>(true);
-        // function close(flag: boolean){
-        //   visible = flag;
-        // }
-        return { isShowBottomPart, chooseMenu, visible, close };
+
+        return { isShowBottomPart, chooseMenu, visible };
     },
 });
 </script>

src/layout/top.vue

@@ -3,11 +3,11 @@
     <a-layout-header class="m-layout-header"
                      @contextmenu.prevent>
       <div>
-          <img src="../assets/images/logoHeader.png"/>
-          <span>深圳市多元世纪信息技术股份有限公司</span>
+        <img src="../assets/images/logoHeader.png" />
+        <span>深圳市多元世纪信息技术股份有限公司</span>
       </div>
       <div class="m-layout-header-right">
-        <div>
+        <div @click="openDrawer">
           <span>{{ username }}，您好！</span>
         </div>
         <div class="relative">
@@ -20,16 +20,15 @@
           <!-- <a-icon type="search" /> -->
         </div>
         <div class="news-container">
-          <!-- <a-badge 
-                   @click="chooseSetMenu('notice')">
+          <a-badge @click="openNotice">
             <svg class="icon svg-icon"
                  aria-hidden="true">
               <use xlink:href="#icon-xiaoxi"></use>
             </svg>
-          </a-badge> -->
+          </a-badge>
         </div>
         <div>
-          <!-- <a-popover v-model:visible="visible"
+          <a-popover v-model:visible="visible"
                      trigger="click"
                      placement="bottomRight">
             <template #content>
@@ -42,7 +41,7 @@
                 <UserOutlined />
               </template>
             </a-avatar>
-          </a-popover> -->
+          </a-popover>
           <Setting />
         </div>
       </div>
@@ -79,6 +78,8 @@
         </a-menu>
       </a-layout-sider>
       <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+        <Drawer :title="'挂牌'"
+                :visible="visible"></Drawer>
         <router-view />
       </a-layout-content>
     </a-layout>
@@ -93,6 +94,8 @@ import SecondMenu from '@/components/secondeMenu/index.vue';
 import APP from '@/services';
 import { initData } from '@/setup/methods/index';
 import { useRouter } from 'vue-router';
+import { openModal } from '@/setup/controlModal/index';
+import Drawer from '@/components/drawer/index.vue';
 
 // 菜单栏
 const handleMenu = () => {
@@ -189,11 +192,16 @@ const handleMenu = () => {
     return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, fontIcon };
 };
 
+function testAction() {
+    const { openAction } = openModal('drawer');
+    return { openDrawer: openAction };
+}
+
 // 设置
 const setFn = () => {
     const visible = ref<boolean>(false);
     const chooseSetupItem = ref<string>('');
-    provide('setting', chooseSetupItem);
+    provide('ControlModal', chooseSetupItem);
     const setMenu = [
         // { name: '修改密码', path: 'password' },
         // { name: '收货地址', path: 'addresss' },
@@ -202,8 +210,10 @@ const setFn = () => {
         // { name: '关于我们', path: 'aboutUs' },
         { name: '退出', path: 'logout' },
     ];
+    const { openAction } = openModal('logout');
     function chooseSetMenu(path: string) {
-        chooseSetupItem.value = path;
+        // chooseSetupItem.value = path;
+        openAction();
         console.log(path);
         visible.value = false;
     }
@@ -222,6 +232,11 @@ function setShowBottomPart(code: string): boolean {
     const unShow = ['outaccount_status'];
     return !unShow.includes(code);
 }
+// 控制消息弹窗
+function controlNotice() {
+    const { openAction } = openModal('notice');
+    return { openNotice: openAction };
+}
 export default defineComponent({
     name: 'layout-top',
     components: {
@@ -229,10 +244,13 @@ export default defineComponent({
         UserOutlined,
         CapitalInfo,
         SecondMenu,
+        Drawer,
     },
     setup(props, context) {
         const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, fontIcon } = handleMenu();
         const router = useRouter();
+        // 控制消息弹窗
+        const { openNotice } = controlNotice();
 
         initData(() => {
             // 处理路由跳转到菜单栏里第一个对应的页面
@@ -245,6 +263,9 @@ export default defineComponent({
                 router.push(code);
             }
         });
+
+        const { openDrawer } = testAction();
+
         const { visible, setMenu, chooseSetMenu } = setFn();
         const username = APP.get('username');
         const { search } = onSearch();
@@ -261,6 +282,10 @@ export default defineComponent({
             setMenu,
             chooseSetMenu,
             fontIcon,
+
+            openNotice,
+
+            openDrawer,
         };
     },
 });
@@ -280,11 +305,11 @@ export default defineComponent({
         padding: 0 20px;
         .flex();
         justify-content: space-between;
-            img {
-                margin-right: 16px;
-                width: 20px;
-                height: 20px;
-            }
+        img {
+            margin-right: 16px;
+            width: 20px;
+            height: 20px;
+        }
         .searchInput.ant-input-affix-wrapper {
             width: 240px;
             height: 30px;

src/router/index.ts

@@ -30,7 +30,7 @@ const routes: Array<RouteRecordRaw> = [
                 component: () => import('@/views/home.vue'),
             },
             {
-                path: '/forward',
+                path: '/futures',
                 name: 'forward',
                 component: () => import('@/views/market/forward/index.vue'),
 

src/setup/controlModal/controlModal.ts

@@ -0,0 +1,55 @@
+import { inject, provide, ref, watchEffect } from 'vue';
+import { ModalName } from './interface';
+
+// 控制弹窗
+
+
+/**
+ * 控制关闭弹窗
+ * @param modelName 相对应的弹窗组件名
+ * @returns 
+ */
+export function closeModal(modelName: keyof ModalName) {
+    // 控制弹窗 flag
+    const visible = ref<boolean>(false);
+    const show = inject(modelName, ref<boolean>(false))
+    watchEffect(() => {
+        visible.value = show.value
+    })
+    /**
+     * 取消弹窗
+     */
+    function cancel() {
+        visible.value = false;
+        show.value = false
+    }
+    /**
+     * 带有回调函数关闭弹窗
+     * @param callback 
+     */
+    function handleOk(callback: Function) {
+        cancel();
+        callback && callback()
+    }
+    return { visible, cancel, handleOk }
+}
+
+/**
+ * 控制打开弹窗
+ * @param modelName 相对应的弹窗组件名
+ * @returns openAction 打开弹窗方法
+ */
+export function openModal(modelName: keyof ModalName) {
+    const name = ref<boolean>(false)
+    provide(modelName, name);
+    /**
+     * 打开弹窗
+     * @param value 弹窗名
+     */
+    function openAction() {
+        name.value = true;
+    }
+    return { openAction }
+}
+
+export type { ModalName };

src/setup/controlModal/index.ts

@@ -0,0 +1,8 @@
+
+import { closeModal, ModalName, openModal } from './controlModal';
+
+export { closeModal, openModal };
+export type { ModalName };
+
+
+

src/setup/controlModal/interface.ts

@@ -0,0 +1,6 @@
+// 弹窗名
+export interface ModalName {
+    notice: string; // 消息
+    logout: string; // 退出登录
+    drawer: string; // 下单通用界面
+}

src/views/market/forward/index.vue

@@ -7,11 +7,11 @@
     <quoteTable :columns="columns"
                 :dataSource="data"
                 :contextMenuList="contextMenuList" />
-    <firstMenu :list="list"
+    <!-- <firstMenu :list="list"
                :value="'value'"
                @selectMenu="selectMenu" />
     <orderTable :columns="orderCulums"
-                :dataSource="data" />
+                :dataSource="data" /> -->
   </section>
 </template>
 

src/views/setting/index.vue

@@ -1,23 +1,25 @@
 <template>
-    <div class="setup">
-        <Notice />
-    </div>
+  <div class="setup">
+    <Notice />
+    <Logout />
+  </div>
 </template>
 
 <script lang="ts">
-    import { defineComponent, ref} from 'vue';
-    import Notice from './notice/index.vue';
+import { defineComponent, ref } from 'vue';
+import Notice from './notice/index.vue';
+import Logout from './logout/index.vue';
 
-    export default defineComponent({
-        name: 'setup',
-        components: {
-            Notice,
-        },
-        setup() {
-            return {
-            };
-        },
-    });
+export default defineComponent({
+    name: 'setup',
+    components: {
+        Notice,
+        Logout,
+    },
+    setup() {
+        return {};
+    },
+});
 </script>
 
 <style lang="less"></style>;

src/views/setting/logout/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <a-modal class="logout"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px"
+           :footer="null"
+           @ok="handleOk">
+    <div>logout</div>
+    <div>logout</div>
+    <div>logout</div>
+    <div>logout</div>
+    <div>logout</div>
+    <div>logout</div>
+    <div>logout</div>
+    <div>logout</div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/setup/controlModal/index';
+import { initData } from '@/setup/methods/index';
+
+export default defineComponent({
+    name: 'logout',
+
+    setup() {
+        const { visible, cancel, handleOk } = closeModal('logout');
+
+        initData(() => {});
+        return {
+            visible,
+            cancel,
+            handleOk,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.logout {
+    .ant-tabs {
+        width: 100%;
+        .ant-tabs-bar {
+            border-bottom-color: #192125;
+            margin-bottom: 0;
+        }
+        .ant-tabs-tab {
+            width: 140px;
+            text-align: center;
+            margin-right: 0;
+        }
+        .ant-tabs-nav {
+            height: 50px;
+            font-size: 16px;
+            color: #88a0ae;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            .ant-tabs-tab-active {
+                color: #ffffff;
+                background: linear-gradient(0deg, #3163ba 0%, #4179db 100%);
+            }
+        }
+        .ant-tabs-ink-bar {
+            display: none !important;
+        }
+    }
+    .ant-modal-close-x {
+        height: 50px;
+        line-height: 50px;
+        svg {
+            color: #7a8a94;
+        }
+    }
+    .ant-modal-body {
+        padding: 0;
+        background: #252d34;
+    }
+}
+</style
+>;

src/views/setting/notice/index.vue

@@ -1,31 +1,38 @@
 <template>
-    <a-modal class="notice" v-model:visible="visible" @cancel="cancel" width="890px" :footer="null" @ok="handleOk">
-        <a-tabs v-model:activeKey="activeKey">
-            <a-tab-pane key="1">
-                <template #tab>
-                    <span>
-                        公告
-                        <a-badge count="25" :number-style="{ backgroundColor: '#FF9000' }" />
-                    </span>
-                </template>
-                <NoticeContent :noticeList="noticeList" />
-            </a-tab-pane>
-            <a-tab-pane key="2">
-                <template #tab>
-                    <span>
-                        系统消息
-                        <a-badge count="25" :number-style="{ backgroundColor: '#FF9000' }" />
-                    </span>
-                </template>
-                <NoticeContent />
-            </a-tab-pane>
-        </a-tabs>
-    </a-modal>
+  <a-modal class="notice"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px"
+           :footer="null"
+           @ok="handleOk">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1">
+        <template #tab>
+          <span>
+            公告
+            <a-badge count="25"
+                     :number-style="{ backgroundColor: '#FF9000' }" />
+          </span>
+        </template>
+        <NoticeContent :noticeList="noticeList" />
+      </a-tab-pane>
+      <a-tab-pane key="2">
+        <template #tab>
+          <span>
+            系统消息
+            <a-badge count="25"
+                     :number-style="{ backgroundColor: '#FF9000' }" />
+          </span>
+        </template>
+        <NoticeContent />
+      </a-tab-pane>
+    </a-tabs>
+  </a-modal>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { controlModal } from '@/views/setting/setup';
+import { closeModal } from '@/setup/controlModal/index';
 import NoticeContent from './components/noticeContent.vue';
 import { initData } from '@/setup/methods/index';
 import { queryNotice } from '@/goServiceAPI/commonService/index';
@@ -37,7 +44,7 @@ export default defineComponent({
         NoticeContent,
     },
     setup() {
-        const { visible, cancel, handleOk } = controlModal('notice');
+        const { visible, cancel, handleOk } = closeModal('notice');
         // 公告消息
         const noticeList = ref<queryNoticeRsp[]>([]);
 

src/views/setting/setup.ts

@@ -1,23 +0,0 @@
-import { ref, inject, watchEffect} from 'vue';
-// 控制弹窗
-/**
- *
- * @param modelName 相对应的弹窗组件名
- * @returns
- */
-export function controlModal(modelName: string) {
-    const visible = ref<boolean>(false);
-    const show = inject('setting', ref(''))
-    watchEffect(() => {
-        visible.value = show.value === modelName ? true : false;
-    })
-    function cancel() {
-        visible.value = false;
-        show.value = ''
-    }
-    function handleOk(callback: Function) {
-        cancel();
-        callback && callback()
-    }
-    return {visible, cancel, handleOk}
-}