jsm-mall-front/src/views/engineerFeeSettlement/dailyMaintenanceBalance/financialSummaryMonthSettle/index.vue

<template>
  <div class="app-container">
    <div v-if="!masterDetail">
      <div v-show="showDetailed">
        <el-radio-group @change="searchFn" v-model="searchForm.status" size="mini">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="1">未发放</el-radio-button>
          <el-radio-button label="2">已发放</el-radio-button>
        </el-radio-group>
        <br /><br />
        <!-- 筛选条件 -->
        <div>
          <el-form ref="searchForm" :model="searchForm" label-width="100px" size="mini" label-position="left">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="汇总批次号:" prop="summaryBatchNo">
                  <el-input v-model="searchForm.summaryBatchNo" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="汇总时间段:" prop="summary">
                  <el-date-picker
                    v-model="searchForm.summary"
                    type="daterange"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="发放时间段:" prop="issue">
                  <el-date-picker
                    v-model="searchForm.issue"
                    type="daterange"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6">
                <el-form-item label="" class="fr">
                  <el-button size="mini" @click="emptyFn">清空</el-button>
                  <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 按钮 -->
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button type="primary" size="mini" @click="monthDoFn">月度汇总</el-button>
            <!-- <el-button type="primary" size="mini" @click="detailedFn">查看明细（测试）</el-button>
            <el-button type="primary" size="mini" @click="showDialog">发放(测试)</el-button> -->
          </div>
        </div>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table
              v-loading="listLoading"
              :data="dataList"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column align="center" label="操作" fixed min-width="200">
                <template slot-scope="scope">
                  <el-button type="text" @click="detailedFn(scope.row.summaryBatchNo)">查看明细</el-button>
                  <el-button v-if="scope.row.issueStatus == 1" type="text" @click="showDialog(scope.row.summaryBatchNo)"
                    >重新汇总</el-button
                  >
                  <el-button
                    v-if="scope.row.issueStatus == 1 || scope.row.issueStatus == 4"
                    type="text"
                    @click="grantFn(scope.row.summaryBatchNo)"
                    >发放</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="汇总批次号"
                prop="summaryBatchNo"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放月份"
                prop="summaryMonth"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算人数"
                prop="summaryPersonCount"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算工单数量(单)"
                prop="summaryOrderCount"
                min-width="140"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="right"
                label="结算金额(元)"
                prop="summaryCost"
                min-width="140"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.summaryCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="发放金额(元)"
                prop="issueCostC"
                min-width="140"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.issueCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="left" label="发放状态" prop="issueStatus" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag size="mini" v-show="scope.row.issueStatus == 1" type="">待发放 </el-tag>
                  <el-tag size="mini" v-show="scope.row.issueStatus == 2" type="success">已发放</el-tag>
                  <el-tag size="mini" v-show="scope.row.issueStatus == 3" type="info">银行受理中</el-tag>
                  <el-tag size="mini" v-show="scope.row.issueStatus == 4" type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="汇总操作人"
                prop="summaryBy"
                min-width="300"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="汇总时间"
                prop="summaryTime"
                min-width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放操作人"
                prop="issueBy"
                min-width="300"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放时间"
                prop="issueTime"
                min-width="180"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 结算网点汇总列表 -->
      <div v-show="!showDetailed">
        <el-page-header @back="goBack" content="结算网点汇总"></el-page-header>
        <br /><br />
        <!-- 按钮 -->
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button type="primary" size="mini" :disabled="selectList.length < 1" @click="networkGrant('')"
              >批量发放</el-button
            >
            <el-button type="primary" size="mini" @click="searchResFn">查询转账结果</el-button>
            <!-- <el-button type="danger" size="mini">批量驳回</el-button> -->
            <!-- <el-button type="primary" size="mini" @click="showDialog">发放(测试)</el-button>
            <el-button type="primary" size="mini" @click="masterDetailedFn">查看明细（测试）</el-button> -->
          </div>
        </div>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table
              @selection-change="selectionChangeFn"
              v-loading="listLoading"
              :data="websiteList"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column align="center" type="selection" width="55" />
              <el-table-column align="center" label="操作" fixed min-width="200">
                <template slot-scope="scope">
                  <el-button type="text" @click="masterDetailedFn(scope.row.summaryBatchNo, scope.row.summaryNumber)"
                    >查看明细</el-button
                  >
                  <el-button
                    v-if="scope.row.issueStatus == 1 || scope.row.issueStatus == 4"
                    type="text"
                    @click="networkGrant(scope.row.summaryNumber)"
                    >发放</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column align="left" label="结算单位" prop="summaryName" min-width="280" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ '(' + scope.row.summaryNumber + ')' + scope.row.summaryName }}
                </template>
              </el-table-column>
              <el-table-column align="left" label="状态" prop="issueStatus" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag size="mini" v-show="scope.row.issueStatus == 1" type="">待发放 </el-tag>
                  <el-tag size="mini" v-show="scope.row.issueStatus == 2" type="success">已发放</el-tag>
                  <el-tag size="mini" v-show="scope.row.issueStatus == 3" type="info">银行受理中</el-tag>
                  <el-tag size="mini" v-show="scope.row.issueStatus == 4" type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="汇总月份"
                prop="summaryMonth"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算人数"
                prop="summaryPersonCount"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算工单数量(单)"
                prop="summaryOrderCount"
                min-width="140"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="right"
                label="维修结算费用"
                prop="summaryCost"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.summaryCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="工伤、残保费用"
                prop="empCost"
                min-width="140"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.empCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="暂扣款" prop="withholdCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.withholdCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="增减费用" prop="decrCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.decrCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="需扣回费用" prop="reduceCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.reduceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="个税" prop="incomeCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.incomeCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="应发" prop="issueCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.issueCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="发放人"
                prop="issueBy"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放时间"
                prop="issueTime"
                min-width="180"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <el-dialog
        title="月度汇总"
        :visible.sync="dialogForm"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <el-form ref="stateForm" :rules="rules" :model="stateForm" label-width="100px">
          <el-form-item label="发放的月份" prop="time">
            <el-input disabled v-model="stateForm.time" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <FinancialSummaryMonthDetail
      @updateList="updateList"
      :masterNumber="masterNumber"
      :summaryNumber="summaryNumber"
      v-if="masterDetail"
    />
  </div>
