jsm-mall-front/src/views/engineerFeeSettlement/dailyMaintenanceBalance/components/financialSummaryMonthDetail.vue

<template>
  <div>
    <div v-if="showDetail">
      <el-page-header @back="goBack" content="师傅汇总"></el-page-header>
      <br /><br />
      <!-- 筛选条件 -->
      <div>
        <el-form ref="searchForm" :model="searchForm" label-width="130px" size="mini" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="时间:" prop="month">
                <el-date-picker
                  style="width: 100%"
                  v-model="searchForm.month"
                  type="month"
                  value-format="yyyyMM"
                  placeholder="选择月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="状态:" prop="status">
                <el-select style="width: 100%" v-model="searchForm.status" placeholder="请选择">
                  <el-option value="1" label="未发放"></el-option>
                  <el-option value="2" label="已发放"></el-option>
                  <el-option value="3" label="银行处理中"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="所属网点:" prop="websiteNumber">
                <el-input v-model="searchForm.websiteNumber" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="服务人员:" prop="serviceName">
                <el-input v-model="searchForm.serviceName" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="身份证号码:" prop="idCard">
                <el-input v-model="searchForm.idCard" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="手机号:" prop="mobile">
                <el-input v-model="searchForm.mobile" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
              <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 size="mini" type="primary" @click="calculateMonthFn">月度计算费用</el-button>
          <!-- <el-button size="mini" type="primary" @click="showDetailFn">查看明细(测试)</el-button> -->
        </div>
        <div class="fr">
          <el-button type="primary" size="mini" @click="exportFn">导出数据</el-button>
          <!-- <el-button type="primary" size="mini" @click="">导入数据</el-button> -->
          <el-upload
            style="display: inline-block; margin-left: 10px"
            class="import-btn"
            action=""
            :http-request="handleImport"
            :file-list="importFileList"
            :show-file-list="false"
          >
            <el-button type="primary" size="mini">导入</el-button>
          </el-upload>
        </div>
      </div>
      <span style="color: orange; line-height: 30px"
        >注：月结算费用时，先导出数据给人力资源公司计算个税、其他费用等，再导入数据，再操作月度计算费用按钮进行费用结算！</span
      >
      <!-- 列表 -->
      <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 width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="showDetailFn(scope.row)">查看明细</el-button>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="工资条编号"
              prop="salaryNo"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="汇总月份"
              prop="month"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="left" label="状态" prop="status" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag size="mini" v-show="scope.row.status == 1" type="success">待发放</el-tag>
                <el-tag size="mini" v-show="scope.row.status == 2" type="danger">已发放</el-tag>
                <el-tag size="mini" v-show="scope.row.status == 3" type="">银行受理中</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="所属网点" prop="belongWebsite" min-width="350" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ '(' + scope.row.websitNumber + ')' + scope.row.websitName }}
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="服务人员"
              prop="serviceName"
              min-width="140"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="身份证"
              prop="idCard"
              min-width="180"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="手机号"
              prop="mobile"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="right"
              label="维修结算费用总额"
              prop="repairTotalAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.repairTotalAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="right"
              label="需扣回费用"
              prop="shouldReduceCost"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.shouldReduceCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="增减费用" prop="incrDecrCost" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.incrDecrCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="right"
              label="月度计税费用总额"
              prop="taxToatalCost"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.taxToatalCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="人力资源公司填写" prop="" min-width="100" show-overflow-tooltip>
              <el-table-column
                align="right"
                label="工伤保险"
                prop="shouldEmpInsuranceCost"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.shouldEmpInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="残保金"
                prop="shouldResidualInsuranceCost"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.shouldResidualInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="服务费用" prop="serviceCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.serviceCost | 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>
            <el-table-column align="right" label="应发工资总额" prop="issueCost" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.issueCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="right"
              label="日结累计已发"
              prop="dailySendCost"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.dailySendCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="right"
              label="月度实发工资"
              prop="monthSendCost"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.monthSendCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="每期扣费展示" prop="" min-width="120" show-overflow-tooltip>
              <el-table-column
                align="right"
                label="工伤保险已扣"
                prop="empInsuranceCost"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.empInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="残保金已扣"
                prop="residualInsuranceCost"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.residualInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="暂扣费用累计"
                prop="withholdTotalCost"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.withholdTotalCost | numToFixed }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="left" label="备注" prop="remark" min-width="200" 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>
    <ComponentDetailList
      @exportDetailFn="exportDetailFn"
      @detailFn="detailFn"
      :detailList="detailList"
      :detailTotal="detailTotal"
      v-else
    />
  </div>
