From 161d21cb188fa2a7b4108eea4ffd690805033b85 Mon Sep 17 00:00:00 2001
From: lijingjia <lijj_xl@163.com>
Date: Thu, 24 Oct 2024 09:28:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E5=93=81=E5=90=8D=E7=BB=B4=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   2 +-
 .../Form/src/components/ApiSelect.vue         |   4 +-
 .../seaexport/detail/modules/baseInfo.tsx     |   6 +
 .../seaexport/detail/modules/cargoInfo.vue    | 129 +++++++++++++++++-
 4 files changed, 135 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index babf7cb7..d06ed854 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
     />
     <title><%= title %></title>
     <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_ddosvr0ugmq.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_70xc4buj68p.css" />
   </head>
   <body>
     <script>
diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
index b316d4f9..62a9cc47 100644
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -7,7 +7,7 @@
     :showSearch="true"
     @dropdown-visible-change="handleFetch"
     @change="handleChange"
-:autoClearSearchValue="false"
+    :dropdownMatchSelectWidth="false"
     :optionLabelProp="props.showName ? 'showName' : 'label'"
   >
     <template v-for="item in Object.keys($slots)" #[item]="data">
@@ -33,7 +33,7 @@
     @dropdown-visible-change="handleFetch"
     @change="handleChange"
     @search="handleSearch"
-:autoClearSearchValue="false"
+    :dropdownMatchSelectWidth="false"
     :optionLabelProp="props.showName ? 'showName' : 'label'"
   >
     <template v-for="item in Object.keys($slots)" #[item]="data">
diff --git a/src/views/operation/seaexport/detail/modules/baseInfo.tsx b/src/views/operation/seaexport/detail/modules/baseInfo.tsx
index 46621b35..90798f12 100644
--- a/src/views/operation/seaexport/detail/modules/baseInfo.tsx
+++ b/src/views/operation/seaexport/detail/modules/baseInfo.tsx
@@ -1919,6 +1919,12 @@ export const cargoInfoFormSchema2: FormSchema[] = [
     component: 'Input',
     show: false,
   },
+  {
+    label: '',
+    field: 'ctnGoodsInfo',
+    component: 'Input',
+    show: false,
+  },
   {
     field: 'goodsName',
     label: '品名',
diff --git a/src/views/operation/seaexport/detail/modules/cargoInfo.vue b/src/views/operation/seaexport/detail/modules/cargoInfo.vue
index de10c8bb..a19fca28 100644
--- a/src/views/operation/seaexport/detail/modules/cargoInfo.vue
+++ b/src/views/operation/seaexport/detail/modules/cargoInfo.vue
@@ -25,8 +25,64 @@
           </a-col>
           <a-col :span="9">
             <BasicForm @register="registerForm2" @submit="submit">
-              <template #goodsName>
+              <template #goodsName="{ model }">
                 <span class="iconfont icon-jichupeizhi" @click="openGoodsModel"></span>
+                <span class="iconfont icon-ic_search24px" @click="openGoodsNameModel"></span>
+                <span v-show="model?.ctnGoodsInfo?.length" class="more-goods">多个</span>
+                <!-- 多品名添加 -->
+                <a-modal
+                  :visible="goodsNameVisible"
+                  :maskClosable="false"
+                  title="多品名"
+                  width="60%"
+                  :closable="true"
+                  @cancel="goodsNameVisible = false"
+                >
+                  <a-button
+                    class="goodsbtn"
+                    type="link"
+                    @click="handleCreate(ctnGoodsInfo)"
+                  >
+                    <span class="iconfont icon-new_document"></span>
+                    添加
+                  </a-button>
+                  <a-form layout="vertical" class="ant-form-small">
+                    <a-row :gutter="15">
+                      <a-col :span="12" v-for="(item, index) in ctnGoodsInfo" :key="index + 'goodsName'" class="ctn-price-item">
+                        <div class="flex ds-form-detail">
+                          <div style="width: 40%">
+                            <a-form-item label="品名">
+                              <a-select
+                                v-model:value="item.goodsName"
+                                show-search
+                                placeholder="请检索选择"
+                                size="small"
+                                :default-active-first-option="false"
+                                :show-arrow="false"
+                                :filter-option="false"
+                                :not-found-content="null"
+                                :options="goodsData"
+                                @focus="handleFocus(index)"
+                                @search="handleSearch"
+                                @change="handleChange"
+                              ></a-select>
+                            </a-form-item>
+                          </div>
+                          <div style="width: 40%; margin-left: 2%; position: relative;">
+                            <span @click="deleteGoods(model.ctnGoodsInfo, index)" class="iconfont icon-weiwancheng-copy" style="position: absolute; right: -28px; top: 25px; color: #BA3849; cursor: pointer;"></span>
+                            <a-form-item label="HSCode">
+                              <a-input v-model:value="item.hsCode" size="small" />
+                            </a-form-item>
+                          </div>
+                        </div>
+                      </a-col>
+                    </a-row>
+                  </a-form>
+                  <template #footer>
+                    <a-button key="back" @click="goodsNameVisible = false">取 消</a-button>
+                    <a-button key="submit" type="primary" @click="handleOk">确 定</a-button>
+                  </template>
+                </a-modal>
               </template>
             </BasicForm>
           </a-col>
@@ -82,6 +138,7 @@
         </BasicForm>
       </a-col>
     </a-row>
+    <!-- 品名维护 -->
     <a-modal
       :visible="visible"
       :maskClosable="false"
@@ -107,7 +164,7 @@
   import { useRoute } from 'vue-router'
   import { getDictOption } from '/@/utils/dictUtil'
   import emitter from '/@/utils/Bus'
-  import { BatchDelBusinessCtnPrice } from '/@/views/operation/seaexport/api/BookingLedger'
+  import { BatchDelBusinessCtnPrice, GetClientGoodsList } from '/@/views/operation/seaexport/api/BookingLedger'
   import { useOptionsStore } from '/@/store/modules/options'
   import GoodsTable from '/@/views/baseinfo/goods/index.vue'
   import { GetCtnSelectList } from '/@/api/common/index'
@@ -138,11 +195,57 @@
       return '普通货'
     }
   })
+  const goodsData = ref([])
+  const gIndex = ref(0)
+  const handleFocus = (v) => {
+    gIndex.value = v
+  }
+  const handleSearch  = (val) => {
+    const postData = { queryKey: val }
+    GetClientGoodsList(postData).then(res => {
+      goodsData.value = res.data.map(item => {
+        return {
+          label: item.goodName,
+          value: item.goodName,
+          id: item.id,
+          hsCode: item.hsCode
+        }
+      })
+    })
+    // value.value = val;
+    // fetch(val, (d: any[]) => (data.value = d));
+  };
   // 品名弹窗
   const visible = ref(false)
   const openGoodsModel = () => {
     visible.value = true
   }
+  // 多品名添加
+  const goodsNameVisible = ref(false)
+  const openGoodsNameModel = () => {
+    goodsNameVisible.value = true
+    const data = getFieldsValue2()
+    console.log(data)
+    let gData = [{}]
+    if (data.ctnGoodsInfo.length != 0) gData = data.ctnGoodsInfo
+    ctnGoodsInfo.value = gData
+  }
+  const handleOk = () => {
+    console.log(ctnGoodsInfo.value)
+    setFieldsValue2({
+      ctnGoodsInfo: ctnGoodsInfo.value
+    })
+    goodsNameVisible.value = false
+  }
+  const handleChange = (v, obj) => {
+    ctnGoodsInfo.value[gIndex.value]['businessId'] = props.details.id
+    ctnGoodsInfo.value[gIndex.value]['hsCode'] = obj.hsCode
+    ctnGoodsInfo.value[gIndex.value]['goodsId'] = obj.id
+  }
+  const ctnGoodsInfo = ref([{}])
+  const deleteGoods = (list, index) => {
+    list.splice(index, 1)
+  }
   // 切换货物标识
   const toggleCargo = (v) => {
     cargoId.value = v
@@ -574,6 +677,10 @@
       ...getFieldsValue4(),
     }
   }
+  // 添加多品名
+  const handleCreate = (arr) => {
+    arr.push({})
+  }
   // 删除箱型价格
   const deleteCtnPrice = (model, index, item) => {
     if (item.id) {
@@ -633,7 +740,7 @@
       height: 130px;
     }
   }
-  .icon-jichupeizhi {
+  .icon-jichupeizhi, .icon-ic_search24px {
     float: right;
     color: #257AFA;
     cursor: pointer;
@@ -692,5 +799,21 @@
   .ctn-price-item:nth-child(1), .ctn-price-item:nth-child(2) {
     margin-right: 2%;
   }
+  .more-goods {
+    font-size: 10px;
+    display: inline-block;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+    background: #FF8D1A;
+    padding: 0 5px;
+    border-radius: 30px;
+    float: right;
+    margin-right: 6px;
+  }
+}
+.goodsbtn {
+  position: absolute;
+  top: 27px;
+  left: 85px;
 }
 </style>
