重构海运

src/components/CostEntry/index.vue

@@ -6,7 +6,7 @@
 <template>
   <div>
     <!-- 主单信息组件 -->
-    <MainInfo :data="data"></MainInfo>
+    <MainInfo :data="details"></MainInfo>
     <!-- 应收表格 -->
     <FeeTable tbType="receive" :broData="broPayData" :id="data.id" @broInsert="broReceive"></FeeTable>
     <!-- 应付表格 -->
@@ -25,7 +25,8 @@
   const props = defineProps({
     details: { type: [Object, Array] }
   })
-  const data = ref([])
+  const data = ref(null)
+  // data.value = props.details
   // 应收传到应付的数据
   const broReceiveData = ref([])
   // 应付传到应收的数据
@@ -39,10 +40,12 @@
     broPayData.value = v
   }
   watch(
-   () => props.details,
+    () => props.details,
     (val) => {
+      console.log(val)
       data.value = val
-    } 
+    },
+    { immediate: true, deep: true }
   )
   // export default defineComponent({
   //   name: 'CostEntry',

src/components/CostEntry/mainInfo.vue

@@ -57,7 +57,8 @@
           }
         }
       })
-    }
+    },
+    { immediate: true, deep: true }
   )
 </script>
 

src/layouts/page/index.vue

