|
@@ -1,56 +1,68 @@
|
|
|
<template>
|
|
|
- <a-card :bordered="false">
|
|
|
- <s-table
|
|
|
- ref="tableRef"
|
|
|
- :columns="columns"
|
|
|
- :data="loadData"
|
|
|
- :alert="options.alert.show"
|
|
|
- bordered
|
|
|
- :row-key="(record) => record.id"
|
|
|
- :tool-config="toolConfig"
|
|
|
- :row-selection="options.rowSelection"
|
|
|
- >
|
|
|
- <template #operator class="table-operator">
|
|
|
- <a-space>
|
|
|
- <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizServiceCustomerFlowAdd')">
|
|
|
- <template #icon><plus-outlined /></template>
|
|
|
- 新增
|
|
|
- </a-button>
|
|
|
- <xn-batch-button
|
|
|
- v-if="hasPerm('bizServiceCustomerFlowBatchDelete')"
|
|
|
- buttonName="批量删除"
|
|
|
- icon="DeleteOutlined"
|
|
|
- :selectedRowKeys="selectedRowKeys"
|
|
|
- @batchCallBack="deleteBatchBizServiceCustomerFlow"
|
|
|
- />
|
|
|
- </a-space>
|
|
|
- </template>
|
|
|
- <template #bodyCell="{ column, record, index }">
|
|
|
- <template v-if="column.dataIndex === 'serial'">
|
|
|
- {{ index + 1 }}
|
|
|
- </template>
|
|
|
- <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a-drawer :title="title" :width="850" :open="visible" :destroy-on-close="true" @close="onClose">
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <s-table
|
|
|
+ ref="tableRef"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered
|
|
|
+ :row-key="(record) => record.id"
|
|
|
+ >
|
|
|
+ <template #operator class="table-operator">
|
|
|
<a-space>
|
|
|
- <a @click="formRef.onOpen(record)" v-if="hasPerm('bizServiceCustomerFlowEdit')">编辑</a>
|
|
|
- <a-divider type="vertical" v-if="hasPerm(['bizServiceCustomerFlowEdit', 'bizServiceCustomerFlowDelete'], 'and')" />
|
|
|
- <a-popconfirm title="确定要删除吗?" @confirm="deleteBizServiceCustomerFlow(record)">
|
|
|
- <a-button type="link" danger size="small" v-if="hasPerm('bizServiceCustomerFlowDelete')">删除</a-button>
|
|
|
- </a-popconfirm>
|
|
|
+ <a-button type="primary" @click="rechargeFormRef.onOpen(null, serviceCustomerId, scAccountId)" v-if="hasPerm('bizServiceCustomerFlowRecharge')">
|
|
|
+ <template #icon><plus-outlined /></template>
|
|
|
+ 充值
|
|
|
+ </a-button>
|
|
|
+ <a-button type="primary" @click="consumeFormRef.onOpen(null, serviceCustomerId, scAccountId)" v-if="hasPerm('bizServiceCustomerFlowConsume')">
|
|
|
+ <template #icon><minus-outlined /></template>
|
|
|
+ 扣费
|
|
|
+ </a-button>
|
|
|
</a-space>
|
|
|
</template>
|
|
|
- </template>
|
|
|
- </s-table>
|
|
|
- </a-card>
|
|
|
- <Form ref="formRef" @successful="tableRef.refresh()" />
|
|
|
+ <template #bodyCell="{ column, record, index }">
|
|
|
+ <template v-if="column.dataIndex === 'serial'">
|
|
|
+ {{ index + 1 }}
|
|
|
+ </template>
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a-space>
|
|
|
+ <a @click="cancelRef.onOpen(record, serviceCustomerId, scAccountId)" v-if="hasPerm('bizServiceCustomerFlowCancel')">取消</a>
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ </a-card>
|
|
|
+ </a-drawer>
|
|
|
+
|
|
|
+ <RechargeForm ref="rechargeFormRef" @successful="tableRef.refresh()" />
|
|
|
+ <ConsumeForm ref="consumeFormRef" @successful="tableRef.refresh()" />
|
|
|
+ <CancelForm ref="cancelRef" @successful="tableRef.refresh()" />
|
|
|
</template>
|
|
|
|
|
|
-<script setup name="bizservicecustomerflow">
|
|
|
+<script setup name="bizservicecustomeraccount">
|
|
|
import { cloneDeep } from 'lodash-es'
|
|
|
- import Form from './flowForm.vue'
|
|
|
+ import RechargeForm from './flowRechargeForm.vue'
|
|
|
+ import ConsumeForm from './flowConsumeForm.vue'
|
|
|
+ import CancelForm from './flowCancelForm.vue'
|
|
|
import bizServiceCustomerFlowApi from '@/api/biz/bizServiceCustomerFlowApi'
|
|
|
+ import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
|
|
+ import {Modal} from 'ant-design-vue';
|
|
|
+ import {createVNode} from 'vue';
|
|
|
+
|
|
|
+ const submitLoading = ref(false)
|
|
|
+ const toolConfig = { refresh: true, height: false, columnSetting: false, striped: false }
|
|
|
+ // 默认是关闭状态
|
|
|
+ const visible = ref(false)
|
|
|
+ const searchFormState = ref({})
|
|
|
const tableRef = ref()
|
|
|
- const formRef = ref()
|
|
|
- const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
|
|
|
+ const rechargeFormRef = ref()
|
|
|
+ const consumeFormRef = ref()
|
|
|
+ const cancelRef = ref()
|
|
|
+ const recordData = ref()
|
|
|
+ const title = ref()
|
|
|
+ const serviceCustomerId = ref()
|
|
|
+ const scAccountId = ref()
|
|
|
+
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '序号',
|
|
@@ -59,77 +71,94 @@
|
|
|
align:'center'
|
|
|
},
|
|
|
{
|
|
|
- title: '操作类型 1:充值 2:消费',
|
|
|
- dataIndex: 'operateType'
|
|
|
+ title: '操作类型',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'operateType',
|
|
|
+ align:'center'
|
|
|
},
|
|
|
{
|
|
|
- title: '操作前账户余额',
|
|
|
- dataIndex: 'operateAmountBegin'
|
|
|
+ title: '操作前余额',
|
|
|
+ width: 150,
|
|
|
+ dataIndex: 'operateAmountBegin',
|
|
|
+ align:'center'
|
|
|
},
|
|
|
{
|
|
|
title: '操作金额',
|
|
|
- dataIndex: 'operateAmount'
|
|
|
+ width: 150,
|
|
|
+ dataIndex: 'operateAmount',
|
|
|
+ align:'center'
|
|
|
},
|
|
|
{
|
|
|
- title: '操作后账户余额',
|
|
|
- dataIndex: 'operateAmountAfter'
|
|
|
+ title: '操作后余额',
|
|
|
+ width: 150,
|
|
|
+ dataIndex: 'operateAmountAfter',
|
|
|
+ align:'center'
|
|
|
},
|
|
|
{
|
|
|
title: '操作时间',
|
|
|
+ width: 180,
|
|
|
dataIndex: 'createTime',
|
|
|
align: 'center'
|
|
|
},
|
|
|
]
|
|
|
// 操作栏通过权限判断是否显示
|
|
|
- if (hasPerm(['bizServiceCustomerFlowEdit', 'bizServiceCustomerFlowDelete'])) {
|
|
|
+ if (hasPerm(['bizServiceCustomerFlowCancel'])) {
|
|
|
columns.push({
|
|
|
title: '操作',
|
|
|
dataIndex: 'action',
|
|
|
align: 'center',
|
|
|
- width: 150
|
|
|
+ width: 100
|
|
|
})
|
|
|
}
|
|
|
- const selectedRowKeys = ref([])
|
|
|
- // 列表选择配置
|
|
|
- const options = {
|
|
|
- // columns数字类型字段加入 needTotal: true 可以勾选自动算账
|
|
|
- alert: {
|
|
|
- show: true,
|
|
|
- clear: () => {
|
|
|
- selectedRowKeys.value = ref([])
|
|
|
- }
|
|
|
- },
|
|
|
- rowSelection: {
|
|
|
- onChange: (selectedRowKey, selectedRows) => {
|
|
|
- selectedRowKeys.value = selectedRowKey
|
|
|
- }
|
|
|
+ // 打开抽屉
|
|
|
+ const onOpen = (record, scId) => {
|
|
|
+ recordData.value = record
|
|
|
+ title.value = "【" + record.loginAccount + "】-账户流水管理"
|
|
|
+ searchFormState.value = {
|
|
|
+ serviceCustomerId: scId,
|
|
|
+ scAccountId: record.id
|
|
|
}
|
|
|
+ serviceCustomerId.value = scId
|
|
|
+ scAccountId.value = record.id
|
|
|
+ visible.value = true
|
|
|
}
|
|
|
const loadData = (parameter) => {
|
|
|
- return bizServiceCustomerFlowApi.bizServiceCustomerFlowPage(parameter).then((data) => {
|
|
|
+ return bizServiceCustomerFlowApi.bizServiceCustomerFlowPage(Object.assign(parameter, searchFormState.value)).then((data) => {
|
|
|
return data
|
|
|
})
|
|
|
}
|
|
|
- // 重置
|
|
|
- const reset = () => {
|
|
|
- searchFormRef.value.resetFields()
|
|
|
- tableRef.value.refresh(true)
|
|
|
+ // 关闭抽屉
|
|
|
+ const onClose = () => {
|
|
|
+ visible.value = false
|
|
|
}
|
|
|
// 删除
|
|
|
- const deleteBizServiceCustomerFlow = (record) => {
|
|
|
- let params = [
|
|
|
- {
|
|
|
- id: record.id
|
|
|
- }
|
|
|
- ]
|
|
|
- bizServiceCustomerFlowApi.bizServiceCustomerFlowDelete(params).then(() => {
|
|
|
- tableRef.value.refresh(true)
|
|
|
- })
|
|
|
- }
|
|
|
- // 批量删除
|
|
|
- const deleteBatchBizServiceCustomerFlow = (params) => {
|
|
|
- bizServiceCustomerFlowApi.bizServiceCustomerFlowDelete(params).then(() => {
|
|
|
- tableRef.value.clearRefreshSelected()
|
|
|
+ const deleteConfig = (record) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确定删除该数据吗?',
|
|
|
+ icon: createVNode(ExclamationCircleOutlined),
|
|
|
+ content: '',
|
|
|
+ onOk() {
|
|
|
+ submitLoading.value = true
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ id: record.id
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ bizServiceCustomerFlowApi
|
|
|
+ .bizServiceCustomerFlowDelete(params)
|
|
|
+ .then(() => {
|
|
|
+ tableRef.value.refresh(true)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ submitLoading.value = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCancel() {}
|
|
|
})
|
|
|
}
|
|
|
+ // 调用这个函数将子组件的一些数据和方法暴露出去
|
|
|
+ defineExpose({
|
|
|
+ onOpen
|
|
|
+ })
|
|
|
</script>
|