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

廖井涛

2024-03-15 5a5e59f8aaa2a030511ef245886bf6d1db9bf774

 north-glass-erp/northglass-erp/src/views/pp/reportingWorks/AddReportingWork.vue

@@ -7,6 +7,9 @@
import {indexOf} from "xe-utils";
import {addListener, toolbarButtonClickEvent} from "@/hook/mouseMove";
import userInfo from "@/stores/userInfo"
import { useI18n } from 'vue-i18n'
//语言获取
const { t } = useI18n()
let brokenVisible = ref(false)
const xGrid = ref()
const brokenGrid =ref()
@@ -15,6 +18,7 @@
const user=userInfo()
//定义表头数据
const titleUploadData = ref({
  reportingWorkId: null,
  //流程卡号
  processId: 'NG24030804A02/1',
  //销售单号
@@ -76,22 +80,32 @@

})


let inputDisabled = ref(false)
onMounted(() =>{
  if(route.query.processId !== undefined && route.query.processId!=='' && route.query.processId!=null ){
    titleUploadData.value.processId = route.query.processId
  }
   //route.query.reportingWorkId = 'BG2403150004'
  //判断是否传入报工编号
  if(route.query.reportingWorkId!== undefined && route.query.reportingWorkId!=='' && route.query.reportingWorkId!=null){
  if(route.query.reportingWorkId !== '' && route.query.reportingWorkId!=null){
    request.post(`reportingWork/selectUpdateReportingWork/${route.query.reportingWorkId}`).then(res=>{
      if(res.code === '200'){
        titleUploadData.value = res.data.reportingWork
        console.log(res.data)
        titleSelectJson.value = res.data.basic
        xGrid.value.reloadData(res.data.reportingWorkDetails)
        let button =  {
          code: 'update',
          name: '修改',
          status: 'primary',
        }
        gridOptions.toolbarConfig.buttons.push(button)
      }
      inputDisabled.value = true
    })
  }
})

const data = [{id:1,num:2},{id:1,num:3},{id:2,num:2},{id:1,num:2}];


//表尾求和
@@ -153,14 +167,14 @@
    //  {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    {
      field: 'order_number',
      title: '序号',
      title: t('order.OrderNum'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {
      field: 'glass_child',
      title: '单片名称',
      title: t('reportingWorks.glassChild'),
      showOverflow: "ellipsis",
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
@@ -168,21 +182,21 @@
    },
    {
      field: 'technology_number',
      title: '标记',
      title: t('processCard.technologyNumber'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {
      field: 'glass_address',
      title: '片标记',
      title: t('reportingWorks.glassAddress'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {
      field: 'quantity_card',
      title: '流程卡数量',
      title: t('reportingWorks.numberProcessCards'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      showOverflow: "ellipsis",
@@ -190,29 +204,29 @@
    },
    {
      field: 'child_width',
      title: '宽',
      title: t('order.width'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {
      field: 'child_height',
      title: '高',
      title: t('order.height'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {
      field: 'shape',
      title: '形状',
      title: t('order.shape'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      showOverflow: "ellipsis",
      filterMethod: filterChanged
    },
    {field: 'quantity', title: '可报数量',},
    {field: 'quantity', title: t('reportingWorks.reportableQuantityOk'),},
    {
      field: 'completedQuantity', title: '完工数量',width: 120,
      field: 'completedQuantity', title: t('reportingWorks.completedQuantity'),width: 120,
      editRender: {
        name: 'input',
        attrs: {placeholder: ''}
@@ -220,10 +234,10 @@

    },
    {
      field: 'breakageQuantity',  title: '次破数量',
      field: 'breakageQuantity',  title: t('reportingWorks.quantityBroken'),
    },
    {field: 'completed', width: 90, title: '已完工',},
    {field: 'onceBroken', width: 90, title: '已次破',},
    {field: 'completed', width: 90, title:t('reportingWorks.completed'),},
    {field: 'onceBroken', width: 90, title: t('reportingWorks.onceBroken'),},

  ],
//表单验证
@@ -239,6 +253,9 @@
          }else if((row.completedQuantity*1+brokenNum*1)>row.quantity*1){
            return new Error((`${row.completedQuantity}+${brokenNum}>${row.quantity}`))
          }
          if(titleUploadData.value.reportingWorkId!=null  && row.completedQuantity<row.minQuantity){
            return new Error(`请输入大于等于${row.minQuantity}的数字`)
          }

        }
      }
@@ -251,8 +268,8 @@
      // {code: 'sameDamage', name: '次破相同'},
      // {code: 'sameOneCompletion', name: '完工一列相同'},
      // {code: 'sameOneDamage', name: '次破一列相同'},
      {code: 'saveReportingWork', name: '保存', status: 'primary', icon: 'vxe-icon-save',disabled:true},
      {code: 'saveReportingWorkReview', name: '保存并审核', status: 'primary', icon: 'vxe-icon-save',disabled:true},
      {code: 'saveReportingWork', name: t('basicData.save'), status: 'primary', icon: 'vxe-icon-save',disabled:true},
      {code: 'saveReportingWorkReview', name: t('reportingWorks.saveAndReview'), status: 'primary', icon: 'vxe-icon-save',disabled:true},
    ],
    // import: false,
    // export: true,
@@ -266,7 +283,7 @@
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
          return t('basicData.total')
        }
        return ''
      })
@@ -275,7 +292,12 @@

})

let brokenRow = ref()
let brokenRow = ref({
  glass_child:'',
  order_number:'',
  technology_number:''

})
const gridEvents = {
  async toolbarButtonClick({code}) {
    const $grid = xGrid.value
@@ -287,7 +309,7 @@
            ElMessage.error(`校验不通过！`)
            return
          }
          saveReportingWork(0)
          saveReportingWork(0,'save')
          break
        }
        case 'saveReportingWorkReview':  {
@@ -296,7 +318,16 @@
            ElMessage.error(`校验不通过！`)
            return
          }
          saveReportingWork(1)
          saveReportingWork(1,'save')
          break
        }
        case 'update':  {
          const errMap = await $grid.validate(true)
          if (errMap) {
            ElMessage.error(`校验不通过！`)
            return
          }
          saveReportingWork(0,'update')
          break
        }
      }
@@ -311,7 +342,6 @@
    //brokenGrid.value.reloadData(brokenRow.damageDetail)
    //改变brokenVisible的值触发openedBrokenTable（）方法
    brokenVisible.value = true
    //console.log(brokenGrid.value)

  }
}
@@ -347,7 +377,7 @@
    showStatus: true
  },//表头参数
  columns: [
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {type: 'seq',fixed:"left", title: t('basicData.Number'), width: 80 },
    // {
    //   field: 'order_number',
    //   title: '序号'
@@ -355,48 +385,48 @@

    {
      field: 'breakageQuantity',
      title: '次破数量',
      title: t('reportingWorks.quantityBroken'),
      editRender: {name: 'input', attrs: {placeholder: ''}}
    },
    {field: 'available',
      title: '可利用',
      title: t('reportingWorks.available'),
      slots: {default: 'available'}
    },
    {field: 'returnProcess', title: '退回工序',
    {field: 'returnProcess', title: t('reportingWorks.returnProcess'),
      editRender: {},
      slots: {default: 'returnProcess_default', edit: 'returnProcess'}
    },
    {
      field: 'breakageType', title: '次破类型',
      field: 'breakageType', title: t('reportingWorks.breakageType'),
      editRender: {},
      slots: {default: 'breakageType_default', edit: 'breakageType'}
    },
    {
      field: 'breakageReason', title: '次破原因',
      field: 'breakageReason', title: t('reportingWorks.breakageReason'),
      editRender: {},
      slots: {default: 'breakageReason_default', edit: 'breakageReason'}
    },
    {
      field: 'responsibleProcess', title: '责任工序',
      field: 'responsibleProcess', title: t('reportingWorks.responsibleProcess'),
      editRender: {},
      slots: {default: 'responsibleProcess_default', edit: 'responsibleProcess'}
    },
    {
      field: 'responsibleEquipment',
      title: '责任设备',
      title: t('reportingWorks.responsibleEquipment'),
      editRender: {},
      slots: {default: 'reportingDeviceSort_default', edit: 'reportingDeviceSort'}
      // editRender: {name: 'input', attrs: {placeholder: ''}}
    },

    {
      field: 'responsibleTeam',  title: '责任班组',
      field: 'responsibleTeam',  title: t('reportingWorks.responsibleTeam'),
      editRender: {},
      slots: {default: 'responsibleTeam_default', edit: 'responsibleTeam'}
    },
    {
      field: 'responsiblePersonnel',
      title: '责任人员',
      title: t('reportingWorks.responsiblePersonnel'),
      editRender: {name: 'input', attrs: {placeholder: ''}}

    },
@@ -442,8 +472,8 @@
  },
  toolbarConfig: {//表头按钮
    buttons: [
      {code: 'addRow', name: '添加', status: 'primary', icon: 'vxe-icon-square-plus'},
      {code: 'removeRow', name: '删除', status: 'primary', icon: 'vxe-icon-delete'},
      {code: 'addRow', name: t('reportingWorks.increase'), status: 'primary', icon: 'vxe-icon-square-plus'},
      {code: 'removeRow', name: t('basicData.delete'), status: 'primary', icon: 'vxe-icon-delete'},
    ],
    // import: false,
    // export: true,
@@ -476,7 +506,6 @@
  addListener(brokenGrid.value,brokenGridOptions)
  let damage =ref(brokenRow.value.damageDetails)
  brokenGrid.value.reloadData(damage.value)
  //console.log(brokenRow.value)
}


@@ -497,16 +526,29 @@
  })

  let reportingWorkNum = isNaN(brokenRow.value.completedQuantity*1)?0:brokenRow.value.completedQuantity*1
  if((breakageQuantityCount+reportingWorkNum>brokenRow.value.quantity*1) ){
  if((breakageQuantityCount>brokenRow.value.quantity*1) ){
    ElMessage.warning(`损耗数:'${breakageQuantityCount}'
                               完工数:'${reportingWorkNum}'之和${breakageQuantityCount+reportingWorkNum}
                               不能大于${brokenRow.value.quantity*1}`)
    return false
  }

  brokenRow.value.completedQuantity = brokenRow.value.quantity-breakageQuantityCount
  breakageQuantityCount = breakageQuantityCount === 0 ? null : breakageQuantityCount
  brokenRow.value.breakageQuantity = breakageQuantityCount
  brokenRow.value.damageDetails=brokenGrid.value.getTableData().fullData
  // xGrid.value.getTableData().fullData.forEach(
  //
  // )
  const equalByOrderNum = xGrid.value.getTableData().fullData.filter((row) =>{
    return row.order_number === brokenRow.value.order_number
  })
  const maxQuantity =  Math.max(...equalByOrderNum.map(item =>item.breakageQuantity || 0))
  equalByOrderNum.forEach((row) =>{
    row.completedQuantity= brokenRow.value.quantity*1-maxQuantity
  })


  getQuantity()

  done()
}

