fix: 表格加右击事件

a291be25 · qinjianhui · ce3d6f24 · a291be25 · a291be25 · a291be25
Commit a291be25 authored Jun 12, 2025 by qinjianhui
7 changed files
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,7 +32,6 @@ declare module 'vue' {
    ElImage: typeof import('element-plus/es')['ElImage']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElOption: typeof import('element-plus/es')['ElOption']
@@ -58,7 +57,6 @@ 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']
@@ -66,7 +64,6 @@ declare module 'vue' {
    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']
    UploadImage: typeof import('./src/components/UploadImage.vue')['default']

--- a/src/components/TableRightClickMenu.vue
+++ b/src/components/TableRightClickMenu.vue
@@ -6,7 +6,9 @@
  >
    <div class="menu-item" @click="handleSelectAll">全选</div>
    <div class="menu-item" @click="handleUnselectAll">取消全选</div>
-    <div class="menu-item" @click="handleCopyShopNumbers">复制店铺单号</div>
+    <div class="menu-item" @click="onChangeCopy('shop-numbers')">
+      复制店铺单号
+    </div>
  </div>
 </template>
@@ -14,12 +16,19 @@
 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 emit = defineEmits(['onChange'])
-const setPosition = ({ x, y, el }: { x: number; y: number; el: TableInstance }) => {
+const setPosition = ({
+  x,
+  y,
+  el,
+}: {
+  x: number
+  y: number
+  el: TableInstance
+}) => {
  position.value = { x, y }
  visible.value = true
  tableRef.value = el
@@ -39,8 +48,8 @@ const handleUnselectAll = () => {
  visible.value = false
 }
-const handleCopyShopNumbers = () => {
+const onChangeCopy = (value: string) => {
-  emit('copyShopNumbers')
+  emit('onChange', value)
  visible.value = false
 }
@@ -61,7 +70,7 @@ onUnmounted(() => {
 })
 defineExpose({
-  setPosition
+  setPosition,
 })
 </script>
@@ -86,4 +95,4 @@ defineExpose({
  background-color: #f5f7fa;
  color: #409eff;
 }
-</style> 
+</style>
\ No newline at end of file
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -58,10 +58,7 @@
        </RenderColumn>
      </template>
    </ElTable>
-    <RightClickMenu
+    <RightClickMenu ref="rightMenuRef" @on-change="onChange" />
-      @copy-shop-numbers="emit('copyShopNumbers')"
-      ref="rightMenuRef"
-    />
  </div>
 </template>
 <script setup lang="tsx" generic="T">
@@ -101,7 +98,7 @@ defineProps({
 const attrs = useAttrs()
 const slots = useSlots() as Record<string, Slot>
-const emit = defineEmits(['copyShopNumbers'])
+const emit = defineEmits(['onChange'])
 const handleContextMenu = (e: MouseEvent) => {
  if (rightMenuRef.value && tableRef.value) {
    rightMenuRef.value.setPosition({
@@ -111,7 +108,9 @@ const handleContextMenu = (e: MouseEvent) => {
    })
  }
 }
+const onChange = (type: string) => {
+  emit('onChange', type)
+}
 const setCurrentRow = (row: T) => {
  tableRef.value?.setCurrentRow(row)
 }

--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -271,9 +271,11 @@
            v-loading="loading"
            element-loading-text="加载中..."
            class="order-list flex-1 overflow-hidden"
+            @contextmenu.prevent="handleContextMenu"
          >
            <ElTable
              v-show="statusCode !== 6"
+              ref="tableRef"
              :data="tableData"
              :span-method="arraySpanMethod"
              default-expand-all
@@ -597,6 +599,7 @@
            </ElTable>
            <ElTable
              v-show="statusCode === 6"
+              ref="tableQaRef"
              :data="tableData"
              :span-method="arraySpanMethod"
              default-expand-all
@@ -973,6 +976,12 @@
  >
    <OrderDetail :order-detail-data="orderDetailData" />
  </ElDrawer>
+  <RightMenu
+    ref="rightMenuRef"
+    :show-copy-count="false"
+    :show-copy-sub-shop-number="statusCode !== 6"
+    @change="onChange"
+  />
 </template>
 <script setup lang="ts">
 import Shipment from './Shipment.vue'
@@ -990,7 +999,12 @@ import type {
 } from '@/types/api/order'
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import useElTableColumnWidth from '@/utils/hooks/useElTableColumnWidth'
-import { ArrowDown, ArrowUp, DocumentCopy, EditPen } from '@element-plus/icons-vue'
+import {
+  ArrowDown,
+  ArrowUp,
+  DocumentCopy,
+  EditPen,
+} from '@element-plus/icons-vue'
 import usePageList from '@/utils/hooks/usePageList'
 import {
  getOrderList,
@@ -1023,6 +1037,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'
 const [searchForm] = useValue<SearchForm>({
  mainSku: '',
@@ -1644,7 +1659,65 @@ const cancelOrder = async (id: number) => {
    // showError(e)
  }
 }
+const rightMenuRef = ref()
+const handleContextMenu = (e: MouseEvent) => {
+  rightMenuRef.value?.setPosition({
+    x: e.clientX,
+    y: e.clientY,
+    cardItem: e.clientY,
+    el: e,
+  })
+}
+const tableQaRef = ref()
+const tableRef = ref()
+const onChange = (key: string) => {
+  if (key === 'check_all') {
+    if (statusCode.value === 6) {
+      tableQaRef.value?.toggleAllSelection()
+    } else {
+      tableRef.value?.toggleAllSelection()
+    }
+  } else if (key === 'clear_check') {
+    if (statusCode.value === 6) {
+      tableQaRef.value?.clearSelection()
+    } else {
+      tableRef.value?.clearSelection()
+    }
+  } else if (key === 'copy_code') {
+    const shopNumberList: string[] = []
+    for (const item of selection.value) {
+      item.productList?.forEach((el) => {
+        if (el.shopNumber) {
+          shopNumberList.push(el.shopNumber)
+        }
+      })
+    }
+    copy(shopNumberList.join(','))
+  } else if (key === 'copy_shopNumber') {
+    const subOrderNumber: string[] = []
+    if (statusCode.value === 6) {
+      for (const item of selection.value) {
+        item.detailList?.forEach((el) => {
+          if (el.shopNumber) {
+            subOrderNumber.push(el.shopNumber || '')
+          }
+        })
+      }
+    } else {
+      for (const item of selection.value) {
+        item.productList?.forEach((el) => {
+          if (el.subOrderNumber) {
+            subOrderNumber.push(el.subOrderNumber)
+          }
+        })
+      }
+    }
+    copy(subOrderNumber.join(','))
+  } else if (key === 'count') {
+    const count = selection.value.length
+    copy(count.toString())
+  }
+}
 const onChangeCurrentRow = (item: ProductList) => {
  currentRow.value = item
 }

--- a/src/views/order/pod/index.vue
+++ b/src/views/order/pod/index.vue
@@ -231,7 +231,12 @@
          v-if="['TO_BE_CONFIRMED', 'IN_PRODUCTION'].includes(status)"
          class="item"
        >
-          <ElButton :loading="syncLoading" type="warning" is-dark @click="synchronousPlan">
+          <ElButton
+            :loading="syncLoading"
+            type="warning"
+            is-dark
+            @click="synchronousPlan"
+          >
            同步素材图</ElButton
          >
        </span>
@@ -481,7 +486,7 @@
                          "
                        >
                          {{ cardItem?.processName }}
-                        </span> 
+                        </span>
                      </el-col>
                      <el-col
                        :span="12"
@@ -544,11 +549,10 @@
                        >
                          <img width="20" src="@/assets/images/id.png" />
                          <el-tooltip :content="cardItem?.productionFileId">
-                             <span class="over-hidden" title="素材ID">
+                            <span class="over-hidden" title="素材ID">
-                            {{ cardItem?.productionFileId }}
+                              {{ cardItem?.productionFileId }}
-                          </span>
+                            </span>
                          </el-tooltip>
                        </a>
                      </el-col>
                      <el-col
@@ -594,7 +598,7 @@
          default-expand-all
          :span-method="arraySpanMethod"
          @selection-change="handleSelectionChange"
-          @contextmenu.prevent="handleContextMenu"
+          @on-change="onChange"
        >
          <template #expand="{ row }">
            <div v-if="row.productList" class="table-expand">
@@ -974,6 +978,9 @@
    :show-copy-shop-number="
      ['IN_PRODUCTION', 'TO_BE_CONFIRMED', 'WAIT_SHIPMENT'].includes(status)
    "
+    :show-copy-count="
+      ['IN_PRODUCTION', 'TO_BE_CONFIRMED', 'WAIT_SHIPMENT'].includes(status)
+    "
    @change="rightChange"
  />
  <fastProduction
@@ -986,11 +993,6 @@
    @on-success="handleSuccess"
    @close="fastClose"
  ></fastProduction>
-  <table-right-menu
-    ref="tableRightMenuRef"
-    :table-right-menu-visible="tableRightMenuVisible"
-    @on-copy-change="onCopyChange"
-  />
  <el-dialog
    v-model="completeShipmentVisible"
    title="完成发货"
@@ -1105,7 +1107,6 @@ import {
  SearchForm,
  Tab,
  LogListData,
  PodProductList,
  cardImages,
  imageAryInter,
@@ -1825,7 +1826,9 @@ const synchronousPlan = async () => {
    return
  }
  try {
-    const res = await syncSubOrderDesignImages(selection.value.map(item=>item.id))
+    const res = await syncSubOrderDesignImages(
+      selection.value.map((item) => item.id),
+    )
    await loadDiffList()
    await loadTabData()
    syncLoading.value = false
@@ -2161,10 +2164,8 @@ const invalidOrder = async (row: ProductList) => {
    }
  })
 }
-const tableRightMenuVisible = ref(false)
+const onChange = (type: string) => {
-const tableRightMenuRef = ref()
+  if (type === 'shop-numbers') {
-const onCopyChange = (type: string) => {
-  if (type === 'copy_shop_number') {
    const shopNumberList = []
    for (const item of tableData.value) {
      if (item.productList) {
@@ -2174,16 +2175,6 @@ const onCopyChange = (type: string) => {
    copy(shopNumberList.join(','))
  }
 }
-const handleContextMenu = (e: MouseEvent) => {
-  tableRightMenuVisible.value = true
-  tableRightMenuRef.value?.setRightMenuOptions({
-    contextMenuX: e.clientX,
-    contextMenuY: e.clientY,
-  })
-}
-const listenerClick = () => {
-  tableRightMenuVisible.value = false
-}
 const getUserMark = async () => {
  try {
@@ -2208,7 +2199,6 @@ const openMaterial = async (item: PodProductList) => {
 }
 onMounted(async () => {
  document.addEventListener('keydown', listenerKeydown)
-  document.addEventListener('click', listenerClick)
  await loadTabData()
  getUserMark()
  getLogisticsList()
@@ -2216,7 +2206,6 @@ onMounted(async () => {
 })
 onBeforeUnmount(() => {
  document.removeEventListener('keydown', listenerKeydown)
-  document.removeEventListener('click', listenerClick)
 })
 </script>
 <style lang="scss" scoped>
@@ -2491,9 +2480,9 @@ onBeforeUnmount(() => {
  display: flex;
  align-items: center;
 }
-.over-hidden{
+.over-hidden {
  width: 150px;
-  display:inline-block;
+  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

--- 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 @click="$emit('change', 'check_all')">全部选择</button>
-      全部选择
-    </button>
    <button @click="$emit('change', 'clear_check')">取消选择</button>
-    <button @click="$emit('change', 'copy_code')">复制选中生产单号</button>
+    <button v-if="showCopySubShopNumber" @click="$emit('change', 'copy_code')">
+      复制选中生产单号
+    </button>
-    <button v-if="showCopyShopNumber" @click="$emit('change', 'copy_shopNumber')">复制选中店铺单号</button>
+    <button
-    <button v-if="showCopyShopNumber" @click="$emit('change', 'count')">统计数量</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'
+import { ref, defineProps, defineExpose } from 'vue'
-interface E{
+interface E {
-  x:number
+  x: number
-  el:HTMLElement
+  el: HTMLElement
-  y:number
+  y: number
 }
 defineProps({
-  showCopyShopNumber:{
+  showCopyShopNumber: {
-    type:Boolean,
+    type: Boolean,
-    default:true
+    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 = ()=>{
+const close = () => {
  show.value = false
  document.body.onclick = null
 }
-const setPosition = (o:E)=> {
+const setPosition = (o: E) => {
  console.log(o)
  show.value = true
  const clientX = o.x
@@ -42,18 +57,17 @@ const setPosition = (o:E)=> {
  document.body.onclick = function () {
    close()
  }
-  row.value =
+  row.value = setTimeout(() => {
-  setTimeout(() => {
+    if (!right_menu.value) return
-    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`
+      right_menu.value.style.cssText = `top:${o.y}px;left:${o.x}px`
    }
  }, 1)
 }
 defineExpose({
-  setPosition
+  setPosition,
 })
 </script>
 <style scoped>
@@ -89,7 +103,7 @@ defineExpose({
  background: rgb(65, 192, 251);
  color: white;
 }
-button{
+button {
  outline: none;
  border: none;
 }

--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -364,7 +364,7 @@
          :paginated-data="tableData"
          :cell-style="onCellStyle"
          @selection-change="handleSelectionChange"
-          @copy-shop-numbers="handleCopyShopNumbers"
+          @on-change="onChange"
        >
          <template #goods="{ row }">
            <div class="goods-info-box">
@@ -909,7 +909,7 @@
  </div>
  <right-menu
    ref="rightMenuRef"
-    :show-copy-shop-number="false"
+    :show-copy-count="false"
    @change="rightChange"
  />
  <el-dialog
@@ -1882,6 +1882,12 @@ const rightChange = async (code: string) => {
      .join()
    navigator.clipboard.writeText(str)
    ElMessage.success('复制成功')
+  } else if (code === 'copy_shopNumber') {
+    const str = cardSelection.value
+      .map((item) => item.shopNumber)
+      .join()
+    navigator.clipboard.writeText(str)
+    ElMessage.success('复制成功')
  }
 }
 const currentImage = ref('')
@@ -2487,13 +2493,15 @@ onMounted(() => {
  loadProductionClient()
  loadWarehouseList()
 })
-const handleCopyShopNumbers = () => {
+const onChange = (value: string) => {
-  const shopNumbers = (tableData.value as PodUsOrderListData[])
+  if (value === 'shop-numbers') {
-    .map((item) => item.shopNumber)
+    const shopNumbers = (tableData.value as PodUsOrderListData[])
-    .join(',')
+      .map((item) => item.shopNumber)
-  navigator.clipboard.writeText(shopNumbers).then(() => {
+      .join(',')
-    ElMessage.success('店铺单号已复制到剪贴板')
+    navigator.clipboard.writeText(shopNumbers).then(() => {
-  })
+      ElMessage.success('店铺单号已复制到剪贴板')
+    })
+  }
 }
 const handleExceptionCommand = (command: number) => {
  exceptionStatus.value = command