fix: 表格右键复制全部

components.d.ts

@@ -52,6 +52,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     ShipmentOrderDetail: typeof import('./src/components/ShipmentOrderDetail.vue')['default']
     SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
+    TableRightMenu: typeof import('./src/components/TableRightMenu.vue')['default']
     TableView: typeof import('./src/components/TableView.vue')['default']
     UploadImage: typeof import('./src/components/UploadImage.vue')['default']
     WangEditor: typeof import('./src/components/WangEditor.vue')['default']

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>

src/components/TableView.vue

@@ -26,16 +26,13 @@
       ></ElTableColumn>
       <template v-for="column in columns" :key="column.key">
         <ElTableColumn
-          v-if="
-           
-            column.type === 'expand'
-          "
+          v-if="column.type === 'expand'"
           v-bind="column"
           header-align="center"
         >
           <!-- 当type等于expand时， 配置通过h函数渲染、txs语法或者插槽自定义内容 -->
           <template #default="scope">
-            <div @contextmenu.prevent="(e) => $emit('rightClick', e)">
+            <div>
               <component
                 :is="column.render"
                 v-if="column.render"
@@ -53,11 +50,7 @@
         </ElTableColumn>
         <RenderColumn v-else :col="column">
           <template v-for="(_, name) of slots" #[name]="scope">
-            <slot
-              @contextmenu.prevent="(e:MouseEvent)=>$emit('rightClick',e)"
-              :name="name"
-              v-bind="scope"
-            />
+            <slot :name="name" v-bind="scope" />
           </template>
         </RenderColumn>
       </template>
@@ -91,7 +84,7 @@ defineProps({
   selectionable: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 const attrs = useAttrs()
 const slots = useSlots() as Record<string, Slot>

src/views/order/pod/index.vue

@@ -395,7 +395,9 @@
                           :content="'货号'"
                           placement="bottom"
                         >
-                          <span>货号：{{ cardItem?.supplierItemNo || '--' }}</span>
+                          <span
+                            >货号：{{ cardItem?.supplierItemNo || '--' }}</span
+                          >
                         </el-tooltip>
                       </el-col>
                     </el-row>
@@ -425,7 +427,7 @@
                       <el-col
                         :span="12"
                         :offset="0"
-                        style="white-space: nowrap;text-align: right;"
+                        style="white-space: nowrap; text-align: right"
                       >
                         <span
                           :title="`店铺单号:${cardItem?.shopNumber}`"
@@ -489,7 +491,7 @@
           default-expand-all
           :span-method="arraySpanMethod"
           @selection-change="handleSelectionChange"
-          @right-click="rightClick"
+          @contextmenu.prevent="handleContextMenu"
         >
           <template #expand="{ row }">
             <div v-if="row.productList" class="table-expand">
@@ -863,9 +865,14 @@
     :type="fastType"
     :detail-data="detailData"
     :current-status="status"
-    @onSuccess="handleSuccess"
+    @on-success="handleSuccess"
     @close="fastClose"
   ></fastProduction>
+  <table-right-menu
+    ref="tableRightMenuRef"
+    :table-right-menu-visible="tableRightMenuVisible"
+    @on-copy-change="onCopyChange"
+  />
 </template>
 <script setup lang="tsx">
 // refreshJMProductInfo,reasonInvalidationApi,
@@ -1807,14 +1814,38 @@ const invalidOrder = async (row: ProductList) => {
     }
   })
 }
-
+const tableRightMenuVisible = ref(false)
+const tableRightMenuRef = ref()
+const onCopyChange = (type: string) => {
+  if (type === 'copy_shop_number') {
+    const shopNumberList = []
+    for (const item of tableData.value) {
+      if (item.productList) {
+        shopNumberList.push(...item.productList.map((sub) => sub.shopNumber))
+      }
+    }
+    copy(shopNumberList.join(','))
+  }
+}
+const handleContextMenu = (e: MouseEvent) => {
+  tableRightMenuVisible.value = true
+  tableRightMenuRef.value?.setRightMenuOptions({
+    contextMenuX: e.clientX,
+    contextMenuY: e.clientY,
+  })
+}
+const listenerClick = () => {
+  tableRightMenuVisible.value = false
+}
 onMounted(() => {
   document.addEventListener('keydown', listenerKeydown)
+  document.addEventListener('click', listenerClick)
   getLogisticsList()
   loadTabData()
 })
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', listenerKeydown)
+  document.removeEventListener('click', listenerClick)
 })
 </script>
 <style lang="scss" scoped>