build

src/api/mobile/exchangeOrder.ts

@@ -17,9 +17,9 @@ export async function httpDetail(data: object = {}): Promise<DataType<any>> {
 }
 
 //发货
-export async function httpDeliver(): Promise<DataType<Menu[]>> {
+export async function httpDeliver(data: object = {}): Promise<DataType<any>> {
   return http.request(`post`, `${VITE_PROXY_DOMAIN_REAL}admin/orderDeliver`, {
-    data: {}
+    data
   });
 }
 

src/components/execlUpload/index.ts

@@ -0,0 +1,3 @@
+import execlUpload from "./src/execl-upload.vue";
+
+export { execlUpload };

src/components/execlUpload/src/execl-upload.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import {
+  ElMessage,
+  ElUpload,
+  UploadFile,
+  UploadProps,
+  ElLoading
+} from "element-plus";
+import { read, utils } from "xlsx";
+
+const uploadRef = ref<InstanceType<typeof ElUpload>>(null);
+const execlFile = ref<UploadFile | null>(null);
+const emit = defineEmits(["onSuccess"]);
+
+//上传文件改变
+const handleChange: UploadProps["onChange"] = uploadFile => {
+  const rawFile = uploadFile.raw;
+  if (!rawFile) return;
+  upload(rawFile);
+};
+
+const upload = rawFile => {
+  if (beforeUpload(rawFile)) {
+    readerData(rawFile);
+  }
+};
+const readerData = async uploadFile => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)"
+  });
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = e => {
+      const data = e.target.result;
+      const workbook = read(data, { type: "array" });
+      const firstSheetName = workbook.SheetNames[0];
+      const worksheet = workbook.Sheets[firstSheetName];
+      const header = getHeaderRow(worksheet);
+      const results = utils.sheet_to_json(worksheet, { defval: "" });
+      emit("onSuccess", { header, results });
+      loading.close();
+      resolve({ isok: true });
+    };
+    reader.readAsArrayBuffer(uploadFile);
+  });
+};
+
+const getHeaderRow = sheet => {
+  const headers = [];
+  const range = utils.decode_range(sheet["!ref"]);
+  let C;
+  const R = range.s.r;
+  /* 从第一行开始 */
+  for (C = range.s.c; C <= range.e.c; ++C) {
+    /* 遍历范围中的每一列 */
+    const cell = sheet[utils.encode_cell({ c: C, r: R })];
+    /* 查找第一行中的单元格 */
+    let hdr = "UNKNOWN " + C; // <--替换为所需的默认值
+    if (cell && cell.t) hdr = utils.format_cell(cell);
+    headers.push(hdr);
+  }
+  return headers;
+};
+
+const beforeUpload: UploadProps["beforeUpload"] = async uploadFile => {
+  const isLt1M = uploadFile.size / 1024 < 500;
+  if (isLt1M) {
+    return true;
+  }
+  ElMessage.warning("请不要上传大于500KB的文件");
+  return false;
+};
+//删除穿文件
+const handleRemove: UploadProps["onRemove"] = () => (execlFile.value = null);
+
+defineExpose({
+  onDisplay: () => (execlFile.value = null)
+});
+</script>
+
+<template>
+  <el-upload
+    ref="uploadRef"
+    action="#"
+    accept=".xls,.xlsx"
+    drag
+    :auto-upload="false"
+    @change="handleChange"
+    @remove="handleRemove"
+    @before-upload="beforeUpload"
+    multiple
+  >
+    <!-- class="execl-uploader" -->
+    <div class="el-upload__text" v-if="!execlFile">点击此处,上传文件</div>
+  </el-upload>
+</template>
+
+<style lang="scss" scoped>
+.execl-uploader {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  .el-upload__text {
+    line-height: 200px;
+    font-size: 22px;
+  }
+}
+</style>

src/views/mobile/exchangeOrder/cpns/execl-files-upload/columns-config.ts

@@ -0,0 +1,40 @@
+const initheaders = [
+  "订单ID",
+  "主订单编号",
+  "订单编号",
+  "订单类型",
+  "业务公司",
+  "卡类型",
+  "购买用户名",
+  "购买账号",
+  "购买数量",
+  "收货联系人",
+  "收货联系电话",
+  "状态",
+  "物流公司",
+  "物流单号",
+  "创建时间",
+  "收货地址",
+  "商品编码",
+  "商品(服务)名称"
+];
+const columns = () => {
+  const list: any[] = [
+    {
+      type: "index",
+      width: "50",
+      fixed: "left",
+      label: "序号"
+    }
+  ];
+  initheaders.forEach((si, sii) => {
+    list.push({
+      prop: "value" + sii,
+      label: si,
+      minWidth: "100px"
+    });
+  });
+  return list;
+};
+
+export { initheaders, columns };

