item-management-web/src/views/income/myIncome.vue

<template>
  <div class="app-container organization-index">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 10px;">
      <el-tab-pane label="大中型业务" name="major">
        <y-page-list-layout :page-list="majorIncome" :page-para="listQuery1" :get-page-list="getMyMajorIncome">
          <template slot="left">
            <el-date-picker v-model="findDate" type="daterange" align="center" unlink-panels range-separator="至"
              start-placeholder="统计日期（开始）" end-placeholder="统计日期（结束）" :picker-options="pickerOptions"
              value-format="yyyy-MM-dd" style="float: left; width: 300px;">
            </el-date-picker>
            <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="searchList()"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="info" @click="exportDetail()">导出
            </el-button>
          </template>
          <parentTable slot="table" :data="majorIncome.records" style=" width: 100%;">
            <el-table-column label="姓名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="人员类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.userType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品号" width="200" align="center">
              <template slot-scope="{row}">
                <el-tag type="success">{{ row.reportNo }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" width="200" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目分类" width="100" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.businessCate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提成比例" align="center">
              <template slot-scope="{row}">
                <span>{{ row.ratio }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="总提成额(￥)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.totalAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分配比例" align="center">
              <template slot-scope="{row}">
                <span>{{ row.allotRatio * 100 }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="提成额(￥)" align="center">
              <template slot-scope="{row}">
                <span style="color:red">{{ row.commissionAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出报告日期" align="center">
              <template slot-scope="{row}">
                <span>{{ row.created }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实收款(￥)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.realAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提成日期" width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.settleDate }}</span>
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane label="个贷业务" name="personal">

      </el-tab-pane>
      <el-tab-pane label="资产业务" name="assets">
        <y-page-list-layout :page-list="assetsIncome" :page-para="listQuery2" :get-page-list="getMyAssetsIncome">
          <template slot="left">
            <el-date-picker v-model="findDate" type="daterange" align="center" unlink-panels range-separator="至"
              start-placeholder="统计日期（开始）" end-placeholder="统计日期（结束）" :picker-options="pickerOptions"
              value-format="yyyy-MM-dd" style="float: left; width: 300px;">
            </el-date-picker>
            <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary"
              @click="searchListAssets()" round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearchAssets()">重置
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="info" @click="exportDetail()">导出
            </el-button>
          </template>
          <parentTable slot="table" :data="assetsIncome.records" style=" width: 100%;">
            <el-table-column label="姓名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="人员类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.userType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品号" width="200" align="center">
              <template slot-scope="{row}">
                <el-tag type="success">{{ row.reportNo }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" width="200" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目分类" width="100" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.businessCate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提成比例" align="center">
              <template slot-scope="{row}">
                <span>{{ row.ratio }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="总提成额(￥)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.totalAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分配比例" align="center">
              <template slot-scope="{row}">
                <span>{{ row.allotRatio * 100 }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="提成额(￥)" align="center">
              <template slot-scope="{row}">
                <span style="color:red">{{ row.commissionAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出报告日期" align="center">
              <template slot-scope="{row}">
                <span>{{ row.created }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实收款(￥)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.realAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提成日期" width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.settleDate }}</span>
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import YPageListLayout from '@/components/YPageListLayout'

export default {
  name: 'myIncome',
  components: {
    Breadcrumb,
    YPageListLayout
  },

  data() {
    return {
      activeName: 'major',
      listQuery1: {
        page: 1,
        size: 10,
        descs: 'id',
        startDate: '2024-05-01 00:00:00',
        endDate: '2024-06-01 00:00:00',
      },
      listQuery2: {
        page: 1,
        size: 10,
        descs: 'id',
        startDate: '',
        endDate: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      findDate: [],
      majorIncome: {
        records: []
      },
      assetsIncome: {
        records: []
      }
    }
  },
  created() {
    this.findDate.push(this.getDefaultStartDate());
    this.findDate.push(this.getDefaultEndDate());
    this.getMyMajorIncome();
  },
  methods: {

    getDefaultStartDate() {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      var currentMonth = String(currentDate.getMonth()).padStart(2, "0");
      return currentYear + '-' + currentMonth + '-' + '23'
    },

    getDefaultEndDate() {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      var currentMonth = String(currentDate.getMonth() + 1).padStart(2, "0");
      return currentYear + '-' + currentMonth + '-' + '22'
    },

    handleClick(tab, event) {
      if (tab.name === 'major') {
        this.getMyMajorIncome();
      }
      if (tab.name === 'assets') {
        this.getMyAssetsIncome();
      }
    },

    resetSearch() {
      this.$router.push({ query: {} });
      this.listQuery1 = {
        current: 1,
        size: 10,
        descs: 'id',
      }
      this.getMyMajorIncome()

    },
    resetSearchAssets() {
      this.$router.push({ query: {} });
      this.listQuery2 = {
        current: 1,
        size: 10,
        descs: 'id',
      }
      this.getMyAssetsIncome();
    },
    searchList() {
      // 重置分页
      this.listQuery1.page = 1
      this.listQuery1.size = 10
      if (this.findDate) {
        this.listQuery1.startDate = this.findDate[0] + ' 00:00:00';
        this.listQuery1.endDate = this.findDate[1] + ' 23:59:59';
      }
      this.getMyMajorIncome()

    },
    searchListAssets() {
      this.listQuery2.page = 1
      this.listQuery2.size = 10
      if (this.findDate) {
        this.listQuery2.startDate = this.findDate[0] + ' 00:00:00';
        this.listQuery2.endDate = this.findDate[1] + ' 23:59:59';
      }
      this.getMyAssetsIncome();
    },
    getMyMajorIncome() {
      this.$api.businessIncome.myMajorIncome(this.listQuery1).then(res => {
        if (res.code === 200) {
          this.majorIncome = res.data;
        }
      })
    },
    getMyAssetsIncome() {
      this.$api.businessIncome.myAssetsIncome(this.listQuery2).then(res => {
        if (res.code === 200) {
          this.assetsIncome = res.data;
        }
      })
    }

  }
}
</script>
<style scoped lang="scss"></style>