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