@@ -521,11 +563,38 @@
  }
})

const saveReportingWork = (type) => {
function checkSameNumForId(data, targetId) {
  // 初始化一个对象来存储遇到的id及其对应的num值
  const idNums = {};
  let firstNum = null;

  for (const item of data) {
    if (item.order_number === targetId) {
      // 如果找到了目标id，检查num是否与第一个遇到的num相同
      if (firstNum === null) {
        // 如果是第一个遇到的，记录num值
        firstNum = item.completedQuantity;
      } else if (item.completedQuantity !== firstNum) {
        // 如果num值与第一个遇到的num不同，返回false
        return false;
      }
    }
  }

  // 如果遍历完数组后没有返回false，那么所有具有目标id的对象都具有相同的num值
  return true;
}






const saveReportingWork = (state,saveType) => {

  if(xGrid.value.getTableData().fullData.length===0){
    ElMessage.warning(`请选择流程卡数据`)
    return false
    return
  }
  const device = titleUploadData.value.deviceName
  if(device === null || device === undefined || device === ''){
@@ -537,6 +606,28 @@
    ElMessage.error('请选择报工设备！')
    return
  }

  const seenIds = {}
  const uniqueByOrderNum = xGrid.value.getTableData().fullData.filter(item => {
    // 检查item的id是否已经在seenIds中
    if (!seenIds[item.order_number]) {
      // 如果不在，添加它并返回true以保留这个对象
      seenIds[item.order_number] = true;
      return true;
    }
    // 如果已经在seenIds中，返回false以过滤掉这个对象
    return false;
  });
  const notFinishList = xGrid.value.getTableData().fullData.filter(item =>{
    return item.saveFlag === false
  })
  for(let item of uniqueByOrderNum){
    if(!checkSameNumForId(notFinishList,item.order_number)){
      ElMessage.error(`请检查订单序号: ${item.order_number} 报工数量是否相同！`)
      return false
    }
  }


  titleUploadData.value.creator = user.user.userName
  titleUploadData.value.creatorId = user.user.userId
@@ -553,10 +644,19 @@
  const requestData = {
    title:titleUploadData.value,
    detail:xGrid.value.getTableData().fullData,
    type:type//审核状态
    type:state//审核状态
  }
  gridOptions.toolbarConfig.buttons[0].disabled=true
  gridOptions.toolbarConfig.buttons[1].disabled=true
  if(saveType==='save'){
    saveReportingWorkRequest(requestData)
  }else{
    updateReportingWorkRequest(requestData)
  }

}

const saveReportingWorkRequest = (requestData) =>{
  request.post(`/reportingWork/saveReportingWork`,requestData).then(res =>{
    if (res.code == 200){
      ElMessage.success("报工成功")
@@ -564,18 +664,33 @@
    }else{
      const errorObj = JSON.parse(res.msg)
      const msg = "序号："+errorObj.orderNumber+'\n'
                +'小片顺序：'+errorObj.technologyNumber+'\n'
                +"实际可报工数量："+errorObj.processNum+'<'+
                "报工数量："+errorObj.sumNum+'\n'
                +"请刷新界面重新报工"
          +'小片顺序：'+errorObj.technologyNumber+'\n'
          +"实际可报工数量："+errorObj.processNum+'<'+
          "报工数量："+errorObj.sumNum+'\n'
          +"请刷新界面重新报工"

      ElMessage.error(msg)
    }
  }).catch(err =>{
    ElMessage.error(err.message)
  }).finally(()=>{

    gridOptions.toolbarConfig.buttons[0].disabled=false
    gridOptions.toolbarConfig.buttons[1].disabled=false
  })
}

//更新报工数据
const updateReportingWorkRequest = (requestData) =>{
  request.post(`/reportingWork/updateReportingWork`,requestData).then(res =>{
    if (res.code == 200){
      ElMessage.success("报工修改成功")
      router.push({path:'/main/reportingWorks/AddReportingWork',
        query:{
          processId:titleUploadData.value.processId,
          random:Math.random()}
      })
    }
  })
}

@@ -656,17 +771,17 @@
const getWork = () => {

  let processId = titleUploadData.value.processId
  if (processId.indexOf("/") < 0) {

    ElMessage.warning("请输入正确格式流程卡")
    return
  }
  let indexOfChar = processId.indexOf("/")
  let leftString = processId.slice(0, indexOfChar)
  if (leftString.length != 13) {
    ElMessage.warning("请输入正确位数的流程卡")
    return
  }
  // if (processId.indexOf("/") < 0) {
  //
  //   ElMessage.warning("请输入正确格式流程卡")
  //   return
  // }
  // let indexOfChar = processId.indexOf("/")
  // let leftString = processId.slice(0, indexOfChar)
  // if (leftString.length != 13) {
  //   ElMessage.warning("请输入正确位数的流程卡")
  //   return
  // }
//工序
  let process = titleUploadData.value.thisProcess
  if (process == "" || process == null) {
@@ -719,7 +834,7 @@
      }

      //判断早晚班
      titleUploadData.value.classes='早班'
      titleUploadData.value.classes=t('reportingWorks.early')
      titleUploadData.value.reportingWorkTime = formatCurrentTime()
      //绑定下方表格
      detail.value = res.data.Detail
@@ -781,7 +896,26 @@
        item.completedQuantity=row.completedQuantity
      }
    })
    getQuantity()
  }
}
const  getQuantity = () => {
  const arr = xGrid.value.getTableData().fullData
  const returnArr =  arr.filter((obj, index, self) =>
      self.findIndex((t) => t.order_number === obj.order_number) === index
  )


  let sumBreak = 0
  let sumQuantity = 0
  returnArr.forEach((item)=>{
    sumQuantity+=Number(item.completedQuantity*1)
  })
  arr.forEach((item)=>{
    sumBreak+=Number(item.breakageQuantity) || 0
  })
  titleUploadData.value.thisCompletedQuantity = sumQuantity
  titleUploadData.value.thisWornQuantity = sumBreak
}

