<script setup>
|
import {onMounted, reactive, ref} from "vue";
|
import request from "@/utils/request.js";
|
import userInfo from '@/stores/userInfo'
|
import footSum from "@/hook/footSum";
|
import {ElMessage} from "element-plus";
|
|
const user=userInfo()
|
const dialogVisible = ref(false)
|
|
|
onMounted(()=>{
|
getOrderHistory()
|
})
|
const getOrderHistory = () => {
|
request.post(`/product/getProduct`).then((res) => {
|
titleSelectJson.value=res.data
|
})
|
}
|
|
const width=ref()
|
const height=ref()
|
const product=ref()
|
const quantity=ref()
|
const historyData=ref([])
|
|
const dataArr=ref({
|
id:0,
|
product:"",
|
width:"",
|
height:"",
|
workmanship:"",
|
price:"",
|
quantity:"",
|
money:"",
|
area:""
|
})
|
|
const titleSelectJson=ref([])
|
|
|
const changeDate = ()=>{
|
if(product.value==undefined||product.value==""){
|
ElMessage.warning('请选择产品')
|
return
|
}
|
if(width.value==undefined||width.value==""){
|
ElMessage.warning('请输入宽度')
|
return
|
}
|
if(height.value==undefined||height.value==""){
|
ElMessage.warning('请输入高度')
|
return
|
}
|
if(quantity.value==undefined||quantity.value==""){
|
ElMessage.warning('请输入数量')
|
return
|
}
|
|
const productId=product.value.split("/")[0]
|
request.post(`/product/glassPriceComputed/${productId}`).then(res => {
|
if (res.code === 200 ) {
|
if(res.data.money!==0){
|
dataArr.value.id=historyData.value.length+1
|
dataArr.value.product=product.value.split("/")[1]
|
dataArr.value.width=width.value
|
dataArr.value.height=height.value
|
dataArr.value.quantity=quantity.value
|
const rawResult = width.value * height.value * quantity.value / 1000000;
|
dataArr.value.area=parseFloat(rawResult.toFixed(2))
|
dataArr.value.money=parseFloat(dataArr.value.area*res.data.money).toFixed(2)
|
dataArr.value.workmanship=res.data.workmanship
|
dataArr.value.price=res.data.money
|
|
|
const newData = {
|
id: dataArr.value.id,
|
product: dataArr.value.product,
|
width: dataArr.value.width,
|
height: dataArr.value.height,
|
quantity:dataArr.value.quantity,
|
area:dataArr.value.area,
|
money:dataArr.value.money,
|
workmanship: dataArr.value.workmanship,
|
price: dataArr.value.price
|
};
|
historyData.value.push(newData)
|
|
}else{
|
ElMessage.info("该产品价格未上传，请联系")
|
}
|
|
}
|
})
|
|
}
|
|
// 对话框打开后加载数据
|
const handleDialogOpen = () => {
|
if (!xGrid.value) {
|
ElMessage.warning('表格加载中，请稍后重试');
|
return;
|
}
|
// 确保数据格式正确
|
const validData = historyData.value.map(item => ({
|
id: item.id,
|
product: item.product,
|
width: item.width,
|
height: item.height,
|
quantity: item.quantity,
|
area: item.area,
|
workmanship: item.workmanship,
|
price: item.price,
|
money:item.money,
|
}));
|
xGrid.value.clearData();
|
xGrid.value.reloadData(validData);
|
xGrid.value.updateFooter(); // 刷新合计行
|
};
|
|
// 打开历史询价对话框
|
const changeRecord = () => {
|
if (historyData.value.length === 0) {
|
ElMessage.info('暂无历史询价记录');
|
return;
|
}
|
dialogVisible.value = true;
|
};
|
|
|
const saveOrder = () => {
|
if (historyData.value.length === 0) {
|
ElMessage.info('请重新选择数据');
|
return;
|
}
|
ElMessage.success('下单成功');
|
dialogVisible.value = false;
|
};
|
|
const xGrid = ref()
|
const gridOptions = reactive({
|
loading:false,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
showOverflow:true,
|
showFooter: true,//显示脚
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
virtualScroll: true, // 开启虚拟滚动功能
|
id: 'OrderInquiryView',
|
scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
|
//scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
|
customConfig: {
|
storage: true
|
},
|
mouseConfig:{selected: true},//鼠标选中
|
keyboardConfig:{
|
isArrow: true
|
},
|
|
columns:[
|
{title: '操作', width: 50, slots: { default: 'button_slot' },fixed:"left"},
|
{field: 'id', title: '自序', width: 40 },
|
{field: 'product',width:"auto", title: '产品'},
|
{field: 'width',width:70, title: '宽'},
|
{field: 'height',width:70, title: '高'},
|
{field: 'quantity',width:70, title: '数量'},
|
{field: 'area',width:70, title: '面积'},
|
{field: 'workmanship',width:"auto", title: '工艺'},
|
{field: 'price',width:100, title: '单价(元/m²)'},
|
{field: 'money',width:70, title: '金额'},
|
],
|
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计'
|
}
|
const List = ["price"]
|
if (List.includes(column.field)) {
|
return footSum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
})
|
|
|
const getTableRow = (row,type) =>{
|
switch (type) {
|
case 'delete':{
|
historyData.value = historyData.value.filter(item => item.id !== row.id);
|
|
if (xGrid.value) {
|
xGrid.value.reloadData(historyData.value);
|
xGrid.value.updateFooter();
|
}
|
ElMessage.success('删除成功');
|
return
|
}
|
}
|
}
|
|
</script>
|
|
|
|
<template>
|
<div class="page" >
|
<div style="width: 95%;height:95%;margin: auto;background-color: white;">
|
|
<div style="padding-top: 20px">
|
<el-select class="select" v-model="product" filterable placeholder="产品" >
|
<el-option
|
v-for="item in titleSelectJson"
|
:key="item.id"
|
:label="item.productName"
|
:value="item.id+'/'+item.productName"
|
/>
|
</el-select>
|
<el-input v-model.trim="width" class="input" :placeholder="$t('宽度')"></el-input>
|
|
<el-input v-model="height" class="input" :placeholder="$t('高度')"></el-input>
|
|
<el-input v-model="quantity" class="input" :placeholder="$t('数量')"></el-input>
|
|
<el-button class="button" type="primary" @click="changeDate">查询</el-button>
|
</div>
|
|
<div style="width: 90%;height:80%;margin: auto;font-size: 30px;font-weight: bolder;">
|
<el-row>
|
<el-col :span="5"><el-text>产品:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.product}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>宽度:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.width}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>高度:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.height}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>数量:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.quantity}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>面积:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.area}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>工艺:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.workmanship}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>单价(元/m²):</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.price}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="5"><el-text>总金额:</el-text></el-col>
|
<el-col :span="19"><el-text>{{dataArr.money}}</el-text></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24"><el-text style="font-size: 12px">注：不包含运费（价格仅供参考）</el-text></el-col>
|
</el-row>
|
|
</div>
|
|
<div style="text-align: center">
|
<span style="font-size: 15px;cursor: pointer; text-decoration: underline;" @click="changeRecord">
|
历史询价
|
</span>
|
</div>
|
|
</div>
|
|
<el-dialog v-model="dialogVisible" fullscreen @open="handleDialogOpen">
|
<template #header>
|
<el-button class="button" type="primary" @click="saveOrder">下单</el-button>
|
</template>
|
<vxe-grid
|
height="85%"
|
size="mini"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
>
|
<template #button_slot="{ row }">
|
<el-popconfirm @confirm="getTableRow(row,'delete')" title="确认删除?">
|
<template #reference>
|
<el-button link type="primary" size="small">{{ $t('删除') }}</el-button>
|
</template>
|
</el-popconfirm>
|
</template>
|
</vxe-grid>
|
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<style scoped>
|
.page{
|
width: 100%;
|
height:calc(100vh - 5.5rem);
|
|
}
|
:deep(.el-dialog__body){
|
height: 90vh;
|
width: 100%;
|
}
|
|
.input{
|
width: 100px;
|
margin-left: 20px
|
}
|
.select{
|
width: 200px;
|
margin-left: 20px
|
}
|
|
.button{
|
width: 60px;
|
margin-left: 20px
|
}
|
|
@media screen and (max-width: 768px) {
|
.input{
|
width: 20%;
|
margin-left: 7px;
|
margin-top: 5px;
|
}
|
.select{
|
width: 90%;
|
margin-left: 7px
|
}
|
.button{
|
width: 15%;
|
margin-left: 20px;
|
margin-top: 5px;
|
}
|
}
|
|
</style>
|
