Merge branch 'dev' of http://60.209.125.238:20010/lijingjia/ds-wms-client-web into dev
commit
b76c02990d
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<a-spin :spinning="loading">
|
||||
<div class="infoclientBox">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div class="btn-left">
|
||||
<a-tooltip placement="top" :mouseEnterDelay="0.5" v-if="route.query.id">
|
||||
<template #title>
|
||||
<span>新建</span>
|
||||
</template>
|
||||
<span class="ds-action-svg-btn">
|
||||
<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="handleSave">
|
||||
<img src="../../../../assets/svg/infoclient/baocun.svg" class="SvgImg" />
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top" :mouseEnterDelay="0.5" v-if="route.query.id">
|
||||
<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" v-if="route.query.id">
|
||||
<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>
|
||||
<div style="color: #17a6a3" class="right-b lock" v-if="route.query.id">
|
||||
<span class="iconfont icon-locksuo"></span>锁定
|
||||
</div>
|
||||
<div style="color: #7a8798" class="right-b lock" v-if="!route.query.id">
|
||||
<span class="iconfont icon-a-jiesuo1_jiesuo"></span>未锁定
|
||||
</div>
|
||||
<div class="type">
|
||||
<span v-if="route.query.type == 'free'">自由结算</span>
|
||||
<span v-if="route.query.type == 'apply'">申请结算</span>
|
||||
<span v-if="route.query.type == 'invoice'">发票结算</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #8995a4">
|
||||
<span>结算单号:{{ form.settlementNO }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<BasicForm @register="registerForm">
|
||||
|
||||
</BasicForm>
|
||||
<BasicForm @register="registerFormMark">
|
||||
|
||||
</BasicForm>
|
||||
<BasicTable class="ds-table" @row-click="handleClick" @register="registerTable">
|
||||
<template #right>
|
||||
<div style="width: 40%;margin-left: 10px;">
|
||||
<div>
|
||||
<BasicTable class="ds-table" @register="registerTable1">
|
||||
<template #tableTitle>
|
||||
<div>
|
||||
<span class="bold">费用明细</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'feeType'">
|
||||
<span v-if="record.feeType == 1">应收</span>
|
||||
<span v-if="record.feeType == 2">应付</span>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template #tableTitle>
|
||||
<div>
|
||||
<div>
|
||||
<span class="bold">结算明细</span>
|
||||
<a-button v-repeat type="link" @click="addDetailed()">
|
||||
<span class="iconfont icon-jia"></span>
|
||||
添加
|
||||
</a-button>
|
||||
<a-popconfirm title="确定要删除勾选的数据?" ok-text="确定" cancel-text="取消" @confirm="deleteRow">
|
||||
<a-button v-repeat type="link">
|
||||
<span class="iconfont icon-shanchu1"></span>删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button v-repeat type="link" @click="openFile">
|
||||
<span class="iconfont icon-fujian1"></span>附件
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'businessType'">
|
||||
<span v-if="record.businessType == 1">海运出口</span>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</a-spin>
|
||||
<invoiceTable ref="invoiceTableRef" @updateList="updateList"></invoiceTable>
|
||||
<invoiceFile ref="invoiceFileRef"></invoiceFile>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineComponent, nextTick, watchEffect, watch } from 'vue'
|
||||
import { InvoiceSettlementSave, InvoiceSettlementGet, GetClientBankList } from '../api'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import invoiceTable from './invoiceTable.vue'
|
||||
import invoiceFile from '../../../operation/invoiceIssue/detail/invoiceFile.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
||||
import { useGo } from '/@/hooks/web/usePage'
|
||||
import { detailForm, markForm, invoiceColum, invoiceDetailColum } from '../columns'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { useUserStore } from '/@/store/modules/user'
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab'
|
||||
const tabStore = useMultipleTabStore()
|
||||
const userStore = useUserStore()
|
||||
const go = useGo()
|
||||
const route = useRoute()
|
||||
const { createMessage } = useMessage()
|
||||
const loading = ref(false)
|
||||
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema, getFieldsValue, }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: detailForm,
|
||||
showActionButtonGroup: false,
|
||||
readonly: true,
|
||||
})
|
||||
const [registerFormMark, { getFieldsValue: getFieldsValueMark, setFieldsValue: setFieldsValueMark }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: markForm,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
const [registerTable, { setTableData }] = useTable({
|
||||
columns: invoiceColum,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: false,
|
||||
pagination: true,
|
||||
rowSelection: {},
|
||||
striped: true,
|
||||
bordered: true,
|
||||
indexColumnProps: {
|
||||
width: 60,
|
||||
},
|
||||
canResize: true,
|
||||
showTableSetting: true,
|
||||
id:'1',
|
||||
immediate: false,
|
||||
})
|
||||
const [registerTable1, { getSelectRows: getSelectRowsFee, setProps: setPropsFee, setTableData: setTableData1 }] = useTable({
|
||||
columns: invoiceDetailColum,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
striped: true,
|
||||
rowKey: 'recordId',
|
||||
bordered: true,
|
||||
indexColumnProps: {
|
||||
width: 60,
|
||||
},
|
||||
showTableSetting: true,
|
||||
id:'2',
|
||||
canResize: true,
|
||||
immediate: false,
|
||||
})
|
||||
const invoiceTableRef = ref('')
|
||||
onMounted(() => {
|
||||
if (route.query.type == 'invoice' && !route.query.id) {
|
||||
invoiceTableRef.value.init()
|
||||
}
|
||||
if (route.query.type == 'invoice' && route.query.id) {
|
||||
getDetail()
|
||||
}
|
||||
})
|
||||
const invoiceFileRef = ref('')
|
||||
function openFile() {
|
||||
invoiceFileRef.value.init()
|
||||
}
|
||||
// 发票结算
|
||||
function updateList(arr, currency) {
|
||||
const data = {
|
||||
settlement: {
|
||||
...getFieldsValue(),
|
||||
...getFieldsValueMark(),
|
||||
},
|
||||
documents: arr
|
||||
}
|
||||
data.settlement.billType = 1
|
||||
data.settlement.mode = 4
|
||||
data.settlement.currency = currency
|
||||
loading.value = true
|
||||
InvoiceSettlementSave(data).then(res => {
|
||||
if (!route.query.id) {
|
||||
const { fullPath } = route //获取当前路径
|
||||
tabStore.closeTabByKey(fullPath, router)
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}`)
|
||||
}, 50)
|
||||
} else {
|
||||
getDetail()
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const router = useRouter()
|
||||
function handleSave() {
|
||||
const data = {
|
||||
settlement: {
|
||||
...form.value,
|
||||
...getFieldsValue(),
|
||||
...getFieldsValueMark(),
|
||||
}
|
||||
}
|
||||
data.settlement.billType = 1
|
||||
data.settlement.mode = 4
|
||||
loading.value = true
|
||||
InvoiceSettlementSave(data).then(res => {
|
||||
loading.value = false
|
||||
createMessage.success('保存成功')
|
||||
if (!route.query.id) {
|
||||
const { fullPath } = route //获取当前路径
|
||||
tabStore.closeTabByKey(fullPath, router)
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}`)
|
||||
}, 50)
|
||||
} else {
|
||||
getDetail()
|
||||
}
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const form = ref({ settlementNO: '' }) as any
|
||||
function getDetail() {
|
||||
loading.value = true
|
||||
InvoiceSettlementGet({ id: route.query.id }).then(res => {
|
||||
if (res.succeeded) {
|
||||
form.value = JSON.parse(JSON.stringify(res.data))
|
||||
delete form.value.details
|
||||
res.data.currencyAmount = res.data.currency + '/' + res.data.amount
|
||||
setFieldsValueMark(res.data)
|
||||
setFieldsValue(res.data)
|
||||
setTableData(res.data.details)
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const bankList = ref([])
|
||||
function getBankInfo(id) {
|
||||
const queryStr = [
|
||||
{
|
||||
FieldName: 'ClientId',
|
||||
FieldValue: id,
|
||||
ConditionalType: '0',
|
||||
},
|
||||
]
|
||||
const data = {
|
||||
pageCondition: {
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
sortConditions: [],
|
||||
},
|
||||
queryCondition: JSON.stringify(queryStr),
|
||||
}
|
||||
bankList.value = []
|
||||
GetClientBankList(data).then((res) => { })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.infoclientBox {
|
||||
display: flex;
|
||||
background: rgba(245, 249, 252, 1);
|
||||
padding: 13px 20px;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
|
||||
.ds-action-svg-btn {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.SvgImg {
|
||||
width: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: 1px solid #cccccc;
|
||||
margin-right: 15px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.lock {
|
||||
border-right: 1px solid #cccccc;
|
||||
height: 24px;
|
||||
padding-right: 15px;
|
||||
line-height: 24px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #72a9fa;
|
||||
border-right: 1px solid #cccccc;
|
||||
height: 24px;
|
||||
padding-right: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-divider) {
|
||||
margin: 5px 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table-footer) {
|
||||
padding: 0px !important;
|
||||
background: white;
|
||||
}
|
||||
|
||||
:deep(.ant-table-container) {
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue