as-partner-frontend/src/views/modules/manage/profit-receiver.vue

<template>
  <div class="mod-profit-receiver">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <org-tree-select v-model="dataForm.orgId" placeholder="组织" width="200px" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.bindStatus" placeholder="绑定状态" clearable style="width: 120px;">
          <el-option v-for="item in bindStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="table-page-wrap">
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column type="index" header-align="center" align="center" width="50" label="序号"></el-table-column>
        <el-table-column prop="orgName" header-align="center" align="center" label="关联组织"></el-table-column>
        <el-table-column prop="orgId" header-align="center" align="center" label="组织"></el-table-column>
        <el-table-column prop="receiverType" header-align="center" align="center" label="接收方类型">
          <template #default="scope">
            <el-tag v-if="scope.row.receiverType === 'MERCHANT_ID'" size="small" type="warning">商户号</el-tag>
            <el-tag v-else-if="scope.row.receiverType === 'PERSONAL_OPENID'" size="small" type="success">个人openid</el-tag>
            <el-tag v-else size="small">{{ scope.row.receiverType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="receiverAccount" header-align="center" align="center" label="收款账号"></el-table-column>
        <el-table-column prop="receiverName" header-align="center" align="center" label="收款方名称"></el-table-column>
        <el-table-column prop="bindStatus" header-align="center" align="center" label="绑定状态">
          <template #default="scope">
            <el-tag v-if="scope.row.bindStatus === 'PENDING'" size="small" type="warning">待确认</el-tag>
            <el-tag v-else-if="scope.row.bindStatus === 'ACTIVE'" size="small" type="success">已绑定</el-tag>
            <el-tag v-else-if="scope.row.bindStatus === 'FAILED'" size="small" type="danger">绑定失败</el-tag>
            <el-tag v-else size="small">{{ scope.row.bindStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
          <template #default="scope">
            <el-button link type="danger" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog v-model="addVisible" title="新增分账接收方" width="500px">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="120px">
        <el-form-item label="关联组织" prop="orgId">
          <org-tree-select v-model="addForm.orgId" placeholder="请选择关联组织" />
        </el-form-item>
        <el-form-item label="接收方类型" prop="receiverType">
          <el-select v-model="addForm.receiverType" placeholder="请选择接收方类型" style="width: 100%;">
            <el-option label="商户号" value="MERCHANT_ID"></el-option>
            <el-option label="个人openid" value="PERSONAL_OPENID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接收方账号" prop="receiverAccount">
          <el-input v-model="addForm.receiverAccount" :placeholder="accountPlaceholder"></el-input>
        </el-form-item>
        <el-form-item label="收款方名称" prop="receiverName">
          <el-input v-model="addForm.receiverName" placeholder="请输入收款方名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  getProfitReceiverList,
  saveProfitReceiver,
  deleteProfitReceiver,
  type ProfitReceiver,
  type ProfitReceiverSaveBody
} from '@/api/manage/profitReceiver'

const bindStatusOptions = [
  { label: '待确认', value: 'PENDING' },
  { label: '已绑定', value: 'ACTIVE' },
  { label: '绑定失败', value: 'FAILED' }
]

const dataForm = reactive<{
  orgId: string | number
  bindStatus: string
}>({
  orgId: '',
  bindStatus: ''
})
const dataList = ref<ProfitReceiver[]>([])
const pageIndex = ref<number>(1)
const pageSize = ref<number>(10)
const totalPage = ref<number>(0)
const dataListLoading = ref<boolean>(false)

const addVisible = ref<boolean>(false)
const addFormRef = ref<FormInstance>()

interface AddForm {
  orgId: number | null
  receiverType: 'MERCHANT_ID' | 'PERSONAL_OPENID' | ''
  receiverAccount: string
  receiverName: string
}

const addForm = reactive<AddForm>({
  orgId: null,
  receiverType: '',
  receiverAccount: '',
  receiverName: ''
})

const accountPlaceholder = computed<string>(() => {
  if (addForm.receiverType === 'MERCHANT_ID') return '请输入商户号'
  if (addForm.receiverType === 'PERSONAL_OPENID') return '请输入openid'
  return '请输入接收方账号'
})

const addRules: FormRules = {
  orgId: [{ required: true, message: '请选择关联组织', trigger: 'change' }],
  receiverType: [{ required: true, message: '请选择接收方类型', trigger: 'change' }],
  receiverAccount: [{ required: true, message: '请输入接收方账号', trigger: 'blur' }],
  receiverName: [{ required: true, message: '请输入收款方名称', trigger: 'blur' }]
}

function getDataList (): void {
  dataListLoading.value = true
  getProfitReceiverList({
    page: pageIndex.value,
    limit: pageSize.value,
    orgId: dataForm.orgId ? Number(dataForm.orgId) : undefined,
    bindStatus: dataForm.bindStatus
  }).then((res) => {
    if (res && res.code === 0) {
      dataList.value = res.data?.page?.list || []
      totalPage.value = res.data?.page?.totalCount || 0
    } else {
      dataList.value = []
      totalPage.value = 0
    }
    dataListLoading.value = false
  }).catch(() => {
    dataListLoading.value = false
  })
}

function sizeChangeHandle (val: number): void {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}

function currentChangeHandle (val: number): void {
  pageIndex.value = val
  getDataList()
}

function resetForm (): void {
  addForm.orgId = null
  addForm.receiverType = ''
  addForm.receiverAccount = ''
  addForm.receiverName = ''
  addFormRef.value?.clearValidate()
}

function addHandle (): void {
  resetForm()
  addVisible.value = true
}

function submitForm (): void {
  addFormRef.value?.validate((valid) => {
    if (!valid) return
    const saveBody: ProfitReceiverSaveBody = {
      orgId: addForm.orgId ?? 0,
      receiverType: addForm.receiverType as 'MERCHANT_ID' | 'PERSONAL_OPENID',
      receiverAccount: addForm.receiverAccount,
      receiverName: addForm.receiverName
    }
    saveProfitReceiver(saveBody).then((res) => {
      if (res && res.code === 0) {
        ElMessage.success({
          message: '操作成功',
          duration: 1500,
          onClose: () => {
            addVisible.value = false
            getDataList()
          }
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}

function deleteHandle (id: number): void {
  ElMessageBox.confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteProfitReceiver(id).then((res) => {
      if (res && res.code === 0) {
        ElMessage.success({
          message: '操作成功',
          duration: 1500,
          onClose: () => {
            getDataList()
          }
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(() => {})
}

onMounted(() => {
  getDataList()
})
</script>

<style scoped>
.mod-profit-receiver {
  padding: 10px;
}
</style>