feat: 重构沃尔玛账户和分组管理界面，添加列表和统计模块切换功能
This commit is contained in:
danial
@@ -1,493 +1,27 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '沃尔玛Cookie']" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-card class="general-card" title="沃尔玛Cookie管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="cookie" label="cookie">
|
||||
<a-input
|
||||
v-model="formModel.cookie"
|
||||
placeholder="请输入Cookie"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="名称">
|
||||
<a-input
|
||||
v-model="formModel.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="nickname" label="沃尔玛昵称">
|
||||
<a-input
|
||||
v-model="formModel.nickname"
|
||||
placeholder="请输入沃尔玛账户昵称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-row style="justify-content: space-between; margin-bottom: 16px">
|
||||
<a-space>
|
||||
<a-button
|
||||
v-if="checkTokenFromLogin()"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="showAddModel({ id: '', ...generateFormModel() })"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
添加
|
||||
</a-button>
|
||||
<a-button @click="download">
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
导出
|
||||
</a-button>
|
||||
<batchImportModel @close="() => search()" />
|
||||
</a-space>
|
||||
<a-tabs
|
||||
default-active-key=""
|
||||
type="capsule"
|
||||
:onChange="onChangeRadio"
|
||||
animation
|
||||
>
|
||||
<a-tab-pane key="" title="全部" />
|
||||
<a-tab-pane
|
||||
v-for="item in groupList"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</a-tabs>
|
||||
</a-row>
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:pagination="{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
showPageSize: true
|
||||
}"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:scroll="{ x: 1080 }"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #status="{ record }">
|
||||
<a-space size="small">
|
||||
<a-switch
|
||||
v-if="[0, 1].includes(record.status)"
|
||||
v-model="record.status"
|
||||
size="small"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
:beforeChange="
|
||||
newValue => updateCurrentStatus(record, newValue)
|
||||
"
|
||||
/>
|
||||
<a-tag
|
||||
v-else
|
||||
size="small"
|
||||
:color="statusMapper(record.status).color"
|
||||
>
|
||||
{{ statusMapper(record.status).text }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-space size="small">
|
||||
<a-tooltip content="修改">
|
||||
<a-button
|
||||
size="small"
|
||||
status="warning"
|
||||
@click="showAddModel(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-pen />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="详情">
|
||||
<a-button size="small" @click="showDetailModel(record)">
|
||||
<template #icon>
|
||||
<icon-list />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-popconfirm
|
||||
type="warning"
|
||||
content="确认刷新账号状态嘛？"
|
||||
@ok="refreshButton(record)"
|
||||
>
|
||||
<a-tooltip content="刷新">
|
||||
<a-button
|
||||
v-if="record.status === 3"
|
||||
size="small"
|
||||
status="success"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
<a-tooltip content="检查账号状态">
|
||||
<a-button
|
||||
size="small"
|
||||
status="warning"
|
||||
@click="checkOne(record.id)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-check-circle />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="删除">
|
||||
<a-button
|
||||
size="small"
|
||||
status="danger"
|
||||
@click="deleteOne(record.id)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<summary-card />
|
||||
</a-space>
|
||||
<add-modal
|
||||
:id="state.accountId"
|
||||
v-model:visible="state.addModalVisible"
|
||||
:account="state.account"
|
||||
/>
|
||||
<account-detail
|
||||
v-model:visible="state.accountDetailVisible"
|
||||
:accountId="state.accountId"
|
||||
/>
|
||||
<Breadcrumb :items="['充值账户管理', '列表/统计']" />
|
||||
<a-card class="general-card" title="沃尔玛Cookie管理">
|
||||
<template #extra>
|
||||
<a-radio-group v-model="state.module" type="button">
|
||||
<a-radio value="list">列表</a-radio>
|
||||
<a-radio value="summary">统计</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<list v-if="state.module === 'list'" />
|
||||
<Summary v-if="state.module === 'summary'" />
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { Pagination } from '@/types/global';
|
||||
import { checkTokenFromLogin } from '@/utils/auth';
|
||||
import { onMounted, reactive, ref, watchEffect } from 'vue';
|
||||
import { Notification, TableColumnData } from '@arco-design/web-vue';
|
||||
import AddModal from './components/add-modal.vue';
|
||||
import summaryCard from './summary.tsx';
|
||||
import AccountDetail from './components/detail.vue';
|
||||
import {
|
||||
deleteWalmartCard,
|
||||
downloadDataList,
|
||||
refreshWalmartCardStatus,
|
||||
updateWalmartCardStatus,
|
||||
WalmartCardParams,
|
||||
walmartCardUpdateRecord
|
||||
} from '@/api/card-walmart-account';
|
||||
import { batchImportModel } from './components/component.tsx';
|
||||
import {
|
||||
ApiCardInfoWalmartAccountGetListGetPageSizeEnum,
|
||||
KamiApiCardInfoWalmartV1AccountListRecord,
|
||||
KamiInternalModelEntityV1CardRedeemAccountGroup
|
||||
} from '@/api/generated/index.ts';
|
||||
import { apiClient } from '@/api/index.ts';
|
||||
import { reactive } from 'vue';
|
||||
import List from './list.vue';
|
||||
import Summary from './summary.tsx';
|
||||
|
||||
const basePagination: Pagination = {
|
||||
current: 1,
|
||||
pageSize: 50
|
||||
};
|
||||
const pagination = reactive({
|
||||
...basePagination
|
||||
const state = reactive<{
|
||||
module: 'list' | 'summary';
|
||||
}>({
|
||||
module: 'list'
|
||||
});
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
render: ({ rowIndex }) => {
|
||||
return rowIndex + 1 + (pagination.current - 1) * pagination.pageSize;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickname'
|
||||
},
|
||||
{
|
||||
title: '余额',
|
||||
dataIndex: 'balance'
|
||||
},
|
||||
{
|
||||
title: '今日充值金额',
|
||||
dataIndex: 'amountTodaySum'
|
||||
},
|
||||
{
|
||||
title: '今日充值次数',
|
||||
dataIndex: 'amountTodayCount'
|
||||
},
|
||||
{
|
||||
title: '充值限制(金额)',
|
||||
dataIndex: 'maxAmountLimit'
|
||||
},
|
||||
{
|
||||
title: '充值限制(次数)',
|
||||
dataIndex: 'maxCountLimit'
|
||||
},
|
||||
{
|
||||
title: '累计充值金额',
|
||||
dataIndex: 'amountTotalSum'
|
||||
},
|
||||
{
|
||||
title: '累计充值次数',
|
||||
dataIndex: 'amountTotalCount'
|
||||
},
|
||||
{
|
||||
title: 'ck',
|
||||
dataIndex: 'cookie',
|
||||
ellipsis: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'uploadUser.username'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
slotName: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
slotName: 'createdAt'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operations',
|
||||
slotName: 'operations',
|
||||
fixed: 'right',
|
||||
width: 220
|
||||
}
|
||||
];
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
remark: '',
|
||||
name: '',
|
||||
cookie: '',
|
||||
nickname: '',
|
||||
maxAmountLimit: 0,
|
||||
status: 1,
|
||||
createdUserName: '',
|
||||
groupId: null
|
||||
};
|
||||
};
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const renderData = ref<KamiApiCardInfoWalmartV1AccountListRecord[]>([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
const state = reactive({
|
||||
addModalVisible: false,
|
||||
deployModalVisible: false,
|
||||
accountDetailVisible: false,
|
||||
accountId: '',
|
||||
account: null
|
||||
});
|
||||
|
||||
const groupList = ref<KamiInternalModelEntityV1CardRedeemAccountGroup[]>([]);
|
||||
|
||||
const fetchData = async (
|
||||
params: WalmartCardParams = { current: 1, pageSize: 50 }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await apiClient.apiCardInfoWalmartAccountGetListGet(
|
||||
params.current,
|
||||
params.pageSize as ApiCardInfoWalmartAccountGetListGetPageSizeEnum,
|
||||
formModel.value.name,
|
||||
formModel.value.nickname,
|
||||
formModel.value.cookie,
|
||||
formModel.value.createdUserName,
|
||||
formModel.value.groupId
|
||||
);
|
||||
renderData.value = res.data.list;
|
||||
pagination.current = params.current;
|
||||
pagination.pageSize = params.pageSize;
|
||||
pagination.total = res.data.total;
|
||||
} catch (err) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const onPageChange = (current: number) => {
|
||||
fetchData({ ...pagination, current });
|
||||
};
|
||||
const onPageSizeChange = (pageSize: number) => {
|
||||
fetchData({ ...pagination, pageSize });
|
||||
};
|
||||
const search = () => {
|
||||
fetchData({
|
||||
...basePagination,
|
||||
...formModel.value
|
||||
} as unknown as WalmartCardParams);
|
||||
};
|
||||
const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
|
||||
const getAllGroupList = () => {
|
||||
apiClient.apiCardInfoWalmartGroupAllListGet().then(res => {
|
||||
groupList.value = res.data.list;
|
||||
});
|
||||
};
|
||||
|
||||
const deleteOne = async (id: string) => {
|
||||
try {
|
||||
await deleteWalmartCard({ id });
|
||||
} catch {
|
||||
Notification.error({
|
||||
id: 'walmartAccountNotice',
|
||||
content: '删除沃尔玛卡失败',
|
||||
closable: true
|
||||
});
|
||||
} finally {
|
||||
fetchData({ ...pagination });
|
||||
}
|
||||
};
|
||||
|
||||
const checkOne = async (id: string) => {
|
||||
try {
|
||||
const result = await apiClient.apiCardInfoWalmartAccountStatusDetectGet(id);
|
||||
if (result.data.status) {
|
||||
Notification.info({
|
||||
id: 'walmartAccountNotice',
|
||||
content: 'ck有效',
|
||||
closable: true
|
||||
});
|
||||
} else {
|
||||
Notification.error({
|
||||
id: 'walmartAccountNotice',
|
||||
content: 'ck无效',
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
Notification.error({
|
||||
id: 'walmartAccountNotice',
|
||||
content: '检测沃尔玛卡失败',
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showAddModel = (record: walmartCardUpdateRecord) => {
|
||||
state.addModalVisible = true;
|
||||
state.accountId = record.id;
|
||||
state.account = record;
|
||||
if (state.account.groupId === 0) {
|
||||
state.account.groupId = null;
|
||||
}
|
||||
};
|
||||
|
||||
const showDetailModel = (record: walmartCardUpdateRecord) => {
|
||||
state.accountDetailVisible = true;
|
||||
state.accountId = record.id;
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
// 目标账户和存储用户不能相同
|
||||
if (!state.addModalVisible) {
|
||||
search();
|
||||
}
|
||||
});
|
||||
|
||||
const updateCurrentStatus = async (
|
||||
record: walmartCardUpdateRecord,
|
||||
newValue: string | number | boolean
|
||||
) => {
|
||||
await updateWalmartCardStatus({ id: record.id, status: newValue as number });
|
||||
record.status = newValue as number;
|
||||
};
|
||||
|
||||
const statusMapper = (status: number): { text: string; color: string } => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return { text: '失效', color: 'red' };
|
||||
case 1:
|
||||
return { text: '正常', color: 'green' };
|
||||
case 2:
|
||||
return { text: '充值过快', color: 'orange' };
|
||||
case 3:
|
||||
return { text: '充值限制(用户设置)', color: 'red' };
|
||||
case 4:
|
||||
return { text: '充值限制(其他)', color: 'red' };
|
||||
case 5:
|
||||
return { text: '充值限制(低额)', color: 'red' };
|
||||
case 6:
|
||||
return { text: '充值限制(安全原因)', color: 'red' };
|
||||
case 7:
|
||||
return { text: '充值限制(暂时限制)', color: 'red' };
|
||||
case 8:
|
||||
return { text: '充值限制(平台原因)', color: 'red' };
|
||||
default:
|
||||
return { text: '未知', color: 'gray' };
|
||||
}
|
||||
};
|
||||
const refreshButton = (record: walmartCardUpdateRecord) => {
|
||||
refreshWalmartCardStatus({ id: record.id }).then(() => {
|
||||
fetchData();
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
getAllGroupList();
|
||||
});
|
||||
|
||||
const onChangeRadio = (value: string | number | boolean) => {
|
||||
formModel.value.groupId = value as number;
|
||||
// fetchData();
|
||||
};
|
||||
const download = () => {
|
||||
downloadDataList();
|
||||
};
|
||||
</script>
|
||||
|
||||
493
src/views/card-walmart-info/account/list.vue
Normal file
493
src/views/card-walmart-info/account/list.vue
Normal file
@@ -0,0 +1,493 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '沃尔玛Cookie']" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-card class="general-card" title="沃尔玛Cookie管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="cookie" label="cookie">
|
||||
<a-input
|
||||
v-model="formModel.cookie"
|
||||
placeholder="请输入Cookie"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="名称">
|
||||
<a-input
|
||||
v-model="formModel.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="nickname" label="沃尔玛昵称">
|
||||
<a-input
|
||||
v-model="formModel.nickname"
|
||||
placeholder="请输入沃尔玛账户昵称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-row style="justify-content: space-between; margin-bottom: 16px">
|
||||
<a-space>
|
||||
<a-button
|
||||
v-if="checkTokenFromLogin()"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="showAddModel({ id: '', ...generateFormModel() })"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
添加
|
||||
</a-button>
|
||||
<a-button @click="download">
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
导出
|
||||
</a-button>
|
||||
<batchImportModel @close="() => search()" />
|
||||
</a-space>
|
||||
<a-tabs
|
||||
default-active-key=""
|
||||
type="capsule"
|
||||
:onChange="onChangeRadio"
|
||||
animation
|
||||
>
|
||||
<a-tab-pane key="" title="全部" />
|
||||
<a-tab-pane
|
||||
v-for="item in groupList"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</a-tabs>
|
||||
</a-row>
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:pagination="{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
showPageSize: true
|
||||
}"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:scroll="{ x: 1080 }"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #status="{ record }">
|
||||
<a-space size="small">
|
||||
<a-switch
|
||||
v-if="[0, 1].includes(record.status)"
|
||||
v-model="record.status"
|
||||
size="small"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
:beforeChange="
|
||||
newValue => updateCurrentStatus(record, newValue)
|
||||
"
|
||||
/>
|
||||
<a-tag
|
||||
v-else
|
||||
size="small"
|
||||
:color="statusMapper(record.status).color"
|
||||
>
|
||||
{{ statusMapper(record.status).text }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-space size="small">
|
||||
<a-tooltip content="修改">
|
||||
<a-button
|
||||
size="small"
|
||||
status="warning"
|
||||
@click="showAddModel(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-pen />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="详情">
|
||||
<a-button size="small" @click="showDetailModel(record)">
|
||||
<template #icon>
|
||||
<icon-list />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-popconfirm
|
||||
type="warning"
|
||||
content="确认刷新账号状态嘛？"
|
||||
@ok="refreshButton(record)"
|
||||
>
|
||||
<a-tooltip content="刷新">
|
||||
<a-button
|
||||
v-if="record.status === 3"
|
||||
size="small"
|
||||
status="success"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
<a-tooltip content="检查账号状态">
|
||||
<a-button
|
||||
size="small"
|
||||
status="warning"
|
||||
@click="checkOne(record.id)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-check-circle />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="删除">
|
||||
<a-button
|
||||
size="small"
|
||||
status="danger"
|
||||
@click="deleteOne(record.id)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<summary-card />
|
||||
</a-space>
|
||||
<add-modal
|
||||
:id="state.accountId"
|
||||
v-model:visible="state.addModalVisible"
|
||||
:account="state.account"
|
||||
/>
|
||||
<account-detail
|
||||
v-model:visible="state.accountDetailVisible"
|
||||
:accountId="state.accountId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { Pagination } from '@/types/global';
|
||||
import { checkTokenFromLogin } from '@/utils/auth';
|
||||
import { onMounted, reactive, ref, watchEffect } from 'vue';
|
||||
import { Notification, TableColumnData } from '@arco-design/web-vue';
|
||||
import AddModal from './components/add-modal.vue';
|
||||
import summaryCard from './summary.tsx';
|
||||
import AccountDetail from './components/detail.vue';
|
||||
import {
|
||||
deleteWalmartCard,
|
||||
downloadDataList,
|
||||
refreshWalmartCardStatus,
|
||||
updateWalmartCardStatus,
|
||||
WalmartCardParams,
|
||||
walmartCardUpdateRecord
|
||||
} from '@/api/card-walmart-account';
|
||||
import { batchImportModel } from './components/component.tsx';
|
||||
import {
|
||||
ApiCardInfoWalmartAccountGetListGetPageSizeEnum,
|
||||
KamiApiCardInfoWalmartV1AccountListRecord,
|
||||
KamiInternalModelEntityV1CardRedeemAccountGroup
|
||||
} from '@/api/generated/index.ts';
|
||||
import { apiClient } from '@/api/index.ts';
|
||||
|
||||
const basePagination: Pagination = {
|
||||
current: 1,
|
||||
pageSize: 50
|
||||
};
|
||||
const pagination = reactive({
|
||||
...basePagination
|
||||
});
|
||||
const columns: TableColumnData[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
render: ({ rowIndex }) => {
|
||||
return rowIndex + 1 + (pagination.current - 1) * pagination.pageSize;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickname'
|
||||
},
|
||||
{
|
||||
title: '余额',
|
||||
dataIndex: 'balance'
|
||||
},
|
||||
{
|
||||
title: '今日充值金额',
|
||||
dataIndex: 'amountTodaySum'
|
||||
},
|
||||
{
|
||||
title: '今日充值次数',
|
||||
dataIndex: 'amountTodayCount'
|
||||
},
|
||||
{
|
||||
title: '充值限制(金额)',
|
||||
dataIndex: 'maxAmountLimit'
|
||||
},
|
||||
{
|
||||
title: '充值限制(次数)',
|
||||
dataIndex: 'maxCountLimit'
|
||||
},
|
||||
{
|
||||
title: '累计充值金额',
|
||||
dataIndex: 'amountTotalSum'
|
||||
},
|
||||
{
|
||||
title: '累计充值次数',
|
||||
dataIndex: 'amountTotalCount'
|
||||
},
|
||||
{
|
||||
title: 'ck',
|
||||
dataIndex: 'cookie',
|
||||
ellipsis: true,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'uploadUser.username'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
slotName: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
slotName: 'createdAt'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operations',
|
||||
slotName: 'operations',
|
||||
fixed: 'right',
|
||||
width: 220
|
||||
}
|
||||
];
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
remark: '',
|
||||
name: '',
|
||||
cookie: '',
|
||||
nickname: '',
|
||||
maxAmountLimit: 0,
|
||||
status: 1,
|
||||
createdUserName: '',
|
||||
groupId: null
|
||||
};
|
||||
};
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const renderData = ref<KamiApiCardInfoWalmartV1AccountListRecord[]>([]);
|
||||
const formModel = ref(generateFormModel());
|
||||
const state = reactive({
|
||||
addModalVisible: false,
|
||||
deployModalVisible: false,
|
||||
accountDetailVisible: false,
|
||||
accountId: '',
|
||||
account: null
|
||||
});
|
||||
|
||||
const groupList = ref<KamiInternalModelEntityV1CardRedeemAccountGroup[]>([]);
|
||||
|
||||
const fetchData = async (
|
||||
params: WalmartCardParams = { current: 1, pageSize: 50 }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await apiClient.apiCardInfoWalmartAccountGetListGet(
|
||||
params.current,
|
||||
params.pageSize as ApiCardInfoWalmartAccountGetListGetPageSizeEnum,
|
||||
formModel.value.name,
|
||||
formModel.value.nickname,
|
||||
formModel.value.cookie,
|
||||
formModel.value.createdUserName,
|
||||
formModel.value.groupId
|
||||
);
|
||||
renderData.value = res.data.list;
|
||||
pagination.current = params.current;
|
||||
pagination.pageSize = params.pageSize;
|
||||
pagination.total = res.data.total;
|
||||
} catch (err) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const onPageChange = (current: number) => {
|
||||
fetchData({ ...pagination, current });
|
||||
};
|
||||
const onPageSizeChange = (pageSize: number) => {
|
||||
fetchData({ ...pagination, pageSize });
|
||||
};
|
||||
const search = () => {
|
||||
fetchData({
|
||||
...basePagination,
|
||||
...formModel.value
|
||||
} as unknown as WalmartCardParams);
|
||||
};
|
||||
const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
|
||||
const getAllGroupList = () => {
|
||||
apiClient.apiCardInfoWalmartGroupAllListGet().then(res => {
|
||||
groupList.value = res.data.list;
|
||||
});
|
||||
};
|
||||
|
||||
const deleteOne = async (id: string) => {
|
||||
try {
|
||||
await deleteWalmartCard({ id });
|
||||
} catch {
|
||||
Notification.error({
|
||||
id: 'walmartAccountNotice',
|
||||
content: '删除沃尔玛卡失败',
|
||||
closable: true
|
||||
});
|
||||
} finally {
|
||||
fetchData({ ...pagination });
|
||||
}
|
||||
};
|
||||
|
||||
const checkOne = async (id: string) => {
|
||||
try {
|
||||
const result = await apiClient.apiCardInfoWalmartAccountStatusDetectGet(id);
|
||||
if (result.data.status) {
|
||||
Notification.info({
|
||||
id: 'walmartAccountNotice',
|
||||
content: 'ck有效',
|
||||
closable: true
|
||||
});
|
||||
} else {
|
||||
Notification.error({
|
||||
id: 'walmartAccountNotice',
|
||||
content: 'ck无效',
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
Notification.error({
|
||||
id: 'walmartAccountNotice',
|
||||
content: '检测沃尔玛卡失败',
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showAddModel = (record: walmartCardUpdateRecord) => {
|
||||
state.addModalVisible = true;
|
||||
state.accountId = record.id;
|
||||
state.account = record;
|
||||
if (state.account.groupId === 0) {
|
||||
state.account.groupId = null;
|
||||
}
|
||||
};
|
||||
|
||||
const showDetailModel = (record: walmartCardUpdateRecord) => {
|
||||
state.accountDetailVisible = true;
|
||||
state.accountId = record.id;
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
// 目标账户和存储用户不能相同
|
||||
if (!state.addModalVisible) {
|
||||
search();
|
||||
}
|
||||
});
|
||||
|
||||
const updateCurrentStatus = async (
|
||||
record: walmartCardUpdateRecord,
|
||||
newValue: string | number | boolean
|
||||
) => {
|
||||
await updateWalmartCardStatus({ id: record.id, status: newValue as number });
|
||||
record.status = newValue as number;
|
||||
};
|
||||
|
||||
const statusMapper = (status: number): { text: string; color: string } => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return { text: '失效', color: 'red' };
|
||||
case 1:
|
||||
return { text: '正常', color: 'green' };
|
||||
case 2:
|
||||
return { text: '充值过快', color: 'orange' };
|
||||
case 3:
|
||||
return { text: '充值限制(用户设置)', color: 'red' };
|
||||
case 4:
|
||||
return { text: '充值限制(其他)', color: 'red' };
|
||||
case 5:
|
||||
return { text: '充值限制(低额)', color: 'red' };
|
||||
case 6:
|
||||
return { text: '充值限制(安全原因)', color: 'red' };
|
||||
case 7:
|
||||
return { text: '充值限制(暂时限制)', color: 'red' };
|
||||
case 8:
|
||||
return { text: '充值限制(平台原因)', color: 'red' };
|
||||
default:
|
||||
return { text: '未知', color: 'gray' };
|
||||
}
|
||||
};
|
||||
const refreshButton = (record: walmartCardUpdateRecord) => {
|
||||
refreshWalmartCardStatus({ id: record.id }).then(() => {
|
||||
fetchData();
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
getAllGroupList();
|
||||
});
|
||||
|
||||
const onChangeRadio = (value: string | number | boolean) => {
|
||||
formModel.value.groupId = value as number;
|
||||
// fetchData();
|
||||
};
|
||||
const download = () => {
|
||||
downloadDataList();
|
||||
};
|
||||
</script>
|
||||
@@ -1,13 +1,13 @@
|
||||
import { apiClient } from '@/api';
|
||||
import type {
|
||||
KamiApiCardInfoWalmartV1CardRedeemAccountSummary,
|
||||
ApiCardInfoWalmartAccountDailySummaryGetPageSizeEnum
|
||||
ApiCardInfoWalmartAccountDailySummaryGetPageSizeEnum,
|
||||
KamiApiSysUserV1UserGetAllSimpleUser
|
||||
} from '@/api/generated';
|
||||
import { handleDownLoadFile } from '@/api/utils';
|
||||
import type { Pagination } from '@/types/global';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
DatePicker,
|
||||
Divider,
|
||||
@@ -16,6 +16,8 @@ import {
|
||||
Input,
|
||||
Message,
|
||||
Row,
|
||||
Select,
|
||||
Option,
|
||||
Space,
|
||||
Table,
|
||||
type TableColumnData
|
||||
@@ -26,6 +28,7 @@ interface IformData {
|
||||
accountId: string;
|
||||
username: string;
|
||||
date: string;
|
||||
userId: string | null;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
@@ -35,7 +38,8 @@ export default defineComponent({
|
||||
return {
|
||||
username: '',
|
||||
accountId: '',
|
||||
date: null
|
||||
date: null,
|
||||
userId: null
|
||||
};
|
||||
};
|
||||
|
||||
@@ -143,11 +147,22 @@ export default defineComponent({
|
||||
const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
const userList = ref<KamiApiSysUserV1UserGetAllSimpleUser[]>([]);
|
||||
|
||||
// 获取所有分组
|
||||
const getAllUserList = () => {
|
||||
apiClient.apiUserGetSimpleAllGet().then(res => {
|
||||
userList.value = res.data.list;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
getAllUserList();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<Card class='general-card' title='核销统计'>
|
||||
<>
|
||||
<Space direction='vertical' fill>
|
||||
<Row>
|
||||
<Col flex={1}>
|
||||
@@ -161,11 +176,22 @@ export default defineComponent({
|
||||
/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<Col span={8}>
|
||||
<FormItem field='date' label='查询日期'>
|
||||
<DatePicker v-model={formModel.value.date} />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<FormItem field='userId' label='分配账号'>
|
||||
<Select v-model={formModel.value.userId}>
|
||||
{userList.value.map(item => (
|
||||
<Option key={item.id} value={item.id}>
|
||||
{item.userName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Col>
|
||||
@@ -224,7 +250,7 @@ export default defineComponent({
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,295 +1,29 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '沃尔玛分组']" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-card class="general-card" title="分组管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="searchForm"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input
|
||||
v-model="searchForm.name"
|
||||
placeholder="请输入分组名称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-button
|
||||
v-if="checkTokenFromLogin()"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>
|
||||
新增
|
||||
</a-button>
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="ID" data-index="id" :width="80" />
|
||||
<a-table-column title="分组名称" data-index="name" />
|
||||
<a-table-column title="描述" data-index="notes" />
|
||||
<a-table-column
|
||||
title="创建时间"
|
||||
data-index="createdAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column
|
||||
title="更新时间"
|
||||
data-index="updatedAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column title="操作" :width="200" fixed="right">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="warning"
|
||||
size="mini"
|
||||
@click="handleEdit(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-edit />
|
||||
</template>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="danger"
|
||||
size="mini"
|
||||
@click="handleDelete(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<summary-card />
|
||||
</a-space>
|
||||
<a-modal
|
||||
v-model:visible="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
@cancel="dialogVisible = false"
|
||||
@before-ok="handleSubmit"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
>
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input v-model="form.name" placeholder="请输入分组名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="description" label="描述">
|
||||
<a-textarea
|
||||
v-model="form.description"
|
||||
placeholder="请输入描述"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<a-card class="general-card" title="沃尔玛分组">
|
||||
<template #extra>
|
||||
<a-radio-group v-model="state.module" type="button">
|
||||
<a-radio value="list">列表</a-radio>
|
||||
<a-radio value="record">统计</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<list v-if="state.module === 'list'" />
|
||||
<Summary v-if="state.module === 'summary'" />
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Message, Modal } from '@arco-design/web-vue';
|
||||
import { apiClient } from '@/api/index.ts';
|
||||
import { KamiApiCardInfoWalmartV1GroupListReqPageSizeEnum } from '@/api/generated/models/kami-api-card-info-walmart-v1-group-list-req';
|
||||
import { KamiInternalModelEntityV1CardRedeemAccountGroup } from '@/api/generated/index.ts';
|
||||
import summaryCard from './summary.tsx';
|
||||
import { checkTokenFromLogin } from '@/utils/auth';
|
||||
import { reactive } from 'vue';
|
||||
import List from './list.vue';
|
||||
import Summary from './summary.tsx';
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
name: ''
|
||||
const state = reactive<{
|
||||
module: 'list' | 'summary';
|
||||
}>({
|
||||
module: 'list'
|
||||
});
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<KamiInternalModelEntityV1CardRedeemAccountGroup[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showTotal: true,
|
||||
showPageSize: true,
|
||||
pageSizeOptions: [10, 20, 50, 100]
|
||||
});
|
||||
|
||||
// 对话框
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref('');
|
||||
const formRef = ref();
|
||||
|
||||
// 表单
|
||||
const form = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入分组名称' },
|
||||
{ minLength: 2, maxLength: 50, message: '长度在 2 到 50 个字符' }
|
||||
]
|
||||
};
|
||||
|
||||
// 查询数据
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const resetSearch = () => {
|
||||
searchForm.name = '';
|
||||
pagination.current = 1;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
// TODO: 调用后端API
|
||||
const res = await apiClient.apiCardInfoWalmartGroupListGet(
|
||||
pagination.current,
|
||||
pagination.pageSize as KamiApiCardInfoWalmartV1GroupListReqPageSizeEnum
|
||||
);
|
||||
tableData.value = res.data.list;
|
||||
pagination.total = res.data.total;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Message.error('获取数据失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增分组';
|
||||
form.id = '';
|
||||
form.name = '';
|
||||
form.description = '';
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const handleEdit = row => {
|
||||
dialogTitle.value = '编辑分组';
|
||||
form.id = row.id;
|
||||
form.name = row.name;
|
||||
form.description = row.description;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row: KamiInternalModelEntityV1CardRedeemAccountGroup) => {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: '确认删除该分组吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await apiClient.apiCardInfoWalmartGroupDeleteDelete(row.id);
|
||||
Message.success('删除成功');
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
Message.error('删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
const { validate } = formRef.value;
|
||||
try {
|
||||
await validate();
|
||||
if (form.id) {
|
||||
apiClient.apiCardInfoWalmartGroupUpdatePut({
|
||||
id: form.id,
|
||||
name: form.name
|
||||
});
|
||||
} else {
|
||||
await apiClient.apiCardInfoWalmartGroupAddPost({
|
||||
name: form.name
|
||||
});
|
||||
}
|
||||
Message.success(form.id ? '更新成功' : '创建成功');
|
||||
dialogVisible.value = false;
|
||||
fetchData();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 分页处理
|
||||
const onPageChange = current => {
|
||||
pagination.current = current;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = pageSize => {
|
||||
pagination.pageSize = pageSize;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
326
src/views/card-walmart-info/group/list.vue
Normal file
326
src/views/card-walmart-info/group/list.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '沃尔玛分组']" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-card class="general-card" title="分组管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="searchForm"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input
|
||||
v-model="searchForm.name"
|
||||
placeholder="请输入分组名称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item field="userId" label="分配账号">
|
||||
<a-select v-model="searchForm.userId">
|
||||
<a-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.userName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetSearch">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-space direction="vertical" fill>
|
||||
<a-button
|
||||
v-if="checkTokenFromLogin()"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>
|
||||
新增
|
||||
</a-button>
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="ID" data-index="id" :width="80" />
|
||||
<a-table-column title="分组名称" data-index="name" />
|
||||
<a-table-column title="描述" data-index="notes" />
|
||||
<a-table-column
|
||||
title="创建时间"
|
||||
data-index="createdAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column
|
||||
title="更新时间"
|
||||
data-index="updatedAt"
|
||||
:width="180"
|
||||
/>
|
||||
<a-table-column title="操作" :width="200" fixed="right">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="warning"
|
||||
size="mini"
|
||||
@click="handleEdit(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-edit />
|
||||
</template>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
type="secondary"
|
||||
status="danger"
|
||||
size="mini"
|
||||
@click="handleDelete(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<summary-card />
|
||||
</a-space>
|
||||
<a-modal
|
||||
v-model:visible="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
@cancel="dialogVisible = false"
|
||||
@before-ok="handleSubmit"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
>
|
||||
<a-form-item field="name" label="分组名称">
|
||||
<a-input v-model="form.name" placeholder="请输入分组名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="description" label="描述">
|
||||
<a-textarea
|
||||
v-model="form.description"
|
||||
placeholder="请输入描述"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { Message, Modal } from '@arco-design/web-vue';
|
||||
import { apiClient } from '@/api/index.ts';
|
||||
import { KamiApiCardInfoWalmartV1GroupListReqPageSizeEnum } from '@/api/generated/models/kami-api-card-info-walmart-v1-group-list-req';
|
||||
import {
|
||||
KamiApiSysUserV1UserGetAllSimpleUser,
|
||||
KamiInternalModelEntityV1CardRedeemAccountGroup
|
||||
} from '@/api/generated/index.ts';
|
||||
import summaryCard from './summary.tsx';
|
||||
import { checkTokenFromLogin } from '@/utils/auth';
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
name: '',
|
||||
userId: null
|
||||
});
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<KamiInternalModelEntityV1CardRedeemAccountGroup[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showTotal: true,
|
||||
showPageSize: true,
|
||||
pageSizeOptions: [10, 20, 50, 100]
|
||||
});
|
||||
|
||||
// 对话框
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref('');
|
||||
const formRef = ref();
|
||||
|
||||
// 表单
|
||||
const form = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入分组名称' },
|
||||
{ minLength: 2, maxLength: 50, message: '长度在 2 到 50 个字符' }
|
||||
]
|
||||
};
|
||||
|
||||
// 查询数据
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const resetSearch = () => {
|
||||
searchForm.name = '';
|
||||
pagination.current = 1;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
// TODO: 调用后端API
|
||||
const res = await apiClient.apiCardInfoWalmartGroupListGet(
|
||||
pagination.current,
|
||||
pagination.pageSize as KamiApiCardInfoWalmartV1GroupListReqPageSizeEnum
|
||||
);
|
||||
tableData.value = res.data.list;
|
||||
pagination.total = res.data.total;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Message.error('获取数据失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增分组';
|
||||
form.id = '';
|
||||
form.name = '';
|
||||
form.description = '';
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const handleEdit = row => {
|
||||
dialogTitle.value = '编辑分组';
|
||||
form.id = row.id;
|
||||
form.name = row.name;
|
||||
form.description = row.description;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row: KamiInternalModelEntityV1CardRedeemAccountGroup) => {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: '确认删除该分组吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await apiClient.apiCardInfoWalmartGroupDeleteDelete(row.id);
|
||||
Message.success('删除成功');
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
Message.error('删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
const { validate } = formRef.value;
|
||||
try {
|
||||
await validate();
|
||||
if (form.id) {
|
||||
apiClient.apiCardInfoWalmartGroupUpdatePut({
|
||||
id: form.id,
|
||||
name: form.name
|
||||
});
|
||||
} else {
|
||||
await apiClient.apiCardInfoWalmartGroupAddPost({
|
||||
name: form.name
|
||||
});
|
||||
}
|
||||
Message.success(form.id ? '更新成功' : '创建成功');
|
||||
dialogVisible.value = false;
|
||||
fetchData();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 分页处理
|
||||
const onPageChange = current => {
|
||||
pagination.current = current;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = pageSize => {
|
||||
pagination.pageSize = pageSize;
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const userList = ref<KamiApiSysUserV1UserGetAllSimpleUser[]>([]);
|
||||
|
||||
// 获取所有分组
|
||||
const getAllUserList = () => {
|
||||
apiClient.apiUserGetSimpleAllGet().then(res => {
|
||||
userList.value = res.data.list;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
getAllUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -2,13 +2,13 @@ import { apiClient } from '@/api';
|
||||
import type {
|
||||
ApiCardInfoWalmartAccountDailySummaryGetPageSizeEnum,
|
||||
ApiCardInfoWalmartGroupStatGetPageSizeEnum,
|
||||
KamiApiCardInfoWalmartV1V1CardRedeemAccountGroupEntity
|
||||
KamiApiCardInfoWalmartV1V1CardRedeemAccountGroupEntity,
|
||||
KamiApiSysUserV1UserGetAllSimpleUser
|
||||
} from '@/api/generated';
|
||||
import { handleDownLoadFile } from '@/api/utils';
|
||||
import type { Pagination } from '@/types/global';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
DatePicker,
|
||||
Divider,
|
||||
@@ -17,7 +17,9 @@ import {
|
||||
Input,
|
||||
Message,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Option,
|
||||
Table,
|
||||
Tag,
|
||||
type TableColumnData
|
||||
@@ -28,6 +30,7 @@ interface IformData {
|
||||
accountId: string;
|
||||
username: string;
|
||||
date: string;
|
||||
userId: string | null;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
@@ -37,7 +40,8 @@ export default defineComponent({
|
||||
return {
|
||||
username: '',
|
||||
accountId: '',
|
||||
date: null
|
||||
date: null,
|
||||
userId: null
|
||||
};
|
||||
};
|
||||
|
||||
@@ -150,11 +154,20 @@ export default defineComponent({
|
||||
const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
const userList = ref<KamiApiSysUserV1UserGetAllSimpleUser[]>([]);
|
||||
|
||||
// 获取所有分组
|
||||
const getAllUserList = () => {
|
||||
apiClient.apiUserGetSimpleAllGet().then(res => {
|
||||
userList.value = res.data.list;
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
getAllUserList();
|
||||
});
|
||||
return () => (
|
||||
<Card class='general-card' title='核销统计'>
|
||||
<>
|
||||
<Space direction='vertical' fill>
|
||||
<Row>
|
||||
<Col flex={1}>
|
||||
@@ -173,6 +186,15 @@ export default defineComponent({
|
||||
<DatePicker v-model={formModel.value.date} />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<FormItem field='userId' label='分配账号'>
|
||||
<Select v-model={formModel.value.userId}>
|
||||
{userList.value.map(item => (
|
||||
<Option key={item.id} value={item.userName} />
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Col>
|
||||
@@ -231,7 +253,7 @@ export default defineComponent({
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="giftCardPwd" label="卡密">
|
||||
<a-input
|
||||
v-model="formModel.giftCardPwd"
|
||||
@@ -19,7 +19,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="attach" label="商户订单号">
|
||||
<a-input
|
||||
v-model="formModel.attach"
|
||||
@@ -27,7 +27,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="merchantId" label="系统订单号">
|
||||
<a-input
|
||||
v-model="formModel.merchantId"
|
||||
@@ -35,12 +35,12 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="dateRange" label="创建时间">
|
||||
<a-range-picker v-model="formModel.dateRange" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="accountNickName" label="账户昵称">
|
||||
<a-input
|
||||
v-model="formModel.accountNickName"
|
||||
@@ -48,7 +48,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="accountCk" label="账户Ck">
|
||||
<a-input
|
||||
v-model="formModel.accountCk"
|
||||
@@ -56,6 +56,18 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="userId" label="分配账号">
|
||||
<a-select v-model="formModel.userId">
|
||||
<Option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.userName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
@@ -211,6 +223,7 @@ import { checkTokenFromIframe } from '@/utils/auth';
|
||||
import { walmartCardOrderParams } from '@/api/card-walmart-order.ts';
|
||||
import {
|
||||
ApiCardInfoWalmartOrderListGetPageSizeEnum,
|
||||
KamiApiSysUserV1UserGetAllSimpleUser,
|
||||
KamiInternalModelEntityV1CardRedeemAccountGroup,
|
||||
KamiInternalModelEntityV1CardRedeemOrderInfo
|
||||
} from '@/api/generated/index.ts';
|
||||
@@ -289,10 +302,6 @@ const columns: TableColumnData[] = [
|
||||
dataIndex: 'notifyStatus',
|
||||
slotName: 'notifyStatus'
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
// dataIndex: 'remark'
|
||||
// },
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt'
|
||||
@@ -303,6 +312,7 @@ const columns: TableColumnData[] = [
|
||||
slotName: 'operation'
|
||||
}
|
||||
];
|
||||
|
||||
const generateFormModel = () => {
|
||||
return {
|
||||
merchantId: '',
|
||||
@@ -312,7 +322,8 @@ const generateFormModel = () => {
|
||||
accountCk: '',
|
||||
status: null,
|
||||
dateRange: [],
|
||||
groupId: null
|
||||
groupId: null,
|
||||
userId: null
|
||||
};
|
||||
};
|
||||
|
||||
@@ -334,6 +345,7 @@ const formModel = ref<{
|
||||
status: number;
|
||||
dateRange: string[];
|
||||
groupId: number | null;
|
||||
userId: number | null;
|
||||
}>(generateFormModel());
|
||||
|
||||
const fetchData = async (
|
||||
@@ -461,10 +473,6 @@ const onChangeRadio = (value: string | number | boolean) => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getAllGroupList();
|
||||
});
|
||||
|
||||
const exportData = () => {
|
||||
apiClient
|
||||
.apiCardInfoWalmartOrderExportGet(
|
||||
@@ -485,4 +493,18 @@ const exportData = () => {
|
||||
handleDownLoadFile(res.data as Blob, '沃尔玛订单统计.xlsx');
|
||||
});
|
||||
};
|
||||
|
||||
const userList = ref<KamiApiSysUserV1UserGetAllSimpleUser[]>([]);
|
||||
|
||||
// 获取所有分组
|
||||
const getAllUserList = () => {
|
||||
apiClient.apiUserGetSimpleAllGet().then(res => {
|
||||
userList.value = res.data.list;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getAllGroupList();
|
||||
getAllUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['规则管理', '规则匹配/规则记录']" />
|
||||
<Breadcrumb :items="['规则管理', '列表/记录']" />
|
||||
<a-card class="general-card" title="规则设置">
|
||||
<template #extra>
|
||||
<a-radio-group v-model="state.module" type="button">
|
||||
<a-radio value="rule">规则管理</a-radio>
|
||||
<a-radio value="list">规则列表</a-radio>
|
||||
<a-radio value="record">匹配记录</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<steal-rule v-if="state.module === 'rule'" />
|
||||
<steal-list v-if="state.module === 'list'" />
|
||||
<steal-record v-if="state.module === 'record'" />
|
||||
</a-card>
|
||||
</div>
|
||||
@@ -16,12 +16,12 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import StealRule from './steal-rule.vue';
|
||||
import StealList from './steal-list.vue';
|
||||
import StealRecord from './steal-record.vue';
|
||||
|
||||
const state = reactive<{
|
||||
module: 'rule' | 'record';
|
||||
module: 'list' | 'record';
|
||||
}>({
|
||||
module: 'rule'
|
||||
module: 'list'
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,20 +1,33 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['核销中心', '用户管理']" />
|
||||
<a-space direction="vertical" fill :size="16">
|
||||
<user />
|
||||
<summaryCard />
|
||||
</a-space>
|
||||
<a-card class="general-card" title="用户管理">
|
||||
<template #extra>
|
||||
<a-radio-group v-model="state.module" type="button">
|
||||
<a-radio value="list">列表</a-radio>
|
||||
<a-radio value="summary">统计</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<user v-if="state.module === 'list'" />
|
||||
<summaryCard v-if="state.module === 'summary'" />
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import user from './user.vue';
|
||||
import summaryCard from './summary.tsx';
|
||||
import { reactive } from 'vue';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'userManagementList'
|
||||
};
|
||||
|
||||
const state = reactive<{
|
||||
module: 'list' | 'summary';
|
||||
}>({
|
||||
module: 'list'
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -103,7 +103,7 @@ export default defineComponent({
|
||||
fetchData();
|
||||
});
|
||||
return () => (
|
||||
<Card class='general-card' title='核销统计'>
|
||||
<>
|
||||
<Row>
|
||||
<Col flex={1}>
|
||||
<Form model={formModel}>
|
||||
@@ -156,7 +156,7 @@ export default defineComponent({
|
||||
fetchData();
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,128 +1,115 @@
|
||||
<template>
|
||||
<a-card class="general-card" title="核销用户管理">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
<a-form
|
||||
:model="formModel"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
label-align="left"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="number" label="用户名">
|
||||
<a-input v-model="formModel.number" placeholder="请输入用户名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :span="12">
|
||||
<a-space>
|
||||
<a-button type="primary" size="small" @click="addUserItem">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
创建用户
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="12"
|
||||
style="display: flex; align-items: center; justify-content: end"
|
||||
></a-col>
|
||||
</a-row>
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:bordered="false"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #userStatus="{ record }">
|
||||
<a-space size="small">
|
||||
<a-switch
|
||||
v-if="[1, 0].includes(record.userStatus)"
|
||||
v-model="record.userStatus"
|
||||
size="small"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
checked-text="正常"
|
||||
unchecked-text="停用"
|
||||
@change="
|
||||
async () => {
|
||||
await pauseOrRestartAccount({ id: record.id });
|
||||
search();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<a-tag v-if="record.payment?.balance <= 1000" size="small" color="red">
|
||||
余额不足
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operation="{ record }">
|
||||
<a-space size="small">
|
||||
<a-button status="warning" size="mini" @click="modifyItem(record)">
|
||||
修改密码
|
||||
</a-button>
|
||||
<a-button
|
||||
status="warning"
|
||||
size="mini"
|
||||
@click="showRechargeToUser(record)"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item field="number" label="用户名">
|
||||
<a-input
|
||||
v-model="formModel.number"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-divider style="height: 42px" direction="vertical" />
|
||||
<a-col flex="172px" style="text-align: right">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button type="primary" @click="search">
|
||||
调整余额
|
||||
</a-button>
|
||||
<a-tooltip content="详情">
|
||||
<a-button size="mini" @click="showPaymentDrawer(record)">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
<icon-list />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
</a-tooltip>
|
||||
<a-tooltip content="删除">
|
||||
<a-button status="danger" size="mini" @click="deleteItem(record.id)">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
<icon-delete />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="margin-top: 0" />
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :span="12">
|
||||
<a-space>
|
||||
<a-button type="primary" size="small" @click="addUserItem">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
创建用户
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="12"
|
||||
style="display: flex; align-items: center; justify-content: end"
|
||||
></a-col>
|
||||
</a-row>
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:bordered="false"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #userStatus="{ record }">
|
||||
<a-space size="small">
|
||||
<a-switch
|
||||
v-if="[1, 0].includes(record.userStatus)"
|
||||
v-model="record.userStatus"
|
||||
size="small"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
checked-text="正常"
|
||||
unchecked-text="停用"
|
||||
@change="
|
||||
async () => {
|
||||
await pauseOrRestartAccount({ id: record.id });
|
||||
search();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<a-tag
|
||||
v-if="record.payment?.balance <= 1000"
|
||||
size="small"
|
||||
color="red"
|
||||
>
|
||||
余额不足
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operation="{ record }">
|
||||
<a-space size="small">
|
||||
<a-button status="warning" size="mini" @click="modifyItem(record)">
|
||||
修改密码
|
||||
</a-button>
|
||||
<a-button
|
||||
status="warning"
|
||||
size="mini"
|
||||
@click="showRechargeToUser(record)"
|
||||
>
|
||||
调整余额
|
||||
</a-button>
|
||||
<a-tooltip content="详情">
|
||||
<a-button size="mini" @click="showPaymentDrawer(record)">
|
||||
<template #icon>
|
||||
<icon-list />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="删除">
|
||||
<a-button
|
||||
status="danger"
|
||||
size="mini"
|
||||
@click="deleteItem(record.id)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
<add-update-modal
|
||||
v-model:visible="state.addModalVisible"
|
||||
:item="currentItem"
|
||||
|
||||
Reference in New Issue
Block a user