fix: POD US order add contextmenu

ce3d6f24 · qinjianhui · 14ddd000 · ce3d6f24 · ce3d6f24 · 14ddd000
Commit ce3d6f24 authored Jun 12, 2025 by qinjianhui
Showing with 127 additions and 64 deletions

components.d.ts
+2 -0

src/components/TableRightClickMenu.vue
+90 -0

src/components/TableRightMenu.vue
+0 -62

src/components/TableView.vue
+26 -1

src/views/order/podUs/index.vue
+9 -1

No files found.
--- a/components.d.ts
+++ b/components.d.ts
@@ -58,12 +58,14 @@ declare module 'vue' {
    LogList: typeof import('./src/components/LogList.vue')['default']
    NavMenu: typeof import('./src/components/NavMenu.vue')['default']
    RenderColumn: typeof import('./src/components/RenderColumn.vue')['default']
+    RightClickMenu: typeof import('./src/components/TableRightClickMenu.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    Select: typeof import('./src/components/Form.vue/Select.vue')['default']
    ShipmentOrderDetail: typeof import('./src/components/ShipmentOrderDetail.vue')['default']
    SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
    'Switch ': typeof import('./src/components/Form.vue/Switch .vue')['default']
+    TableRightClickMenu: typeof import('./src/components/TableRightClickMenu.vue')['default']
    TableRightMenu: typeof import('./src/components/TableRightMenu.vue')['default']
    TableView: typeof import('./src/components/TableView.vue')['default']
    UploadExcel: typeof import('./src/components/UploadExcel.vue')['default']

--- a/src/components/TableRightClickMenu.vue
+++ b/src/components/TableRightClickMenu.vue
+<template>
+  <div
+    v-show="visible"
+    class="right-click-menu"
+    :style="{ left: position.x + 'px', top: position.y + 'px' }"
+  >
+    <div class="menu-item" @click="handleSelectAll">全选</div>
+    <div class="menu-item" @click="handleUnselectAll">取消全选</div>
+    <div class="menu-item" @click="handleCopyShopNumbers">复制店铺单号</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineExpose, onMounted, onUnmounted } from 'vue'
+import type { TableInstance } from 'element-plus'
+const visible = ref(false)
+const position = ref({ x: 0, y: 0 })
+const tableRef = ref<TableInstance>()
+const emit = defineEmits(['copyShopNumbers'])
+const setPosition = ({ x, y, el }: { x: number; y: number; el: TableInstance }) => {
+  position.value = { x, y }
+  visible.value = true
+  tableRef.value = el
+}
+const handleSelectAll = () => {
+  if (tableRef.value) {
+    tableRef.value.toggleAllSelection()
+  }
+  visible.value = false
+}
+const handleUnselectAll = () => {
+  if (tableRef.value) {
+    tableRef.value.clearSelection()
+  }
+  visible.value = false
+}
+const handleCopyShopNumbers = () => {
+  emit('copyShopNumbers')
+  visible.value = false
+}
+// 点击其他地方关闭菜单
+const handleClickOutside = () => {
+  if (visible.value) {
+    visible.value = false
+  }
+}
+// 监听全局点击事件
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+defineExpose({
+  setPosition
+})
+</script>
+<style scoped>
+.right-click-menu {
+  position: fixed;
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 3000;
+}
+.menu-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+}
+.menu-item:hover {
+  background-color: #f5f7fa;
+  color: #409eff;
+}
+</style> 
\ No newline at end of file
--- a/src/components/TableRightMenu.vue
+++ b/src/components/TableRightMenu.vue
-<template>
-  <div
-    v-if="tableRightMenuVisible"
-    class="table-right-menu"
-    :style="{
-      left: rightMenuOptions.contextMenuX + 'px',
-      top: rightMenuOptions.contextMenuY + 'px',
-    }"
-  >
-    <div
-      class="table-right-menu-item"
-      @click="handleChange('copy_shop_number')"
-    >
-      <span>复制店铺单号</span>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-defineProps({
-  tableRightMenuVisible: {
-    type: Boolean,
-    default: false,
-  },
-})
-const emit = defineEmits(['onCopyChange'])
-const handleChange = (type: string) => {
-  emit('onCopyChange', type)
-}
-const rightMenuOptions = ref({
-  contextMenuX: 0,
-  contextMenuY: 0,
-})
-const setRightMenuOptions = (options: {
-  contextMenuX: number
-  contextMenuY: number
-}) => {
-  rightMenuOptions.value = options
-}
-defineExpose({
-  setRightMenuOptions,
-})
-</script>
-<style lang="scss" scoped>
-.table-right-menu {
-  position: fixed;
-  z-index: 1000;
-  border: 1px solid #ccc;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  padding: 6px;
-}
-.table-right-menu-item {
-  padding: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  &:hover {
-    background-color: #f0f0f0;
-  }
-}
-</style>
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -8,6 +8,7 @@
      v-bind="attrs"
      header-align="center"
      height="100%"
