Skip to content

F
factory_front
Commit a291be25 by qinjianhui
Options

fix: 表格加右击事件

parent ce3d6f24
Showing with 172 additions and 84 deletions
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']
......
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 setPosition = ({ x, y, el }: { x: number; y: number; el: 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
......@@ -39,8 +48,8 @@ const handleUnselectAll = () => {
visible.value = false
}
const handleCopyShopNumbers = () => {
emit('copyShopNumbers')
const onChangeCopy = (value: string) => {
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>
\ No newline at end of file
</style>
src/components/TableView.vue
......@@ -58,10 +58,7 @@
</RenderColumn>
</template>
</ElTable>
<RightClickMenu
@copy-shop-numbers="emit('copyShopNumbers')"
ref="rightMenuRef"
/>
<RightClickMenu ref="rightMenuRef" @on-change="onChange" />
</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)
}
......
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
}
......
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">
{{ cardItem?.productionFileId }}
</span>
<span class="over-hidden" title="素材ID">
{{ cardItem?.productionFileId }}
</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 tableRightMenuRef = ref()
const onCopyChange = (type: string) => {
if (type === 'copy_shop_number') {
const onChange = (type: string) => {
if (type === 'shop-numbers') {
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;
......
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', 'check_all')">全部选择</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 v-if="showCopyShopNumber" @click="$emit('change', 'count')">统计数量</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
import { ref, defineProps, defineExpose } from 'vue'
interface E {
x: number
el: HTMLElement
y: number
}
defineProps({
showCopyShopNumber:{
type:Boolean,
default:true
}
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 = ()=>{
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 =
setTimeout(() => {
if(!right_menu.value) return
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`
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;
}
......
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 shopNumbers = (tableData.value as PodUsOrderListData[])
.map((item) => item.shopNumber)
.join(',')
navigator.clipboard.writeText(shopNumbers).then(() => {
ElMessage.success('店铺单号已复制到剪贴板')
})
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment