bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

结算页面优化

This commit is contained in:
BianLzhaoMin 2024-07-29 14:01:07 +08:00
parent 6797a94659
commit 94327108e2
5 changed files with 132 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sgzb-ui/src/assets/styles/index.scss
View File

@ -122,6 +122,9 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 20px;
height: calc(100vh - 104px);
min-height:calc(100vh - 104px) ;
overflow: auto;
} }
.components-container { .components-container {

1
sgzb-ui/src/assets/styles/sidebar.scss
View File

@ -5,6 +5,7 @@
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $base-sidebar-width; margin-left: $base-sidebar-width;
position: relative; position: relative;
overflow: hidden;
} }
.sidebarHide { .sidebarHide {

78
sgzb-ui/src/layout/components/AppMain.vue
View File

@ -1,75 +1,75 @@
<template> <template>
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" /> <router-view v-if="!$route.meta.link" :key="key" />
</keep-alive> </keep-alive>
</transition> </transition>
<iframe-toggle /> <iframe-toggle />
</section> </section>
</template> </template>
<script> <script>
import iframeToggle from "./IframeToggle/index" import iframeToggle from './IframeToggle/index'
export default { export default {
name: 'AppMain', name: 'AppMain',
components: { iframeToggle }, components: { iframeToggle },
computed: { computed: {
cachedViews() { cachedViews() {
return this.$store.state.tagsView.cachedViews return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
},
}, },
key() {
return this.$route.path
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.fixed-header + .app-main { .fixed-header + .app-main {
padding-top: 50px; padding-top: 50px;
} }
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/* 84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
} }
.fixed-header + .app-main { .fixed-header + .app-main {
padding-top: 84px; padding-top: 84px;
} }
} }
</style> </style>
<style lang="scss"> <style lang="scss">
// fix css style bug in open el-dialog // fix css style bug in open el-dialog
.el-popup-parent--hidden { .el-popup-parent--hidden {
.fixed-header { .fixed-header {
padding-right: 6px; padding-right: 6px;
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #c0c0c0; background-color: #c0c0c0;
border-radius: 3px; border-radius: 3px;
} }
</style> </style>

91
sgzb-ui/src/views/cost/csotSettlement/component/finishAndDetails.vue
View File

@ -2,15 +2,21 @@
<!-- 完工结算和结算明细页面 --> <!-- 完工结算和结算明细页面 -->
<div> <div>
<PageHeader :pageContent="pageContent" @goBack="goBack" /> <PageHeader :pageContent="pageContent" @goBack="goBack" />
<el-row> <div class="row-header">
<el-col :span="8">领用单位：</el-col> <div>领用单位：{{ currRowInfo.unitName }}</div>
<el-col :span="8">工程名称：</el-col> <div>工程名称：{{ currRowInfo.projectName }}</div>
</el-row> <div>总合计：xxxxx元</div>
<div>
<el-button size="mini" type="primary">导出全部明细表</el-button>
</div>
</div>
<!-- 01承担方 -->
<FinishTable <FinishTable
:tableColumns="settleTableColumns" :tableColumns="settleTableColumns"
:tableTitle="`设备结算清单`" :tableTitle="`设备结算清单`"
:isCostBear="true" :isCostBear="true"
/> />
<!-- 03承担方 -->
<FinishTable <FinishTable
:tableColumns="settleTableColumns" :tableColumns="settleTableColumns"
:tableTitle="`设备结算清单`" :tableTitle="`设备结算清单`"
@ -29,6 +35,16 @@
:tableColumns="scrapTableColumns" :tableColumns="scrapTableColumns"
:tableTitle="`工机具报废赔偿清单`" :tableTitle="`工机具报废赔偿清单`"
/> />
<FinishTable
:tableColumns="stayScrapTableColumns"
:tableTitle="`工机具待报废清单`"
/>
<el-row class="submit-btn">
<el-button size="mini" type="primary" @click="submitComSett"
>确认完工结算</el-button
>
</el-row>
</div> </div>
</template> </template>
@ -41,10 +57,16 @@ export default {
FinishTable, FinishTable,
}, },
props: { props: {
// 页面标题
pageContent: { pageContent: {
type: String, type: String,
default: () => '完工结算', default: () => '完工结算',
}, },
// 当前行的数据信息
currRowInfo: {
type: Object,
default: () => null,
},
}, },
data() { data() {
return { return {
@ -69,33 +91,41 @@ export default {
repairTableColumns: [ repairTableColumns: [
{ t_prop: '', t_label: '设备名称' }, { t_prop: '', t_label: '设备名称' },
{ t_prop: '', t_label: '规格型号' }, { t_prop: '', t_label: '规格型号' },
{ t_prop: '', t_label: '单位' }, { t_prop: 'date', t_label: '单位' },
{ t_prop: '', t_label: '维修配件名称' }, { t_prop: '', t_label: '维修配件名称' },
{ t_prop: '', t_label: '维修配件型号' }, { t_prop: '', t_label: '维修配件型号' },
{ t_prop: '', t_label: '使用数量' }, { t_prop: '', t_label: '使用数量' },
{ t_prop: '', t_label: '配件单价' }, { t_prop: '', t_label: '配件单价' },
{ t_prop: '', t_label: '配件总价' }, { t_prop: 'price', t_label: '配件总价' },
{ t_prop: '', t_label: '委外维修费用' }, { t_prop: '', t_label: '委外维修费用' },
{ t_prop: '', t_label: '费用总价' }, { t_prop: '', t_label: '费用总价' },
], ],
noReturnTableColumns: [ noReturnTableColumns: [
{ t_prop: '', t_label: '设备名称' }, { t_prop: '', t_label: '设备名称' },
{ t_prop: '', t_label: '规格型号' }, { t_prop: '', t_label: '规格型号' },
{ t_prop: '', t_label: '单位' }, { t_prop: 'unit', t_label: '单位' },
{ t_prop: '', t_label: '设备编码' }, { t_prop: '', t_label: '设备编码' },
{ t_prop: '', t_label: '未还数量' }, { t_prop: 'date', t_label: '未还数量' },
{ t_prop: '', t_label: '赔偿单价' }, { t_prop: '', t_label: '赔偿单价' },
{ t_prop: '', t_label: '赔偿金额' }, { t_prop: '', t_label: '赔偿金额' },
], ],
scrapTableColumns: [ scrapTableColumns: [
{ t_prop: '', t_label: '设备名称' }, { t_prop: '', t_label: '设备名称' },
{ t_prop: '', t_label: '规格型号' }, { t_prop: 'type', t_label: '规格型号' },
{ t_prop: '', t_label: '单位' }, { t_prop: '', t_label: '单位' },
{ t_prop: '', t_label: '设备编码' }, { t_prop: '', t_label: '设备编码' },
{ t_prop: '', t_label: '报废数量' }, { t_prop: 'date', t_label: '报废数量' },
{ t_prop: '', t_label: '赔偿单价' }, { t_prop: '', t_label: '赔偿单价' },
{ t_prop: '', t_label: '赔偿金额' }, { t_prop: '', t_label: '赔偿金额' },
], ],
stayScrapTableColumns: [
{ t_prop: '', t_label: '设备名称' },
{ t_prop: 'type', t_label: '规格型号' },
{ t_prop: '', t_label: '单位' },
{ t_prop: '', t_label: '设备编码' },
{ t_prop: 'date', t_label: '报废数量' },
{ t_prop: '', t_label: '状态' },
],
} }
}, },
methods: { methods: {
@ -103,15 +133,48 @@ export default {
goBack() { goBack() {
this.$emit('closeCurrPage') this.$emit('closeCurrPage')
}, },
/** 确认完工结算 */
submitComSett() {
this.$confirm(
'确定后则会生成财务报表，数据将不可修改，请确认检查无误',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
console.log('确定，后续走确定逻辑')
})
},
}, },
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.el-row { .row-header {
height: 32px; margin-top: 20px;
line-height: 32px; display: flex;
align-items: center;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
div {
margin-right: 30px;
}
& div:nth-child(3) {
margin-right: 15px;
color: red;
}
}
.submit-btn {
margin-top: 20px;
text-align: right;
.el-button {
padding: 10px 14px;
}
} }
</style> </style>

14
sgzb-ui/src/views/cost/csotSettlement/costApplyList.vue
View File

@ -184,7 +184,11 @@
/> />
</template> </template>
<template v-else> <template v-else>
<FinishAndDetails @closeCurrPage="closeCurrPage" /> <FinishAndDetails
:currRowInfo="currRowInfo"
:pageContent="pageContent"
@closeCurrPage="closeCurrPage"
/>
</template> </template>
</div> </div>
</template> </template>
@ -254,6 +258,10 @@ export default {
monthRecordDialogVisible: false, monthRecordDialogVisible: false,
// 是否显示主页 // 是否显示主页
isHome: true, isHome: true,
// 当前行信息
currRowInfo: null,
// 页面标题
pageContent: '',
} }
}, },
created() { created() {
@ -352,7 +360,9 @@ export default {
this.monthRecordDialogVisible = true this.monthRecordDialogVisible = true
}, },
/** 完工结算 结算明细*/ /** 完工结算 结算明细*/
handleFinishCostAndDetails() { handleFinishCostAndDetails(row) {
this.currRowInfo = row
this.pageContent = '结算明细'
this.isHome = false this.isHome = false
}, },
/** 关闭月结记录弹框 */ /** 关闭月结记录弹框 */