feat: 添加统计页面
This commit is contained in:
danial
@@ -1,168 +1,176 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['充值账户管理', '沃尔玛Cookie']" />
|
||||
<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="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"
|
||||
<a-space>
|
||||
<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"
|
||||
>
|
||||
{{ statusMapper(record.status).text }}
|
||||
</a-tag>
|
||||
<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>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-space size="small">
|
||||
<a-tooltip content="修改">
|
||||
<a-button
|
||||
</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"
|
||||
status="warning"
|
||||
@click="showAddModel(record)"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
:beforeChange="
|
||||
newValue => updateCurrentStatus(record, newValue)
|
||||
"
|
||||
/>
|
||||
<a-tag
|
||||
v-else
|
||||
size="small"
|
||||
:color="statusMapper(record.status).color"
|
||||
>
|
||||
<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="刷新">
|
||||
{{ statusMapper(record.status).text }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-space size="small">
|
||||
<a-tooltip content="修改">
|
||||
<a-button
|
||||
v-if="record.status === 3"
|
||||
size="small"
|
||||
status="success"
|
||||
status="warning"
|
||||
@click="showAddModel(record)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
<icon-pen />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
<a-tooltip content="删除">
|
||||
<a-button
|
||||
v-if="checkTokenFromIframe()"
|
||||
size="small"
|
||||
status="danger"
|
||||
@click="deleteOne(record.id)"
|
||||
<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)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<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
|
||||
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
|
||||
:id="state.accountId"
|
||||
v-model:visible="state.addModalVisible"
|
||||
@@ -182,6 +190,7 @@ import { checkTokenFromIframe, 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';
|
||||
import AccountDetail from './components/detail.vue';
|
||||
import {
|
||||
deleteWalmartCard,
|
||||
|
||||
Reference in New Issue
Block a user