Commit 0a15c831 authored by jingnan's avatar jingnan 👀

领用出库确认,生产准备工确认右侧样式修改

parent b3324372
<template>
<div class="matchConfirmRight">
<split-pane
ref="splitPane"
:min-percent="20"
:default-percent="30"
split="horizontal"
:class="['detail-pane','collapse']"
>
<template slot="paneL">
<div class="table-box">
<dee-as-com
ref="outStorageMatch"
:table-height="autoTopHeight"
:basic-data=" { selectData: selectData }"
:lay-config="{ typeName: 'OutStorageMatch', layKey: 'batchSign_OutStorageMatch'}"
@selectionChange="selectionChange"
/>
</div>
</template>
<template slot="paneR">
<div class="detail">
<split-pane
ref="splitPaneInner"
:min-percent="20"
:default-percent="30"
split="horizontal"
:class="['detail-pane','collapse']"
>
<template slot="paneL">
<div class="table-box">
<dee-as-com
ref="outStorageMatchItem"
:lay-config="{ typeName: 'OutStorageMatchItem', layKey: 'batchSign_OutStorageMatchItem'}"
:table-height="autoBottomHeight"
@selectionChange="selectionChange_item"
/>
</div>
</template>
<template slot="paneR">
<div class="detail">
<dee-as-com
ref="jobResponseOutStorageMatch"
table-height="100%"
:lay-config="{ typeName: 'JobResponseOutStorageMatch', layKey: 'batchSign_JobResOutStorageMatch'}"
@selectionChange="selectionChange_jobRes"
/>
</div>
</template>
</split-pane>
</div>
</template>
</split-pane>
</div>
</template>
<script>
export default {
name: 'MatchConfirmRight',
components: {},
props: {
selectData: {
type: Object,
default: () => {}
}
},
data() {
return {
selectionRows: [],
selectionItemRows: [],
selectionJobResRows: [],
autoBottomHeight: '280px',
autoTopHeight: '280px'
}
},
computed: {},
watch: {},
created() {},
mounted() {
this.$bus.$on('refreshMatchConfirm', (hasFlag) => {
this.$nextTick(() => {
this.selectionChange(this.selectionRows)
this.selectionChange_item(this.selectionItemRows)
})
})
this.$nextTick(function() {
const splitPane = this.$refs.splitPane
const height = document.getElementById('app').offsetHeight
if (splitPane) {
this.$watch(
function() {
return splitPane.percent
},
(val, oval) => {
this.autoTopHeight = val / 100 * height - 80 + 'px'
// this.autoBottomHeight = (100 - val) / 100 * height - 270 + 'px'
}
)
}
})
},
// 组件方法
methods: {
selectionChange(val) {
this.selectionRows = val
const requestIds = val && val.map(item => item.id)
this.$refs.outStorageMatchItem.$refs.asCom.getData(requestIds)
},
selectionChange_item(val) {
this.selectionItemRows = val
const itemIds = val && val.map(item => item.id)
this.$refs.jobResponseOutStorageMatch.$refs.asCom.getData(itemIds)
},
selectionChange_jobRes(val) {
this.selectionJobResRows = val
},
init(checkList) {
const aoIds = checkList && checkList.map(item => item.id)
this.$refs.outStorageMatch.$refs.asCom.getData(aoIds)
}
}
}
</script>
<style lang='scss'>
.matchConfirmRight{
overflow: auto;
width: 100%;
height: 100%;
box-sizing: border-box;
padding-left: 8px;
// .sub-title{
// padding-top: 0px!important;
// }
.splitter-pane-resizer.horizontal {
opacity: 1;
background-color: #F1F4F5;
height: 8px;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
}
.detail{
height: 100%;
background-color: #fff;
}
.dee-table{
.dee-tools {
margin: 2px 0!important;
}
.dee-table-config-bar{
margin: 2px 0!important;
}
.dee-table-pagination {
margin-top: 12px!important;
}
}
}
</style>
<template>
<div class="proPreConfirmRight">
<split-pane
ref="splitPane"
:min-percent="30"
:default-percent="47"
split="horizontal"
:class="['detail-pane','collapse']"
>
<template slot="paneL">
<div class="table-box">
<dee-as-com
ref="requestTable"
:basic-data=" { selectData,...currentLeftData,selectionRows}"
......@@ -10,18 +19,25 @@
<dee-as-com
ref="itemsTable"
:lay-config="{ typeName: 'OutStorageOutItem', layKey: 'edit_outStorageOutItem_confirm'}"
table-height="35%"
:table-height="autoTopHeight"
:basic-data=" { selectData,selectionRowsItem,...currentLeftData }"
@selectionChange="selectionChangeItem"
/>
</div>
</template>
<template slot="paneR">
<div class="detail">
<dee-as-com
ref="responseTable"
:lay-config="{ typeName: 'JobResponseOutStorageOut', layKey: 'batchSign_outStorageOutJobResponse'}"
table-height="47%"
:table-height="autoBottomHeight"
:basic-data=" { selectData,selectionRowsRes,...currentLeftData }"
@selectionChangeRes="selectionChangeRes"
/>
</div>
</template>
</split-pane>
</div>
</template>
<script>
......@@ -43,7 +59,9 @@ export default {
selectionRows: [],
selectionRowsItem: [],
selectionRowsRes: [],
topLayKey: 'e3b7e2e1-af45-4e28-99f6-6f7583d2c216'
topLayKey: 'e3b7e2e1-af45-4e28-99f6-6f7583d2c216',
autoBottomHeight: '100%',
autoTopHeight: '300px'
}
},
computed: {},
......@@ -68,6 +86,21 @@ export default {
this.$bus.$on('refreshUseItemConfirm', (data) => {
this.$refs.itemsTable && this.$refs.itemsTable.$refs.asCom.getData()
})
this.$nextTick(function() {
const splitPane = this.$refs.splitPane
const height = document.getElementById('app').offsetHeight - 140
if (splitPane) {
this.$watch(
function() {
return splitPane.percent
},
(val, oval) => {
this.autoTopHeight = val / 100 * height - 120 + 'px'
// this.autoBottomHeight = (100 - val) / 100 * height - 270 + 'px'
}
)
}
})
},
// 组件方法
methods: {
......@@ -99,6 +132,17 @@ export default {
padding-left: 8px;
.sub-title{
padding-top: 10px!important;
}
.splitter-pane-resizer.horizontal {
opacity: 1;
background-color: #F1F4F5;
height: 8px;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
}
.detail{
height: 100%;
background-color: #fff;
}
.dee-table{
.dee-tools {
......
<template>
<div class="proPreConfirmRight">
<split-pane
ref="splitPane"
:min-percent="30"
:default-percent="60"
split="horizontal"
:class="['detail-pane','collapse']"
>
<template slot="paneL">
<div class="table-box">
<dee-as-com
:basic-data=" {...(currentAo&&currentAo.joExecutePlan&&currentAo.joExecutePlan[0]||{})}"
:lay-config="{ typeName: 'JoExecutePlan', layKey: 'batchSign_proPreConfirm_aoInfo'}"
......@@ -8,21 +17,28 @@
ref="outStorageMatch"
:basic-data=" { selectData: selectData }"
:lay-config="{ typeName: 'ExtSupportingItem', layKey: 'batchSign_proPreConfirm_rightTop'}"
table-height="calc(50vh - 80px)"
:table-height="autoTopHeight"
/>
</div>
</template>
<template slot="paneR">
<div class="detail">
<dee-as-com
ref="outStorageMatchItem"
:lay-config="{ typeName: 'OutStorageMatchItem', layKey: 'batchSign_proPreConfirm_rightBottom'}"
table-height="calc(50vh - 80px)"
:table-height="autoBottomHeight"
:basic-data=" { selectData,selectionRows }"
@selectionChange="selectionChange"
/>
</div>
</template>
</split-pane>
</div>
</template>
<script>
export default {
name: 'MatchConfirmRight',
name: 'ProPreConfirmRight',
components: {},
props: {
selectData: {
......@@ -36,7 +52,9 @@ export default {
},
data() {
return {
selectionRows: []
selectionRows: [],
autoBottomHeight: '100%',
autoTopHeight: '480px'
}
},
computed: {},
......@@ -48,6 +66,21 @@ export default {
this.init()
})
})
this.$nextTick(function() {
const splitPane = this.$refs.splitPane
const height = document.getElementById('app').offsetHeight - 120
if (splitPane) {
this.$watch(
function() {
return splitPane.percent
},
(val, oval) => {
this.autoTopHeight = val / 100 * height - 80 + 'px'
// this.autoBottomHeight = (100 - val) / 100 * height - 270 + 'px'
}
)
}
})
},
// 组件方法
methods: {
......@@ -71,8 +104,19 @@ export default {
height: 100%;
box-sizing: border-box;
padding-left: 8px;
.sub-title{
padding-top: 0px!important;
// .sub-title{
// padding-top: 10px!important;
// }
.splitter-pane-resizer.horizontal {
opacity: 1;
background-color: #F1F4F5;
height: 8px;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
}
.detail{
height: 100%;
background-color: #fff;
}
.dee-table{
.dee-tools {
......
......@@ -88,7 +88,7 @@ export default {
padding-right: 10px;
}
.TaskComponentView {
height: calc(100% - 40px);
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment