pref:修改短信报表

portal-manager-ui/admin/src/views/dataAdmin/components/SMS/SMSRecord.vue

@@ -2,18 +2,30 @@
   <div class="callRecord-Container">
     <div class="header_box">
       <div>
-        <a-button type="success" @click="toexportTable">
+        <a-button
+          :loading="btnLoading"
+          type="success"
+          @click="handleExportTable"
+        >
           <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
         </a-button>
-        <b>累计发送短信量：<i>{{allCount}}条</i></b>
+        <b
+          >累计发送短信量：<i>{{ allCount }}条</i></b
+        >
       </div>
       <span>
         <a-space>
           <a-select :value="nowSite" @change="changeSite">
-            <a-select-option v-for="item in siteList" :key="item.value" :value="item.value"> {{item.label}} </a-select-option>
+            <a-select-option
+              v-for="item in siteList"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </a-select-option>
           </a-select>
 
-          <a-button type="primary" @click="togetSMSList()">搜索</a-button>
+          <a-button type="primary" @click="handleSearch">搜索</a-button>
         </a-space>
       </span>
     </div>
@@ -33,8 +45,12 @@
         :columns="tableHeaders"
         :dataSource="tableSourceData"
       >
+        <!-- 序号 -->
+        <span slot="index" slot-scope="text, record, index">{{
+          (tablePagination.current - 1) * tablePagination.pageSize + index + 1
+        }}</span>
         <template slot="operation" slot-scope="text, record, index">
-          <a-button type="link" @click="gotoSMSSystem()">查看明细</a-button>
+          <a-button type="link" @click="gotoSMSSystem">查看明细</a-button>
         </template>
       </a-table>
     </div>
@@ -43,20 +59,22 @@
 
 <script>
 import table from "@/mixins/table";