</script>
@@ -789,9 +923,10 @@
<template>
  <div style="height: 100%;width: 100%">
    <div id="head" style="height: 5%;width: 100%;margin-bottom: 5px">
      <el-input v-model="titleUploadData.processId" placeholder="流程卡号" style="width: 200px" @keyup.enter.native="getWork"/>
      <el-input :disabled="inputDisabled" v-if="titleUploadData.reportingWorkId" v-model="titleUploadData.reportingWorkId" placeholder="报工编号" style="width: 200px" />
      <el-input :disabled="inputDisabled" v-model="titleUploadData.processId" placeholder="流程卡号" style="width: 200px" @keyup.enter.native="getWork"/>
      &nbsp;
      <el-select v-model="titleUploadData.thisProcess" clearable placeholder="请选择工序" style="width: 120px"
      <el-select :disabled="inputDisabled" v-model="titleUploadData.thisProcess" clearable placeholder="请选择工序" style="width: 120px"
                 @change="getWork">
        <el-option
            v-for="item in titleSelectJson['processType']"
@@ -801,39 +936,40 @@
        />
      </el-select>
      &nbsp;
      <el-button :disabled="disabledFlag" :loading="loadingFlag" @click="reviewReportingWork" type="primary">审核通过</el-button>
      <el-button :disabled="disabledFlag" :loading="loadingFlag" @click="reviewReportingWork" type="primary">{{$t('reportingWorks.passAudit')}}
      </el-button>
