箱管 租箱租出 单程业务

szh-new
张同海 3 months ago
parent 35b7704ad7
commit 182dd3be08

@ -0,0 +1,938 @@
<template>
<BasicModal
v-bind="$attrs"
:use-wrapper="true"
title="箱状态批量维护"
width="55%"
@register="registerModal"
@ok="handleSave"
>
<BasicForm @register="registerForm" />
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="业务明细">
<div class="HotTable">
<div>
<a-button type="link" @click="TableAdd" class="pl0">
<span class="iconfont icon-new_document"></span>
新增
</a-button>
<a-popconfirm
title="确定要删除所选数据?"
ok-text="确定"
cancel-text="取消"
@confirm="FnClickDel"
>
<a-button type="link" class="pl0">
<span class="iconfont icon-shanchu21"></span>
删除
</a-button>
</a-popconfirm>
<a-button type="link" @click="handleSave(false)" class="pl0">
<span class="iconfont icon-baocun" v-repeat></span>
保存
</a-button>
</div>
<div style="position: relative">
<input
class="ds-tb-check ds-goods-tb-check"
type="checkbox"
v-model="allCheck"
:indeterminate="someCheck"
v-if="list.length !== 0"
/>
<hot-table ref="hotTb" :data="list" :settings="settings">
<img
v-show="!list.length"
class="hot-tb-no-data"
src="../../../assets/images/nodata.png"
alt=""
/>
</hot-table>
</div>
</div>
<!-- <div class="SearchBox" v-if="TotTableType">
<BasicForm class="Form" @register="registerSearchBoxForm" />
<div class="ButtonBox">
<a-button size="default" @click="handleReset"> </a-button>
<a-button type="primary" size="default" class="mt-4" @click="handleSearch">
查询
</a-button>
</div>
</div>
<div class="HotTable" v-if="TotTableType">
<div>
<a-button type="link" @click="ViewTableAdd" class="pl0">
<span class="iconfont icon-new_document"></span>
添加
</a-button>
</div>
<div style="position: relative">
<input
class="ds-tb-check ds-goods-tb-check"
type="checkbox"
v-model="ViewlallCheck"
:indeterminate="ViewlsomeCheck"
v-if="Viewlist.length !== 0"
/>
<hot-table ref="hotTb" :data="Viewlist" :settings="Viewsettings">
<img
v-show="!Viewlist.length"
class="hot-tb-no-data"
src="../../../assets/images/nodata.png"
alt=""
/>
</hot-table>
</div>
</div> -->
</a-tab-pane>
<a-tab-pane key="2" tab="电子文档" :disabled="!rowId">
<DsFile ref="dsFile" fileType="infoclient" :id="rowId" />
</a-tab-pane>
<a-tab-pane key="3" tab="费用" :disabled="!rowId">
<div class="fee-card-box mt15">
<FeeTable
tbType="receive"
:height="height"
type="1"
:broData="broPayData"
:id="rowId"
@broInsert="broReceive"
></FeeTable>
</div>
<!-- 应付表格 -->
<div class="fee-card-box mt15">
<FeeTable
tbType="pay"
:height="height"
type="1"
:broData="broReceiveData"
:id="rowId"
@broInsert="broPay"
></FeeTable>
</div>
</a-tab-pane>
</a-tabs>
<!--右下角按钮-->
<template #footer>
<!-- <a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
:disabled="!rowId"
@click="Confirm()"
>
确认执行
</a-button> -->
<!-- <a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
:disabled="!rowId"
@click="Cancel()"
>
取消执行
</a-button> -->
<a-button
pre-icon="ant-design:close-outlined"
type="warning"
:loading="loading"
ghost
style="margin-right: 0.8rem"
@click="closeModal"
>取消</a-button
>
<a-button
type="success"
:loading="loading"
pre-icon="ant-design:check-outlined"
style="margin-right: 0.8rem"
@click="handleSave(false)"
>仅保存</a-button
>
<a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
style="margin-right: 0.8rem"
@click="handleSave(true)"
>保存并关闭</a-button
>
<!-- <a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
:disabled="!rowId"
@click="MakeFee()"
>
生成费用
</a-button> -->
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, watchEffect, watch } from 'vue'
import { BasicModal, useModalInner } from '/@/components/Modal'
import { BasicForm, useForm } from '/@/components/Form/index'
import { HotTable } from '@handsontable/vue3'
import { registerAllModules } from 'handsontable/registry'
registerAllModules()
import 'handsontable/dist/handsontable.full.css'
import { formSchema, formSearchBoxSchema } from './columns'
import {
GetCtnSelectList,
GetClientPortSelectList,
} from '/@/views/operation/seaexport/api/BookingLedger'
import {
ApiEdit,
ApiInfo,
ApiListDetail,
ApiDelDetail,
// ApiMakeFee,
// ApiDetailView,
// ApiAddCtn,
// ApiConfirm,
// ApiCancel,
} from './api'
import { GetClientListByCode } from '/@/api/common'
import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage()
import { useOptionsStore } from '/@/store/modules/options'
const optionsStore = useOptionsStore()
import DsFile from '/@/components/File/index.vue'
//
import FeeTable from '/@/components/CostEntry/feeTable.vue'
// Emits
const emit = defineEmits(['success', 'register'])
const isUpdate = ref(true)
const loading = ref(false)
const rowId = ref('')
const height = ref(300)
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
submitFunc: submit,
})
const TotTableType = ref(false)
async function submit() {
const values = await validate()
if (values.rentDirectId == 1) {
TotTableType.value = true
} else {
TotTableType.value = false
}
}
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
setModalProps({ confirmLoading: false, loading: true })
isUpdate.value = !!data?.isUpdate
activeKey.value = '1'
TotTableType.value = false
// Viewlist.value.splice(0)
list.value.splice(0)
if (unref(isUpdate)) {
// setModalProps({ confirmLoading: true });
rowId.value = data.record.id
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
allCheck.value = false
someCheck.value = false
setFieldsValue({
...res.data,
})
submit()
GetListDetail()
// ViewlallCheck.value = false
// ViewlsomeCheck.value = false
// handleReset()
// GetViewListDetail('[]')
}
} else {
rowId.value = ''
}
setModalProps({ loading: false })
})
// function GetViewListDetail(queryCondition) {
// ApiDetailView({
// queryCondition,
// pageCondition: { pageIndex: 1, pageSize: 999, sortConditions: [] },
// }).then((res) => {
// Viewlist.value.splice(0)
// res.data.forEach((item) => {
// Viewlist.value.push(item)
// })
// })
// }
function GetListDetail() {
ApiListDetail({
queryCondition: `[{ FieldName: 'Pid', FieldValue: '${rowId.value}', ConditionalType: 1 }]`,
pageCondition: { pageIndex: 1, pageSize: 999, sortConditions: [] },
}).then((res) => {
// console.log(res)
// list.value.splice(0)
// res.data.forEach((item) => {
// list.value.push(item)
// })
// ------------------
list.value.splice(0)
let Arr = ['pickupDate', 'dropoffDate', 'feeStartDate', 'bsdate']
res.data.forEach((item) => {
console.log(item)
Arr.forEach((e) => {
if (item[e]) {
item[e] = item[e].split(' ')[0]
}
})
list.value.push(item)
})
})
}
// function MakeFee() {
// ApiMakeFee({ id: rowId.value }).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// }
// function Confirm() {
// let type: boolean = true
// let ApiData: any = {
// id: rowId.value,
// ids: [],
// }
// list.value.forEach((e: any, i) => {
// if (e.selected) {
// if (e.id) {
// ApiData.ids.push(e.id)
// } else {
// type = false
// }
// }
// })
// if (type) {
// ApiConfirm(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// } else {
// notification.success({ message: '', duration: 3 })
// }
// }
// function Cancel() {
// let type: boolean = true
// let ApiData: any = {
// id: rowId.value,
// ids: [],
// }
// list.value.forEach((e: any, i) => {
// if (e.selected) {
// if (e.id) {
// ApiData.ids.push(e.id)
// } else {
// type = false
// }
// }
// })
// if (type) {
// ApiCancel(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// } else {
// notification.success({ message: '', duration: 3 })
// }
// }
async function handleSave(exit) {
try {
const values = await validate()
setModalProps({ confirmLoading: true, loading: true })
// TODO custom api
values.bodyList = list.value
let Arr = ['pickupDate', 'dropoffDate', 'feeStartDate', 'bsdate']
values.bodyList.forEach((item) => {
Arr.forEach((item2) => {
if (!item[item2]) {
item[item2] = null
}
})
})
// loading.value = true;
const res: API.DataResult = await ApiEdit(values)
if (res.succeeded) {
notification.success({ message: res.message, duration: 3 })
emit('success')
//
if (!exit) {
if (unref(isUpdate)) {
await refresh()
} else {
rowId.value = res.data
isUpdate.value = true
await refresh()
}
}
} else {
notification.error({ message: res.message, duration: 3 })
}
exit && closeModal()
} finally {
// loading.value = false;
setModalProps({ confirmLoading: false, loading: false })
}
}
async function refresh() {
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
await setFieldsValue({
...res.data,
})
}
}
const activeKey = ref('1')
//--------------------------------------- tab1 ---------------------------------------
const list = ref<any>([])
//
const allCheck = ref(false)
//
const someCheck = ref(false)
const hotTb = ref()
//
const ctnDict = ref([])
//
const ContainerOwnerDict = ref([])
//
const PortDict = ref([])
// //
// const currencyDict = ref([])
watchEffect(() => {
//
if (allCheck.value) {
list.value.forEach((item: any) => {
item.selected = true
})
} else {
//
list.value.forEach((item: any) => {
item.selected = false
})
}
})
watch(
list.value,
(val) => {
let a = 0
let b = 0
val.forEach((item: any) => {
if (item.selected) {
a += 1
} else {
b += 1
}
})
if (a == 0) {
allCheck.value = false
}
if (b == 0) {
allCheck.value = true
}
if (a != 0 && b != 0) {
someCheck.value = true
} else {
someCheck.value = false
}
},
{
deep: true,
},
)
const columns = [
{
data: 'selected',
type: 'checkbox',
title: ' ',
width: 32,
className: 'htCenter',
readOnly: false,
},
// -----------------
{
title: '主键Id',
width: 200,
data: 'id',
},
{
title: '租箱业务id',
width: 200,
data: 'pid',
},
{
title: '箱型代码',
width: 120,
data: 'ctnCode',
},
{
title: '原箱主',
width: 120,
data: 'oldContainerOwnerId',
},
{
title: '提箱港口ID',
width: 120,
data: 'pickupPortid',
},
{
title: '提箱港口五字码',
width: 120,
data: 'pickupPortCode',
},
{
title: '还箱港口ID',
width: 120,
data: 'dropoffPortid',
},
{
title: '还箱港口五字码',
width: 120,
data: 'dropoffPortCode',
},
// -----------------
// {
// title: '',
// width: 200,
// data: 'billno',
// readOnly: true,
// },
{
title: '箱号',
width: 120,
data: 'cntrno',
},
{
title: '箱型',
width: 120,
data: 'ctnall',
type: 'dropdown',
// (process)
source: async (query, process) => {
const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
if (!ctnDict.value.length) ctnDict.value = res
const dict = res.map((res) => {
return res.ctnName
})
process(dict)
},
},
// {
// title: '',
// width: 120,
// data: 'oldContainerOwner',
// type: 'dropdown',
// // (process)
// source: async (query, process) => {
// const res = ContainerOwnerDict.value.length
// ? ContainerOwnerDict.value
// : (await GetClientListByCode({ code: 'leasing' }))?.data
// if (!ContainerOwnerDict.value.length) ContainerOwnerDict.value = res
// const dict = res.map((res) => {
// return res.pinYinCode
// })
// process(dict)
// },
// },
// {
// title: '',
// width: 120,
// data: 'cmRentDirectEnum',
// },
// {
// title: '',
// width: 120,
// data: 'rentType',
// },
// {
// title: '',
// width: 120,
// data: 'billState',
// },
{
title: '放箱单号',
width: 120,
data: 'ctnReleaseNo',
},
{
title: '租箱日期',
width: 120,
data: 'bsdate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '开始计费日期',
width: 120,
data: 'feeStartDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '币别',
width: 120,
data: 'currency',
type: 'dropdown',
// (process)
source: async (query, process) => {
const results = await optionsStore.getOptionsByCodeAsync('GetFeeCurrencySelectList')
const dict = results.map((item: any) => {
return item.codeName
})
process(dict)
},
},
{
title: '日租金',
width: 120,
data: 'dailyRate',
type: 'numeric',
format: '0',
},
{
title: '提箱费',
width: 120,
data: 'pickupFee',
type: 'numeric',
format: '0',
},
{
title: '还箱费',
width: 120,
data: 'dropoffFee',
type: 'numeric',
format: '0',
},
// {
// title: '',
// width: 120,
// data: 'dropoffFee',
// type: 'numeric',
// format: '0',
// },
{
title: '提箱日期',
width: 120,
data: 'pickupDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '还箱日期',
width: 120,
data: 'dropoffDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '提箱港口',
width: 120,
data: 'pickupPort',
type: 'dropdown',
// (process)
source: async (query, process) => {
const res = PortDict.value.length ? PortDict.value : (await GetClientPortSelectList())?.data
if (!PortDict.value.length) PortDict.value = res
const dict = res.map((res) => {
return res.portName
})
process(dict)
},
},
{
title: '还箱港口',
width: 120,
data: 'dropoffPort',
type: 'dropdown',
// (process)
source: async (query, process) => {
const res = PortDict.value.length ? PortDict.value : (await GetClientPortSelectList())?.data
if (!PortDict.value.length) PortDict.value = res
const dict = res.map((res) => {
return res.portName
})
process(dict)
},
},
{
title: '业务编号/提单号',
width: 120,
data: 'mblno',
},
{
title: '船名航次',
width: 120,
data: 'vesselVoyno',
},
]
const settings = {
height: '163',
autoWrapRow: true,
autoWrapCol: true,
//
rowHeights: 26,
fixedColumnsLeft: 1,
//
hiddenColumns: {
columns: [1, 2, 3, 4, 5, 6, 7, 8],
indicators: true,
},
//
enterMoves: 'row',
columnSorting: true,
//
afterValidate: function (isValid, value, row, prop, source) {
if (!isValid) {
hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
}
},
columns: columns,
// ()
licenseKey: 'non-commercial-and-evaluation',
//
async afterChange(changes, source) {
if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
let dict: any = {}
if (changes[0][1] === 'ctnall') {
const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
if (!ctnDict.value.length) ctnDict.value = res
const item = res.filter((item) => {
return item.ctnName === changes[0][3]
})
if (item) dict = item[0]
list.value[changes[0][0]]['ctnall'] = dict?.ctnName
list.value[changes[0][0]]['ctnCode'] = dict?.ediCode
}
if (changes[0][1] === 'oldContainerOwner') {
const res = ContainerOwnerDict.value.length
? ContainerOwnerDict.value
: (await GetClientListByCode({ code: 'leasing' }))?.data
if (!ContainerOwnerDict.value.length) ContainerOwnerDict.value = res
const item = res.filter((item) => {
return item.pinYinCode === changes[0][3]
})
if (item) dict = item[0]
list.value[changes[0][0]]['oldContainerOwner'] = dict?.pinYinCode
list.value[changes[0][0]]['oldContainerOwnerId'] = dict?.id
}
if (changes[0][1] === 'pickupPort' || changes[0][1] === 'dropoffPort') {
const res = PortDict.value.length
? PortDict.value
: (await GetClientPortSelectList())?.data
if (!PortDict.value.length) PortDict.value = res
const item = res.filter((item) => {
return item.portName === changes[0][3]
})
if (item) dict = item[0]
if (changes[0][1] === 'pickupPort') {
list.value[changes[0][0]]['pickupPort'] = dict?.portName
list.value[changes[0][0]]['pickupPortid'] = dict?.id
list.value[changes[0][0]]['pickupPortCode'] = dict?.ediCode
}
if (changes[0][1] === 'dropoffPort') {
list.value[changes[0][0]]['dropoffPort'] = dict?.portName
list.value[changes[0][0]]['dropoffPortid'] = dict?.id
list.value[changes[0][0]]['dropoffPortCode'] = dict?.ediCode
}
}
}
},
}
function TableAdd() {
list.value.push({ selected: false })
}
function FnClickDel() {
let ApiData: any = { ids: [] }
list.value.forEach((e: any, i) => {
if (e.selected) {
if (e.id) {
ApiData.ids.push(e.id)
} else {
list.value.splice(i, 1)
}
}
})
if (ApiData.ids.length) {
ApiDelDetail(ApiData).then((res) => {
if (res.succeeded) {
GetListDetail()
notification.success({ message: res.message, duration: 3 })
}
})
}
}
//--------------------------------------- tab1 View ---------------------------------------
// const [
// registerSearchBoxForm,
// { resetFields: resetSearchBoxFields, validate: validateSearchBox },
// ] = useForm({
// labelWidth: 100,
// schemas: formSearchBoxSchema,
// showActionButtonGroup: false,
// submitFunc: submit,
// })
// const Viewlist = ref<any>([])
// //
// const ViewlallCheck = ref(false)
//
// const ViewlsomeCheck = ref(false)
// watchEffect(() => {
// //
// if (ViewlallCheck.value) {
// Viewlist.value.forEach((item: any) => {
// item.selected = true
// })
// } else {
// //
// Viewlist.value.forEach((item: any) => {
// item.selected = false
// })
// }
// })
// watch(
// Viewlist.value,
// (val) => {
// let a = 0
// let b = 0
// val.forEach((item: any) => {
// if (item.selected) {
// a += 1
// } else {
// b += 1
// }
// })
// if (a == 0) {
// ViewlallCheck.value = false
// }
// if (b == 0) {
// ViewlallCheck.value = true
// }
// if (a != 0 && b != 0) {
// ViewlsomeCheck.value = true
// } else {
// ViewlsomeCheck.value = false
// }
// },
// {
// deep: true,
// },
// )
// const Viewsettings = {
// height: '163',
// readOnly: true,
// // autoWrapRow: true,
// // autoWrapCol: true,
// //
// rowHeights: 26,
// fixedColumnsLeft: 1,
// //
// hiddenColumns: {
// columns: [1, 2, 3, 4, 5, 6, 7, 8],
// indicators: true,
// },
// // //
// // enterMoves: 'row',
// // columnSorting: false,
// // //
// // afterValidate: function (isValid, value, row, prop, source) {
// // if (!isValid) {
// // hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
// // }
// // },
// columns: columns,
// // ()
// licenseKey: 'non-commercial-and-evaluation',
// // //
// // async afterChange(changes, source) {},
// }
// function handleReset() {
// resetSearchBoxFields()
// handleSearch()
// }
// async function handleSearch() {
// const values = await validateSearchBox()
// console.log(values)
// let ApiData: any = []
// Object.keys(values).forEach((item) => {
// if (values[item]) {
// console.log(values[item].split(','))
// if (item == 'cntrno') {
// ApiData.push({ FieldName: item, FieldValue: values[item], ConditionalType: 15 })
// } else {
// ApiData.push({ FieldName: item, FieldValue: values[item], ConditionalType: 1 })
// }
// }
// })
// GetViewListDetail(JSON.stringify(ApiData))
// }
// function ViewTableAdd() {
// let ApiData: any = { id: rowId.value, ids: [] }
// Viewlist.value.forEach((e: any, i) => {
// if (e.selected) {
// ApiData.ids.push(e.id)
// }
// })
// console.log(ApiData.ids)
// if (ApiData.ids.length) {
// ApiAddCtn(ApiData).then(async (res) => {
// if (res.succeeded) {
// const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
// if (res.succeeded) {
// allCheck.value = false
// someCheck.value = false
// ViewlallCheck.value = false
// ViewlsomeCheck.value = false
// submit()
// GetListDetail()
// handleReset()
// GetViewListDetail('[]')
// }
// // getData(false)
// notification.success({ message: res.message, duration: 3 })
// }
// })
// }
// }
//--------------------------------------- tab3 ---------------------------------------
//
const broReceiveData = ref([])
//
const broPayData = ref([])
//
const broReceive = (v) => {
broReceiveData.value = v
}
//
const broPay = (v) => {
broPayData.value = v
}
</script>
<style lang="less" scoped>
.ds-goods-tb-check {
position: absolute;
left: 15px;
}
// .SearchBox {
// display: flex;
// .Form {
// flex: 1;
// }
// .mt-4 {
// margin-left: 10px;
// }
// }
</style>

