feat: 添加统计页面
This commit is contained in:
danial
@@ -1,168 +1,176 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<Breadcrumb :items="['充值账户管理', '沃尔玛Cookie']" />
|
<Breadcrumb :items="['充值账户管理', '沃尔玛Cookie']" />
|
||||||
<a-card class="general-card" title="沃尔玛Cookie管理">
|
<a-space>
|
||||||
<a-row>
|
<a-card class="general-card" title="沃尔玛Cookie管理">
|
||||||
<a-col :flex="1">
|
<a-row>
|
||||||
<a-form
|
<a-col :flex="1">
|
||||||
:model="formModel"
|
<a-form
|
||||||
:label-col-props="{ span: 6 }"
|
:model="formModel"
|
||||||
:wrapper-col-props="{ span: 18 }"
|
:label-col-props="{ span: 6 }"
|
||||||
label-align="left"
|
: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="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-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-row :gutter="16">
|
||||||
</a-tag>
|
<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="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-space>
|
||||||
</template>
|
</a-row>
|
||||||
<template #operations="{ record }">
|
<a-table
|
||||||
<a-space size="small">
|
:loading="loading"
|
||||||
<a-tooltip content="修改">
|
:pagination="{
|
||||||
<a-button
|
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"
|
size="small"
|
||||||
status="warning"
|
:checked-value="1"
|
||||||
@click="showAddModel(record)"
|
:unchecked-value="0"
|
||||||
|
:beforeChange="
|
||||||
|
newValue => updateCurrentStatus(record, newValue)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<a-tag
|
||||||
|
v-else
|
||||||
|
size="small"
|
||||||
|
:color="statusMapper(record.status).color"
|
||||||
>
|
>
|
||||||
<template #icon>
|
{{ statusMapper(record.status).text }}
|
||||||
<icon-pen />
|
</a-tag>
|
||||||
</template>
|
</a-space>
|
||||||
</a-button>
|
</template>
|
||||||
</a-tooltip>
|
<template #operations="{ record }">
|
||||||
<a-tooltip content="详情">
|
<a-space size="small">
|
||||||
<a-button size="small" @click="showDetailModel(record)">
|
<a-tooltip content="修改">
|
||||||
<template #icon>
|
|
||||||
<icon-list />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
<a-popconfirm
|
|
||||||
type="warning"
|
|
||||||
content="确认刷新账号状态嘛？"
|
|
||||||
@ok="refreshButton(record)"
|
|
||||||
>
|
|
||||||
<a-tooltip content="刷新">
|
|
||||||
<a-button
|
<a-button
|
||||||
v-if="record.status === 3"
|
|
||||||
size="small"
|
size="small"
|
||||||
status="success"
|
status="warning"
|
||||||
|
@click="showAddModel(record)"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-refresh />
|
<icon-pen />
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-popconfirm>
|
<a-tooltip content="详情">
|
||||||
<a-tooltip content="删除">
|
<a-button size="small" @click="showDetailModel(record)">
|
||||||
<a-button
|
<template #icon>
|
||||||
v-if="checkTokenFromIframe()"
|
<icon-list />
|
||||||
size="small"
|
</template>
|
||||||
status="danger"
|
</a-button>
|
||||||
@click="deleteOne(record.id)"
|
</a-tooltip>
|
||||||
|
<a-popconfirm
|
||||||
|
type="warning"
|
||||||
|
content="确认刷新账号状态嘛？"
|
||||||
|
@ok="refreshButton(record)"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<a-tooltip content="刷新">
|
||||||
<icon-delete />
|
<a-button
|
||||||
</template>
|
v-if="record.status === 3"
|
||||||
</a-button>
|
size="small"
|
||||||
</a-tooltip>
|
status="success"
|
||||||
</a-space>
|
>
|
||||||
</template>
|
<template #icon>
|
||||||
</a-table>
|
<icon-refresh />
|
||||||
</a-card>
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-tooltip content="删除">
|
||||||
|
<a-button
|
||||||
|
v-if="checkTokenFromIframe()"
|
||||||
|
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
|
<add-modal
|
||||||
:id="state.accountId"
|
:id="state.accountId"
|
||||||
v-model:visible="state.addModalVisible"
|
v-model:visible="state.addModalVisible"
|
||||||
@@ -182,6 +190,7 @@ import { checkTokenFromIframe, checkTokenFromLogin } from '@/utils/auth';
|
|||||||
import { onMounted, reactive, ref, watchEffect } from 'vue';
|
import { onMounted, reactive, ref, watchEffect } from 'vue';
|
||||||
import { Notification, TableColumnData } from '@arco-design/web-vue';
|
import { Notification, TableColumnData } from '@arco-design/web-vue';
|
||||||
import AddModal from './components/add-modal.vue';
|
import AddModal from './components/add-modal.vue';
|
||||||
|
import summaryCard from './summary';
|
||||||
import AccountDetail from './components/detail.vue';
|
import AccountDetail from './components/detail.vue';
|
||||||
import {
|
import {
|
||||||
deleteWalmartCard,
|
deleteWalmartCard,
|
||||||
|
|||||||
Reference in New Issue
Block a user