new-cashier/jeepay-ui-agent/src/views/agent/AgentList.vue

<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData= {} }">
        <jeepay-text-up v-model:value="searchData['agentNo']" :placeholder="'服务商号'" />
        <jeepay-text-up v-model:value="searchData['agentName']" :placeholder="'服务商名称'" />
        <jeepay-text-up v-model:value="searchData['loginUsername']" :placeholder="'服务商登录名'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['state']" placeholder="服务商状态">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="0">
              禁用
            </a-select-option>
            <a-select-option value="1">
              启用
            </a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="agentNo"
        @btnLoadClose="btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_AGENT_INFO_ADD')" type="primary" @click="addFunc">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'agentName'">
            <a @click="detailFunc(record.agentNo)"><b>{{ record.agentName }}</b></a>
          </template>

          <template v-if="column.key === 'state'">
            <a-badge
              :status="record.state === 0?'error':record.state === 1?'processing':record.state === 2?'warning':record.state === 3?'error':'yellow'"
              :text="record.state === 0?'禁用':record.state === 1?'启用':record.state === 2?'审核中':record.state === 3?'审核驳回':'未认证'"
            />
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_AGENT_INFO_EDIT')" type="link" @click="editFunc(record.agentNo)">修改</a-button>
              <a-button v-if="$access('ENT_AGENT_INFO_VIEW')" type="link" @click="detailFunc(record.agentNo)">详情</a-button>
              <a-button v-if="$access('ENT_AGENT_RATE_CONFIG')" type="link" @click="showFeeConfigList(record.agentNo)">费率配置</a-button>
              <a-button v-if="$access('ENT_AGENT_INFO_DEL')" type="link" style="color: red" @click="delFunc(record.agentNo)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callback-func="searchFunc" />
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />

    <!-- 费率配置页面  -->

    <JeepayPaymentConfigDrawer ref="JeepayPaymentConfigDrawerRef" configMode="agentSubagent" />
<!--    <JeepayPayConfigDrawer ref="JeepayPaymentConfigDrawerRef" configMode="agentSubagent" />-->

  </page-header-wrapper>
</template>
<script setup lang="ts">

import { API_URL_AGENT_LIST, req, reqLoad } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import InfoDetail from './Detail.vue'
import { ref, reactive, getCurrentInstance } from 'vue'
import router from '@/router'
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const infoDetail = ref()
const infoAddOrEdit = ref()
const infoTable = ref()

const JeepayPaymentConfigDrawerRef = ref()

let tableColumns = reactive([
  { key: 'agentName', title: '服务商名称', fixed: 'left',  },
  { key: 'agentNo', title: '服务商号', dataIndex: 'agentNo' , },
  { key: 'mchCount', title: '商户数量', dataIndex: 'mchCount',  },
  { key: 'state', title: '状态',  },
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', },
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center'}
])

      let btnLoading = ref(false)
      let searchData = ref({})

    // 请求table接口数据
  function reqTableDataFunc(params: any) {
      return req.list(API_URL_AGENT_LIST, params)
    }
  function searchFunc () { // 点击【查询】按钮点击事件
      infoTable.value.refTable(true)
    }
  function tableExportFunc(){
      alert('导出！')
    }

  function addFunc () { // 业务通用【新增】 函数
      infoAddOrEdit.value.show()
    }
  function editFunc (recordId: any) { // 业务通用【修改】 函数
      infoAddOrEdit.value.show(recordId)
    }
  function rateConfigFunc(recordId: any) {
    alert('费率配置')
  }
  function detailFunc (recordId: any) { // 服务商详情页
      infoDetail.value.show(recordId)
    }

  function codeManagementFunc (recordId: any) {
    alert('码牌管理')
  }
    // 删除服务商
  function delFunc (recordId: any) {
    $infoBox.confirmDanger('确认删除？', '该操作将删除服务商下所有配置及用户信息', () => {
        reqLoad.delById(API_URL_AGENT_LIST, recordId).then((res: any) => {
            infoTable.value.refTable(true)
            $infoBox.message.success('删除成功')
          })
    })
  }

  function showFeeConfigList (recordId) { // 费率配置
    JeepayPaymentConfigDrawerRef.value.show(recordId)
  }

</script>