lijingjia 2 months ago
commit ed5b93c86c

@ -4,9 +4,17 @@ import { Tag } from 'ant-design-vue'
// 引入字典数据
import { getDictOption } from '/@/utils/dictUtil'
import { getOrgList } from '/@/api/common'
import { getOrgList, GetClientPortSelectList, GetCarrierSelectList } from '/@/api/common'
import {
GetClientLanesSelectList,
GetAgentCnClientList,
GetClientFrtSelectList,
GetClientSourceSelectList,
} from '/@/views/operation/seaexport/api/BookingLedger'
// 往来单位下拉框数据
const companyDict = ref([])
import { useOptionsStore } from '/@/store/modules/options'
const optionsStore = useOptionsStore()
let businessType: any = [
{ value: 1, label: '海运出口' },
{ value: 2, label: '海运进口' },
@ -28,18 +36,23 @@ export const columns: BasicColumn[] = [
width: 200,
},
{
title: '费用类',
dataIndex: 'feeCategory',
title: '费用类',
dataIndex: 'feeType',
width: 120,
customRender: ({ text }) => {
if (text == '1') {
if (text == 1) {
return '收'
} else if (text == '2') {
} else if (text == 2) {
return '付'
}
return text
},
},
{
title: '费用类别',
dataIndex: 'feeCategoryName',
width: 200,
},
{
title: '是否停用',
dataIndex: 'isDisabled',
@ -93,14 +106,14 @@ export const searchFormSchema: FormSchema[] = [
colProps: { span: 4 },
},
{
field: 'feeCategory',
label: '费用类',
field: 'feeType',
label: '费用类',
component: 'Select',
colProps: { span: 4 },
componentProps: {
options: [
{ label: '收', value: '1' },
{ label: '付', value: '2' },
{ label: '收', value: 1 },
{ label: '付', value: 2 },
],
},
},
@ -239,17 +252,192 @@ export const formSchema: FormSchema[] = [
// show: false,
// },
{
field: 'feeCategory',
label: '费用类',
field: 'feeType',
label: '费用类',
component: 'Select',
colProps: { span: 6 },
componentProps: {
options: [
{ label: '收', value: '1' },
{ label: '付', value: '2' },
{ label: '收', value: 1 },
{ label: '付', value: 2 },
],
},
},
{
label: '费用类别名称',
field: 'feeCategoryName',
component: 'Input',
defaultValue: '',
show: false,
},
{
field: 'feeCategoryId',
label: '费用类别',
defaultValue: '',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('Fee_FeeCategoryId').then((res) => {
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
console.log(e, obj)
if (e && obj) {
formModel.feeCategoryName = obj.label
formModel.feeCategoryId = obj.value
}
if (!e && !obj) {
formModel.feeCategoryName = ''
formModel.feeCategoryId = ''
}
},
}
},
},
{
label: '起运港',
field: 'polCode',
component: 'ApiSelect',
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: () => {
return {
api: GetClientPortSelectList,
resultField: 'data',
allowClear: true,
showSearch: true,
labelField: 'pinYinCode',
showName: 'pinYinCode',
valueField: 'ediCode',
immediate: true,
getPopupContainer: () => document.body,
}
},
},
{
label: '卸货港',
field: 'podCode',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: () => {
return {
api: GetClientPortSelectList,
resultField: 'data',
allowClear: true,
showSearch: true,
labelField: 'pinYinCode',
showName: 'pinYinCode',
valueField: 'ediCode',
immediate: true,
getPopupContainer: () => document.body,
}
},
},
{
field: 'laneId',
label: '航线',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetClientLanesSelectList,
labelField: 'laneName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
label: '业务来源',
field: 'sourceId',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetClientSourceSelectList,
labelField: 'sourceName',
valueField: 'id',
resultField: 'data',
}
},
},
{
label: '船公司',
field: 'carrierId',
labelSlot: 'carrierId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetCarrierSelectList,
labelField: 'pinYinCode',
showName: 'cnName',
valueField: 'id',
resultField: 'data',
}
},
},
{
label: '订舱口',
field: 'forwarderId',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetAgentCnClientList,
labelField: 'shortName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'mblFrtCode',
label: '付费方式',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
defaultValue: null,
colProps: { span: 6 },
componentProps: ({ formModel, formActionType }) => {
return {
api: GetClientFrtSelectList,
allowClear: true,
showSearch: true,
labelField: 'frtName',
valueField: 'ediCode',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'isDisabled',
label: '是否停用',

@ -4,9 +4,17 @@ import { Tag } from 'ant-design-vue'
// 引入字典数据
import { getDictOption } from '/@/utils/dictUtil'
import { getOrgList } from '/@/api/common'
import { getOrgList, GetClientPortSelectList, GetCarrierSelectList } from '/@/api/common'
import {
GetClientLanesSelectList,
GetAgentCnClientList,
GetClientFrtSelectList,
GetClientSourceSelectList,
} from '/@/views/operation/seaexport/api/BookingLedger'
// 往来单位下拉框数据
const companyDict = ref([])
import { useOptionsStore } from '/@/store/modules/options'
const optionsStore = useOptionsStore()
let businessType: any = [
{ value: 1, label: '海运出口' },
{ value: 2, label: '海运进口' },
@ -28,18 +36,23 @@ export const columns: BasicColumn[] = [
width: 200,
},
{
title: '费用类',
dataIndex: 'feeCategory',
title: '费用类',
dataIndex: 'feeType',
width: 120,
customRender: ({ text }) => {
if (text == '1') {
if (text == 1) {
return '收'
} else if (text == '2') {
} else if (text == 2) {
return '付'
}
return text
},
},
{
title: '费用类别',
dataIndex: 'feeCategoryName',
width: 200,
},
{
title: '是否停用',
dataIndex: 'isDisabled',
@ -93,14 +106,14 @@ export const searchFormSchema: FormSchema[] = [
colProps: { span: 4 },
},
{
field: 'feeCategory',
label: '费用类',
field: 'feeType',
label: '费用类',
component: 'Select',
colProps: { span: 4 },
componentProps: {
options: [
{ label: '收', value: '1' },
{ label: '付', value: '2' },
{ label: '收', value: 1 },
{ label: '付', value: 2 },
],
},
},
@ -239,17 +252,192 @@ export const formSchema: FormSchema[] = [
// show: false,
// },
{
field: 'feeCategory',
label: '费用类',
field: 'feeType',
label: '费用类',
component: 'Select',
colProps: { span: 6 },
componentProps: {
options: [
{ label: '收', value: '1' },
{ label: '付', value: '2' },
{ label: '收', value: 1 },
{ label: '付', value: 2 },
],
},
},
{
label: '费用类别名称',
field: 'feeCategoryName',
component: 'Input',
defaultValue: '',
show: false,
},
{
field: 'feeCategoryId',
label: '费用类别',
defaultValue: '',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('Fee_FeeCategoryId').then((res) => {
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
console.log(e, obj)
if (e && obj) {
formModel.feeCategoryName = obj.label
formModel.feeCategoryId = obj.value
}
if (!e && !obj) {
formModel.feeCategoryName = ''
formModel.feeCategoryId = ''
}
},
}
},
},
{
label: '起运港',
field: 'polCode',
component: 'ApiSelect',
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: () => {
return {
api: GetClientPortSelectList,
resultField: 'data',
allowClear: true,
showSearch: true,
labelField: 'pinYinCode',
showName: 'pinYinCode',
valueField: 'ediCode',
immediate: true,
getPopupContainer: () => document.body,
}
},
},
{
label: '卸货港',
field: 'podCode',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: () => {
return {
api: GetClientPortSelectList,
resultField: 'data',
allowClear: true,
showSearch: true,
labelField: 'pinYinCode',
showName: 'pinYinCode',
valueField: 'ediCode',
immediate: true,
getPopupContainer: () => document.body,
}
},
},
{
field: 'laneId',
label: '航线',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetClientLanesSelectList,
labelField: 'laneName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
label: '业务来源',
field: 'sourceId',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetClientSourceSelectList,
labelField: 'sourceName',
valueField: 'id',
resultField: 'data',
}
},
},
{
label: '船公司',
field: 'carrierId',
labelSlot: 'carrierId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetCarrierSelectList,
labelField: 'pinYinCode',
showName: 'cnName',
valueField: 'id',
resultField: 'data',
}
},
},
{
label: '订舱口',
field: 'forwarderId',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetAgentCnClientList,
labelField: 'shortName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'mblFrtCode',
label: '付费方式',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
defaultValue: null,
colProps: { span: 6 },
componentProps: ({ formModel, formActionType }) => {
return {
api: GetClientFrtSelectList,
allowClear: true,
showSearch: true,
labelField: 'frtName',
valueField: 'ediCode',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'isDisabled',
label: '是否停用',

@ -144,8 +144,25 @@ export const columns: BasicColumn[] = [
return RData
},
},
{ title: '账单状态', dataIndex: 'isLocking', align: 'left' },
{ title: '是否不含税', dataIndex: 'isNoTax', align: 'left' },
{
title: '账单状态',
dataIndex: 'isLocking',
align: 'left',
},
{
title: '是否不含税',
dataIndex: 'isNoTax',
align: 'left',
customRender: ({ text }) => {
let RData = '-'
if (text) {
RData = '是'
} else {
RData = '否'
}
return RData
},
},
{ title: '应收RMB', dataIndex: 'rmbdr', align: 'left' },
{ title: '未收RMB', dataIndex: 'balrmbdr', align: 'left' },
{ title: '应收USD', dataIndex: 'usddr', align: 'left' },

@ -117,7 +117,7 @@
<a-col :span="16" class="bottomTableL">
<a-spin :spinning="spinningL">
<BasicTable
class="ds-table"
class="ds-table-detail"
@register="registerTableL"
@selection-change="selectionChange"
>
@ -162,7 +162,7 @@
</a-col>
<a-col :span="8" class="bottomTableR">
<a-spin :spinning="spinningR">
<BasicTable class="ds-table" @register="registerTableR">
<BasicTable class="ds-table-detail" @register="registerTableR">
<template #tableTitle>
<!-- <p class="tableTitle">费用账单明细</p> -->
<a-popconfirm
@ -350,6 +350,7 @@
showIndexColumn: true,
immediate: false,
canResize: true,
resizeHeightOffset: 105,
},
)
const spinningR = ref(false)
@ -746,97 +747,113 @@
// flex: 1;
// padding-top: 0 !important;
.bottomTableL {
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 {
position: absolute;
margin-left: 5px;
bottom: 0;
width: 80%;
display: flex;
font-size: 12px;
font-weight: 400;
line-height: 15.84px;
.Ttitle {
}
.unitBox {
flex: 1;
display: flex;
flex-wrap: wrap;
.unit {
width: 150px;
height: 20px;
margin: 0 6px 5px 0;
padding: 2px 6px;
box-sizing: border-box;
border-radius: 2px;
background: rgba(245, 249, 252, 1);
display: flex;
.title {
color: rgba(51, 56, 61, 1);
text-align: left;
}
.num {
flex: 1;
color: rgba(37, 122, 250, 1);
text-align: right;
}
}
}
}
}
.bottomTableR {
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%;
.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 {
border: none;
height: calc(100% - 54px);
// padding: 0;
.ant-table-body {
max-height: auto !important;
height: auto !important;
table {
height: calc(100% - 24px) !important;
}
}
.ant-table-content {
overflow: auto !important;
height: 100%;
}
}
}
}
.ds-table-detail {
height: calc(100% - 85px);
}
}
}
.totalBox {
position: relative;
bottom: 0;
}
// flex: 2;
// :deep(.ant-table-container) {
// padding: 0 20px 0 0;
// }
// // height: calc(100vh - 535px);
// margin-bottom: 10px;
// position: relative;
// .totalBox {
// position: absolute;
// margin-left: 5px;
// bottom: 0;
// width: 80%;
// display: flex;
// font-size: 12px;
// font-weight: 400;
// line-height: 15.84px;
// .Ttitle {
// }
// .unitBox {
// flex: 1;
// display: flex;
// flex-wrap: wrap;
// .unit {
// width: 150px;
// height: 20px;
// margin: 0 6px 5px 0;
// padding: 2px 6px;
// box-sizing: border-box;
// border-radius: 2px;
// background: rgba(245, 249, 252, 1);
// display: flex;
// .title {
// color: rgba(51, 56, 61, 1);
// text-align: left;
// }
// .num {
// flex: 1;
// color: rgba(37, 122, 250, 1);
// text-align: right;
// }
// }
// }
// }
}
.bottomTableR {
// flex: 1;
// height: calc(100vh - 600px);
padding: 0 0 0 20px;
border-top: 1px solid #e8ebed;
// :deep(.ant-table-container) {
// padding: 0 0 0 20px;
// }
}
// :deep(.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 {
// border: none;
// height: calc(100% - 54px);
// // padding: 0;
// .ant-table-body {
// max-height: auto !important;
// height: auto !important;
// table {
// height: calc(100% - 24px) !important;
// }
// }
// .ant-table-content {
// overflow: auto !important;
// height: 100%;
// }
// }
// }
// }
// }
// }
// }
// }
// }
}
}
.tableTitle {

@ -12,11 +12,11 @@
>
<div class="CsMain">
<BasicForm @register="registerForm" @submit="handleSubmit" />
<div class="CsBottom">
<div class="bottomTableL">
<a-row class="CsBottom">
<a-col :span="16" class="bottomTableL">
<a-spin :spinning="spinningL">
<BasicTable
class="ds-table"
class="ds-table-detail"
@register="registerTableL"
@selection-change="selectionChange"
>
@ -28,10 +28,15 @@
</template>
</BasicTable>
</a-spin>
</div>
<div class="bottomTableR">
</a-col>
<a-col :span="8" class="bottomTableR">
<a-spin :spinning="spinningR">
<BasicTable class="ds-table" @register="registerTableRT" rowKey="id" :maxHeight="300">
<BasicTable
class="ds-table-detail"
@register="registerTableRT"
rowKey="id"
:maxHeight="300"
>
<template #tableTitle>
<p class="tableTitle">账单费用明细</p>
<a-button v-repeat type="link" @click="addDetailR">
@ -40,8 +45,8 @@
</template>
</BasicTable>
</a-spin>
</div>
</div>
</a-col>
</a-row>
<!-- <a-row class="p-4 CsBottom" :gutter="5"> -->
<!-- <a-col :span="17" class="bottomTableL">
<a-spin :spinning="spinningL">
@ -116,7 +121,7 @@
registerTableL,
{ getPaginationRef, setTableData, getSelectRows: getSelectRowsL, getDataSource },
] = useTable({
maxHeight: 180,
maxHeight: 360,
title: '',
dataSource: dataSourceL.value,
rowSelection: { type: 'checkbox' },
@ -255,7 +260,7 @@
//
const [registerTableRT, { setTableData: setTableDataRT, getSelectRows: getSelectRowsR }] =
useTable({
maxHeight: 180,
maxHeight: 360,
title: '',
rowSelection: { type: 'checkbox' },
columns: columnsRT,
@ -329,46 +334,49 @@
vertical-align: bottom;
}
.bottomTableL {
height: calc(100vh - 650px);
margin-bottom: 10px;
padding: 0 20px 0 0;
border-right: 1px solid #e8ebed;
// height: calc(100vh - 650px);
// margin-bottom: 10px;
}
.bottomTableR {
height: calc(100vh - 650px);
}
:deep(.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);
.ant-table-body {
max-height: auto !important;
height: auto !important;
table {
height: calc(100% - 24px) !important;
}
}
.ant-table-content {
overflow: auto !important;
height: 100%;
}
}
}
}
}
}
}
}
}
padding: 0 0 0 20px;
// height: calc(100vh - 650px);
}
// :deep(.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);
// .ant-table-body {
// max-height: auto !important;
// height: auto !important;
// table {
// height: calc(100% - 24px) !important;
// }
// }
// .ant-table-content {
// overflow: auto !important;
// height: 100%;
// }
// }
// }
// }
// }
// }
// }
// }
// }
}
</style>