src/views/mobile/exchangeOrder/cpns/execl-files-upload/index.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { httpDeliver } from "/@/api/mobile/exchangeOrder";
+import { initheaders, columns } from "./columns-config";
+import { ElMessage, ElNotification } from "element-plus";
+import { responseHandle } from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/useNav";
+import { execlUpload } from "/@/components/execlUpload";
+const visible = ref(false);
+const loading = ref(false);
+const tableData = ref([]);
+const columnsConfig = columns();
+const { logout } = useNav();
+const emit = defineEmits(["onSuccess"]);
+
+const handleClose = () => {
+  // execlFile.value = null;
+  // uploadRef.value.clearFiles();
+};
+const Uploadsuccess = ({ results, header }) => {
+  loading.value = true;
+  console.log(results);
+  console.log(header);
+  if (results.length === 0) {
+    ElMessage.error("表格无有效数据！");
+    loading.value = false;
+    return;
+  }
+  let headok = true;
+  if (header.length !== initheaders.length) {
+    headok = false;
+  } else {
+    initheaders.forEach((si, sii) => {
+      if (si !== header[sii]) {
+        headok = false;
+      }
+    });
+  }
+  if (!headok) {
+    ElMessage.error("表头与导入模板不匹配！");
+    loading.value = false;
+    return;
+  }
+  tableData.value = [];
+
+  try {
+    results.forEach(v1 => {
+      const b = Object.values(v1);
+      let model = {};
+      b.forEach((si, sii) => {
+        model["value" + sii] = si + "";
+      });
+      tableData.value.push(model);
+    });
+    loading.value = false;
+  } catch (e) {
+    ElMessage.error("导入数据拼接有误！");
+    loading.value = false;
+  }
+};
+//提交
+const handleSubmit = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  let isok = true,
+    isnum = true,
+    list = [];
+  tableData.value.forEach((key: Record<string, any>) => {
+    let model = {
+      orderCode: key.value2 || "",
+      post_name: key.value12 || "",
+      post_code: key.value13 || ""
+    };
+    if (key["value2"] === "" || key["value13"] === "") {
+      isok = false;
+    }
+    // if (key["value14"]) {
+    //   let num = key["value14"] * 1;
+    //   console.log(num);
+    //   if (isNaN(num) || num < 0) {
+    //     isnum = false;
+    //   }
+    // }
+
+    list.push(model);
+  });
+  if (!isok) {
+    ElNotification({
+      title: "必填字段缺失！",
+      message: "订单编号和物流单号为必填项！",
+      type: "error"
+    });
+    loading.value = false;
+    return;
+  }
+  if (!isnum) {
+    ElMessage.error("收入金额只能为正数！");
+    loading.value = false;
+    return;
+  }
+  console.log(list);
+  const { code, message } = await httpDeliver({ list });
+  if (code === 1005 || code === 1006) {
+    loading.value = false;
+    ElMessage.error(message);
+  } else {
+    responseHandle({
+      code,
+      message,
+      logout,
+      handler: () => {
+        loading.value = false;
+        ElMessage.success("数据导入成功！");
+        emit("onSuccess");
+        visible.value = false;
+      }
+    });
+  }
+};
+const cancel = () => {
+  tableData.value = [];
+};
+defineExpose({
+  onDisplay: () => ((visible.value = true), (tableData.value = []))
+});
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="导入表格数据"
+    width="1040px"
+    top="8vh"
+    center
+    @close="handleClose"
+  >
+    <execlUpload @on-success="Uploadsuccess" v-if="tableData.length === 0" />
+    <div flex justify-end gap-2 v-if="tableData.length !== 0">
+      <el-button size="small" @click="cancel">取消</el-button>
+      <el-button
+        size="small"
+        type="primary"
+        :loading="loading"
+        @click="handleSubmit"
+        >保存</el-button
+      >
+    </div>
+    <el-table
+      :data="tableData"
+      stripe
+      border
+      max-height="500px"
+      size="small"
+      style="width: 100%; padding: 10px 0 0 0"
+    >
+      <el-table-column
+        v-for="(si, sii) in columnsConfig"
+        v-bind="si"
+        :key="sii"
+        show-overflow-tooltip
+      />
+    </el-table>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/views/mobile/exchangeOrder/index.vue

@@ -9,6 +9,7 @@ import { PageContent } from "/@/components/PageContent";
 import type { PageContentInstance } from "/@/components/PageContent";
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import { exportPageContent } from "/@/utils/export";
+import ExeclUpload from "./cpns/execl-files-upload/index.vue";
 const pageName = "order";
 
 const { handleResetClick, handleSearchClick } = usePageSearch();
@@ -16,7 +17,7 @@ const pageContentRef = ref<PageContentInstance | null>(null);
 const { pageModalRef, handleConfrim, defaultInfo } = usePageModal({
   pageContentRef
 });
-
+const execlUploadRef = ref<InstanceType<typeof ExeclUpload>>(null);
 async function handleDetailData(id, type) {
   // actionModalRef.value.onShow("兑换商品库存", type, id);
 }
@@ -43,8 +44,10 @@ async function handleDetailData(id, type) {
         >导出订单</el-button
       >
       <!-- v-if="!isSuperUser" -->
-      <!-- @click="() => execlUploadRef.onDisplay()" -->
-      <el-button type="primary">批量发货 </el-button>
+
+      <el-button type="primary" @click="() => execlUploadRef.onDisplay()"
+        >批量发货
+      </el-button>
     </template>
   </PageSearch>
   <PageContent
@@ -52,6 +55,7 @@ async function handleDetailData(id, type) {
     :content-config="contentConfig"
     @preview-btn-click="({ id }) => handleDetailData(id, 'preview')"
   />
+  <ExeclUpload ref="execlUploadRef" @onSuccess="handleResetClick" />
   <PageModal
     ref="pageModalRef"
     :modal-config="modalConfig"