生活缴费导入导出

src/views/information/owner/owner.vue

@@ -339,13 +339,13 @@ export default {
           return
         }
         if (typeof window.navigator.msSaveBlob !== 'undefined') {
-          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
+          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
         } else {
           let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
           let link = document.createElement('a')
           link.style.display = 'none'
           link.href = url
-          link.setAttribute('download', fileName + '.xlsx')
+          link.setAttribute('download', fileName + '.xls')
           document.body.appendChild(link)
           link.click()
           document.body.removeChild(link) //下载完成移除元素

src/views/property/living/living.vue

@@ -29,11 +29,16 @@
         <!-- 操作按钮区域 -->
         <div class="table-operator">
           <a-button @click="onMeterReading" type="primary" icon="plus">抄表</a-button>
-          <a-button type="primary" icon="download" @click="handleExportXls('t_property_settled')">导出</a-button>
+          <a-button icon="download" @click="downloadExportXls()">模板下载</a-button>
+          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
+            :action="importExcelUrl" @change="handleImportExcel">
+            <a-button type="primary" icon="import">导入</a-button>
+          </a-upload>
+          <a-button type="primary" icon="download" @click="handleExportXls('生活缴费')">导出</a-button>
           <a-dropdown v-if="selectedRowKeys.length > 0">
             <a-menu slot="overlay">
-              <a-menu-item key="1" @click="onBatchCallpay"><a-icon type="message"/>催缴</a-menu-item>
-              <a-menu-item key="2" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+              <a-menu-item key="1" @click="onBatchCallpay"><a-icon type="message" />催缴</a-menu-item>
+              <a-menu-item key="2" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
             </a-menu>
             <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
           </a-dropdown>
@@ -47,24 +52,12 @@
             <a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
           </div>
 
-          <a-table
-            ref="table"
-            size="middle"
-            :scroll="{ x: 1500, y: 300 }"
-            bordered
-            rowKey="id"
-            :columns="columns"
-            :dataSource="dataSource"
-            :pagination="ipagination"
-            :loading="loading"
-            :rowSelection="{
+          <a-table ref="table" size="middle" :scroll="{ x: 1500}" bordered rowKey="id" :columns="columns"
+            :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{
               selectedRowKeys: selectedRowKeys,
               onChange: onSelectChange,
               getCheckboxProps: onCheckboxProps
-            }"
-            class="j-table-force-nowrap"
-            @change="handleTableChange"
-          >
+            }" class="j-table-force-nowrap" @change="handleTableChange">
             <span slot="ownerId" slot-scope="text, record">
               <span>{{record.ownerName}}，{{record.ownerPhone}}</span>
             </span>
@@ -77,9 +70,9 @@
             <span slot="action" slot-scope="text, record">
               <a @click="onDetail(record.id)">查看</a>
               <template v-if="record.paymentStatus === 'unPaid'">
-                <a-divider type="vertical"/>
+                <a-divider type="vertical" />
                 <a @click="onCallPay(record.id)">催缴</a>
-                <a-divider type="vertical"/>
+                <a-divider type="vertical" />
                 <a @click="handleDelete(record)">删除</a>
               </template>
             </span>
@@ -95,25 +88,26 @@
 </template>
 
 <script>
-  import { getBuildingListApi, getUnitListApi, getRoomListApi, callPayMentApi } from '@/api/api'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import NoticeModal from './modules/NoticeModal'
-  import {PAYMENT_STATUS, RELATION_SHIP, filterDictTextByStatic} from '@/assets/static.js'
+import { getBuildingListApi, getUnitListApi, getRoomListApi, callPayMentApi } from '@/api/api'
+import { downFile } from '@/api/manage'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import NoticeModal from './modules/NoticeModal'
+import { PAYMENT_STATUS, RELATION_SHIP, filterDictTextByStatic } from '@/assets/static.js'
 
-  const columns = [
+const columns = [
   {
     title: '收费类型',
     dataIndex: 'chargeTypeName',
     key: 'chargeTypeName',
     width: 120,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '收费项目',
     dataIndex: 'chargeItem',
     key: 'chargeItem',
     width: 120,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '业主',
@@ -121,7 +115,7 @@
     key: 'ownerId',
     width: 160,
     scopedSlots: { customRender: 'ownerId' },
-      align: 'center'
+    align: 'center',
   },
   {
     title: '与业主关系',
@@ -129,9 +123,9 @@
     key: 'relationShip',
     width: 120,
     align: 'center',
-      customRender: function(text) {
-        return filterDictTextByStatic(RELATION_SHIP, text);
-      }
+    customRender: function (text) {
+      return filterDictTextByStatic(RELATION_SHIP, text)
+    },
   },
   {
     title: '住户',
@@ -139,7 +133,7 @@
     key: 'residentPhone',
     width: 160,
     scopedSlots: { customRender: 'residentPhone' },
-      align: 'center'
+    align: 'center',
   },
   {
     title: '房屋编号',
@@ -147,21 +141,21 @@
     scopedSlots: { customRender: 'roomId' },
     key: 'roomId',
     width: 140,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '金额（元）',
     dataIndex: 'totalAmount',
     key: 'totalAmount',
     width: 120,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '本期读表时间',
     dataIndex: 'meterReadingTime',
     key: 'meterReadingTime',
     width: 150,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '缴费状态',
@@ -169,30 +163,30 @@
     key: 'paymentStatus',
     width: 120,
     align: 'center',
-      customRender: function(text) {
-        return filterDictTextByStatic(PAYMENT_STATUS, text);
-      }
+    customRender: function (text) {
+      return filterDictTextByStatic(PAYMENT_STATUS, text)
+    },
   },
   {
     title: '缴费单号',
     dataIndex: 'paymentNum',
     key: 'paymentNum',
     width: 120,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '缴费日期',
     dataIndex: 'paymentTime',
     key: 'paymentTime',
     width: 150,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '创建日期',
     dataIndex: 'createTime',
     key: 'createTime',
     width: 150,
-      align: 'center'
+    align: 'center',
   },
   {
     title: '操作',
@@ -200,44 +194,52 @@
     scopedSlots: { customRender: 'action' },
     align: 'center',
     width: 150,
-      fixed: 'right'
-    }
-  ]
+    fixed: 'right',
+  },
+]
 
