fix: 表格右键复制全部

b6faadf5 · qinjianhui · 3db67f9c · b6faadf5 · b6faadf5 · b6faadf5
Commit b6faadf5 authored Mar 14, 2025 by qinjianhui
Hide whitespace changes
Inline Side-by-side

Showing with 103 additions and 16 deletions

components.d.ts
+1 -0

src/components/TableRightMenu.vue
+62 -0

src/components/TableView.vue
+4 -11

src/views/order/pod/index.vue
+36 -5

No files found.
--- a/components.d.ts
+++ b/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']

--- 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
@@ -26,16 +26,13 @@
      ></ElTableColumn>
      <template v-for="column in columns" :key="column.key">
        <ElTableColumn
-          v-if="
+          v-if="column.type === 'expand'"
-            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
+            <slot :name="name" v-bind="scope" />
-              @contextmenu.prevent="(e:MouseEvent)=>$emit('rightClick',e)"
-              :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>

--- a/src/views/order/pod/index.vue
+++ b/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>