sunzehua 3 months ago
commit 0a691d775f

@ -0,0 +1,881 @@
<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'
import { json } from 'stream/consumers'
// 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) => {
list.value.splice(0)
res.data.forEach((item) => {
list.value.push(item)
})
})
}
function MakeFee() {
ApiMakeFee(rowId.value).then((res) => {
notification.success({ message: res.message, duration: 3 })
})
}
function Confirm() {
ApiConfirm(rowId.value).then((res) => {
notification.success({ message: res.message, duration: 3 })
})
}
function Cancel() {
ApiCancel(rowId.value).then((res) => {
notification.success({ message: res.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: 'pickupDate',
type: 'date',
dateFormat: 'YYYY-MM-DD',
},
{
title: '还箱费',
width: 120,
data: 'dropoffFee',
type: 'numeric',
format: '0',
},
{
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',
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,127 @@
// @ts-ignore
import { request } from '/@/utils/request'
import { DataResult, PageRequest } from '/@/api/model/baseModel'
enum Api {
list = '/containerManagementApi/CM_RentIn/GetCM_RentInList',
edit = '/containerManagementApi/CM_RentIn/EditCM_RentIn',
info = '/containerManagementApi/CM_RentIn/GetCM_RentIn',
del = '/containerManagementApi/CM_RentIn/DeleteCM_RentIn',
listDetail = '/containerManagementApi/CM_RentIn_Detail/GetCM_RentIn_DetailList',
editDetail = '/containerManagementApi/CM_RentIn_Detail/EditCM_RentIn_Detail',
delDetail = '/containerManagementApi/CM_RentIn_Detail/DeleteCM_RentIn_Detail',
Confirm = '/containerManagementApi/CM_RentIn/CM_RentIn_Confirm',
Cancel = '/containerManagementApi/CM_RentIn/CM_RentIn_Cancel',
MakeFee = '/containerManagementApi/CM_RentIn/CM_RentIn_MakeFee',
DetailView = '/containerManagementApi/CM_RentIn/CM_RentIn_Detail_View',
AddCtn = '/containerManagementApi/CM_RentIn/CM_RentIn_AddCtn',
}
// 租箱租入明细视图 (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',
headers:{
'Content-Type':'application/json-patch+json'
},
data,
})
}
// 租箱租入_确认 (Auth)
export function ApiConfirm(data: PageRequest) {
return request<DataResult>({
url: Api.Confirm,
method: 'post',
headers:{
'Content-Type':'application/json-patch+json'
},
data,
})
}
// 租箱租入_取消 (Auth)
export function ApiCancel(data: PageRequest) {
return request<DataResult>({
url: Api.Cancel,
method: 'post',
headers:{
'Content-Type':'application/json-patch+json'
},
data,
})
}
// 列表 (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,
})
}

@ -0,0 +1,488 @@
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: 'oldContainerOwner',
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: 'remark',
sorter: true,
width: 200,
},
]
export const searchFormSchema: FormSchema[] = [
{
field: 'billno',
label: '租箱业务号',
component: 'Input',
colProps: { span: 4 },
},
{
field: 'oldContainerOwner',
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: 101,
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: 0,
componentProps: ({ formModel, formActionType }) => {
return {
api: () => {
return new Promise((resolve) => {
getDictOption('CM_RentDirect').then((res) => {
let data: any = []
res.forEach((item) => {
console.log(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,
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: 'oldContainerOwnerId',
label: '原箱主',
component: 'Input',
colProps: { span: 6 },
show: false,
},
{
field: 'oldContainerOwner',
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
},
onChange: (e, obj) => {
if (e && obj) {
formModel.oldContainerOwnerId = obj.id
}
if (!e && !obj) {
formModel.oldContainerOwnerId = ''
}
},
}
},
},
{
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: 'oldContainerOwner',
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,153 @@
<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()
if (select.length !== 1) {
notification.warning({ message: '请选择一条数据', duration: 3 })
} else {
ApiConfirm(select[0].id).then((res) => {
notification.success({ message: res.message, duration: 3 })
reload()
})
}
}
function Cancel() {
const select = getSelectRows()
if (select.length !== 1) {
notification.warning({ message: '请选择一条数据', duration: 3 })
} else {
ApiCancel(select[0].id).then((res) => {
notification.success({ message: res.message, duration: 3 })
reload()
})
}
}
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>

@ -271,8 +271,21 @@
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) => {
console.log(item, item[e], item[e].split(' '))
item[e] = item[e].split(' ')[0]
})
list.value.push(item)
})
})

Loading…
Cancel
Save