<!--      <el-button type="primary">审核不通过</el-button>-->
      &nbsp;
      <label>流程卡面积：xxx平方米</label>
      <label>{{$t('reportingWorks.processCardArea')}}：</label>
    </div>
    <div style="background-color: white;margin-bottom: 5px;height: 17%;width: 100%">
      <el-row>
        <el-col :span="2">
          <el-text>销售单号：</el-text>
          <el-text>{{$t('order.orderId')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-text>{{ titleUploadData.orderId }}</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>生产订单号：</el-text>
          <el-text>{{$t('workOrder.productionId')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-text>{{ titleUploadData.productionId }}</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>客户编码：</el-text>
          <el-text>{{$t('processCard.customerId')}}：</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>{{ titleUploadData.order.customerId }}</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>客户名称：</el-text>
          <el-text>{{$t('processCard.customerName')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-text class="customClass"></el-text>
        </el-col>
        <el-col :span="2">
          <el-text>项目名称：</el-text>
          <el-text>{{$t('order.project')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-text wrap-text="false">{{ titleUploadData.order.project }}</el-text>
@@ -842,10 +978,10 @@
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-text>报工设备：</el-text>
          <el-text>{{$t('reportingWorks.deviceType')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-select v-model="titleUploadData.deviceName" clearable placeholder="请选择设备">
          <el-select v-model="titleUploadData.deviceName" clearable :placeholder="$t('reportingWorks.pleaseDevice')">
            <el-option
                v-for="item in titleSelectJson['deviceType']"
                :key="item.id"
@@ -855,27 +991,27 @@
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-text>上工序：</el-text>
          <el-text>{{$t('reportingWorks.previousProcess')}}：</el-text>
        </el-col>
        <el-col :span="3">

          <el-text>{{ titleUploadData.previousProcess }}</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>可报工数量：</el-text>
          <el-text>{{$t('reportingWorks.numberReported')}}：</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>{{ titleUploadData.previousProcessQuantity }}</el-text>

        </el-col>
        <el-col :span="2">
          <el-text>本工序完工：</el-text>
          <el-text>{{$t('reportingWorks.thisCompletedQuantity')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-text>{{ titleUploadData.thisCompletedQuantity }}</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>本工序次破：</el-text>
          <el-text>{{$t('reportingWorks.thisWornQuantity')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-text>{{ titleUploadData.thisWornQuantity }}</el-text>
@@ -884,10 +1020,10 @@
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-text>报工班组：</el-text>
          <el-text>{{$t('reportingWorks.teamsType')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-select v-model="titleUploadData.teamsGroupsName" clearable placeholder="请选择班组">
          <el-select v-model="titleUploadData.teamsGroupsName" clearable :placeholder="$t('reportingWorks.selectTeam')">
            <el-option
                v-for="item in titleSelectJson['teamsType']"
                :key="item.id"
@@ -897,10 +1033,10 @@
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-text>班次：</el-text>
          <el-text>{{$t('reportingWorks.classes')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-select v-model="titleUploadData.classes" class="processesSt" placeholder="">
          <el-select v-model="titleUploadData.classes" class="processesSt" :placeholder="$t('reportingWorks.selectClasses')">
            <el-option
                v-for="item in classesOption"
                :key="item.value"
@@ -910,14 +1046,14 @@
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-text>下工序：</el-text>
          <el-text>{{$t('reportingWorks.nextProcess')}}：</el-text>
        </el-col>
        <el-col :span="2">
          <el-text>{{ titleUploadData.nextProcess }}</el-text>

        </el-col>
        <el-col :span="2">
          <el-text>报工日期：</el-text>
          <el-text>{{$t('reportingWorks.reportingWorkTime')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-date-picker
@@ -930,7 +1066,7 @@
          />
        </el-col>
        <el-col :span="2">
          <el-text>备注：</el-text>
          <el-text>{{$t('basicData.remarks')}}：</el-text>
        </el-col>
        <el-col :span="3">
          <el-input v-model="titleUploadData.notes" placeholder="" />
@@ -968,7 +1104,8 @@
          v-model="brokenVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="破损列表"
          :title="$t('reportingWorks.damageList')+':'
          +brokenRow.glass_child+'.'+brokenRow.order_number+'.'+brokenRow.technology_number"
          style="width: 80%;height:75% ">
        <vxe-grid