| | |
| | | <script setup> |
| | | import {changeFilterEvent, filterChanged} from "@/hook"; |
| | | import {reactive, ref} from "vue"; |
| | | import ProductList from './ProductList.vue' |
| | | import {useI18n} from "vue-i18n"; |
| | | import {VXETable} from "vxe-table"; |
| | | import {ElMessage} from "element-plus"; |
| | | import request from "@/utils/request"; |
| | | import router from "@/router"; |
| | | import {multiply,multiplyAuto,divideAuto} from '@/utils/decimal' |
| | | import footSum from "@/hook/footSum"; |
| | | const { t } = useI18n() |
| | | let dialogVisible = ref(false) |
| | | const xGrid = ref() |
| | | const gridOptions = reactive({ |
| | | loading:false, |
| | | showHeaderOverflow: false, |
| | | showFooterOverflow: false, |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | | align: 'center',//文字居中 |
| | | stripe:true,//斑马纹 |
| | | rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮 |
| | | //virtualScroll: true, // 开启虚拟滚动功能 |
| | | id: 'producePriceCompute1', |
| | | printConfig: {}, |
| | | importConfig: {}, |
| | | exportConfig: {}, |
| | | showOverflow:true, |
| | | showFooter: true, |
| | | columnConfig: { |
| | | resizable: true, |
| | | useKey: true |
| | | }, |
| | | filterConfig: { //筛选配置项 |
| | | //remote: true //远端筛选 |
| | | }, |
| | | customConfig: { |
| | | storage: true |
| | | }, |
| | | mouseConfig:{selected: true},//鼠标选中 |
| | | keyboardConfig:{ |
| | | isArrow: true, |
| | | isDel: true, |
| | | isEnter: true, |
| | | isTab: true, |
| | | isEdit: true, |
| | | isChecked: true |
| | | }, |
| | | editConfig: { |
| | | trigger: 'dblclick', |
| | | mode: 'cell', |
| | | showStatus: true, |
| | | showIcon:false |
| | | },//表头参数 |
| | | columns:[ |
| | | {type: 'seq',fixed:"left", title: t('basicData.Number'), width: 80 }, |
| | | {field: 'productId', title: t('order.productId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'productName', title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'price', title: t('order.price'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'width', title: t('order.width') ,editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'height', title: t('order.height'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'quantity', title: t('order.quantity'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'area', title: t('order.area'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'grossArea', title: t('order.grossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'grossAmount', title: t('order.grossAmount'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | |
| | | |
| | | ], |
| | | |
| | | toolbarConfig: { |
| | | buttons: [ |
| | | {'code': 'addProducts', 'name': t('glassPrice.addProduce'),disabled: false}, |
| | | {'code': 'reorder', 'name': t('glassPrice.reorder'),status: 'primary',icon: 'vxe-icon-save',disabled: false}, |
| | | |
| | | ], |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | //table body实际数据 |
| | | footerMethod ({ columns, data }) {//页脚函数 |
| | | return[ |
| | | columns.map((column, columnIndex) => { |
| | | if (columnIndex === 0) { |
| | | return t('basicData.total')+':' |
| | | } |
| | | const List = ["quantity",'grossAmount','grossArea'] |
| | | if (List.includes(column.field)) { |
| | | return footSum(data, column.field) |
| | | } |
| | | return '' |
| | | }) |
| | | ] |
| | | } |
| | | |
| | | |
| | | }) |
| | | const gridEvents = { |
| | | toolbarButtonClick ({ code }) { |
| | | const $grid = xGrid.value |
| | | if ($grid) { |
| | | switch (code) { |
| | | case 'addProducts': { |
| | | dialogVisible.value = true |
| | | break |
| | | } |
| | | case 'reorder': { |
| | | if($grid.getTableData().fullData.length === 0){ |
| | | ElMessage.warning(t('glassPrice.msg.addProduce')) |
| | | return |
| | | } |
| | | router.push({ |
| | | path: '/main/order/createOrder', |
| | | query:{ |
| | | produceList: JSON.stringify($grid.getTableData().fullData) |
| | | } |
| | | }) |
| | | break |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | const getChildData = (data,product) => { |
| | | data.productId = product.id |
| | | data.productName =product.productName |
| | | request.post(`/glassPriceBasic/glassPriceComputed/${product.id}`).then(res => { |
| | | if (res.code === '200' ) { |
| | | data.price = res.data |
| | | data.area = divideAuto(multiplyAuto(data.width,data.height,2),1000000,2) |
| | | data.grossArea = multiplyAuto(data.area,data.quantity,2) |
| | | data.grossAmount = multiplyAuto(data.price,data.grossArea,2) |
| | | xGrid.value.insertAt(data) |
| | | dialogVisible.value = false |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const editClosedEvent = ({ row, column }) => { |
| | | |
| | | //判断修改相应的数值修改面积与金额 |
| | | if (['width', 'height', 'quantity', 'price'].includes(column.property)) { |
| | | row.area = divideAuto(multiplyAuto(row.width,row.height,2),1000000,2) |
| | | row.grossArea = multiplyAuto(row.area,row.quantity,2) |
| | | row.grossAmount = multiplyAuto(row.price,row.grossArea,2) |
| | | } |
| | | xGrid.value.updateFooter() |
| | | |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | 1 |
| | | <div id="main-div"> |
| | | <vxe-grid |
| | | height="100%" |
| | | 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="text" |
| | | v-model="option.data" |
| | | @keyup.enter.native="$panel.confirmFilter()" |
| | | @input="changeFilterEvent($event, option, $panel)"/> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | </vxe-grid> |
| | | <el-dialog |
| | | id="print" |
| | | v-model="dialogVisible" |
| | | destroy-on-close |
| | | style="width: 75%;height:75%;margin-top: 15vh " |
| | | :close-on-click-modal="false" |
| | | :close-on-press-escape="false" |
| | | > |
| | | <product-list @getChildData="getChildData"/> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | #main-div{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | :deep(#print .el-dialog__body){ |
| | | height: 85%; |
| | | width: 100%; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | </style> |