tenant-Platform/src/views/payCredit/myTask.vue

<template>
  <PageMain class="vh100">
    <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleClick">
      <el-tab-pane  name="0" class="h-full">
        <template #label>
          <el-badge :value="total1">
            <span>待付款</span>
          </el-badge>
        </template>
        <el-form v-model="queryInfo" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业务员">
                <el-input v-model="queryInfo.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="queryInfo.attrType" placeholder="请选择" clearable>
                  <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="4"></el-option>
                  <el-option label="团队" value="5"></el-option>
                  <el-option label="个代" value="6"></el-option>
                  <el-option label="电销" value="7"></el-option>
                  <el-option label="渠道" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="提现时间">
                <el-date-picker v-model="time1" type="daterange" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="20" style="display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain>重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <p style="font-size: 14px; color: #606266">应付总额：￥30000.00</p>
        <el-table :data="firstData1" height="calc(100% - 196px)" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="name" label="业务员"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型">
            <template #default="scope">
              {{ scope.row.attrType === '1' ? '前线人员' : scope.row.attrType === '2' ? '后线人员' : scope.row.attrType === '3' ? '合伙人' : scope.row.attrType === '4' ? '工作室管理员' : scope.row.attrType === '5' ? '团队' : scope.row.attrType === '6' ? '个代' : scope.row.attrType === '7' ? '电销' : scope.row.attrType === '8' ? '渠道' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="managerName" label="管理人"></el-table-column>
          <el-table-column prop="amount" label="提现金额"></el-table-column>
          <el-table-column prop="balanceAmount" label="账户余额"></el-table-column>
          <el-table-column prop="bankCardNum" label="银行卡号"></el-table-column>
          <el-table-column prop="bankName" label="银行"></el-table-column>
          <el-table-column prop="accountName" label="姓名"></el-table-column>
          <el-table-column prop="bankName" label="开户行"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small">领取</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane  name="1" class="h-full">
        <template #label>
          <el-badge :value="total2">
            <span>已付款</span>
          </el-badge>
        </template>
        <el-form v-model="queryInfo" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业务员">
                <el-input v-model="queryInfo.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="queryInfo.attrType" placeholder="请选择" clearable>
                  <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="4"></el-option>
                  <el-option label="团队" value="5"></el-option>
                  <el-option label="个代" value="6"></el-option>
                  <el-option label="电销" value="7"></el-option>
                  <el-option label="渠道" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="提现时间">
                <el-date-picker v-model="time1" type="daterange" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
            <el-col :span="8"></el-col>
            <el-col :span="8" style="display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain>重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <p style="font-size: 14px; color: #606266">应付总额：￥30000.00</p>

        <el-table :data="firstData2" height="calc(100% - 144px)" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="name" label="业务员"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型">
            <template #default="scope">
              {{ scope.row.attrType === '1' ? '前线人员' : scope.row.attrType === '2' ? '后线人员' : scope.row.attrType === '3' ? '合伙人' : scope.row.attrType === '4' ? '工作室管理员' : scope.row.attrType === '5' ? '团队' : scope.row.attrType === '6' ? '个代' : scope.row.attrType === '7' ? '电销' : scope.row.attrType === '8' ? '渠道' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="managerName" label="管理人"></el-table-column>
          <el-table-column prop="amount" label="提现金额"></el-table-column>
          <el-table-column prop="balanceAmount" label="账户余额"></el-table-column>
          <el-table-column prop="bankCardNum" label="银行卡号"></el-table-column>
          <el-table-column prop="bankName" label="银行"></el-table-column>
          <el-table-column prop="accountName" label="姓名"></el-table-column>
          <el-table-column prop="bankName" label="开户行"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small">领取</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total2" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane  name="2" class="h-full">
        <template #label>
          <el-badge :value="total3">
            <span>拒绝付款</span>
          </el-badge>
        </template>
        <el-form v-model="queryInfo" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业务员">
                <el-input v-model="queryInfo.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="queryInfo.attrType" placeholder="请选择" clearable>
                  <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="4"></el-option>
                  <el-option label="团队" value="5"></el-option>
                  <el-option label="个代" value="6"></el-option>
                  <el-option label="电销" value="7"></el-option>
                  <el-option label="渠道" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="提现时间">
                <el-date-picker v-model="queryInfo.createTimeStart" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
            <el-col :span="8"></el-col>
            <el-col :span="8" style="display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain>重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <p style="font-size: 14px; color: #606266">应付总额：￥30000.00</p>

        <el-table :data="firstData3" height="calc(100% - 144px)" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="name" label="业务员"></el-table-column>
          <el-table-column prop="attrType" label="业务员类型">
            <template #default="scope">
              {{ scope.row.attrType === '1' ? '前线人员' : scope.row.attrType === '2' ? '后线人员' : scope.row.attrType === '3' ? '合伙人' : scope.row.attrType === '4' ? '工作室管理员' : scope.row.attrType === '5' ? '团队' : scope.row.attrType === '6' ? '个代' : scope.row.attrType === '7' ? '电销' : scope.row.attrType === '8' ? '渠道' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="managerName" label="管理人"></el-table-column>
          <el-table-column prop="amount" label="提现金额"></el-table-column>
          <el-table-column prop="balanceAmount" label="账户余额"></el-table-column>
          <el-table-column prop="bankCardNum" label="银行卡号"></el-table-column>
          <el-table-column prop="bankName" label="银行"></el-table-column>
          <el-table-column prop="accountName" label="姓名"></el-table-column>
          <el-table-column prop="bankName" label="开户行"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small">领取</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total3" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'


let activeName = ref('0')
const queryInfo = ref({
  salesman: '',//业务员
  attrType: '',//业务员类型
  createTimeStart: '',//提现时间开始
  createTimeEnd: ''//提现时间结束
})
const handleClick = (e) => {
  console.log()
  pages.value = 1
  size.value = 10
  queryInfo.value = {}
  activeName.value = e.props.name
  console.log(activeName.value)
  initData(activeName.value)
  getMyPaymentTotalWithdrawalAmount()
}
let time1 = ref([])//提现时间

let firstData1 = ref([{}])
let firstData2 = ref([{}])
let firstData3 = ref([{}])

let total1 = ref(0)
let total2 = ref(0)
let total3 = ref(0)

let pages = ref(1)
let size = ref(10)
const handleSizeChange = (size) => {
  size.value = size
  initData(activeName.value)
}
const handleCurrentChange = (page) => {
  pages.value = page
  initData(activeName.value)
}
const initData = (type) => {
  api.financeApi.myPaymentList({
    salesman: queryInfo.value.salesman,
    attrType: queryInfo.value.attrType,
    createTimeStart: time1.value?.[0],
    createTimeEnd: time1.value?.[1],
    auditingStatus: type,
    pageNo: pages.value,
    pageSize: size.value
  }).then((res: any) => {
    if (type == '0') {
      total1.value = res.data.total
      firstData1.value = res.data.records
    }
    if (type == '1') {
      total2.value = res.data.total
      firstData2.value = res.data.records
    }
    if (type == '2') {
      total3.value = res.data.total
      firstData3.value = res.data.records
    }
  })
}
const handleSearch = () => {
  pages.value = 1
  size.value = 10
  initData(activeName.value)
  getMyPaymentTotalWithdrawalAmount()
}
//我的付款-应收总额
const getMyPaymentTotalWithdrawalAmount = () => {
  api.financeApi.myPaymentTotalWithdrawalAmount({
    salesman: queryInfo.value.salesman,
    attrType: queryInfo.value.attrType,
    createTimeStart: time1.value?.[0],
    createTimeEnd: time1.value?.[1],
    auditingStatus: activeName.value,
  }).then((res: any) => {
    if (res.data) {
      total1.value = res.data
    }
  })
}
onMounted(() => {
  initData('0')
  initData('1')
  initData('2')
  getMyPaymentTotalWithdrawalAmount()
})
</script>

<style scoped lang="scss">
.icon_s {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 20px;
  color: #00a0f4;
  cursor: pointer;

  .is_icon {
    transition: ease 0.2s;
  }

  .is_down {
    transform: rotate(180deg);
  }
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>