Merge branch 'dev' into 'master'

fix: POD US order add contextmenu

See merge request !23

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']

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

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

@@ -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>

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()