Merge branch 'master' of http://10.153.19.25:10101/r/ERP_override

chenlu

2024-01-26 9a0cf79fa57427d7a38d55ad8b33622c1dcc18aa

 north-glass-erp/northglass-erp/src/views/sd/order/CreateOrder.vue

@@ -1,9 +1,12 @@
<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",//表格加边框
@@ -18,6 +21,15 @@
  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
@@ -30,45 +42,103 @@
  },
  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) => {
@@ -84,26 +154,172 @@
  }

})

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>
@@ -116,26 +332,42 @@
        </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>-->
@@ -146,9 +378,10 @@
        <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>
@@ -166,8 +399,11 @@
        </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>
@@ -201,6 +437,7 @@
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
          @edit-closed="editClosedEvent"
      >
        <template #num1_filter="{ column, $panel }">
          <div>
@@ -209,6 +446,11 @@
            </div>
          </div>
        </template>
        <template #toolbar_buttons>
          <vxe-button  @click="impotEvent">导入</vxe-button>
        </template>


      </vxe-grid>
    </div>
  </div>