@ -0,0 +1,119 @@
// @ts-ignore
import { request } from '/@/utils/request'
import { DataResult, PageRequest } from '/@/api/model/baseModel'
enum Api {
list = '/containerManagementApi/CM_RentOut/GetCM_RentOutList',
edit = '/containerManagementApi/CM_RentOut/EditCM_RentOut',
info = '/containerManagementApi/CM_RentOut/GetCM_RentOut',
del = '/containerManagementApi/CM_RentOut/DeleteCM_RentOut',
listDetail = '/containerManagementApi/CM_RentOut_Detail/GetCM_RentOut_DetailList',
editDetail = '/containerManagementApi/CM_RentOut_Detail/EditCM_RentOut_Detail',
delDetail = '/containerManagementApi/CM_RentOut_Detail/DeleteCM_RentOut_Detail',
// Confirm = '/containerManagementApi/CM_RentOut/CM_RentOut_Confirm',
// Cancel = '/containerManagementApi/CM_RentOut/CM_RentOut_Cancel',
// MakeFee = '/containerManagementApi/CM_RentOut/CM_RentOut_MakeFee',
// DetailView = '/containerManagementApi/CM_RentOut/CM_RentOut_Detail_View',
// AddCtn = '/containerManagementApi/CM_RentOut/CM_RentOut_AddCtn',
}
// 列表 (Auth)
export function ApiList(data: PageRequest) {
return request<DataResult>({
url: Api.list,
method: 'post',
data,
})
}
// 编辑 (Auth)
export function ApiEdit(data: PageRequest) {
return request<DataResult>({
url: Api.edit,
method: 'post',
data,
})
}
// 详情 (Auth)
export function ApiInfo(query) {
return request<DataResult>({
url: Api.info,
method: 'get',
params: query,
})
}
// 删除 (Auth)
export function ApiDel(data: PageRequest) {
return request<DataResult>({
url: Api.del,
method: 'post',
data,
})
}
// 列表详情 (Auth)
export function ApiListDetail(data: PageRequest) {
return request<DataResult>({
url: Api.listDetail,
method: 'post',
data,
})
}
// 编辑详情 (Auth)
export function ApiEditDetail(data: PageRequest) {
return request<DataResult>({
url: Api.editDetail,
method: 'post',
data,
})
}
// 删除详情 (Auth)
export function ApiDelDetail(data: PageRequest) {
return request<DataResult>({
url: Api.delDetail,
method: 'post',
data,
})
}
// // 租箱租入明细视图 (Auth)
// export function ApiDetailView(data: PageRequest) {
// return request<DataResult>({
// url: Api.DetailView,
// method: 'post',
// data,
// })
// }
// // 租箱租入退租_添加 (Auth)
// export function ApiAddCtn(data: PageRequest) {
// return request<DataResult>({
// url: Api.AddCtn,
// method: 'post',
// data,
// })
// }
// // 租箱租入_生成费用 (Auth)
// export function ApiMakeFee(data: PageRequest) {
// return request<DataResult>({
// url: Api.MakeFee,
// method: 'post',
// data,
// })
// }
// // 租箱租入_确认 (Auth)
// export function ApiConfirm(data: PageRequest) {
// return request<DataResult>({
// url: Api.Confirm,
// method: 'post',
// data,
// })
// }
// // 租箱租入_取消 (Auth)
// export function ApiCancel(data: PageRequest) {
// return request<DataResult>({
// url: Api.Cancel,
// method: 'post',
// data,
// })
// }

