init: 橘视厅酒店版会员系统前端
This commit is contained in:
zhaogd
246
src/views/modules/manage/profit-receiver.vue
Normal file
246
src/views/modules/manage/profit-receiver.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user