优化右键

src/App.vue

@@ -1,9 +1,12 @@
 <template>
-  <a-spin :tip="tip"
-          :spinning="spinning"
-          size="large">
-    <router-view />
-  </a-spin>
+  <div class="app-container"
+       @contextmenu.prevent>
+    <a-spin :tip="tip"
+            :spinning="spinning"
+            size="large">
+      <router-view />
+    </a-spin>
+  </div>
 </template>
 
 <script lang="ts">
@@ -127,6 +130,11 @@ export default defineComponent({
 </script>
 
 <style lang="less">
+.app-container {
+    width: 100%;
+    height: auto;
+    min-height: 100%;
+}
 #app {
     width: 100%;
     height: auto;

src/components/contextMenu/contextMenu.vue

@@ -0,0 +1,69 @@
+<template>
+  <ul class="context-menu"
+      v-show="contextMenu.show"
+      :style="{ top: y, left: x }">
+    <li v-for="(item, index) in contextMenu.menuList"
+        :key="index"
+        @click.passive="choose(item.callback)">
+      {{item.lable}}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType, onUnmounted, computed } from 'vue';
+import { ContextMenu } from './interface';
+
+export default defineComponent({
+    name: 'context-menu',
+    props: {
+        contextMenu: {
+            default: {
+                position: { clientX: 0, clientY: 0 },
+                show: false,
+                menuList: [],
+                selectedData: null,
+            },
+            type: Object as PropType<ContextMenu>,
+        },
+    },
+    components: {},
+    setup(props, context) {
+        onUnmounted(() => {});
+        function choose(fn: Function) {
+            context.emit('update', false);
+            fn && fn(props.contextMenu.selectedData);
+        }
+        const x = computed(() => `${props.contextMenu.position.clientX - 10}px`);
+        const y = computed(() => `${props.contextMenu.position.clientY - 10}px`);
+        return { x, y, choose };
+    },
+});
+</script>
+
+<style lang="less">
+.context-menu {
+    min-width: 100px;
+    user-select: none;
+    position: fixed;
+    background-color: #282e34;
+    z-index: 999;
+    border-radius: 2px;
+    border: 1px solid #2e3539;
+    padding-left: 0;
+    list-style: none;
+    margin-bottom: 0;
+    cursor: pointer;
+    li {
+        padding: 6px;
+        color: #88a0ae;
+        font-size: 16px;
+        border-bottom: 1px solid #2e3539;
+        text-align: center;
+        &:hover {
+            color: #e5e5e5;
+            background-color: #343e48;
+        }
+    }
+}
+</style>;

src/components/contextMenu/index.vue

@@ -1,48 +1,60 @@
 <template>
-    <ul class="context-menu"
-        v-show="contextMenu.show"
-        :style="{ top: y, left: x }"
-    >
-        <li v-for="(item, index) in contextMenu.menuList"
-            :key="index"
-            @click.passive="choose(item.callback)"
-        >
-            {{item.lable}}
-        </li>
-    </ul>
+  <!-- 右键 -->
+  <div class="context-menu-container"
+       @contextmenu.prevent="onContextMenu">
+    <slot></slot>
+    <contextMenu :contextMenu="menuContext"
+                 @update="updateContextMenu" />
+  </div>
 </template>
 
 <script lang="ts">
-    import { defineComponent, ref, PropType, onUnmounted, computed} from 'vue';
-    import { ContextMenu } from './interface'
+import { defineComponent, PropType, reactive } from 'vue';
+import contextMenu from './contextMenu.vue';
+import { ContextMenu, MenuItem } from './interface';
 
-    export default defineComponent({
-        name: 'context-menu',
-        props: {
-            contextMenu: {
-                default: {
-                    position: { clientX: 0, clientY: 0 },
-                    show: false,
-                    menuList: [],
-                    selectedData: null,
-                },
-                type: Object as PropType<ContextMenu>,
-            },
+export default defineComponent({
+    name: 'context-menu-container',
+    props: {
+        contextMenuList: {
+            default: [],
+            type: Array as PropType<MenuItem[]>,
         },
-        components: {},
-        setup(props, context) {
-            onUnmounted(() => {
+        tableList: {
+            default: [],
+            type: Array as PropType<any[]>,
+        },
+    },
+    components: {
+        contextMenu,
+    },
+    setup(props) {
+        const menuContext = reactive<ContextMenu>({
+            position: { clientX: 0, clientY: 0 },
+            show: false,
+            menuList: props.contextMenuList,
+            selectedData: null,
+        });
 
-            })
-            function choose(fn: Function) {
-                context.emit('update', false)
-                fn && fn(props.contextMenu.selectedData)
+        function onContextMenu(value: MouseEvent) {
+            const target = value.target as any;
+            // 获取点击表格的 tr  所在的 索引位置
+            const index = target.parentElement.rowIndex;
+            // 过滤右键表头
+            if (index) {
+                const { clientX, clientY } = value;
+                Object.assign(menuContext.position, { clientX, clientY });
+                menuContext.show = true;
+                menuContext.selectedData = props.tableList[index - 1];
             }
-            const x = computed(() => `${props.contextMenu.position.clientX - 10}px`);
-            const y = computed(() => `${props.contextMenu.position.clientY - 10}px`);
-            return {x, y, choose };
-        },
-    });
+        }
+        // 关闭右键弹窗
+        function updateContextMenu(value: boolean) {
+            menuContext.show = value;
+        }
+        return { menuContext, onContextMenu, updateContextMenu };
+    },
+});
 </script>
 
 <style lang="less">

src/components/orderTable/index.vue

@@ -1,137 +1,143 @@
 <template>
-    <div @contextmenu.prevent="onContextMenu">
-        <a-table :columns="columns" :data-source="dataSource" class="order-table" bordered :scroll="{ x: true, y: 400 }" :pagination="false">
-            <template>
-                <a>Delete</a>
-            </template>
-            <template #expandedRowRender="{ record }">
-                <p style="margin: 0">
-                    {{ record.description }}
-                </p>
-            </template>
-        </a-table>
-        <contextMenu :contextMenu="context" @update="updateContextMenu" />
-    </div>
+  <div @contextmenu.prevent="onContextMenu">
+    <a-table :columns="columns"
+             :data-source="dataSource"
+             class="order-table"
+             bordered
+             :scroll="{ x: true, y: 400 }"
+             :pagination="false">
+      <template>
+        <a>Delete</a>
+      </template>
+      <template #expandedRowRender="{ record }">
+        <p style="margin: 0">
+          {{ record.description }}
+        </p>
+      </template>
+    </a-table>
+    <contextMenu :contextMenu="context"
+                 @update="updateContextMenu" />
+  </div>
 </template>
 <script lang="ts">
-    ``;
-    import { defineComponent, reactive, PropType } from 'vue';
-    import contextMenu from '@/components/contextMenu/index.vue';
-    import { ContextMenu, MenuItem } from '@/components/contextMenu/interface';
+import { defineComponent, reactive, PropType } from 'vue';
+import contextMenu from '@/components/contextMenu/index.vue';
+import { ContextMenu, MenuItem } from '@/components/contextMenu/interface';
 
-    // 右键事件
-    function handleContextMenu(props: any) {
-        const context = reactive<ContextMenu>({
-            position: { clientX: 0, clientY: 0 },
-            show: false,
-            menuList: [],
-            selectedData: null,
-        });
-        function onContextMenu(value: MouseEvent) {
-            const target = value.target as any;
-            // 获取点击表格的 tr  所在的 索引位置
-            const index = target.parentElement.rowIndex;
-            const { clientX, clientY } = value;
-            Object.assign(context.position, { clientX, clientY });
-            context.show = true;
-            context.selectedData = props.dataSource[index];
-        }
-        // 关闭右键弹窗
-        function updateContextMenu(value: boolean) {
-            context.show = value;
-        }
-        return { context, onContextMenu, updateContextMenu };
+// 右键事件
+function handleContextMenu(props: any) {
+    const context = reactive<ContextMenu>({
+        position: { clientX: 0, clientY: 0 },
+        show: false,
+        menuList: [],
+        selectedData: null,
+    });
+    function onContextMenu(value: MouseEvent) {
+        const target = value.target as any;
+        // 获取点击表格的 tr  所在的 索引位置
+        const index = target.parentElement.rowIndex;
+        const { clientX, clientY } = value;
+        Object.assign(context.position, { clientX, clientY });
+        context.show = true;
+        context.selectedData = props.dataSource[index];
+    }
+    // 关闭右键弹窗
+    function updateContextMenu(value: boolean) {
+        context.show = value;
     }
+    return { context, onContextMenu, updateContextMenu };
+}
 
-    export default defineComponent({
-        components: {
-            contextMenu,
+export default defineComponent({
+    components: {
+        contextMenu,
+    },
+    props: {
+        columns: {
+            default: [],
+            type: Array,
         },
-        props: {
-            columns: {
-                default: [],
-                type: Array,
-            },
-            dataSource: {
-                default: [],
-                type: Array,
-            },
-            contextMenuList: {
-                default: [],
-                type: Object as PropType<MenuItem[]>,
-            },
+        dataSource: {
+            default: [],
+            type: Array,
         },
-        setup(props) {
-            const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
-            context.menuList = props.contextMenuList;
-            return {
-                onContextMenu,
-                context,
-                updateContextMenu,
-            };
+        contextMenuList: {
+            default: [],
+            type: Object as PropType<MenuItem[]>,
         },
-    });
+    },
+    setup(props) {
+        const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
+        context.menuList = props.contextMenuList;
+        return {
+            onContextMenu,
+            context,
+            updateContextMenu,
+        };
+    },
+});
 </script>
 <style lang="less">
-    .order-table {
-        .ant-table-fixed {
-            width: max-content !important;
-            color: #e5e5e5;
-            background: #0e0e0f;
-            border-top-color: #0e0e0f !important;
-            border-left-color: #161a1c !important;
-        }
-        .ant-table-thead {
-            tr th {
-                background: #212629;
-                color: #556772;
-                font-size: 14px;
-                font-family: Adobe Heiti Std;
-            }
-        }
-        .ant-table-tbody > tr {
-            height: 40px;
-        }
-        .ant-table-tbody .ant-table-row-hover td {
-            background: #172b56 !important;
-        }
-        .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-            background: #172b56;
-        }
-        .ant-table-bordered .ant-table-thead > tr > th,
-        .ant-table-bordered .ant-table-tbody > tr > td {
-            padding: 0;
-            height: 34px;
-            line-height: 34px;
-            border-color: #161a1c;
-            font-family: Adobe Heiti Std;
-            font-size: 16px;
-        }
-        ant-table-bordered .ant-table-thead > tr > th,
-        .ant-table-bordered .ant-table-tbody > tr > td {
-            padding: 0;
-            height: 34px;
-            line-height: 34px;
-            border-color: #161a1c;
+.order-table {
+    .ant-table-fixed {
+        width: max-content !important;
+        color: #e5e5e5;
+        background: #0e0e0f;
+        border-top-color: #0e0e0f !important;
+        border-left-color: #161a1c !important;
+    }
+    .ant-table-thead {
+        tr th {
+            background: #212629;
+            color: #556772;
+            font-size: 14px;
             font-family: Adobe Heiti Std;
-            font-size: 16px;
-        }
-        .ant-table-row-expand-icon {
-            width: 14px;
-            height: 14px;
-            line-height: 9px;
-            border: 1px solid @m-blue2;
-            border-radius: 3px;
-            background: inherit;
-        }
-        .ant-table-row-collapsed::after,
-        .ant-table-row-expanded::after {
-            color: @m-blue2;
         }
+    }
+    .ant-table-tbody > tr {
+        height: 40px;
+    }
+    .ant-table-tbody .ant-table-row-hover td {
+        background: #172b56 !important;
+    }
+    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        background: #172b56;
+    }
+    .ant-table-bordered .ant-table-thead > tr > th,
+    .ant-table-bordered .ant-table-tbody > tr > td {
+        padding: 0;
+        height: 34px;
+        line-height: 34px;
+        border-color: #161a1c;
+        font-family: Adobe Heiti Std;
+        font-size: 16px;
+    }
+    ant-table-bordered .ant-table-thead > tr > th,
+    .ant-table-bordered .ant-table-tbody > tr > td {
+        padding: 0;
+        height: 34px;
+        line-height: 34px;
+        border-color: #161a1c;
+        font-family: Adobe Heiti Std;
+        font-size: 16px;
+    }
+    .ant-table-row-expand-icon {
+        width: 14px;
+        height: 14px;
+        line-height: 9px;
+        border: 1px solid @m-blue2;
+        border-radius: 3px;
+        background: inherit;
+    }
+    .ant-table-row-collapsed::after,
+    .ant-table-row-expanded::after {
+        color: @m-blue2;
+    }
 
-        .ant-table-expanded-row,
-        .ant-table-expanded-row:hover {
-            background: #121618;
-        }
-    }</style
+    .ant-table-expanded-row,
+    .ant-table-expanded-row:hover {
+        background: #121618;
+    }
+}
+</style
 >;

src/components/quoteTable/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div @contextmenu.prevent="onContextMenu" class="quoteTable">
+
+  <contextMenu :contextMenuList="context"
+               :tableList="dataSource">
     <a-table class="quote-table"
              :columns="columns"
              :data-source="dataSource"
@@ -10,38 +12,12 @@
         <a>action</a>
       </template>
     </a-table>
-    <contextMenu :contextMenu="context"
-                 @update="updateContextMenu" />
-  </div>
+  </contextMenu>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, PropType } from 'vue';
+import { defineComponent, ref } from 'vue';
 import contextMenu from '@/components/contextMenu/index.vue';
-import { ContextMenu, MenuItem } from '@/components/contextMenu/interface';
-
-// 右键事件
-function handleContextMenu(props: any) {
-    const context = reactive<ContextMenu>({
-        position: { clientX: 0, clientY: 0 },
-        show: false,
-        menuList: [],
-        selectedData: null,
-    });
-    function onContextMenu(value: MouseEvent) {
-        const target = value.target as any;
-        // 获取点击表格的 tr  所在的 索引位置
-        const index = target.parentElement.rowIndex;
-        const { clientX, clientY } = value;
-        Object.assign(context.position, { clientX, clientY });
-        context.show = true;
-        context.selectedData = props.dataSource[index];
-    }
-    // 关闭右键弹窗
-    function updateContextMenu(value: boolean) {
-        context.show = value;
-    }
-    return { context, onContextMenu, updateContextMenu };
-}
+import { MenuItem } from '@/components/contextMenu/interface';
 
 export default defineComponent({
     components: {
@@ -56,18 +32,18 @@ export default defineComponent({
             default: [],
             type: Array,
         },
-        contextMenuList: {
-            default: [],
-            type: Object as PropType<MenuItem[]>,
-        },
     },
     setup(props) {
-        const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
-        context.menuList = props.contextMenuList;
+        const contextMenuList = ref<MenuItem[]>([
+            {
+                lable: '修改',
+                callback: () => {
+                    console.log('lll');
+                },
+            },
+        ]);
         return {
-            onContextMenu,
-            context,
-            updateContextMenu,
+            contextMenuList,
         };
     },
 });
@@ -82,7 +58,6 @@ export default defineComponent({
     height: 100%;
     .ant-spin-nested-loading {
         .ant-spin-container {
-
         }
     }
     .ant-table td {
@@ -93,7 +68,8 @@ export default defineComponent({
             width: 100px;
         }
     }
-    .ant-table-fixed,.ant-table-body {
+    .ant-table-fixed,
+    .ant-table-body {
         .ant-table-row-hover {
             td.ant-table-row-cell-break-word {
                 background-color: @m-blue3 !important;

src/layout/top.vue

@@ -1,7 +1,6 @@
 <template>
   <a-layout class="layout-top">
-    <a-layout-header class="m-layout-header"
-                     @contextmenu.prevent>
+    <a-layout-header class="m-layout-header">
       <div>
         <img src="../assets/images/logoHeader.png" />
         <span>深圳市多元世纪信息技术股份有限公司</span>

src/views/information/custom/list/normal-use/index.vue

@@ -4,19 +4,22 @@
        :loading="loading">
     <filterCustomTable @add="add"
                        @search="search" />
-    <a-table :columns="columns"
-             :pagination="false"
-             rowKey="key"
-             :data-source="customList">
-      <template #userinfotype="{ text }">
-        <a>{{ text === '2' ? '企业' : '个人'}}</a>
-      </template>
-    </a-table>
+    <contextMenu :contextMenuList="contextMenuList"
+                 :tableList="customList">
+      <a-table :columns="columns"
+               :pagination="false"
+               rowKey="key"
+               :data-source="customList">
+        <template #userinfotype="{ text }">
+          <a>{{ text === '2' ? '企业' : '个人'}}</a>
+        </template>
+      </a-table>
+    </contextMenu>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 import { initData } from '@/setup/methods/index';
 import { QueryCustomInfo } from '@/goServiceAPI/ermcp/customInfo/index';
@@ -25,6 +28,8 @@ import filterCustomTable from '@/views/information/custom/compoments/filterTable
 import { getTableHead, ColumnType } from '@/services/bus/table';
 import { message } from 'ant-design-vue';
 import { useRouter } from 'vue-router';
+import { MenuItem } from '@/components/contextMenu/interface';
+import contextMenu from '@/components/contextMenu/index.vue';
 
 // 查询客户资料列表
 function getCustomList() {
@@ -109,15 +114,26 @@ export default defineComponent({
     name: 'custom-normal',
     components: {
         filterCustomTable,
+        contextMenu,
     },
     setup() {
         const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
+
+        const contextMenuList = ref<MenuItem[]>([
+            {
+                lable: '修改',
+                callback: (data: QueryCustomInfoType) => {
+                    console.log('data', data);
+                    console.log('lll');
+                },
+            },
+        ]);
         initData(() => {
             actionQuery();
             getColumns();
             // 加载数据在这里
         });
-        return { customList, columns, search, loading, add };
+        return { customList, columns, search, loading, add, contextMenuList };
     },
 });
 </script>

src/views/information/custom/list/stop-use/index.vue

@@ -1,83 +1,130 @@
 <template>
-  <!-- 客户信息: 停用 -->
-  <div class="custom-stop">
-    客户信息: 停用
+  <!-- 客户信息: 正常 -->
+  <div class="custom-normal"
+       :loading="loading">
+    <filterCustomTable @add="add"
+                       @search="search" />
+    <div>
+      <a-table :columns="columns"
+               :pagination="false"
+               rowKey="key"
+               :data-source="customList">
+        <template #userinfotype="{ text }">
+          <a>{{ text === '2' ? '企业' : '个人'}}</a>
+        </template>
+      </a-table>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, Ref, ref } from 'vue';
+
+import { initData } from '@/setup/methods/index';
 import { QueryCustomInfo } from '@/goServiceAPI/ermcp/customInfo/index';
 import { QueryCustomInfoType } from '@/goServiceAPI/ermcp/customInfo/interface';
+import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
+import { getTableHead, ColumnType } from '@/services/bus/table';
 import { message } from 'ant-design-vue';
-import { initData } from '@/setup/methods/index';
+import { useRouter } from 'vue-router';
 
 // 查询客户资料列表
 function getCustomList() {
-    // const filteredInfo = ref();
-    // const sortedInfo = ref();
-    // const columns = computed(() => {
-    //     const filtered = filteredInfo.value || {};
-    //     const sorted = sortedInfo.value || {};
-    //     return [
-    //         {
-    //             title: '序号',
-    //             dataIndex: 'index',
-    //             key: 'index',
-    //             align: 'center',
-    //             width: 50,
-    //             customRender: (param: any) => `${param.index + 1}`,
-    //         },
-    //         {
-    //             title: 'Age',
-    //             dataIndex: 'age',
-    //             key: 'age',
-    //             sorter: (a: DataItem, b: DataItem) => a.age - b.age,
-    //             sortOrder: sorted.columnKey === 'age' && sorted.order,
-    //         },
-    //         {
-    //             title: 'Address',
-    //             dataIndex: 'address',
-    //             key: 'address',
-    //             filters: [
-    //                 { text: 'London', value: 'London' },
-    //                 { text: 'New York', value: 'New York' },
-    //             ],
-    //             filteredValue: filtered.address || null,
-    //             onFilter: (value: string, record: DataItem) => record.address.includes(value),
-    //             sorter: (a: DataItem, b: DataItem) => a.address.length - b.address.length,
-    //             sortOrder: sorted.columnKey === 'address' && sorted.order,
-    //             ellipsis: true,
-    //         },
-    //     ];
-    // });
+    const router = useRouter();
+    const pathArr = router.currentRoute.value.fullPath.split('/');
+    console.log('pathArr', pathArr);
+
+    // 表格数据
     const customList = ref<QueryCustomInfoType[]>([]);
+    // 表头数据
+    const columns = ref<ColumnType[]>([]);
+    // 过滤项
+    const filteredInfo = ref();
+    const loading = ref<boolean>(false);
+    // 获取表头
+    function getColumns() {
+        const list = getTableHead('table_pcweb_userinfo');
+        const filtered = filteredInfo.value || {};
+        columns.value.length = 0;
+        list.forEach((e, i) => {
+            const { columnfield, columntitle, aligntype } = e;
+            const item: ColumnType = {
+                key: String(i),
+                dataIndex: columnfield, // 表格数据对应的key
+                title: columntitle,
+                align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right',
+                slots: { customRender: columnfield },
+            };
+            // 以下添加过滤数据对应的方法
+            if (e.columntitle === '客户类型') {
+                item.onFilter = (value: string, record: QueryCustomInfoType) => record.userinfotype.includes(String(value));
+                item.filteredValue = filtered.userinfotype || null;
+            }
+            if (e.columntitle === '客户简称') {
+                item.onFilter = (value: string, record: QueryCustomInfoType) => record.nickname.includes(value);
+                item.filteredValue = filtered.nickname || null;
+            }
+            if (e.columntitle === '客户名称') {
+                item.onFilter = (value: string, record: QueryCustomInfoType) => record.contactname.includes(value);
+                item.filteredValue = filtered.contactname || null;
+            }
+            if (e.columntitle === '手机号码') {
+                item.onFilter = (value: string, record: QueryCustomInfoType) => record.mobile.includes(value);
+                item.filteredValue = filtered.mobile || null;
+            }
+            columns.value.push(item);
+        });
+        console.log('columns', columns);
+    }
+    // 查询列表
     function actionQuery() {
-        QueryCustomInfo(4)
+        loading.value = true;
+        QueryCustomInfo(3)
             .then((res) => {
-                console.log('L', res);
+                customList.value = res.map((e, i) => {
+                    return { ...e, key: String(i) };
+                });
+                loading.value = false;
+                console.log('查询列表', customList);
             })
-            .catch((err) => message.error(err));
+            .catch((err) => {
+                message.error(err);
+                loading.value = false;
+            });
+    }
+    // 查询
+    function search(value: any) {
+        filteredInfo.value = value;
+        getColumns();
+        console.log('search', value);
     }
+    return { customList, actionQuery, columns, filteredInfo, getColumns, search, loading };
+}
 
-    return { customList, actionQuery };
+// 处理新增资料
+
+function add() {
+    console.log('add');
 }
 
 export default defineComponent({
-    name: 'custom-stop',
-    components: {},
+    name: 'custom-normal',
+    components: {
+        filterCustomTable,
+    },
     setup() {
-        const { customList, actionQuery } = getCustomList();
+        const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
         initData(() => {
             actionQuery();
+            getColumns();
             // 加载数据在这里
         });
-        return { customList };
+        return { customList, columns, search, loading, add };
     },
 });
 </script>
 
 <style lang="less">
-.custom-stop {
+.custom-normal {
 }
 </style>;

src/views/search/outaccount_status/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="account-status"
-       @contextmenu.prevent>
+  <div class="account-status">
     <firstMenu :list="menulist"
                :value="'value'"
                @selectMenu="selectMenu" />