update:新增商品导入管理

src/api/goodsTool.js

@@ -45,6 +45,28 @@ export async function downloadTempGoods() {
     responseType: 'blob',
   })
 }
+//商品导入 下载三个模板
+export async function downloadBrandTemplate() {
+  return request({
+    url: '/admin/shop/shop-sync-import/brandTemplate',
+    method: 'get',
+    responseType: 'blob',
+  })
+}
+export async function downloadCategoryTemplate() {
+  return request({
+    url: '/admin/shop/shop-sync-import/categoryTemplate',
+    method: 'get',
+    responseType: 'blob',
+  })
+}
+export async function downloadGoodsTemplate() {
+  return request({
+    url: '/admin/shop/shop-sync-import/shopTemplate',
+    method: 'get',
+    responseType: 'blob',
+  })
+}
 export async function exportUncheckShopData(storeId) {
   return request({
     url: '/admin/shop/shop-sync-productMapper/exportUncheckShopData',
@@ -128,6 +150,37 @@ export async function importGoodsData(data) {
     data,
   })
 }
+//商品导入的三个导入
+export async function categoryImportData(data) {
+  return request({
+    url: '/admin/shop/shop-sync-import/categoryImportData',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data', 
+    },
+    data,
+  })
+}
+export async function brandImportData(data) {
+  return request({
+    url: '/admin/shop/shop-sync-import/brandImportData',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data', 
+    },
+    data,
+  })
+}
+export async function shopImportData(data) {
+  return request({
+    url: '/admin/shop/shop-sync-import/shopImportData',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data', 
+    },
+    data,
+  })
+}
 
 export async function syncShopImages(data) {
   data = stringify(data)
@@ -169,5 +222,11 @@ export default {
   importGoodsData,
   syncShopImages,
   getImgList,
-  saveBatchBarcode
+  saveBatchBarcode,
+  downloadBrandTemplate,
+  downloadCategoryTemplate,
+  downloadGoodsTemplate,
+  categoryImportData,
+  brandImportData,
+  shopImportData
 }

src/api/syncApp.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+import { stringify } from 'qs'
+
+export async function getSyncAppList() {
+  return request({
+    url: '/admin/shop/sync-app/list',
+    method: 'get',
+  })
+}
+export async function saveSyncApp(data) {
+  return request({
+    url: '/admin/shop/sync-app/saveSyncApp',
+    method: 'post',
+    data:data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+export async function editSyncApp(data) {
+  return request({
+    url: '/admin/shop/sync-app/editSyncApp',
+    method: 'put',
+    data:data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+export async function deleteSyncApp(syncId) {
+  return request({
+    url: '/admin/shop/sync-app/delSyncApp',
+    method: 'delete',
+    params: { syncAppId: syncId }, 
+  })
+}

src/utils/routes.js

@@ -34,7 +34,7 @@ export function convertRouter(asyncRoutes) {
       const obj = {
         path: '/goodsImgs',
         component: '@/views/product/goodsImg/goodsImgs',
-        name: 'Vab88000',
+        name: 'Vab88003',
         redirect: null,
         meta: {
           title: '商品图库管理',
@@ -46,6 +46,23 @@ export function convertRouter(asyncRoutes) {
       }
       route.children.push(obj)
     }
+    if (route.meta.title == '商品' && route.name == 'Vab320') {
+      const obj = {
+        path: '/goodsImport',
+        component: '@/views/product/goodsImport/index',
+        name: 'Vab88004',
+        redirect: null,
+        meta: {
+          title: '商品导入管理',
+          icon: '',
+          noClosable: 0,
+          hidden: null,
+        },
+        menuHidden: false,
+      }
+
+      route.children.push(obj)
+    }
     if (route.meta.title == '店铺' && route.name == 'Vab330') {
       const obj = {
         path: '/storeConf',
@@ -63,6 +80,23 @@ export function convertRouter(asyncRoutes) {
 
       route.children.push(obj)
     }
+    if (route.meta.title == '店铺' && route.name == 'Vab330') {
+      const obj = {
+        path: '/SyncApp',
+        component: '@/views/store/storeSyncApp/index',
+        name: 'Vab88001',
+        redirect: null,
+        meta: {
+          title: '店铺密钥配置',
+          icon: '',
+          noClosable: 0,
+          hidden: null,
+        },
+        menuHidden: false,
+      }
+
+      route.children.push(obj)
+    }
 
     if (route.meta.title == '店铺' && route.name == 'Vab330') {
       const obj = {

src/views/product/goodsImport/importBrand.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-dialog
+    title="品牌数据导入"
+    width="50%"
+    :visible.sync="visible"
+    height="300px"
+  >
+    <div style="display: flex; align-items: center; margin-bottom: 20px;">
+      <el-select
+        v-model="filter.storeId"
+        clearable
+        filterable
+        placeholder="选择店铺"
+        style="width: 200px;"
+      >
+        <el-option
+          v-for="item in shopList"
+          :key="item.store_id"
+          :label="item.store_name"
+          :value="item.store_id"
+        />
+      </el-select>
+      
+      <div style="margin-left: 10px; position: relative;">
+        <input
+          type="file"
+          ref="fileInput"
+          accept=".xlsx,.xls"
+          style="display: none;"
+          @change="handleFileChange"
+        />
+        <el-button 
+          type="default" 
+          size="small"
+          @click="openFileSelector"
+        >
+          选择文件
+        </el-button>
+        <span v-if="fileName" style="margin-left: 10px; font-size: 12px;">
+          {{ fileName }}
+        </span>
+      </div>
+    </div>
+    
+    <div v-if="uploadMessage" :style="{ color: uploadMessageType === 'success' ? 'green' : 'red', fontSize: '12px', marginTop: '10px' }">
+      {{ uploadMessage }}
+    </div>
+    
+    <template #footer>
+      <span>
+        <el-button @click="close">取消</el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="handlerImportCategory"
+          :disabled="!filter.storeId || !selectedFile"
+        >
+          导入
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import GoodsToolApi from '@/api/goodsTool'
+
+export default {
+  name: 'importCategory',
+  data() {
+    return {
+      filter: {
+        productName: '',
+        storeId: '',
+      },
+      visible: false,
+      shopList: [],
+      selectedFile: null, 
+      fileName: '', 
+      uploadMessage: '', 
+      uploadMessageType: '' // 提示类型 success/error
+    }
+  },
+  mounted() {
+    this.getShopList()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.selectedFile = null
+      this.fileName = ''
+      this.uploadMessage = ''
+      this.uploadMessageType = ''
+    },
+    async getShopList() {
+      try {
+        let res = await GoodsToolApi.getShopList()
+        this.shopList = res.data.items || []
+      } catch (error) {
+        console.error('获取店铺列表失败:', error)
+      }
+    },
+    // 打开文件选择器
+    openFileSelector() {
+      this.$refs.fileInput.click()
+    },
+    // 处理文件选择
+    handleFileChange(e) {
+      const file = e.target.files[0]
+      if (file) {
+        // 校验文件类型
+        const fileExt = file.name.split('.').pop().toLowerCase()
+        if (fileExt !== 'xlsx' && fileExt !== 'xls') {
+          this.uploadMessage = '请选择Excel文件(.xlsx/.xls)'
+          this.uploadMessageType = 'error'
+          this.selectedFile = null
+          this.fileName = ''
+          // 清空input值，以便可以重新选择同一个文件
+          this.$refs.fileInput.value = ''
+          return
+        }
+        
+        // 校验文件大小
+        const maxSize = 5 * 1024 * 1024 // 5MB
+        if (file.size > maxSize) {
+          this.uploadMessage = '文件大小不能超过5MB'
+          this.uploadMessageType = 'error'
+          this.selectedFile = null
+          this.fileName = ''
+          this.$refs.fileInput.value = ''
+          return
+        }
+        
+        this.selectedFile = file
+        this.fileName = file.name
+        this.uploadMessage = '' // 清空错误提示
+      }
+    },
+
+    async handlerImportCategory() {
+      if (!this.filter.storeId) {
+        this.uploadMessage = '请先选择店铺'
+        this.uploadMessageType = 'error'
+        return
+      }
+      
+      if (!this.selectedFile) {
+        this.uploadMessage = '请先选择要上传的Excel文件'
+        this.uploadMessageType = 'error'
+        return
+      }
+      
+      try {
+        const formData = new FormData()
+        formData.append('file', this.selectedFile)
+        formData.append('storeId', this.filter.storeId)
+        
+        this.uploadMessage = '正在上传文件，请稍候...'
+        this.uploadMessageType = 'success'
+        
+        const res = await GoodsToolApi.brandImportData(formData)
+        
+        if (res.status == 200 || res.success) {
+          this.uploadMessage = '文件上传成功！'
+          this.uploadMessageType = 'success'
+          // 清空文件选择
+          this.selectedFile = null
+          this.fileName = ''
+          this.$refs.fileInput.value = ''
+           this.$message.success('导入品牌成功！')
+          this.visible=false
+        } else {
+          this.uploadMessage = res.msg || '文件上传失败，请重试'
+          this.uploadMessageType = 'error'
+        }
+      } catch (error) {
+        this.uploadMessage = '文件上传失败：' + (error.message || '网络错误')
+        this.uploadMessageType = 'error'
+      }
+    },
+    close() {
+      this.visible = false
+      this.selectedFile = null
+      this.fileName = ''
+      this.uploadMessage = ''
+      this.filter.storeId = ''
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.value = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-dialog {
+  height: 300px !important;
+}
+</style>

src/views/product/goodsImport/importCategory.vue

@@ -0,0 +1,201 @@
+<template>
+  <el-dialog
+    title="商品分类数据导入"
+    width="50%"
+    :visible.sync="visible"
+    height="300px"
+  >
+    <div style="display: flex; align-items: center; margin-bottom: 20px;">
+      <el-select
+        v-model="filter.storeId"
+        clearable
+        filterable
+        placeholder="选择店铺"
+        style="width: 200px;"
+      >
+        <el-option
+          v-for="item in shopList"
+          :key="item.store_id"
+          :label="item.store_name"
+          :value="item.store_id"
+        />
+      </el-select>
+      
+      <div style="margin-left: 10px; position: relative;">
+        <input
+          type="file"
+          ref="fileInput"
+          accept=".xlsx,.xls"
+          style="display: none;"
+          @change="handleFileChange"
+        />
+        <el-button 
+          type="default" 
+          size="small"
+          @click="openFileSelector"
+        >
+          选择文件
+        </el-button>
+        <span v-if="fileName" style="margin-left: 10px; font-size: 12px;">
+          {{ fileName }}
+        </span>
+      </div>
+    </div>
+    
+    <div v-if="uploadMessage" :style="{ color: uploadMessageType === 'success' ? 'green' : 'red', fontSize: '12px', marginTop: '10px' }">
+      {{ uploadMessage }}
+    </div>
+    
+    <template #footer>
+      <span>
+        <el-button @click="close">取消</el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="handlerImportCategory"
+          :disabled="!filter.storeId || !selectedFile"
+        >
+          导入
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import GoodsToolApi from '@/api/goodsTool'
+
+export default {
+  name: 'importCategory',
+  data() {
+    return {
+      filter: {
+        productName: '',
+        storeId: '',
+      },
+      visible: false,
+      shopList: [],
+      selectedFile: null, 
+      fileName: '', 
+      uploadMessage: '', 
+      uploadMessageType: '' // 提示类型 success/error
+    }
+  },
+  mounted() {
+    this.getShopList()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.selectedFile = null
+      this.fileName = ''
+      this.uploadMessage = ''
+      this.uploadMessageType = ''
+    },
+    async getShopList() {
+      try {
+        let res = await GoodsToolApi.getShopList()
+        this.shopList = res.data.items || []
+      } catch (error) {
+        console.error('获取店铺列表失败:', error)
+      }
+    },
+    // 打开文件选择器
+    openFileSelector() {
+      this.$refs.fileInput.click()
+    },
+    // 处理文件选择
+    handleFileChange(e) {
+      const file = e.target.files[0]
+      if (file) {
+        // 校验文件类型
+        const fileExt = file.name.split('.').pop().toLowerCase()
+        if (fileExt !== 'xlsx' && fileExt !== 'xls') {
+          this.uploadMessage = '请选择Excel文件(.xlsx/.xls)'
+          this.uploadMessageType = 'error'
+          this.selectedFile = null
+          this.fileName = ''
+          // 清空input值，以便可以重新选择同一个文件
+          this.$refs.fileInput.value = ''
+          return
+        }
+        
+        // 校验文件大小
+        const maxSize = 5 * 1024 * 1024 // 5MB
+        if (file.size > maxSize) {
+          this.uploadMessage = '文件大小不能超过5MB'
+          this.uploadMessageType = 'error'
+          this.selectedFile = null
+          this.fileName = ''
+          this.$refs.fileInput.value = ''
+          return
+        }
+        
+        this.selectedFile = file
+        this.fileName = file.name
+        this.uploadMessage = '' // 清空错误提示
+      }
+    },
+
+    async handlerImportCategory() {
+      if (!this.filter.storeId) {
+        this.uploadMessage = '请先选择店铺'
+        this.uploadMessageType = 'error'
+        return
+      }
+      
+      if (!this.selectedFile) {
+        this.uploadMessage = '请先选择要上传的Excel文件'
+        this.uploadMessageType = 'error'
+        return
+      }
+      
+      try {
+        const formData = new FormData()
+        formData.append('file', this.selectedFile)
+        formData.append('storeId', this.filter.storeId)
+        
+        this.uploadMessage = '正在上传文件，请稍候...'
+        this.uploadMessageType = 'success'
+        
+        const res = await GoodsToolApi.categoryImportData(formData)
+        console.log("?????",res)
+        if (res.status === 200) {
+          this.uploadMessage = '文件上传成功！'
+          this.uploadMessageType = 'success'
+          // 清空文件选择
+          this.selectedFile = null
+          this.fileName = ''
+          this.$refs.fileInput.value = ''
+          
+          this.$message.success('导入分类成功！')
+          this.visible=false
+        } else {
+          this.uploadMessage = res.msg || '文件上传失败，请重试'
+          this.uploadMessageType = 'error'
+        }
+      } catch (error) {
+        console.error('文件上传失败:', error)
+        this.uploadMessage = '文件上传失败：' + (error.message || '网络错误')
+        this.uploadMessageType = 'error'
+      }
+    },
+    close() {
+      this.visible = false
+      this.selectedFile = null
+      this.fileName = ''
+      this.uploadMessage = ''
+      this.filter.storeId = ''
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.value = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-dialog {
+  height: 300px !important;
+}
+</style>

src/views/product/goodsImport/importGoods.vue

@@ -0,0 +1,201 @@
+<template>
+  <el-dialog
+    title="品牌数据导入"
+    width="50%"
+    :visible.sync="visible"
+    height="300px"
+  >
+    <div style="display: flex; align-items: center; margin-bottom: 20px;">
+      <el-select
+        v-model="filter.storeId"
+        clearable
+        filterable
+        placeholder="选择店铺"
+        style="width: 200px;"
+      >
+        <el-option
+          v-for="item in shopList"
+          :key="item.store_id"
+          :label="item.store_name"
+          :value="item.store_id"
+        />
+      </el-select>
+      
+      <div style="margin-left: 10px; position: relative;">
+        <input
+          type="file"
+          ref="fileInput"
+          accept=".xlsx,.xls"
+          style="display: none;"
+          @change="handleFileChange"
+        />
+        <el-button 
+          type="default" 
+          size="small"
+          @click="openFileSelector"
+        >
+          选择文件
+        </el-button>
+        <span v-if="fileName" style="margin-left: 10px; font-size: 12px;">
+          {{ fileName }}
+        </span>
+      </div>
+    </div>
+    
+    <div v-if="uploadMessage" :style="{ color: uploadMessageType === 'success' ? 'green' : 'red', fontSize: '12px', marginTop: '10px' }">
+      {{ uploadMessage }}
+    </div>
+    
+    <template #footer>
+      <span>
+        <el-button @click="close">取消</el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="handlerImportCategory"
+          :disabled="!filter.storeId || !selectedFile"
+        >
+          导入
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import GoodsToolApi from '@/api/goodsTool'
+
+export default {
+  name: 'importCategory',
+  data() {
+    return {
+      filter: {
+        productName: '',
+        storeId: '',
+      },
+      visible: false,
+      shopList: [],
+      selectedFile: null, 
+      fileName: '', 
+      uploadMessage: '', 
+      uploadMessageType: '' // 提示类型 success/error
+    }
+  },
+  mounted() {
+    this.getShopList()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.selectedFile = null
+      this.fileName = ''
+      this.uploadMessage = ''
+      this.uploadMessageType = ''
+    },
+    async getShopList() {
+      try {
+        let res = await GoodsToolApi.getShopList()
+        this.shopList = res.data.items || []
+      } catch (error) {
+        console.error('获取店铺列表失败:', error)
+      }
+    },
+    // 打开文件选择器
+    openFileSelector() {
+      this.$refs.fileInput.click()
+    },
+    // 处理文件选择
+    handleFileChange(e) {
+      const file = e.target.files[0]
+      if (file) {
+        // 校验文件类型
+        const fileExt = file.name.split('.').pop().toLowerCase()
+        if (fileExt !== 'xlsx' && fileExt !== 'xls') {
+          this.uploadMessage = '请选择Excel文件(.xlsx/.xls)'
+          this.uploadMessageType = 'error'
+          this.selectedFile = null
+          this.fileName = ''
+          // 清空input值，以便可以重新选择同一个文件
+          this.$refs.fileInput.value = ''
+          return
+        }
+        
+        // 校验文件大小
+        const maxSize = 5 * 1024 * 1024 // 5MB
+        if (file.size > maxSize) {
+          this.uploadMessage = '文件大小不能超过5MB'
+          this.uploadMessageType = 'error'
+          this.selectedFile = null
+          this.fileName = ''
+          this.$refs.fileInput.value = ''
+          return
+        }
+        
+        this.selectedFile = file
+        this.fileName = file.name
+        this.uploadMessage = '' // 清空错误提示
+      }
+    },
+
+    async handlerImportCategory() {
+      if (!this.filter.storeId) {
+        this.uploadMessage = '请先选择店铺'
+        this.uploadMessageType = 'error'
+        return
+      }
+      
+      if (!this.selectedFile) {
+        this.uploadMessage = '请先选择要上传的Excel文件'
+        this.uploadMessageType = 'error'
+        return
+      }
+      
+      try {
+        const formData = new FormData()
+        formData.append('file', this.selectedFile)
+        formData.append('storeId', this.filter.storeId)
+        
+        this.uploadMessage = '正在上传文件，请稍候...'
+        this.uploadMessageType = 'success'
+        
+        const res = await GoodsToolApi.shopImportData(formData)
+        
+        if (res.status == 200) {
+          this.uploadMessage = '文件上传成功！'
+          this.uploadMessageType = 'success'
+          // 清空文件选择
+          this.selectedFile = null
+          this.fileName = ''
+          this.$refs.fileInput.value = ''
+          
+          this.$message.success('导入商品数据成功！')
+          this.visible=false
+        } else {
+          this.uploadMessage = res.msg || '文件上传失败，请重试'
+          this.uploadMessageType = 'error'
+        }
+      } catch (error) {
+        console.error('文件上传失败:', error)
+        this.uploadMessage = '文件上传失败：' + (error.message || '网络错误')
+        this.uploadMessageType = 'error'
+      }
+    },
+    close() {
+      this.visible = false
+      this.selectedFile = null
+      this.fileName = ''
+      this.uploadMessage = ''
+      this.filter.storeId = ''
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.value = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-dialog {
+  height: 300px !important;
+}
+</style>

src/views/product/goodsImport/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="goods_tool_container">
+    <div class="list">
+      <div class="tool">
+        <el-button type="primary" @click="downloadBrandTemplate">品牌模板下载</el-button>
+
+        <el-button type="success" @click="downloadCategoryTemplate">商品分类导入模板下载</el-button>
+        <el-button plain size="mini" type="info" @click="downloadGoodsTemplate">商品导入模板下载</el-button>
+        
+        <el-button type="warning" @click="openBrandImport">品牌数据导入</el-button>
+        <el-button type="danger" @click="openCategoryImport">商品分类数据导入</el-button>
+        <el-button @click="openGoodsImport">商品数据导入</el-button>
+      </div>
+    </div>
+    <importCategory ref="importCategoryRef"></importCategory>
+    <importBrand ref="importBrandRef"></importBrand>
+    <importGoods ref="importGoodsRef"></importGoods>
+  </div>
+</template>
+
+<script>
+    import GoodsToolApi from '@/api/goodsTool'
+    import importBrand from '@/views/product/goodsImport/importBrand.vue'
+    import importCategory from '@/views/product/goodsImport/importCategory.vue'
+    import importGoods from '@/views/product/goodsImport/importGoods.vue'
+  export default {
+    components: {importBrand,importCategory,importGoods},
+    data() {
+      return {
+        importCategoryRef:null,
+        importBrandRef:null,
+        importGoodsRef:null,
+      }
+    },
+    mounted() {},
+    methods: {
+        async downloadBrandTemplate() {
+        const res = await GoodsToolApi.downloadBrandTemplate()
+        if (res) {
+          this.$message.success('操作成功')
+          this.downloadFile(res, '品牌模板.xlsx')
+        }
+      },
+        async downloadCategoryTemplate() {
+        const res = await GoodsToolApi.downloadCategoryTemplate()
+        if (res) {
+          this.$message.success('操作成功')
+          this.downloadFile(res, '商品分类导入模板.xlsx')
+        }
+      },
+        async downloadGoodsTemplate() {
+        const res = await GoodsToolApi.downloadGoodsTemplate()
+        if (res) {
+          this.$message.success('操作成功')
+          this.downloadFile(res, '商品导入模板.xlsx')
+        }
+      },
+      downloadFile(blobData, fileName) {
+        const url = window.URL.createObjectURL(new Blob([blobData]))
+
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', fileName)
+
+        document.body.appendChild(link)
+        link.click()
+
+        document.body.removeChild(link)
+        window.URL.revokeObjectURL(url)
+      },
+      openBrandImport(){
+        this.$refs.importBrandRef?.open()
+      },
+      openCategoryImport(){
+        this.$refs.importCategoryRef?.open()
+      },
+      openGoodsImport(){
+        this.$refs.importGoodsRef?.open()
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .filter {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    margin-bottom: 15px;
+    gap: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
+    background: #fff;
+
+    .input_item {
+      width: 250px;
+    }
+  }
+  .list {
+    background: #fff;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
+  }
+  .tool {
+    display: flex;
+    gap: 10px;
+    ::v-deep .el-button {
+      margin-left: 0 !important;
+    }
+  }
+</style>

src/views/store/storeSyncApp/addSyncApp.vue

@@ -0,0 +1,155 @@
+<template>
+  <el-dialog title="新增密钥" width="50%" :visible.sync="visible">
+    <div>
+      <el-form v-model="syncAppForm" label-position="left" label-width="80px">
+        <el-form-item label="app_key" size="normal">
+          <el-input
+            v-model="syncAppForm.app_key"
+            placeholder="请输入app_key"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="app_secret" size="normal">
+          <el-input
+            v-model="syncAppForm.app_secret"
+            placeholder="请输入app_secret"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="店铺" size="normal">
+          <el-select
+            v-model="syncAppForm.store_id"
+            clearable
+            filterable
+            placeholder="选择店铺"
+            style="width: 200px"
+            @change="handleStoreChange"
+          >
+            <el-option
+              v-for="item in shopList"
+              :key="item.store_id"
+              :label="item.store_name"
+              :value="item.store_id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="介绍" size="normal">
+          <el-input
+            v-model="syncAppForm.intro"
+            style="width: 300px"
+            placeholder="请输入介绍"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="syncAppForm.status"
+            clearable
+            filterable
+            @change="handleSyncAppStatus"
+          >
+            <el-option
+              v-for="item in statusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span>
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="submit">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  import GoodsToolApi from '@/api/goodsTool'
+  import { saveSyncApp } from '@/api/syncApp.js'
+  export default {
+    name: 'addSyncApp',
+    data() {
+      return {
+        visible: false,
+        syncAppForm: {
+          app_key: '',
+          app_secret: '',
+          store_id: '',
+          name: '',
+          intro: '',
+          status: 0,
+        },
+        filter: {
+          productName: '',
+          storeId: '',
+        },
+        shopList: [],
+        statusList: [
+          {
+            label: '可用',
+            value: 1,
+          },
+          {
+            label: '不可用',
+            value: 2,
+          },
+          {
+            label: '不校验签名',
+            value: 3,
+          },
+        ],
+      }
+    },
+    mounted() {
+      this.getShopList()
+    },
+    methods: {
+      open() {
+        // 打开弹窗时重置表单，避免残留数据
+        this.syncAppForm = {
+          app_key: '',
+          app_secret: '',
+          store_id: '',
+          name: '',
+          intro: '',
+          status: 1,
+        }
+        this.visible = true
+      },
+      async getShopList() {
+        try {
+          let res = await GoodsToolApi.getShopList()
+          this.shopList = res.data.items || []
+        } catch (error) {
+          console.error('获取店铺列表失败:', error)
+        }
+      },
+      handleStoreChange(storeId) {
+        this.syncAppForm.name = ''
+        const selectedShop = this.shopList.find(
+          (item) => item.store_id === storeId
+        )
+        if (selectedShop) {
+          this.syncAppForm.name = selectedShop.store_name
+        }
+      },
+      async submit() {
+        let res = await saveSyncApp(this.syncAppForm)
+        console.log(res)
+        if (res.status == 200) {
+          this.visible = false
+          this.$emit('success')
+        }
+      },
+      handleSyncAppStatus(e) {
+        this.syncAppForm.status = e
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/views/store/storeSyncApp/editSync.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog title="编辑密钥" width="50%" :visible.sync="visible">
+    <div>
+      <el-form v-model="syncAppForm" label-position="left" label-width="80px">
+        <el-form-item label="app_key" size="normal">
+          <el-input
+            v-model="syncAppForm.app_key"
+            placeholder="请输入app_key"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="app_secret" size="normal">
+          <el-input
+            v-model="syncAppForm.app_secret"
+            placeholder="请输入app_secret"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="店铺" size="normal">
+          <el-input   
+            v-model="syncAppForm.name"
+            style="width: 200px;"
+            disabled
+            clearable/>
+        </el-form-item>
+        <el-form-item label="介绍" size="normal">
+          <el-input
+            v-model="syncAppForm.intro"
+            style="width: 200px;"
+            placeholder="请输入介绍"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="syncAppForm.status"
+            clearable
+            filterable
+            @change="handleSyncAppStatus"
+          >
+            <el-option
+              v-for="item in statusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span>
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="changeSumbit">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  import GoodsToolApi from '@/api/goodsTool'
+import { editSyncApp } from '@/api/syncApp';
+  export default {
+    name: 'editSyncApp',
+    data() {
+      return {
+        visible: false,
+        syncAppForm: {
+          app_key: '',
+          app_secret: '',
+          store_id: '',
+          name: '',
+          intro: '',
+          status: 0,
+        },
+        filter: {
+          productName: '',
+          storeId: '',
+        },
+        shopList: [],
+        statusList: [
+          {
+            label: '可用',
+            value: 1,
+          },
+          {
+            label: '不可用',
+            value: 2,
+          },
+          {
+            label: '不校验签名',
+            value: 3,
+          },
+        ],
+      }
+    },
+    mounted() {
+      this.getShopList()
+    },
+    methods: {
+      open(row) {
+        this.visible = true
+        this.syncAppForm = { ...row } 
+      },
+      close(){
+        this.visible=false
+      },
+      async getShopList() {
+        try {
+          let res = await GoodsToolApi.getShopList()
+          this.shopList = res.data.items || []
+        } catch (error) {
+          console.error('获取店铺列表失败:', error)
+        }
+      },
+      async changeSumbit(){
+            let res = await editSyncApp(this.syncAppForm)
+            console.log("sdfasa",res)
+            if(res.status== 200){
+                this.visible=false
+                this.$emit('success')
+            }
+      },
+      handleSyncAppStatus(e) {
+        this.syncAppForm.status = e
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/views/store/storeSyncApp/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="db-config-management">
+    <el-card class="list">
+      <div slot="header" class="tool">
+        <el-button type="primary" @click="openAddSyncApp">新增</el-button>
+      </div>
+
+      <el-table border :data="SyncAppList" stripe>
+        <el-table-column label="操作" width="250">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="openEdit(scope.row)">
+              编辑
+            </el-button>
+            <el-button size="mini" type="danger" @click="handlerDelete(scope.row.id)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="店铺id" prop="store_id" />
+        <el-table-column label="店铺名字" prop="name" />
+        <el-table-column label="app_key" prop="app_key" />
+        <el-table-column label="密钥" prop="app_secret" />
+        <el-table-column label="店铺介绍" prop="intro" />
+        <el-table-column label="状态" prop="status">
+          <template slot-scope="scope">
+              {{ 
+                scope.row.status == 1 ? '可用' : 
+                scope.row.status == 2 ? '不可用' :
+                scope.row.status == 3 ? '不校验签名':
+                '其他'
+              }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <addSyncApp ref="addSyncAppRef" @success="refreshList"></addSyncApp>
+    <editSync ref="editSyncAppRef"  @success="refreshList"></editSync>
+  </div>
+</template>
+
+<script>
+import addSyncApp from '@/views/store/storeSyncApp/addSyncApp.vue'
+import editSync from '@/views/store/storeSyncApp/editSync.vue'
+import {
+  getSyncAppList,
+  saveSyncApp,
+  editSyncApp,
+  deleteSyncApp,
+} from '@/api/syncApp.js'
+
+export default {
+  components: { addSyncApp, editSync },
+  data() {
+    return {
+      addSyncAppRef: null,
+      editSyncAppRef: null,
+      SyncAppList: [],
+    }
+  },
+  created() {
+    this.getSyncList()
+  },
+  methods: {
+    openAddSyncApp() {
+      this.$refs.addSyncAppRef?.open()
+    },
+    openEdit(row) {
+      this.$refs.editSyncAppRef?.open(row)
+    },
+    async getSyncList() {
+      const res = await getSyncAppList()
+      this.SyncAppList = res.records
+    },
+    refreshList(){
+      this.getSyncList()
+    },
+    async handlerDelete(id) {
+      try {
+        await this.$confirm(
+          '此操作将永久删除该条记录, 是否继续?',
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+        )
+        const res = await deleteSyncApp(id)
+        if(res.status==200){
+          this.$message.success('删除成功!')
+          this.getSyncList() 
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('删除失败!')
+          console.error('删除出错：', error)
+        } else {
+          this.$message.info('已取消删除')
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style scoped></style>