@ -77,13 +77,23 @@
</a-tooltip>
</div>
<div class="buttonGroup">
<!-- <a-button v-repeat type="link" @click="Lock">
<!-- <a-button v-repeat type="link" @click="generated">
<span class="iconfont icon-renwu_ IconColor"></span>
生成发票申请
</a-button> -->
</div>
</template>
<template v-slot:bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'billNo'">
<div class="billNo">
<span
v-if="record.billNo"
@click="FnCopy(record.billNo)"
class="iconfont icon-fuzhi3"
></span>
<span>{{ record.billNo }}</span>
</div>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
@ -97,6 +107,12 @@
]"
/>
</template>
<template v-if="column.dataIndex == 'isLocking'">
<span v-if="record.isLocking">
<i class="iconfont icon-locksuo"></i>
</span>
<span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
</template>
</template>
</BasicTable>
</div>
@ -121,7 +137,7 @@
import * as XLSX from 'xlsx'
import DsPrint from '/@/components/Print/index.vue'
import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage()
const { notification, createMessage } = useMessage()
import { SvgIcon } from '/@/components/Icon'
import { useGo } from '/@/hooks/web/usePage'
const go = useGo()
@ -210,6 +226,16 @@
fixed: 'right',
},
})
//
function FnCopy(data) {
const el = document.createElement('input')
el.setAttribute('value', data)
document.body.appendChild(el)
el.select()
document.execCommand('copy')
document.body.removeChild(el)
createMessage.success('复制成功!')
}
//
function GoDetailed(type, data) {
if (type) {
@ -237,6 +263,8 @@
}
})
}
//
function generated() {}
//
function UnLock() {
let ApiData: any = {
@ -422,6 +450,10 @@
const calcData = ref([])
</script>
<style lang="less" scoped>
.icon-fuzhi3 {
color: #257afa;
cursor: pointer;
}
.topTable {
height: calc(100vh - 145px);
}

Loading…
Cancel
Save