-import {getSMSList} from "@/api/dataAdmin"
+import { export2Excel } from "@/utils/js/exportExcel";
+import { getSMSList } from "@/api/dataAdmin";
 export default {
   mixins: [table],
   name: "PortalAdminVuePickUpRecord",
   data() {
     return {
+      btnLoading: false,
       tableHeaders: [
         {
           title: "序号",
-          dataIndex: "index",
           width: "60px",
-          key: "index",
           align: "center",
-          customRender: (text, record, index) => `${index + 1}`,
+          scopedSlots: {
+            customRender: "index",
+          },
         },
         {
           title: "月度时间",
@@ -86,99 +104,120 @@ export default {
         },
       ],
       searchName: undefined,
-      nowSite:null,
-      siteList:[],
-      allCount:0
+      nowSite: null,
+      siteList: [],
+      allCount: 0,
+      tableSelectedKeys: [],
+      tableSelectedRows: [],
+      tHeader: [
+        // 导出的表头名信息
+        "月度时间",
+        "发送量",
+        "账单生成时间",
+      ],
+      filterVal: [
+        // 导出的表头字段名，需要导出表格字段名
+        "month",
+        "send_num",
+        "update_time",
+      ],
     };
   },
   components: {},
   mounted() {
     this.setMoment();
-    this.getSiteData()
-    this.togetSMSList()
+    this.getSiteData();
+    this.togetSMSList();
   },
   methods: {
-    //导出
-    toexportTable() {
-        let tableData = [];
-        if (this.tableSelectedRows.length == 0) {
-            
-            // 获取表信息
-            getSMSList({
-              siteid:this.nowSite,
-              page:1,
-              size:-1,
-            }).then((res)=>{
-              const {code,data} = res
-              if(code==1){
-                tableData = JSON.parse(JSON.stringify(data.list.data));
-
-                let tableColumns = JSON.parse(JSON.stringify(this.tableHeaders));
-                let newTableData = tableData.map(item => {
-                    let obj = {};
-                    for (let key in item) {
-                        obj[key] = item[key];
-                    }
-                    return obj;
-                })
-                let exprotExcelName = `${this.nowDay} / ${this.nowTime} / ${this.$route['meta']['title'] || '报表信息统计'}`;
-                this.exportExcel(tableColumns, newTableData, exprotExcelName);
-              }
-            })
-        } else {
-            tableData = JSON.parse(JSON.stringify(this.tableSelectedRows));
-            let tableColumns = JSON.parse(JSON.stringify(this.tableHeaders));
-            let newTableData = tableData.map(item => {
-                let obj = {};
-                for (let key in item) {
-                    obj[key] = item[key];
-                }
-                return obj;
-            })
-            let exprotExcelName = `${this.nowDay} / ${this.nowTime} / ${this.$route['meta']['title'] || '报表信息统计'}`;
-            this.exportExcel(tableColumns, newTableData, exprotExcelName);
-        }
-
-    },
-    gotoSMSSystem(){
-      window.location.href="http://sms.wx3.com.cn/admin"
+    gotoSMSSystem() {
+      window.open("http://sms.wx3.com.cn/admin", "_blank");
     },
-    changeSite(e){
-      this.nowSite = e
+    changeSite(e) {
+      this.nowSite = e;
     },
     // 获取当前站点和站点列表
-    getSiteData(){
-      this.nowSite = JSON.parse(localStorage.getItem('siteId'))
-      this.siteList = []
-      JSON.parse(localStorage.getItem('siteList')).forEach(item => {
+    getSiteData() {
+      this.nowSite = JSON.parse(localStorage.getItem("siteId"));
+      this.siteList = [];
+      JSON.parse(localStorage.getItem("siteList")).forEach((item) => {
         this.siteList.push({
-          label:item.siteName,
-          value:item.id
-        })
+          label: item.siteName,
+          value: item.id,
+        });
       });
     },
-    togetSMSList(){
+    // 搜索
+    handleSearch() {
+      this.tablePagination = 1;
+      this.tableSelectedKeys = [];
+      this.tableSelectedRows = [];
+      this.togetSMSList();
+    },
+    togetSMSList() {
       // 获取表信息
       getSMSList({
-        siteid:this.nowSite,
-        page:this.tablePagination.current,
-        size:this.tablePagination.pageSize,
-      }).then((res)=>{
-        const {code,data} = res
-        if(code==1){
+        siteid: this.nowSite,
+        page: this.tablePagination.current,
+        size: this.tablePagination.pageSize,
+      }).then((res) => {
+        const { code, data } = res;
+        if (code == 1) {
           console.log(res);
-          this.tableSourceData = data.list.data
-          this.allCount=data.all_num
-          this.tablePagination.total = data.list.total
+          this.tableSourceData = data.list.data;
+          this.allCount = data.all_num;
+          this.tablePagination.total = data.list.total;
         }
-      })
-    }
+      });
+    },
+    // 选中
+    onSelectChange(keys, rows) {
+      this.tableSelectedKeys = keys;
+      const res = new Map();
+      this.tableSelectedRows = [...this.tableSelectedRows, ...rows]
+        .filter((v) => {
+          return !res.has(v.id) && res.set(v.id, 1);
+        })
+        .filter((v) => {
+          return this.tableSelectedKeys.some((val) => v.id == val);
+        });
+    },
+    // 导出
+    async handleExportTable() {
+      this.btnLoading = true;
+      if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
+        export2Excel(
+          this.tHeader,
+          this.filterVal,
+          this.tableSelectedRows,
+          "短信记录报表" + this.$moment().format("YYYYMMDDHHmmss")
+        );
+      } else {
+        getSMSList({
+          siteid: this.nowSite,
+          page: 1,
+          size: -1,
+        }).then((res) => {
+          const { code, data } = res;
+          if (code == 1) {
+            if (!data.list.data.length) return;
+            export2Excel(
+              this.tHeader,
+              this.filterVal,
+              data.list.data,
+              "短信记录报表" + this.$moment().format("YYYYMMDDHHmmss")
+            );
+          }
+        });
+      }
+      this.btnLoading = false;
+    },
+  },
+  watch: {
+    tablePagination() {
+      this.togetSMSList();
+    },
   },
-  watch:{
-    tablePagination(){
-        this.togetSMSList()
-    }
-}
 };
 </script>
 
@@ -187,29 +226,28 @@ export default {
   display: block;
 }
 
-  .header_box {
-    padding-bottom: 1rem;
+.header_box {
+  padding-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & > div {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
-    & > div {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
 
-      b {
+    b {
+      font-style: normal;
+      font-weight: unset;
+      font-size: 16px;
+      margin-left: 20px;
+      i {
+        color: #0595fd;
         font-style: normal;
-        font-weight: unset;
-        font-size: 16px;
-        margin-left: 20px;
-        i {
-          color: #0595fd;
-          font-style: normal;
-        }
       }
     }
   }
-
+}
 </style>