多品名维护

1 month ago · 161d21cb18
parent c31c069381
commit 161d21cb18
4 changed files with 135 additions and 6 deletions
--- 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>
--- 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">
--- 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: '品名',
--- 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>