业绩提成导出功能

package.json

@@ -35,7 +35,7 @@
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.0",
     "element-plus": "2.2.27",
-    "file-saver": "2.0.5",
+    "file-saver": "^2.0.5",
     "fuse.js": "6.6.2",
     "html2canvas": "^1.4.1",
     "js-cookie": "3.0.1",
@@ -53,7 +53,8 @@
     "vue-i18n": "^9.3.0-beta.17",
     "vue-router": "4.1.4",
     "vue-super-flow": "^1.3.8",
-    "vue3-print-nb": "^0.1.4"
+    "vue3-print-nb": "^0.1.4",
+    "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/components/byTable/index.vue

@@ -149,7 +149,7 @@
 
       <el-table
         ref="hocElTable"
-        
+        id="example"
         :data="source"
         v-if="!hideTable"
         style="width: 100%"

src/components/contractCom/contractDetails.vue

@@ -1,25 +1,13 @@
 <template>
   <div>
-    <el-tabs
-      v-model="activeName"
-      class="demo-tabs"
-      @tab-click="handleClick"
-      @tab-change="handleChange"
-      stretch
-    >
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleChange" stretch>
       <el-tab-pane label="销售合同" name="first"></el-tab-pane>
       <el-tab-pane label="采购合同" name="second"></el-tab-pane>
       <el-tab-pane label="交易明细" name="third"></el-tab-pane>
     </el-tabs>
     <div class="content-box" v-if="activeName !== 'third'">
       <div class="left">
-        <div
-          v-for="i in leftList"
-          :key="i.id"
-          class="left-item"
-          :style="{ color: currentItem.id === i.id ? '#409eff' : '' }"
-          @click="handleItemClick(i)"
-        >
+        <div v-for="i in leftList" :key="i.id" class="left-item" :style="{ color: currentItem.id === i.id ? '#409eff' : '' }" @click="handleItemClick(i)">
           <div v-if="activeName === 'first'">{{ i.code }}</div>
           <div v-if="activeName === 'second'">
             {{ i.code }}
@@ -29,9 +17,7 @@
       <div class="right">
         <div v-if="leftList && leftList.length > 0">
           <div style="text-align: right" v-if="activeName === 'first'">
-            <el-button type="primary" @click="pushProcessApproval(currentItem)"
-              >查看详情</el-button
-            >
+            <el-button type="primary" @click="pushProcessApproval(currentItem)">查看详情</el-button>
           </div>
           <div v-if="activeName === 'first'">
             <ContractPDF :rowData="rowData"></ContractPDF>
@@ -44,14 +30,8 @@
       </div>
     </div>
     <div v-if="activeName === 'third'">
-      <byTable
-        :hidePagination="true"
-        :hideSearch="true"
-        :source="tableData"
-        :config="config"
-        highlight-current-row
-        :action-list="[]"
-      >
+      <el-button type="primary" @click="downExcel">下载至Excel</el-button>
+      <byTable :hidePagination="true" :hideSearch="true" :source="tableData" :config="config" highlight-current-row :action-list="[]">
         <template #amount="{ item }">
           <div :style="'color: ' + (item.status === '10' ? '#04cb04;' : 'red;')">
             <span style="padding-right: 4px">{{ item.currency }}</span>
@@ -60,11 +40,7 @@
           </div>
         </template>
         <template #accountManagementName="{ item }">
-          <div>
-            {{ item.accountManagementName }} （{{
-              item.accountManagementOpening
-            }}）
-          </div>
+          <div>{{ item.accountManagementName }} （{{ item.accountManagementOpening }}）</div>
         </template>
       </byTable>
     </div>
