生活缴费导入导出

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,225 +88,258 @@
 </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 = [
-    {
-      title: '收费类型',
-      dataIndex: 'chargeTypeName',
-      key: 'chargeTypeName',
-      width: 120,
-      align: 'center'
+const columns = [
+  {
+    title: '收费类型',
+    dataIndex: 'chargeTypeName',
+    key: 'chargeTypeName',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '收费项目',
+    dataIndex: 'chargeItem',
+    key: 'chargeItem',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '业主',
+    dataIndex: 'ownerId',
+    key: 'ownerId',
+    width: 160,
+    scopedSlots: { customRender: 'ownerId' },
+    align: 'center',
+  },
+  {
+    title: '与业主关系',
+    dataIndex: 'relationShip',
+    key: 'relationShip',
+    width: 120,
+    align: 'center',
+    customRender: function (text) {
+      return filterDictTextByStatic(RELATION_SHIP, text)
     },
-    {
-      title: '收费项目',
-      dataIndex: 'chargeItem',
-      key: 'chargeItem',
-      width: 120,
-      align: 'center'
+  },
+  {
+    title: '住户',
+    dataIndex: 'residentPhone',
+    key: 'residentPhone',
+    width: 160,
+    scopedSlots: { customRender: 'residentPhone' },
+    align: 'center',
+  },
+  {
+    title: '房屋编号',
+    dataIndex: 'roomId',
+    scopedSlots: { customRender: 'roomId' },
+    key: 'roomId',
+    width: 140,
+    align: 'center',
+  },
+  {
+    title: '金额（元）',
+    dataIndex: 'totalAmount',
+    key: 'totalAmount',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '本期读表时间',
+    dataIndex: 'meterReadingTime',
+    key: 'meterReadingTime',
+    width: 150,
+    align: 'center',
+  },
+  {
+    title: '缴费状态',
+    dataIndex: 'paymentStatus',
+    key: 'paymentStatus',
+    width: 120,
+    align: 'center',
+    customRender: function (text) {
+      return filterDictTextByStatic(PAYMENT_STATUS, text)
     },
-    {
-      title: '业主',
-      dataIndex: 'ownerId',
-      key: 'ownerId',
-      width: 160,
-      scopedSlots: { customRender: 'ownerId' },
-      align: 'center'
+  },
+  {
+    title: '缴费单号',
+    dataIndex: 'paymentNum',
+    key: 'paymentNum',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '缴费日期',
+    dataIndex: 'paymentTime',
+    key: 'paymentTime',
+    width: 150,
+    align: 'center',
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 150,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    scopedSlots: { customRender: 'action' },
+    align: 'center',
+    width: 150,
+    fixed: 'right',
+  },
+]
+
+export default {
+  name: 'PermissionListAsync',
+  mixins: [JeecgListMixin],
+  components: { NoticeModal },
+  data() {
+    return {
+      // 表头
+      columns: columns,
+      url: {
+        list: '/property-community/payment/communityPayment/list',
+        delete: '/property-community/payment/communityPayment/delete',
+        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: [],
+    }
+  },
+  created() {
+    this.getBuildingList()
+    // this.initDictData()
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
     },
-    {
-      title: '与业主关系',
-      dataIndex: 'relationShip',
-      key: 'relationShip',
-      width: 120,
-      align: 'center',
-      customRender: function(text) {
-        return filterDictTextByStatic(RELATION_SHIP, text);
+  },
+  methods: {
+    onCheckboxProps(record) {
+      let props = {
+        disabled: record.paymentStatus === 'paid',
+        name: record.chargeTypeName,
       }
+      return props
     },
-    {
-      title: '住户',
-      dataIndex: 'residentPhone',
-      key: 'residentPhone',
-      width: 160,
-      scopedSlots: { customRender: 'residentPhone' },
-      align: 'center'
-    },
-    {
-      title: '房屋编号',
-      dataIndex: 'roomId',
-      scopedSlots: { customRender: 'roomId' },
-      key: 'roomId',
-      width: 140,
-      align: 'center'
-    },
-    {
-      title: '金额（元）',
-      dataIndex: 'totalAmount',
-      key: 'totalAmount',
-      width: 120,
-      align: 'center'
-    },
-    {
-      title: '本期读表时间',
-      dataIndex: 'meterReadingTime',
-      key: 'meterReadingTime',
-      width: 150,
-      align: 'center'
-    },
-    {
-      title: '缴费状态',
-      dataIndex: 'paymentStatus',
-      key: 'paymentStatus',
-      width: 120,
-      align: 'center',
-      customRender: function(text) {
-        return filterDictTextByStatic(PAYMENT_STATUS, text);
-      }
+    async getBuildingList() {
+      let { result } = await getBuildingListApi()
+      this.treeData = result.map((item) => {
+        return {
+          title: item.buildingName,
+          key: item.id,
+        }
+      })
     },
-    {
-      title: '缴费单号',
-      dataIndex: 'paymentNum',
-      key: 'paymentNum',
-      width: 120,
-      align: 'center'
+    onClickTree(value, optios) {
+      console.log(value, optios)
     },
-    {
-      title: '缴费日期',
-      dataIndex: 'paymentTime',
-      key: 'paymentTime',
-      width: 150,
-      align: 'center'
+    onLoadData(treeNode) {
+      return new Promise(async (resolve) => {
+        if (treeNode.dataRef.children) {
+          resolve()
+          return
+        }
+        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,
+            }
+          })
+          this.treeData = [...this.treeData]
+          resolve()
+        } else {
+          let { result } = await getRoomListApi({ id: treeNode.eventKey })
+          treeNode.dataRef.children = result.map((item) => {
+            return {
+              title: item.roomNum,
+              key: item.id,
+              isLeaf: true,
+            }
+          })
+          this.treeData = [...this.treeData]
+          resolve()
+        }
+      })
     },
-    {
-      title: '创建日期',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      width: 150,
-      align: 'center'
+    onMeterReading() {
+      this.$refs.modalForm.add()
+      this.$refs.modalForm.title = '抄表'
+      this.$refs.modalForm.disableSubmit = false
     },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      scopedSlots: { customRender: 'action' },
-      align: 'center',
-      width: 150,
-      fixed: 'right'
-    }
-  ]
-
-  export default {
-    name: 'PermissionListAsync',
-    mixins: [JeecgListMixin],
-    components: {NoticeModal},
-    data() {
-      return {
-        // 表头
-        columns: columns,
-        url: {
-          list: "/property-community/payment/communityPayment/list",
-          delete: '/property-community/payment/communityPayment/delete',
-          deleteBatch: '/property-community/payment/communityPayment/deleteBatch'
-        },
-        treeData: []
-      }
+    onBatchCallpay() {
+      // console.log(this.selectionRows)
+      let chooseIds = this.selectedRowKeys.join(',')
+      this.onCallPay(chooseIds)
     },
-    created () {
-      this.getBuildingList()
-      // this.initDictData()
+    onDetail(id) {
+      this.$router.push({
+        path: '/property/living-detail?id=' + id,
+      })
     },
-    methods: {
-      onCheckboxProps(record) {
-        let props = {
-          disabled: record.paymentStatus === 'paid',
-          name: record.chargeTypeName
-        }
-        return props
-      },
-      async getBuildingList() {
-        let {result} = await getBuildingListApi()
-        this.treeData = result.map(item=> {
-          return {
-            title: item.buildingName,
-            key: item.id
-          }
-        })
-      },
-      onClickTree(value, optios) {
-        console.log(value, optios)
-      },
-      onLoadData(treeNode) {
-        return new Promise(async resolve => {
-          if (treeNode.dataRef.children) {
-            resolve();
-            return;
-          }
-          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
-              }
-            })
-            this.treeData = [...this.treeData];
-            resolve();
-          } else {
-            let {result} = await getRoomListApi({id: treeNode.eventKey})
-            treeNode.dataRef.children = result.map(item=> {
-              return {
-                title: item.roomNum,
-                key: item.id,
-                isLeaf: true
-              }
-            })
-            this.treeData = [...this.treeData];
-            resolve();
-          }
-        });
-      },
-      onMeterReading() {
-        this.$refs.modalForm.add();
-        this.$refs.modalForm.title = "抄表";
-        this.$refs.modalForm.disableSubmit = false;
-      },
-      onBatchCallpay() {
-        // console.log(this.selectionRows)
-        let chooseIds = this.selectedRowKeys.join(',')
-        this.onCallPay(chooseIds)
-      },
-      onDetail(id) {
-        this.$router.push({
-          path: '/property/living-detail?id=' + id
-        });
-      },
-      onCallPay(chooseIds) {
-        let that = this
-        this.$confirm({
-          title: "催缴账单",
-          content: "是否催缴当前选择的账单发送给对应业主?",
-          onOk: function () {
-            that.loading = true;
-            callPayMentApi({chooseIds}).then((res) => {
+    onCallPay(chooseIds) {
+      let that = this
+      this.$confirm({
+        title: '催缴账单',
+        content: '是否催缴当前选择的账单发送给对应业主?',
+        onOk: function () {
+          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);
+                that.$message.warning(res.message)
               }
-            }).finally(() => {
-              that.loading = false;
-            });
-          }
-        });
-      }
-    }
-  }
+            })
+            .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