Merge branch 'dev' of http://60.209.125.238:20010/lijingjia/ds-wms-client-web into dev
commit
449b9fca44
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,555 @@
|
||||
<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 && form.isLocked">
|
||||
<span class="iconfont icon-locksuo"></span>锁定
|
||||
</div>
|
||||
<div style="color: #7a8798" class="right-b lock" v-if="!route.query.id || !form.isLocked">
|
||||
<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 v-if="column.dataIndex == 'feeType'">
|
||||
<span v-if="record.feeType == 1">应收</span>
|
||||
<span v-if="record.feeType == 2">应付</span>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</a-spin>
|
||||
<invoiceTable ref="invoiceTableRef" @updateListFreeLeft="updateListFreeLeft" @updateList="updateList"
|
||||
@updateListFree="updateListFree"></invoiceTable>
|
||||
<invoiceFile ref="invoiceFileRef"></invoiceFile>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineComponent, nextTick, watchEffect, watch } from 'vue'
|
||||
import {
|
||||
InvoiceSettlementSave, InvoiceSettlementGet,
|
||||
PaymentSettlementGetList, PaymentSettlementDeleteDetail, PaymentFreeSettlementGet,
|
||||
GeneralInvoiceGet, PaymentFreeSettlementSave
|
||||
} 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, freeColum, freeDetailColum } from './columns'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { useUserStore } from '/@/store/modules/user'
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab'
|
||||
import { GetList } from '../api'
|
||||
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, setSelectedRowKeys, getSelectRows }] = useTable({
|
||||
columns: getColums(),
|
||||
useSearchForm: false,
|
||||
showIndexColumn: false,
|
||||
pagination: true,
|
||||
rowSelection: {},
|
||||
striped: true,
|
||||
bordered: true,
|
||||
indexColumnProps: {
|
||||
width: 60,
|
||||
},
|
||||
canResize: true,
|
||||
showTableSetting: true,
|
||||
id: getTableId(),
|
||||
immediate: false,
|
||||
})
|
||||
const [registerTable1, { getSelectRows: getSelectRowsFee, setProps: setPropsFee, setTableData: setTableData1 }] = useTable({
|
||||
columns: getColumsDetail(),
|
||||
useSearchForm: false,
|
||||
showIndexColumn: false,
|
||||
pagination: false,
|
||||
striped: true,
|
||||
rowKey: 'recordId',
|
||||
bordered: true,
|
||||
indexColumnProps: {
|
||||
width: 60,
|
||||
},
|
||||
showTableSetting: true,
|
||||
id: getTableDetailId(),
|
||||
canResize: true,
|
||||
immediate: false,
|
||||
})
|
||||
|
||||
function getColums() {
|
||||
if (route.query.type == 'invoice') {
|
||||
return invoiceColum
|
||||
}
|
||||
if (route.query.type == 'free') {
|
||||
return freeColum
|
||||
}
|
||||
}
|
||||
function getTableId() {
|
||||
if (route.query.type == 'invoice') {
|
||||
return 1
|
||||
}
|
||||
if (route.query.type == 'free') {
|
||||
return 5
|
||||
}
|
||||
}
|
||||
function getTableDetailId() {
|
||||
if (route.query.type == 'invoice') {
|
||||
return 2
|
||||
}
|
||||
if (route.query.type == 'free') {
|
||||
return 6
|
||||
}
|
||||
}
|
||||
function getColumsDetail() {
|
||||
if (route.query.type == 'invoice') {
|
||||
return invoiceDetailColum
|
||||
}
|
||||
if (route.query.type == 'free') {
|
||||
return freeDetailColum
|
||||
}
|
||||
}
|
||||
// 自由结算--左边
|
||||
function updateListFreeLeft(arr, currency) {
|
||||
const data = {
|
||||
settlement: {
|
||||
...getFieldsValue(),
|
||||
...getFieldsValueMark(),
|
||||
},
|
||||
documents: arr
|
||||
}
|
||||
data.settlement.billType = 2
|
||||
data.settlement.mode = 3
|
||||
data.settlement.currency = currency
|
||||
loading.value = true
|
||||
PaymentFreeSettlementSave(data).then(res => {
|
||||
if (!route.query.id) {
|
||||
const { fullPath } = route //获取当前路径
|
||||
tabStore.closeTabByKey(fullPath, router)
|
||||
let type = route.query.type
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}&type=${type}`)
|
||||
}, 50)
|
||||
} else {
|
||||
getDetail()
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function ClickLast(type) {
|
||||
const data = {
|
||||
"queryCondition": "[{\"FieldName\":\"billType\",\"FieldValue\":2,\"ConditionalType\":1}]",
|
||||
"pageCondition": {
|
||||
"pageIndex": 1,
|
||||
"pageSize": 100,
|
||||
"sortConditions": []
|
||||
}
|
||||
}
|
||||
let indexQuery = 0
|
||||
let list = []
|
||||
GetList(data).then(res => {
|
||||
list = res.data.list
|
||||
res.data.list.forEach((item, index) => {
|
||||
if (item.id == route.query.id) {
|
||||
indexQuery = index
|
||||
}
|
||||
})
|
||||
if (type == 'next') {
|
||||
if (indexQuery == 0) {
|
||||
createMessage.warning('已经是第一条了')
|
||||
} else {
|
||||
go("/invoiceIssueDetail?id=" + list[indexQuery - 1].id + '&type=' + route.query.type)
|
||||
}
|
||||
}
|
||||
if (type == 'last') {
|
||||
if (indexQuery == list.length - 1) {
|
||||
createMessage.warning('已经是最后一条了')
|
||||
} else {
|
||||
go("/invoiceIssueDetail?id=" + list[indexQuery + 1].id + '&type=' + route.query.type)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
function addDetailed() {
|
||||
invoiceTableRef.value.customerIdP = form.value.customerId
|
||||
invoiceTableRef.value.init()
|
||||
}
|
||||
const deleteRow = async () => {
|
||||
let ids = []
|
||||
ids = getSelectRows().map((item) => {
|
||||
return item.id
|
||||
})
|
||||
if (ids.length == 0) {
|
||||
createMessage.error('请选择数据')
|
||||
return false
|
||||
}
|
||||
const data = {
|
||||
ids: ids
|
||||
}
|
||||
loading.value = true
|
||||
PaymentSettlementDeleteDetail(data).then(res => {
|
||||
if (res.succeeded) {
|
||||
createMessage.success(res.message)
|
||||
getDetail()
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
function handleClick(record) {
|
||||
if (route.query.type == 'invoice') {
|
||||
setSelectedRowKeys([record.id])
|
||||
const data = {
|
||||
id: record.id,
|
||||
}
|
||||
GeneralInvoiceGet(data).then(res => {
|
||||
if (res.succeeded) {
|
||||
setTableData1(res.data.details)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const invoiceTableRef = ref(null) as any
|
||||
onMounted(() => {
|
||||
if (!route.query.id) {
|
||||
invoiceTableRef.value.customerIdP = ''
|
||||
invoiceTableRef.value.init()
|
||||
}
|
||||
if (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 = 2
|
||||
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)
|
||||
let type = route.query.type
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}&type=${type}`)
|
||||
}, 50)
|
||||
} else {
|
||||
getDetail()
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 自由结算--右边
|
||||
function updateListFree(arr, currency) {
|
||||
const data = {
|
||||
settlement: {
|
||||
...getFieldsValue(),
|
||||
...getFieldsValueMark(),
|
||||
},
|
||||
details: arr
|
||||
}
|
||||
data.settlement.billType = 2
|
||||
data.settlement.mode = 3
|
||||
data.settlement.currency = currency
|
||||
loading.value = true
|
||||
PaymentFreeSettlementSave(data).then(res => {
|
||||
if (!route.query.id) {
|
||||
const { fullPath } = route //获取当前路径
|
||||
tabStore.closeTabByKey(fullPath, router)
|
||||
let type = route.query.type
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}&type=${type}`)
|
||||
}, 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 = 2
|
||||
data.settlement.mode = 4
|
||||
loading.value = true
|
||||
if (route.query.type == 'invoice') {
|
||||
InvoiceSettlementSave(data).then(res => {
|
||||
loading.value = false
|
||||
createMessage.success('保存成功')
|
||||
if (!route.query.id) {
|
||||
const { fullPath } = route //获取当前路径
|
||||
tabStore.closeTabByKey(fullPath, router)
|
||||
let type = route.query.type
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}&type=${type}`)
|
||||
}, 50)
|
||||
} else {
|
||||
getDetail()
|
||||
}
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
if (route.query.type == 'free') {
|
||||
PaymentFreeSettlementSave(data).then(res => {
|
||||
loading.value = false
|
||||
createMessage.success('保存成功')
|
||||
if (!route.query.id) {
|
||||
const { fullPath } = route //获取当前路径
|
||||
tabStore.closeTabByKey(fullPath, router)
|
||||
let type = route.query.type
|
||||
setTimeout(() => {
|
||||
go(`/feeSettlementDetail?id=${res.data.id}&type=${type}`)
|
||||
}, 50)
|
||||
} else {
|
||||
getDetail()
|
||||
}
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const form = ref({ settlementNO: '' }) as any
|
||||
function getDetail() {
|
||||
loading.value = true
|
||||
if (route.query.type == 'free') {
|
||||
PaymentFreeSettlementGet({ id: route.query.id }).then(res => {
|
||||
if (res.succeeded) {
|
||||
res.data.mode = 'free'
|
||||
form.value = JSON.parse(JSON.stringify(res.data))
|
||||
res.data.currencyAmount = res.data.currency + '/' + res.data.amount
|
||||
setFieldsValueMark(res.data)
|
||||
setFieldsValue(res.data)
|
||||
setTableData(res.data.settlementDetails)
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
if (route.query.type == 'invoice') {
|
||||
InvoiceSettlementGet({ id: route.query.id }).then(res => {
|
||||
if (res.succeeded) {
|
||||
res.data.mode = 'invoice'
|
||||
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.settlementDetails)
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
: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