fix: 鼠标右键事件修改

7f7897ef · qinjianhui · 54cf2234 · 7f7897ef · 7f7897ef · 7f7897ef
Commit 7f7897ef authored Jun 12, 2025 by qinjianhui
7 changed files
--- a/components.d.ts
+++ b/components.d.ts
@@ -57,6 +57,7 @@ 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/RightClickMenu.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    Select: typeof import('./src/components/Form.vue/Select.vue')['default']

--- a/src/components/TableRightClickMenu.vue
+++ b/src/components/TableRightClickMenu.vue
@@ -4,48 +4,54 @@
    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="onChangeCopy('select-all')">全部选择</div>
-    <div class="menu-item" @click="handleUnselectAll">取消全选</div>
+    <div class="menu-item" @click="onChangeCopy('cancel-select')">取消选择</div>
-    <div class="menu-item" @click="onChangeCopy('shop-numbers')">
+    <div
+      v-if="showCopySubShopNumber"
+      class="menu-item"
+      @click="onChangeCopy('copy_code')"
+    >
+      复制生产单号
+    </div>
+    <div
+      v-if="showCopyShopNumber"
+      class="menu-item"
+      @click="onChangeCopy('copy_shopNumber')"
+    >
      复制店铺单号
    </div>
+    <div v-if="showCopyCount" class="menu-item" @click="onChangeCopy('count')">
+      统计数量
+    </div>
+    <slot></slot>
  </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(['onChange'])