@ -0,0 +1,499 @@
import { ref } from 'vue'
import { BasicColumn, FormSchema } from '/@/components/Table'
import { Tag } from 'ant-design-vue'
import { GetCtnSelectList, GetClientListByCode } from '/@/api/common'
import { GetDeptList } from '/@/views/operation/seaexport/api/BookingLedger'
import { useOptionsStore } from '/@/store/modules/options'
const optionsStore = useOptionsStore()
// 字典
import { getDictOption } from '/@/utils/dictUtil'
// 新旧箱数据
const usedStateList = [
{
label: '',
value: '',
},
{
label: 'used',
value: 'used',
},
{
label: 'new',
value: 'new',
},
]
// 业务类型字典
const businessTypeDict = ref([])
getDictOption('CM_BusinessType').then((res) => {
businessTypeDict.value = res
})
// 租箱类型字典
const rentTypeIdDict = ref([])
getDictOption('CM_RentType').then((res) => {
rentTypeIdDict.value = res
})
export const columns: BasicColumn[] = [
{
title: '单程业务号',
dataIndex: 'billno',
sorter: true,
width: 150,
},
{
title: '业务类型',
dataIndex: 'businessType',
sorter: true,
width: 150,
customRender: ({ text }) => {
let RData = '-'
businessTypeDict.value.forEach((item: any) => {
if (text == item.value) {
RData = item.label
}
})
return RData
},
},
{
title: '租箱业务',
dataIndex: 'rentDirect',
sorter: true,
width: 150,
},
{
title: '租箱类型',
dataIndex: 'rentTypeId',
sorter: true,
width: 150,
customRender: ({ text }) => {
let RData = '-'
rentTypeIdDict.value.forEach((item: any) => {
if (text == item.value) {
RData = item.label
}
})
return RData
},
},
{
title: '业务状态',
dataIndex: 'billState',
sorter: true,
width: 200,
},
{
title: '租箱客户',
dataIndex: 'rentCustomerName',
sorter: true,
width: 200,
},
{
title: '业务日期',
dataIndex: 'bsdate',
sorter: true,
width: 200,
},
{
title: '会计期间',
dataIndex: 'accdate',
sorter: true,
width: 200,
},
{
title: '业务锁定',
dataIndex: 'isBusinessLocking',
sorter: true,
width: 200,
customRender: ({ text }) => {
if (text) {
return <Tag color="success"></Tag>
} else {
return <Tag color="error"></Tag>
}
return text
},
},
{
title: '费用锁定',
dataIndex: 'isFeeLocking',
sorter: true,
width: 200,
customRender: ({ text }) => {
if (text) {
return <Tag color="success"></Tag>
} else {
return <Tag color="error"></Tag>
}
return text
},
},
{
title: '费用状态??',
dataIndex: 'accdate',
sorter: true,
width: 200,
},
{
title: '备注',
dataIndex: 'remark',
sorter: true,
width: 200,
},
]
export const searchFormSchema: FormSchema[] = [
{
field: 'billno',
label: '租箱业务号',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'rentCustomerName',
label: '租箱客户',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 4 },
componentProps: ({ formModel }) => {
return {
allowClear: true,
showSearch: true,
api: GetClientListByCode,
params: { code: 'leasing' },
labelField: 'pinYinCode',
showName: 'shortName',
valueField: 'shortName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'rentDirectId',
label: '租箱业务',
component: 'ApiSelect',
colProps: { span: 4 },
componentProps: ({}) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentDirect').then((res) => {
let data: any = []
res.forEach((item) => {
item.value = parseInt(item.value)
if (!item.label.indexOf('租入')) {
data.push(item)
}
})
resolve(data)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'etd',
label: 'ETD',
component: 'DatePicker',
colProps: { span: 4 },
defaultValue: '',
componentProps: {
showTime: true,
style: 'width:100%',
},
},
{
field: 'eta',
label: 'ETA',
component: 'DatePicker',
colProps: { span: 4 },
defaultValue: '',
componentProps: {
showTime: true,
style: 'width:100%',
},
},
]
export const formSchema: FormSchema[] = [
{
label: '',
field: 'id',
component: 'Input',
defaultValue: '',
show: false,
},
{
field: 'businessType',
label: '业务类型',
component: 'ApiSelect',
colProps: { span: 6 },
defaultValue: 102,
dynamicDisabled: ({}) => {
return true
},
componentProps: ({}) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_BusinessType').then((res) => {
res.forEach((item) => {
item.value = parseInt(item.value)
})
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'rentDirectId',
label: '租箱业务',
component: 'ApiSelect',
colProps: { span: 6 },
defaultValue: 2,
dynamicDisabled: ({ values }) => {
return !!values.id
},
componentProps: ({ formModel, formActionType }) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentDirect').then((res) => {
let data: any = []
res.forEach((item) => {
item.value = parseInt(item.value)
if (!item.label.indexOf('租出')) {
data.push(item)
}
})
resolve(data)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
formActionType ? formActionType.submit() : null
if (e && obj) {
formModel.rentDirect = obj.label
} else {
formModel.rentDirect = ''
}
},
}
},
},
{
field: 'rentTypeId',
label: '租箱类型',
component: 'ApiSelect',
colProps: { span: 6 },
defaultValue: 1,
dynamicDisabled: ({ values }) => {
return !!values.id
},
componentProps: ({}) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentType').then((res) => {
res.forEach((item) => {
item.value = parseInt(item.value)
})
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'billState',
label: '业务状态',
component: 'Input',
colProps: { span: 6 },
dynamicDisabled: ({}) => {
return true
},
},
{
field: 'rentCustomerId',
label: '租箱客户',
component: 'Input',
colProps: { span: 6 },
show: false,
},
{
field: 'rentCustomerName',
label: '租箱客户',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
allowClear: true,
showSearch: true,
api: GetClientListByCode,
params: { code: 'tradingAgency' },
labelField: 'pinYinCode',
showName: 'shortName',
valueField: 'shortName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (e && obj) {
formModel.rentCustomerId = obj.id
}
if (!e && !obj) {
formModel.rentCustomerId = ''
}
},
}
},
},
{
field: 'bsdate',
label: '业务日期',
component: 'DatePicker',
colProps: { span: 6 },
defaultValue: '',
componentProps: {
allowClear: true,
valueFormat: 'YYYY-MM-DD 00:00:00',
style: 'width:100%',
},
},
{
field: 'accdate',
label: '会计期间',
component: 'MonthPicker',
colProps: { span: 6 },
defaultValue: '',
componentProps: {
showTime: true,
allowClear: true,
valueFormat: 'YYYY-MM',
format: 'YYYY-MM',
},
},
{
field: 'isBusinessLocking',
label: '业务锁定',
component: 'Switch',
defaultValue: false,
colProps: { span: 6 },
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
},
{
field: 'isFeeLocking',
label: '费用锁定',
component: 'Switch',
defaultValue: false,
colProps: { span: 6 },
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
},
{
field: 'remark',
label: '备注',
component: 'Input',
colProps: { span: 24 },
},
]
export const formSearchBoxSchema: FormSchema[] = [
{
field: 'rentCustomerName',
label: '租箱客户',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
allowClear: true,
showSearch: true,
api: GetClientListByCode,
params: { code: 'leasing' },
labelField: 'pinYinCode',
showName: 'shortName',
valueField: 'shortName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'ctnall',
label: '箱型',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: () => {
return {
allowClear: true,
showSearch: true,
api: GetCtnSelectList,
params: { code: 'leasing' },
labelField: 'ctnName',
showName: 'ctnName',
valueField: 'ctnName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'cntrno',
label: '箱号',
component: 'Input',
colProps: { span: 10 },
},
]

@ -0,0 +1,171 @@
<template>
<div>
<BasicTable class="ds-table" @register="registerTable" @row-dbClick="handleAudit">
<template #tableTitle>
<a-button type="link" @click="handleCreate">
<span class="iconfont icon-tianjia"></span>
新建
</a-button>
<a-popconfirm
title="确定删除当前选中数据?"
ok-text="是"
cancel-text="否"
@confirm="handleDel"
>
<a-button type="link">
<span class="iconfont icon-shanchu21"></span>
删除
</a-button>
</a-popconfirm>
<!-- <a-button type="link" @click="Confirm">
<span class="iconfont icon-yiwancheng2"></span>
确认执行
</a-button>
<a-button type="link" @click="Cancel">
<span class="iconfont icon-weiwancheng"></span>
取消确认
</a-button> -->
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
tooltip: '编辑',
onClick: handleAudit.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
<TenantAuditStepModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { BasicTable, useTable, TableAction } from '/@/components/Table'
import {
ApiList,
ApiDel,
// , ApiConfirm, ApiCancel
} from './api'
import { useModal } from '/@/components/Modal'
import TenantAuditStepModal from './TenantAuditStepModal.vue'
import { columns, searchFormSchema } from './columns'
import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage()
//
import { formatParams } from '/@/hooks/web/common'
const [registerModal, { openModal }] = useModal()
const [registerTable, { reload, getSelectRows }] = useTable({
title: '',
api: async (p) => {
const res: API.DataResult = await ApiList(p)
return new Promise((resolve) => {
resolve({ data: [...res.data], total: res.count })
})
},
beforeFetch: (p) => {
return formatParams(p)
},
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
isTreeTable: false,
pagination: true,
striped: true,
useSearchForm: true,
showTableSetting: true,
bordered: true,
showIndexColumn: true,
indexColumnProps: {
width: 60,
},
canResize: true,
resizeHeightOffset: 35,
immediate: true,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
fixed: 'right',
},
})
function handleCreate() {
openModal(true, {
isParent: false,
isUpdate: false,
})
}
// function Confirm() {
// const select = getSelectRows()
// let ApiData: any = {
// id: '',
// ids: [],
// }
// if (select.length === 0) {
// notification.warning({ message: '', duration: 3 })
// return false
// } else {
// ApiData.ids = select.map((item) => {
// return item.id
// })
// }
// ApiConfirm(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// }
// function Cancel() {
// const select = getSelectRows()
// let ApiData: any = {
// id: '',
// ids: [],
// }
// if (select.length === 0) {
// notification.warning({ message: '', duration: 3 })
// return false
// } else {
// ApiData.ids = select.map((item) => {
// return item.id
// })
// }
// ApiCancel(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// }
function handleDel() {
const select = getSelectRows()
let ApiData: any = {
ids: [],
}
if (select.length === 0) {
notification.warning({ message: '请至少选择一条数据', duration: 3 })
return false
} else {
ApiData.ids = select.map((item) => {
return item.id
})
}
ApiDel(ApiData).then((res) => {
console.log(res)
notification.success({ message: res.message, duration: 3 })
reload()
})
}
function handleSuccess() {
reload()
}
function handleAudit(record) {
openModal(true, {
record,
isUpdate: true,
})
}
</script>

@ -0,0 +1,938 @@
<template>
<BasicModal
v-bind="$attrs"
:use-wrapper="true"
title="箱状态批量维护"
width="55%"
@register="registerModal"
@ok="handleSave"
>
<BasicForm @register="registerForm" />
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="业务明细">
<div class="HotTable">
<div>
<a-button type="link" @click="TableAdd" class="pl0">
<span class="iconfont icon-new_document"></span>
新增
</a-button>
<a-popconfirm
title="确定要删除所选数据?"
ok-text="确定"
cancel-text="取消"
@confirm="FnClickDel"
>
<a-button type="link" class="pl0">
<span class="iconfont icon-shanchu21"></span>
删除
</a-button>
</a-popconfirm>
<a-button type="link" @click="handleSave(false)" class="pl0">
<span class="iconfont icon-baocun" v-repeat></span>
保存
</a-button>
</div>
<div style="position: relative">
<input
class="ds-tb-check ds-goods-tb-check"
type="checkbox"
v-model="allCheck"
:indeterminate="someCheck"
v-if="list.length !== 0"
/>
<hot-table ref="hotTb" :data="list" :settings="settings">
<img
v-show="!list.length"
class="hot-tb-no-data"
src="../../../assets/images/nodata.png"
alt=""
/>
</hot-table>
</div>
</div>
<!-- <div class="SearchBox" v-if="TotTableType">
<BasicForm class="Form" @register="registerSearchBoxForm" />
<div class="ButtonBox">
<a-button size="default" @click="handleReset"> </a-button>
<a-button type="primary" size="default" class="mt-4" @click="handleSearch">
查询
</a-button>
</div>
</div>
<div class="HotTable" v-if="TotTableType">
<div>
<a-button type="link" @click="ViewTableAdd" class="pl0">
<span class="iconfont icon-new_document"></span>
添加
</a-button>
</div>
<div style="position: relative">
<input
class="ds-tb-check ds-goods-tb-check"
type="checkbox"
v-model="ViewlallCheck"
:indeterminate="ViewlsomeCheck"
v-if="Viewlist.length !== 0"
/>
<hot-table ref="hotTb" :data="Viewlist" :settings="Viewsettings">
<img
v-show="!Viewlist.length"
class="hot-tb-no-data"
src="../../../assets/images/nodata.png"
alt=""
/>
</hot-table>
</div>
</div> -->
</a-tab-pane>
<a-tab-pane key="2" tab="电子文档" :disabled="!rowId">
<DsFile ref="dsFile" fileType="infoclient" :id="rowId" />
</a-tab-pane>
<a-tab-pane key="3" tab="费用" :disabled="!rowId">
<div class="fee-card-box mt15">
<FeeTable
tbType="receive"
:height="height"
type="1"
:broData="broPayData"
:id="rowId"
@broInsert="broReceive"
></FeeTable>
</div>
<!-- 应付表格 -->
<div class="fee-card-box mt15">
<FeeTable
tbType="pay"
:height="height"
type="1"
:broData="broReceiveData"
:id="rowId"
@broInsert="broPay"
></FeeTable>
</div>
</a-tab-pane>
</a-tabs>
<!--右下角按钮-->
<template #footer>
<!-- <a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
:disabled="!rowId"
@click="Confirm()"
>
确认执行
</a-button> -->
<!-- <a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
:disabled="!rowId"
@click="Cancel()"
>
取消执行
</a-button> -->
<a-button
pre-icon="ant-design:close-outlined"
type="warning"
:loading="loading"
ghost
style="margin-right: 0.8rem"
@click="closeModal"
>取消</a-button
>
<a-button
type="success"
:loading="loading"
pre-icon="ant-design:check-outlined"
style="margin-right: 0.8rem"
@click="handleSave(false)"
>仅保存</a-button
>
<a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
style="margin-right: 0.8rem"
@click="handleSave(true)"
>保存并关闭</a-button
>
<!-- <a-button
pre-icon="ant-design:check-circle-outlined"
type="primary"
:loading="loading"
:disabled="!rowId"
@click="MakeFee()"
>
生成费用
</a-button> -->
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, watchEffect, watch } from 'vue'
import { BasicModal, useModalInner } from '/@/components/Modal'
import { BasicForm, useForm } from '/@/components/Form/index'
import { HotTable } from '@handsontable/vue3'
import { registerAllModules } from 'handsontable/registry'
registerAllModules()
import 'handsontable/dist/handsontable.full.css'
import { formSchema, formSearchBoxSchema } from './columns'
import {
GetCtnSelectList,
GetClientPortSelectList,
} from '/@/views/operation/seaexport/api/BookingLedger'
import {
ApiEdit,
ApiInfo,
ApiListDetail,
ApiDelDetail,
// ApiMakeFee,
// ApiDetailView,
// ApiAddCtn,
// ApiConfirm,
// ApiCancel,
} from './api'
import { GetClientListByCode } from '/@/api/common'
import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage()
import { useOptionsStore } from '/@/store/modules/options'
const optionsStore = useOptionsStore()
import DsFile from '/@/components/File/index.vue'
//
import FeeTable from '/@/components/CostEntry/feeTable.vue'
// Emits
const emit = defineEmits(['success', 'register'])
const isUpdate = ref(true)
const loading = ref(false)
const rowId = ref('')
const height = ref(300)
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
submitFunc: submit,
})
const TotTableType = ref(false)
async function submit() {
const values = await validate()
if (values.rentDirectId == 1) {
TotTableType.value = true
} else {
TotTableType.value = false
}
}
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
setModalProps({ confirmLoading: false, loading: true })
isUpdate.value = !!data?.isUpdate
activeKey.value = '1'
TotTableType.value = false
// Viewlist.value.splice(0)
list.value.splice(0)
if (unref(isUpdate)) {
// setModalProps({ confirmLoading: true });
rowId.value = data.record.id
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
allCheck.value = false
someCheck.value = false
setFieldsValue({
...res.data,
})
submit()
GetListDetail()
// ViewlallCheck.value = false
// ViewlsomeCheck.value = false
// handleReset()
// GetViewListDetail('[]')
}
} else {
rowId.value = ''
}
setModalProps({ loading: false })
})
// function GetViewListDetail(queryCondition) {
// ApiDetailView({
// queryCondition,
// pageCondition: { pageIndex: 1, pageSize: 999, sortConditions: [] },
// }).then((res) => {
// Viewlist.value.splice(0)
// res.data.forEach((item) => {
// Viewlist.value.push(item)
// })
// })
// }
function GetListDetail() {
ApiListDetail({
queryCondition: `[{ FieldName: 'Pid', FieldValue: '${rowId.value}', ConditionalType: 1 }]`,
pageCondition: { pageIndex: 1, pageSize: 999, sortConditions: [] },
}).then((res) => {
// console.log(res)
// list.value.splice(0)
// res.data.forEach((item) => {
// list.value.push(item)
// })
// ------------------
list.value.splice(0)
let Arr = ['pickupDate', 'dropoffDate', 'feeStartDate', 'bsdate']
res.data.forEach((item) => {
console.log(item)
Arr.forEach((e) => {
if (item[e]) {
item[e] = item[e].split(' ')[0]
}
})
list.value.push(item)
})
})
}
// function MakeFee() {
// ApiMakeFee({ id: rowId.value }).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// }
// function Confirm() {
// let type: boolean = true
// let ApiData: any = {
// id: rowId.value,
// ids: [],
// }
// list.value.forEach((e: any, i) => {
// if (e.selected) {
// if (e.id) {
// ApiData.ids.push(e.id)
// } else {
// type = false
// }
// }
// })
// if (type) {
// ApiConfirm(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// } else {
// notification.success({ message: '', duration: 3 })
// }
// }
// function Cancel() {
// let type: boolean = true
// let ApiData: any = {
// id: rowId.value,
// ids: [],
// }
// list.value.forEach((e: any, i) => {
// if (e.selected) {
// if (e.id) {
// ApiData.ids.push(e.id)
// } else {
// type = false
// }
// }
// })
// if (type) {
// ApiCancel(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// } else {
// notification.success({ message: '', duration: 3 })
// }
// }
async function handleSave(exit) {
try {
const values = await validate()
setModalProps({ confirmLoading: true, loading: true })
// TODO custom api
values.bodyList = list.value
let Arr = ['pickupDate', 'dropoffDate', 'feeStartDate', 'bsdate']
values.bodyList.forEach((item) => {
Arr.forEach((item2) => {
if (!item[item2]) {
item[item2] = null
}
})
})
// loading.value = true;
const res: API.DataResult = await ApiEdit(values)
if (res.succeeded) {
notification.success({ message: res.message, duration: 3 })
emit('success')
//
if (!exit) {
if (unref(isUpdate)) {
await refresh()
} else {
rowId.value = res.data
isUpdate.value = true
await refresh()
}
}
} else {
notification.error({ message: res.message, duration: 3 })
}
exit && closeModal()
} finally {
// loading.value = false;
setModalProps({ confirmLoading: false, loading: false })
}
}
async function refresh() {
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
if (res.succeeded) {
await setFieldsValue({
...res.data,
})
}
}
const activeKey = ref('1')
//--------------------------------------- tab1 ---------------------------------------
const list = ref<any>([])
//
const allCheck = ref(false)
//
const someCheck = ref(false)
const hotTb = ref()
//
const ctnDict = ref([])
//
const ContainerOwnerDict = ref([])
//
const PortDict = ref([])
// //
// const currencyDict = ref([])
watchEffect(() => {
//
if (allCheck.value) {
list.value.forEach((item: any) => {
item.selected = true
})
} else {
//
list.value.forEach((item: any) => {
item.selected = false
})
}
})
watch(
list.value,
(val) => {
let a = 0
let b = 0
val.forEach((item: any) => {
if (item.selected) {
a += 1
} else {
b += 1
}
})
if (a == 0) {
allCheck.value = false
}
if (b == 0) {
allCheck.value = true
}
if (a != 0 && b != 0) {
someCheck.value = true
} else {
someCheck.value = false
}
},
{
deep: true,
},
)
const columns = [
{
data: 'selected',
type: 'checkbox',
title: ' ',
width: 32,
className: 'htCenter',
readOnly: false,
},
// -----------------
{
title: '主键Id',
width: 200,
data: 'id',
},
{
title: '租箱业务id',
width: 200,
data: 'pid',
},
{
title: '箱型代码',
width: 120,
data: 'ctnCode',
},
{
title: '原箱主',
width: 120,
data: 'oldContainerOwnerId',
},
{
title: '提箱港口ID',
width: 120,
data: 'pickupPortid',
},
{
title: '提箱港口五字码',
width: 120,
data: 'pickupPortCode',
},
{
title: '还箱港口ID',
width: 120,
data: 'dropoffPortid',
},
{
title: '还箱港口五字码',
width: 120,
data: 'dropoffPortCode',
},
// -----------------
// {
// title: '',
// width: 200,
// data: 'billno',
// readOnly: true,
// },
{
title: '箱号',
width: 120,
data: 'cntrno',
},
{
title: '箱型',
width: 120,
data: 'ctnall',
type: 'dropdown',
// (process)
source: async (query, process) => {
const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
if (!ctnDict.value.length) ctnDict.value = res
const dict = res.map((res) => {
return res.ctnName
})
process(dict)
},
},
// {
// title: '',
// width: 120,
// data: 'oldContainerOwner',
// type: 'dropdown',
// // (process)
// source: async (query, process) => {
// const res = ContainerOwnerDict.value.length
// ? ContainerOwnerDict.value
// : (await GetClientListByCode({ code: 'leasing' }))?.data
// if (!ContainerOwnerDict.value.length) ContainerOwnerDict.value = res
// const dict = res.map((res) => {
// return res.pinYinCode
// })
// process(dict)
// },
// },
// {
// title: '',
// width: 120,
// data: 'cmRentDirectEnum',
// },
// {
// title: '',
// width: 120,
// data: 'rentType',
// },
// {
// title: '',
// width: 120,
// data: 'billState',
// },
{
title: '放箱单号',
width: 120,
data: 'ctnReleaseNo',
},
{
title: '租箱日期',
width: 120,
data: 'bsdate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '开始计费日期',
width: 120,
data: 'feeStartDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '币别',
width: 120,
data: 'currency',
type: 'dropdown',
// (process)
source: async (query, process) => {
const results = await optionsStore.getOptionsByCodeAsync('GetFeeCurrencySelectList')
const dict = results.map((item: any) => {
return item.codeName
})
process(dict)
},
},
{
title: '日租金',
width: 120,
data: 'dailyRate',
type: 'numeric',
format: '0',
},
{
title: '提箱费',
width: 120,
data: 'pickupFee',
type: 'numeric',
format: '0',
},
{
title: '还箱费',
width: 120,
data: 'dropoffFee',
type: 'numeric',
format: '0',
},
// {
// title: '',
// width: 120,
// data: 'dropoffFee',
// type: 'numeric',
// format: '0',
// },
{
title: '提箱日期',
width: 120,
data: 'pickupDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '还箱日期',
width: 120,
data: 'dropoffDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '提箱港口',
width: 120,
data: 'pickupPort',
type: 'dropdown',
// (process)
source: async (query, process) => {
const res = PortDict.value.length ? PortDict.value : (await GetClientPortSelectList())?.data
if (!PortDict.value.length) PortDict.value = res
const dict = res.map((res) => {
return res.portName
})
process(dict)
},
},
{
title: '还箱港口',
width: 120,
data: 'dropoffPort',
type: 'dropdown',
// (process)
source: async (query, process) => {
const res = PortDict.value.length ? PortDict.value : (await GetClientPortSelectList())?.data
if (!PortDict.value.length) PortDict.value = res
const dict = res.map((res) => {
return res.portName
})
process(dict)
},
},
{
title: '业务编号/提单号',
width: 120,
data: 'mblno',
},
{
title: '船名航次',
width: 120,
data: 'vesselVoyno',
},
]
const settings = {
height: '163',
autoWrapRow: true,
autoWrapCol: true,
//
rowHeights: 26,
fixedColumnsLeft: 1,
//
hiddenColumns: {
columns: [1, 2, 3, 4, 5, 6, 7, 8],
indicators: true,
},
//
enterMoves: 'row',
columnSorting: true,
//
afterValidate: function (isValid, value, row, prop, source) {
if (!isValid) {
hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
}
},
columns: columns,
// ()
licenseKey: 'non-commercial-and-evaluation',
//
async afterChange(changes, source) {
if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
let dict: any = {}
if (changes[0][1] === 'ctnall') {
const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
if (!ctnDict.value.length) ctnDict.value = res
const item = res.filter((item) => {
return item.ctnName === changes[0][3]
})
if (item) dict = item[0]
list.value[changes[0][0]]['ctnall'] = dict?.ctnName
list.value[changes[0][0]]['ctnCode'] = dict?.ediCode
}
if (changes[0][1] === 'oldContainerOwner') {
const res = ContainerOwnerDict.value.length
? ContainerOwnerDict.value
: (await GetClientListByCode({ code: 'leasing' }))?.data
if (!ContainerOwnerDict.value.length) ContainerOwnerDict.value = res
const item = res.filter((item) => {
return item.pinYinCode === changes[0][3]
})
if (item) dict = item[0]
list.value[changes[0][0]]['oldContainerOwner'] = dict?.pinYinCode
list.value[changes[0][0]]['oldContainerOwnerId'] = dict?.id
}
if (changes[0][1] === 'pickupPort' || changes[0][1] === 'dropoffPort') {
const res = PortDict.value.length
? PortDict.value
: (await GetClientPortSelectList())?.data
if (!PortDict.value.length) PortDict.value = res
const item = res.filter((item) => {
return item.portName === changes[0][3]
})
if (item) dict = item[0]
if (changes[0][1] === 'pickupPort') {
list.value[changes[0][0]]['pickupPort'] = dict?.portName
list.value[changes[0][0]]['pickupPortid'] = dict?.id
list.value[changes[0][0]]['pickupPortCode'] = dict?.ediCode
}
if (changes[0][1] === 'dropoffPort') {
list.value[changes[0][0]]['dropoffPort'] = dict?.portName
list.value[changes[0][0]]['dropoffPortid'] = dict?.id
list.value[changes[0][0]]['dropoffPortCode'] = dict?.ediCode
}
}
}
},
}
function TableAdd() {
list.value.push({ selected: false })
}
function FnClickDel() {
let ApiData: any = { ids: [] }
list.value.forEach((e: any, i) => {
if (e.selected) {
if (e.id) {
ApiData.ids.push(e.id)
} else {
list.value.splice(i, 1)
}
}
})
if (ApiData.ids.length) {
ApiDelDetail(ApiData).then((res) => {
if (res.succeeded) {
GetListDetail()
notification.success({ message: res.message, duration: 3 })
}
})
}
}
//--------------------------------------- tab1 View ---------------------------------------
// const [
// registerSearchBoxForm,
// { resetFields: resetSearchBoxFields, validate: validateSearchBox },
// ] = useForm({
// labelWidth: 100,
// schemas: formSearchBoxSchema,
// showActionButtonGroup: false,
// submitFunc: submit,
// })
// const Viewlist = ref<any>([])
// //
// const ViewlallCheck = ref(false)
//
// const ViewlsomeCheck = ref(false)
// watchEffect(() => {
// //
// if (ViewlallCheck.value) {
// Viewlist.value.forEach((item: any) => {
// item.selected = true
// })
// } else {
// //
// Viewlist.value.forEach((item: any) => {
// item.selected = false
// })
// }
// })
// watch(
// Viewlist.value,
// (val) => {
// let a = 0
// let b = 0
// val.forEach((item: any) => {
// if (item.selected) {
// a += 1
// } else {
// b += 1
// }
// })
// if (a == 0) {
// ViewlallCheck.value = false
// }
// if (b == 0) {
// ViewlallCheck.value = true
// }
// if (a != 0 && b != 0) {
// ViewlsomeCheck.value = true
// } else {
// ViewlsomeCheck.value = false
// }
// },
// {
// deep: true,
// },
// )
// const Viewsettings = {
// height: '163',
// readOnly: true,
// // autoWrapRow: true,
// // autoWrapCol: true,
// //
// rowHeights: 26,
// fixedColumnsLeft: 1,
// //
// hiddenColumns: {
// columns: [1, 2, 3, 4, 5, 6, 7, 8],
// indicators: true,
// },
// // //
// // enterMoves: 'row',
// // columnSorting: false,
// // //
// // afterValidate: function (isValid, value, row, prop, source) {
// // if (!isValid) {
// // hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
// // }
// // },
// columns: columns,
// // ()
// licenseKey: 'non-commercial-and-evaluation',
// // //
// // async afterChange(changes, source) {},
// }
// function handleReset() {
// resetSearchBoxFields()
// handleSearch()
// }
// async function handleSearch() {
// const values = await validateSearchBox()
// console.log(values)
// let ApiData: any = []
// Object.keys(values).forEach((item) => {
// if (values[item]) {
// console.log(values[item].split(','))
// if (item == 'cntrno') {
// ApiData.push({ FieldName: item, FieldValue: values[item], ConditionalType: 15 })
// } else {
// ApiData.push({ FieldName: item, FieldValue: values[item], ConditionalType: 1 })
// }
// }
// })
// GetViewListDetail(JSON.stringify(ApiData))
// }
// function ViewTableAdd() {
// let ApiData: any = { id: rowId.value, ids: [] }
// Viewlist.value.forEach((e: any, i) => {
// if (e.selected) {
// ApiData.ids.push(e.id)
// }
// })
// console.log(ApiData.ids)
// if (ApiData.ids.length) {
// ApiAddCtn(ApiData).then(async (res) => {
// if (res.succeeded) {
// const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
// if (res.succeeded) {
// allCheck.value = false
// someCheck.value = false
// ViewlallCheck.value = false
// ViewlsomeCheck.value = false
// submit()
// GetListDetail()
// handleReset()
// GetViewListDetail('[]')
// }
// // getData(false)
// notification.success({ message: res.message, duration: 3 })
// }
// })
// }
// }
//--------------------------------------- tab3 ---------------------------------------
//
const broReceiveData = ref([])
//
const broPayData = ref([])
//
const broReceive = (v) => {
broReceiveData.value = v
}
//
const broPay = (v) => {
broPayData.value = v
}
</script>
<style lang="less" scoped>
.ds-goods-tb-check {
position: absolute;
left: 15px;
}
// .SearchBox {
// display: flex;
// .Form {
// flex: 1;
// }
// .mt-4 {
// margin-left: 10px;
// }
// }
</style>