+      @contextmenu.prevent="handleContextMenu"
    >
      <ElTableColumn
        v-if="selectionable"
@@ -57,14 +58,23 @@
        </RenderColumn>
      </template>
    </ElTable>
+    <RightClickMenu
+      @copy-shop-numbers="emit('copyShopNumbers')"
+      ref="rightMenuRef"
+    />
  </div>
 </template>
 <script setup lang="tsx" generic="T">
 import { type Slot, useAttrs, useSlots, type PropType, shallowRef } from 'vue'
 import type { CustomColumn } from '@/types/table'
 import RenderColumn from './RenderColumn.vue'
+import RightClickMenu from './TableRightClickMenu.vue'
 import { ElTable } from 'element-plus'
-const tableRef = shallowRef<InstanceType<typeof ElTable>>()
+import type { TableInstance } from 'element-plus'
+const tableRef = shallowRef<TableInstance>()
+const rightMenuRef = shallowRef<InstanceType<typeof RightClickMenu>>()
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 defineProps({
  paginatedData: {
@@ -88,14 +98,28 @@ defineProps({
    default: false,
  },
 })
 const attrs = useAttrs()
 const slots = useSlots() as Record<string, Slot>
+const emit = defineEmits(['copyShopNumbers'])
+const handleContextMenu = (e: MouseEvent) => {
+  if (rightMenuRef.value && tableRef.value) {
+    rightMenuRef.value.setPosition({
+      x: e.clientX,
+      y: e.clientY,
+      el: tableRef.value,
+    })
+  }
+}
 const setCurrentRow = (row: T) => {
  tableRef.value?.setCurrentRow(row)
 }
 const toggleRowSelection = (row: T, selected: boolean = true) => {
  tableRef.value?.toggleRowSelection(row, selected)
 }
 const clearSelection = () => {
  tableRef.value?.clearSelection()
 }
@@ -112,5 +136,6 @@ defineExpose({
 .table-view {
  height: 100%;
  overflow: hidden;
+  position: relative;
 }
 </style>
--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -364,6 +364,7 @@
          :paginated-data="tableData"
          :cell-style="onCellStyle"
          @selection-change="handleSelectionChange"
+          @copy-shop-numbers="handleCopyShopNumbers"
        >
          <template #goods="{ row }">
            <div class="goods-info-box">
@@ -2486,7 +2487,14 @@ onMounted(() => {
  loadProductionClient()
  loadWarehouseList()
 })
+const handleCopyShopNumbers = () => {
+  const shopNumbers = (tableData.value as PodUsOrderListData[])
+    .map((item) => item.shopNumber)
+    .join(',')
+  navigator.clipboard.writeText(shopNumbers).then(() => {
+    ElMessage.success('店铺单号已复制到剪贴板')
+  })
+}
 const handleExceptionCommand = (command: number) => {
  exceptionStatus.value = command
  search()