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

<template>
  <PageMain class="vh100">
    <el-tabs 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="firstForm" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.typeAttr" placeholder="请选择" clearable>
                  <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="firstForm.applyTime" 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-form-item label="审核人">
                <el-input v-model="firstForm.auditBy" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间">
                <el-date-picker v-model="firstForm.auditTime" 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" style="display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="firstData" height="calc(100% - 162px)" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="name" label="业务员"></el-table-column>
          <el-table-column prop="typeAttr" label="业务员类型">
            <template #default="scope">
              {{
                scope.row.typeAttr == '5' ? '团队' : scope.row.typeAttr == '6' ? '个代' : scope.row.typeAttr == '7' ? '渠道' :
                  scope.row.typeAttr == '8' ? '电销组' : '--'
              }}
            </template>
          </el-table-column>
          <el-table-column prop="workNumber" label="业务员工号"></el-table-column>
          <el-table-column prop="applyTime" label="申请时间"></el-table-column>
          <el-table-column prop="bankCardNumber" label="银行卡号"></el-table-column>
          <el-table-column prop="bankName" label="银行"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="bankAddress" label="开户行"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间"></el-table-column>
          <el-table-column prop="auditBy" label="审核人"></el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="agentPass(scope.row)">申请通过</el-button>
              <el-popover placement="top" width="300" trigger="click" :visible="scope.row.agentShow">
                <template #reference>
                  <el-button @click="scope.row.agentShow = true" link type="primary" size="small">驳回</el-button>
                </template>
                <el-input type="textarea" v-model="agentReason" maxlength="200"></el-input>
                <div style="display: flex; align-items: center; justify-content: flex-end; margin-top: 10px">
                  <el-button size="small" @click="scope.row.agentShow = false">取消</el-button>
                  <el-button type="danger" size="small" @click="handleAgentConfirm(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="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="firstForm" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.typeAttr" placeholder="请选择" clearable>
                  <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="firstForm.applyTime" 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-form-item label="审核人">
                <el-input v-model="firstForm.auditBy" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间">
                <el-date-picker v-model="firstForm.auditTime" 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" style="display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="secondData" height="calc(100% - 162px)" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="name" label="业务员"></el-table-column>
          <el-table-column prop="typeAttr" label="业务员类型">
            <template #default="scope">
              {{
                scope.row.typeAttr == '5' ? '团队' : scope.row.typeAttr == '6' ? '个代' : scope.row.typeAttr == '7' ? '渠道' :
                  scope.row.typeAttr == '8' ? '电销组' : '--'
              }}
            </template>
          </el-table-column>
          <el-table-column prop="workNumber" label="业务员工号"></el-table-column>
          <el-table-column prop="applyTime" label="申请时间"></el-table-column>
          <el-table-column prop="bankCardNumber" label="银行卡号"></el-table-column>
          <el-table-column prop="bankName" label="银行"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="bankAddress" label="开户行"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间"></el-table-column>
          <el-table-column prop="auditBy" 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="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="firstForm" label-width="100">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="业务员">
                <el-input v-model="firstForm.salesman" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员类型">
                <el-select v-model="firstForm.typeAttr" placeholder="请选择" clearable>
                  <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="firstForm.applyTime" 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-form-item label="审核人">
                <el-input v-model="firstForm.auditBy" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间">
                <el-date-picker v-model="firstForm.auditTime" 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" style="display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button plain @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="thirdData" height="calc(100% - 162px)" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="name" label="业务员"></el-table-column>
          <el-table-column prop="typeAttr" label="业务员类型">
            <template #default="scope">
              {{
                scope.row.typeAttr == '5' ? '团队' : scope.row.typeAttr == '6' ? '个代' : scope.row.typeAttr == '7' ? '渠道' :
                  scope.row.typeAttr == '8' ? '电销组' : '--'
              }}
            </template>
          </el-table-column>
          <el-table-column prop="workNumber" label="业务员工号"></el-table-column>
          <!-- <el-table-column prop="applyTime" label="申请时间"></el-table-column> -->
          <el-table-column prop="lastRejectReason" label="驳回原因"></el-table-column>
          <el-table-column prop="lastRejectTime" label="驳回时间"></el-table-column>
          <el-table-column prop="bankCardNumber" label="银行卡号"></el-table-column>
          <el-table-column prop="bankName" label="银行"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="bankAddress" label="开户行"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间"></el-table-column>
          <el-table-column prop="auditBy" 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="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="show" width="600" title="银行卡审核">
      <el-form v-model="agentForm" :rules="rules" disabled label-width="80">
        <el-form-item prop="name" label="姓名">
          <el-input v-model="agentForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="bankName" label="银行">
          <el-select v-model="agentForm.bankName">
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="bankCardNumber" label="银行卡号">
          <el-input v-model="agentForm.bankCardNumber"></el-input>
        </el-form-item>
        <el-form-item prop="bankAddress" label="开户行">
          <el-input v-model="agentForm.bankAddress"></el-input>
        </el-form-item>
        <el-form-item label="照片" class="upload-btn">
          <!--                    <el-upload :auto-upload="false" v-if="!agentForm.cardFileUrl" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
                        <el-button size="large" icon="Plus" />
                    </el-upload>
                    <div class="image-view" v-else>
                        <img style="display: block; width: 130px; height: 80px" :src="agentForm.cardFileUrl" />
                        <div class="btns">
                            <el-upload style="display: inline" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
                                <el-icon class="btn-icon"><Upload /></el-icon>
                            </el-upload>
                            &lt;!&ndash;            <el-icon class="btn-icon" @click="imageView"><View /></el-icon>&ndash;&gt;
                        </div>
                    </div>-->
          <img style="display: block; width: 130px; height: 80px; border-radius: 4px" :src="agentForm.cardFileUrl" />
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="show = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmAudit">审核通过</el-button>
      </div>
    </el-dialog>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'
