feat(product-list):商品列表三个导入按钮功能实现

- 导入按钮功能实现;
- ImportButton组件功能修改(1.增加传入接口参数2.修改upload上传类型只能为表格类型3.上传成功时刷新页面);

src/auto-imports.d.ts

@@ -7,6 +7,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
@@ -72,12 +73,12 @@ declare global {
   const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
   const useModel: typeof import('vue')['useModel']
-  const usePagination: typeof import('../../../../../../../@/utils/usePagination')['usePagination']
-  const useResponse: typeof import('../../../../../../../@/utils/useResponse')['useResponse']
+  const usePagination: typeof import('../../../../../../@/utils/usePagination')['usePagination']
+  const useResponse: typeof import('../../../../../../@/utils/useResponse')['useResponse']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
-  const useTableData: typeof import('../../../../../../../@/utils/useTableData')['useTableData']
+  const useTableData: typeof import('../../../../../../@/utils/useTableData')['useTableData']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']

src/components/ImportButton/index.vue

@@ -6,21 +6,26 @@
  */
 import { ButtonProps, genFileId, UploadInstance, UploadRawFile } from 'element-plus';
 import { BtnPermissionStore } from '/@/plugin/permission/store.permission';
-
+import { uploadFile } from '/@/views/product-manage/product-list/api';
 
 const { data } = BtnPermissionStore();
 
 const attrs = useAttrs() as any;
+const refreshView = inject('refreshView');
 
-const props = defineProps<Partial<Omit<ButtonProps, 'disabled' | 'loading' | 'color'>>>();
+const props = defineProps<
+	{
+		uploadFunction: (url: 'URL') => Promise<any>;
+	} & Partial<Omit<ButtonProps, 'disabled' | 'loading' | 'color'>>
+>();
 
 function hasPermission(permissions: string | string[]): boolean {
-  if (typeof permissions === 'string') {
-    return data.includes(permissions);
-  } else if (Array.isArray(permissions)) {
-    return permissions.every(permission => data.includes(permission));
-  }
-  return false;
+	if (typeof permissions === 'string') {
+		return data.includes(permissions);
+	} else if (Array.isArray(permissions)) {
+		return permissions.every((permission) => data.includes(permission));
+	}
+	return false;
 }
 
 const upload = ref<UploadInstance>();
@@ -31,11 +36,11 @@ const upBtnLoading = ref(false);
  * @param files 文件列表
  */
 function handleExceed(files: any) {
-  upload.value!.clearFiles();
-  const file = files[0] as UploadRawFile;
-  file.uid = genFileId();
-  upload.value!.handleStart(file);
-  upload.value!.submit();
+	upload.value!.clearFiles();
+	const file = files[0] as UploadRawFile;
+	file.uid = genFileId();
+	upload.value!.handleStart(file);
+	upload.value!.submit();
 }
 
 /**
@@ -43,19 +48,24 @@ function handleExceed(files: any) {
  * @param uploadRequest 上传请求
  */
 async function handleCustomUpload(uploadRequest: any) {
-  upBtnLoading.value = true;
-  try {
-    const { file } = uploadRequest;
-    // const response = await api.uploadFile(file);
-    // handleResponse(response);
-    // processResponseData(response.data);
-    // uploadRequest.onSuccess(response); // 通知 el-upload 上传成功
-  } catch (error) {
-    console.log('==Error==', error);
-    uploadRequest.onError(error);
-  } finally {
-    upBtnLoading.value = false;
-  }
+	upBtnLoading.value = true;
+	try {
+		const { file } = uploadRequest;
+		const formData = new FormData();
+		formData.append('file', file);
+		const resp = await uploadFile(formData);
+		const fileUrl = resp.data.url;
+		const response = await props.uploadFunction({ url: fileUrl });
+		handleResponse(response);
+		// processResponseData(response.data);
+		uploadRequest.onSuccess(response); // 通知 el-upload 上传成功
+
+	} catch (error) {
+		console.log('==Error==', error);
+		uploadRequest.onError(error);
+	} finally {
+		upBtnLoading.value = false;
+	}
 }
 
 /**
@@ -63,38 +73,45 @@ async function handleCustomUpload(uploadRequest: any) {
  * @param response 后端返回的响应
  */
 function handleResponse(response: any) {
-  // if (response.code === SUCCESS_CODE) {
-  //   ElMessage.success({ message: response.msg, plain: true });
-  // } else if (response.code === WARNING_CODE) {
-  //   ElMessage.warning({ message: response.msg, plain: true });
-  // } else {
-  //   ElMessage.error({ message: response.msg, plain: true });
-  // }
+	if (response.code === 2000) {
+		ElMessage.success({ message: response.msg, plain: true });
+
+		// 上传成功后调用刷新父组件的方法
+		if (refreshView) {
+			refreshView();
+		}
+	} else {
+		ElMessage.error({ message: response.msg, plain: true });
+	}
 }
 </script>
 
 <template>
-  <div>
-    <el-upload
-        ref="upload"
-        action="#"
-        :limit="1"
-        :show-file-list="false"
-        :auto-upload="true"
-        :on-exceed="handleExceed"
-        :http-request="handleCustomUpload">
-      <template #trigger>
-        <el-button v-if="attrs.show ? hasPermission(attrs.show) : true"
-                   :disabled="attrs.permissions ? !hasPermission(attrs.permissions) : false"
-                   :loading="upBtnLoading" :color="attrs.myColor" v-bind="props">
-                   <!--:loading="upBtnLoading" color="#6366f1" v-bind="props">-->
-          <slot></slot>
-        </el-button>
-      </template>
-    </el-upload>
-  </div>
+	<div>
+		<el-upload
+			ref="upload"
+			action="#"
+			:limit="1"
+			:show-file-list="false"
+			:auto-upload="true"
+			:on-exceed="handleExceed"
+			:http-request="handleCustomUpload"
+			accept=".xls,.xlsx"
+		>
+			<template #trigger>
+				<el-button
+					v-if="attrs.show ? hasPermission(attrs.show) : true"
+					:disabled="attrs.permissions ? !hasPermission(attrs.permissions) : false"
+					:loading="upBtnLoading"
+					:color="attrs.myColor"
+					v-bind="props"
+				>
+					<!--:loading="upBtnLoading" color="#6366f1" v-bind="props">-->
+					<slot></slot>
+				</el-button>
+			</template>
+		</el-upload>
+	</div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/product-manage/competitor-monitor/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+/**
+ * @Name: index.vue
+ * @Description:
+ * @Author: xinyan
+ */
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/product-manage/product-list/api.ts

@@ -91,3 +91,39 @@ export function updateShopDetail(body: any) {
     data: body.formData,
   });
 }
