Merge branch 'master' of https://gitee.com/a1536384743/erp_-override

廖井涛

2024-04-23 2f894921e5cf74910805f08a5e3180b68ac09e18

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

New file
@@ -0,0 +1,442 @@
<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 {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 {VXETable} from "vxe-table";
let productGlassTypeStore = useProductGlassTypeStore()
let router=useRouter()
//监听玻璃类型改变
let productList = ref([])
let date=ref(['',''])
productGlassTypeStore.GlassType=['','']

let props = defineProps({
  rowIndex:{}
})

let glassType = ref([])

const getProduct = () => {
  request.post(`/product/1/100/${productGlassTypeStore.GlassType}`,filterData.value).then((res) => {
    if(res.code==200){
      pageTotal.value=res.data.total
      xGrid.value.loadData(res.data.data)
      gridOptions.loading=false
    }else{
      ElMessage.warning(res.msg)
    }
  })
}





//定义滚动条高度
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 filterData = ref({
  basicGlassType:{
    typeName:''
  }
})
//定义页面总页数
let pageTotal=ref('')
//定义数据返回结果
let produceList = ref([])
//定义当前页数
let pageNum=$ref(1)
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{
        //判断是否是最大页面
        if (pageNum>=pageTotal.value){
          //ElMessage.warning("没有更多数据了")
          return
        }
        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.post(`/product/${pageNum}/100/${productGlassTypeStore.GlassType}`,filterData.value).then((res) => {
      try{
        if(res.code==200){
          if(pageState){
            produceList = produceList.concat(res.data.data)
            if(produceList.length>500){
              produceList=produceList.slice(100,600)
            }
          }else{
            produceList = res.data.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
      }
    })
  }




})


//第一次加载数据
request.post(`/product/1/100/${productGlassTypeStore.GlassType}`,filterData.value).then((res) => {
  if(res.code==200){
    pageTotal.value=res.data.total
    produceList = produceList.value.concat(deepClone(res.data.data))
    xGrid.value.reloadData(produceList)
    gridOptions.loading=false
  }else{
    ElMessage.warning(res.msg)
  }
})
//删除与编辑方法
const getTableRow =  (row,type) => {
  switch (type) {
    case 'edit': {
      router.push({path:'/main/product/createProduct',query:{id:row.id}})
      break
    }
    case 'delete': {
      request.post(`/product/deleteProductById/${row.id}`).then((res) => {
        if(res.code==200){
          //router.push("/main/product/selectProduct")
          router.go(0)
          ElMessage.success('删除成功')
        }else{
          ElMessage.warning(res.msg)
        }
      })
      break
    }

  }
}






const xGrid = ref()
const gridOptions = reactive({
  height:'100%',
  loading: true,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
  id: 'demo_1',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollX:{enabled: true},
  scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 60},
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
    {field:'state',title: '审核', width: 40, slots: { default: 'state' }},
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {field: 'id', title: '编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false},
    {field: 'productName', title: '名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false},
    {field: 'basicGlassType.typeName', title: '所属类别',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false},
    {field: 'query', title: '快速查询',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false},
    {field: 'remarks', title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false},
    {field: 'creator', title: '创建人',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false},
    {field: 'createTime', title: '创建时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: false}
  ],//表头参数
  data:null,//表格数据
  toolbarConfig: {
    buttons: [],
    // import: false,
    // export: true,
    // print: true,
    zoom: true,
    custom: true
  },
  footerMethod ({ columns, data }) {//页脚函数
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return `${pageNum}/${pageTotal.value}`
        }

        return ''
      })
    ]
  }

})


/*使用筛选，后端获取数据*/
const changeFilterEvent = (event, option, $panel,) => {
  // 手动触发筛选
  $panel.changeOption(event, !!option.data, option)
}
function filterChanged(column){
  gridOptions.loading=true
  //筛选条件发生变化条件发生变化
  let value = column.datas[0]!=undefined?column.datas[0]:''
  value = value.trim()
  //判断是否存在外键
  if (column.property.indexOf('.')>-1){
    const  columnArr = column.property.split('.')
    filterData.value[columnArr[0]] = {
      [columnArr[1]]:value
    }
  }else{
    filterData.value[column.property] = value
  }
  request.post("/product/1/100/"+productGlassTypeStore.GlassType,filterData.value).then((res) => {
    if(res.code==200){
      pageTotal.value=res.data.total
      pageNum=1
      produceList = deepClone(res.data.data)
      xGrid.value.loadData(produceList)
      gridOptions.loading=false
    }else{
      ElMessage.warning(res.msg)
    }
  })
}

let emit = defineEmits([
    'getProductRow'
])

const emitParent = (row) => {
  emit('getProductRow', row)
}


/*后端返回结果多层嵌套展示*/
const hasDecimal = (value) => {
  const regex = /\./; // 定义正则表达式，查找小数点
  return regex.test(value); // 返回true/false
}

/*表格拖拽*/
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>

<template>

  <div style="width: 100%;height: 100%">
      <glass-type   style="float: left" />
      <el-button
          @click="getProduct"
          id="select"
          type="primary" :icon="Search">查询</el-button>



    <vxe-grid
        @filter-change="filterChanged"
        height="100%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
        @scroll ="scrollEvnt"

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

          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }" v-if="!props.rowIndex">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-popconfirm @confirm="getTableRow(row,'delete')" title="确认删除产品?">
          <template #reference>
            <el-button  link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
      <template #button_slot="{ row }" v-else>
        <el-button @click="emitParent(row)" link type="primary" size="small">添加</el-button>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
      <template #state="{ row,column}">
        <el-checkbox @click.native.prevent   :checked="row[column.field]===1"/>
      </template>

    </vxe-grid>


<!--      <basic-table-->
<!--           style="height: 97%" v-if="flag"-->
<!--          :tableProp="tableProp"-->
<!--          @getCheckList="getCheckList"-->
<!--          @getChildren="getChildren"-->
<!--      ></basic-table>-->
  </div>
</template>

<style scoped>
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: white;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}
</style>