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

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

@ -6,18 +6,28 @@
width="80%"
@register="registerModal"
@ok="handleSave"
@cancel="FnClose"
>
<div class="FormBox">
<BasicForm @register="registerForm" />
<div class="buttonGroup">
<!-- @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 class="table-box">
<!-- <hot-table ref="hotTb" :data="list" :settings="settings"></hot-table> -->
<div class="TableBox">
<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>
<!--右下角按钮-->
<template #footer>
<a-button
pre-icon="ant-design:close-outlined"
@ -25,7 +35,7 @@
:loading="loading"
ghost
style="margin-right: 0.8rem"
@click="closeModal"
@click="FnClose"
>取消</a-button
>
<a-button
@ -47,51 +57,153 @@
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue'
import { BasicModal, useModalInner } from '/@/components/Modal'
import { ref, computed, unref, watchEffect, watch } from 'vue'
import { ApiEdit, ApiInfo } from './api'
import { BasicForm, useForm } from '/@/components/Form/index'
import { formSchema } from './columns'
import { ApiEdit, ApiInfo, ApiList } from './api'
import { useMessage } from '/@/hooks/web/useMessage'
const { notification, createMessage } = useMessage()
import { HotTable } from '@handsontable/vue3'
import { BasicModal, useModalInner } from '/@/components/Modal'
import { registerAllModules } from 'handsontable/registry'
import 'handsontable/dist/handsontable.full.min.css'
registerAllModules()
// 声明Emits
const emit = defineEmits(['success', 'register'])
// ------------------------------------弹窗------------------------------------------
const getTitle = computed(() => (!unref(isUpdate) ? '新增对账模板' : '编辑对账模板'))
const emit = defineEmits(['success'])
const isUpdate = ref(true)
const loading = ref(false)
const rowId = ref('')
const { createMessage } = useMessage()
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
allCheckL.value = false
someCheckL.value = false
setModalProps({ confirmLoading: false, loading: true })
isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) {
// setModalProps({ confirmLoading: true });
setModalProps({ confirmLoading: true })
rowId.value = data.record.id
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
setFieldsValue({
...res.data,
})
// console.log('返回数据Form', getFieldsValue());
// setFieldsValue({ trainId: unref(res.data.trainId) });
Llist.value.push(...res.data.feeList)
}
// setModalProps({ confirmLoading: false });
setModalProps({ confirmLoading: false })
} else {
setFieldsValue({ permissionIdentity: unref(2) })
}
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({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
})
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
const list = ref<any>([])
// 定义表格所有列
const columns = [
// ------------------------------------左侧表------------------------------------------
// 全部勾选
const allCheckL = ref(false)
// 部分勾选
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',
type: 'checkbox',
@ -101,106 +213,94 @@
readOnly: false,
},
{
title: 'ID',
width: 80,
title: '主键Id',
width: 120,
data: 'id',
},
{
title: '主提单号',
width: 80,
data: 'bsno',
title: '模板Id',
width: 120,
data: 'templateId',
},
{
title: '委托单位',
width: 80,
data: 'ctnCode0',
},
{
title: '操作',
width: 80,
data: 'ctnCode1',
},
{
title: 'ETD',
width: 80,
data: 'ctnCode2',
title: '主提单号',
width: 120,
data: 'feeName',
},
{
title: 'RMB对账金额',
width: 80,
data: 'ctnCode3',
title: '本地RMB金额',
width: 120,
data: 'currency',
},
{
title: 'USD对账金额',
width: 80,
data: 'ctnCode4',
title: '本地USD金额',
width: 120,
data: 'currency',
},
{
title: 'RMB本地金额',
width: 80,
data: 'ctnCode5',
title: '对账RMB金额',
width: 120,
data: 'currency',
},
{
title: 'USD本地金额',
width: 80,
data: 'ctnCode6',
title: '对账USD金额',
width: 120,
data: 'currency',
},
{
title: 'RMB差额',
width: 80,
data: 'ctnCode7',
title: 'RMB差异',
width: 120,
data: 'currency',
},
{
title: 'USD差额',
width: 80,
data: 'ctnCode8',
title: '委托单位',
width: 120,
data: 'currency',
},
{
title: '未审核金额',
width: 80,
data: 'ctnCode9',
title: '结算USD',
width: 120,
data: 'currency',
},
{
title: '对账完成',
width: 80,
data: 'ctnCode10',
title: '船名',
width: 120,
data: 'currency',
},
{
title: '备注',
width: 80,
data: 'ctnCode11',
title: '航次',
width: 120,
data: 'currency',
},
{
title: '对账结果',
width: 80,
data: 'ctnCode12',
title: '开船日期',
width: 120,
data: 'currency',
},
{
title: '船公司',
width: 80,
data: 'ctnCode13',
title: '操作员',
width: 120,
data: 'currency',
},
{
title: 'TEU',
width: 80,
data: 'ctnCode14',
title: '揽货人',
width: 120,
data: 'currency',
},
{
title: '揽货人',
width: 80,
data: 'ctnCode15',
title: '说明',
width: 120,
data: 'currency',
},
{
title: '委托编号',
width: 80,
data: 'ctnCode16',
title: '一致',
width: 120,
data: 'currency',
},
]
// 表格配置项
const settings = {
const Lsettings = {
height: '400',
width: '100%',
// width: '100%',
autoWrapRow: true,
autoWrapCol: true,
// 每行的高度
@ -208,68 +308,77 @@
fixedColumnsLeft: 1,
// 需要隐藏的列
hiddenColumns: {
columns: [1],
columns: [1, 2],
indicators: true,
},
// 控制回车移动
enterMoves: 'row',
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',
enterMoves: 'row',
// 定义所有单元格发生变化的回调处理
afterChange(changes, source) {},
}
async function handleSave(exit) {
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()
function AddLlist() {
Llist.value.push({})
}
async function DelLlist() {
const data = await validate()
if (data.id) {
let ApiData: any = { id: data.id, ids: [] }
Llist.value.forEach((e, i) => {
if (e.selected && e.id) {
ApiData.ids.push(e.id)
}
})
} else {
createMessage.error(res.message)
}
exit && closeModal()
} finally {
// loading.value = false;
setModalProps({ confirmLoading: false, loading: false })
Llist.value.forEach((e, i) => {
if (e.selected) {
Llist.value.splice(i, 1)
}
}
async function refresh() {
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
await setFieldsValue({
...res.data,
})
}
}
</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">
@import url('/@/styles/buttonGroup.scss');
</style>
<style lang="scss" scoped>
:deep(.ds-tbale-form-operation) {
position: relative !important;
> div {
margin-top: 0;
.btn {
margin-right: 10px;
}
.btn-delete {
border: 1px solid #ff6646;
background: #fdf2f0;
color: #ff6646;
&:hover {
border: 1px solid #ff6646 !important;
background: #fdf2f0 !important;
color: #ff6646 !important;
opacity: 0.7;
}
}
}
}
}
</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'
export const columns: BasicColumn[] = [
{
title: '对账记录号',
title: '对账编号',
dataIndex: 'ctnSize0',
width: 150,
},
{
title: '对账名称',
title: '对账客户',
dataIndex: 'ctnSize1',
width: 150,
},
{
title: '对账人',
title: '对账名称',
dataIndex: 'ctnSize2',
width: 150,
},
{
title: '对账备注',
title: '对账人',
dataIndex: 'ctnSize3',
width: 150,
},
@ -27,7 +27,17 @@ export const columns: BasicColumn[] = [
width: 150,
},
{
title: '对账客户',
title: '对账编号',
dataIndex: 'ctnSize5',
width: 150,
},
{
title: '结算人',
dataIndex: 'ctnSize5',
width: 150,
},
{
title: '结算日期',
dataIndex: 'ctnSize5',
width: 150,
},
@ -44,113 +54,59 @@ export const searchFormSchema: FormSchema[] = [
export const formSchema: FormSchema[] = [
{
field: 'ctnSize0',
label: '自动对账编号',
label: '对账编号',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '结算对象',
label: '对账名称',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '对账方式',
label: '队长客户',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '对账状态',
label: '对账日期',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '对账单编号',
label: '对账人',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'ctnSize0',
label: '起始时间',
label: '费用范围',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '结算时间',
label: '结算账单编号',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '操作人',
label: '结算日期',
component: 'Input',
colProps: { span: 5 },
},
{
field: 'ctnSize0',
label: '操作时间',
label: '结算人',
component: 'Input',
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[] = [
{

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

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

Write Preview
Loading…
Cancel
Save