import { ElMessage } from "element-plus";

let activeName = ref('0')
const handleClick = (e) => {
  activeName.value = e.props.name
  pages.value = 1
  size.value = 10
  firstForm.value = {}
  initList(Number(activeName.value))
}

// 待审核
let firstForm = ref({})
let firstData = ref([])
let secondData = ref([])
let thirdData = 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
  initList(Number(activeName.value))
}
const handleCurrentChange = (page) => {
  pages.value = page
  initList(Number(activeName.value))
}

const initList = (type) => {
  console.log(type)
  api.financeApi.queryUserBankCardList({
    salesman: firstForm.value?.salesman,
    typeAttr: firstForm.value?.typeAttr,
    applyTimeStart: firstForm.value?.applyTime?.[0],
    applyTimeEnd: firstForm.value?.applyTime?.[1],
    auditTimeStart: firstForm.value?.auditTime?.[0],
    auditTimeEnd: firstForm.value?.auditTime?.[1],
    auditBy: firstForm.value?.auditBy,
    auditStatus: type,
    pages: pages.value,
    size: size.value
  }).then((res: any) => {
    if (res.code == 200) {
      switch (type) {
        case 0:
          firstData.value = res.data.records.map(a => {
            return {
              ...a,
              agentShow: false
            }
          })
          total1.value = res.data.total
          break;
        case 1:
          secondData.value = res.data.records
          total2.value = res.data.total
          break;
        case 2:
          thirdData.value = res.data.records
          total3.value = res.data.total
          break;
      }
    } else {

    }
  })
}
const handleSearch = () => {
  initList(Number(activeName.value))
}
const handleReset = () => {
  firstForm.value = {}
  initList(Number(activeName.value))
}

const agentPass = (row) => {
  show.value = true
  agentForm.value = row
}
// 审核弹框
let show = ref(false)
let agentForm = ref({
  imageUrl: ''
})
let rules = ref({
  name: [
    { required: true, message: '请填写姓名', trigger: 'blur' }
  ],
})

// 通过
const handleConfirmAudit = () => {
  api.financeApi.userBankCardAudit({
    id: agentForm.value.id,
    auditStatus: '1'
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      show.value = false
      initList(0)
      initList(1)
    }
  })
}

// 驳回
let agentReason = ref('')
const handleAgentCancel = (row) => {
  agentReason.value = ''
}
const handleAgentConfirm = (row) => {
  row.agentShow = false
  api.financeApi.userBankCardAudit({
    id: row.id,
    auditStatus: '2',
    remark: agentReason.value
  }).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      initList(0)
      initList(2)
    }
  })
}

onMounted(() => {
  initList(0)
  initList(1)
  initList(2)
})

</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;
}

.upload-btn {
  :deep(.el-button) {
    width: 80px;
    height: 80px;
    font-size: 30px;
    color: #ccc;
  }
}

:deep(.el-badge__content.is-fixed) {
  right: calc(var(--el-badge-size) / 2 - 10px);
  top: 50%;
}

:deep(.el-badge__content--danger) {
  background-color: #D40000;
}
</style>