+
+export function uploadFile(body: any){
+  return request({
+    url: 'api/system/file/',
+    method: 'POST',
+    data: body,
+    headers: { 'Content-Type':'multipart/form-data' },
+  });
+}
+
+// 商品变更通知导入
+export function uploadChangeNotice(body: any){
+  return request({
+    url: '/api/choice/goods/alarm/import_data/',
+    method: 'POST',
+    data: body,
+  });
+}
+
+// 商品导入
+export function uploadProducts(body: any){
+  return request({
+    url: '/api/choice/goods/import_data/',
+    method: 'POST',
+    data: body,
+  });
+}
+
+// 指导价格导入
+export function uploadPrice(body: any){
+  return request({
+    url: '/api/choice/goods/GuidancePrice/import_data/',
+    method: 'POST',
+    data: body,
+  });
+}

src/views/product-manage/product-list/component/DataTable.vue

@@ -185,12 +185,14 @@ defineExpose({ fetchList });
         </div>
         <VerticalDivider class="px-1" style="margin-left: 7px;" />
 
-        <ImportButton :icon="Message" bg text>变更通知导入</ImportButton>
-        <ImportButton bg text>
+        <ImportButton :icon="Message" bg text :uploadFunction="api.uploadChangeNotice">变更通知导入</ImportButton>
+        <ImportButton bg text :uploadFunction="api.uploadProducts">
           <i class="bi bi-box-seam mr-3"></i>
           商品导入
         </ImportButton>
-        <ImportButton :icon="Money" bg text>指导价格导入</ImportButton>
+        <ImportButton :icon="Money" bg text :uploadFunction="api.uploadPrice">指导价格导入</ImportButton>
+				<div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+
       </div>
     </template>
     <!-- 工具栏右侧 -->