@ -0,0 +1,119 @@
// @ts-ignore
import { request } from '/@/utils/request'
import { DataResult, PageRequest } from '/@/api/model/baseModel'
enum Api {
list = '/containerManagementApi/CM_RentOut/GetCM_RentOutList',
edit = '/containerManagementApi/CM_RentOut/EditCM_RentOut',
info = '/containerManagementApi/CM_RentOut/GetCM_RentOut',
del = '/containerManagementApi/CM_RentOut/DeleteCM_RentOut',
listDetail = '/containerManagementApi/CM_RentOut_Detail/GetCM_RentOut_DetailList',
editDetail = '/containerManagementApi/CM_RentOut_Detail/EditCM_RentOut_Detail',
delDetail = '/containerManagementApi/CM_RentOut_Detail/DeleteCM_RentOut_Detail',
// Confirm = '/containerManagementApi/CM_RentOut/CM_RentOut_Confirm',
// Cancel = '/containerManagementApi/CM_RentOut/CM_RentOut_Cancel',
// MakeFee = '/containerManagementApi/CM_RentOut/CM_RentOut_MakeFee',
// DetailView = '/containerManagementApi/CM_RentOut/CM_RentOut_Detail_View',
// AddCtn = '/containerManagementApi/CM_RentOut/CM_RentOut_AddCtn',
}
// 列表 (Auth)
export function ApiList(data: PageRequest) {
return request<DataResult>({
url: Api.list,
method: 'post',
data,
})
}
// 编辑 (Auth)
export function ApiEdit(data: PageRequest) {
return request<DataResult>({
url: Api.edit,
method: 'post',
data,
})
}
// 详情 (Auth)
export function ApiInfo(query) {
return request<DataResult>({
url: Api.info,
method: 'get',
params: query,
})
}
// 删除 (Auth)
export function ApiDel(data: PageRequest) {
return request<DataResult>({
url: Api.del,
method: 'post',
data,
})
}
// 列表详情 (Auth)
export function ApiListDetail(data: PageRequest) {
return request<DataResult>({
url: Api.listDetail,
method: 'post',
data,
})
}
// 编辑详情 (Auth)
export function ApiEditDetail(data: PageRequest) {
return request<DataResult>({
url: Api.editDetail,
method: 'post',
data,
})
}
// 删除详情 (Auth)
export function ApiDelDetail(data: PageRequest) {
return request<DataResult>({
url: Api.delDetail,
method: 'post',
data,
})
}
// // 租箱租入明细视图 (Auth)
// export function ApiDetailView(data: PageRequest) {
// return request<DataResult>({
// url: Api.DetailView,
// method: 'post',
// data,
// })
// }
// // 租箱租入退租_添加 (Auth)
// export function ApiAddCtn(data: PageRequest) {
// return request<DataResult>({
// url: Api.AddCtn,
// method: 'post',
// data,
// })
// }
// // 租箱租入_生成费用 (Auth)
// export function ApiMakeFee(data: PageRequest) {
// return request<DataResult>({
// url: Api.MakeFee,
// method: 'post',
// data,
// })
// }
// // 租箱租入_确认 (Auth)
// export function ApiConfirm(data: PageRequest) {
// return request<DataResult>({
// url: Api.Confirm,
// method: 'post',
// data,
// })
// }
// // 租箱租入_取消 (Auth)
// export function ApiCancel(data: PageRequest) {
// return request<DataResult>({
// url: Api.Cancel,
// method: 'post',
// data,
// })
// }

