| | |
| | | <script setup> |
| | | <script lang="ts" setup> |
| | | import {reactive, ref} from "vue" |
| | | import {VXETable} from "vxe-table" |
| | | import {useRouter} from "vue-router" |
| | | const router = useRouter() |
| | | 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",//表格加边框 |
| | |
| | | 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 |
| | |
| | | }, |
| | | editConfig: { |
| | | trigger: 'click', |
| | | mode: 'row', |
| | | mode: 'cell', |
| | | showStatus: true |
| | | },//表头参数 |
| | | columns:[ |
| | | // {title: '操作', width: 110,fixed:"left",slots: { default: 'openProductList' }}, |
| | | {type: 'seq',fixed:"left", title: '自序', width: 80 }, |
| | | {field: 'orderID',width:120, title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '产品',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '单价',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '结算单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderID',width:120, title: '外购',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true} |
| | | {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': 'add', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'} |
| | | {'code': 'saveOrder', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'} |
| | | ], |
| | | import: false, |
| | | export: true, |
| | | print: true, |
| | | slots: { |
| | | tools: 'toolbar_buttons' |
| | | }, |
| | | // import: false, |
| | | // export: true, |
| | | // print: true, |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | data: [ |
| | | ],//table body实际数据 |
| | | } |
| | | , |
| | | //table body实际数据 |
| | | footerMethod ({ columns, data }) {//页脚函数 |
| | | return[ |
| | | columns.map((column, columnIndex) => { |
| | |
| | | } |
| | | |
| | | }) |
| | | |
| | | const gridEvents = { |
| | | toolbarButtonClick ({ code }) { |
| | | async toolbarButtonClick({code}) { |
| | | const $grid = xGrid.value |
| | | if ($grid) { |
| | | switch (code) { |
| | | case 'Craft': { |
| | | router.push({path: '/main/order/updateOrderCraft', query: { orderID: 12123 }}) |
| | | 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({ |
| | | 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> |
| | | <el-col :span="2"><el-text>*订单类型:</el-text></el-col> |
| | | <el-col :span="2"> |
| | | <el-select clearable placeholder=" " > |
| | | <el-option /> |
| | | <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 clearable placeholder=" " > |
| | | <el-option/> |
| | | <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 clearable placeholder=" " > |
| | | <el-option/> |
| | | <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 clearable placeholder=" " > |
| | | <el-option/> |
| | | <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-col :span="2"><el-text>交货日期:</el-text></el-col> |
| | | <el-col :span="2"> |
| | | <el-date-picker |
| | | type="week" |
| | | format="[Week] ww" |
| | | placeholder="选择日期"/> |
| | | 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> |
| | | <el-col :span="2"><el-text>铝条方式:</el-text></el-col> |
| | | <el-col :span="2"> |
| | | <el-select clearable placeholder=" " > |
| | | <el-option/> |
| | | <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> |
| | |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | v-on="gridEvents" |
| | | @edit-closed="editClosedEvent" |
| | | > |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template #toolbar_buttons> |
| | | <vxe-button @click="impotEvent">导入</vxe-button> |
| | | </template> |
| | | |
| | | |
| | | </vxe-grid> |
| | | </div> |
| | | </div> |