|
|
|
|
@ -1,46 +1,120 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="CsMain p-4" id="detail">
|
|
|
|
|
<div style="height: 100%">
|
|
|
|
|
<div class="infoclientBox">
|
|
|
|
|
<div class="buttonBox">
|
|
|
|
|
<!-- <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> -->
|
|
|
|
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>新建</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span class="ds-action-svg-btn" @click="GoDetailed">
|
|
|
|
|
<img src="../../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
|
|
|
|
|
</span>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>保存</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span class="ds-action-svg-btn" @click="Save">
|
|
|
|
|
<img src="../../../../assets/svg/infoclient/baocun.svg" class="SvgImg" />
|
|
|
|
|
</span>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>提交锁定</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span @click="Lock" class="ds-action-svg-btn">
|
|
|
|
|
<img src="../../../../assets/icons/lock.svg" class="SvgImg" />
|
|
|
|
|
</span>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>解除锁定</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span @click="UnLock" class="ds-action-svg-btn">
|
|
|
|
|
<img src="../../../../assets/icons/openLock.svg" class="SvgImg" />
|
|
|
|
|
</span>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>上一条</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span class="ds-action-svg-btn" @click="ClickLast('next')">
|
|
|
|
|
<img src="../../../../assets/svg/infoclient/shangxia.svg" class="SvgImg rotate" />
|
|
|
|
|
</span>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>下一条</span>
|
|
|
|
|
</template>
|
|
|
|
|
<span class="ds-action-svg-btn" @click="ClickLast('last')">
|
|
|
|
|
<img src="../../../../assets/svg/infoclient/shangxia.svg" class="SvgImg" />
|
|
|
|
|
</span>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
|
|
|
|
|
<!-- <div > <i class="iconfont icon-jiahao2fill"></i>费用提交审核</div> -->
|
|
|
|
|
<div class="left">
|
|
|
|
|
<a-button v-repeat type="link" @click="Lock">
|
|
|
|
|
<span class="iconfont icon-locksuo IconColor"></span>
|
|
|
|
|
锁定
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button v-repeat type="link" @click="UnLock">
|
|
|
|
|
<span class="iconfont icon-lock-openkaisuo IconColor"></span>
|
|
|
|
|
撤销锁定
|
|
|
|
|
</a-button>
|
|
|
|
|
<Divider type="vertical" />
|
|
|
|
|
<span class="CsisLocking" :class="RauditClass()">
|
|
|
|
|
<span class="iconfont icon-locksuo" v-if="isLocking">
|
|
|
|
|
<span class="text">锁定</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="iconfont icon-a-jiesuo1_jiesuo" v-else>
|
|
|
|
|
<span class="text">未锁定</span>
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
<!-- <Divider type="vertical" />
|
|
|
|
|
<span class="gradeClass">
|
|
|
|
|
<span>客户等级：</span>
|
|
|
|
|
<a-select class="gradeSelect" :bordered="false" v-model:value="grade">
|
|
|
|
|
<a-select-option value="A">A</a-select-option>
|
|
|
|
|
<a-select-option value="B">B</a-select-option>
|
|
|
|
|
<a-select-option value="C">C</a-select-option>
|
|
|
|
|
<a-select-option value="D">D</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</span> -->
|
|
|
|
|
<!-- <Divider type="vertical" />
|
|
|
|
|
<span>
|
|
|
|
|
<a-select
|
|
|
|
|
class="CustomerOrSupplierSelect"
|
|
|
|
|
:class="CustomerOrSupplier"
|
|
|
|
|
:bordered="false"
|
|
|
|
|
v-model:value="CustomerOrSupplier"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option value="isCustomer">
|
|
|
|
|
<span class="iconfont icon-yonghu1"></span>
|
|
|
|
|
客户
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="isSupplier">
|
|
|
|
|
<span class="iconfont icon-a-dianpushangchengxianxing"></span>
|
|
|
|
|
供应商
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="isCustomerAndisSupplier">
|
|
|
|
|
<span class="iconfont icon-quxiaopeidui"></span>
|
|
|
|
|
客户&供应商
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</span> -->
|
|
|
|
|
</div>
|
|
|
|
|
<a-button v-repeat type="link" @click="GoDetailed">
|
|
|
|
|
<span class="iconfont icon-new_document"></span>
|
|
|
|
|
新建
|
|
|
|
|
</a-button>
|
|
|
|
|
<div class="CsbillNo"> 对账编号：{{ billNo }} </div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <a-tabs v-model:activeKey="activeKey" type="card" class="CsTabs">
|
|
|
|
|
<a-tab-pane key="1" tab="账单明细"> -->
|
|
|
|
|
<div class="CsMain p-4" id="detail">
|
|
|
|
|
<ActionBar
|
|
|
|
|
ref="RefActionBar"
|
|
|
|
|
v-show="false"
|
|
|
|
|
:id="route.query.id"
|
|
|
|
|
temId="1777229219986804736"
|
|
|
|
|
name="khdz"
|
|
|
|
|
:save="Save"
|
|
|
|
|
lasttext="下一条"
|
|
|
|
|
nexttext="上一条"
|
|
|
|
|
></ActionBar>
|
|
|
|
|
<a-row class="CsHeader" :gutter="5">
|
|
|
|
|
<a-col :span="24" class="headerForm">
|
|
|
|
|
<a-spin :spinning="spinningT">
|
|
|
|
|
<BasicForm @register="registerForm" />
|
|
|
|
|
<BasicForm @register="registerForm" @linkageForm="linkageForm" class="ds-form-detail" />
|
|
|
|
|
</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-row class="CsBottom">
|
|
|
|
|
<a-col :span="16" class="bottomTableL">
|
|
|
|
|
<a-spin :spinning="spinningL">
|
|
|
|
|
<BasicTable
|
|
|
|
|
class="ds-table"
|
|
|
|
|
@ -51,7 +125,7 @@
|
|
|
|
|
<p class="tableTitle">账单明细</p>
|
|
|
|
|
<a-button v-repeat type="link" @click="addDetail">
|
|
|
|
|
<span class="iconfont icon-new_document"></span>
|
|
|
|
|
新增账单明细
|
|
|
|
|
添加
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
title="确定删除选中数据？"
|
|
|
|
|
@ -61,12 +135,12 @@
|
|
|
|
|
>
|
|
|
|
|
<a-button v-repeat type="link">
|
|
|
|
|
<span class="iconfont icon-shanchu21"></span>
|
|
|
|
|
删除账单明细
|
|
|
|
|
删除
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
<a-button v-repeat type="link" @click="OpenFileModel">
|
|
|
|
|
<span class="iconfont icon-fujian"></span>
|
|
|
|
|
附件管理
|
|
|
|
|
附件
|
|
|
|
|
</a-button>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
@ -80,12 +154,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomTableR">
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="8" class="bottomTableR">
|
|
|
|
|
<a-spin :spinning="spinningR">
|
|
|
|
|
<BasicTable class="ds-table" @register="registerTableR">
|
|
|
|
|
<template #tableTitle>
|
|
|
|
|
<p class="tableTitle">费用账单明细</p>
|
|
|
|
|
<!-- <p class="tableTitle">费用账单明细</p> -->
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
title="是否要删除选中数据?"
|
|
|
|
|
ok-text="是"
|
|
|
|
|
@ -94,14 +168,14 @@
|
|
|
|
|
>
|
|
|
|
|
<a-button v-repeat type="link">
|
|
|
|
|
<span class="iconfont icon-shanchu21"></span>
|
|
|
|
|
删除账单费用明细
|
|
|
|
|
删除
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<BasicModal v-bind="$attrs" width="80%" @register="registerFileModel" title="附件管理">
|
|
|
|
|
<BasicTable class="ds-table" @register="registerTableFile">
|
|
|
|
|
<template #tableTitle>
|
|
|
|
|
@ -139,9 +213,11 @@
|
|
|
|
|
<BasicForm @register="registerFormFile" />
|
|
|
|
|
</BasicModal>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import { Divider } from 'ant-design-vue'
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
import { useMessage } from '/@/hooks/web/useMessage'
|
|
|
|
|
@ -153,7 +229,14 @@
|
|
|
|
|
const go = useGo()
|
|
|
|
|
import Info from './info/index.vue'
|
|
|
|
|
import ShowData from './showData/index.vue'
|
|
|
|
|
import { columnsL, columnsR, columnsFile, schemas, schemasFile } from './detailColumns'
|
|
|
|
|
import {
|
|
|
|
|
columnsL,
|
|
|
|
|
columnsR,
|
|
|
|
|
columnsFile,
|
|
|
|
|
schemas,
|
|
|
|
|
schemasFile,
|
|
|
|
|
Editschemas,
|
|
|
|
|
} from './detailColumns'
|
|
|
|
|
import {
|
|
|
|
|
EditCheckBill,
|
|
|
|
|
GetCheckBillInfo,
|
|
|
|
|
@ -169,7 +252,16 @@
|
|
|
|
|
const id = ref(route.query.id)
|
|
|
|
|
const spinningL = ref(false)
|
|
|
|
|
const spinningT = ref(false)
|
|
|
|
|
const billNo = ref()
|
|
|
|
|
const isLocking = ref(false)
|
|
|
|
|
init()
|
|
|
|
|
// -------------------------------------
|
|
|
|
|
const RefActionBar = ref()
|
|
|
|
|
// 上一票/下一票
|
|
|
|
|
function ClickLast(type) {
|
|
|
|
|
RefActionBar.value.toPage(type)
|
|
|
|
|
}
|
|
|
|
|
// -------------------------------------
|
|
|
|
|
const Ldata = ref({})
|
|
|
|
|
function init() {
|
|
|
|
|
if (id.value) {
|
|
|
|
|
@ -186,6 +278,8 @@
|
|
|
|
|
GetCheckBillInfo({ id: id.value }).then((res) => {
|
|
|
|
|
setFieldsValue(res.data)
|
|
|
|
|
spinningT.value = false
|
|
|
|
|
billNo.value = res.data.billNo
|
|
|
|
|
isLocking.value = res.data.isLocking
|
|
|
|
|
})
|
|
|
|
|
GetCheckBillBusinessList(ApiData).then((res) => {
|
|
|
|
|
setTableDataL(res.data.list)
|
|
|
|
|
@ -199,10 +293,23 @@
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function RauditClass() {
|
|
|
|
|
let RData = ''
|
|
|
|
|
switch (isLocking.value) {
|
|
|
|
|
case true:
|
|
|
|
|
RData = 'active'
|
|
|
|
|
break
|
|
|
|
|
default:
|
|
|
|
|
RData = 'rejected'
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
return RData
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 头部表格
|
|
|
|
|
const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
|
|
|
|
|
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema }] = useForm({
|
|
|
|
|
labelWidth: 120,
|
|
|
|
|
schemas,
|
|
|
|
|
schemas: id.value ? schemas : Editschemas,
|
|
|
|
|
showActionButtonGroup: false,
|
|
|
|
|
actionColOptions: {
|
|
|
|
|
span: 5,
|
|
|
|
|
@ -210,6 +317,13 @@
|
|
|
|
|
// 是否禁用表单所有控件
|
|
|
|
|
disabled: false,
|
|
|
|
|
})
|
|
|
|
|
const linkageForm = (e) => {
|
|
|
|
|
schemas.forEach((item) => {
|
|
|
|
|
if (item.field == e.schema.field) {
|
|
|
|
|
updateSchema(item)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 左侧表格
|
|
|
|
|
const [registerTableL, { getSelectRows: getSelectRowsL, setTableData: setTableDataL }] = useTable(
|
|
|
|
|
{
|
|
|
|
|
@ -222,6 +336,7 @@
|
|
|
|
|
bordered: true,
|
|
|
|
|
showIndexColumn: true,
|
|
|
|
|
immediate: false,
|
|
|
|
|
canResize: true,
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
const spinningR = ref(false)
|
|
|
|
|
@ -527,8 +642,56 @@
|
|
|
|
|
}
|
|
|
|
|
</style> -->
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
// ----------------------
|
|
|
|
|
.infoclientBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
background: rgba(245, 249, 252, 1);
|
|
|
|
|
padding: 8px 20px;
|
|
|
|
|
.buttonBox {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
.CsbillNo {
|
|
|
|
|
height: 32px;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #7a8897;
|
|
|
|
|
}
|
|
|
|
|
.ConfigFormBox {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
.ds-action-svg-btn {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
|
|
|
|
.SvgImg {
|
|
|
|
|
width: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&.rotate {
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.CsisLocking {
|
|
|
|
|
.text {
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
}
|
|
|
|
|
&.active {
|
|
|
|
|
color: #17a6a3;
|
|
|
|
|
}
|
|
|
|
|
&.rejected {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ----------------------
|
|
|
|
|
.CsMain {
|
|
|
|
|
height: 100%;
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.buttonBox {
|
|
|
|
|
@ -564,14 +727,20 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.CsBottom {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh - 300px);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
// flex: 1;
|
|
|
|
|
// padding-top: 0 !important;
|
|
|
|
|
.bottomTableL {
|
|
|
|
|
height: calc(100vh - 535px);
|
|
|
|
|
border: 1px solid #e8ebed;
|
|
|
|
|
flex: 2;
|
|
|
|
|
:deep(.ant-table-container) {
|
|
|
|
|
padding: 0 20px 0 0;
|
|
|
|
|
}
|
|
|
|
|
// height: calc(100vh - 535px);
|
|
|
|
|
border-top: 1px solid #e8ebed;
|
|
|
|
|
border-right: 1px solid #e8ebed;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.totalBox {
|
|
|
|
|
@ -612,8 +781,12 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.bottomTableR {
|
|
|
|
|
height: calc(100vh - 600px);
|
|
|
|
|
border: 1px solid #e8ebed;
|
|
|
|
|
flex: 1;
|
|
|
|
|
// height: calc(100vh - 600px);
|
|
|
|
|
border-top: 1px solid #e8ebed;
|
|
|
|
|
:deep(.ant-table-container) {
|
|
|
|
|
padding: 0 0 0 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-spin-nested-loading) {
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -630,7 +803,9 @@
|
|
|
|
|
.ant-table {
|
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
|
.ant-table-container {
|
|
|
|
|
border: none;
|
|
|
|
|
height: calc(100% - 54px);
|
|
|
|
|
// padding: 0;
|
|
|
|
|
.ant-table-body {
|
|
|
|
|
max-height: auto !important;
|
|
|
|
|
height: auto !important;
|
|
|
|
|
|
张同海
2 months ago