lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

客户对账 基础页面布局

Browse Source
szh-new
张同海 6 months ago
parent 798908dd24
commit 3a74f5ceba
8 changed files with 857 additions and 47 deletions
Show Stats Download Patch File Download Diff File

115
src/views/operation/CustomerReconciliation/columns.tsx
Unescape Escape View File

@ -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'
export const searchFormSchema: FormSchema[] = [
{
field: 'mblno',
label: '主提单号',
component: 'Input',
// defaultValue: '',
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: 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[] = [
{
title: '单行文本',
dataIndex: 'testInput',
width: 230,
align: 'left',
},
{
title: '多行文本',
dataIndex: 'testTextarea',
width: 130,
align: 'left',
},
{ 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: '应收RMB', dataIndex: 'testTextarea6', align: 'left' },
{ title: '未收RMB', dataIndex: 'testTextarea7', align: 'left' },
{ title: '应收USD', dataIndex: 'testTextarea8', align: 'left' },
{ title: 'USD未收', dataIndex: 'testTextarea9', 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' },
]

63
src/views/operation/CustomerReconciliation/detail/detailColumns.tsx
Unescape Escape View File

@ -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 } },
]

191
src/views/operation/CustomerReconciliation/detail/index.vue
Unescape Escape View File

@ -1,34 +1,189 @@
<template>
<div class="p-4">
<BasicTable @register="registerTable"></BasicTable>
<div class="CsMain p-4">
<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>
<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>
<script lang="ts" setup>
import { ref } from 'vue'
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
import { BasicTable, useTable } from '/@/components/Table'
import { columns, searchFormSchema } from './columns'
const [registerTable, { reload, getForm, getPaginationRef, getSelectRows }] = useTable({
title: '',
api: async (p) => {
const res: API.DataResult = await ApiList(p)
return new Promise((resolve) => {
resolve({ data: [...res.data], total: res.count })
})
import { BasicModal, useModal } from '/@/components/Modal'
import Info from './info/index.vue'
import ShowData from './showData/index.vue'
import { columnsL, columnsR, columnsFile, schemas, schemasFile } from './detailColumns'
// 头部表格
const [registerForm, methods] = useForm({
labelWidth: 120,
schemas,
showActionButtonGroup: false,
actionColOptions: {
span: 5,
},
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
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,
useSearchForm: 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,
striped: true,
showTableSetting: true,
bordered: true,
showIndexColumn: true,
canResize: 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>
<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>

134
src/views/operation/CustomerReconciliation/detail/info/index.vue
Unescape Escape View File

@ -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>

66
src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
Unescape Escape View File

@ -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' },
]

93
src/views/operation/CustomerReconciliation/detail/showData/index.vue
Unescape Escape View File

@ -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>

210
src/views/operation/CustomerReconciliation/detail/showData/showDataColumns.tsx
Unescape Escape View File

@ -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' },
]

32
src/views/operation/CustomerReconciliation/index.vue
Unescape Escape View File

@ -1,6 +1,10 @@
<template>
<div class="p-4">
<div class="ds-sea-export-table">
<BasicTable @register="registerTable">
<!-- <template #form-more>
<a-button type="link">多提单号查询</a-button>
<a-button type="link">高级查询</a-button>
</template> -->
<template #toolbar>
<a-button type="primary" @click="addReconciliation"> 新建 </a-button>
</template>
@ -41,4 +45,28 @@
}
</script>
<style lang="less"></style>
<style lang="less">
.ds-sea-export-table {
.vben-basic-table-header__toolbar {
justify-content: space-between;
}
.mblno {
text-align: left;
color: @primary-color !important;
span {
margin-right: 0.5rem;
cursor: pointer;
}
.CSMblnoCopy {
cursor: pointer;
}
}
}
.high-search {
.CsConditionFilter {
padding: 16px;
}
}
</style>

Write Preview
Loading…
Cancel
Save