右键菜单以及拖选

guoyuji

2024-02-29 5e3a8bcac219d13667853eab7f293b85f5b6f2db

右键菜单以及拖选

 north-glass-erp/northglass-erp/src/hook/mouseMove.ts

@@ -11,7 +11,12 @@
//获取页面ref节点
//获取vxetable表格节点
let xGrid = ref()
let cellarea = ref()
let cellarea = ref(`
    <div class="vxe-table--cell-area"  >
      <span  class="vxe-table--cell-main-area"  ></span>
      <span class="vxe-table--cell-active-area"  ></span>
    </div>
`)
let leftfixedcellarea = ref()
let rightfixedcellarea = ref()
const getTablexGrid = () => {
@@ -19,10 +24,14 @@
}

//添加事件
const addListener = (xGrids,gridOption,cellareas) => {
const addListener = (xGrids,gridOption) => {
    xGrid.value = xGrids
    gridOptions = gridOption
    cellarea.value = cellareas
    let newElement = document.createElement('div')
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(cellarea.value, 'text/html')
    newElement.innerHTML = htmlDoc.body.innerHTML
    //cellarea.value = newElement
    //添加多选列
    nextTick(() => {
        window.addEventListener("mousedown", tableOutDestroyAreaBox)//给window添加鼠标按下事件,判断是否在表格外,是销毁
@@ -39,7 +48,7 @@
        let bodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper")//获取正常区域的body
        if (bodyWrapper) {
            //注意这里的ref名称，这里是非fixed区域的框的名称
            bodyWrapper.appendChild(cellarea.value)//添加范围框元素
            bodyWrapper.appendChild(newElement)//添加范围框元素
            // let geticon = document.getElementById("getIcon")
            // geticon.addEventListener("click", ()=>{
            //     alert(2)

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

@@ -83,6 +83,8 @@
          { code: 'deleteRow', name: '删除', prefixIcon: 'vxe-icon-delete', visible: true, disabled: true },
          { code: 'copyChecked', name: '选中相同', prefixIcon: 'vxe-icon-copy', visible: true, disabled: false },
          { code: 'copyAll', name: '之后相同', prefixIcon: 'vxe-icon-feedback', visible: true, disabled: false },
          { code: 'clearChecked', name: '清除选中', prefixIcon: 'vxe-icon-indicator', visible: true, disabled: false },
          { code: 'computedMoney', name: '计算金额', prefixIcon: 'vxe-icon-chart-bar-x', visible: true, disabled: true },
        ]
      ]
    }
@@ -131,6 +133,9 @@
      { min: 0, max: 255, message: '名称长度在 0 到 255 个字符' }
    ],
    productId: [
      { required: true, message: '请选择产品' }
    ],
    productName: [
      { required: true, message: '请选择产品' }
    ],
    price: [
@@ -243,6 +248,11 @@
            ElMessage.error('没有表格数据！')
            return
          }
          if(!gridOptions.menuConfig.body.options[0][5].disabled){
            ElMessage.error('请先打开右击菜单重新计算金额后，再保存！')
            return
          }

          const project = titleUploadData.value.project
          if(project === null || project === undefined || project === ''){
            ElMessage.error('输入项目名称！')
@@ -302,6 +312,7 @@
          $grid.remove(rowClickIndex.value)
          rowClickIndex.value = null
          gridOptions.menuConfig.body.options[0][1].disabled=true
          gridOptions.menuConfig.body.options[0][5].disabled=false
          break
        }
        case 'copyChecked' :{
@@ -315,6 +326,7 @@
              }
            })
          }
          gridOptions.menuConfig.body.options[0][5].disabled=false
          break
        }
        case 'copyAll' :{
@@ -328,6 +340,34 @@
              }
            })
          }
          gridOptions.menuConfig.body.options[0][5].disabled=false
          break
        }
        case 'clearChecked' :{
          let result = toolbarButtonClickEvent()
          if(result){
            const dataList = xGrid.value.getTableData().visibleData
            dataList.forEach((item,index) =>{
              if(index>=result.start && index<=result.end){
                item[result.cell] = ''
              }
            })
          }
          gridOptions.menuConfig.body.options[0][5].disabled=false
          break
        }
        case 'computedMoney' :{
          const  dataList = xGrid.value.getTableData().fullData
          dataList.forEach((item,index) =>{
            item.area = area(item)
            item.grossArea = countArea(item)
            item.computeArea = item.area
            item.computeGrossArea = item.grossArea
            item.grossAmount=parseFloat((item.price * item.computeGrossArea).toFixed(2))
          })
          titleUploadData.value.money=countMoney(xGrid.value.getTableData().fullData).toString()

          gridOptions.menuConfig.body.options[0][5].disabled=true
          break
        }
      }
@@ -354,8 +394,7 @@
//初始化判断是否有id传入
onMounted(()=>{
  //启用表格拖动选中
  addListener(xGrid.value,gridOptions,cellArea.value)

  addListener(xGrid.value,gridOptions)
  const str = route.query.orderId
  if (typeof str === 'undefined' || str === null || str === '' || str === '\n' || str === '\r'){
    return
@@ -686,11 +725,11 @@
      <select-product :rowIndex="rowIndex" @getProductRow="getProductRow" style="width: 100%;height: 100%" />
    </el-dialog>
<!--选中表格 -->
    <div class="vxe-table--cell-area" ref="cellArea" >
      <span  class="vxe-table--cell-main-area"  ></span>
<!--    <div class="vxe-table&#45;&#45;cell-area" ref="cellArea" >-->
<!--      <span  class="vxe-table&#45;&#45;cell-main-area"  ></span>-->

      <span class="vxe-table--cell-active-area"  ></span>
    </div>
<!--      <span class="vxe-table&#45;&#45;cell-active-area"  ></span>-->
<!--    </div>-->

  </div>
</template>

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

@@ -240,7 +240,7 @@
</script>

<template>
  <div  style="width: 100%;height: 100%">
  <div  style="width: 100%;height: 100% ;">
    <el-date-picker
        v-model="selectDate"
        type="daterange"
@@ -254,7 +254,7 @@
    <vxe-grid
        @filter-change="filterChanged"
        @cell-dblclick="cellClickEvent"
        max-height="97%"
        style="max-height: 95%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"