feat:前端页面xlsx导出

src/components/PageContent/src/actions/action-export.tsx

@@ -1,8 +1,6 @@
-import { ElButton, ElMessage } from "element-plus";
+import { ElButton } from "element-plus";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { defineComponent } from "vue";
-import { utils, writeFile } from "xlsx";
-import { useResponseHandle } from "/@/hooks";
 import { exportPageContent } from "/@/utils/export";
 
 //execl导出

src/utils/details/purchase.ts

@@ -5,6 +5,7 @@
 import { ElTag } from "element-plus";
 import { h } from "vue";
 import { send_status_list } from "../status";
+import { createTooltip } from "../tootip";
 import { DescriptionColumns } from "/@/components/BasicDescriptions";
 
 export const PURCHASE_STATUS = [
@@ -116,13 +117,11 @@ export const PURCHAS_COLUMNS: DescriptionColumns = [
   {
     label: "采购单名称",
     field: "name",
-    labelWidth: "100px",
-    span: 2
+    span: 6
   },
   {
     label: "采购编号",
     field: "sequenceNo",
-    labelWidth: "80",
     span: 2
   },
   {
@@ -186,12 +185,103 @@ export const PURCHAS_COLUMNS: DescriptionColumns = [
     field: "qrdCode"
   },
   {
-    label: "商品编号",
-    field: "goodNo"
+    label: "供应商编号",
+    field: "supplierNo"
+  },
+  {
+    label: "供应商名称",
+    field: "supplierName"
+  },
+  {
+    label: "已付金额",
+    field: "apay_fee"
+  },
+  {
+    label: "待付金额",
+    field: "wpay_fee"
+  },
+  {
+    label: "已回票",
+    field: "ainv_fee"
+  },
+  {
+    label: "未回票",
+    field: "winv_fee"
+  },
+  {
+    label: "发货方式",
+    field: "sendType",
+    render(type) {
+      return h(ElTag, null, {
+        default: () => SEND_TYPE.find(c => c.value === type)?.label
+      });
+    }
+  },
+  {
+    label: "备库人员",
+    field: "bkCreater"
+  },
+  {
+    label: "发货状态",
+    field: "sendStatus",
+    render(type) {
+      return h(ElTag, null, {
+        default: () => send_status_list.find(c => c.value === type)?.label
+      });
+    }
+  },
+  {
+    label: "未发货数量",
+    field: "wsendNum"
+  },
+  {
+    label: "发货数量",
+    field: "sendNum"
+  },
+  {
+    label: "备注",
+    field: "remark"
+  },
+  {
+    label: "付款状态",
+    field: "pay_status",
+    render(type) {
+      return h(ElTag, null, {
+        default: () => PAY_STATUS.find(c => c.value === type)?.label
+      });
+    }
   },
+  {
+    label: "发票状态",
+    field: "inv_status",
+    render(type) {
+      return h(ElTag, null, {
+        default: () => INV_STATUS.find(c => c.value === type)?.label
+      });
+    }
+  },
+  {
+    label: "工差重量",
+    field: "diff_weight"
+  },
+  {
+    label: "工差金额",
+    field: "diff_fee"
+  },
+  {
+    label: "退货数量",
+    field: "thNum"
+  }
+];
+
+
+//商品详情
+export const PURCHAS_PRODUCT_COLUMNS = [
   {
     label: "商品名称",
-    field: "ownerid"
+    field: "goodName",
+    span: 6,
+    render: (goodName, { goodNo }) => createTooltip(goodName, '商品编号 : ' + goodNo, 260),
   },
   {
     label: "商品类类型",
@@ -206,6 +296,10 @@ export const PURCHAS_COLUMNS: DescriptionColumns = [
     label: "品牌",
     field: "goodBrand"
   },
+  {
+    label: "单位",
+    field: "goodUnit"
+  },
   {
     label: "一级分类",
     field: "firstCat"
@@ -222,10 +316,6 @@ export const PURCHAS_COLUMNS: DescriptionColumns = [
     label: "核算码",
     field: "fundCode"
   },
-  {
-    label: "单位",
-    field: "goodUnit"
-  },
   {
     label: "工艺描述",
     field: "goodDesc"
@@ -299,92 +389,4 @@ export const PURCHAS_COLUMNS: DescriptionColumns = [
     label: "总价",
     field: "totalPrice"
   },
-  {
-    label: "供应商编号",
-    field: "supplierNo"
-  },
-  {
-    label: "供应商名称",
-    field: "supplierName"
-  },
-  {
-    label: "已付金额",
-    field: "apay_fee"
-  },
-  {
-    label: "待付金额",
-    field: "wpay_fee"
-  },
-  {
-    label: "已回票",
-    field: "ainv_fee"
-  },
-  {
-    label: "未回票",
-    field: "winv_fee"
-  },
-  {
-    label: "发货方式",
-    field: "sendType",
-    render(type) {
-      return h(ElTag, null, {
-        default: () => SEND_TYPE.find(c => c.value === type)?.label
-      });
-    }
-  },
-  {
-    label: "备库人员",
-    field: "bkCreater"
-  },
-  {
-    label: "发货状态",
-    field: "sendStatus",
-    render(type) {
-      return h(ElTag, null, {
-        default: () => send_status_list.find(c => c.value === type)?.label
-      });
-    }
-  },
-  {
-    label: "未发货数量",
-    field: "wsendNum"
-  },
-  {
-    label: "发货数量",
-    field: "sendNum"
-  },
-  {
-    label: "备注",
-    field: "remark"
-  },
-  {
-    label: "付款状态",
-    field: "pay_status",
-    render(type) {
-      return h(ElTag, null, {
-        default: () => PAY_STATUS.find(c => c.value === type)?.label
-      });
-    }
-  },
-  {
-    label: "发票状态",
-    field: "inv_status",
-    render(type) {
-      return h(ElTag, null, {
-        default: () => INV_STATUS.find(c => c.value === type)?.label
-      });
-    }
-  },
-  {
-    label: "工差重量",
-    field: "diff_weight"
-  },
-  {
-    label: "工差金额",
-    field: "diff_fee"
-  },
-  {
-    label: "退货数量",
-    field: "thNum"
-  }
-];
+]

src/utils/export.ts

@@ -1,13 +1,15 @@
 import { ElMessage } from "element-plus";
 import { utils, writeFile } from "xlsx";
-import { responseHandle } from "./responseHandle";
 import { httpExport } from "/@/api/export";
+import { responseHandle } from "./responseHandle";
 
 type Options<T> = {
   //导出方式 http(网络请求) front(前端导出)
   type: 'front' | 'http';
   //type为http时需要url作为请求url
   url?: string;
+  //type未http时请求的参数
+  params?: any;
   //type为front时 需要传入导出的数据
   data?: T[]
   //ttpe为front时 需要传入导出的列
@@ -19,8 +21,10 @@ type Options<T> = {
 //要排除的列
 const EXCLUDE_COLUMNS = ['序号', '操作']
 
+//纯前端导出
+function frontEndExport<T>(_options: Pick<Options<T>, 'data' | 'columns' | 'name'>) {
+  const { data, columns, name } = _options;
 
-function frontEndExport<T>({ data, columns, name }: Pick<Options<T>, 'data' | 'columns' | 'name'>) {
   if (!data || !columns) return
   if (data.length === 0) return ElMessage.warning('请打开勾选列并勾选导出数据')
 
@@ -38,23 +42,30 @@ function frontEndExport<T>({ data, columns, name }: Pick<Options<T>, 'data' | 'c
   writeFile(workBook, name)
 }
 
-async function httpRequsetExport<T>(_options: Pick<Options<T>, 'url' | 'name'>) {
+//配合后端文件流导出
+async function httpRequsetExport<T>(_options: Pick<Options<T>, 'url' | 'name' | 'params'>) {
   if (!_options.url) return
 
-  const { code, message, data } = await httpExport(_options.url);
+
+  const { code, message, data } = await httpExport(_options.url, {
+    data: _options.params
+  });
 
   function handler() {
     const url = window.URL.createObjectURL(
+      //todo:blob对象类型
       new Blob([data], {
         type: ''
       })
     )
 
+    //创建a标签 执行下载
     const link = document.createElement('a');
     link.style.display = 'none'
     link.href = url
     link.setAttribute('download', _options.name)
 
+    //删除a标签 释放url
     document.appendChild(link)
     link.click();
     link.remove();
@@ -97,6 +108,8 @@ export function exportPageContent<T = any>({ type, url, columns, data, name: _na
     case 'http':
       httpRequsetExport({ url, name })
       break;
+    default:
+      break;
   }
 }
 

src/views/InvoiceSales/sheetOrderPool/config/content.config.ts

@@ -54,15 +54,6 @@ const columns = [
     prop: "platName",
     width: 100
   },
-  // {
-  //   label: "使用状态",
-  //   width: 100,
-  //   cellRenderer: ({ row }) =>
-  //     h(ElTag, null, {
-  //       default: () =>
-  //         USE_STATUS.find(s => s.value === row.status)?.label || "--"
-  //     })
-  // },
   {
     label: "商品类型",
     width: 100,

src/views/purchase/porder/index.vue

@@ -12,7 +12,10 @@ import { cg_order_source_options } from "/@/utils/status";
 import PreviewDialog from "./preview-dialog.vue";
 import { useUserStoreHook } from "/@/store/modules/user";
 import { INPUT_MAX_LENGTH } from "/@/utils/global";
+import { exportPageContent } from "/@/utils/export";
+
 const { logout } = useNav();
+
 defineOptions({
   name: "porder"
 });
@@ -58,6 +61,7 @@ const form = reactive({
 const dataList = ref([]);
 const powers = ref([]);
 const loading = ref(true);
+const selects = ref([]);
 const { columns } = useColumns();
 const formRef = ref<FormInstance>();
 const PreviewDialogRef = ref<InstanceType<typeof PreviewDialog>>(null);
@@ -69,6 +73,15 @@ const pagination = reactive<PaginationProps>({
   background: true
 });
 
+function handleExport() {
+  exportPageContent({
+    type: 'front',
+    data: selects.value,
+    columns:columns.value,
+    name:'采购单管理.xlsx'
+  })
+ }
+
 async function handleCurrentChange(val: number) {
   form.page = val;
   await onSearch();
@@ -81,7 +94,7 @@ async function handleSizeChange(val: number) {
 }
 
 function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
+  selects.value = val;
 }
 
 async function onSearch() {
@@ -262,7 +275,9 @@ onMounted(() => {
         :dataList="dataList"
         @refresh="onSearch"
       >
-        <template #buttons />
+        <template #buttons="">
+          <el-button :icon="useRenderIcon('excel')" @click="handleExport">导出</el-button>
+        </template>
         <template v-slot="{ size, checkList }">
           <PureTable
             border

src/views/search/standBook/config/query.ts

@@ -1,4 +1,4 @@
-//采购单详情
+//采购单
 import { httpInfo as httpPurchaseInfo } from "/@/api/purchase/porder";
 import Purchase from "./../details/purchase.vue";
 
@@ -39,17 +39,9 @@ import { httpDetail as httpInvOpenInfo } from "/@/api/InvoiceSales/invoiceApply"
 import InvOpen from "../details/inv-open.vue";
 
 export const QUERY_MAP = {
-  qrdNo: {
-    query: "销售订单单号",
-    detail: "销售订单详情",
-    requesetProp: "sequenceNo",
-    responseKey: "qrdNo",
-    component: Sale,
-    api: httpSaleInfo
-  },
   cgdNo: {
     query: "采购单号",
-    detail: "采购单详情",
+    detail: "采购单",
     requesetProp: "sequenceNo",
     responseKey: "cgdNo",
     component: Purchase,
@@ -57,7 +49,7 @@ export const QUERY_MAP = {
   },
   payNo: {
     query: "对账编号",
-    detail: "对账申请详情",
+    detail: "对账申请",
     requesetProp: "payNo",
     responseKey: "payNo",
     component: Reconciliation,
@@ -65,7 +57,7 @@ export const QUERY_MAP = {
   },
   dzNo: {
     query: "对账付款申请编号",
-    detail: "对账付款申请详情",
+    detail: "对账付款申请",
     component: Payment,
     responseKey: "DzNo",
     requesetProp: "DzNo",
@@ -73,15 +65,23 @@ export const QUERY_MAP = {
   },
   hpNo: {
     query: "对账回票申请编号",
-    detail: "对账回票申请详情",
+    detail: "对账回票申请",
     component: TicketReturn,
     responseKey: "hpNo",
     requesetProp: "hpNo",
     api: httpTicketReturnInfo
   },
+  qrdNo: {
+    query: "销售订单单号",
+    detail: "销售订单",
+    requesetProp: "sequenceNo",
+    responseKey: "qrdNo",
+    component: Sale,
+    api: httpSaleInfo
+  },
   logNo: {
     query: "资金认领编号",
-    detail: "资金认领详情",
+    detail: "资金认领",
     component: Tradelog,
     responseKey: "logNo",
     requesetProp: "logNo",
@@ -89,7 +89,7 @@ export const QUERY_MAP = {
   },
   tradNo: {
     query: "资金编号",
-    detail: "资金详情",
+    detail: "资金",
     component: Trade,
     responseKey: "tradNo",
     requesetProp: "tradNo",
@@ -97,7 +97,7 @@ export const QUERY_MAP = {
   },
   returnTrad: {
     query: "退款申请编号",
-    detail: "资金认领详情",
+    detail: "资金认领",
     responseKey: "returnTrad",
     requesetProp: "returnCode",
     component: Refund,
@@ -105,7 +105,7 @@ export const QUERY_MAP = {
   },
   returnInv: {
     query: "退票申请编号",
-    detail: "退票申请详情",
+    detail: "退票申请",
     component: InvRerturn,
     responseKey: "returnInv",
     requesetProp: "returnCode",
@@ -113,7 +113,7 @@ export const QUERY_MAP = {
   },
   invNo: {
     query: "开票申请编号",
-    detail: "开票申请详情",
+    detail: "开票申请",
     component: InvOpen,
     responseKey: "invNo",
     requesetProp: "invNo",

src/views/search/standBook/details/purchase.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useDetail } from "../config/detail";
 import { detailProps } from "../types";
-import { PURCHAS_COLUMNS } from "/@/utils/details/purchase";
+import { PURCHAS_COLUMNS, PURCHAS_PRODUCT_COLUMNS } from "/@/utils/details/purchase";
 import BasicDescriptions from "/@/components/BasicDescriptions";
 
 const props = defineProps(detailProps);
@@ -11,11 +11,6 @@ const { data, code, defaultRef } = useDetail(props);
 </script>
 
 <template>
-  <BasicDescriptions
-    :show="code === '0'"
-    ref="defaultRef"
-    :data="data"
-    :columns="PURCHAS_COLUMNS"
-    :col-number="3"
-  />
+  <BasicDescriptions :show="code === '0'" ref="defaultRef" :data="data" :columns="PURCHAS_COLUMNS"  />
 </template>
+P