<script lang="ts" setup>
|
import {reactive, ref} from "vue"
|
import {useRouter} from "vue-router"
|
import * as XLXS from "xlsx"
|
import {ElMessage} from "element-plus"
|
import request from "@/utils/request"
|
import deepClone from "@/utils/deepClone"
|
|
const router = useRouter()
|
const xGrid = ref()
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
|
id: 'OrderList',
|
showFooter: true,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true },//开启虚拟滚动
|
showOverflow:true,
|
menuConfig: {
|
body: {
|
options: [
|
[
|
{ code: 'addRow', name: '添加', prefixIcon: 'vxe-icon-square-plus', visible: true, disabled: false }
|
]
|
]
|
}
|
},
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'cell',
|
showStatus: true
|
},//表头参数
|
columns:[
|
// {title: '操作', width: 110,fixed:"left",slots: { default: 'openProductList' }},
|
{type: 'seq',fixed:"left", title: '自序', width: 80 },
|
{field: 'buildingNumber',width:120, title: '楼号',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'productId',width:140, title: '产品ID',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'productName',width:120, title: '产品',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'price',width:140, title: '单价',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'quantity',width:120, title: '数量',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'grossAmount',width:120, title: '总金额',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'width',width:120, title: '宽',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'height',width:120, title: '高',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'area',width:150, title: '实际单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true},
|
{field: 'grossArea',width:140, title: '实际总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true},
|
{field: 'computeArea',width:180, title: '结算单片面积',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'computeGrossArea',width:140, title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'shape',width:120, title: '形状',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'bendRadius',width:140, title: '弯钢弧度',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'edgingType',width:140, title: '磨边类型',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'processingNote',width:140, title: '加工要求',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'remarks',width:120, title: '备注',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
|
|
|
],
|
//表单验证
|
editRules: {
|
buildingNumber: [
|
{ required: false},
|
{ min: 0, max: 255, message: '名称长度在 0 到 255 个字符' }
|
],
|
productId: [
|
{ required: true, message: '请选择产品' }
|
],
|
price: [
|
{
|
validator ({ cellValue }) {
|
const regex = /^(0|[1-9][0-9]{0,4}([.][0-9]{1,2})?)$/
|
if (cellValue && !regex.test(cellValue)) {
|
return new Error('输入0.00~99999.99的数字')
|
}
|
}
|
}
|
],
|
computeArea: [
|
{
|
validator ({ cellValue }) {
|
const regex = /^(0|[1-9][0-9]{0,4}([.][0-9]{1,2})?)$/
|
if (cellValue && !regex.test(cellValue)) {
|
return new Error('输入0.00~99999.99的数字')
|
}
|
}
|
}
|
],
|
quantity: [
|
{ type: 'number', min: 0, message: '请输入大于等于0的数值' }
|
],
|
width:[
|
{
|
validator ({ cellValue }) {
|
const regex = /^(0|[1-9][0-9]{0,4}([.][0-9]{1,2})?)$/
|
if (cellValue && !regex.test(cellValue)) {
|
return new Error('输入0.00~99999.99的数字')
|
}
|
}
|
}
|
],
|
height:[
|
{
|
validator ({ cellValue }) {
|
const regex = /^(0|[1-9][0-9]{0,4}([.][0-9]{1,2})?)$/
|
if (cellValue && !regex.test(cellValue)) {
|
return new Error('输入0.00~99999.99的数字')
|
}
|
}
|
}
|
]
|
},
|
toolbarConfig: {
|
buttons: [
|
{'code': 'remarks', 'name': '加工要求'},
|
{'code': 'Craft', 'name': '工艺',status: 'primary'},
|
{'code': 'add', 'name': '审核',status: 'primary',disabled: true},
|
{'code': 'saveOrder', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'}
|
],
|
slots: {
|
tools: 'toolbar_buttons'
|
},
|
// import: false,
|
// export: true,
|
// print: true,
|
zoom: true,
|
custom: true
|
}
|
,
|
//table body实际数据
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计:'
|
}
|
// if (props.tableProp.footList.includes(column.field)) {
|
// return sumNum(data, column.field)
|
// }
|
return ''
|
})
|
]
|
}
|
|
})
|
const gridEvents = {
|
async toolbarButtonClick({code}) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (code) {
|
case 'Craft': {
|
await router.push({path: '/main/order/updateOrderCraft', query: {orderID: 12123}})
|
break
|
}
|
case 'saveOrder': {
|
if ($grid.getTableData().tableData.length === 0){
|
ElMessage.error('没有表格数据！')
|
return
|
}
|
console.log($grid.getTableData().tableData)
|
if ($grid) {
|
const errMap = await $grid.validate(true)
|
if (errMap) {
|
ElMessage.error(`校验不通过！`)
|
return
|
}
|
let order ={
|
title:titleUploadData.value,
|
detail:$grid.getTableData().tableData
|
}
|
saveOrder(order)
|
}
|
break
|
}
|
}
|
}
|
},//头部按钮事件
|
menuClick ({ menu, row, column }) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (menu.code) {
|
case 'deleteList': {
|
$grid.removeCheckboxRow()
|
break
|
}
|
case 'addRow': {
|
if ($grid.getTableData().tableData.length >=240){
|
ElMessage.error('表格数据已达到最大值！')
|
return
|
}
|
$grid.insert({})
|
//console.log($grid.getRecordset().insertRecords)
|
break
|
}
|
}
|
}
|
},
|
cellDblclick (params) {//表格内容双击打开产品界面
|
const { row } = params
|
//alert("我打开了产品界面")
|
}
|
}
|
|
// 定义表头上传数据
|
const titleUploadData = ref({
|
project:'',
|
orderType:'',
|
alType:'',
|
icon:'',
|
orderClassify:'',
|
packType:'',
|
deliveryDate:''
|
})
|
|
//定义接收加载表头下拉数据
|
const titleSelectJson = ref({
|
orderType:[],
|
alType:[],
|
icon:[],
|
orderClassify:[],
|
packType:[],
|
})
|
//页面第一次加载执行
|
request.get(`/basicData/orderBasicData`).then((res) => {
|
if(res.code==200){
|
titleSelectJson.value=deepClone(res.data)
|
titleUploadData.value.orderType = titleSelectJson.value.orderType[0].id
|
titleUploadData.value.orderClassify = titleSelectJson.value.orderClassify[0].id
|
titleUploadData.value.icon = titleSelectJson.value.icon[0].id
|
titleUploadData.value.packType = titleSelectJson.value.packType[0].id
|
titleUploadData.value.alType = titleSelectJson.value.alType[0].id
|
const today = new Date
|
today.setTime(today.getTime() + (15 * 24 * 60 * 60 * 1000))
|
titleUploadData.value.deliveryDate = today.getFullYear() +
|
'-' + ("0" + (today.getMonth() + 1)).slice(-2)
|
+ '-' + ("0" + today.getDate()).slice(-2)
|
}else{
|
ElMessage.warning(res.msg)
|
}
|
})
|
|
const saveOrder = (order) => {
|
request.post(`/order/saveOrder`,order).then((res) => {
|
if(res.code==200){
|
ElMessage.success('保存成功')
|
}else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
}
|
|
|
|
|
const countAmount = (row) => {
|
return
|
}
|
const area = (row) => {
|
return parseFloat((row.width * row.height/1000000).toFixed(2))
|
}
|
const countArea = (row) => {
|
return parseFloat((row.width * row.height/1000000).toFixed(2))*row.quantity
|
}
|
|
|
//导入功能
|
const impotEvent = async () => {
|
const $grid = xGrid.value
|
const { files } = await $grid.readFile({
|
types: ['xls', 'xlsx']
|
})
|
const fileReader = new FileReader()
|
fileReader.onload = (event) => {
|
const data = event.target ? event.target.result : ''
|
const workbook = XLXS.read(data, { type: 'binary' })
|
let jsonData = XLXS.utils.sheet_to_json(workbook.Sheets.Sheet1).slice(1)
|
if(jsonData.length>240){
|
ElMessage.error('导入数据不能超过240条,请分订单导入')
|
return
|
}
|
jsonData.forEach((item,index) => {
|
//item.computeArea
|
//console.log()
|
if(item.computeArea === undefined){
|
item.computeArea = area(item)
|
}
|
item.computeGrossArea = parseFloat((item.computeArea*item.quantity).toString())
|
})
|
|
xGrid.value.loadData(jsonData)
|
}
|
fileReader.readAsBinaryString(files[0])
|
}
|
|
//行单元格修改修改触发此事件
|
const editClosedEvent = ({ row, column }) => {
|
//判断修改相应的数值修改面积与金额
|
if (['width', 'height', 'quantity', 'price'].includes(column.property)) {
|
row.area = area(row)
|
row.grossArea = countArea(row)
|
row.computeArea = row.area
|
row.computeGrossArea = row.grossArea
|
row.grossAmount=row.price * row.computeGrossArea
|
}else if(column.property === 'computeArea'){
|
row.computeGrossArea=parseFloat((row.computeArea*row.quantity).toString())
|
row.grossAmount=row.price * row.computeGrossArea
|
}
|
}
|
</script>
|
|
<template>
|
<div class="main-div">
|
<div class="order-primary" style="background-color: white">
|
<el-row>
|
<el-col :span="2"><el-text>*项目名称：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>*客户选择：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>*订单类型：</el-text></el-col>
|
<el-col :span="2">
|
<el-select v-model="titleUploadData.orderType" clearable placeholder="" >
|
<el-option
|
v-for="item in titleSelectJson['orderType']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>订单分类：</el-text></el-col>
|
<el-col :span="2">
|
<el-select v-model="titleUploadData.orderClassify" clearable placeholder=" " >
|
<el-option
|
v-for="item in titleSelectJson['orderClassify']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>商标选项：</el-text></el-col>
|
<el-col :span="2">
|
<el-select v-model="titleUploadData.icon" clearable placeholder=" " >
|
<el-option v-for="item in titleSelectJson['icon']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.id"/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>包装方式：</el-text></el-col>
|
<el-col :span="2">
|
<el-select v-model="titleUploadData.packType" clearable placeholder=" " >
|
<el-option v-for="item in titleSelectJson['packType']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.id"/>
|
</el-select>
|
</el-col>
|
<!-- <el-col :span="2"><el-text /></el-col>-->
|
</el-row>
|
<el-row>
|
<el-col :span="2"><el-text>销售单号：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
<el-col :span="2"><el-text>交货日期：</el-text></el-col>
|
<el-col :span="2">
|
<el-date-picker
|
v-model="titleUploadData.deliveryDate"
|
type="date"
|
placeholder="Pick a day"
|
/>
|
</el-col>
|
<el-col :span="2"><el-text>批次：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>计算方式：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>*业务员：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>铝条方式：</el-text></el-col>
|
<el-col :span="2">
|
<el-select v-model="titleUploadData.alType" clearable placeholder=" " >
|
<el-option v-for="item in titleSelectJson['alType']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.id"/>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="2"><el-text>总金额：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
|
<el-col :span="2"><el-text>合同编号：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>客户批次：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
<el-col :span="2"><el-text>联系人：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>联系电话：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>送货地址：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="2"><el-text>其他金额：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
<el-col :span="2"><el-text>其他金额备注：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
|
</el-row>
|
</div>
|
<div class="order-detail">
|
<vxe-grid
|
max-height="97%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
@edit-closed="editClosedEvent"
|
>
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
<template #toolbar_buttons>
|
<vxe-button @click="impotEvent">导入</vxe-button>
|
</template>
|
|
|
</vxe-grid>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.main-div {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
}
|
.el-col{
|
border: #181818 1px solid;
|
}
|
:deep(.el-input__wrapper) {
|
box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
|
cursor: default;
|
border: none !important;
|
background-color: transparent;
|
}
|
.order-primary{
|
width: 100%;
|
}
|
.order-detail{
|
width: 100%;
|
height: 80%;
|
}
|
|
</style>
|