@@ -75,6 +51,9 @@
 import PurchasePDF from "@/components/PDF/purchasePDF.vue";
 import ContractPDF from "@/components/PDF/contractPDF.vue";
 import byTable from "@/components/byTable/index";
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   contractId: String,
@@ -206,20 +185,16 @@ const handleChange = (val) => {
   }
 };
 const getDetailsData = () => {
-  proxy
-    .post("/contract/getVersionList", { id: props.contractId })
-    .then((res) => {
-      contractDataList.value = res;
-      leftList.value = contractDataList.value;
-      if (contractDataList.value && contractDataList.value.length > 0) {
-        handleItemClick(contractDataList.value[0]);
-      }
-    });
-  proxy
-    .post("/contract/getPurchaseListByContractId", { id: props.contractId })
-    .then((res) => {
-      purchaseDataList.value = res;
-    });
+  proxy.post("/contract/getVersionList", { id: props.contractId }).then((res) => {
+    contractDataList.value = res;
+    leftList.value = contractDataList.value;
+    if (contractDataList.value && contractDataList.value.length > 0) {
+      handleItemClick(contractDataList.value[0]);
+    }
+  });
+  proxy.post("/contract/getPurchaseListByContractId", { id: props.contractId }).then((res) => {
+    purchaseDataList.value = res;
+  });
 
   proxy
     .post("/contract/getAccountRunningWaterByContractId", {
@@ -230,6 +205,25 @@ const getDetailsData = () => {
     });
 };
 getDetailsData();
+const downExcel = () => {
+  let et = XLSX.utils.table_to_book(document.getElementById("example")); //此处传入table的DOM节点
+  let etout = XLSX.write(et, {
+    bookType: "xlsx",
+    bookSST: true,
+    type: "array",
+  });
+  try {
+    FileSaver.saveAs(
+      new Blob([etout], {
+        type: "application/octet-stream",
+      }),
+      `导出文件.xlsx`
+    ); //导出的文件名
+  } catch (e) {
+    console.log(e, etout);
+  }
+  return etout;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -260,4 +254,4 @@ getDetailsData();
   line-height: 24px;
   padding-left: 4px;
 }
-</style>
+</style>

src/views/salesMange/salesMange/performance/index.vue

@@ -3,30 +3,11 @@
     <div style="padding: 20px 0 0 20px; background: #fff">
       <el-form :inline="true" :model="queryForm">
         <el-form-item label="年份">
-          <el-date-picker
-            v-model="queryForm.time"
-            type="year"
-            placeholder="请选择"
-            format="YYYY"
-            value-format="YYYY"
-            clearable
-            @change="onQuery"
-          />
+          <el-date-picker v-model="queryForm.time" type="year" placeholder="请选择" format="YYYY" value-format="YYYY" clearable @change="onQuery" />
         </el-form-item>
         <el-form-item label="业务员">
-          <el-select
-            v-model="queryForm.userId"
-            placeholder="请选择"
-            clearable
-            @change="onQuery"
-          >
-            <el-option
-              v-for="item in userList"
-              :label="item.label"
-              :value="item.value"
-              :key="item.value"
-            >
-            </el-option>
+          <el-select v-model="queryForm.userId" placeholder="请选择" clearable @change="onQuery">
+            <el-option v-for="item in userList" :label="item.label" :value="item.value" :key="item.value"> </el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -35,17 +16,7 @@
       </el-form>
     </div>
     <div style="margin: 20px 0; padding: 0 20px; background: #fff">
-      <div
-        style="
-          color: #000;
-          font-size: 14px;
-          font-weight: 700;
-          height: 60px;
-          line-height: 60px;
-        "
-      >
-        统计
-      </div>
+      <div style="color: #000; font-size: 14px; font-weight: 700; height: 60px; line-height: 60px">统计</div>
 
       <ul id="ul-box">
         <li
@@ -55,8 +26,7 @@
           class="multi-data"
           :class="'theme' + i.type"
           @click="i.click ? i.click(i, index) : ''"
-          :style="i.click ? 'cursor: pointer' : ''"
-        >
+          :style="i.click ? 'cursor: pointer' : ''">
           <div class="label">{{ i.label }}</div>
           <div class="num-warp">
             <div class="num-box" v-for="(j, jindex) in i.data" :key="jindex">
@@ -70,10 +40,7 @@
       </ul>
     </div>
 
-    <div
-      style="padding: 0 20px 20px 20px; background-color: white"
-      v-if="rateStatus"
-    >
+    <div style="padding: 0 20px 20px 20px; background-color: white" v-if="rateStatus">
       <div class="by-search">
         <div></div>
         <div style="display: flex; margin-top: 15px">
@@ -82,32 +49,21 @@
             suffix-icon="search"
             size="mini"
             v-model="sourceList.pagination.keyword"
-            @keyup.enter="getList"
-          >
+            @keyup.enter="getList">
           </el-input>
-          <el-button
-            type="primary"
-            style="margin-left: 10px"
-            size="default"
-            v-no-double-click="getList"
-            >{{ $t("common.search") }}</el-button
-          >
+          <el-button type="primary" style="margin-left: 10px" size="default" v-no-double-click="getList">{{ $t("common.search") }}</el-button>
           <!-- <div class="more-icon">
             <i class="iconfont icon-iconx_saixuan"></i>
           </div> -->
         </div>
       </div>
 
-      <el-table v-loading="loading" :data="sourceList.data">
+      <el-table v-loading="loading" :data="sourceList.data" :summary-method="getSummaries" show-summary>
         <el-table-column label="合同编号">
           <el-table-column label="" prop="contractCode" width="160">
             <template #default="{ row }">
               <div style="width: 100%">
-                <a
-                  style="color: #409eff; cursor: pointer; word-break: break-all"
-                  @click="openDetails(row)"
-                  >{{ row.contractCode }}</a
-                >
+                <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="openDetails(row)">{{ row.contractCode }}</a>
               </div>
             </template>
           </el-table-column>
@@ -129,11 +85,7 @@
           </el-table-column>
         </el-table-column>
         <el-table-column label="收入">
-          <el-table-column
-            label="合同到账"
-            prop="contractArrival"
-            width="120"
-          />
+          <el-table-column label="合同到账" prop="contractArrival" width="120" />
           <el-table-column label="退税" prop="taxReturnAmount" width="120" />
           <el-table-column label="其他收入" prop="otherIncome" width="120" />
         </el-table-column>
@@ -155,33 +107,23 @@
           <el-table-column label="收入合计" prop="totalIncome" width="120" />
           <el-table-column label="支出合计" prop="totalExpenses" width="120" />
           <el-table-column label="毛利" prop="grossGrofit" width="120" />
-          <el-table-column label="毛利率" prop="grossRofitMargin" width="120">
+          <!-- <el-table-column label="毛利率" prop="grossRofitMargin" width="120">
             <template #default="{ row }">
               <div style="width: 100%">{{ row.grossRofitMargin }}%</div>
             </template></el-table-column
-          >
+          > -->
         </el-table-column>
         <el-table-column label="提成">
           <el-table-column label="售后" prop="afterSalesAmount" width="120" />
           <el-table-column label="公共" prop="publicAmount" width="120" />
           <el-table-column label="总办" prop="haveOverallAmount" width="120" />
-          <el-table-column
-            label="部门提成"
-            prop="departmentalCommission"
-            width="120"
-          />
-          <el-table-column
-            label="个人提成"
-            prop="personalCommission"
-            width="120"
-          />
+          <el-table-column label="部门提成" prop="departmentalCommission" width="120" />
+          <el-table-column label="个人提成" prop="personalCommission" width="120" />
         </el-table-column>
         <el-table-column label="操作" align="center" width="100" fixed="right">
           <template #default="{ row }">
             <div>
-              <el-button type="primary" @click="changeExchangeRate(row)" link
-                >调整</el-button
-              >
+              <el-button type="primary" @click="changeExchangeRate(row)" link>调整</el-button>
             </div>
           </template>
         </el-table-column>
@@ -195,8 +137,7 @@
         :page-size="sourceList.pagination.pageSize"
         :total="sourceList.pagination.total"
         @size-change="handleSizeChange"
-        @current-change="handlePageChange"
-      />
+        @current-change="handlePageChange" />
     </el-row>
     <el-dialog title="提成类型配置" v-model="commissionTypeModal" width="1000">
       <div style="margin-bottom: 10px">
@@ -206,112 +147,64 @@
         <el-table-column prop="date" label="类型名称">
           <template #default="{ row, $index }">
             <div style="width: 100%">
-              <el-input
-                v-model="commissionTypeList[$index].name"
-                placeholder="类型名称"
-              />
+              <el-input v-model="commissionTypeList[$index].name" placeholder="类型名称" />
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="afterSalesRatio" label="售后占比">
           <template #default="{ row, $index }">
             <div style="width: 100%">
-              <el-input
-                type="number"
-                :min="0"
-                v-model="commissionTypeList[$index].afterSalesRatio"
-                placeholder="售后占比"
-              />
+              <el-input type="number" :min="0" v-model="commissionTypeList[$index].afterSalesRatio" placeholder="售后占比" />
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="afterSalesRatio" label="公共占比">
           <template #default="{ row, $index }">
             <div style="width: 100%">
-              <el-input
-                type="number"
-                :min="0"
-                v-model="commissionTypeList[$index].publicRatio"
-                placeholder="公共占比"
-              />
+              <el-input type="number" :min="0" v-model="commissionTypeList[$index].publicRatio" placeholder="公共占比" />
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="afterSalesRatio" label="总办占比">
           <template #default="{ row, $index }">
             <div style="width: 100%">
-              <el-input
-                type="number"
-                :min="0"
-                v-model="commissionTypeList[$index].haveOverallRatio"
-                placeholder="总办占比"
-              />
+              <el-input type="number" :min="0" v-model="commissionTypeList[$index].haveOverallRatio" placeholder="总办占比" />
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="afterSalesRatio" label="部门占比">
           <template #default="{ row, $index }">
             <div style="width: 100%">
-              <el-input
-                type="number"
-                :min="0"
-                v-model="commissionTypeList[$index].departmentalRatio"
-                placeholder="部门占比"
-              />
+              <el-input type="number" :min="0" v-model="commissionTypeList[$index].departmentalRatio" placeholder="部门占比" />
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="afterSalesRatio" label="个人占比">
           <template #default="{ row, $index }">
             <div style="width: 100%">
-              <el-input
-                type="number"
-                :min="0"
-                v-model="commissionTypeList[$index].personalRatio"
-                placeholder="个人占比"
-              />
+              <el-input type="number" :min="0" v-model="commissionTypeList[$index].personalRatio" placeholder="个人占比" />
             </div>
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="100" fixed="right">
           <template #default="{ row, $index }">
             <div>
-              <el-button
-                type="primary"
-                @click="deleteCommissionTypeList(row, $index)"
-                link
-                >删除</el-button
-              >
+              <el-button type="primary" @click="deleteCommissionTypeList(row, $index)" link>删除</el-button>
             </div>
           </template>
         </el-table-column>
       </el-table>
       <template #footer>
-        <el-button @click="commissionTypeModal = false" size="large"
-          >取 消</el-button
-        >
-        <el-button type="primary" @click="submitCommissionType()" size="large"
-          >确 定</el-button
-        >
+        <el-button @click="commissionTypeModal = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitCommissionType()" size="large">确 定</el-button>
       </template>
     </el-dialog>
     <el-dialog title="调整" v-if="openChange" v-model="openChange" width="700">
-      <byForm
-        :formConfig="formChangeConfig"
-        :formOption="formOption"
-        v-model="formChangeData.data"
-        :rules="rules"
-        ref="change"
-      >
+      <byForm :formConfig="formChangeConfig" :formOption="formOption" v-model="formChangeData.data" :rules="rules" ref="change">
         <template #commissionType>
           <!-- commissionTypeList -->
           <div>
-            <el-button
-              v-for="i in commissionTypeListShowCopy"
-              :key="i.id"
-              @click="updateFormChangeData(i)"
-              >{{ i.name }}</el-button
-            >
+            <el-button v-for="i in commissionTypeListShowCopy" :key="i.id" @click="updateFormChangeData(i)">{{ i.name }}</el-button>
             <el-button @click="commissionTypeModal = true">配置</el-button>
           </div>
         </template>
@@ -323,8 +216,7 @@
                   v-model="formChangeData.data.afterSalesRatio"
                   placeholder="请输入"
                   :formatter="(val) => val.replace(/[^\d]/g, '')"
-                  :parser="(val) => val.replace(/[^\d]/g, '')"
-                >
+                  :parser="(val) => val.replace(/[^\d]/g, '')">
                   <template #suffix>
                     <span> % </span>
                   </template></el-input
@@ -342,8 +234,7 @@
                   v-model="formChangeData.data.publicRatio"
                   placeholder="请输入"
                   :formatter="(val) => val.replace(/[^\d]/g, '')"
-                  :parser="(val) => val.replace(/[^\d]/g, '')"
-                >
+                  :parser="(val) => val.replace(/[^\d]/g, '')">
                   <template #suffix>
                     <span> % </span>
                   </template></el-input
@@ -361,8 +252,7 @@
                   v-model="formChangeData.data.haveOverallRatio"
                   placeholder="请输入"
                   :formatter="(val) => val.replace(/[^\d]/g, '')"
-                  :parser="(val) => val.replace(/[^\d]/g, '')"
-                >
+                  :parser="(val) => val.replace(/[^\d]/g, '')">
                   <template #suffix>
                     <span> % </span>
                   </template></el-input
@@ -380,17 +270,13 @@
                   v-model="formChangeData.data.departmentalRatio"
                   placeholder="请输入"
                   :formatter="(val) => val.replace(/[^\d]/g, '')"
-                  :parser="(val) => val.replace(/[^\d]/g, '')"
-                >
+                  :parser="(val) => val.replace(/[^\d]/g, '')">
                   <template #suffix>
                     <span> % </span>
                   </template></el-input
                 >
               </el-col>
-              <el-co :span="20" style="padding-left: 10px">
-                默认 33%。即：部门提成 = （总收入 - 总支出 - 售后 - 公共 -
-                总办） * 部门占比
-              </el-co>
+              <el-co :span="20" style="padding-left: 10px"> 默认 33%。即：部门提成 = （总收入 - 总支出 - 售后 - 公共 - 总办） * 部门占比 </el-co>
             </el-row>
           </div>
         </template>
@@ -402,35 +288,24 @@
                   v-model="formChangeData.data.personalRatio"
                   placeholder="请输入"
                   :formatter="(val) => val.replace(/[^\d]/g, '')"
-                  :parser="(val) => val.replace(/[^\d]/g, '')"
-                >
+                  :parser="(val) => val.replace(/[^\d]/g, '')">
                   <template #suffix>
                     <span> % </span>
                   </template></el-input
                 >
               </el-col>
-              <el-co :span="20" style="padding-left: 10px">
-                默认 17%。即：个人提成 = （总收入 - 总支出 - 售后 - 公共 -
-                总办）* 个人占比
-              </el-co>
+              <el-co :span="20" style="padding-left: 10px"> 默认 17%。即：个人提成 = （总收入 - 总支出 - 售后 - 公共 - 总办）* 个人占比 </el-co>
             </el-row>
           </div>
         </template>
       </byForm>
       <template #footer>
         <el-button @click="openChange = false" size="large">取 消</el-button>
-        <el-button type="primary" @click="submitChangeForm()" size="large"
-          >确 定</el-button
-        >
+        <el-button type="primary" @click="submitChangeForm()" size="large">确 定</el-button>
       </template>
     </el-dialog>
 
-    <el-dialog
-      title="合同详情"
-      v-if="openDetailsDialog"
-      v-model="openDetailsDialog"
-      width="1100"
-    >
+    <el-dialog title="合同详情" v-if="openDetailsDialog" v-model="openDetailsDialog" width="1100">
       <ContractDetails :contractId="currentContractId"></ContractDetails>
     </el-dialog>
   </div>
@@ -466,7 +341,7 @@ const sourceList = ref({
   pagination: {
     total: 0,
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 200,
     keyword: "",
     settlementStatus: "",
     userId: "",
@@ -558,9 +433,7 @@ const statConfig = computed(() => [
     ],
   },
 ]);
-const getHeaderData = () => {
- 
-};
+const getHeaderData = () => {};
 // getHeaderData();
 const config = computed(() => {
   return [];
@@ -615,11 +488,9 @@ const getList = async (req) => {
       loading.value = false;
     }, 200);
   });
-  proxy
-    .post("/commission/getHeadStatistics", sourceList.value.pagination)
-    .then((res) => {
-      headerData.value = res;
-    });
+  proxy.post("/commission/getHeadStatistics", sourceList.value.pagination).then((res) => {
+    headerData.value = res;
+  });
 };
 
 const onQuery = () => {
@@ -803,17 +674,15 @@ const submitCommissionType = () => {
       });
     }
   }