-const setPosition = ({
-  x,
-  y,
-  el,
-}: {
-  x: number
-  y: number
-  el: TableInstance
-}) => {
-  position.value = { x, y }
-  visible.value = true
-  tableRef.value = el
-}
-const handleSelectAll = () => {
+defineProps({
-  if (tableRef.value) {
+  showCopyShopNumber: {
-    tableRef.value.toggleAllSelection()
+    type: Boolean,
-  }
+    default: true,
-  visible.value = false
+  },
-}
+  showCopyCount: {
+    type: Boolean,
+    default: true,
+  },
+  showCopySubShopNumber: {
+    type: Boolean,
+    default: true,
+  },
+})
-const handleUnselectAll = () => {
+const setPosition = ({ x, y }: { x: number; y: number }) => {
-  if (tableRef.value) {
+  position.value = { x, y }
-    tableRef.value.clearSelection()
+  visible.value = true
-  }
-  visible.value = false
 }
 const onChangeCopy = (value: string) => {
@@ -74,7 +80,7 @@ defineExpose({
 })
 </script>
-<style scoped>
+<style scoped lang="scss">
 .right-click-menu {
  position: fixed;
  background: white;
@@ -84,15 +90,19 @@ defineExpose({
  z-index: 3000;
 }
-.menu-item {
+.right-click-menu {
-  padding: 8px 16px;
+  :deep(.menu-item) {
-  cursor: pointer;
+    padding: 8px 16px;
-  font-size: 14px;
+    cursor: pointer;
-  color: #606266;
+    font-size: 14px;
+    color: #606266;
+  }
 }
-.menu-item:hover {
+.right-click-menu {
-  background-color: #f5f7fa;
+  :deep(.menu-item):hover {
-  color: #409eff;
+    background-color: #f5f7fa;
+    color: #409eff;
+  }
 }
 </style>
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -8,7 +8,6 @@
      v-bind="attrs"
      header-align="center"
      height="100%"
-      @contextmenu.prevent="handleContextMenu"
    >
      <ElTableColumn
        v-if="selectionable"
@@ -58,19 +57,16 @@
        </RenderColumn>
      </template>
    </ElTable>
-    <RightClickMenu ref="rightMenuRef" @on-change="onChange" />
  </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'
 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({
@@ -98,19 +94,7 @@ defineProps({
 const attrs = useAttrs()
 const slots = useSlots() as Record<string, Slot>
-const emit = defineEmits(['onChange'])
-const handleContextMenu = (e: MouseEvent) => {
-  if (rightMenuRef.value && tableRef.value) {
-    rightMenuRef.value.setPosition({
-      x: e.clientX,
-      y: e.clientY,
-      el: tableRef.value,
-    })
-  }
-}
-const onChange = (type: string) => {
-  emit('onChange', type)
-}
 const setCurrentRow = (row: T) => {
  tableRef.value?.setCurrentRow(row)
 }
@@ -122,12 +106,16 @@ const toggleRowSelection = (row: T, selected: boolean = true) => {
 const clearSelection = () => {
  tableRef.value?.clearSelection()
 }
+const toggleAllSelection = () => {
+  tableRef.value?.toggleAllSelection()
+}
 defineExpose({
  tableRef,
  setCurrentRow,
  toggleRowSelection,
  clearSelection,
+  toggleAllSelection,
 })
 </script>

--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -976,11 +976,12 @@
  >
    <OrderDetail :order-detail-data="orderDetailData" />
  </ElDrawer>
-  <RightMenu
+  <RightClickMenu
    ref="rightMenuRef"
-    :show-copy-count="false"
+    :show-copy-shop-number="true"
-    :show-copy-sub-shop-number="statusCode !== 6"
+    :show-copy-count="true"
-    @change="onChange"
+    :show-copy-sub-shop-number="true"
+    @on-change="rightChange"
  />
 </template>
 <script setup lang="ts">
@@ -1037,7 +1038,7 @@ import OrderDetail from './OrderDetail.vue'
 import useShipment from './hook/useShipment'
 import useQuarantine from './hook/useQuarantine'
 import Quarantine from './Quarantine.vue'
-import RightMenu from './pod/rightMenu.vue'
+import RightClickMenu from '@/components/RightClickMenu.vue'
 const [searchForm] = useValue<SearchForm>({
  mainSku: '',
@@ -1670,14 +1671,14 @@ const handleContextMenu = (e: MouseEvent) => {
 }
 const tableQaRef = ref()
 const tableRef = ref()
-const onChange = (key: string) => {
+const rightChange = (key: string) => {
-  if (key === 'check_all') {
+  if (key === 'select-all') {
    if (statusCode.value === 6) {
      tableQaRef.value?.toggleAllSelection()
    } else {
      tableRef.value?.toggleAllSelection()
    }
-  } else if (key === 'clear_check') {
+  } else if (key === 'cancel-select') {
    if (statusCode.value === 6) {
      tableQaRef.value?.clearSelection()
    } else {
@@ -1685,7 +1686,7 @@ const onChange = (key: string) => {
    }
  } else if (key === 'copy_code') {
    const shopNumberList: string[] = []
-    for (const item of selection.value) {
+    for (const item of tableData.value) {
      item.productList?.forEach((el) => {
        if (el.shopNumber) {
          shopNumberList.push(el.shopNumber)
@@ -1696,7 +1697,7 @@ const onChange = (key: string) => {
  } else if (key === 'copy_shopNumber') {
    const subOrderNumber: string[] = []
    if (statusCode.value === 6) {
-      for (const item of selection.value) {
+      for (const item of tableData.value) {
        item.detailList?.forEach((el) => {
          if (el.shopNumber) {
            subOrderNumber.push(el.shopNumber || '')
@@ -1704,7 +1705,7 @@ const onChange = (key: string) => {
        })
      }
    } else {
-      for (const item of selection.value) {
+      for (const item of tableData.value) {
        item.productList?.forEach((el) => {
          if (el.subOrderNumber) {
            subOrderNumber.push(el.subOrderNumber)

--- a/src/views/order/pod/index.vue
+++ b/src/views/order/pod/index.vue
@@ -590,8 +590,10 @@
        v-loading="loading"
        element-loading-text="加载中..."
        class="order-list flex-1 overflow-hidden"
+        @contextmenu.prevent="(v) => rightClick(v, null)"
      >
        <TableView
+          ref="tableRef"
          :paginated-data="tableData"
          :columns="tableColumns"
          :selectionable="true"
@@ -973,15 +975,20 @@
      基版 <b>{{ cardItem?.baseSku }}</b> 的统计数量为：<b> {{ count }}</b>
    </p>
  </el-dialog>
-  <right-menu
+  <RightClickMenu
    ref="rightMenuRef"
-    :show-copy-shop-number="
+    :show-copy-shop-number="true"
-      ['IN_PRODUCTION', 'TO_BE_CONFIRMED', 'WAIT_SHIPMENT'].includes(status)
-    "
    :show-copy-count="
-      ['IN_PRODUCTION', 'TO_BE_CONFIRMED', 'WAIT_SHIPMENT'].includes(status)
+      [
+        'IN_PRODUCTION',
+        'TO_BE_CONFIRMED',
+        'WAIT_SHIPMENT',
+        'TO_BE_REPLENISHMENT',
+        'INVALID',
+      ].includes(status)
    "
-    @change="rightChange"
+    :show-copy-sub-shop-number="true"
+    @on-change="rightChange"
  />
  <fastProduction
    v-model:detailVisible="detailVisible"
@@ -1058,7 +1065,6 @@
 </template>
 <script setup lang="tsx">
 // refreshJMProductInfo,reasonInvalidationApi,
-import RightMenu from './rightMenu.vue'
 import {
  getOrderTabData,
  getOrderList,
@@ -1120,6 +1126,7 @@ import { filePath } from '@/api/axios'
 import { CustomColumn } from '@/types/table'
 import LogList from '@/components/LogList.vue'
 import CommonCard from '@/components/CommonCard.vue'
+import RightClickMenu from '@/components/RightClickMenu.vue'
 const tableRef = ref()
 const loading = ref(false)
 const currentPage = ref(1)
@@ -1154,13 +1161,14 @@ const completeShipmentForm = ref({
  logisticsTracking: '', // 物流跟踪号
  carriageAmount: '', // 物流费用
 })
-const rightClick = (e: MouseEvent, item: PodProductList | CardOrderData) => {
+const rightClick = (
-  cardItem.value = item
+  e: MouseEvent,
+  item: PodProductList | CardOrderData | null,
+) => {
+  cardItem.value = item || undefined
  rightMenuRef.value.setPosition({
    x: e.clientX,
    y: e.clientY,
-    cardItem: e.clientY,
-    el: e,
  })
 }
 const handleSizeChange = (size: number) => {
@@ -1172,10 +1180,14 @@ const handleCurrentChange = (page: number) => {
  loadDiffList()
 }
 const rightChange = async (code: string) => {
-  const flag = ['IN_PRODUCTION', 'TO_BE_CONFIRMED', 'WAIT_SHIPMENT'].includes(
+  const flag = [
-    status.value,
+    'IN_PRODUCTION',
-  )
+    'TO_BE_CONFIRMED',
-  if (code === 'check_all') {
+    'WAIT_SHIPMENT',
+    'TO_BE_REPLENISHMENT',
+    'INVALID',
+  ].includes(status.value)
+  if (code === 'select-all') {
    if (flag) {
      selection.value = JSON.parse(JSON.stringify(CardOrderList.value))
    } else {
@@ -1184,17 +1196,35 @@ const rightChange = async (code: string) => {
      }
      // selection.value = JSON.parse(JSON.stringify(tableData.value))
    }
-  } else if (code === 'clear_check') {
+  } else if (code === 'cancel-select') {
    selection.value = []
    tableRef.value?.tableRef.toggleAllSelection()
  } else if (code === 'copy_code') {
-    const str = selection.value
+    let str
-      .map((item) => item.factorySubOrderNumber || item.factoryOrderNumber)
+    if (flag) {
-      .join()
+      str = CardOrderList.value.map((item) => item.factorySubOrderNumber).join()
-    navigator.clipboard.writeText(str)
+    } else {
+      str = tableData.value
+        .map((item) => item.productList)
+        .flat()
+        .map((item) => item?.factorySubOrderNumber)
+        .filter((item) => item)
+        .join()
+    }
+    navigator.clipboard.writeText(str || '')
    ElMessage.success('复制成功')
  } else if (code === 'copy_shopNumber') {
-    const str = selection.value.map((item) => item.shopNumber).join()
+    let str
+    if (flag) {
+      str = CardOrderList.value.map((item) => item.shopNumber).join()
+    } else {
+      str = tableData.value
+        .map((item) => item.productList)
+        .flat()
+        .map((item) => item?.shopNumber)
+        .filter((item) => item)
+        .join()
+    }
    navigator.clipboard.writeText(str)
    ElMessage.success('复制成功')
  } else if (code === 'count') {

--- a/src/views/order/pod/rightMenu.vue
+++ b/src/views/order/pod/rightMenu.vue
-<template>
-  <!-- <div  class="wrap" @click="close"> -->
-  <div v-if="show" ref="right_menu" class="right_menu">
-    <button @click="$emit('change', 'check_all')">全部选择</button>
-    <button @click="$emit('change', 'clear_check')">取消选择</button>
-    <button v-if="showCopySubShopNumber" @click="$emit('change', 'copy_code')">
-      复制选中生产单号
-    </button>
-    <button
-      v-if="showCopyShopNumber"
-      @click="$emit('change', 'copy_shopNumber')"
-    >
-      复制选中店铺单号
-    </button>
-    <button v-if="showCopyCount" @click="$emit('change', 'count')">
-      统计数量
-    </button>
-  </div>
-  <!-- </div> -->
-</template>
-<script setup lang="ts">
-import { ref, defineProps, defineExpose } from 'vue'
-interface E {
-  x: number
-  el: HTMLElement
-  y: number
-}
-defineProps({
-  showCopyShopNumber: {
-    type: Boolean,
-    default: true,
-  },
-  showCopyCount: {
-    type: Boolean,
-    default: true,
-  },
-  showCopySubShopNumber: {
-    type: Boolean,
-    default: true,
-  },
-})
-const row = ref()
-const show = ref(false)
-const right_menu = ref<HTMLElement>()
-const close = () => {
-  show.value = false
-  document.body.onclick = null
-}
-const setPosition = (o: E) => {
-  console.log(o)
-  show.value = true
-  const clientX = o.x
-  const x = document.body.clientWidth - clientX
-  document.body.onclick = function () {
-    close()
-  }
-  row.value = setTimeout(() => {
-    if (!right_menu.value) return
-    if (x < 150) {
-      right_menu.value.style.cssText = `top:${o.y}px;right:${x}px`
-    } else {
-      right_menu.value.style.cssText = `top:${o.y}px;left:${o.x}px`
-    }
-  }, 1)
-}
-defineExpose({
-  setPosition,
-})
-</script>
-<style scoped>
-.wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.right_menu {
-  position: fixed;
-  max-width: 200px;
-  min-height: 50px;
-  background: #fff;
-  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
-  border-radius: 5px;
-  overflow: hidden;
-  z-index: 999;
-  /* left: -500px; */
-  top: -500px;
-}
-.right_menu button {
-  display: block;
-  line-height: 30px;
-  font-size: 14px;
-  padding: 0 15px;
-  text-align: left;
-  width: 100%;
-  cursor: pointer;
-}
-.right_menu button:hover {
-  background: rgb(65, 192, 251);
-  color: white;
-}
-button {
-  outline: none;
-  border: none;
-}
-</style>
--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -354,6 +354,7 @@
        v-loading="loading"
        element-loading-text="加载中..."
        class="table-wrapper flex-1 flex-column overflow-hidden"
+        @contextmenu.prevent="(v) => rightClick(v)"
      >
        <TableView
          ref="tableRef"
@@ -364,7 +365,6 @@
          :paginated-data="tableData"
          :cell-style="onCellStyle"
          @selection-change="handleSelectionChange"
-          @on-change="onChange"
        >
          <template #goods="{ row }">
            <div class="goods-info-box">
@@ -907,11 +907,18 @@
      ></ElPagination>
    </div>
  </div>
-  <right-menu
+  <RightClickMenu
    ref="rightMenuRef"
    :show-copy-count="false"
-    @change="rightChange"
+    :show-copy-sub-shop-number="false"
-  />
+    @on-change="rightChange"
+  >
+    <template #default
+      ><div class="menu-item" @click="rightChange('order-number')">
+        复制订单号
+      </div>
+    </template>
+  </RightClickMenu>
  <el-dialog
    v-model="confirmDialogShow"
    :close-on-click-modal="false"
@@ -1242,7 +1249,7 @@ import PodMakeOrder from './PodMakeOrder.vue'
 import { OrderData } from '@/types/api/podMakeOrder'
 import useLodop, { LODOPObject } from '@/utils/hooks/useLodop'
 import dayjs from 'dayjs'
-import rightMenu from '../pod/rightMenu.vue'
+import RightClickMenu from '@/components/RightClickMenu.vue'
 import ResultInfo from './components/ResultInfo.vue'
 import { isArray, isString } from '@/utils/validate'
 import platformJson from '../../../json/platform.json'
@@ -1406,8 +1413,6 @@ const rightClick = (e: MouseEvent) => {
  rightMenuRef.value.setPosition({
    x: e.clientX,
    y: e.clientY,
-    cardItem: e.clientY,
-    el: e,
  })
 }
@@ -1872,18 +1877,29 @@ const isSelectStatused = (data: ProductList) => {
  return index !== -1
 }
 const rightChange = async (code: string) => {
-  if (code === 'check_all') {
+  const flat = status.value !== 'IN_PRODUCTION'
-    cardSelection.value = JSON.parse(JSON.stringify(tableData.value))
+  if (code === 'select-all') {
-  } else if (code === 'clear_check') {
+    if (flat) {
-    cardSelection.value = []
+      tableRef.value?.toggleAllSelection()
-  } else if (code === 'copy_code') {
+    } else {
-    const str = cardSelection.value
+      cardSelection.value = JSON.parse(JSON.stringify(tableData.value))
-      .map((item) => item.factorySubOrderNumber)
+    }
+  } else if (code === 'cancel-select') {
+    if (flat) {
+      tableRef.value?.clearSelection()
+    } else {
+      cardSelection.value = []
+    }
+  } else if (code === 'copy_shopNumber') {
+    const str = (tableData.value as ProductList[] | PodUsOrderListData[])
+      .map((item) => item?.shopNumber)
      .join()
    navigator.clipboard.writeText(str)
    ElMessage.success('复制成功')
-  } else if (code === 'copy_shopNumber') {
+  } else if (code === 'order-number') {
-    const str = cardSelection.value.map((item) => item.shopNumber).join()
+    const str = (tableData.value as ProductList[] | PodUsOrderListData[])
+      .map((item) => item?.factoryOrderNumber)
+      .join()
    navigator.clipboard.writeText(str)
    ElMessage.success('复制成功')
  }
@@ -2491,21 +2507,11 @@ onMounted(() => {
  loadProductionClient()
  loadWarehouseList()
 })
-const onChange = (value: string) => {
-  if (value === 'shop-numbers') {
-    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()
 }
 </script>
 <style lang="scss" scoped>
 .header-filter-form {