</template>

<script>
import { getBankExcute } from '@/api/dailySettlement/financialSummaryDay'
import {
  getList,
  getMonthDo,
  getWebsiteList,
  getMonthIssue,
  getMonthRedo
} from '@/api/dailySettlement/financialSummaryMonth'
import FinancialSummaryMonthDetail from '../components/financialSummaryMonthDetail'
export default {
  components: {
    FinancialSummaryMonthDetail
  },
  data() {
    return {
      searchForm: {
        summaryBatchNo: '',
        summary: '',
        issue: '',
        status: ''
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      websiteList: [], // 月度汇总列表数据
      listLoading: false, // 列表加载loading
      showDetailed: true,
      masterDetail: false, //师傅汇总页面
      dialogForm: false,
      rules: {},
      stateForm: {
        time: ''
      },
      summaryBatchNoDetail: '',
      masterNumber: '',
      summaryNumber: '',
      selectList: [],
      batchNo: ''
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    //子传父更新列表
    updateList() {
      this.getWebsiteListFn()
    },
    //查询转账结果
    async searchResFn() {
      await getBankExcute()
      this.getWebsiteListFn()
      this.$message.success('查询成功')
    },
    //结算网点发放
    async networkGrant(value) {
      if (value == '') {
        let res = this.selectList.toString()
        await getMonthIssue({
          summaryMonthBatchNo: this.summaryBatchNoDetail,
          summaryNumberList: res
        })
        this.selectList = []
      } else {
        await getMonthIssue({
          summaryMonthBatchNo: this.summaryBatchNoDetail,
          summaryNumberList: value
        })
      }

      this.getWebsiteListFn()
      this.$message.success('发放成功，请稍后刷新查看结果')
    },
    //列表选择框
    selectionChangeFn(value) {
      const res = value.map(v => v.summaryNumber)
      this.selectList = res
    },
    //发放
    async grantFn(value) {
      let params = {
        summaryMonthBatchNo: value
      }
      await getMonthIssue(params)
      this.$message.success('发放成功，请稍后刷新查看结果')
    },
    //清除
    async emptyFn() {
      await this.$refs.searchForm.resetFields()
    },
    //搜索
    searchFn() {
      this.getDataList()
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getDataList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    //月度汇总
    async monthDoFn() {
      await getMonthDo()
      this.getDataList()
      this.$message.success('汇总成功')
    },
    //获取月度汇总列表数据
    async getWebsiteListFn() {
      let params = {
        summaryBatchNo: this.summaryBatchNoDetail
      }
      let res = await getWebsiteList(params)
      this.websiteList = res.data
    },
    //获取列表数据
    async getDataList() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        issueEndTime: this.searchForm.issue[1],
        issueStartTime: this.searchForm.issue[0],
        summaryBatchNo: this.searchForm.summaryBatchNo,
        summaryEndTime: this.searchForm.summary[1],
        summaryStartTime: this.searchForm.summary[0],
        status: this.searchForm.status
      }
      let res = await getList(params)
      this.dataList = res.data.records
      this.listTotal = res.data.total
    },
    //师傅汇总明细
    masterDetailedFn(summaryBatchNo, summaryNumber) {
      this.masterNumber = summaryBatchNo
      this.summaryNumber = summaryNumber
      this.masterDetail = true
    },
    //返回
    goBack() {
      this.showDetailed = true
      this.getDataList()
    },
    //取消
    cancelFn() {
      this.dialogForm = false
    },
    //确定
    async confirmFn() {
      await getMonthRedo({
        summaryMonthBatchNo: this.batchNo
      })
      this.getDataList()
      this.$message.success('重新汇总成功')
      this.dialogForm = false
    },
    //新增
    showDialog(value) {
      this.batchNo = value
      let date = new Date()
      let month = date.getMonth() + 1
      let year = date.getFullYear()
      this.stateForm.time = year + '-' + month
      this.dialogForm = true
    },
    //明细页面
    detailedFn(summaryBatchNo) {
      this.summaryBatchNoDetail = summaryBatchNo
      this.getWebsiteListFn()
      this.showDetailed = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  overflow-y: auto;
}
</style>