-  export default {
+export default {
   name: 'PermissionListAsync',
   mixins: [JeecgListMixin],
-    components: {NoticeModal},
+  components: { NoticeModal },
   data() {
     return {
       // 表头
       columns: columns,
       url: {
-          list: "/property-community/payment/communityPayment/list",
+        list: '/property-community/payment/communityPayment/list',
         delete: '/property-community/payment/communityPayment/delete',
-          deleteBatch: '/property-community/payment/communityPayment/deleteBatch'
+        deleteBatch: '/property-community/payment/communityPayment/deleteBatch',
+        exportXlsUrl: '/property-community/payment/communityPayment/exportXls',
+        importExcelUrl: 'property-community/payment/communityPayment/importExcel',
+        downloadExcelUrl: '/property-community/payment/communityPayment/downloadPaymentTemplate',
       },
-        treeData: []
+      treeData: [],
     }
   },
-    created () {
+  created() {
     this.getBuildingList()
     // this.initDictData()
   },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    },
+  },
   methods: {
     onCheckboxProps(record) {
       let props = {
         disabled: record.paymentStatus === 'paid',
-          name: record.chargeTypeName
+        name: record.chargeTypeName,
       }
       return props
     },
     async getBuildingList() {
-        let {result} = await getBuildingListApi()
-        this.treeData = result.map(item=> {
+      let { result } = await getBuildingListApi()
+      this.treeData = result.map((item) => {
         return {
           title: item.buildingName,
-            key: item.id
+          key: item.id,
         }
       })
     },
@@ -245,39 +247,39 @@
       console.log(value, optios)
     },
     onLoadData(treeNode) {
-        return new Promise(async resolve => {
+      return new Promise(async (resolve) => {
         if (treeNode.dataRef.children) {
-            resolve();
-            return;
+          resolve()
+          return
         }
-          if(treeNode.pos.split('-').length === 2) {
-            let {result} = await getUnitListApi({id: treeNode.eventKey})
-            treeNode.dataRef.children = result.map(item=> {
+        if (treeNode.pos.split('-').length === 2) {
+          let { result } = await getUnitListApi({ id: treeNode.eventKey })
+          treeNode.dataRef.children = result.map((item) => {
             return {
               title: item.unitName,
-                key: item.id
+              key: item.id,
             }
           })
-            this.treeData = [...this.treeData];
-            resolve();
+          this.treeData = [...this.treeData]
+          resolve()
         } else {
-            let {result} = await getRoomListApi({id: treeNode.eventKey})
-            treeNode.dataRef.children = result.map(item=> {
+          let { result } = await getRoomListApi({ id: treeNode.eventKey })
+          treeNode.dataRef.children = result.map((item) => {
             return {
               title: item.roomNum,
               key: item.id,
-                isLeaf: true
+              isLeaf: true,
             }
           })
-            this.treeData = [...this.treeData];
-            resolve();
+          this.treeData = [...this.treeData]
+          resolve()
         }
-        });
+      })
     },
     onMeterReading() {
-        this.$refs.modalForm.add();
-        this.$refs.modalForm.title = "抄表";
-        this.$refs.modalForm.disableSubmit = false;
+      this.$refs.modalForm.add()
+      this.$refs.modalForm.title = '抄表'
+      this.$refs.modalForm.disableSubmit = false
     },
     onBatchCallpay() {
       // console.log(this.selectionRows)
@@ -286,34 +288,58 @@
     },
     onDetail(id) {
       this.$router.push({
-          path: '/property/living-detail?id=' + id
-        });
+        path: '/property/living-detail?id=' + id,
+      })
     },
     onCallPay(chooseIds) {
       let that = this
       this.$confirm({
-          title: "催缴账单",
-          content: "是否催缴当前选择的账单发送给对应业主?",
+        title: '催缴账单',
+        content: '是否催缴当前选择的账单发送给对应业主?',
         onOk: function () {
-            that.loading = true;
-            callPayMentApi({chooseIds}).then((res) => {
+          that.loading = true
+          callPayMentApi({ chooseIds })
+            .then((res) => {
               if (res.success) {
                 //重新计算分页问题
-                that.$message.success(res.message);
+                that.$message.success(res.message)
                 // that.searchQuery();
-                that.onClearSelected();
+                that.onClearSelected()
               } else {
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.loading = false;
-            });
-          }
-        });
+                that.$message.warning(res.message)
               }
+            })
+            .finally(() => {
+              that.loading = false
+            })
+        },
+      })
+    },
+    downloadExportXls() {
+      let fileName = '生活缴费模板'
+      downFile(this.url.downloadExcelUrl, '').then((data) => {
+        if (!data) {
+          this.$message.warning('文件下载失败')
+          return
         }
+        if (typeof window.navigator.msSaveBlob !== 'undefined') {
+          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
+        } else {
+          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
+          let link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.setAttribute('download', fileName + '.xls')
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
         }
+      })
+    },
+  },
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>
\ No newline at end of file