133 lines
3.9 KiB
Vue
133 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
|
@visible-change="handleVisibleChange" >
|
|
<BasicTable @register="registerTable" class="shipScheduleListModal"></BasicTable>
|
|
</BasicModal>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, computed, unref, nextTick } from 'vue';
|
|
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
|
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
import { getLngShipSchedulePage} from '/@/api/ship/ShipSchedule';
|
|
|
|
const { t } = useI18n();
|
|
const codeFormSchema: FormSchema[] = [
|
|
{ field: 'ssNo', label: '船期编号', component: 'Input'},
|
|
{
|
|
field: 'dateFrom',
|
|
label: '卸港ETA',
|
|
component: 'RangePicker',
|
|
componentProps: {
|
|
format: 'YYYY-MM-DD',
|
|
style: { width: '100%' },
|
|
getPopupContainer: () => document.body,
|
|
},
|
|
},
|
|
];
|
|
|
|
const columns: BasicColumn[] = [
|
|
{ title: t('船期编号'), dataIndex: 'ssNo', },
|
|
{ title: t('合同'), dataIndex: 'kName', },
|
|
{ title: t('长协/现货'), dataIndex: 'longSpotName' ,},
|
|
{ title: t('交易主体'), dataIndex: 'comName', },
|
|
{ title: t('卸港ETA'), dataIndex: 'dateEta'},
|
|
{ title: t('接收站'), dataIndex: 'staName'},
|
|
{ title: t('供应商'), dataIndex: 'suName'},
|
|
|
|
];
|
|
|
|
const emit = defineEmits(['success', 'register']);
|
|
|
|
const { notification } = useMessage();
|
|
const isUpdate = ref(true);
|
|
const rowId = ref('');
|
|
const selectedKeys = ref<string[]>([]);
|
|
const selectedValues = ref([]);
|
|
const props = defineProps({
|
|
selectType: { type: String, default: 'radio' },
|
|
|
|
});
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
|
|
|
setModalProps({ confirmLoading: false });
|
|
|
|
isUpdate.value = !!data?.isUpdate;
|
|
});
|
|
|
|
const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload }] = useTable({
|
|
title: t('船期计划列表'),
|
|
api: getLngShipSchedulePage,
|
|
columns,
|
|
|
|
bordered: true,
|
|
pagination: true,
|
|
canResize: false,
|
|
formConfig: {
|
|
labelCol:{span: 9, offSet:10},
|
|
schemas: codeFormSchema,
|
|
fieldMapToTime: [['dateFrom', ['startDate', 'endDate'], 'YYYY-MM-DD']],
|
|
showResetButton: true,
|
|
},
|
|
immediate: false, // 设置为不立即调用
|
|
beforeFetch: (params) => {
|
|
return { ...params,page:params.limit};
|
|
},
|
|
rowSelection: {
|
|
type: props.selectType,
|
|
onChange: onSelectChange
|
|
},
|
|
});
|
|
const handleVisibleChange = (visible: boolean) => {
|
|
if (visible) {
|
|
nextTick(() => {
|
|
reload();
|
|
});
|
|
}
|
|
};
|
|
function onSelectChange(rowKeys: string[], e) {
|
|
selectedKeys.value = rowKeys;
|
|
selectedValues.value = e
|
|
}
|
|
const getTitle = computed(() => (!unref(isUpdate) ? t('船期计划列表') : t('')));
|
|
|
|
async function handleSubmit() {
|
|
if (!selectedValues.value.length) {
|
|
notification.warning({
|
|
message: t('提示'),
|
|
description: t('请选择船期')
|
|
});
|
|
return
|
|
}
|
|
closeModal();
|
|
emit('success', selectedValues.value);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<style >
|
|
.shipScheduleListModal .basicCol{
|
|
position: inherit !important;
|
|
top: 0;
|
|
}
|
|
|
|
</style>
|
|
<style lang="less" scoped>
|
|
:deep( .ant-col-8:nth-child(2)) {
|
|
width: 360px !important;
|
|
max-width: 360px !important;;
|
|
}
|
|
:deep(.ant-col-8:nth-child(2) .ant-form-item-label) {
|
|
width: 80px !important;
|
|
}
|
|
</style>
|