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>
        <div style="font-size: 14px; color: #606266">应付总额：￥{{ totalAmount }}</div>
        <el-table :data="firstData1" height="calc(100% - 164px)" 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="cardHolderName" label="姓名"></el-table-column>
          <el-table-column prop="bankNum" label="开户行"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handlePay(scope.row)">付款</el-button>
              <el-popover ref="RefusePopover" placement="top" width="300" trigger="click" title="驳回理由">
                <template #reference>
                  <el-button link type="primary" size="small">驳回</el-button>
                </template>
                <el-input style="margin-bottom: 15px" placeholder="请输入" v-model="refuseReason" />
                <div style="display: flex; align-items: center; justify-content: flex-end">
                  <el-button size="small" plain @click="refusePopoverCancel">取消</el-button>
                  <el-button size="small" type="primary" @click="refusePopoverConfirm(scope.row)">确定</el-button>
                </div>
              </el-popover>
            </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="pageCurrentChange"></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>
        <div style="font-size: 14px; color: #606266">应付总额：￥{{ totalAmount }}</div>

        <el-table :data="firstData2" height="calc(100% - 164px)" 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="cardHolderName" label="姓名"></el-table-column>
          <el-table-column prop="bankNum" label="开户行"></el-table-column>
          <el-table-column prop="withdrawalRequester" label="提现人"></el-table-column>
          <el-table-column prop="withdrawalRequestTime" label="提现时间"></el-table-column>
          <el-table-column prop="auditingTime" label="审核时间"></el-table-column>
          <el-table-column prop="voucherId" label="凭证号"></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="pageCurrentChange"></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>
        <div style="font-size: 14px; color: #606266">应付总额：￥{{ totalAmount }}</div>

        <el-table :data="firstData3" height="calc(100% - 164px)" 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="cardHolderName" label="姓名"></el-table-column>
          <el-table-column prop="bankNum" label="开户行"></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="pageCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" v-model="drawShow" width="800" title="提现付款">
      <el-form :model="drawForm" ref="DrawRef" :rules="drawRules" label-width="120">
        <el-form-item prop="voucherId" label="凭证号">
          <el-input placeholder="请填写" v-model="drawForm.voucherId" />
        </el-form-item>
        <el-form-item prop="picId" label="上传凭证资料" class="upload-btn">
          <img style="display: block; width: 150px; height: 150px" v-if="fileUrl" :src="fileUrl">
          <el-upload class="upload-demo" v-else :auto-upload="false" action="#" drag :show-file-list="false"
            accept=".png, .jpg, .jpeg" @change="uploadImage">
            <el-button size="large" icon="Plus" />
          </el-upload>
        </el-form-item>
        <el-form-item prop="accountName" label="付款账户">
          <el-input placeholder="请填入" v-model="drawForm.accountName" @click="payAccount" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-popconfirm class="box-item" title="确定放弃付款？" placement="top" @confirm="handleConfirm">
          <template #reference>
            <el-button plain>退回任务</el-button>
          </template>
        </el-popconfirm>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="handleCancelVerifyAmount">取消</el-button>
        <el-button type="primary" @click="handleVerifyAmount">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="payAccountShow" title="付款账户" width="800">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input prefix-icon="search" placeholder="请输入" v-model="account"></el-input>
        </el-col>
        <el-col :span="16">
          <el-button type="primary" @click="accountSearch">查询</el-button>
        </el-col>
      </el-row>
      <el-table ref="AccountRef" row-key="id" style="margin: 24px 0; max-height: 400px" @select="handleSelect" highlight-current-row
        :data="accountData" @current-change="handleCurrentChange" @row-dblclick="handleSelectedRow">
        <!-- <el-table-column prop="bankCardNum" label="账户名称"></el-table-column> -->
        <el-table-column prop="bankCardNum" label="银行卡号"></el-table-column>
        <el-table-column prop="bankNum" label="开户行"></el-table-column>
        <el-table-column prop="bankCardNum" label="开户行号"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlepageSizeChange"
          @current-change="handlepageNoChange"></el-pagination>
      </div>
      <template #footer>
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="handleAccountCancel">取消</el-button>
        <el-button type="primary" @click="handleAccountSubmit">确定</el-button>
      </template>
    </el-dialog>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'
