wuyouming666
2024-03-27 c3b42fbcc43dad7a8c4c06803464e76b4fe8501d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
<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 {useRouter} from  'vue-router'
import Sortable from 'sortablejs'
import BasicTable from ''
import {VXETable} from "vxe-table";
let productGlassTypeStore = useProductGlassTypeStore()
let router=useRouter()
//监听玻璃类型改变
let productList = ref([])
let date=ref(['',''])
 
 
 
let glassType = ref([])
watch(productGlassTypeStore,(newVal,oldVal) => {
 
 
})
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': {
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}*/
 
// const getCheckList = (row) =>{
//   alert('我接收到子组件传送的确认复选框信息可在控制台查看')
// }
 
 
const xGrid = ref()
const gridOptions = reactive({
  loading: true,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 60, 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},
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
    {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)
    }
  })
}
 
 
 
 
 
/*后端返回结果多层嵌套展示*/
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"
        max-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.split('.')[0]][item.field.split('.')[1]] }}</span>
            <span v-else>{{ row[item.field] }}</span>
 
          </li>
        </ul>
      </template>
 
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" 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>
 
 
    </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>