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

chenlu

2024-01-05 2ce4792824c3c85faa5137df546953fc0ba8e5fc

 north-glass-erp/northglass-erp/src/views/sd/product/SelectProduct.vue

@@ -1,17 +1,16 @@
<script setup>
<script lang="ts" setup>
import request from "@/utils/request"
import deepClone from "@/utils/deepClone"
import {ElDatePicker, ElMessage} from "element-plus"
import useProductGlassTypeStore from "@/stores/sd/product/productGlassType"
import useProductStore from "@/stores/sd/product/prduct"
import {onMounted, reactive, ref, watch} from "vue"
import {nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue"
import {Search} from "@element-plus/icons-vue"
import GlassType from "@/components/sd/product/GlassType.vue"
import {useRouter} from  'vue-router'
import Sortable from 'sortablejs'
import BasicTable from '@/components/basic/BasicTable.vue'
import scrollEvnt from "@/hook";
import {VXETable} from "vxe-table";
let productGlassTypeStore = useProductGlassTypeStore()
let productStore = useProductStore()
let router=useRouter()
//监听玻璃类型改变
watch(productGlassTypeStore,(newVal,oldVal) => {
@@ -20,54 +19,100 @@
  })
})

let scrollTop =ref(null)
let scrollHeight =ref(null)
let clientHeight =ref(null)
const  scrollEvnt = (row) => {
  // 内容高度
  scrollTop.value = row.$event.target.scrollTop
  scrollHeight.value = row.$event.target.scrollHeight
  clientHeight.value = row.$event.target.clientHeight
}


let produceList = ref([])
let pageNum=$ref(1)
watch(productStore,(newVal,oldVal) => {
  if(newVal.flag===true){
let pageState = null
//监听产品滚动条状态，滚动到底部向后端请求数据
watch(scrollTop,(newVal,oldVal) => {
  //判断当前状态查询状态
  if(pageState!==null){
    return;
  }
  //判断滚动条上下滚动不是左右滚动，当左右滚动直接返回
  if((newVal === oldVal && newVal===0) || oldVal===null){
    return;
  }
  //判断是否滚到底部
  if ((Math.round(scrollTop.value + clientHeight.value)+5 >= scrollHeight.value ) ) {
    if(newVal>oldVal){
      //判断当前容器长度是否为500，并且当前页小于容器总数量
      if(produceList.length===500 && pageNum<(produceList.length/100)){
        pageNum=pageNum+5
      }else{
    pageNum=pageNum+1
      }
      pageState=true
    }
  }else if(newVal===0 && oldVal>0 && pageNum>1  ){  //判断是否滚到顶部并且大于容器数量
    //判断向上滚动当前页数是否大于容器数值
    if(pageNum>5){
      pageNum=pageNum-5
    }else if((produceList.length/100)>=5) {
      pageNum=pageNum-1
    }else{
      return
    }
    pageState =false
  }
  if(pageState!==null){
    gridOptions.loading=true
    request.get(`/product/${pageNum}/100`).then((res) => {
      try{
        if(res.code==200){
          if(pageState){
            produceList = produceList.concat(res.data)
            if(produceList.length>500){
              produceList=produceList.slice(100,600)
            }
          }else{
            produceList = res.data.concat(produceList)
            if(produceList.length>500){
              produceList=produceList.slice(0,500)
            }
          }
          xGrid.value.reloadData(produceList)
          pageState=null
        }else{
          ElMessage.warning(res.msg)
        }
      }finally {
        gridOptions.loading=false
      }
    })
  }


    //后端获取有多少页，超过多少页不再请求
    /*if(pageNum>5){
      console.log(newVal.pageNum)
      return
    }*/
    request.get(`/product/${pageNum}/100`).then((res) => {
      gridOptions.loading=true
      try{
        if(res.code==200){
          gridOptions.data=  gridOptions.data.concat(res.data)
          newVal.flag=false
          setTimeout(()=>{
            gridOptions.loading=false
          },1000)
        }else{
          ElMessage.warning(res.msg)
        }
      }finally {

      }
    })
  }

})

let flag = $ref(false)
request.get("/product/1/100").then((res) => {
  if(res.code==200){
    gridOptions.data= deepClone(res.data)
    flag = true
    produceList = produceList.value.concat(deepClone(res.data))

    xGrid.value.reloadData(produceList)
    gridOptions.loading=false
  }else{
    ElMessage.warning(res.msg)
    router.push("/login")
  }
})

//子组件接收参数
let tableProp = $ref({
  datas:null,
  footList:[],
  //筛选条件列
  filter:{
  },
})




@@ -91,18 +136,19 @@

const xGrid = ref()
const gridOptions = reactive({
  loading: false,
  loading: true,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  rowConfig: {isCurrent: true, isHover: true,height: 60, useKey: true},//鼠标移动或选择高亮
  id: 'demo_1',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true ,gt:100},//开启虚拟滚动
  scrollX:{enabled: true},
  scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
@@ -139,7 +185,6 @@
    zoom: true,
    custom: true
  },
  data:  null,//table body实际数据
  footerMethod ({ columns, data }) {//页脚函数
    return[
      columns.map((column, columnIndex) => {
@@ -154,9 +199,55 @@
})


let sortable2: any

const columnDrop2 = () => {
  const $grid = xGrid.value
  sortable2 = Sortable.create($grid.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), {
    handle: '.vxe-header--column',
    onEnd: (sortableEvent) => {
      const targetThElem = sortableEvent.item
      const newIndex = sortableEvent.newIndex
      const oldIndex = sortableEvent.oldIndex
      const { fullColumn, tableColumn } = $grid.getTableColumn()
      const wrapperElem = targetThElem.parentNode
      const newColumn = fullColumn[newIndex]
      if (newColumn.fixed) {
        // 错误的移动
        const oldThElem = wrapperElem.children[oldIndex]
        if (newIndex > oldIndex) {
          wrapperElem.insertBefore(targetThElem, oldThElem)
        } else {
          wrapperElem.insertBefore(targetThElem, oldThElem ? oldThElem.nextElementSibling : oldThElem)
        }
        VXETable.modal.message({ content: '固定列不允许拖动！', status: 'error' })
        return
      }
      // 获取列索引 columnIndex > fullColumn
      const oldColumnIndex = $grid.getColumnIndex(tableColumn[oldIndex])
      const newColumnIndex = $grid.getColumnIndex(tableColumn[newIndex])
      // 移动到目标列
      const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
      fullColumn.splice(newColumnIndex, 0, currRow)
      $grid.loadColumn(fullColumn)
    }
  })
}

let initTime: any
nextTick(() => {
  // 加载完成之后在绑定拖动事件
  initTime = setTimeout(() => {
    columnDrop2()
  }, 500)
})

onUnmounted(() => {
  clearTimeout(initTime)
  if (sortable2) {
    sortable2.destroy()
  }
})


</script>
@@ -184,9 +275,9 @@
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row }">
        <ul class="expand-wrapper">
          <li  v-for="(item,key) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!=undefined ">
            <span style="font-weight: bold">{{item.title+':  '}}</span>
            <span>{{ row[item.field] }}</span>
          </li>
        </ul>
      </template>