CZC/operationSupport/src/views/payService/landlordBill/index.vue

<!-- 租户账单 -->
<template>
  <div class=" main">
    <!-- <organ-tree @organId="currentOrganId"></organ-tree> -->
    <div class="content-right">
      <div class="search">
        <el-radio-group
          v-model="chargeStatus"
          @change="changeRadio"
          class="zz-tab-button"
        >
          <el-radio-button label="1">未交账单</el-radio-button>
          <el-radio-button label="2">已交账单</el-radio-button>
        </el-radio-group>
        <el-input
          clearable
          placeholder="输入费用名称"
          class="search-input"
          v-trim
          v-model.trim="mixins_query.chargeName"
        ></el-input>
        <el-select
          v-model="mixins_query.communityId"
          placeholder="所属社区"
          clearable
          class="width120"
        >
          <!-- communityList -->
          <el-option
            v-for="(item,indx) in communityList"
            :key="indx"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
          <!-- <el-option
            label="物业费"
            :value="1"
          ></el-option>
          <el-option
            label="水费"
            :value="2"
          ></el-option>
          <el-option
            label="电费"
            :value="3"
          ></el-option>
          <el-option
            label="卫生费"
            :value="6"
          ></el-option>
          <el-option
            label="车位管理费"
            :value="4"
          ></el-option>
          <el-option
            label="其他费用"
            :value="7"
          ></el-option> -->
        </el-select>
        <!-- 已交 -->
        <template v-if="chargeStatus == 2">
          <!-- <el-select
            v-model="mixins_query.payType"
            class="width120"
            placeholder="缴费方式"
            clearable
          >
            <el-option
              label="微信"
              :value="7"
            ></el-option>
            <el-option
              label="支付宝"
              :value="2"
            ></el-option>
            <el-option
              label="现金"
              :value="3"
            ></el-option>
            <el-option
              label="刷卡"
              :value="6"
            ></el-option>
            <el-option
              label="其他"
              :value="5"
            ></el-option>
          </el-select> -->
          <el-date-picker
            v-model="times"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="选择开始日期"
            end-placeholder="选择结束日期"
            @change="effectiveDateToggle"
          ></el-date-picker>
        </template>

        <el-date-picker
          v-else
          v-model="times"
          value-format="yyyy-MM"
          type="monthrange"
          range-separator="至"
          start-placeholder="选择开始月"
          end-placeholder="选择结束月"
          @change="effectiveDateToggle"
        ></el-date-picker>

        <el-button
          class="search-btn"
          type="primary"
          @click="mixins_search()"
          icon="el-icon-search"
        >搜索</el-button>
        <div class="search-icon">
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="临时收款"
          >
            <i
              class="zoniot_font zoniot-icon-linshishoukuan"
              @click="collections('temporary')"
            ></i>
          </el-tooltip>
          <el-dropdown
            type="primary"
            @command="addCommand"
          >
            <span class="zoniot_font zoniot-icon-tianjia2"></span>
            <el-dropdown-menu
              slot="dropdown"
              hide-on-click="false"
              class="device-search-dropdown"
            >
              <el-dropdown-item command="batchAdd">
                <div class="upload_div">
                  <xk-upload
                    class="upload_class"
                    @callback="mixins_search"
                    :params="{ importType: 'BILL' }"
                  >
                    <span slot="content">批量导入</span>
                  </xk-upload>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="template">下载模板</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-tooltip
            v-show="chargeStatus == 1"
            class="item"
            effect="light"
            placement="bottom"
            content="批量收款"
          >
            <i
              class="zoniot_font zoniot-icon-piliangshoukuan"
              @click="collections('bulk')"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="导出"
          >
            <i
              class="zoniot_font zoniot-icon-daochu2"
              @click="exportExcel"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <zz-table
        v-if="statusTable"
        :settings="{ showCheckbox: chargeStatus == 1, showIndex: chargeStatus == 2, stripe: true }"
        :cols="chargeStatus == 1 ? cols : statusCols"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
        :selectable="selectable"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="scope"
          slot="payBeginTime"
        >
          {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
        </template>

        <template
          slot-scope="scope"
          slot="opt"
        >
          <div class="opt">
            <el-tooltip
              v-show="chargeStatus == 1"
              class="item"
              effect="light"
              placement="bottom"
              content="收款"
            >
              <i
                v-if="$collection"
                class="zoniot_font zoniot-icon-shoukuan"
                @click="collections('single', scope.row)"
                style="margin-right: 20px;"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-show="chargeStatus == 1"
              class="item"
              effect="light"
              placement="bottom"
              content="修改账单金额"
            >
              <!-- <i
                class="zoniot_font zoniot-icon-xiugaizhangdanjine"
                @click="editAmount(scope.row)"
              ></i> -->
              <img
                v-if="$billAmount"
                src="../../../assets/img/icon_xiugaizhangdanjine.png"
                alt=""
                @click="editAmount(scope.row)"
              >
            </el-tooltip>

            <el-tooltip
              v-show="chargeStatus == 1"
              class="item"
              effect="light"
              placement="bottom"
              content="修改应收金额"
            >
              <!-- <i
                class="zoniot_font zoniot-icon-xiugaiyingshoujine"
                @click="receivableAmount(scope.row)"
              ></i> -->
              <img
                v-if="$receivableAmount"
                src="../../../assets/img/icon_xiugaiyingshoujine.png"
                alt=""
                @click="receivableAmount(scope.row)"
                style="margin: 0 15px;"
              >
            </el-tooltip>

            <el-tooltip
              v-show="chargeStatus == 1"
              class="item"
              effect="light"
              placement="bottom"
              content="删除"
            >
              <i
                v-if="$editAmount"
                class="zoniot_font zoniot-icon-shanchu redText"
                @click="deluserbyidFn(scope.row.id)"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-show="chargeStatus == 2"
              class="item"
              effect="light"
              placement="bottom"
              content="详情"
            >
              <i
                class="zoniot_font zoniot-icon-xiangqing"
                @click="lookDetails(scope.row)"
              ></i>
            </el-tooltip>
          </div>
        </template>
      </zz-table>
    </div>
  </div>
</template>

<script>
import list from '@/utils/list.js';

export default {
  mixins: [list],
  name: 'propertyFee',
  data () {
    return {
      mix_path: 'payService/landlordBill/index',
      mixins_querys: {
        chargeType: '',
        communityId: ''
      },
      // currentId: '',
      cols: [
        {
          label: '订单号',
          prop: 'billNumber'
        },
        {
          label: '地址',
          prop: 'assets'
        },
        {
          label: '业主',
          prop: 'residentName',
          width: '100'
        },
        {
          label: '费用名称',
          prop: 'chargeName',
          width: '200'
        },
        {
          label: '计费日期',
          prop: 'payBeginTime',
          slot: 'payBeginTime',
          width: '150'
        },
        {
          label: '账单金额(元)',
          prop: 'amount'
        },
        {
          label: '应收金额(元)',
          prop: 'discountAmount'
        },
        {
          label: '缴费状态',
          prop: 'chargeStatusDict'
        },
        {
          label: '操作',
          prop: 'id',
          slot: 'opt'
        }
      ],
      statusCols: [
        {
          label: '订单号',
          prop: 'billNumber'
        },
        {
          label: '地址',
          prop: 'assets'
        },
        {
          label: '住户',
          prop: 'residentName'
        },
        {
          label: '费用名称',
          prop: 'chargeName'
        },
        {
          label: '计费日期',
          prop: 'payBeginTime',
          slot: 'payBeginTime',
          width: '150'
        },
        {
          label: '应收金额(元)',
          prop: 'receivableAmount'
        },
        {
          label: '实收金额(元)',
          prop: 'receivedAmount'
        },
        {
          label: '付款方式',
          prop: 'payTypeDict'
        },
        {
          label: '缴费状态',
          prop: 'chargeStatusDict'
        },
        {
          label: '缴费时间',
          prop: 'chargeDate',
          width: '150'
        },
        {
          label: '操作',
          prop: 'id',
          slot: 'opt'
        }
      ],
      chargeStatus: 1,
      chiData: {
        type: '',
        value: '',
        address: ''
      },
      mixins_post: 'post',
      selectRow: [],
      statusTable: true,
      times: [],
      communityList: [],
    };
  },
  methods: {
    //获取社区名称下拉列表
    communityNameList () {
      this.communityList = [];
      this.$http.get('/czc-community/assets/community/list', {}).then((res) => {
        res.data.map((res) => {
          this.communityList.push({
            label: res.communityName,
            id: res.id
          })
        });
      });
    },
    mixins_search () {
      this.mixins_pageset.pageNum = 1;
      if (!!this.mixins_querys.chargeType) {
        this.mixins_query.chargeType = this.mixins_querys.chargeType;
      } else {
        this.mixins_query.chargeType = '1,2,3,4,5,6,7';
      }
      if (this.chargeStatus == 1) {
        this.mixins_query.payType = '';
      }

      this.getList();
    },
    editAmount (row) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/payService/landlordBill/stePage/editAmount.vue',
          width: '550px',
          height: '180px',
          props: {
            data: row,
            callback: resolve
          },
          title: '修改应收金额'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    collections (todo, row) {
      new Promise((resolve) => {
        let title = '',
          hideStar,
          height = '300px',
          width = '900px';
        if (todo == 'temporary') {
          title = '临时收费';
          hideStar = false;
          height = '300px';
          width = '550px';
          // if (this.mixins_query.communityId == undefined) {
          //   this.$message.error('请先选择社区');
          //   return
          // }
        } else if (todo == 'bulk') {
          if (!this.selectRow.length) {
            this.$message.error('您尚未选择要收款项，请选择后再操作批量');
            return;
          }
          let tag = false;
          this.selectRow.map((item) => {
            if (this.selectRow[0].houseId == item.houseId) {
              tag = true;
            } else {
              tag = false;
            }
          });
          if (!tag) {
            this.$message.error('选择同一房间后再操作批量');
            return;
          }

          title = '批量收款';
          hideStar = true;
          height = '528px';
          width = '900px';
        } else if (todo == 'single') {
          title = '收款';
          hideStar = true;
          height = '614px';
          width = '614px';
        }

        this.$store.dispatch('addPopup', {
          url: '/payService/landlordBill/stePage/' + todo + '.vue',
          // url: '/payService/propertyFee/stepPage/single.vue',
          width: width,
          height: height,
          props: {
            data: row,
            selectRow: this.selectRow,
            chiData: this.chiData,
            tabList: todo,
            communityId: this.mixins_query.communityId,
            callback: resolve
          },
          hideStar: hideStar,
          title: title
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    effectiveDateToggle (va) {
      let arr = va;
      if (!arr) {
        arr = ['', ''];
      }
      this.mixins_query.startTime = arr[0];
      this.mixins_query.endTime = arr[1];
    },
    lookDetails (row) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/payService/propertyFee/stepPage/details.vue',
          width: '615px',
          height: '581px',
          props: {
            id: row.id,
            callback: resolve
          },
          showConfirmButton: true,
          showCancelButton: true,
          hideStar: true,
          title: '账单详情'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    // 修改应收金额
    receivableAmount (row) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/payService/landlordBill/stePage/receivable.vue',
          width: '830px',
          height: '500px',
          props: {
            id: row.id,
            communityName: row.communityName,
            assets: row.assets,
            residentName: row.residentName,
            paymentDaysDict: row.paymentDaysDict,
            amount: row.amount,
            discountAmount: row.discountAmount,
            callback: resolve,
          },
          showConfirmButton: true,
          showCancelButton: true,
          hideStar: true,
          title: '修改应收金额'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    deluserbyidFn (id) {
      const h = this.$createElement;
      this.$msgBox(`删除账单`, '删除后将无法恢复，请问是否继续?')
        .then(() => {
          this.$http.get('/czc-charge/charge/bill/delete', { billId: id }).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => { });
    },
    selectionChange (val) {
      this.selectRow = val;
    },
    // currentOrganId (data) {
    //   this.currentId = data || '';
    // },
    changeRadio () {
      this.statusTable = false;
      this.$nextTick(() => {
        this.statusTable = true;
      });
      this.times = [];
      this.Object_Set(['startTime', 'endTime', 'chargeStatus'], ['', '', this.chargeStatus]);
      this.mixins_search();
    },
    addCommand (command) {
      if (command === 'template') {
        this.__exportExcel('/sc-community/excel/download/template', { importType: 'BILL' });
        return;
      }
    },
    exportExcel () {
      this.__exportExcel('/czc-charge/charge/bill/export/excel', this.mixins_query);
    },
    typeTimeTransition (start, end) {
      let text = '';
      if (!!end) {
        let f = new Date(start).getMonth(),
          l = new Date(end).getMonth();
        if (f == l) {
          text = `${this.$moment(new Date(start)).format('YYYY年M月')}`;
        } else {
          text = `${this.$moment(new Date(start)).format('YYYY年M月')}-${this.$moment(new Date(end)).format('YYYY年M月')}`;
        }
      }

      return text;
    },
    selectable (row, index) {
      return true;
    },
    Object_Set (thisObj, val, editThisObj) {
      if (thisObj instanceof Array && val instanceof Array) {
        if (!!editThisObj) {
          thisObj.map((item, index) => {
            this[editThisObj][item] = val[index];
          });
        } else {
          thisObj.map((item, index) => {
            this['mixins_query'][item] = val[index];
          });
        }
      } else {
        if (!!editThisObj) {
          this[editThisObj][thisObj] = val;
        } else {
          this['mixins_query'][thisObj] = val;
        }
      }
    }
  },
  watch: {
    // currentId (newValue, oldValue) {
    //   this.Object_Set(['communityId', 'buildingId', 'unitName', 'houseId'], ['', '', '', '']);
    //   if (newValue.type) {
    //     this.chiData.type = newValue.type;
    //     if (newValue.type === 'community') {
    //       this.Object_Set(['communityId'], [newValue.communityId]);
    //       this.Object_Set(['value', 'address'], [newValue.communityId, newValue.communityName], 'chiData');
    //     } else if (newValue.type === 'building') {
    //       this.Object_Set(['communityId', 'buildingId'], [newValue.communityId, newValue.buildingId]);
    //       this.Object_Set(
    //         ['value', 'address'],
    //         [newValue.buildingId, newValue.communityName + ' ' + newValue.buildingName],
    //         'chiData'
    //       );
    //     } else if (newValue.type === 'unit') {
    //       this.Object_Set(
    //         ['communityId', 'buildingId', 'unitName'],
    //         [newValue.communityId, newValue.buildingId, newValue.unitId]
    //       );
    //       this.Object_Set(
    //         ['value', 'address'],
    //         [
    //           newValue.buildingId + ':' + newValue.unitId,
    //           newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName
    //         ],
    //         'chiData'
    //       );
    //     } else if (newValue.type === 'room') {
    //       this.Object_Set(
    //         ['communityId', 'buildingId', 'unitName', 'houseId'],
    //         [newValue.communityId, newValue.buildingId, newValue.unitId, newValue.houseId]
    //       );
    //       this.Object_Set(
    //         ['value', 'address'],
    //         [
    //           newValue.houseId,
    //           newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName
    //         ],
    //         'chiData'
    //       );
    //     }
    //   }
    //   this.mixins_search();
    // }
  },
  created () {
    this.mixins_dataUrl = '/czc-charge/charge/bill/page'; // 分页查询接口
    this.mixins_query = {
      chargeStatus: this.chargeStatus,
      chargeType: '1,2,3,4,5,6,7',
      payType: '',
      customerType: '1'
    };
    this.mixins_search();
    this.communityNameList();
  }
};
</script>
<style lang='scss' scoped >
@import '@assets/css/public-style.scss';
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
    .width120 {
        width: rem(120);
    }
}
</style>