Skip to content

F
factory_front
Commit 8422590a by qinjianhui
Options

feat: 对账单优化

parent 8e7daba3
Showing with 145 additions and 71 deletions
components.d.ts
......@@ -22,6 +22,7 @@ declare module 'vue' {
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
......
src/components/ImageView.vue
<template>
<div
ref="imageViewRef"
class="image-view"
@mousemove="onMoseMove"
@mouseleave="onMoseLeave"
ref="imageViewRef"
@mouseover="(ev) => mouseoverImg(ev, src)"
@mouseleave="mouseleaveImg"
>
<img :src="src" />
<img :src="src" style="width: 30; height: 30px" />
</div>
</template>
<script setup lang="ts">
import useImagePreview from '@/utils/hooks/useImagePreview.'
const props = defineProps({
defineProps({
src: {
type: String,
default: () => '',
},
})
const { onMoseMove, onMoseLeave } = useImagePreview(props.src)
const { mouseoverImg, mouseleaveImg } = useImagePreview()
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.image-view {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer
}
</style>
src/styles/common.scss
......@@ -107,3 +107,14 @@ img {
text-overflow: ellipsis;
white-space: nowrap;
}
.el-table .cell {
height: 36px;
line-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.el-table th.el-table__cell>.cell {
display: inline-flex !important;
}
\ No newline at end of file
src/styles/element.scss
......@@ -4,6 +4,9 @@
height: 50px;
min-height: 50px;
}
.el-table .cell {
white-space: nowrap;
}
.el-table thead th.el-table__cell {
background-color: #FAFAFA;
......
src/utils/hooks/useImagePreview..ts
// 预览大图
export default function useImagePreview(src: string) {
const imageView = document.createElement('img')
// 鼠标在元素内部移动
const onMoseMove = (e: MouseEvent) => {
imageView.className = 'image-view'
imageView.src = src
imageView.style.backgroundColor = '#eee'
document.body.appendChild(imageView)
const cW: number = document.body.clientWidth
const cH: number = document.body.clientHeight
const cX: number = e.clientX
const cY: number = e.clientY
let x: number = 0
let y: number = 0
if (cY + 380 >= cH) y = cY - 440
else y = cY - 30
if (cX + 440 >= cW) x = cX - 440
else x = cX + 30
imageView.onload = () => {
imageView.style.left = x + 'px'
imageView.style.top = y + 'px'
imageView.style.display = 'block'
import { ref } from "vue"
export default function useImagePreview() {
const show = ref(false)
const div = document.createElement('div')
div.style.position = 'fixed'
div.style.zIndex = '9999999999999'
div.style.display = 'none'
const img = document.createElement('img')
img.style.width = '300px'
div.appendChild(img)
document.body.appendChild(div)
const mouseoverImg = (ev: MouseEvent, url: string) => {
console.log(url,ev.clientY,ev.clientX)
ev.preventDefault()
if (show.value === true) return
img.src = url
img.style.backgroundColor = '#eee'
const cW = document.body.clientWidth
const cH = document.body.clientHeight
const cX = ev.clientX
const cY = ev.clientY
let x, y
if (cY + 150 >= cH) y = cY - 300
else y = cY - 150
if (cX + 300 >= cW) x = cX - 300
else x = cX + 60
img.onload = () => {
div.style.left = x + 'px'
div.style.top = y + 'px'
div.style.display = 'block'
show.value = true
}
}
// 鼠标离开元素
const onMoseLeave = () => {
imageView.style.display = 'none'
}
return {
onMoseMove,
onMoseLeave,
const mouseleaveImg = () => {
if (show.value === false) return
div.style.display = 'none'
show.value = false
}
return { mouseoverImg, mouseleaveImg }
}
src/views/AccountStatementNote.vue
......@@ -117,13 +117,13 @@
>
确认对账单
</el-button>
<el-button
<!-- <el-button
v-if="nodeId === 20"
type="warning"
@click="auditOrder('pay')"
>
付款
</el-button>
</el-button> -->
<el-button
v-if="nodeId === 30"
type="danger"
......@@ -204,16 +204,74 @@
header-align="center"
align="center"
></ElTableColumn> -->
<ElTableColumn
label="商品总价"
<el-table-column
label="账期"
header-align="center"
align="center"
min-width="340"
>
<template #default="scope">
{{ scope.row.start_time }} - {{
scope.row.end_time
}}
</template>
</el-table-column>
<el-table-column
label="商品总价格($)"
header-align="center"
prop="product_total_amount"
width="130"
align="center"
show-overflow-tooltip
width="100"
>
</el-table-column>
<!-- <el-table-column
label="ERP总价格"
header-align="center"
prop="erp_total_amount"
width="120"
align="center"
show-overflow-tooltip
>
</el-table-column> -->
<el-table-column
label="物流总价($)"
header-align="center"
prop="carriage_total_amount"
width="130"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column
label="应付金额($)"
header-align="center"
prop="product_total_amount"
width="130"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column
label="实付金额($)"
header-align="center"
prop="actual_amount"
width="130"
align="center"
></ElTableColumn>
show-overflow-tooltip
></el-table-column>
<el-table-column
label="水单"
header-align="center"
prop="actual_amount"
width="100"
align="center"
show-overflow-tooltip
>
<template #default="{ row }">
<ImageView :src="row.water_list" />
</template>
</el-table-column>
<ElTableColumn
label="物流总价"
label="发货数量(件)"
show-overflow-tooltip
width="100"
prop="carriage_total_amount"
......@@ -221,7 +279,7 @@
align="center"
></ElTableColumn>
<ElTableColumn
label="总发货数量"
label="总发货数量(件)"
show-overflow-tooltip
prop="num"
width="130"
......@@ -229,7 +287,7 @@
align="center"
></ElTableColumn>
<ElTableColumn
label="质检通过数量"
label="质检通过数量(件)"
show-overflow-tooltip
prop="pass_num"
width="130"
......@@ -245,9 +303,9 @@
align="center"
></ElTableColumn> -->
<ElTableColumn
label="质检未通过数量"
label="质检未通过数量(件)"
show-overflow-tooltip
width="130"
width="140"
prop="not_pass_num"
header-align="center"
align="center"
......@@ -327,22 +385,7 @@
header-align="center"
align="center"
></ElTableColumn> -->
<ElTableColumn
label="开始时间"
show-overflow-tooltip
width="200"
prop="start_time"
header-align="center"
align="center"
></ElTableColumn>
<ElTableColumn
label="结束时间"
show-overflow-tooltip
width="200"
prop="end_time"
header-align="center"
align="center"
></ElTableColumn>
<ElTableColumn
label="创建时间"
show-overflow-tooltip
......@@ -420,20 +463,20 @@
<ElTableColumn
show-overflow-tooltip
align="center"
label="发货数"
label="发货数(件)"
prop="num"
/>
<ElTableColumn
show-overflow-tooltip
align="center"
label="质检通过"
label="质检通过(件)"
prop="pass_num"
/>
<ElTableColumn
show-overflow-tooltip
align="center"
label="质检不通过"
label="质检不通过(件)"
prop="not_pass_num"
/>
<!-- <ElTableColumn
......@@ -445,13 +488,13 @@
<ElTableColumn
show-overflow-tooltip
align="center"
label="价格"
label="价格($)"
prop="price"
/>
<ElTableColumn
show-overflow-tooltip
align="center"
label="物流价格"
label="物流价格($)"
prop="carriage_amount"
/>
<ElTableColumn
......@@ -580,6 +623,7 @@ import {
} from '@/types/api/billOrder.ts'
import { ShipmentOrderDetailData } from '@/types/api/deliveryNote'
import shipmentOrderDetailInfo from '@/components/ShipmentOrderDetail.vue'
import ImageView from '@/components/ImageView.vue'
// import { getUserMarkList } from '@/api/auth.ts'
interface Tree {
......@@ -747,7 +791,7 @@ const auditOrder = (key: string) => {
url = 'reconciliation/payment'
text = '确认付款'
break
case 'archiving':
case 'archive':
url = 'reconciliation/archiving'
text = '确认归档'
break
......
src/views/typesetting/submitReviewModal.vue
......@@ -446,7 +446,7 @@ const submitReview = async () => {
// showError('请上传图片')
// return
// }
let BtnIndex = Number(version.value - 1)
const BtnIndex = Number(version.value - 1)
// 检查 imagePath 是否为空或 null
if (
versionImageList.value.length == 0 ||
......
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