import { ElMessage } from 'element-plus'
let AccountRef = ref()

const refuseReason = ref('')
let activeName = ref('0')
let RefusePopover = ref()
const queryInfo = ref({
  salesman: '',//业务员
  attrType: '',//业务员类型
  createTimeStart: '',//提现时间开始
  createTimeEnd: ''//提现时间结束
})
const handleClick = (e) => {
  console.log()
  pages.value = 1
  size.value = 10
  queryInfo.value = {
    salesman: '',
    attrType: '',
    createTimeStart: '',
    createTimeEnd: ''
  }
  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)
//上传凭证资料
let fileUrl = ref('')
const uploadImage = (file) => {
  let files = file.raw;
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  api.areaApi.fileUpload(params).then((res: any) => {
    // IDCardFrontName.value = res.data.fileName;
    fileUrl.value = res.data.downloadUrl;
    drawForm.value.picId = res.data.id
  })
}
let payAccountShow = ref(false)
// 体现付款
let drawShow = ref(false)
let drawForm = ref({
  id: '',
  voucherId: '',
  picId: '',
  accountId: '',
  accountName: ''
})
let drawRules = ref({
  voucherId: [{ required: true, trigger: "blur", message: "请输入" }],
  picId: [{ required: true, trigger: "change", message: "请输入" }]
})
const handlePay = (row) => {
  drawForm.value = {
    voucherId: '',
    picId: '',
    accountId: '',
    accountName: ''
  }
  drawShow.value = true
  drawForm.value.id = row.id
}
const refusePopoverCancel = () => {
  RefusePopover.value.hide()
  refuseReason.value = ''
}
const refusePopoverConfirm = (row) => {
  if (!refuseReason.value) {
    ElMessage({
      message: '请填写驳回理由！',
      type: 'warning'
    })
    return
  }
  api.financeApi.rejectAmount({
    id: row.id,
    rejectReason: refuseReason.value
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: '提现申请已驳回',
        type: 'success'
      })
      initData('0')
      initData('1')
      initData('2')
    }
  })
}
const payAccount = () => {
  payAccountShow.value = true
  initAccount();
}
let account = ref('')
let accountData = ref([])
let total = ref(0)
let pageNo = ref(1)
let pageSize = ref(10)
const handlepageSizeChange = (size) => {
  pageSize.value = size
}
const handlepageNoChange = (page) => {
  pageNo.value = page
}

const initAccount = () => {
  api.financeApi.cardList({
    accountName: account.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }).then((res: any) => {
    accountData.value = res.data.records
    total.value = res.data.total
  })
}
const accountSearch = () => {
  pageNo.value = 1
  pageSize.value = 10
  initAccount();
}
let selectItem = ref(null)
const handleCurrentChange = ( row:any) => {
  selectItem.value = row
    AccountRef.value.clearSelection()
    AccountRef.value.toggleRowSelection(row);
}
const handleSelectedRow = (row: any) => {
  selectItem.value = row
  handleAccountSubmit()
}
const handleAccountCancel = () => {
  selectItem.value = null
  payAccountShow.value = false
}
const handleAccountSubmit = () => {
  payAccountShow.value = false
  drawForm.value.accountName = selectItem.value.bankCardNum
  drawForm.value.accountId = selectItem.value.id
}
const handleCancelVerifyAmount = () => {
  drawForm.value = {
    voucherId: '',
    picId: '',
    accountId: '',
    accountName: ''
  }
  drawShow.value = false
}
const handleVerifyAmount = () => {
  api.financeApi.verifyAmount({
    id: drawForm.value.id,
    voucherId: drawForm.value.voucherId,
    picId: drawForm.value.picId,
    cardId: drawForm.value.accountId,
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      drawShow.value = false
      initData(activeName.value)
    }
  })
}


const handleConfirm = () => {
  api.financeApi.amountAuditCancel(drawForm.value.id).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      initData(activeName.value)
    }
    drawShow.value = false
  })
}
const handleSizeChange = (size) => {
  size.value = size
  initData(activeName.value)
}
const pageCurrentChange = (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()
}
let totalAmount = ref(0)
//我的付款-应收总额
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) => {
      totalAmount.value = res.msg
  })
}
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>