feat(product-manage):商品管理下载强提醒

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

@@ -106,13 +106,6 @@ function handleRefresh() {
 }
 
 async function handleDownload() {
-	const confirmed = await ElMessageBox.confirm('是否确认导出当前时间内所有数据项?', '警告', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning'
-	});
-
-	if (confirmed) {
 		gridOptions.loading = true;
 		try {
 			const query = {
@@ -137,7 +130,6 @@ async function handleDownload() {
 			console.error(error);
 		} finally {
 			gridOptions.loading = false; // 结束加载状态
-		}
 	}
 }
 
@@ -262,12 +254,33 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
-        <el-icon>
-          <Download />
-        </el-icon>
-      </el-button>
-    </template>
+			<el-popconfirm
+				width="220"
+				:icon="InfoFilled"
+				icon-color="#626AEF"
+				title="是否确认导出当前时间内所有数据项?"
+				@cancel="onCancel"
+				@confirm="handleDownload"
+			>
+				<template #reference>
+					<el-button circle class="mr-3 toolbar-btn">
+						<el-icon>
+							<Download />
+						</el-icon>
+					</el-button>
+				</template>
+				<template #actions="{ confirm, cancel }">
+					<el-button size="small" @click="cancel">No!</el-button>
+					<el-button
+						type="danger"
+						size="small"
+						@click="confirm"
+					>
+						Yes?
+					</el-button>
+				</template>
+			</el-popconfirm>
+		</template>
     <template #top>
       <div class="mb-2"></div>
     </template>

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

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { Delete, Download, Plus, Refresh, Upload } from '@element-plus/icons-vue';
+import { Delete, Download, InfoFilled, Plus, Refresh, Upload } from '@element-plus/icons-vue';
 import * as api from '../api';
 import PermissionButton from '/src/components/PermissionButton/index.vue';
 import EditDrawer from './EditDrawer.vue';
@@ -115,13 +115,6 @@ function handleRefresh() {
 }
 
 async function handleDownload() {
-	const confirmed = await ElMessageBox.confirm('是否确认导出当前时间内所有数据项?', '警告', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning'
-	});
-
-	if (confirmed) {
 		gridOptions.loading = true;
 		try {
 			const query = {
@@ -151,7 +144,10 @@ async function handleDownload() {
 		} finally {
 			gridOptions.loading = false; // 结束加载状态
 		}
-	}
+}
+
+function onCancel(val) {
+	// console.log('val=> ', val);
 }
 
 async function batchOpen() {
@@ -248,11 +244,32 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
-        <el-icon>
-          <Download />
-        </el-icon>
-      </el-button>
+			<el-popconfirm
+				width="220"
+				:icon="InfoFilled"
+				icon-color="#626AEF"
+				title="是否确认导出当前时间内所有数据项?"
+				@cancel="onCancel"
+				@confirm="handleDownload"
+			>
+				<template #reference>
+					<el-button circle class="mr-3 toolbar-btn">
+						<el-icon>
+							<Download />
+						</el-icon>
+					</el-button>
+				</template>
+				<template #actions="{ confirm, cancel }">
+					<el-button size="small" @click="cancel">No!</el-button>
+					<el-button
+						type="danger"
+						size="small"
+						@click="confirm"
+					>
+						Yes?
+					</el-button>
+				</template>
+			</el-popconfirm>
     </template>
     <template #top>
       <div class="mb-2"></div>