舱单弹窗

src/design/ant/form.less

@@ -44,8 +44,8 @@
     line-height: 26px !important;
     font-size: 12px;
   }
-  .ant-picker, .ant-input {
+  .ant-picker {
-    height: 26px!important;
+    height: 25px!important;
     width: 100%;
     font-size: 12px!important;
   }

src/views/operation/seaexport/detail/modules/Letter/OpBusinessYardColumns.tsx

@@ -482,7 +482,6 @@ export const formSchema: FormSchema[] = [
     label: '开船日期',
     field: 'etd',
     component: 'DatePicker',
-    defaultValue: '',
     colProps: {
       span: 6,
     },
@@ -611,7 +610,6 @@ export const formSchema: FormSchema[] = [
     label: '提箱时间',
     field: 'pickUpTime',
     component: 'DatePicker',
-    defaultValue: '',
     colProps: {
       span: 6,
     },
@@ -701,7 +699,6 @@ export const formSchema: FormSchema[] = [
     label: '入货时间',
     field: 'receiveTime',
     component: 'DatePicker',
-    defaultValue: '',
     colProps: {
       span: 6,
     },
@@ -714,7 +711,7 @@ export const formSchema: FormSchema[] = [
     label: '截港日期',
     field: 'closingDate',
     component: 'DatePicker',
-    defaultValue: '',
+    defaultValue: null,
     colProps: {
       span: 8,
     },
@@ -727,7 +724,6 @@ export const formSchema: FormSchema[] = [
     label: '截单日期',
     field: 'closeDocDate',
     component: 'DatePicker',
-    defaultValue: '',
     colProps: {
       span: 8,
     },
@@ -740,7 +736,6 @@ export const formSchema: FormSchema[] = [
     label: '截VGM日期',
     field: 'closeVGMDate',
     component: 'DatePicker',
-    defaultValue: '',
     colProps: {
       span: 8,
     },

src/views/operation/seaexport/detail/modules/Letter/OpBusinessYardDetails.vue

@@ -8,7 +8,7 @@
   >
     <a-row>
       <a-col :span="6">
-        <BasicTable @register="registerOpBusinessYardTable">
+        <BasicTable @register="registerOpBusinessYardTable" @row-click="onRowClick">
           <template #tableTitle>
             <div class="buttonGroup">
               <a-button type="link" @click="FnClickAdd">
@@ -32,6 +32,7 @@
       </a-col>
       <a-col :span="18" class="OPCol">
         <OpBusinessYardEdit
+          ref="YardEdit"
           :business-id="businessId"
           :select-id="selectId"
           @success="handleSuccess"
@@ -112,7 +113,14 @@
       },
     },
   })
-
+  // 场站编辑组件
+  const YardEdit = ref(null)
+  // 行点击事件
+  const onRowClick = (record) => {
+    YardEdit.value.setFieldsValue({
+      ...record
+    })
+  }
   // 删除
   function FnClickDel() {
     if (getSelectRows().length) {

src/views/operation/seaexport/detail/modules/Letter/OpBusinessYardEdit.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue'
+  import { ref, watch, defineExpose } from 'vue'
   import { BasicForm, useForm } from '/@/components/Form/index'
   import { formSchema } from './OpBusinessYardColumns'
   import { EditOpBusinessYard, GetOpBusinessYardInfo } from './LetterApi'
@@ -50,10 +50,8 @@
 
   async function handleSave() {
     let ApiData: any = {
-      mainInfo: {},
     }
     const values = await validate()
-    console.log(values)
     Object.keys(values).forEach((item) => {
       if (item == 'businessId' && !values.businessId) {
         ApiData.businessId = props.businessId
@@ -65,10 +63,11 @@
     if (res.succeeded) {
       createMessage.success(res.message)
       emit('success')
-    } else {
-      createMessage.error(res.message)
     }
   }
+  defineExpose({
+    setFieldsValue
+  })
 </script>
 <style lang="less" scoped>
   .MainBox {

src/views/operation/seaexport/detail/modules/preOrder.vue

@@ -15,16 +15,16 @@
             预配舱单列表
           </h4>
           <div>
-            <a-button type="link" @click="addOrder" class="pl0 pb0">
+            <a-button v-repeat type="link" @click="addOrder" class="pl0 pb0">
               <span class="iconfont icon-new_document"></span>
               添加分单
             </a-button>
-            <a-button type="link" @click="sendOrderFun" class="pb0">
+            <a-button v-repeat  type="link" @click="sendOrderFun" class="pb0">
               <span class="iconfont icon-tijiao1"></span>
               发送
             </a-button>
             <div style="white-space: nowrap;">
-              <a-button type="link" @click="saveOrder" class="pl0 pt0">
+              <a-button v-repeat type="link" @click="saveOrder" class="pl0 pt0">
                 <span class="iconfont icon-baocun"></span>
                 保存
               </a-button>
@@ -52,41 +52,62 @@
               </a-popconfirm>
             </div>
           </div>
+          <a-spin :spinning="floading">
             <div class="sec-order">
-            <template v-for="(sedDetail, sindex) in orderList" :key="sindex">
+              <h4>主提单号</h4>
+              <template v-for="(sedDetail, sindex) in orderList" :key="sindex + 'f'">
                 <div class="order-box">
-                <a-checkbox class="check-btn" v-model:checked="sedDetail.checked" />
+                  <a-checkbox v-if="!sedDetail.isHBL" class="check-btn mb10" v-model:checked="sedDetail.checked" />
                   <span
                     class="order-label"
                     :class="{ active: sindex == editIndex }"
-                  @click.stop="changeOrder(sindex)"
+                    @click.stop="changeOrder(sindex, sedDetail)"
                   >
                     <a-tag
                       class="tag"
-                    v-if="sedDetail.state"
+                      v-if="sedDetail.state && !sedDetail.isHBL"
                       :color="sedDetail.state === '已直发' ? '#00CC00' : ''"
                       >{{ sedDetail.state }}</a-tag
-                  >>
+                    >
                     <template v-if="!sedDetail.isHBL">
-                    主提单号：{{ sedDetail.mblno || '请填写主提单号' }}
+                      {{ sedDetail.mblno || '请填写主提单号' }}
                     </template>
-                  <template v-else>
+                  </span>
-                    分提单号{{ sindex + 1 }}: {{ sedDetail.hblno || '请填写分单号' }}
+                </div>
+              </template>
+            </div>
+            <div class="mt15">
+              <h4>分提单号</h4>
+              <template v-for="(sedDetail, sindex) in orderList" :key="sindex">
+                <div class="order-box">
+                  <a-checkbox v-if="sedDetail.isHBL" class="check-btn mb10" v-model:checked="sedDetail.checked" />
+                  <span
+                    class="order-label"
+                    :class="{ active: sindex == editIndex }"
+                    @click.stop="changeOrder(sindex, sedDetail)"
+                  >
+                    <a-tag
+                      class="tag"
+                      v-if="sedDetail.state && sedDetail.isHBL"
+                      :color="sedDetail.state === '已直发' ? '#00CC00' : ''"
+                      >{{ sedDetail.state }}</a-tag
+                    >
+                    <template v-if="sedDetail.isHBL">
+                      {{ sedDetail.hblno || '请填写分单号' }}
                     </template>
                   </span>
                 </div>
               </template>
             </div>
+          </a-spin>
         </div>
-        <div class="pre-details">
+        <a-spin :spinning="floading" style="flex: 1">
           <a-form
             class="ds-detail-form"
             layout="vertical"
             ref="basicFrom"
-            :selfUpdate="true"
             size="small"
             :model="formState"
-            autocomplete="off"
           >
             <div class="ds-card">
               <h4>基本信息</h4>
@@ -96,7 +117,7 @@
                     label="主提单号"
                     name="mblno"
                   >
-                    <a-input v-model:value="formState.mblno" />
+                    <a-input v-model:value="formState.mblno" disabled/>
                   </a-form-item>
                 </a-col>
                 <a-col v-else :span="4">
@@ -174,7 +195,6 @@
                   >
                     <a-select
                       class="sft-select"
-                      placeholder="模版"
                       v-model:value="formState.shipperId"
                       @change="
                         (e) => {
@@ -204,7 +224,6 @@
                   >
                     <a-select
                       class="sft-select"
-                      placeholder="模版"
                       v-model:value="formState.consigneeId"
                       @change="
                         (e) => {
@@ -234,7 +253,6 @@
                   >
                     <a-select
                       class="sft-select"
-                      placeholder="模版"
                       v-model:value="formState.notifyPartyId"
                       @change="
                         (e) => {
@@ -464,7 +482,7 @@
                     <a-textarea
                       class="input-box"
                       v-model:value="formState.marks"
-                      :auto-size="{ minRows: 7, maxRows: 7 }"
+                      :auto-size="{ minRows: 12, maxRows: 12 }"
                     />
                   </a-form-item>
                 </a-col>
@@ -475,7 +493,7 @@
                   >
                     <a-textarea
                       v-model:value="formState.description"
-                      :auto-size="{ minRows: 7, maxRows: 7 }"
+                      :auto-size="{ minRows: 12, maxRows: 12 }"
                     />
                   </a-form-item>
                 </a-col>
@@ -622,13 +640,12 @@
               </a-row>
             </div>
             <div class="ds-card mt15">
-              <h4>集装箱信息</h4>
               <div class="flex" style="justify-content: space-between;">
-                <a-form-item
+                <div class="flex">
-                  label="场站"
+                  <h4>集装箱信息</h4>
-                  name="yardId"
+                  <div >
-                >
+                    <span style="font-size: 12px;" class="ml10">场站：</span>
-                  <a-select v-model:value="formState.yardId" style="width: 200px">
+                    <a-select v-model:value="formState.yardId" style="width: 100px">
                       <a-select-option
                         v-for="item in yardList"
                         :key="item.id"
@@ -637,8 +654,10 @@
                         {{ item.codeName }}
                       </a-select-option>
                     </a-select>
-                </a-form-item>
+                  </div>
+                </div>
                 <div>
+                  <div style="float: right">
                     <a-button type="link" @click="addCtn" class="pl0">
                       <span class="iconfont icon-new_document"></span>
                       新建
@@ -654,15 +673,6 @@
                   </div>
               </div>
               </div>
-            <div>
-                <a-col :span="24">
-                  <div class="mail-box">
-                    <div class="ctn-btn">
-                      <div class="import">
-                        
-                      </div>
-                    </div>
-                    <div class="table-box">
               <hot-table ref="hotTb" :data="list" :settings="settings">
                 <img
                   v-show="!list.length"
@@ -672,11 +682,8 @@
                 />
               </hot-table>
             </div>
-                  </div>
-                </a-col>
-            </div>
           </a-form>
-        </div>
+        </a-spin>
       </div>
       <a-modal
         width="50vw"
@@ -743,7 +750,7 @@
   } from '/@/views/operation/seaexport/api/BookingLedger'
   import { preOrderD } from '/@/views/operation/seaexport/detail/modules/preOrderColumns'
   import { useMessage } from '/@/hooks/web/useMessage'
-  const { notification } = useMessage()
+  const { notification, createMessage } = useMessage()
   import { useRoute } from 'vue-router'
   const route = useRoute()
   import { HotTable } from '@handsontable/vue3'
@@ -755,37 +762,6 @@
   })
   const openPreOrderShow = ref(false)
   const id = ref()
-  const labelCol = {
-    xs: { span: 12 },
-    sm: { span: 4 },
-    md: { span: 4 }
-  }
-  const wrapperCol = {
-    xs: { span: 24 },
-    sm: { span: 15 },
-    md: { span: 20 },
-  }
-  const labelCol2 = {
-    xs: { span: 24 },
-    sm: { span: 8 },
-    md: { span: 8 },
-  }
-  const wrapperCol2 = {
-    xs: { span: 24 },
-    sm: { span: 15 },
-    md: { span: 16 },
-  }
-
-  const labelCol3 = {
-    xs: { span: 24 },
-    sm: { span: 8 },
-    md: { span: 6 },
-  }
-  const wrapperCol3 = {
-    xs: { span: 24 },
-    sm: { span: 15 },
-    md: { span: 16 },
-  }
   // -----------------------弹窗相关------------------------
   function init() {
     openPreOrderShow.value = true
@@ -805,6 +781,11 @@
   const orderList = ref<any>([])
   const formState = ref<any>({})
   const editIndex = ref(0)
+  const floading = ref(false)
+  // 主题单号数据列表
+  const mainBillData = ref([])
+  // 分单号列表
+  const childBillData = ref([])
   // 获取列表数据
   function FngetPageESeaeEdi() {
     orderList.value.splice(0)
@@ -818,8 +799,10 @@
       },
       queryCondition: `[{"FieldName":"businessId","FieldValue":"${id.value}","ConditionalType":1}]`,
     }
+    floading.value = true
     GetShippingBillList(ApiData)
       .then((res) => {
+        floading.value = false
         if (res.succeeded) {
           if (res.data.length > 0) {
             res.data.forEach((e) => {
@@ -832,7 +815,7 @@
               if (e.mblno == route.query.mblno) {
                 isHBL = false
               }
-              orderList.value.push({ checked: true, isHBL, ...e })
+              orderList.value.push({ checked: false, isHBL, ...e })
             })
             formState.value = orderList.value[editIndex.value]
           } else {
@@ -858,7 +841,7 @@
         }
       })
       .catch((err) => {
-        console.log(err)
+        floading.value = false
       })
   }
   // 添加分单
@@ -888,10 +871,12 @@
         ApiData.yard = e.shortName
       }
     })
+    floading.value = true
     EditShippingBill(ApiData).then((res) => {
+      floading.value = false
       if (res.succeeded) {
         orderList.value[editIndex.value].id = res.data
-        notification.success({ message: res.message, duration: 3 })
+        createMessage.success(res.message)
       }
     })
   }
@@ -1000,10 +985,14 @@
     init()
   }
   // 点击列表
-  function changeOrder(index) {
+  function changeOrder(index, sedDetail) {
     orderList.value[editIndex.value] = formState.value
     editIndex.value = index
     formState.value = orderList.value[index]
+    orderList.value.forEach(item => {
+      item.checked = false
+    })
+    sedDetail.checked = true
     // GetShippingBillInfo({ id: formState.value.id }).then((res) => {
     //   if (res.succeeded) {
     //     notification.success({ message: res.message, duration: 3 })
@@ -1130,34 +1119,34 @@
     // },
     {
       title: '箱号',
-      width: 80,
+      width: 120,
       data: 'cntrNo',
     },
     {
       title: '封号',
-      width: 80,
+      width: 120,
       data: 'sealNo',
     },
     {
       title: '件数',
-      width: 80,
+      width: 120,
       data: 'pkgs',
     },
     {
       title: '毛重',
-      width: 80,
+      width: 120,
       data: 'kgs',
     },
     {
       title: '尺码',
-      width: 80,
+      width: 120,
       data: 'cbm',
     },
     // kindPkgsName
     // kindPkgs
     {
       title: '包装',
-      width: 120,
+      width: 150,
       data: 'kindPkgs',
       type: 'dropdown',
       // 下拉框数据，可以同步或者异步返回(异步需要process返回)