@ -0,0 +1,499 @@
import { ref } from 'vue'
import { BasicColumn, FormSchema } from '/@/components/Table'
import { Tag } from 'ant-design-vue'
import { GetCtnSelectList, GetClientListByCode } from '/@/api/common'
import { GetDeptList } from '/@/views/operation/seaexport/api/BookingLedger'
import { useOptionsStore } from '/@/store/modules/options'
const optionsStore = useOptionsStore()
// 字典
import { getDictOption } from '/@/utils/dictUtil'
// 新旧箱数据
const usedStateList = [
{
label: '',
value: '',
},
{
label: 'used',
value: 'used',
},
{
label: 'new',
value: 'new',
},
]
// 业务类型字典
const businessTypeDict = ref([])
getDictOption('CM_BusinessType').then((res) => {
businessTypeDict.value = res
})
// 租箱类型字典
const rentTypeIdDict = ref([])
getDictOption('CM_RentType').then((res) => {
rentTypeIdDict.value = res
})
export const columns: BasicColumn[] = [
{
title: '单程业务号',
dataIndex: 'billno',
sorter: true,
width: 150,
},
{
title: '业务类型',
dataIndex: 'businessType',
sorter: true,
width: 150,
customRender: ({ text }) => {
let RData = '-'
businessTypeDict.value.forEach((item: any) => {
if (text == item.value) {
RData = item.label
}
})
return RData
},
},
{
title: '租箱业务',
dataIndex: 'rentDirect',
sorter: true,
width: 150,
},
{
title: '租箱类型',
dataIndex: 'rentTypeId',
sorter: true,
width: 150,
customRender: ({ text }) => {
let RData = '-'
rentTypeIdDict.value.forEach((item: any) => {
if (text == item.value) {
RData = item.label
}
})
return RData
},
},
{
title: '业务状态',
dataIndex: 'billState',
sorter: true,
width: 200,
},
{
title: '租箱客户',
dataIndex: 'rentCustomerName',
sorter: true,
width: 200,
},
{
title: '业务日期',
dataIndex: 'bsdate',
sorter: true,
width: 200,
},
{
title: '会计期间',
dataIndex: 'accdate',
sorter: true,
width: 200,
},
{
title: '业务锁定',
dataIndex: 'isBusinessLocking',
sorter: true,
width: 200,
customRender: ({ text }) => {
if (text) {
return <Tag color="success"></Tag>
} else {
return <Tag color="error"></Tag>
}
return text
},
},
{
title: '费用锁定',
dataIndex: 'isFeeLocking',
sorter: true,
width: 200,
customRender: ({ text }) => {
if (text) {
return <Tag color="success"></Tag>
} else {
return <Tag color="error"></Tag>
}
return text
},
},
{
title: '费用状态??',
dataIndex: 'accdate',
sorter: true,
width: 200,
},
{
title: '备注',
dataIndex: 'remark',
sorter: true,
width: 200,
},
]
export const searchFormSchema: FormSchema[] = [
{
field: 'billno',
label: '租箱业务号',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'rentCustomerName',
label: '租箱客户',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 4 },
componentProps: ({ formModel }) => {
return {
allowClear: true,
showSearch: true,
api: GetClientListByCode,
params: { code: 'leasing' },
labelField: 'pinYinCode',
showName: 'shortName',
valueField: 'shortName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'rentDirectId',
label: '租箱业务',
component: 'ApiSelect',
colProps: { span: 4 },
componentProps: ({}) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentDirect').then((res) => {
let data: any = []
res.forEach((item) => {
item.value = parseInt(item.value)
if (!item.label.indexOf('租入')) {
data.push(item)
}
})
resolve(data)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'etd',
label: 'ETD',
component: 'DatePicker',
colProps: { span: 4 },
defaultValue: '',
componentProps: {
showTime: true,
style: 'width:100%',
},
},
{
field: 'eta',
label: 'ETA',
component: 'DatePicker',
colProps: { span: 4 },
defaultValue: '',
componentProps: {
showTime: true,
style: 'width:100%',
},
},
]
export const formSchema: FormSchema[] = [
{
label: '',
field: 'id',
component: 'Input',
defaultValue: '',
show: false,
},
{
field: 'businessType',
label: '业务类型',
component: 'ApiSelect',
colProps: { span: 6 },
defaultValue: 102,
dynamicDisabled: ({}) => {
return true
},
componentProps: ({}) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_BusinessType').then((res) => {
res.forEach((item) => {
item.value = parseInt(item.value)
})
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'rentDirectId',
label: '租箱业务',
component: 'ApiSelect',
colProps: { span: 6 },
defaultValue: 2,
dynamicDisabled: ({ values }) => {
return !!values.id
},
componentProps: ({ formModel, formActionType }) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentDirect').then((res) => {
let data: any = []
res.forEach((item) => {
item.value = parseInt(item.value)
if (!item.label.indexOf('租出')) {
data.push(item)
}
})
resolve(data)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
formActionType ? formActionType.submit() : null
if (e && obj) {
formModel.rentDirect = obj.label
} else {
formModel.rentDirect = ''
}
},
}
},
},
{
field: 'rentTypeId',
label: '租箱类型',
component: 'ApiSelect',
colProps: { span: 6 },
defaultValue: 1,
dynamicDisabled: ({ values }) => {
return !!values.id
},
componentProps: ({}) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentType').then((res) => {
res.forEach((item) => {
item.value = parseInt(item.value)
})
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'billState',
label: '业务状态',
component: 'Input',
colProps: { span: 6 },
dynamicDisabled: ({}) => {
return true
},
},
{
field: 'rentCustomerId',
label: '租箱客户',
component: 'Input',
colProps: { span: 6 },
show: false,
},
{
field: 'rentCustomerName',
label: '租箱客户',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
allowClear: true,
showSearch: true,
api: GetClientListByCode,
params: { code: 'tradingAgency' },
labelField: 'pinYinCode',
showName: 'shortName',
valueField: 'shortName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (e && obj) {
formModel.rentCustomerId = obj.id
}
if (!e && !obj) {
formModel.rentCustomerId = ''
}
},
}
},
},
{
field: 'bsdate',
label: '业务日期',
component: 'DatePicker',
colProps: { span: 6 },
defaultValue: '',
componentProps: {
allowClear: true,
valueFormat: 'YYYY-MM-DD 00:00:00',
style: 'width:100%',
},
},
{
field: 'accdate',
label: '会计期间',
component: 'MonthPicker',
colProps: { span: 6 },
defaultValue: '',
componentProps: {
showTime: true,
allowClear: true,
valueFormat: 'YYYY-MM',
format: 'YYYY-MM',
},
},
{
field: 'isBusinessLocking',
label: '业务锁定',
component: 'Switch',
defaultValue: false,
colProps: { span: 6 },
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
},
{
field: 'isFeeLocking',
label: '费用锁定',
component: 'Switch',
defaultValue: false,
colProps: { span: 6 },
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
},
{
field: 'remark',
label: '备注',
component: 'Input',
colProps: { span: 24 },
},
]
export const formSearchBoxSchema: FormSchema[] = [
{
field: 'rentCustomerName',
label: '租箱客户',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
allowClear: true,
showSearch: true,
api: GetClientListByCode,
params: { code: 'leasing' },
labelField: 'pinYinCode',
showName: 'shortName',
valueField: 'shortName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'ctnall',
label: '箱型',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 6 },
componentProps: () => {
return {
allowClear: true,
showSearch: true,
api: GetCtnSelectList,
params: { code: 'leasing' },
labelField: 'ctnName',
showName: 'ctnName',
valueField: 'ctnName',
resultField: 'data',
immediate: false,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
},
},
{
field: 'cntrno',
label: '箱号',
component: 'Input',
colProps: { span: 10 },
},
]

@ -0,0 +1,171 @@
<template>
<div>
<BasicTable class="ds-table" @register="registerTable" @row-dbClick="handleAudit">
<template #tableTitle>
<a-button type="link" @click="handleCreate">
<span class="iconfont icon-tianjia"></span>
新建
</a-button>
<a-popconfirm
title="确定删除当前选中数据?"
ok-text="是"
cancel-text="否"
@confirm="handleDel"
>
<a-button type="link">
<span class="iconfont icon-shanchu21"></span>
删除
</a-button>
</a-popconfirm>
<!-- <a-button type="link" @click="Confirm">
<span class="iconfont icon-yiwancheng2"></span>
确认执行
</a-button>
<a-button type="link" @click="Cancel">
<span class="iconfont icon-weiwancheng"></span>
取消确认
</a-button> -->
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
tooltip: '编辑',
onClick: handleAudit.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
<TenantAuditStepModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { BasicTable, useTable, TableAction } from '/@/components/Table'
import {
ApiList,
ApiDel,
// , ApiConfirm, ApiCancel
} from './api'
import { useModal } from '/@/components/Modal'
import TenantAuditStepModal from './TenantAuditStepModal.vue'
import { columns, searchFormSchema } from './columns'
import { useMessage } from '/@/hooks/web/useMessage'
const { notification } = useMessage()
//
import { formatParams } from '/@/hooks/web/common'
const [registerModal, { openModal }] = useModal()
const [registerTable, { reload, getSelectRows }] = useTable({
title: '',
api: async (p) => {
const res: API.DataResult = await ApiList(p)
return new Promise((resolve) => {
resolve({ data: [...res.data], total: res.count })
})
},
beforeFetch: (p) => {
return formatParams(p)
},
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
isTreeTable: false,
pagination: true,
striped: true,
useSearchForm: true,
showTableSetting: true,
bordered: true,
showIndexColumn: true,
indexColumnProps: {
width: 60,
},
canResize: true,
resizeHeightOffset: 35,
immediate: true,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
fixed: 'right',
},
})
function handleCreate() {
openModal(true, {
isParent: false,
isUpdate: false,
})
}
// function Confirm() {
// const select = getSelectRows()
// let ApiData: any = {
// id: '',
// ids: [],
// }
// if (select.length === 0) {
// notification.warning({ message: '', duration: 3 })
// return false
// } else {
// ApiData.ids = select.map((item) => {
// return item.id
// })
// }
// ApiConfirm(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// }
// function Cancel() {
// const select = getSelectRows()
// let ApiData: any = {
// id: '',
// ids: [],
// }
// if (select.length === 0) {
// notification.warning({ message: '', duration: 3 })
// return false
// } else {
// ApiData.ids = select.map((item) => {
// return item.id
// })
// }
// ApiCancel(ApiData).then((res) => {
// notification.success({ message: res.message, duration: 3 })
// })
// }
function handleDel() {
const select = getSelectRows()
let ApiData: any = {
ids: [],
}
if (select.length === 0) {
notification.warning({ message: '请至少选择一条数据', duration: 3 })
return false
} else {
ApiData.ids = select.map((item) => {
return item.id
})
}
ApiDel(ApiData).then((res) => {
console.log(res)
notification.success({ message: res.message, duration: 3 })
reload()
})
}
function handleSuccess() {
reload()
}
function handleAudit(record) {
openModal(true, {
record,
isUpdate: true,
})
}
</script>
Loading…
Cancel
Save