|
|
|
@ -1,96 +1,110 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="CsMain p-4" id="detail">
|
|
|
|
|
<div class="buttonBox">
|
|
|
|
|
<div class="nav" @click="Save"> <i class="iconfont icon-icon_baocun"></i>保存</div>
|
|
|
|
|
<div class="nav" @click="waitFor"> <i class="iconfont icon-printing"></i>标准打印</div>
|
|
|
|
|
<!-- <div class="nav" @click="waitFor"> <i class="iconfont icon-dayinxiaopiao"></i>模板打印</div> -->
|
|
|
|
|
<div class="nav" @click="waitFor"> <i class="iconfont icon-icon_baocun"></i>保存并关闭</div>
|
|
|
|
|
<div class="nav" @click="waitFor"> <i class="iconfont icon-icon_baocun"></i>保存并新建</div>
|
|
|
|
|
<div class="nav" @click="Lock">
|
|
|
|
|
<Icon icon="ant-design:lock-outlined" class="iconfont" />
|
|
|
|
|
锁定
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav" @click="UnLock">
|
|
|
|
|
<Icon icon="ant-design:unlock-outlined" class="iconfont" />
|
|
|
|
|
撤销锁定
|
|
|
|
|
<!-- <div @click="Save"> <i class="iconfont icon-icon_baocun"></i>保存</div> -->
|
|
|
|
|
<!-- <div @click="waitFor"> <i class="iconfont icon-printing"></i>标准打印</div> -->
|
|
|
|
|
<!-- <div @click="waitFor"> <i class="iconfont icon-icon_baocun"></i>保存并关闭</div> -->
|
|
|
|
|
|
|
|
|
|
<!-- <div > <i class="iconfont icon-jiahao2fill"></i>费用提交审核</div> -->
|
|
|
|
|
<div class="left">
|
|
|
|
|
<a-button type="link" @click="Lock">
|
|
|
|
|
<span class="iconfont icon-locksuo IconColor"></span>
|
|
|
|
|
锁定
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="link" @click="UnLock">
|
|
|
|
|
<span class="iconfont icon-lock-openkaisuo IconColor"></span>
|
|
|
|
|
撤销锁定
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav"> <i class="iconfont icon-jiahao2fill"></i>费用提交审核</div>
|
|
|
|
|
<a-button type="link" @click="addDetail">
|
|
|
|
|
<span class="iconfont icon-new_document"></span>
|
|
|
|
|
新建
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey" type="card" class="CsTabs">
|
|
|
|
|
<a-tab-pane key="1" tab="账单明细">
|
|
|
|
|
<a-row class="CsHeader" :gutter="5">
|
|
|
|
|
<a-col :span="24" class="headerForm">
|
|
|
|
|
<a-spin :spinning="spinningT">
|
|
|
|
|
<BasicForm @register="registerForm" />
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row class="CsBottom" :gutter="5">
|
|
|
|
|
<a-col :span="17" class="bottomTableL">
|
|
|
|
|
<a-spin :spinning="spinningL">
|
|
|
|
|
<BasicTable
|
|
|
|
|
class="ds-table"
|
|
|
|
|
@register="registerTableL"
|
|
|
|
|
@selection-change="selectionChange"
|
|
|
|
|
>
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
<div class="buttonGroup">
|
|
|
|
|
<div class="nav" @click="addDetail">
|
|
|
|
|
<i class="iconfont icon-jiahao2fill"></i>增加账单明细
|
|
|
|
|
</div>
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
title="是否要删除选中数据?"
|
|
|
|
|
ok-text="是"
|
|
|
|
|
cancel-text="否"
|
|
|
|
|
@confirm="DelDetailL"
|
|
|
|
|
>
|
|
|
|
|
<div class="nav">
|
|
|
|
|
<i class="iconfont icon-shanchu2"></i>
|
|
|
|
|
删除账单明细
|
|
|
|
|
</div>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="nav" @click="RowClick">
|
|
|
|
|
<i class="iconfont icon-bianjiwenjian"></i>
|
|
|
|
|
测试 后期改为双击
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="7" class="bottomTableR">
|
|
|
|
|
<a-spin :spinning="spinningR">
|
|
|
|
|
<BasicTable class="ds-table" @register="registerTableR">
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
<div class="buttonGroup">
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
title="是否要删除选中数据?"
|
|
|
|
|
ok-text="是"
|
|
|
|
|
cancel-text="否"
|
|
|
|
|
@confirm="DelDetailR"
|
|
|
|
|
>
|
|
|
|
|
<div class="nav">
|
|
|
|
|
<i class="iconfont icon-shanchu2"></i>
|
|
|
|
|
删除账单费用明细
|
|
|
|
|
</div>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
<!-- <a-tabs v-model:activeKey="activeKey" type="card" class="CsTabs">
|
|
|
|
|
<a-tab-pane key="1" tab="账单明细"> -->
|
|
|
|
|
<ActionBar
|
|
|
|
|
:id="route.query.id"
|
|
|
|
|
temId="1777229219986804736"
|
|
|
|
|
name="khdz"
|
|
|
|
|
:save="Save"
|
|
|
|
|
></ActionBar>
|
|
|
|
|
<a-row class="CsHeader" :gutter="5">
|
|
|
|
|
<a-col :span="24" class="headerForm">
|
|
|
|
|
<a-spin :spinning="spinningT">
|
|
|
|
|
<BasicForm @register="registerForm" />
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<!-- <a-row class="CsBottom" :gutter="5">
|
|
|
|
|
<a-col :span="24" class="bottomTableL"> -->
|
|
|
|
|
<div class="CsBottom">
|
|
|
|
|
<div class="bottomTableL">
|
|
|
|
|
<a-spin :spinning="spinningL">
|
|
|
|
|
<BasicTable
|
|
|
|
|
class="ds-table"
|
|
|
|
|
@register="registerTableL"
|
|
|
|
|
@selection-change="selectionChange"
|
|
|
|
|
>
|
|
|
|
|
<template #tableTitle>
|
|
|
|
|
<p class="tableTitle">账单明细</p>
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
title="确定删除当前选中数据?"
|
|
|
|
|
ok-text="是"
|
|
|
|
|
cancel-text="否"
|
|
|
|
|
@confirm="DelDetailL"
|
|
|
|
|
>
|
|
|
|
|
<a-button type="link">
|
|
|
|
|
<span class="iconfont icon-shanchu21"></span>
|
|
|
|
|
删除账单明细
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
<a-button type="link" @click="waitFor">
|
|
|
|
|
<span class="iconfont icon-fujian"></span>
|
|
|
|
|
附件管理
|
|
|
|
|
</a-button>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomTableR">
|
|
|
|
|
<a-spin :spinning="spinningR">
|
|
|
|
|
<BasicTable class="ds-table" @register="registerTableR">
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
<div class="buttonGroup">
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
title="是否要删除选中数据?"
|
|
|
|
|
ok-text="是"
|
|
|
|
|
cancel-text="否"
|
|
|
|
|
@confirm="DelDetailR"
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<i class="iconfont icon-shanchu2"></i>
|
|
|
|
|
删除账单费用明细
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </a-col>
|
|
|
|
|
<a-col :span="24" class="bottomTableR"> -->
|
|
|
|
|
|
|
|
|
|
<!-- </a-col>
|
|
|
|
|
</a-row> -->
|
|
|
|
|
<!-- </a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="附件">
|
|
|
|
|
<BasicTable class="ds-table" @register="registerTableFile">
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
<div class="buttonGroup">
|
|
|
|
|
<div class="nav">
|
|
|
|
|
<div>
|
|
|
|
|
<i class="iconfont icon-shanchu2"></i>
|
|
|
|
|
删除
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav" @click="OpenFileModal">
|
|
|
|
|
<div @click="OpenFileModal">
|
|
|
|
|
<i class="iconfont icon-shiyongwendang"></i>
|
|
|
|
|
上传附件
|
|
|
|
|
</div>
|
|
|
|
@ -98,7 +112,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</a-tabs> -->
|
|
|
|
|
<Info
|
|
|
|
|
ref="RefInfo"
|
|
|
|
|
@register="registerAdd"
|
|
|
|
@ -190,8 +204,8 @@
|
|
|
|
|
showTableSetting: false,
|
|
|
|
|
bordered: true,
|
|
|
|
|
showIndexColumn: true,
|
|
|
|
|
canResize: true,
|
|
|
|
|
resizeHeightOffset: 35,
|
|
|
|
|
// canResize: true,
|
|
|
|
|
// resizeHeightOffset: 3500,
|
|
|
|
|
immediate: false,
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
@ -405,15 +419,20 @@
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
@import url('/@/styles/buttonGroup.scss');
|
|
|
|
|
.CsMain {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.buttonBox {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
// flex: 1;
|
|
|
|
|
.left {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
> div {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.CsTabs {
|
|
|
|
|
height: calc(100% - 43px);
|
|
|
|
@ -429,21 +448,62 @@
|
|
|
|
|
}
|
|
|
|
|
.CsHeader {
|
|
|
|
|
padding-bottom: 0 !important;
|
|
|
|
|
margin: 0 0 10px 0 !important;
|
|
|
|
|
border: 1px solid #e8ebed;
|
|
|
|
|
.headerForm {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 10px 15px 0 15px !important;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
padding: 5px 15px 10px 15px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.CsBottom {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding-top: 0 !important;
|
|
|
|
|
height: calc(100vh - 300px);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
// flex: 1;
|
|
|
|
|
// padding-top: 0 !important;
|
|
|
|
|
.bottomTableL {
|
|
|
|
|
padding-left: 0 !important;
|
|
|
|
|
height: calc(100vh - 535px);
|
|
|
|
|
border: 1px solid #e8ebed;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.bottomTableR {
|
|
|
|
|
padding-right: 0 !important;
|
|
|
|
|
height: calc(100vh - 600px);
|
|
|
|
|
border: 1px solid #e8ebed;
|
|
|
|
|
}
|
|
|
|
|
.ant-spin-nested-loading {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-spin-container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ds-table {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-table-wrapper {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-spin-nested-loading {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-spin-container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-table {
|
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
|
.ant-table-container {
|
|
|
|
|
height: calc(100% - 54px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tableTitle {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
line-height: 15.84px;
|
|
|
|
|
color: rgba(51, 56, 61, 1);
|
|
|
|
|
text-align: left;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|