feat 添加查询库存工具

src/api/provider.js

@@ -50,6 +50,10 @@ export const FetchProviderArticleAts = (providerArticle)=>{
     return provider.post(`/${providerArticle.providerId}/ats/fetch/${providerArticle.skuID}`)
 }
 
+export const GetProviderArticleAts = (providerId, pid)=>{
+    return provider.get(`/${providerId}/ats/${pid}`)
+}
+
 export const FetchProviderArticleDetail = (providerId, pid)=>{
     return provider.post(`/${providerId}/detail/fetch/${pid}`)
 }

src/componse/fetch-article/fetch-article-panel.vue

@@ -108,15 +108,6 @@ const onCancel=()=>{
 }
 
 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>

src/componse/tools/call-ats-tool.vue

@@ -0,0 +1,112 @@
+<template>
+  <a-card  bordered hoverable class="w-150px" @click="open=true">
+    <template #title>
+      <div class="text-xxl">
+        查询库存
+      </div>
+    </template>
+    <div class="flex  space-x-2 items-center">
+      <CopyrightCircleOutlined class="text-lg" />
+      <span>库存</span>
+    </div>
+  </a-card>
+  <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 {CopyrightCircleOutlined} from "@ant-design/icons-vue";
+import {onMounted, reactive, ref} from "vue";
+import {FindProviders, GetProviderArticleAts} from "@/api/provider.js";
+import {message} from "ant-design-vue";
+
+onMounted(()=>{
+  loadProviders()
+})
+
+const open = ref(false)
+
+const handleOk = ()=>{
+  if(refForm.value){
+    refForm.value.validate().then(values=>{
+      confirmLoading.value = true
+      GetProviderArticleAts(data.providerId, data.pid).then(res=>{
+        if(res.code === 200){
+          message.success(`库存为${res.data}`)
+        }else{
+          message.error(res.msg)
+        }
+      }).catch(err => {
+        message.error("添加失败")
+        console.log(err)
+      }).finally(()=>{
+        confirmLoading.value = false
+        open.value = 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)
+
+
+</script>
+
+<style scoped>
+
+</style>

src/routers/index.js

@@ -1,7 +1,6 @@
 import {createRouter, createWebHashHistory} from "vue-router";
 import { routes } from 'vue-router/auto-routes';
 
-
 const router = createRouter({
     history: createWebHashHistory(),
     routes:[

src/views/layout/Aside.vue

@@ -8,7 +8,7 @@
   ></a-menu>
 </template>
 <script setup>
-import {AccountBookOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined} from "@ant-design/icons-vue";
+import {AccountBookOutlined, BellOutlined, DollarCircleOutlined, HddOutlined, DeploymentUnitOutlined, ToolOutlined} from "@ant-design/icons-vue";
 import {h} from "vue";
 import {useRouter} from "vue-router";
 
@@ -51,6 +51,12 @@ const items = [
     icon: () => h(DeploymentUnitOutlined),
     label: '销售商',
     title: '销售商',
+  },
+  {
+    key: 'tools',
+    icon: () => h(ToolOutlined),
+    label: '工具',
+    title: '工具',
   }
 ]
 

src/views/tools/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="h-full  m-4 bg-gray-50 rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
+    <a-flex wrap="wrap" >
+      <call-ats-tool></call-ats-tool>
+    </a-flex>
+  </div>
+</template>
+<script setup>
+
+import CallAtsTool from "@/componse/tools/call-ats-tool.vue";
+</script>
+
+<style scoped>
+
+</style>