</template>

<script>
import { getWorkerList, getMonthDetailList, getMonthSalaryCalculate } from '@/api/dailySettlement/financialSummaryMonth'
import { handleImport, downloadFiles } from '@/utils/util'
import ComponentDetailList from './componentDetailList'
export default {
  components: {
    ComponentDetailList
  },
  props: {
    summaryNumber: {
      type: String,
      required: true
    },
    masterNumber: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      importFileList: [],
      searchForm: {
        idCard: '',
        mobile: '',
        month: '',
        serviceName: '',
        status: '',
        summaryBatchNo: '',
        summaryCommpany: '',
        websiteNumber: ''
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      listLoading: false, // 列表加载loading
      showDetail: true,
      detailList: {},
      detailTotal: '',
      detailData: {}
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    //详情导出
    exportDetailFn(value) {
      let params = {
        ...this.detailData,
        ...value
      }
      downloadFiles('daily/summary/month/detail/export', params)
    },
    //清除
    async emptyFn() {
      await this.$refs.searchForm.resetFields()
    },
    //搜索
    searchFn() {
      this.getDataList()
    },
    //子传父事件
    async detailFn(value) {
      let params = {
        ...value,
        ...this.detailData
      }
      let res = await getMonthDetailList(params)
      this.detailList = res.data
      this.detailTotal = res.data.total
      this.showDetail = false
    },
    // 导入
    async handleImport(param) {
      const file = param.file

      const formData = new FormData()
      formData.append('file', file)

      let result = await handleImport('daily/summary/month/salary/import', formData)

      // console.log(result, 123132);
      this.importFileList = []
      if (result.code == 1) {
        this.$message.success('导入成功')
        this.getDataList()
      } else {
        this.$message.error(result.message)
        // this.$message.error(1231);
      }
    },
    //导出
    exportFn() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        summaryBatchNo: this.masterNumber,
        summaryNumber: this.summaryNumber,
        idCard: this.searchForm.idCard,
        mobile: this.searchForm.mobile,
        month: this.searchForm.month,
        serviceName: this.searchForm.serviceName,
        status: this.searchForm.status,
        websiteName: this.searchForm.websiteNumber
      }
      downloadFiles('daily/summary/month/salary/export', params)
    },
    //月度计算
    async calculateMonthFn() {
      let params = {
        summaryMonthBatchNo: this.masterNumber,
        summaryNumber: this.summaryNumber
      }
      await getMonthSalaryCalculate(params)
      this.getDataList()
      this.$message.success('月度计算成功')
    },
    //获取列表数据
    async getDataList() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        summaryBatchNo: this.masterNumber,
        summaryNumber: this.summaryNumber,
        idCard: this.searchForm.idCard,
        mobile: this.searchForm.mobile,
        serviceName: this.searchForm.serviceName,
        status: this.searchForm.status,
        websiteNumber: this.searchForm.websiteNumber,
        month: this.searchForm.month
      }
      let res = await getWorkerList(params)
      this.listTotal = res.data.total
      this.dataList = res.data.records
    },
    //师傅汇总详情
    async showDetailFn(value) {
      this.detailData = {
        serviceNumber: value.serviceNumber,
        summaryMonthBatchNo: value.summaryBatchNo,
        summaryNumber: value.summaryNumber
      }
      let params = {
        pageSize: 10,
        pageNo: 1,
        serviceNumber: value.serviceNumber,
        summaryMonthBatchNo: value.summaryBatchNo,
        summaryNumber: value.summaryNumber
      }
      let res = await getMonthDetailList(params)
      this.detailList = res.data
      this.detailTotal = res.data.total
      this.showDetail = false
    },
    //返回
    goBack() {
      this.$parent.masterDetail = false
      this.$emit('updateList')
    }
  }
}
</script>

<style></style>