feat: 交班管理增加交班数据导出功能

src/utils/index.ts

@@ -105,12 +105,12 @@ export function parseTime(time: string | number | Date | null, cFormat: string |
 }
 
 // 下载文件
-export function downloadFile(obj: BlobPart, name: string, suffix: string) {
+export function downloadFile(obj: BlobPart, name: string, suffix: string, useUnix = true) {
   const url = window.URL.createObjectURL(new Blob([obj]));
   const link = document.createElement("a");
   link.style.display = "none";
   link.href = url;
-  const fileName = parseTime(new Date(), undefined) + "-" + name + "." + suffix;
+  const fileName = useUnix ? (parseTime(new Date(), undefined) + "-") : '' + name.trim() + "." + suffix;
   link.setAttribute("download", fileName);
   document.body.appendChild(link);
   link.click();

src/views/data/workconfig/api.ts

@@ -48,6 +48,14 @@ const AuthAPI = {
       method: "delete",
     });
   },
+  //导出
+  export(id: string | number) {
+    return request<any>({
+      url: `${baseURL}/export/${id}`,
+      method: "get",
+      responseType: "blob",
+    });
+  }
 
 };
 export interface Responseres {

src/views/data/workconfig/component/my-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="margin-top: 10px;">
+  <div style="margin-top: 10px">
     <el-table :data="props.list" border style="width: 100%">
       <el-table-column prop="shopName" align="center" label="商户名称" />
       <el-table-column prop="staffName" align="center" label="职员名称" />
@@ -12,8 +12,12 @@
       <el-table-column prop="handoverTime" align="center" label="交班时间" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">查看</el-button>
+          <el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">
-          <el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">导出</el-button>
+            查看
+          </el-button>
+          <el-button size="small" type="primary" link icon="Edit" @click="handleExport(scope.row)">
+            导出
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -21,19 +25,22 @@
 </template>
 
 <script setup>
-const emit = defineEmits(['handleDelete', 'handleEdit'])
+const emit = defineEmits(["handleDelete", "handleEdit"]);
 const props = defineProps({
   list: {
     type: Array,
-    default: () => []
+    default: () => [],
-  }
+  },
-})
+});
 
 function handleEdit(row) {
-  emit('handleEdit', row)
+  emit("handleEdit", row);
 }
 function handleDelete(index, row) {
-  emit('handleDelete', row.id)
+  emit("handleDelete", row.id);
+}
+// 导出
+function handleExport(row) {
+  emit("handleExport", row);
 }
-
 </script>

src/views/data/workconfig/my-content.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="Table">
     <!-- 表格 -->
-    <my-table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></my-table>
+    <my-table
+      @handleExport="handleExport"
+      :list="datas.tableData"
+      @handleDelete="handleDelete"
+      @handleEdit="handleEdit"
+    ></my-table>
     <!-- 分页 -->
-    <my-paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></my-paging>
+    <my-paging
+      :pagingConfig="datas.pagingConfig"
+      @sizeChange="sizeChange"
+      @currentChange="currentChange"
+    ></my-paging>
     <!-- 其他模板 -->
     <!-- 新增/编辑 -->
     <my-dialog ref="myDialogRef" title="商品销售" @confirm="confirm" width="30%">
@@ -23,6 +32,7 @@ import myPaging from "./component/my-paging.vue";
 import myDialog from "@/components/mycomponents/myDialog.vue";
 import eventBus from "@/utils/eventBus";
 import API from "./api";
+import { downloadFile } from "@/utils/index";
 
 const datas = reactive({
   tableData: [], // 表格数据
@@ -81,7 +91,7 @@ function add() {
 async function handleEdit(row) {
   datas.title = "查看数据";
   const res = await API.getinfo(row.id);
-  datas.tableDatas = res
+  datas.tableDatas = res;
   // datas.DialogForm = res;
   // 有图片
   // datas.DialogForm.goodsImageUrl = res.goodsImageUrl.split(',')
@@ -89,7 +99,6 @@ async function handleEdit(row) {
 }
 async function confirm() {
   myDialogRef.value.close();
-
 }
 // 重置
 function rest() {
@@ -133,6 +142,19 @@ function currentChange(val) {
   datas.pagingConfig.pageNumber = val;
   getList();
 }
+//导出
+async function handleExport(row) {
+  try {
+    const file = await API.export(row.id);
+    downloadFile(
+      file,
+      `${row.staffName}-${row.loginTime}到${row.handoverTime}交班数据`,
+      "xlsx",
+      false
+    );
+    ElMessage.success("下载成功");
+  } catch (error) {}
+}
 </script>
 <style scoped lang="scss">
 .Table {