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

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

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