廖井涛
8 小时以前 f7a2fcdda7f1120498c5c5f75c5a99955fc54b43
north-glass-erp/northglass-erp/src/views/sd/glassPrice/ProducePriceCompute.vue
@@ -1,11 +1,203 @@
<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>