@@ -54,6 +54,7 @@
       const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab))
 
       const getCaches = computed((): string[] => {
+        console.log(tabStore.getCachedTabList)
         // if (!unref(getOpenKeepAlive)) {
         //   return []
         // }

src/styles/common.scss

@@ -37,6 +37,12 @@ h5 {
   .ant-form-item {
     margin-bottom: 15px;
   }
+  .ant-form-item-control-input-content {
+    white-space: nowrap;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
   .ant-form-item-label {
     padding: 0!important;
     label {
@@ -140,3 +146,32 @@ h5 {
 .mr15 {
   margin-right: 15px!important;
 }
+
+// 表格状态使用
+.ds-green-tag, .ds-blue-tag, .ds-orange-tag, .ds-red-tag, .ds-purple-tag {
+  padding: 2px 10px 3px;
+  border-radius: 30px;
+  font-size: 13px;
+  color: #ffffff;
+  display: inline-block;
+}
+
+.ds-green-tag {
+  background-color: #9acd32;
+}
+
+.ds-blue-tag {
+  background-color: #096dd9;
+}
+
+.ds-orange-tag {
+  background-color: #d46b08;
+}
+
+.ds-red-tag {
+  background-color: #ff2626;
+}
+
+.ds-purple-tag {
+  background-color: #531dab;
+}

src/views/operation/seaexport/components/SelectTextArea.vue

@@ -1,45 +1,67 @@
 <template>
-  <div class="sea-select-textarea flex">
+  <div class="sea-select-textarea">
-    <div class="name">
+    <div class="flex">
-      <span @click="handleOpen(2)" class="copy-btn iconfont icon-bianji" :style="{ fontSize: '12px' }"></span>
+      <div class="name">
-      {{ props.label }}
+        <span @click="handleOpen(2)" class="copy-btn iconfont icon-bianji" :style="{ fontSize: '12px' }"></span>
+        {{ props.label }}
+      </div>
+      <a-select
+        ref="select"
+        v-model:value="company"
+        style="width: 100px;"
+        placeholder="请选择"
+        optionLabelProp="label"
+        @change="handleChange"
+      >
+        <a-select-option
+          v-for="item in companyList"
+          :key="item.id" :value="item.id"
+          :label="item.shortName"
+          :title="`${item.shortName}(${item.codeName})`"
+          :blContent="item.blContent"
+        >
+          {{ item.shortName }} ({{ item.codeName }})
+        </a-select-option>
+      </a-select>
+
+      <!-- <selectView
+        class="select-view"
+        type="Id"
+        ref="consigneenameInput"
+        :defaultVal="Id"
+        :searchApi="RsearchApi()"
+        showCode="id"
+        :showLabel="['shortName']"
+        @change="getSelectViewRes"
+      ></selectView> -->
+      <!-- <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('Content')">
+        保存
+      </a-button> -->
+      <div class="right">
+        <!-- <span class="btn-circle" @click="spliceMore('Content')" :style="{ fontSize: '14px' }">*</span> -->
+        <span class="btn" @click="changeCode(30, 'Content')">30</span>
+        <span class="btn" @click="changeCode(35, 'Content')">35</span>
+        <span class="btn" @click="changeCode(40, 'Content')">40</span>
+      </div>
     </div>
-    <selectView
+    <div class="bottom">
-      class="select-view"
+      <textareaView
-      type="Id"
+        id="consignee-scroll"
-      ref="consigneenameInput"
+        :parentVal="Content"
-      :defaultVal="Id"
+        type="Content"
-      :searchApi="RsearchApi()"
+        :openToCDB="true"
-      showCode="id"
+        @getTextareaChange="getTextareaChange"
-      :showLabel="['shortName']"
+      />
-      @change="getSelectViewRes"
+      <!-- <div class="line-count" id="consignee-scroll-right" v-if="Content.length > 0">
-    ></selectView>
+        <div v-for="(num, index) in Content.split('\n')" :key="index">{{ num.length }}</div>
-    <!-- <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('Content')">
+      </div> -->
-      保存
-    </a-button> -->
-    <div class="right">
-      <span class="btn-circle" @click="spliceMore('Content')" :style="{ fontSize: '14px' }">*</span>
-      <span class="btn" @click="changeCode(30, 'Content')">30</span>
-      <span class="btn" @click="changeCode(35, 'Content')">35</span>
-      <span class="btn" @click="changeCode(40, 'Content')">40</span>
     </div>
   </div>
-  <div class="bottom">
-    <textareaView
-      id="consignee-scroll"
-      :parentVal="Content"
-      type="Content"
-      :openToCDB="true"
-      @getTextareaChange="getTextareaChange"
-    />
-    <!-- <div class="line-count" id="consignee-scroll-right" v-if="Content.length > 0">
-      <div v-for="(num, index) in Content.split('\n')" :key="index">{{ num.length }}</div>
-    </div> -->
-  </div>
 </template>
 <script lang="ts" setup>
   import { ref, watch } from 'vue'
-  import selectView from '../detail/components/selectView.vue'
+  import { GetShipperClientList, GetConsigneeClientList, GetNotifyPartyClientList } from '/@/views/operation/seaexport/api/BookingLedger'
+  // import selectView from '../detail/components/selectView.vue'
   import textareaView from '../detail/components/textareaView.vue'
   const props = defineProps({
     details: {
@@ -63,7 +85,7 @@
     },
     {
       deep: true,
-    },
+    }
   )
   const emit = defineEmits(['spliceMore', 'Change'])
   const visible = ref(false)
@@ -75,6 +97,27 @@
   const modelVisible = ref(false)
   const modelType = ref('')
   const modelContent = ref('')
+  const company = ref()
+  // 往来单位下拉数据
+  const companyList = ref([])
+  // 页面初始化下拉数据
+  const init = async () => {
+    if (props.field == 'shipper') {
+      const res = await GetShipperClientList()
+      companyList.value = res.data
+      console.log(res)
+    } else if (props.field == 'consignee') {
+      const res = await GetConsigneeClientList()
+      companyList.value = res.data
+    } else {
+      const res = await GetNotifyPartyClientList()
+      companyList.value = res.data
+    }
+  }
+  init()
+  const handleChange = (v, obj) => {
+    Content.value = obj.blContent
+  }
   function handleOpen(type) {
     visible.value = true
     modalType.value = type
@@ -194,6 +237,7 @@
     subValue = subValue.replace(/[\n]+/g, '\n')
     subValue = subValue.replace(/[ ]+[\n]+/g, '\n')
     subValue = subValue.replace(/[ ]+$/g, '')
+    console.log(subValue, 2222)
     Content.value = subValue
   }
 </script>
@@ -208,129 +252,26 @@
     cursor: pointer;
     color: #0057FF;
   }
-    margin-top: 4px;
+  .ant-select {
-    margin-bottom: 14px;
+    position: relative;
-    height: 26px;
+    top: -5px;
-    line-height: 26px;
+    left: 5px;
-    overflow: hidden;
+  }
-    display: flex;
+  .right {
-    .name {
+    margin-left: 20px;
-      display: inline-block;
+    position: relative;
-      font-size: 13px;
+    top: -5px;
-      margin-right: 10px;
-      color: #000;
-      .iconfont {
-        margin-right: 4px;
-        font-weight: 600;
-      }
-    }
-    .save-btn {
-      height: 24px;
-      line-height: 22px;
-      margin-left: 10px;
-      margin-right: 10px;
-      color: #000;
-      span {
-        margin-left: 4px !important;
-      }
-    }
-    .right {
-      float: right;
-      margin-top: 2px;
-      margin-right: 25px;
-    }
-    .customer-input {
-      flex: 1;
-    }
     .btn {
-      width: 20px;
+      margin-right: 5px;
-      height: 20px;
-      display: inline-block;
-      // background: #c1e0ff;
-      color: @primary-color;
-      text-align: center;
-      line-height: 20px;
-      font-size: 12px;
-      margin-left: 4px;
-      cursor: pointer;
-      position: relative;
-      vertical-align: top;
-      margin-top: 0;
-      &::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: @primary-color;
-        opacity: 0.2;
-        z-index: 0;
-      }
-    }
-    .btn-circle {
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
       display: inline-block;
-      // background: #c1e0ff;
-      color: @primary-color;
       text-align: center;
-      line-height: 24px;
-      font-size: 12px;
-      margin-right: 4px;
       cursor: pointer;
-      margin-top: 2px;
+      height: 28px;
-      position: relative;
+      width: 28px;
-      vertical-align: top;
+      line-height: 26px;
-      margin-top: 0;
+      background: #c1e0ff;
       border-radius: 50%;
-      &::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: @primary-color;
-        opacity: 0.2;
-        z-index: 0;
-        border-radius: 50%;
-      }
     }
   }
-  .bottom {
-    display: flex;
-    margin-bottom: 14px;
-    .input-box {
-      margin-top: 10px;
-      flex: 1;
-      font-size: 12px;
-      line-height: 20px;
-    }
-    textarea {
-      line-height: 22px;
-    }
-    .line-count {
-      width: 24px;
-      padding-top: 3px;
-      height: 130px;
-      overflow: auto;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      // max-height: 192px;
-      // overflow-y: auto;
-      div {
-        text-align: right;
-        height: 22px;
-        line-height: 22px;
-        font-size: 12px;
-        color: #999;
-      }
-    }
-  
 }
 </style>

src/views/operation/seaexport/detail/components/textareaView.vue

@@ -43,7 +43,7 @@
       value.value = ToCDB(value.value).toUpperCase()
       emit('getTextareaChange', {
         type: props.type,
-        value: value.value,
+        value: value.value
       })
     }
   }
@@ -54,7 +54,7 @@
     }, 800)
     emit('getTextareaChange', {
       type: props.type,
-      value: value.value,
+      value: value.value
     })
   }
   function ToCDB(str) {

src/views/operation/seaexport/detail/index.vue

@@ -81,7 +81,7 @@
                   ></mastetMore>
                 </a-tab-pane>
                 <a-tab-pane key="5-5" tab="费用录入" v-if="$route.query.id">
-                  <costEntry v-if="mainOrderActiveKey == '5-5'" :details="bookingDetails"></costEntry>
+                  <costEntry :details="bookingDetails"></costEntry>
                 </a-tab-pane>
               </a-tabs>
             </a-spin>
@@ -166,7 +166,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
   import { ref, reactive, getCurrentInstance, h, watch, onMounted, nextTick } from 'vue'
   import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
   import { useAppStore } from '/@/store/modules/app'

src/views/operation/seaexport/detail/modules/baseInfo.tsx

@@ -189,26 +189,29 @@ export const basicInfoFormSchema: FormSchema[] = [
           return new Promise((resolve) => {
             GetControllerClientList().then((res) => {
               res.data.forEach((e) => {
-                e.label = `${e.codeName}/${e.shortName}`
+                e.codeName = `${e.shortName}(${e.codeName})`
               })
               resolve(res)
             })
           })
         },
-        labelField: 'shortName',
+        labelField: 'codeName',
         valueField: 'id',
         resultField: 'data',
         filterOption: (input: string, option: any) => {
-          let RData = false
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          if (option.codeName.toLowerCase().indexOf(input.toLowerCase()) >= 0) {
-            RData = true
-          } else if (option.shortName.toLowerCase().indexOf(input.toLowerCase()) >= 0) {
-            RData = true
-          } else if (option.enShortName.toLowerCase().indexOf(input.toLowerCase()) >= 0) {
-            RData = true
-          }
-          return RData
         },
+        // filterOption: (input: string, option: any) => {
+        //   let RData = false
+        //   if (option.codeName.toLowerCase().indexOf(input.toLowerCase()) >= 0) {
+        //     RData = true
+        //   } else if (option.shortName.toLowerCase().indexOf(input.toLowerCase()) >= 0) {
+        //     RData = true
+        //   } else if (option.enShortName.toLowerCase().indexOf(input.toLowerCase()) >= 0) {
+        //     RData = true
+        //   }
+        //   return RData
+        // },
         onChange: (e, obj) => {
           if (obj) {
             formModel.customerName = obj.label
@@ -1150,7 +1153,6 @@ export const mailingInfoFormSchemaR: FormSchema[] = [
         labelField: 'ediCode',
         valueField: 'id',
         resultField: 'data',
-        immediate: false,
         filterOption: (input: string, option: any) => {
           return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
         },
@@ -1255,7 +1257,6 @@ export const mailingInfoFormSchemaR: FormSchema[] = [
         labelField: 'portName',
         valueField: 'id',
         resultField: 'data',
-        immediate: false,
         filterOption: (input: string, option: any) => {
           return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
         },
@@ -1346,7 +1347,6 @@ export const mailingInfoFormSchemaR: FormSchema[] = [
             })
           })
         },
-        immediate: false,
         labelField: 'ediCode',
         valueField: 'id',
         resultField: 'data',
@@ -1432,7 +1432,6 @@ export const mailingInfoFormSchemaR: FormSchema[] = [
         labelField: 'ediCode',
         valueField: 'id',
         resultField: 'data',
-        immediate: false,
         filterOption: (input: string, option: any) => {
           return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
         },
@@ -1481,7 +1480,6 @@ export const mailingInfoFormSchemaR: FormSchema[] = [
         labelField: 'shortName',
         valueField: 'id',
         resultField: 'data',
-        immediate: false,
         filterOption: (input: string, option: any) => {
           return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }
@@ -1517,7 +1515,6 @@ export const mailingInfoFormSchemaR: FormSchema[] = [
           })
         },
         labelField: 'ediCode',
-        immediate: false,
         valueField: 'id',
         resultField: 'data',
         filterOption: (input: string, option: any) => {
@@ -2251,8 +2248,8 @@ export const cargoInfoFormSchema2: FormSchema[] = [
         allowClear: true,
         showSearch: true,
         api: GetPackageSelectList,
-        labelField: 'label',
+        labelField: 'packageName',
-        valueField: 'value',
+        valueField: 'id',
         resultField: 'data',
         filterOption: (input: string, option: any) => {
           return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

src/views/operation/seaexport/index.vue

@@ -16,19 +16,19 @@
       <template v-slot:bodyCell="{ column, record }">
         <!-- 应收费用 -->
         <template v-if="column.dataIndex == 'arFeeStatus'">
-          <a-tag v-if="record.arFeeStatus == 0" color="green">{{ FeeStatus[record.arFeeStatus] }}</a-tag>
+          <span v-if="record.arFeeStatus == 0" class="ds-green-tag">{{ FeeStatus[record.arFeeStatus] }}</span>
-          <a-tag v-else-if="record.arFeeStatus == 1" color="blue">{{ FeeStatus[record.arFeeStatus] }}</a-tag>
+          <span v-else-if="record.arFeeStatus == 1" class="ds-blue-tag">{{ FeeStatus[record.arFeeStatus] }}</span>
-          <a-tag v-else-if="/^2|3|4|5|6$/.test(record.arFeeStatus)" color="orange">{{ FeeStatus[record.arFeeStatus] }}</a-tag>
+          <span v-else-if="/^2|3|4|5|6$/.test(record.arFeeStatus)" class="ds-orange-tag">{{ FeeStatus[record.arFeeStatus] }}</span>
-          <a-tag v-else-if="/^7|8$/.test(record.arFeeStatus)" color="red">{{ FeeStatus[record.arFeeStatus] }}</a-tag>
+          <span v-else-if="/^7|8$/.test(record.arFeeStatus)" class="ds-red-tag">{{ FeeStatus[record.arFeeStatus] }}</span>
-          <a-tag v-else color="purple">{{ FeeStatus[record.arFeeStatus] }}</a-tag>
+          <span v-else class="ds-purple-tag">{{ FeeStatus[record.arFeeStatus] }}</span>
         </template>
          <!-- 应付费用 -->
         <template v-if="column.dataIndex == 'apFeeStatus'">
-          <a-tag v-if="record.apFeeStatus == 0" color="green">{{ FeeStatus[record.apFeeStatus] }}</a-tag>
+          <span v-if="record.apFeeStatus == 0" class="ds-green-tag">{{ FeeStatus[record.apFeeStatus] }}</span>
-          <a-tag v-else-if="record.apFeeStatus == 1" color="blue">{{ FeeStatus[record.apFeeStatus] }}</a-tag>
+          <span v-else-if="record.apFeeStatus == 1" class="ds-blue-tag">{{ FeeStatus[record.apFeeStatus] }}</span>
-          <a-tag v-else-if="/^2|3|4|5|6$/.test(record.apFeeStatus)" color="orange">{{ FeeStatus[record.apFeeStatus] }}</a-tag>
+          <span v-else-if="/^2|3|4|5|6$/.test(record.apFeeStatus)" class="ds-orange-tag">{{ FeeStatus[record.apFeeStatus] }}</span>
-          <a-tag v-else-if="/^7|8$/.test(record.apFeeStatus)" color="red">{{ FeeStatus[record.apFeeStatus] }}</a-tag>
+          <span v-else-if="/^7|8$/.test(record.apFeeStatus)" class="ds-red-tag">{{ FeeStatus[record.apFeeStatus] }}</span>
-          <a-tag v-else color="purple">{{ FeeStatus[record.apFeeStatus] }}</a-tag>
+          <span v-else class="ds-purple-tag">{{ FeeStatus[record.apFeeStatus] }}</span>
         </template>
         <!-- 主题单号 -->
         <template v-if="column.dataIndex == 'mblno'">
@@ -146,7 +146,7 @@
     </a-modal>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="ts" setup name="海运出口">
   import TableActionBar from './components/tableActionBar.vue'
   import ConditionFilter from '/@/components/Condition/index.vue'
   import { onMounted, ref } from 'vue'