06/26
张同海
5 months ago
commit
9bafebac15
@ -0,0 +1,416 @@
|
||||
/*
|
||||
* @Description: 费用代码设置tsx
|
||||
* @Author: lijj
|
||||
* @Date: 2024-04-25 15:48:33
|
||||
*/
|
||||
import { ref, h, ComponentOptions, resolveComponent } from 'vue'
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||
import { useOptionsStore } from '/@/store/modules/options'
|
||||
const optionsStore = useOptionsStore()
|
||||
// 引入字典数据
|
||||
import { getDictOption } from '/@/utils/dictUtil'
|
||||
|
||||
// 业务表格列
|
||||
export const businessColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '委托编号',
|
||||
dataIndex: 'customerNo',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '主提单号',
|
||||
dataIndex: 'mblno',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '结算单位',
|
||||
dataIndex: 'customerName',
|
||||
width: 150,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: 'RMB未付',
|
||||
dataIndex: 'unpaidRMB',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: 'USD未付',
|
||||
dataIndex: 'unpaidUSD',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '其他未付',
|
||||
dataIndex: 'unpaidOther',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: 'RMB未收',
|
||||
dataIndex: 'unpaidOther',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: 'USD未收',
|
||||
dataIndex: 'unpaidOther',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '其他未收',
|
||||
dataIndex: 'unpaidOther',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '订舱编号',
|
||||
dataIndex: 'unpaidOther',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: 'RMB付未开票',
|
||||
dataIndex: 'unBilledRMB',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: 'USD付未开票',
|
||||
dataIndex: 'unBilledUSD',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '合计未收',
|
||||
dataIndex: 'unreceivedTotal',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '业务类别',
|
||||
dataIndex: 'businessType',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '分提单号',
|
||||
dataIndex: 'hblno',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{/////////////
|
||||
title: '委托单位',
|
||||
dataIndex: 'unreceivedTotal',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '开船日期',
|
||||
dataIndex: 'etd',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '揽货人',
|
||||
dataIndex: 'saleName',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '更改单',
|
||||
dataIndex: 'changeOrder',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{/////////////
|
||||
title: '会计日期',
|
||||
dataIndex: 'changeOrder',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operator',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '集装箱',
|
||||
dataIndex: 'cntrTotal',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{////////////////
|
||||
title: 'RMB收费状态',
|
||||
dataIndex: 'cntrTotal',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{//////////////////
|
||||
title: 'USD收费状态',
|
||||
dataIndex: 'cntrTotal',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '起运港',
|
||||
dataIndex: 'loadPort',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '卸货港',
|
||||
dataIndex: 'dischargePort',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '船名',
|
||||
dataIndex: 'vessel',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '航次',
|
||||
dataIndex: 'voyage',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
title: '结费方式',
|
||||
dataIndex: 'stlName',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'applicationNO',
|
||||
label: '申请编号',
|
||||
component: 'Input',
|
||||
dynamicDisabled: true,
|
||||
colProps: { span: 3 },
|
||||
// render: ({ model, field }) => {
|
||||
// return h(resolveComponent('span') as ComponentOptions, {
|
||||
// value: model[field]
|
||||
// })
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'statusText',
|
||||
label: '状态',
|
||||
component: 'Input',
|
||||
dynamicDisabled: true,
|
||||
colProps: { span: 3 },
|
||||
// render: ({ model, field }) => {
|
||||
// return h(resolveComponent('span') as ComponentOptions, {
|
||||
// value: model[field]
|
||||
// })
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'customerId',
|
||||
label: '结算对象',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
option: optionsStore.getOptionsByCode('GetClientListByCode'),
|
||||
labelField: 'shortName',
|
||||
valueField: 'id',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'customerBankId',
|
||||
label: '结算对象账户',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
option: optionsStore.getOptionsByCode('getClientBankList'),
|
||||
labelField: 'bankName',
|
||||
valueField: 'id',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'customerBank',
|
||||
label: '结算对象账号',
|
||||
component: 'Input',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 }
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: '申请日期',
|
||||
component: 'DatePicker',
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 }
|
||||
},
|
||||
{
|
||||
field: 'currency',
|
||||
label: '币别',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
option: optionsStore.getOptionsByCode('GetFeeCurrencySelectList'),
|
||||
labelField: 'name',
|
||||
valueField: 'codeName',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'amountRMB',
|
||||
label: 'RMB金额',
|
||||
component: 'InputNumber',
|
||||
colProps: { span: 3 },
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'amountUSD',
|
||||
label: 'USD金额',
|
||||
component: 'InputNumber',
|
||||
colProps: { span: 3 },
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'amountOther',
|
||||
label: '其他外币金额',
|
||||
component: 'InputNumber',
|
||||
colProps: { span: 3 },
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'amountUSD',
|
||||
label: '计划结算RMB',
|
||||
component: 'InputNumber',
|
||||
colProps: { span: 3 }
|
||||
},
|
||||
{
|
||||
field: 'amountOther',
|
||||
label: '计划结算USD',
|
||||
component: 'InputNumber',
|
||||
colProps: { span: 3 }
|
||||
},
|
||||
{
|
||||
field: 'settlementType',
|
||||
label: '结算方式',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
option: optionsStore.getOptionsByCode('GetClientStlModeSelectList'),
|
||||
labelField: 'stlName',
|
||||
valueField: 'id',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'paymentDate',
|
||||
label: '申请支付日期',
|
||||
component: 'DatePicker',
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 3 }
|
||||
},
|
||||
// {
|
||||
// field: 'createBy',
|
||||
// label: '申请人',
|
||||
// component: 'Input',
|
||||
// dynamicDisabled: false,
|
||||
// colProps: { span: 3 }
|
||||
// },
|
||||
// {
|
||||
// field: 'createBy',
|
||||
// label: '计划结算其他',
|
||||
// component: 'Input',
|
||||
// dynamicDisabled: false,
|
||||
// colProps: { span: 3 }
|
||||
// },
|
||||
]
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '结算单位',
|
||||
field: 'customerId',
|
||||
component: 'ApiSelect',
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
option: optionsStore.getOptionsByCode('GetClientListByCode'),
|
||||
immediate: false,
|
||||
labelField: 'shortName',
|
||||
valueField: 'codeName',
|
||||
resultField: 'data',
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '主提单号',
|
||||
field: 'mblno',
|
||||
component: 'Input',
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
label: '分提单号',
|
||||
field: 'hblno',
|
||||
component: 'Input',
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
label: '对账编号',
|
||||
field: 'debitNo',
|
||||
component: 'Input',
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 }
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,127 @@
|
||||
<!--
|
||||
* @Description: 操作管理 -> 付费申请 -> 申请明细
|
||||
* @Author: lijj
|
||||
* @Date: 2024-06-20 11:54:04
|
||||
-->
|
||||
<template>
|
||||
<div class="ds-pay-apply-detail-fee-info">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="2" tab="费用明细">
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="link" @click="add"> 添加申请明细 </a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="附件上传" force-render>
|
||||
<div style="width: 400px;">
|
||||
<DsFile
|
||||
ref="dsFile"
|
||||
:id='route?.query?.id'
|
||||
/>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, defineEmits, defineProps, watch, defineExpose } from 'vue'
|
||||
import { BasicTable, useTable } from '/@/components/Table'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import { columns, searchFormSchema } from './applyInfoColumns'
|
||||
// 引入附近上传组件
|
||||
import DsFile from "/@/components/File/index.vue"
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const { createMessage } = useMessage()
|
||||
const emit = defineEmits(['add'])
|
||||
const activeKey = ref('2')
|
||||
const props = defineProps({
|
||||
feeData: {
|
||||
type: Array
|
||||
},
|
||||
// 业务id
|
||||
id: {
|
||||
type: String
|
||||
}
|
||||
})
|
||||
const [registerTable, { reload, getForm, getPaginationRef, getSelectRows, getDataSource, setTableData }] = useTable({
|
||||
title: '',
|
||||
api: async (p) => {
|
||||
const res = await GetList(p)
|
||||
return new Promise((resolve) => {
|
||||
resolve({ data: [...res.data], total: res.count })
|
||||
})
|
||||
},
|
||||
beforeFetch: () => {
|
||||
var currentPageInfo: any = getPaginationRef()
|
||||
var data = getForm().getFieldsValue()
|
||||
const postParam = {
|
||||
queryCondition: '',
|
||||
pageCondition: {
|
||||
pageIndex: currentPageInfo.current,
|
||||
pageSize: currentPageInfo.pageSize,
|
||||
sortConditions: [],
|
||||
},
|
||||
}
|
||||
let condition: API.ConditionItem[] = []
|
||||
if (!!data.UserName) {
|
||||
condition.push({
|
||||
FieldName: 'UserName',
|
||||
FieldValue: data.UserName,
|
||||
ConditionalType: 1,
|
||||
})
|
||||
}
|
||||
if (!!data.UserCode) {
|
||||
condition.push({
|
||||
FieldName: 'UserCode',
|
||||
FieldValue: data.UserCode,
|
||||
ConditionalType: 1,
|
||||
})
|
||||
}
|
||||
postParam.queryCondition = JSON.stringify(condition)
|
||||
// console.log(postParam);
|
||||
return postParam
|
||||
},
|
||||
columns,
|
||||
isTreeTable: false,
|
||||
pagination: true,
|
||||
striped: false,
|
||||
useSearchForm: false,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
showIndexColumn: true,
|
||||
canResize: false,
|
||||
rowSelection: { type: 'checkbox' },
|
||||
immediate: false
|
||||
})
|
||||
// 添加明细
|
||||
const add = () => {
|
||||
emit('add')
|
||||
}
|
||||
const tableData = ref([])
|
||||
watch(
|
||||
() => props.feeData,
|
||||
(list) => {
|
||||
console.log(list)
|
||||
setTableData([...list])
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
//初始化
|
||||
reload()
|
||||
})
|
||||
defineExpose({
|
||||
reload
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ds-pay-apply-detail-fee-info {
|
||||
.vben-basic-table-header__toolbar {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,97 @@
|
||||
/*
|
||||
* @Author: lijingjia lijj_xl@163.com
|
||||
* @Date: 2024-06-21 16:59:01
|
||||
* @Description:
|
||||
*/
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '委托编号',
|
||||
dataIndex: 'customerNo',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: '主提单号',
|
||||
dataIndex: 'mblno',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: '委托单位',
|
||||
dataIndex: 'customerName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '开船日期',
|
||||
dataIndex: 'etd',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '业务来源',
|
||||
dataIndex: 'sourceName',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: '费用名称',
|
||||
dataIndex: 'feeName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '收付',
|
||||
dataIndex: 'billType',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '费用对象',
|
||||
dataIndex: 'customerName',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '申请金额',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '原始币别',
|
||||
dataIndex: 'originalCurrency',
|
||||
width: 100,
|
||||
},
|
||||
// {
|
||||
// title: '原始汇率',
|
||||
// dataIndex: 'originalCurrency',
|
||||
// width: 200,
|
||||
// },
|
||||
{
|
||||
title: '折算汇率',
|
||||
dataIndex: 'exchangeRate',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '原始金额',
|
||||
dataIndex: 'originalAmount',
|
||||
width: 100,
|
||||
},
|
||||
// {
|
||||
// title: '进项/销项税率',
|
||||
// dataIndex: 'originalCurrency',
|
||||
// width: 200,
|
||||
// },
|
||||
{
|
||||
title: '揽货人',
|
||||
dataIndex: 'note',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '所属分部',
|
||||
dataIndex: 'createTime',
|
||||
width: 120,
|
||||
},
|
||||
]
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'CountryName',
|
||||
label: '国家名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 }
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,243 @@
|
||||
<!--
|
||||
* @Author: lijingjia lijj_xl@163.com
|
||||
* @Date: 2024-06-24 10:08:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="ds-bus-table">
|
||||
<BasicTable
|
||||
:canRowSelect="true"
|
||||
:scroll="{ x: '100%', y: 188 }"
|
||||
:row-selection="{ selectedRowKeys: state.historyRowKeys, onChange: historyChange }"
|
||||
rowKey="id"
|
||||
@register="registerTable"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-button type="link" @click="addInfos">增加结算明细</a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<div class="info">
|
||||
<div>
|
||||
<a-button @click="save" type="link">添加申请费用明细</a-button>
|
||||
</div>
|
||||
<feeTable
|
||||
ref="feeTabel"
|
||||
></feeTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, reactive, watch, defineExpose, defineProps, defineEmits } from 'vue'
|
||||
import { BasicTable, useTable } from '/@/components/Table'
|
||||
import { GetBizList } from '../../api'
|
||||
import { businessColumns, searchFormSchema } from '../columns'
|
||||
import feeTable from '/@/components/CostEntry/components/feeTable.vue'
|
||||
// 引入提示信息
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
const emit = defineEmits(['save'])
|
||||
const { createMessage } = useMessage()
|
||||
const props = defineProps({
|
||||
// 表单数据
|
||||
formData: {
|
||||
type: Object
|
||||
},
|
||||
// 设置表单数据
|
||||
setFieldsValue: {
|
||||
type: Function
|
||||
}
|
||||
})
|
||||
const [registerTable, { reload, getForm, getPaginationRef, getSelectRows, setSelectedRows }] = useTable({
|
||||
api: async (p) => {
|
||||
const res = await GetBizList(p)
|
||||
if (res?.data?.length) state.historyRowKeys = [res.data[0].id]
|
||||
setSelectedRows([res.data[0]])
|
||||
return new Promise((resolve) => {
|
||||
resolve({ data: [...res.data], total: res.count })
|
||||
})
|
||||
},
|
||||
beforeFetch: () => {
|
||||
var currentPageInfo: any = getPaginationRef()
|
||||
var data = getForm().getFieldsValue()
|
||||
const postParam = {
|
||||
queryCondition: '',
|
||||
pageCondition: {
|
||||
pageIndex: currentPageInfo.current,
|
||||
pageSize: currentPageInfo.pageSize,
|
||||
sortConditions: [],
|
||||
},
|
||||
}
|
||||
let condition: API.ConditionItem[] = []
|
||||
if (!!data.customerNo) {
|
||||
condition.push({
|
||||
FieldName: 'customerNo',
|
||||
FieldValue: data.customerNo,
|
||||
ConditionalType: 1
|
||||
})
|
||||
}
|
||||
if (!!data.Etd) {
|
||||
condition.push({
|
||||
FieldName: 'Etd',
|
||||
FieldValue: data.Etd[0],
|
||||
ConditionalType: 3
|
||||
})
|
||||
condition.push({
|
||||
FieldName: 'Etd',
|
||||
FieldValue: data.Etd[1],
|
||||
ConditionalType: 5
|
||||
})
|
||||
}
|
||||
if (!!data.loadPort) {
|
||||
condition.push({
|
||||
FieldName: 'loadPort',
|
||||
FieldValue: data.loadPort,
|
||||
ConditionalType: 1
|
||||
})
|
||||
}
|
||||
if (!!data.dischargePort) {
|
||||
condition.push({
|
||||
FieldName: 'dischargePort',
|
||||
FieldValue: data.dischargePort,
|
||||
ConditionalType: 1
|
||||
})
|
||||
}
|
||||
postParam.queryCondition = JSON.stringify(condition)
|
||||
return postParam
|
||||
},
|
||||
columns: businessColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema
|
||||
},
|
||||
isTreeTable: false,
|
||||
pagination: true,
|
||||
striped: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
bordered: true,
|
||||
showIndexColumn: true,
|
||||
canResize: false,
|
||||
immediate: false
|
||||
})
|
||||
// 费用信息已选项
|
||||
const state = reactive({
|
||||
historyRowKeys: []
|
||||
})
|
||||
// 找出2个数组不同的元素
|
||||
const findDifferentElements = (arr1, arr2) => {
|
||||
return [
|
||||
...arr1.filter(item => !arr2.includes(item)),
|
||||
...arr2.filter(item => !arr1.includes(item))
|
||||
]
|
||||
}
|
||||
// 根据选择的业务id存储费用数据
|
||||
const allFeeData = {}
|
||||
const feeTabel = ref(null)
|
||||
const historyChange = async (v) => {
|
||||
state.historyRowKeys = v
|
||||
}
|
||||
// 行点击事件
|
||||
const onRowClick = (record) => {
|
||||
state.historyRowKeys = [record?.id]
|
||||
setSelectedRows([record])
|
||||
}
|
||||
const feeData = () => {
|
||||
return feeTabel.value.selectfeeData
|
||||
}
|
||||
// 添加申请费用明细
|
||||
const save = () => {
|
||||
const data = feeTabel.value.selectfeeData
|
||||
emit('save', data)
|
||||
}
|
||||
const addInfos = () => {
|
||||
const selectRows = getSelectRows()
|
||||
console.log(selectRows)
|
||||
// console.log(props.formData.currency)
|
||||
return
|
||||
if (props.formData.customerId) {
|
||||
let flag = false
|
||||
selectRows.forEach(item => {
|
||||
if (item.customerId == props.formData.customerId) {
|
||||
flag = true
|
||||
}
|
||||
})
|
||||
if (!flag) {
|
||||
return createMessage.warning('没有选择要添加的业务!')
|
||||
}
|
||||
selectRows
|
||||
} else {
|
||||
if (state.historyRowKeys.length == 0 ) {
|
||||
return createMessage.warning('没有选择要添加的业务!')
|
||||
}
|
||||
}
|
||||
console.log(allFeeData)
|
||||
// 合并所有选择过的费用明细
|
||||
let feeList = []
|
||||
for(var key in allFeeData) {
|
||||
feeList = [...feeList, ...allFeeData[key]]
|
||||
}
|
||||
console.log(props.formData)
|
||||
|
||||
feeList.forEach(item => {
|
||||
if (props.formData.currency && props.formData.currency != item.currency) {
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => state.historyRowKeys, (v, old) => {
|
||||
// 勾选前后同的id
|
||||
const diffIds = findDifferentElements(v, old)
|
||||
const rows = getSelectRows()
|
||||
if (v.length > old.length) {
|
||||
// 增加勾选
|
||||
diffIds.forEach(item => {
|
||||
// 获取业务类型传给下个子组件
|
||||
let btype = rows.filter(row => {
|
||||
return item == row.id
|
||||
})
|
||||
btype = btype[0]?.businessType
|
||||
feeTabel.value.init([item], 'apply', btype).then(res => {
|
||||
allFeeData[item] = res
|
||||
})
|
||||
})
|
||||
} else if (v.length < old.length) {
|
||||
// 减少勾选
|
||||
diffIds.forEach(item => {
|
||||
delete allFeeData[item]
|
||||
})
|
||||
if (v.length) {
|
||||
// 获取业务类型传给下个子组件
|
||||
let btype = rows[0].businessType
|
||||
feeTabel.value.init([v[v.length - 1]], 'apply', btype)
|
||||
}
|
||||
} else {
|
||||
// 点击单行平行切换
|
||||
let btype = rows[0].businessType
|
||||
feeTabel.value.init(v, 'apply', btype)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
//初始化
|
||||
reload()
|
||||
})
|
||||
defineExpose({
|
||||
feeData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ds-bus-table {
|
||||
.vben-basic-table-header__toolbar {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.vben-basic-table {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-form {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,179 @@
|
||||
<!--
|
||||
* @Description: 操作管理 -> 付费申请 -> 详情布局
|
||||
* @Author: lijj
|
||||
* @Date: 2024-06-20 11:54:04
|
||||
-->
|
||||
<template>
|
||||
<div class="ds-pay-apply-detail ds-detail-box">
|
||||
<a-spin :spinning="dloading">
|
||||
<div>
|
||||
<a-button @click="save">保存</a-button>
|
||||
</div>
|
||||
<!-- 表单区域 -->
|
||||
<div class="form-area">
|
||||
<BasicForm @register="registerForm" />
|
||||
</div>
|
||||
<!-- 申请明细 -->
|
||||
<div>
|
||||
<ApplyInfo
|
||||
ref="applyInfo"
|
||||
@add="add"
|
||||
:feeData="feeData"
|
||||
></ApplyInfo>
|
||||
</div>
|
||||
</a-spin>
|
||||
<a-modal
|
||||
class="fee-modal"
|
||||
v-model:visible="visible"
|
||||
title="添加支付结算明细"
|
||||
width="90%"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 业务表格 -->
|
||||
<BusinessTable
|
||||
ref="busTable"
|
||||
:formData="getFieldsValue()"
|
||||
:setFieldsValue="setFieldsValue"
|
||||
@save="save"
|
||||
></BusinessTable>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { BasicTable, useTable } from '/@/components/Table'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import { BasicForm, useForm } from '/@/components/Form'
|
||||
import ApplyInfo from './components/applyInfo.vue'
|
||||
// 业务表格
|
||||
import BusinessTable from './components/businessTable.vue'
|
||||
const { createMessage } = useMessage()
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const visible = ref(false)
|
||||
import { formSchema } from './columns'
|
||||
import { Save, Get } from '../api'
|
||||
const [registerForm, { validate, getFieldsValue, setFieldsValue }] = useForm({
|
||||
labelWidth: 150,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false
|
||||
})
|
||||
// 业务表loading
|
||||
const loading = ref(false)
|
||||
// 详情页面loading
|
||||
const dloading = ref(false)
|
||||
const busTable = ref(null)
|
||||
const feeData = ref([])
|
||||
const handleOk = () => {
|
||||
feeData.value = busTable.value.feeData()
|
||||
visible.value = false
|
||||
}
|
||||
// const [registerTable, { reload, getForm, getPaginationRef, getSelectRows }] = useTable({
|
||||
// title: '',
|
||||
// api: async (p) => {
|
||||
// const res = await GetList(p)
|
||||
// return new Promise((resolve) => {
|
||||
// resolve({ data: [...res.data], total: res.count })
|
||||
// })
|
||||
// },
|
||||
// beforeFetch: () => {
|
||||
// var currentPageInfo: any = getPaginationRef()
|
||||
// var data = getForm().getFieldsValue()
|
||||
// const postParam = {
|
||||
// queryCondition: '',
|
||||
// pageCondition: {
|
||||
// pageIndex: currentPageInfo.current,
|
||||
// pageSize: currentPageInfo.pageSize,
|
||||
// sortConditions: [],
|
||||
// },
|
||||
// }
|
||||
// let condition: API.ConditionItem[] = []
|
||||
// if (!!data.UserName) {
|
||||
// condition.push({
|
||||
// FieldName: 'UserName',
|
||||
// FieldValue: data.UserName,
|
||||
// ConditionalType: 1,
|
||||
// })
|
||||
// }
|
||||
// if (!!data.UserCode) {
|
||||
// condition.push({
|
||||
// FieldName: 'UserCode',
|
||||
// FieldValue: data.UserCode,
|
||||
// ConditionalType: 1,
|
||||
// })
|
||||
// }
|
||||
// postParam.queryCondition = JSON.stringify(condition)
|
||||
// // console.log(postParam);
|
||||
// return postParam
|
||||
// },
|
||||
// columns,
|
||||
// formConfig: {
|
||||
// labelWidth: 120,
|
||||
// schemas: searchFormSchema,
|
||||
// },
|
||||
// isTreeTable: false,
|
||||
// pagination: true,
|
||||
// striped: false,
|
||||
// useSearchForm: true,
|
||||
// showTableSetting: true,
|
||||
// bordered: true,
|
||||
// showIndexColumn: true,
|
||||
// canResize: false,
|
||||
// rowSelection: { type: 'checkbox' },
|
||||
// immediate: false
|
||||
// })
|
||||
// 打开添加明细弹窗
|
||||
const add = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const applyInfo = ref(null)
|
||||
// 保存
|
||||
const save = async (feeInfo) => {
|
||||
const postData = await validate()
|
||||
postData['details'] = feeInfo
|
||||
loading.value = true
|
||||
Save(postData).then(res => {
|
||||
console.log(res)
|
||||
loading.value = false
|
||||
applyInfo.value.reload()
|
||||
})
|
||||
}
|
||||
// 详情页面初始化
|
||||
const init = () => {
|
||||
const id = route.query.id
|
||||
if (id) {
|
||||
dloading.value = true
|
||||
Get({ id }).then(res => {
|
||||
dloading.value = false
|
||||
setFieldsValue(res.data)
|
||||
feeData.value = res.data.details
|
||||
})
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
//初始化
|
||||
// reload()
|
||||
init()
|
||||
})
|
||||
function handleSuccess() {
|
||||
// reload()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.form-area {
|
||||
padding: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.fee-modal {
|
||||
.ant-modal-body {
|
||||
padding-top: 0 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue