diff --git a/src/api/provider.js b/src/api/provider.js
index c7de50d..ede21d5 100644
--- a/src/api/provider.js
+++ b/src/api/provider.js
@@ -50,6 +50,6 @@ export const FetchProviderArticleAts = (providerArticle)=>{
     return provider.post(`/${providerArticle.providerId}/ats/fetch/${providerArticle.skuID}`)
 }
 
-export const FetchProviderArticleDetail = (pid)=>{
-    return provider.post(`/${providerArticle.providerId}/detail/fetch/${pid}`)
+export const FetchProviderArticleDetail = (providerId, pid)=>{
+    return provider.post(`/${providerId}/detail/fetch/${pid}`)
 }
\ No newline at end of file
diff --git a/src/componse/fetch-article/fetch-article-panel.vue b/src/componse/fetch-article/fetch-article-panel.vue
new file mode 100644
index 0000000..7d16c47
--- /dev/null
+++ b/src/componse/fetch-article/fetch-article-panel.vue
@@ -0,0 +1,124 @@
+<template>
+  <a-modal v-model:open="open" title="添加商品" @ok="handleOk" centered @cancel="onCancel" :maskClosable="false" :keyboard="false" :confirmLoading="confirmLoading">
+    <a-form
+        :model="data"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 16 }"
+        autocomplete="off"
+        ref="refForm"
+    >
+      <a-form-item
+          label="供应商"
+          name="providerId"
+          :rules="[{ required: true, message: '请选择供应商' }]"
+      >
+        <a-select v-model:value="data.providerId">
+          <a-select-option v-for="provider in providers" :value="provider.providerId">{{provider.name}}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+          label="产品id"
+          name="pid"
+          :rules="[{ required: true, message: '请输入产品id' }]"
+      >
+        <a-input v-model:value="data.pid" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script setup>
+
+import {computed, onMounted, reactive, ref} from "vue";
+import {FetchProviderArticleDetail, FindProviders} from "@/api/provider.js";
+import {message} from "ant-design-vue";
+
+onMounted(()=>{
+  loadProviders()
+})
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['update:visible', 'reload'])
+
+const open = computed({
+  get(){
+    return props.visible
+  },
+  set(value){
+    emits('update:visible', value)
+  }
+})
+
+const handleOk = ()=>{
+  if(refForm.value){
+    refForm.value.validate().then(values=>{
+      confirmLoading.value = true
+      FetchProviderArticleDetail(data.providerId, data.pid).then(res=>{
+        if(res.code === 200){
+          message.success("添加成功")
+        }else{
+          message.error(res.msg)
+        }
+      }).catch(err => {
+        message.error("添加失败")
+        console.log(err)
+      }).finally(()=>{
+        confirmLoading.value = false
+        emits('update:visible', false)
+      })
+    })
+  }else{
+    message.error('refForm未获取')
+  }
+}
+
+const data = reactive({
+  pid: '',
+  providerId: '',
+})
+
+const providers = ref([])
+
+
+const loadProviders = ()=>{
+  FindProviders({}).then(res=>{
+    if(res.code !== 200) {
+      message.error('获取供应商列表失败')
+      console.log(res)
+    }else{
+      providers.value = res.data
+    }
+  }).catch(err=>{
+    message.error('获取供应商列表失败')
+    console.log(err)
+  })
+}
+
+const refForm = ref(null)
+
+const onCancel=()=>{
+  if (refForm.value){
+    refForm.value.resetFields()
+  }
+}
+
+const confirmLoading = ref(false)
+
+// const selectedProvider = computed({
+//   get(){
+//     return providers.value.find(p=>p.providerId === data.providerId)
+//   },
+//   set(value){
+//     data.providerId = value.providerId
+//   }
+// })
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/componse/provider-article/provider-article-panel.vue b/src/componse/provider-article/provider-article-panel.vue
index a8d9590..08b1f3b 100644
--- a/src/componse/provider-article/provider-article-panel.vue
+++ b/src/componse/provider-article/provider-article-panel.vue
@@ -32,12 +32,12 @@
                       {{provider.cost.calMark}}
                     </span>
             </template>
-            <div>当前到手价：￥ {{provider.cost.finalPrice || '-'}}</div>
+            <div>当前到手价：￥ {{provider.cost.finalPrice.toFixed(2) || '-'}}</div>
           </a-popover>
           <a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">拉取价格</a-button>
         </div>
         <div class="w-full flex items-center space-x-4" v-else>
-          <div>当前到手价：￥ {{provider.cost.finalPrice || '-'}}</div>
+          <div>当前到手价：￥ {{provider.cost.finalPrice.toFixed(2) || '-'}}</div>
           <a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">拉取价格</a-button>
         </div>
         <div class="w-full flex items-center space-x-4">
diff --git a/src/views/article/index.vue b/src/views/article/index.vue
index e8c1214..39107a7 100644
--- a/src/views/article/index.vue
+++ b/src/views/article/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
     <div class="flex justify-between">
-      <div></div>
+      <div>
+        <a-button type="primary" @click="fetchArticle.visible=true">添加商品</a-button>
+      </div>
       <div class="flex space-x-4">
         <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
         <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
@@ -46,6 +48,7 @@
     </div>
     <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" v-model:page-size="query.size" :total="data.total" show-less-items @change="list"/>
   </div>
+  <fetch-article-panel v-model:visible="fetchArticle.visible" @reload="list"></fetch-article-panel>
 </template>
 <script setup>
 
@@ -54,6 +57,7 @@ import {LoadingOutlined} from "@ant-design/icons-vue";
 import {message} from "ant-design-vue";
 import {ListArticles, UpdateArticle} from "@/api/articles.js";
 import {useRouter} from "vue-router";
+import FetchArticlePanel from "@/componse/fetch-article/fetch-article-panel.vue";
 
 const query = reactive({
   keyword: "",
@@ -203,6 +207,12 @@ const tableChange = (pagination, filters, sorter, { action, currentDataSource })
   list()
 }
 
+
+//添加商品
+const fetchArticle = reactive({
+  visible: false,
+})
+
 </script>
 <style scoped>