Browse Source

邱晨:在采购收货申请模块,进行新增单据时,如存在多个明细时,下方“滑杆”不显示,需要反复滑动滚轮进行查看表头。

hella_online_20240829
wangyufei 3 months ago
parent
commit
ac214a8b52
  1. 12
      src/components/BasicForm/src/BasicForm.vue
  2. 15
      src/components/TableForm/src/TableForm.vue
  3. 31
      src/directives/permission/clientTable.ts

12
src/components/BasicForm/src/BasicForm.vue

@ -7,7 +7,7 @@
:vLoading="formLoading"
@updateFullscreen="updateFullscreen"
>
<div style="overflow-y: auto" :style="{ 'max-height': formHeight }">
<div style="overflow-y: auto" :style="formHeight">
<Form
ref="formRef"
:rules="rules"
@ -79,7 +79,6 @@
<TableForm
ref="tableFormRef"
class="w-[100%]"
:maxHeight="490"
:tableFields="tableAllSchemas.tableFormColumns"
:tableData="tableData"
:tableFormRules="tableFormRules"
@ -351,9 +350,14 @@ if (props.basicFormWidth) {
} else {
dialogWidth.value = props.isBusiness ? '60%' : '40%'
}
const formHeight = ref('60vh')
const formHeight = ref({
height:'60vh'
})
const updateFullscreen = (isFullscreen) => {
formHeight.value = isFullscreen ? 'auto' : '60vh'
formHeight.value.height = isFullscreen ? 'auto' : '60vh'
nextTick(()=>{
tableFormRef.value.reloadFullscreen(isFullscreen)
})
}
const dialogVisible = ref(false) //

15
src/components/TableForm/src/TableForm.vue

@ -1,12 +1,15 @@
<!-- 附件组件 -->
<template>
<div class="table-form">
<el-table
<el-table v-clientTableForm="{
isShowPagination:tableData.length > 10,
isShowButton: isShowButton || isShowReduceButtonSelection,
isFullscreen:isFullscreen
}"
class="multipleTableComponents"
ref="TableBaseComponents_Ref"
v-loading="tableLoading"
:data="showTableData()"
:max-height="maxHeight"
row-key="id"
:border="border"
@selection-change="tableSelectionChange"
@ -725,11 +728,17 @@ if(headerItem?.tableForm?.valueField){
return op.value
}
}
const isFullscreen = ref(false)
const reloadFullscreen = (fullscreen)=>{
isFullscreen.value = fullscreen
}
// setup
defineExpose({
TableBaseComponents_Ref,
validateForm,
keyWord
keyWord,
reloadFullscreen
})
</script>

31
src/directives/permission/clientTable.ts

@ -41,4 +41,35 @@ export function clientTable(app: App<Element>) {
}
})
})
app.directive('clientTableForm', (el, binding) => {
nextTick(() => {
let {isShowPagination,isShowButton,isFullscreen} = binding.value
console.log('clientTableForm')
let footerHeight = 0
let headerHeight = 0
el.offsetParent.children.forEach(element => {
if(element.className=='el-dialog__footer'){
footerHeight = element.clientHeight
}
if(element.className=='el-dialog__header'){
headerHeight = element.clientHeight
}
});
console.dir(el)
let top = el.getBoundingClientRect().top
let tableFormTop = top - el.offsetParent.offsetTop
console.log(top)
console.log(el.offsetParent.offsetTop)
console.log(el.offsetParent.clientHeight)
let height = el.offsetParent.clientHeight - tableFormTop - footerHeight - 30
if(isShowPagination){
height = height- 34
}
if(isShowButton){
height = height- 50
}
console.log(height)
el.style.height = height + 'px'
})
})
}

Loading…
Cancel
Save