客户对账 基础页面布局
张同海
6 months ago
parent
798908dd24
commit
3a74f5ceba
@ -1,33 +1,94 @@
|
|||||||
/*
|
|
||||||
* @Author: 张同海 14166000+zhangtonghai@user.noreply.gitee.com
|
|
||||||
* @Date: 2024-06-04 09:29:33
|
|
||||||
* @LastEditors: 张同海 14166000+zhangtonghai@user.noreply.gitee.com
|
|
||||||
* @LastEditTime: 2024-06-04 09:35:15
|
|
||||||
* @FilePath: \ds-wms-client-web\src\views\operation\CustomerReconciliation\columns.tsx
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
*/
|
|
||||||
import { BasicColumn, FormSchema } from '/@/components/Table'
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
export const searchFormSchema: FormSchema[] = [
|
export const searchFormSchema: FormSchema[] = [
|
||||||
{
|
{ field: 'mblno', label: '对账编号', component: 'Input', colProps: { span: 4 } },
|
||||||
field: 'mblno',
|
// {
|
||||||
label: '主提单号',
|
// field: 'mblno',
|
||||||
component: 'Input',
|
// label: '对账客户',
|
||||||
// defaultValue: '',
|
// component: 'Input',
|
||||||
colProps: { span: 4 },
|
// colProps: { span: 4 },
|
||||||
},
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '从对账日期',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '到对账日期',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '账单说明',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '对账人',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '业务相关编号',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '从业务日期',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '到业务日期',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '船名',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '航次',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 4 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '状态',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 2 },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// field: 'mblno',
|
||||||
|
// label: '备注',
|
||||||
|
// component: 'Input',
|
||||||
|
// colProps: { span: 2 },
|
||||||
|
// },
|
||||||
]
|
]
|
||||||
//列表
|
//列表
|
||||||
export const columns: BasicColumn[] = [
|
export const columns: BasicColumn[] = [
|
||||||
{
|
{ title: '对账编号', dataIndex: 'testInput', align: 'left' },
|
||||||
title: '单行文本',
|
{ title: '客户名称', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
dataIndex: 'testInput',
|
{ title: '对账日期', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
width: 230,
|
{ title: '对账人', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
align: 'left',
|
{ title: '状态', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
},
|
{ title: '已开发票', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
{
|
{ title: '应收RMB', dataIndex: 'testTextarea6', align: 'left' },
|
||||||
title: '多行文本',
|
{ title: '未收RMB', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
dataIndex: 'testTextarea',
|
{ title: '应收USD', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
width: 130,
|
{ title: 'USD未收', dataIndex: 'testTextarea9', align: 'left' },
|
||||||
align: 'left',
|
{ title: '应付RBM', dataIndex: 'testTextarea10', align: 'left' },
|
||||||
},
|
{ title: '未付RMB', dataIndex: 'testTextarea11', align: 'left' },
|
||||||
|
{ title: '应付USD', dataIndex: 'testTextarea12', align: 'left' },
|
||||||
|
{ title: '未付USD', dataIndex: 'testTextarea13', align: 'left' },
|
||||||
|
{ title: '说明', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
]
|
]
|
||||||
|
|||||||
@ -0,0 +1,63 @@
|
|||||||
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
|
// 表单
|
||||||
|
export const schemas: FormSchema[] = [
|
||||||
|
{ field: 'field', component: 'Input', label: '对账编号', colProps: { span: 4 } },
|
||||||
|
{ field: 'field1', component: 'Input', label: '对账客户', colProps: { span: 4 } },
|
||||||
|
{ field: 'field2', component: 'Input', label: '账单说明', colProps: { span: 4 } },
|
||||||
|
{ field: 'field3', component: 'Input', label: '对账日期', colProps: { span: 4 } },
|
||||||
|
{ field: 'field4', component: 'Input', label: '状态', colProps: { span: 4 } },
|
||||||
|
{ field: 'field5', component: 'Input', label: '是否含税', colProps: { span: 4 } },
|
||||||
|
{ field: 'field6', component: 'Input', label: '打印模板', colProps: { span: 4 } },
|
||||||
|
{ field: 'field7', component: 'Input', label: '账单类别', colProps: { span: 4 } },
|
||||||
|
{ field: 'field8', component: 'Input', label: '费用范围', colProps: { span: 4 } },
|
||||||
|
{ field: 'field9', component: 'Input', label: '备注', colProps: { span: 12 } },
|
||||||
|
]
|
||||||
|
//左侧列表
|
||||||
|
export const columnsL: BasicColumn[] = [
|
||||||
|
{ title: '业务类别', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '主提单号', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '船名', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '航次', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '开船日期', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '操作', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '费用状态', dataIndex: 'testTextarea6', align: 'left' },
|
||||||
|
{ title: '应收RMB', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
|
{ title: '未收RMB', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
|
{ title: '应收USD', dataIndex: 'testTextarea9', align: 'left' },
|
||||||
|
{ title: 'USD未收', dataIndex: 'testTextarea10', align: 'left' },
|
||||||
|
{ title: '应收合计', dataIndex: 'testTextarea11', align: 'left' },
|
||||||
|
{ title: '未收合计', dataIndex: 'testTextarea12', align: 'left' },
|
||||||
|
{ title: '应付合计', dataIndex: 'testTextarea13', align: 'left' },
|
||||||
|
{ title: 'RMB发票申请', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
|
{ title: 'USD发票申请', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
|
{ title: '卸货港', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
|
]
|
||||||
|
//右侧列表
|
||||||
|
export const columnsR: BasicColumn[] = [
|
||||||
|
{ title: '客户名称', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '收付', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '费用名称', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '金额', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '币别', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '未结金额', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '汇率', dataIndex: 'testTextarea6', align: 'left' },
|
||||||
|
{ title: '不含税金额', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
|
{ title: '费用备注', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
|
]
|
||||||
|
//附件列表
|
||||||
|
export const columnsFile: BasicColumn[] = [
|
||||||
|
{ title: '文件名', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '附件类型', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '上传人', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '上传时间', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '随附单证代码', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '随附单证编号', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '公开', dataIndex: 'testTextarea6', align: 'left' },
|
||||||
|
]
|
||||||
|
// 附件表单
|
||||||
|
export const schemasFile: FormSchema[] = [
|
||||||
|
{ field: 'field', component: 'Upload', label: '文件', colProps: { span: 20 } },
|
||||||
|
{ field: 'field1', component: 'Select', label: '附件类型', colProps: { span: 20 } },
|
||||||
|
{ field: 'field2', component: 'Input', label: '随附单证代码', colProps: { span: 20 } },
|
||||||
|
{ field: 'field3', component: 'Input', label: '随附单证编号', colProps: { span: 20 } },
|
||||||
|
]
|
||||||
@ -1,34 +1,189 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="p-4">
|
<div class="CsMain p-4">
|
||||||
<BasicTable @register="registerTable"></BasicTable>
|
<a-tabs v-model:activeKey="activeKey" type="card" class="CsTabs">
|
||||||
|
<a-tab-pane key="1" tab="账单明细">
|
||||||
|
<!-- <div class="CsMain"> -->
|
||||||
|
<a-row class="CsHeader" :gutter="5">
|
||||||
|
<a-col :span="24" class="headerForm">
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row class="CsBottom" :gutter="5">
|
||||||
|
<a-col :span="17" class="bottomTableL">
|
||||||
|
<BasicTable @register="registerTableL">
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button size="small" type="primary" @click="RowClick">
|
||||||
|
测试 后期改为双击
|
||||||
|
</a-button>
|
||||||
|
<a-button size="small" type="primary"> 保存 </a-button>
|
||||||
|
<a-button size="small" type="primary" @click="addDetail"> 增加账单明细 </a-button>
|
||||||
|
<a-button size="small" type="primary" danger> 删除账单明细 </a-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7" class="bottomTableR">
|
||||||
|
<BasicTable @register="registerTableR">
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button size="small" type="primary" danger> 删除账单费用明细 </a-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<!-- </div> -->
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="附件">
|
||||||
|
<BasicTable @register="registerTableFile">
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button size="small" type="primary" danger> 删除 </a-button>
|
||||||
|
<a-button size="small" type="primary" @click="OpenFileModal"> 上传附件 </a-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<BasicModal width="80%" v-bind="$attrs" @register="registerAdd" title="增加账单明细">
|
||||||
|
<Info />
|
||||||
|
</BasicModal>
|
||||||
|
<BasicModal width="80%" v-bind="$attrs" @register="registerEdit" title="账单详情">
|
||||||
|
<ShowData />
|
||||||
|
</BasicModal>
|
||||||
|
<BasicModal width="30%" v-bind="$attrs" @register="registerFile" title="上传附件">
|
||||||
|
<BasicForm @register="registerFormFile" />
|
||||||
|
</BasicModal>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
|
||||||
import { BasicTable, useTable } from '/@/components/Table'
|
import { BasicTable, useTable } from '/@/components/Table'
|
||||||
import { columns, searchFormSchema } from './columns'
|
import { BasicModal, useModal } from '/@/components/Modal'
|
||||||
const [registerTable, { reload, getForm, getPaginationRef, getSelectRows }] = useTable({
|
import Info from './info/index.vue'
|
||||||
title: '',
|
import ShowData from './showData/index.vue'
|
||||||
api: async (p) => {
|
import { columnsL, columnsR, columnsFile, schemas, schemasFile } from './detailColumns'
|
||||||
const res: API.DataResult = await ApiList(p)
|
// 头部表格
|
||||||
return new Promise((resolve) => {
|
const [registerForm, methods] = useForm({
|
||||||
resolve({ data: [...res.data], total: res.count })
|
|
||||||
})
|
|
||||||
},
|
|
||||||
columns,
|
|
||||||
formConfig: {
|
|
||||||
labelWidth: 120,
|
labelWidth: 120,
|
||||||
schemas: searchFormSchema,
|
schemas,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
actionColOptions: {
|
||||||
|
span: 5,
|
||||||
},
|
},
|
||||||
isTreeTable: false,
|
// 是否禁用表单所有控件
|
||||||
|
disabled: false,
|
||||||
|
})
|
||||||
|
// 左侧表格
|
||||||
|
const [registerTableL] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsL,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: true,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
// 右侧表格
|
||||||
|
const [registerTableR] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsR,
|
||||||
pagination: true,
|
pagination: true,
|
||||||
striped: true,
|
striped: true,
|
||||||
useSearchForm: true,
|
|
||||||
showTableSetting: true,
|
showTableSetting: true,
|
||||||
bordered: true,
|
bordered: true,
|
||||||
showIndexColumn: true,
|
showIndexColumn: true,
|
||||||
canResize: false,
|
canResize: false,
|
||||||
immediate: false,
|
immediate: false,
|
||||||
})
|
})
|
||||||
|
// 附件表格
|
||||||
|
const [registerTableFile] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsFile,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: true,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
// 新增弹窗
|
||||||
|
const [registerAdd, { openModal: openModalAdd }] = useModal()
|
||||||
|
// 点击新增 打开弹窗
|
||||||
|
function addDetail() {
|
||||||
|
openModalAdd(true)
|
||||||
|
}
|
||||||
|
// 新增弹窗
|
||||||
|
const [registerEdit, { openModal: openModalEdit }] = useModal()
|
||||||
|
// 双击行 打开弹窗
|
||||||
|
function RowClick() {
|
||||||
|
openModalEdit(true)
|
||||||
|
}
|
||||||
|
// 附件弹窗
|
||||||
|
const [registerFile, { openModal: openModalFile }] = useModal()
|
||||||
|
// 点击上传附件 打开弹窗
|
||||||
|
function OpenFileModal() {
|
||||||
|
openModalFile(true)
|
||||||
|
}
|
||||||
|
// 附件表单
|
||||||
|
const [registerFormFile] = useForm({
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas: schemasFile,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
actionColOptions: {
|
||||||
|
span: 5,
|
||||||
|
},
|
||||||
|
// 是否禁用表单所有控件
|
||||||
|
disabled: false,
|
||||||
|
})
|
||||||
|
const activeKey = ref('1')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less"></style>
|
<style lang="less">
|
||||||
|
.CsMain {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.CsTabs {
|
||||||
|
.ant-tabs-nav {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CsHeader {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
.headerForm {
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 15px 0 15px !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CsBottom {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
.bottomTableL {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
.bottomTableR {
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,134 @@
|
|||||||
|
<template>
|
||||||
|
<div class="CsMain">
|
||||||
|
<a-row class="p-4 CsHeader" :gutter="5">
|
||||||
|
<a-col :span="24" class="headerForm">
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row class="p-4 CsBottom" :gutter="5">
|
||||||
|
<a-col :span="17" class="bottomTableL">
|
||||||
|
<BasicTable @register="registerTableL">
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button size="small" type="primary" @click="addDetail"> 增加账单明细 </a-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7" class="bottomTableR">
|
||||||
|
<BasicTable @register="registerTableRT">
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button size="small" type="primary" @click="addDetail"> 增加账单费用明细 </a-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
<BasicTable style="height: '50%'" @register="registerTableRB"></BasicTable>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
|
||||||
|
import { BasicTable, useTable } from '/@/components/Table'
|
||||||
|
import { BasicModal, useModal } from '/@/components/Modal'
|
||||||
|
import { columnsL, columnsRT, columnsRB, schemas } from './infoColumns'
|
||||||
|
// 头部表格
|
||||||
|
const [registerForm, methods] = useForm({
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
actionColOptions: {
|
||||||
|
span: 5,
|
||||||
|
},
|
||||||
|
// 是否禁用表单所有控件
|
||||||
|
disabled: false,
|
||||||
|
})
|
||||||
|
// 左侧表格
|
||||||
|
const [registerTableL] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsL,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: true,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
// 右上侧表格
|
||||||
|
const [registerTableRT] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsRT,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: true,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
// 右下侧表格
|
||||||
|
const [registerTableRB] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsRB,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: false,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
// 弹窗
|
||||||
|
const [register, { openModal, setModalProps }] = useModal()
|
||||||
|
|
||||||
|
function addDetail() {
|
||||||
|
console.log('添加')
|
||||||
|
|
||||||
|
// openModal(true)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.CsMain {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.CsHeader {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
.headerForm {
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 15px 0 15px !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CsBottom {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
.bottomTableL {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
.bottomTableR {
|
||||||
|
padding-right: 0 !important;
|
||||||
|
.vben-basic-table {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
|
// 表单
|
||||||
|
export const schemas: FormSchema[] = [
|
||||||
|
{ field: 'field', component: 'Select', label: '费用对象', colProps: { span: 4 } },
|
||||||
|
{ field: 'field1', component: 'Input', label: '编号检索', colProps: { span: 4 } },
|
||||||
|
{ field: 'field2', component: 'DatePicker', label: '从业务日期', colProps: { span: 4 } },
|
||||||
|
{ field: 'field3', component: 'DatePicker', label: '到业务日期', colProps: { span: 4 } },
|
||||||
|
{ field: 'field4', component: 'DatePicker', label: '从费用日期', colProps: { span: 4 } },
|
||||||
|
{ field: 'field5', component: 'DatePicker', label: '到得用日期', colProps: { span: 4 } },
|
||||||
|
{ field: 'field6', component: 'Select', label: '委托单位', colProps: { span: 4 } },
|
||||||
|
{ field: 'field7', component: 'Select', label: '收付', colProps: { span: 2 } },
|
||||||
|
{ field: 'field8', component: 'Select', label: '币别', colProps: { span: 2 } },
|
||||||
|
{ field: 'field9', component: 'Select', label: '费用名称', colProps: { span: 4 } },
|
||||||
|
{ field: 'field7', component: 'Select', label: 'FRT', colProps: { span: 2 } },
|
||||||
|
{ field: 'field7', component: 'Select', label: '包含已到账', colProps: { span: 2 } },
|
||||||
|
{ field: 'field9', component: 'Select', label: '费用范围', colProps: { span: 4 } },
|
||||||
|
{ field: 'field7', component: 'Select', label: '是否开票', colProps: { span: 2 } },
|
||||||
|
{ field: 'field7', component: 'Select', label: '是否垫付', colProps: { span: 2 } },
|
||||||
|
{ field: 'field9', component: 'Select', label: '船名', colProps: { span: 4 } },
|
||||||
|
{ field: 'field9', component: 'Input', label: '航次', colProps: { span: 4 } },
|
||||||
|
{ field: 'field9', component: 'Select', label: '港口(国外)', colProps: { span: 4 } },
|
||||||
|
{ field: 'field9', component: 'Select', label: '港口(国内)', colProps: { span: 4 } },
|
||||||
|
{ field: 'field9', component: 'Select', label: '国外代理', colProps: { span: 4 } },
|
||||||
|
{ field: 'field7', component: 'Select', label: '含海运费业务', colProps: { span: 2 } },
|
||||||
|
{ field: 'field7', component: 'Switch', label: '记忆查询', colProps: { span: 2 } },
|
||||||
|
]
|
||||||
|
//左列表
|
||||||
|
export const columnsL: BasicColumn[] = [
|
||||||
|
{ title: '业务类别', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '是否对账', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '费用对象', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '主提单号', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '订舱编号', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '应收RMB', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '未收RMB', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
|
{ title: '应收USD', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
|
{ title: 'USD未收', dataIndex: 'testTextarea9', align: 'left' },
|
||||||
|
{ title: '开船日期', dataIndex: 'testTextarea10', align: 'left' },
|
||||||
|
{ title: '操作', dataIndex: 'testTextarea11', align: 'left' },
|
||||||
|
{ title: '录入人', dataIndex: 'testTextarea12', align: 'left' },
|
||||||
|
{ title: '船名', dataIndex: 'testTextarea13', align: 'left' },
|
||||||
|
{ title: '航次', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
|
{ title: '费用状态', dataIndex: 'testTextarea15', align: 'left' },
|
||||||
|
{ title: 'ATD', dataIndex: 'testTextarea16', align: 'left' },
|
||||||
|
]
|
||||||
|
//右上列表
|
||||||
|
export const columnsRT: BasicColumn[] = [
|
||||||
|
{ title: '客户名称', width: '80px', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '收付', width: '80px', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '费用名称', width: '80px', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '金额', width: '80px', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '币别', width: '80px', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '未结金额', width: '80px', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '不含税金额', width: '120px', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
|
{ title: '汇率', width: '80px', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
|
{ title: '单价', width: '80px', dataIndex: 'testTextarea9', align: 'left' },
|
||||||
|
{ title: '费用备注', width: '80px', dataIndex: 'testTextarea10', align: 'left' },
|
||||||
|
]
|
||||||
|
//右下列表
|
||||||
|
export const columnsRB: BasicColumn[] = [
|
||||||
|
{ title: '币别', width: '80px', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '应收', width: '80px', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '未收', width: '80px', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '应付', width: '80px', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '未付', width: '80px', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
]
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="CsMain">
|
||||||
|
<BasicForm @register="registerForm" />
|
||||||
|
<BasicTable @register="registerTableL"> </BasicTable>
|
||||||
|
<BasicTable @register="registerTableR"> </BasicTable>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
|
||||||
|
import { BasicTable, useTable } from '/@/components/Table'
|
||||||
|
import { BasicModal, useModal } from '/@/components/Modal'
|
||||||
|
import Info from './info/index.vue'
|
||||||
|
import { columnsL, columnsR, columnsFile, schemas, schemasFile } from './showDataColumns'
|
||||||
|
// 头部表格
|
||||||
|
const [registerForm, methods] = useForm({
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
actionColOptions: {
|
||||||
|
span: 5,
|
||||||
|
},
|
||||||
|
// 是否禁用表单所有控件
|
||||||
|
disabled: false,
|
||||||
|
})
|
||||||
|
// 左侧表格
|
||||||
|
const [registerTableL] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsL,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: false,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
// 右侧表格
|
||||||
|
const [registerTableR] = useTable({
|
||||||
|
title: '',
|
||||||
|
// api: async (p) => {
|
||||||
|
// const res: API.DataResult = await ApiList(p)
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// resolve({ data: [...res.data], total: res.count })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
columns: columnsR,
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
showTableSetting: false,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
canResize: false,
|
||||||
|
immediate: false,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.CsMain {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.CsTabs {
|
||||||
|
.ant-tabs-nav {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CsHeader {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
.headerForm {
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 15px 0 15px !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.CsBottom {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
.bottomTableL {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
.bottomTableR {
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,210 @@
|
|||||||
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
|
// 表单
|
||||||
|
export const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'field',
|
||||||
|
component: 'Input',
|
||||||
|
label: '委托编号',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field1',
|
||||||
|
component: 'Input',
|
||||||
|
label: '主题单号',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field2',
|
||||||
|
component: 'Input',
|
||||||
|
label: '业务锁定',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field3',
|
||||||
|
component: 'Input',
|
||||||
|
label: '费用锁定',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field4',
|
||||||
|
component: 'Input',
|
||||||
|
label: '会计期间',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field5',
|
||||||
|
component: 'Input',
|
||||||
|
label: '委托单位',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field6',
|
||||||
|
component: 'Input',
|
||||||
|
label: '业务来源',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field7',
|
||||||
|
component: 'Input',
|
||||||
|
label: '来源明细',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field8',
|
||||||
|
component: 'Input',
|
||||||
|
label: '揽货人',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field9',
|
||||||
|
component: 'Input',
|
||||||
|
label: '操作',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field',
|
||||||
|
component: 'Input',
|
||||||
|
label: '业务日期',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field1',
|
||||||
|
component: 'Input',
|
||||||
|
label: '卸货港',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field2',
|
||||||
|
component: 'Input',
|
||||||
|
label: '目的港',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field3',
|
||||||
|
component: 'Input',
|
||||||
|
label: '报关单号',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field4',
|
||||||
|
component: 'Input',
|
||||||
|
label: '起运港',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field5',
|
||||||
|
component: 'Input',
|
||||||
|
label: '分提单号',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field6',
|
||||||
|
component: 'Input',
|
||||||
|
label: '放箱申请号',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field7',
|
||||||
|
component: 'Input',
|
||||||
|
label: '类型',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field8',
|
||||||
|
component: 'Input',
|
||||||
|
label: '运输类型',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'field9',
|
||||||
|
component: 'Input',
|
||||||
|
label: '货物标示',
|
||||||
|
dynamicDisabled: true,
|
||||||
|
colProps: { span: 3 },
|
||||||
|
},
|
||||||
|
]
|
||||||
|
//左侧列表
|
||||||
|
export const columnsL: BasicColumn[] = [
|
||||||
|
{ title: '费用状态', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '应收费用名称', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '客户类别', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '结算对象', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '单位标准', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '单价', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '数量', dataIndex: 'testTextarea6', align: 'left' },
|
||||||
|
{ title: '税率', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
|
{ title: '不含税金额', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
|
{ title: '金额', dataIndex: 'testTextarea9', align: 'left' },
|
||||||
|
{ title: '币别', dataIndex: 'testTextarea10', align: 'left' },
|
||||||
|
{ title: '汇率', dataIndex: 'testTextarea11', align: 'left' },
|
||||||
|
{ title: '是否垫付', dataIndex: 'testTextarea12', align: 'left' },
|
||||||
|
{ title: '禁开发票', dataIndex: 'testTextarea13', align: 'left' },
|
||||||
|
{ title: '销项税率', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
|
{ title: '备注', dataIndex: 'testTextarea15', align: 'left' },
|
||||||
|
{ title: 'FRT', dataIndex: 'testTextarea16', align: 'left' },
|
||||||
|
{ title: '佣金比率', dataIndex: 'testTextarea17', align: 'left' },
|
||||||
|
{ title: '录入人', dataIndex: 'testTextarea18', align: 'left' },
|
||||||
|
{ title: '录入日期', dataIndex: 'testTextarea19', align: 'left' },
|
||||||
|
{ title: '审核人', dataIndex: 'testTextarea20', align: 'left' },
|
||||||
|
{ title: '审核日期', dataIndex: 'testTextarea21', align: 'left' },
|
||||||
|
{ title: '修改人', dataIndex: 'testTextarea22', align: 'left' },
|
||||||
|
{ title: '修改日期', dataIndex: 'testTextarea23', align: 'left' },
|
||||||
|
{ title: '结算金额', dataIndex: 'testTextarea24', align: 'left' },
|
||||||
|
{ title: '已开票金额', dataIndex: 'testTextarea25', align: 'left' },
|
||||||
|
{ title: '录入方式', dataIndex: 'testTextarea26', align: 'left' },
|
||||||
|
{ title: '责任人', dataIndex: 'testTextarea27', align: 'left' },
|
||||||
|
{ title: '含税单位', dataIndex: 'testTextarea28', align: 'left' },
|
||||||
|
{ title: '核算单位', dataIndex: 'testTextarea29', align: 'left' },
|
||||||
|
]
|
||||||
|
//右侧列表
|
||||||
|
export const columnsR: BasicColumn[] = [
|
||||||
|
{ title: '禁用状态', dataIndex: 'testInput', align: 'left' },
|
||||||
|
{ title: '应付费用名称', dataIndex: 'testTextarea1', align: 'left' },
|
||||||
|
{ title: '客户类别', dataIndex: 'testTextarea2', align: 'left' },
|
||||||
|
{ title: '结算对象', dataIndex: 'testTextarea3', align: 'left' },
|
||||||
|
{ title: '单位标准', dataIndex: 'testTextarea4', align: 'left' },
|
||||||
|
{ title: '单价', dataIndex: 'testTextarea5', align: 'left' },
|
||||||
|
{ title: '数量', dataIndex: 'testTextarea6', align: 'left' },
|
||||||
|
{ title: '税率', dataIndex: 'testTextarea7', align: 'left' },
|
||||||
|
{ title: '含税单价', dataIndex: 'testTextarea8', align: 'left' },
|
||||||
|
{ title: '不含税金额', dataIndex: 'testTextarea9', align: 'left' },
|
||||||
|
{ title: '金额', dataIndex: 'testTextarea10', align: 'left' },
|
||||||
|
{ title: '币别', dataIndex: 'testTextarea11', align: 'left' },
|
||||||
|
{ title: '汇率', dataIndex: 'testTextarea12', align: 'left' },
|
||||||
|
{ title: '是否垫付', dataIndex: 'testTextarea13', align: 'left' },
|
||||||
|
{ title: '禁开发票', dataIndex: 'testTextarea14', align: 'left' },
|
||||||
|
{ title: '进项税率', dataIndex: 'testTextarea15', align: 'left' },
|
||||||
|
{ title: '备注', dataIndex: 'testTextarea16', align: 'left' },
|
||||||
|
{ title: 'FRT', dataIndex: 'testTextarea17', align: 'left' },
|
||||||
|
{ title: '佣金比率', dataIndex: 'testTextare18', align: 'left' },
|
||||||
|
{ title: '录入人', dataIndex: 'testTextarea19', align: 'left' },
|
||||||
|
{ title: '录入日期', dataIndex: 'testTextarea20', align: 'left' },
|
||||||
|
{ title: '审核人', dataIndex: 'testTextarea21', align: 'left' },
|
||||||
|
{ title: '审核日期', dataIndex: 'testTextarea22', align: 'left' },
|
||||||
|
{ title: '修改人', dataIndex: 'testTextarea23', align: 'left' },
|
||||||
|
{ title: '修改日期', dataIndex: 'testTextarea24', align: 'left' },
|
||||||
|
{ title: '结算金额', dataIndex: 'testTextarea25', align: 'left' },
|
||||||
|
{ title: '申请金额', dataIndex: 'testTextarea26', align: 'left' },
|
||||||
|
{ title: '录入方式', dataIndex: 'testTextarea27', align: 'left' },
|
||||||
|
{ title: '负责人', dataIndex: 'testTextarea28', align: 'left' },
|
||||||
|
{ title: '核算单位', dataIndex: 'testTextarea29', align: 'left' },
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue