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

07/03

Browse Source
szh-new
张同海 5 months ago
parent 9270da0014
commit 96cdd73447
3 changed files with 287 additions and 216 deletions
Show Stats Download Patch File Download Diff File

385
src/views/operation/autoduizang/TenantAuditStepModal.vue
Unescape Escape View File

@ -6,18 +6,28 @@
width="80%" width="80%"
@register="registerModal" @register="registerModal"
@ok="handleSave" @ok="handleSave"
@cancel="FnClose"
> >
<BasicForm @register="registerForm" /> <div class="FormBox">
<div class="buttonGroup"> <BasicForm @register="registerForm" />
<!-- @click="addCtn" -->
<div class="nav"> <i class="iconfont icon-icon_tianjia"></i><span>新建</span> </div>
<!-- @click="DelCtn" -->
<div class="nav"> <i class="iconfont icon-shanchu1"></i><span>删除</span> </div>
</div> </div>
<div class="table-box"> <div class="TableBox">
<!-- <hot-table ref="hotTb" :data="list" :settings="settings"></hot-table> --> <div class="BoxUnit">
<div class="model-botton-box">
<a-button class="btn" type="primary" @click="AddLlist">新增费用字段</a-button>
<a-button class="btn btn-delete" @click="DelLlist">删除费用字段</a-button>
</div>
<div style="position: relative">
<input
class="ds-tb-check"
type="checkbox"
v-model="allCheckL"
:indeterminate="someCheckL"
/>
<hot-table :data="Llist" :settings="Lsettings"> </hot-table>
</div>
</div>
</div> </div>
<!--右下角按钮-->
<template #footer> <template #footer>
<a-button <a-button
pre-icon="ant-design:close-outlined" pre-icon="ant-design:close-outlined"
@ -25,7 +35,7 @@
:loading="loading" :loading="loading"
ghost ghost
style="margin-right: 0.8rem" style="margin-right: 0.8rem"
@click="closeModal" @click="FnClose"
>取消</a-button >取消</a-button
> >
<a-button <a-button
@ -47,51 +57,153 @@
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, unref } from 'vue' import { ref, computed, unref, watchEffect, watch } from 'vue'
import { BasicModal, useModalInner } from '/@/components/Modal' import { ApiEdit, ApiInfo } from './api'
import { BasicForm, useForm } from '/@/components/Form/index' import { BasicForm, useForm } from '/@/components/Form/index'
import { formSchema } from './columns' import { formSchema } from './columns'
import { ApiEdit, ApiInfo, ApiList } from './api'
import { useMessage } from '/@/hooks/web/useMessage' import { useMessage } from '/@/hooks/web/useMessage'
const { notification, createMessage } = useMessage()
import { HotTable } from '@handsontable/vue3' import { HotTable } from '@handsontable/vue3'
import { BasicModal, useModalInner } from '/@/components/Modal'
import { registerAllModules } from 'handsontable/registry' import { registerAllModules } from 'handsontable/registry'
import 'handsontable/dist/handsontable.full.min.css'
registerAllModules() registerAllModules()
// 声明Emits // ------------------------------------弹窗------------------------------------------
const emit = defineEmits(['success', 'register']) const getTitle = computed(() => (!unref(isUpdate) ? '新增对账模板' : '编辑对账模板'))
const emit = defineEmits(['success'])
const isUpdate = ref(true) const isUpdate = ref(true)
const loading = ref(false) const loading = ref(false)
const rowId = ref('') const rowId = ref('')
const { createMessage } = useMessage()
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields() resetFields()
allCheckL.value = false
someCheckL.value = false
setModalProps({ confirmLoading: false, loading: true }) setModalProps({ confirmLoading: false, loading: true })
isUpdate.value = !!data?.isUpdate isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) { if (unref(isUpdate)) {
// setModalProps({ confirmLoading: true }); setModalProps({ confirmLoading: true })
rowId.value = data.record.id rowId.value = data.record.id
const res: API.DataResult = await ApiInfo({ id: unref(rowId) }) const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) { if (res.succeeded) {
setFieldsValue({ setFieldsValue({
...res.data, ...res.data,
}) })
// console.log('返回数据Form', getFieldsValue()); Llist.value.push(...res.data.feeList)
// setFieldsValue({ trainId: unref(res.data.trainId) });
} }
// setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false })
} else { } else {
setFieldsValue({ permissionIdentity: unref(2) }) setFieldsValue({ permissionIdentity: unref(2) })
} }
setModalProps({ loading: false }) setModalProps({ loading: false })
}) })
async function init() {
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
setFieldsValue({
...res.data,
})
Llist.value.splice(0)
Llist.value.push(...res.data.feeList)
}
}
// 保存
async function handleSave(exit) {
try {
const values = await validate()
values.feeList = Llist.value
setModalProps({ confirmLoading: true, loading: true })
const res: API.DataResult = await ApiEdit(values)
console.log(res)
if (res.succeeded) {
createMessage.success(res.message)
emit('success')
//刷新页面
if (!exit) {
if (unref(isUpdate)) {
await refresh()
} else {
rowId.value = res.data
isUpdate.value = true
await refresh()
}
}
} else {
createMessage.error(res.message)
}
exit && FnClose()
} finally {
// loading.value = false;
setModalProps({ confirmLoading: false, loading: false })
}
}
function FnClose() {
Llist.value.splice(0)
closeModal()
}
async function refresh() {
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
await setFieldsValue({
...res.data,
})
}
}
// ------------------------------------头部表单------------------------------------------
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100, labelWidth: 100,
schemas: formSchema, schemas: formSchema,
showActionButtonGroup: false, showActionButtonGroup: false,
}) })
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑')) // ------------------------------------左侧表------------------------------------------
const list = ref<any>([]) // 全部勾选
// 定义表格所有列 const allCheckL = ref(false)
const columns = [ // 部分勾选
const someCheckL = ref(false)
const Llist = ref<any>([])
watchEffect(() => {
// 全选
if (allCheckL.value) {
Llist.value.forEach((item) => {
item.selected = true
})
} else {
// 取消全选
Llist.value.forEach((item) => {
item.selected = false
})
}
})
watch(
Llist.value,
(val) => {
let a = 0
let b = 0
val.forEach((item) => {
if (item.selected) {
a += 1
} else {
b += 1
}
})
if (a == 0) {
allCheckL.value = false
}
if (b == 0) {
allCheckL.value = true
}
if (a != 0 && b != 0) {
someCheckL.value = true
} else {
someCheckL.value = false
}
},
{
deep: true,
},
)
const LColumns = [
{ {
data: 'selected', data: 'selected',
type: 'checkbox', type: 'checkbox',
@ -101,106 +213,94 @@
readOnly: false, readOnly: false,
}, },
{ {
title: 'ID', title: '主键Id',
width: 80, width: 120,
data: 'id', data: 'id',
}, },
{ {
title: '主提单号', title: '模板Id',
width: 80, width: 120,
data: 'bsno', data: 'templateId',
},
{
title: '委托单位',
width: 80,
data: 'ctnCode0',
}, },
{ {
title: '操作', title: '主提单号',
width: 80, width: 120,
data: 'ctnCode1', data: 'feeName',
},
{
title: 'ETD',
width: 80,
data: 'ctnCode2',
}, },
{ {
title: 'RMB对账金额', title: '本地RMB金额',
width: 80, width: 120,
data: 'ctnCode3', data: 'currency',
}, },
{ {
title: 'USD对账金额', title: '本地USD金额',
width: 80, width: 120,
data: 'ctnCode4', data: 'currency',
}, },
{ {
title: 'RMB本地金额', title: '对账RMB金额',
width: 80, width: 120,
data: 'ctnCode5', data: 'currency',
}, },
{ {
title: 'USD本地金额', title: '对账USD金额',
width: 80, width: 120,
data: 'ctnCode6', data: 'currency',
}, },
{ {
title: 'RMB差额', title: 'RMB差异',
width: 80, width: 120,
data: 'ctnCode7', data: 'currency',
}, },
{ {
title: 'USD差额', title: '委托单位',
width: 80, width: 120,
data: 'ctnCode8', data: 'currency',
}, },
{ {
title: '未审核金额', title: '结算USD',
width: 80, width: 120,
data: 'ctnCode9', data: 'currency',
}, },
{ {
title: '对账完成', title: '船名',
width: 80, width: 120,
data: 'ctnCode10', data: 'currency',
}, },
{ {
title: '备注', title: '航次',
width: 80, width: 120,
data: 'ctnCode11', data: 'currency',
}, },
{ {
title: '对账结果', title: '开船日期',
width: 80, width: 120,
data: 'ctnCode12', data: 'currency',
}, },
{ {
title: '船公司', title: '操作员',
width: 80, width: 120,
data: 'ctnCode13', data: 'currency',
}, },
{ {
title: 'TEU', title: '揽货人',
width: 80, width: 120,
data: 'ctnCode14', data: 'currency',
}, },
{ {
title: '揽货人', title: '说明',
width: 80, width: 120,
data: 'ctnCode15', data: 'currency',
}, },
{ {
title: '委托编号', title: '一致',
width: 80, width: 120,
data: 'ctnCode16', data: 'currency',
}, },
] ]
const Lsettings = {
// 表格配置项
const settings = {
height: '400', height: '400',
width: '100%', // width: '100%',
autoWrapRow: true, autoWrapRow: true,
autoWrapCol: true, autoWrapCol: true,
// 每行的高度 // 每行的高度
@ -208,68 +308,77 @@
fixedColumnsLeft: 1, fixedColumnsLeft: 1,
// 需要隐藏的列 // 需要隐藏的列
hiddenColumns: { hiddenColumns: {
columns: [1], columns: [1, 2],
indicators: true, indicators: true,
}, },
// 控制回车移动
enterMoves: 'row',
columnSorting: true, columnSorting: true,
// 设置排序的列和方向
columns: columns, // columnSorting: {
// column: 2, // 根据第三列排序
// sortOrder: ['asc', 'desc'] // 允许升序和降序排序
// },
// 如果通过复制或者填写校验出现错误，清空输入框
// afterValidate: function (isValid, value, row, prop, source) {
// if (!isValid) {
// hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
// }
// },
columns: LColumns,
// 此行直接复制，必须(非商用) // 此行直接复制，必须(非商用)
licenseKey: 'non-commercial-and-evaluation', licenseKey: 'non-commercial-and-evaluation',
enterMoves: 'row',
// 定义所有单元格发生变化的回调处理
afterChange(changes, source) {},
} }
function AddLlist() {
async function handleSave(exit) { Llist.value.push({})
try {
const values = await validate()
setModalProps({ confirmLoading: true, loading: true })
// TODO custom api
console.log(values)
// loading.value = true;
const res: API.DataResult = await ApiEdit(values)
console.log(res)
if (res.succeeded) {
createMessage.success(res.message)
emit('success')
//刷新页面
if (!exit) {
if (unref(isUpdate)) {
await refresh()
} else {
rowId.value = res.data
isUpdate.value = true
await refresh()
}
}
} else {
createMessage.error(res.message)
}
exit && closeModal()
} finally {
// loading.value = false;
setModalProps({ confirmLoading: false, loading: false })
}
} }
async function refresh() { async function DelLlist() {
const res: API.DataResult = await ApiInfo({ id: unref(rowId) }) const data = await validate()
if (res.succeeded) { if (data.id) {
await setFieldsValue({ let ApiData: any = { id: data.id, ids: [] }
...res.data, Llist.value.forEach((e, i) => {
if (e.selected && e.id) {
ApiData.ids.push(e.id)
}
})
} else {
Llist.value.forEach((e, i) => {
if (e.selected) {
Llist.value.splice(i, 1)
}
}) })
} }
} }
</script> </script>
<style lang="less" scoped>
.FormBox {
// height: 100px;
}
.TableBox {
display: flex;
.BoxUnit {
flex: 1;
.model-botton-box {
margin: 40px 0 20px 20px;
<style lang="less"> .btn {
@import url('/@/styles/buttonGroup.scss'); margin-right: 10px;
</style> }
<style lang="scss" scoped>
:deep(.ds-tbale-form-operation) { .btn-delete {
position: relative !important; border: 1px solid #ff6646;
> div { background: #fdf2f0;
margin-top: 0; color: #ff6646;
&:hover {
border: 1px solid #ff6646 !important;
background: #fdf2f0 !important;
color: #ff6646 !important;
opacity: 0.7;
}
}
}
} }
} }
</style> </style>

92
src/views/operation/autoduizang/columns.tsx
Unescape Escape View File

@ -2,22 +2,22 @@ import { BasicColumn, FormSchema } from '/@/components/Table'
import { Tag } from 'ant-design-vue' import { Tag } from 'ant-design-vue'
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '对账记录号', title: '对账编号',
dataIndex: 'ctnSize0', dataIndex: 'ctnSize0',
width: 150, width: 150,
}, },
{ {
title: '对账名称', title: '对账客户',
dataIndex: 'ctnSize1', dataIndex: 'ctnSize1',
width: 150, width: 150,
}, },
{ {
title: '对账人', title: '对账名称',
dataIndex: 'ctnSize2', dataIndex: 'ctnSize2',
width: 150, width: 150,
}, },
{ {
title: '对账备注', title: '对账人',
dataIndex: 'ctnSize3', dataIndex: 'ctnSize3',
width: 150, width: 150,
}, },
@ -27,7 +27,17 @@ export const columns: BasicColumn[] = [
width: 150, width: 150,
}, },
{ {
title: '对账客户', title: '对账编号',
dataIndex: 'ctnSize5',
width: 150,
},
{
title: '结算人',
dataIndex: 'ctnSize5',
width: 150,
},
{
title: '结算日期',
dataIndex: 'ctnSize5', dataIndex: 'ctnSize5',
width: 150, width: 150,
}, },
@ -44,113 +54,59 @@ export const searchFormSchema: FormSchema[] = [
export const formSchema: FormSchema[] = [ export const formSchema: FormSchema[] = [
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '自动对账编号', label: '对账编号',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '结算对象', label: '对账名称',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '对账方式', label: '队长客户',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '对账状态', label: '对账日期',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '对账单编号', label: '对账人',
component: 'Input', component: 'Input',
colProps: { span: 4 }, colProps: { span: 4 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '起始时间', label: '费用范围',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '结算时间', label: '结算账单编号',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '操作人', label: '结算日期',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'ctnSize0', field: 'ctnSize0',
label: '操作时间', label: '结算人',
component: 'Input', component: 'Input',
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{
field: 'ctnSize0',
label: '业务类型',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'ctnSize0',
label: '费用范围',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'ctnSize0',
label: '结算方式',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'ctnSize0',
label: '币别',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'ctnSize0',
label: '费用状态',
component: 'Input',
colProps: { span: 3 },
},
{
field: 'ctnSize0',
label: '核算单位',
component: 'Input',
colProps: { span: 3 },
},
{
field: 'ctnSize0',
label: '包含已对账',
component: 'Input',
colProps: { span: 3 },
},
{
field: 'ctnSize0',
label: '费用类别',
component: 'Input',
colProps: { span: 3 },
},
{
field: 'ctnSize0',
label: '备注',
component: 'Input',
colProps: { span: 24 },
},
] ]
export const formcolumns: BasicColumn[] = [ export const formcolumns: BasicColumn[] = [
{ {

26
src/views/operation/autoduizang/index.vue
Unescape Escape View File

@ -1,11 +1,17 @@
<template> <template>
<div> <div>
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #toolbar> <template #tableTitle>
<a-button type="primary" @click="handleCreate"> 添加 </a-button> <div class="nav" @click="handleCreate"> <i class="iconfont icon-jiahao2fill"></i>添加 </div>
<!-- <div class="nav" @click="Fnawait">
<i
class="iconfont icon-a-wendangcaozuoxiazaishangchuanshanchuxinzengfujianyasuochakan-01"
></i
>导入
</div> -->
</template> </template>
</BasicTable> </BasicTable>
<TenantAuditStepModal ref="Modal" @register="registerModal" @success="handleSuccess" /> <TenantAuditStepModal @register="registerModal" @success="handleSuccess" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -17,7 +23,6 @@
import { columns, searchFormSchema } from './columns' import { columns, searchFormSchema } from './columns'
import { useMessage } from '/@/hooks/web/useMessage' import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage() const { notification } = useMessage()
const visible = ref<boolean>(false)
const [registerModal, { openModal }] = useModal() const [registerModal, { openModal }] = useModal()
const [registerTable, { reload, getForm, getPaginationRef }] = useTable({ const [registerTable, { reload, getForm, getPaginationRef }] = useTable({
api: async (p) => { api: async (p) => {
@ -67,13 +72,14 @@
fixed: 'right', fixed: 'right',
}, },
}) })
const Modal = ref()
function handleCreate() { function handleCreate() {
Modal.value.init() openModal(true, {
// openModal(true, { isParent: false,
// isParent: false, isUpdate: false,
// isUpdate: false, })
// }) }
function Fnawait() {
notification.warning({ message: '等待开发', duration: 3 })
} }
function handleSuccess() { function handleSuccess() {
reload() reload()

Write Preview
Loading…
Cancel
Save