-  proxy
-    .post("/commissionType/addOrEdit", commissionTypeList.value)
-    .then((res) => {
-      commissionTypeModal.value = false;
-      getCommissionType();
+  proxy.post("/commissionType/addOrEdit", commissionTypeList.value).then((res) => {
+    commissionTypeModal.value = false;
+    getCommissionType();
 
-      ElMessage({
-        message: "操作成功",
-        type: "success",
-      });
+    ElMessage({
+      message: "操作成功",
+      type: "success",
     });
+  });
 };
 
 const commissionTypeListPush = () => {
@@ -839,19 +708,8 @@ const changeExchangeRate = (row) => {
 
 const submitChangeForm = () => {
   change.value.handleSubmit(() => {
-    const {
-      afterSalesRatio,
-      publicRatio,
-      haveOverallRatio,
-      departmentalRatio,
-      personalRatio,
-    } = formChangeData.data;
-    let sum =
-      Number(afterSalesRatio) +
-      Number(publicRatio) +
-      Number(haveOverallRatio) +
-      Number(departmentalRatio) +
-      Number(personalRatio);
+    const { afterSalesRatio, publicRatio, haveOverallRatio, departmentalRatio, personalRatio } = formChangeData.data;
+    let sum = Number(afterSalesRatio) + Number(publicRatio) + Number(haveOverallRatio) + Number(departmentalRatio) + Number(personalRatio);
     if (sum > 100)
       return ElMessage({
         message: "全部占比不可大于100%",
@@ -884,6 +742,87 @@ const openDetails = (row) => {
   currentContractId.value = row.contractId;
   openDetailsDialog.value = true;
 };
+const getSummaries = (param) => {
+  let obj = {
+    3: {
+      label: "contractAmount",
+      num: 2,
+    },
+    4: {
+      label: "contractArrival",
+      num: 2,
+    },
+    5: {
+      label: "taxReturnAmount",
+      num: 2,
+    },
+    6: {
+      label: "otherIncome",
+      num: 2,
+    },
+    7: {
+      label: "purchaseAmount",
+      num: 2,
+    },
+    8: {
+      label: "payForGoods",
+      num: 2,
+    },
+    9: {
+      label: "otherExpenses",
+      num: 2,
+    },
+    10: {
+      label: "totalIncome",
+      num: 2,
+    },
+    11: {
+      label: "totalExpenses",
+      num: 2,
+    },
+    12: {
+      label: "grossGrofit",
+      num: 2,
+    },
+    13: {
+      label: "afterSalesAmount",
+      num: 2,
+    },
+    14: {
+      label: "publicAmount",
+      num: 2,
+    },
+    15: {
+      label: "haveOverallAmount",
+      num: 2,
+    },
+    16: {
+      label: "departmentalCommission",
+      num: 2,
+    },
+    17: {
+      label: "personalCommission",
+      num: 2,
+    },
+  };
+  const { columns, data } = param;
+  const sums = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = "合计：";
+    } else {
+      if (obj[index] && obj[index].label) {
+        let list = sourceList.value.data.map((item) => item[obj[index].label]);
+        if (list && list.length > 0) {
+          sums[index] = list.reduce((accumulator, currentValue) => accumulator + currentValue, 0).toFixed(obj[index].num);
+        } else {
+          sums[index] = 0;
+        }
+      }
+    }
+  });
+  return sums;
+};
 </script>
 
 <style lang="scss" scoped>