|
|
@@ -1,64 +1,98 @@
|
|
|
<script setup lang="ts">
|
|
|
import dayjs from 'dayjs'
|
|
|
-
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+import { autoWidth } from '@/utils/table'
|
|
|
import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
|
|
|
|
|
|
-const formInline = ref({
|
|
|
- user: '',
|
|
|
- region: '',
|
|
|
- date: ''
|
|
|
-})
|
|
|
-
|
|
|
-// 使用类型断言
|
|
|
-// const rules = reactive({
|
|
|
-// user: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
|
|
|
-// })
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
|
|
|
-const tableData = ref<VxeGridProps<any>>({
|
|
|
- minHeight: 70,
|
|
|
- border: true,
|
|
|
- round: true,
|
|
|
- columns: [
|
|
|
+const loading = ref(false)
|
|
|
+const generalInfo = ref({
|
|
|
+ baseInfo: [
|
|
|
{
|
|
|
- title: 'Container No.',
|
|
|
- field: 'container_no',
|
|
|
- width: 150
|
|
|
+ label: 'HBL No.',
|
|
|
+ value: ''
|
|
|
},
|
|
|
{
|
|
|
- title: 'VGM Weight',
|
|
|
- field: 'vgm_weight',
|
|
|
- width: 150,
|
|
|
- editRender: {
|
|
|
- name: 'vInput'
|
|
|
- },
|
|
|
- slots: {
|
|
|
- edit: 'vInput'
|
|
|
- }
|
|
|
+ label: 'Carrier Booking No.',
|
|
|
+ value: ''
|
|
|
},
|
|
|
{
|
|
|
- title: 'VGM Unit',
|
|
|
- field: 'vgm_unit',
|
|
|
- width: 150,
|
|
|
- editRender: {
|
|
|
- name: 'vSelect'
|
|
|
- },
|
|
|
- slots: {
|
|
|
- edit: 'vSelect'
|
|
|
- }
|
|
|
+ label: 'Vessel',
|
|
|
+ value: ''
|
|
|
},
|
|
|
{
|
|
|
- title: 'VGM Date',
|
|
|
- field: 'vgm_date',
|
|
|
- width: 150,
|
|
|
- editRender: {
|
|
|
- name: 'editDate'
|
|
|
- },
|
|
|
- slots: {
|
|
|
- edit: 'editDate'
|
|
|
- }
|
|
|
+ label: 'Voyage',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'ETD',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'ETA ',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Last Updated User',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Last Updated Time',
|
|
|
+ value: ''
|
|
|
}
|
|
|
],
|
|
|
- data: [{}],
|
|
|
+ formData: {
|
|
|
+ Submitter: '',
|
|
|
+ signature: '',
|
|
|
+ authorized_email: '',
|
|
|
+ authorized_tel: '',
|
|
|
+ is_send: false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
+const tableData = ref<VxeGridProps<any>>({
|
|
|
+ minHeight: 70,
|
|
|
+ border: true,
|
|
|
+ round: true,
|
|
|
+ columns: [
|
|
|
+ // {
|
|
|
+ // title: 'VGM Weight',
|
|
|
+ // field: 'vgm_weight',
|
|
|
+ // width: 150,
|
|
|
+ // editRender: {
|
|
|
+ // name: 'vInput'
|
|
|
+ // },
|
|
|
+ // slots: {
|
|
|
+ // edit: 'vInput'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: 'VGM Unit',
|
|
|
+ // field: 'vgm_unit',
|
|
|
+ // width: 150,
|
|
|
+ // editRender: {
|
|
|
+ // name: 'vSelect'
|
|
|
+ // },
|
|
|
+ // slots: {
|
|
|
+ // edit: 'vSelect'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: 'VGM Date',
|
|
|
+ // field: 'vgm_date',
|
|
|
+ // width: 150,
|
|
|
+ // editRender: {
|
|
|
+ // name: 'editDate'
|
|
|
+ // },
|
|
|
+ // slots: {
|
|
|
+ // edit: 'editDate'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
scrollY: { enabled: true, oSize: 20, gt: 30 },
|
|
|
stripe: true,
|
|
|
emptyText: ' ',
|
|
|
@@ -76,15 +110,159 @@ const tableData = ref<VxeGridProps<any>>({
|
|
|
columnConfig: { resizable: true, useKey: true },
|
|
|
rowConfig: { isHover: true }
|
|
|
})
|
|
|
-const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
+const handleColumns = (columns: any) => {
|
|
|
+ const newColumns = columns.map((item: any) => {
|
|
|
+ let curColumn: any = {
|
|
|
+ title: item.title,
|
|
|
+ field: item.field
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加编辑插槽
|
|
|
+ if (item.type === 'input') {
|
|
|
+ curColumn = {
|
|
|
+ ...curColumn,
|
|
|
+ editRender: {
|
|
|
+ name: 'vInput'
|
|
|
+ },
|
|
|
+ slots: {
|
|
|
+ edit: 'vInput'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (item.type === 'select') {
|
|
|
+ curColumn = {
|
|
|
+ ...curColumn,
|
|
|
+ editRender: {
|
|
|
+ name: 'vSelect'
|
|
|
+ },
|
|
|
+ slots: {
|
|
|
+ edit: 'vSelect'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (item.type === 'dateTime') {
|
|
|
+ curColumn = {
|
|
|
+ ...curColumn,
|
|
|
+ editRender: {
|
|
|
+ name: 'editDate'
|
|
|
+ },
|
|
|
+ slots: {
|
|
|
+ edit: 'editDate'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 格式化
|
|
|
+ if (item.formatter === 'date') {
|
|
|
+ curColumn = {
|
|
|
+ ...curColumn,
|
|
|
+ sortBy: ({ row, column }: any) => {
|
|
|
+ return dayjs(row[column.field]).unix()
|
|
|
+ },
|
|
|
+ formatter: ({ cellValue }: any) => dayjs(cellValue).format('MMM-YYYY-DD ') || '--'
|
|
|
+ }
|
|
|
+ } else if (item.formatter === 'dateTime') {
|
|
|
+ curColumn = {
|
|
|
+ ...curColumn,
|
|
|
+ formatter: ({ cellValue }: any) => dayjs(cellValue).format('MMM-YYYY-DD HH:mm:ss') || '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return curColumn
|
|
|
+ })
|
|
|
+ return newColumns
|
|
|
+}
|
|
|
+
|
|
|
+const convertData = (data: any) => {
|
|
|
+ const handleIsSend = (value: string) => {
|
|
|
+ if (value === 'f' || value === '') {
|
|
|
+ return false
|
|
|
+ } else if (value === 't') {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ generalInfo.value = {
|
|
|
+ baseInfo: [
|
|
|
+ {
|
|
|
+ label: 'HBL No.',
|
|
|
+ value: data?.['HBL No.']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Carrier Booking No.',
|
|
|
+ value: data?.['Carrier Booking No.']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Vessel',
|
|
|
+ value: data.Vessel
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Voyage',
|
|
|
+ value: data.Voyage
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'ETD',
|
|
|
+ value: data.ETD
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'ETA ',
|
|
|
+ value: data.ETA
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Last Updated User',
|
|
|
+ value: data?.['Last updated User']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Last Updated Time',
|
|
|
+ value: data?.['Last updated Time']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ formData: {
|
|
|
+ Submitter: data.Submitter,
|
|
|
+ signature: data.signature,
|
|
|
+ authorized_email: data.authorized_email,
|
|
|
+ authorized_tel: data.authorized_tel,
|
|
|
+ is_send: handleIsSend(data.is_send)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const getData = () => {
|
|
|
+ loading.value = true
|
|
|
+ $api
|
|
|
+ .getVGMData({
|
|
|
+ a: route.query.a,
|
|
|
+ _schemas: route.query._schemas
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 获取数据
|
|
|
+ convertData(res.data?.general_information)
|
|
|
+ tableData.value.columns = handleColumns(
|
|
|
+ res.data?.detail_information?.detail_information_column
|
|
|
+ )
|
|
|
+ tableData.value.data = res.data?.detail_information?.detail_information_data
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value && autoWidth(tableData.value, tableRef.value)
|
|
|
+ tableData.value.columns.forEach((item) => {
|
|
|
+ if (item.title === 'SN') {
|
|
|
+ item.width = 50
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+getData()
|
|
|
+
|
|
|
+const handleGoBack = () => {
|
|
|
+ router.push({ path: '/tracking' })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="vgm">
|
|
|
+ <div class="vgm" v-vloading="loading">
|
|
|
<div class="header">
|
|
|
<div class="title">Add VGM</div>
|
|
|
<div class="right-option">
|
|
|
- <el-button class="el-button--default"
|
|
|
+ <el-button class="el-button--default" @click="handleGoBack"
|
|
|
><span class="font_family icon-icon_return_b"></span> Cancel</el-button
|
|
|
>
|
|
|
<el-button class="el-button--main">
|
|
|
@@ -99,25 +277,9 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
<span>General Infomation</span>
|
|
|
</div>
|
|
|
<div class="description-info">
|
|
|
- <div class="data-info">
|
|
|
- <div class="label">HBL No.</div>
|
|
|
- <div class="info">HDMUSZXZ96803400</div>
|
|
|
- </div>
|
|
|
- <div class="data-info">
|
|
|
- <div class="label">HBL No.</div>
|
|
|
- <div class="info">HDMUSZXZ96803400</div>
|
|
|
- </div>
|
|
|
- <div class="data-info">
|
|
|
- <div class="label">HBL No.</div>
|
|
|
- <div class="info">HDMUSZXZ96803400</div>
|
|
|
- </div>
|
|
|
- <div class="data-info">
|
|
|
- <div class="label">HBL No.</div>
|
|
|
- <div class="info">HDMUSZXZ96803400</div>
|
|
|
- </div>
|
|
|
- <div class="data-info">
|
|
|
- <div class="label">HBL No.</div>
|
|
|
- <div class="info">HDMUSZXZ96803400</div>
|
|
|
+ <div class="data-info" v-for="item in generalInfo.baseInfo" :key="item.label">
|
|
|
+ <div class="label">{{ item.label }}</div>
|
|
|
+ <div class="info">{{ item.value }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form">
|
|
|
@@ -126,7 +288,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
<div class="label">Submitter <span class="require-asterisk">*</span></div>
|
|
|
<div class="content">
|
|
|
<el-input
|
|
|
- v-model="formInline.user"
|
|
|
+ v-model="generalInfo.formData.Submitter"
|
|
|
placeholder="Please enter..."
|
|
|
clearable
|
|
|
></el-input>
|
|
|
@@ -136,7 +298,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
<div class="label">Signature <span class="require-asterisk">*</span></div>
|
|
|
<div class="content">
|
|
|
<el-input
|
|
|
- v-model="formInline.region"
|
|
|
+ v-model="generalInfo.formData.signature"
|
|
|
placeholder="Please enter..."
|
|
|
clearable
|
|
|
></el-input>
|
|
|
@@ -149,7 +311,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
<div class="label">Authorized Email <span class="require-asterisk">*</span></div>
|
|
|
<div class="content">
|
|
|
<el-input
|
|
|
- v-model="formInline.user"
|
|
|
+ v-model="generalInfo.formData.authorized_email"
|
|
|
placeholder="Please enter..."
|
|
|
clearable
|
|
|
></el-input>
|
|
|
@@ -162,7 +324,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<el-input
|
|
|
- v-model="formInline.user"
|
|
|
+ v-model="generalInfo.formData.authorized_tel"
|
|
|
placeholder="Please enter..."
|
|
|
clearable
|
|
|
></el-input>
|
|
|
@@ -171,7 +333,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
<div class="form-item" style="flex: 0 0 130px">
|
|
|
<div class="label"></div>
|
|
|
<div class="content">
|
|
|
- <el-checkbox v-model="formInline.user" label="Option 1" size="large" />
|
|
|
+ <el-checkbox v-model="generalInfo.formData.is_send" label="Is Send" size="large" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -182,7 +344,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
<span>Detail Information</span>
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
- <vxe-grid ref="tableRef" v-bind="tableData">
|
|
|
+ <vxe-grid ref="tableRef" class="vgm-table" v-bind="tableData">
|
|
|
<template #vInput="{ row, column }">
|
|
|
<el-input
|
|
|
v-model="row[column.field]"
|
|
|
@@ -257,7 +419,6 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
border-radius: 12px;
|
|
|
& > .title {
|
|
|
height: 48px;
|
|
|
- padding: 0 16px;
|
|
|
line-height: 48px;
|
|
|
span {
|
|
|
font-size: 18px;
|
|
|
@@ -274,6 +435,14 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
border-top: 1px solid var(--color-border);
|
|
|
}
|
|
|
}
|
|
|
+ .general-info {
|
|
|
+ & > .title {
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-info {
|
|
|
+ padding: 0 16px 8px;
|
|
|
+ }
|
|
|
.form {
|
|
|
.form-row {
|
|
|
display: flex;
|
|
|
@@ -318,6 +487,7 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
color: var(--dashboard-text-color);
|
|
|
}
|
|
|
.info {
|
|
|
+ height: 21px;
|
|
|
line-height: 21px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
@@ -335,8 +505,10 @@ const tableRef = ref<VxeGridInstance | null>(null)
|
|
|
color: #202020;
|
|
|
}
|
|
|
}
|
|
|
-.vxe-grid .vxe-grid--table-wrapper,
|
|
|
-div.vxe-table--body-wrapper {
|
|
|
- overflow: visible;
|
|
|
+.vgm-table {
|
|
|
+ .vxe-grid .vxe-grid--table-wrapper,
|
|
|
+ div.vxe-table--body-wrapper {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhouyuhao
