438 lines
12 KiB
Vue
438 lines
12 KiB
Vue
<template>
|
|
<div class="container">
|
|
<Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />
|
|
<a-card class="general-card" :title="$t('menu.jobuser.userlist')">
|
|
<a-row>
|
|
<a-col :flex="1">
|
|
<a-form :model="queryParams" :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="queryParams.key" :placeholder="'请输入关键字'" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- <a-col :span="8">
|
|
<a-form-item field="createdTime" :label="$t('searchTable.form.createdTime')">
|
|
<a-range-picker v-model="formModel.createdTime" style="width: 100%" />
|
|
</a-form-item>
|
|
</a-col> -->
|
|
<a-col :span="8">
|
|
<a-form-item field="status" :label="$t('searchTable.form.status')">
|
|
<a-select v-model="queryParams.status" :options="[
|
|
{
|
|
label: '全部',
|
|
value: -1,
|
|
},{
|
|
label: '封禁',
|
|
value: 0
|
|
}, {
|
|
label: '正常',
|
|
value: 1,
|
|
}]" :placeholder="'状态'" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-col>
|
|
|
|
<a-col :flex="'86px'" style="text-align: right">
|
|
<a-space :size="18">
|
|
<a-button type="primary" @click="getAll">
|
|
<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-table :data="data" :pagination="false">
|
|
<template #columns>
|
|
<a-table-column title="用户id" data-index="id"></a-table-column>
|
|
<a-table-column title="用户名称" data-index="username"></a-table-column>
|
|
<a-table-column title="备注" data-index="remark"></a-table-column>
|
|
<a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
|
|
<a-table-column title="用户积分" data-index="money"></a-table-column>
|
|
<a-table-column title="上级代理" data-index="parent_username"></a-table-column>
|
|
<a-table-column title="注册时间">
|
|
<template #cell="{ record }">
|
|
{{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="上次登录">
|
|
<template #cell="{ record }">
|
|
{{ dayjs(record.login_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="是否封禁" data-index="status"><template #cell="{ record }">
|
|
{{ record.status == 0 ? '是' : '否' }}
|
|
</template></a-table-column>
|
|
<a-table-column title="操作">
|
|
<template #cell="{ record }">
|
|
<a-space>
|
|
<a-button @click="handleBeforeOk_withdraw(record.id)">提现记录</a-button>
|
|
<a-button @click="show_money(record.id)">增减积分</a-button>
|
|
<a-button @click="show_group(record.id)">修改密码</a-button>
|
|
<a-button @click="set_remark(record.id)">修改备注</a-button>
|
|
<a-button v-if="record.status == 1" status="danger" @click="showConfirm(record.id)">封禁</a-button>
|
|
<a-button v-if="record.status == 0" status="success" @click="showConfirm_out(record.id)">解禁</a-button>
|
|
<a-button status="danger" @click="showConfirm_del(record.id)">删除</a-button>
|
|
</a-space>
|
|
</template>
|
|
</a-table-column>
|
|
</template>
|
|
</a-table>
|
|
<div class="pagination-container">
|
|
<a-pagination
|
|
v-model:current="pagination.current"
|
|
v-model:page-size="pagination.pageSize"
|
|
:total="pagination.total"
|
|
:page-size-options="pagination.pageSizeOptions"
|
|
:show-jumper="pagination.showJumper"
|
|
:show-page-size="pagination.showPageSize"
|
|
:show-total="pagination.showTotal"
|
|
@change="handleTableChange"
|
|
@page-size-change="handlePageSizeChange"
|
|
/>
|
|
</div>
|
|
</a-card>
|
|
<!-- 下级成员展示 -->
|
|
<!-- <a-modal v-model:visible="modal_visible" width="800px">
|
|
<template #title>
|
|
下级成员展示
|
|
</template>
|
|
<FamilyTreeChart :id="show_group_id" v-if="modal_visible"></FamilyTreeChart>
|
|
</a-modal> -->
|
|
<a-modal v-model:visible="modal_visible" width="800px" @before-ok="handleBeforeOk">
|
|
<template #title>
|
|
修改密码
|
|
</template>
|
|
<a-col :span="8">
|
|
<a-form-item field="password" label="密码" validate-trigger="blur">
|
|
<a-input-password v-model="password" placeholder="请输入密码" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-modal>
|
|
<a-modal v-model:visible="modal_visible_remark" width="800px" @before-ok="handleBeforeOk_remark">
|
|
<template #title>
|
|
修改备注
|
|
</template>
|
|
<a-col :span="8">
|
|
<a-form-item field="remark" label="备注" validate-trigger="blur">
|
|
<a-input v-model="remark" placeholder="请输入备注" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-modal>
|
|
<a-modal v-model:visible="modal_visible_withdraw" width="800px">
|
|
<template #title>
|
|
用户提现记录
|
|
</template>
|
|
<withdrawitem :data="withdraw"></withdrawitem>
|
|
</a-modal>
|
|
<a-modal v-model:visible="modal_visible_money" width="800px" @before-ok="handleBeforeOk_money">
|
|
<template #title>
|
|
增减用户积分
|
|
</template>
|
|
<!-- <a-col :span="8"> -->
|
|
|
|
<a-form-item field="money" label="积分" validate-trigger="blur">
|
|
<a-space direction="vertical" size="large">
|
|
<a-input-number v-model="money.money" placeholder="请输入积分负数为减" allow-clear />
|
|
</a-space>
|
|
</a-form-item>
|
|
<a-form-item field="money" label="备注" validate-trigger="blur">
|
|
<a-space direction="vertical" size="large">
|
|
<a-input v-model="money.memo" placeholder="请输入备注" allow-clear />
|
|
</a-space>
|
|
</a-form-item>
|
|
|
|
<!-- </a-col> -->
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
|
|
import { PaginationProps,TableChangeExtra } from '@arco-design/web-vue';
|
|
import { lists, black, OutBlack, del, set_user_password, set_user_remark,get_user_withdraw, add_money } from '@/api/jobuser';
|
|
import { Modal } from '@arco-design/web-vue';
|
|
import { Message } from '@arco-design/web-vue';
|
|
import dayjs from 'dayjs';
|
|
import withdrawitem from './components/withdrawitem.vue';
|
|
|
|
interface DataItem {
|
|
id: number;
|
|
username: string;
|
|
password: string;
|
|
time: Date;
|
|
money: string;
|
|
}
|
|
|
|
const pagination = reactive<PaginationProps>({
|
|
current: 1, // 当前页码
|
|
pageSize: 10, // 每页显示的条数
|
|
total: 0, // 总条数（根据实际情况设置）
|
|
pageSizeOptions: [10, 20, 50, 100,10000],
|
|
showJumper: true,
|
|
showPageSize: true,
|
|
showTotal: true,
|
|
})
|
|
|
|
const handlePageSizeChange = (pageSize: number) => {
|
|
pagination.current = 1;
|
|
pagination.pageSize = pageSize;
|
|
queryParams.value.current = 1;
|
|
queryParams.value.pageSize = pageSize;
|
|
getAll();
|
|
}
|
|
|
|
const handleTableChange = (page:number) => {
|
|
pagination.current = page;
|
|
queryParams.value.current = page;
|
|
getAll();
|
|
};
|
|
//设置备注弹窗
|
|
const modal_visible_remark = ref(false)
|
|
//用户提现记录弹窗
|
|
const modal_visible_withdraw = ref(false)
|
|
|
|
//增减用户积分
|
|
const modal_visible_money = ref(false)
|
|
|
|
const money=reactive({money:0,memo:"系统赠送"})
|
|
|
|
const remark = ref("")
|
|
const password = ref("")
|
|
let data = ref<DataItem[]>([])
|
|
//弹窗控制
|
|
const modal_visible = ref(false)
|
|
//保存需要修改的用户id
|
|
const userid = ref(0)
|
|
const show_group = (id: number) => {
|
|
userid.value = id
|
|
modal_visible.value = true
|
|
}
|
|
//展示增减用户积分弹窗
|
|
const show_money = (id: number) => {
|
|
userid.value = id
|
|
modal_visible_money.value = true
|
|
}
|
|
|
|
|
|
const set_remark = (id: number) => {
|
|
userid.value = id
|
|
modal_visible_remark.value = true
|
|
}
|
|
const withdraw=ref([])
|
|
const handleBeforeOk_withdraw = async (id: number) => {
|
|
userid.value = id
|
|
modal_visible_withdraw.value = true
|
|
const res= await get_user_withdraw(id);
|
|
withdraw.value=[];
|
|
withdraw.value=res.data;
|
|
}
|
|
|
|
const showConfirm = (id: string) => {
|
|
Modal.confirm({
|
|
title: '操作提醒',
|
|
content: '请确认是否要拉黑该用户',
|
|
onOk: () => handleBlock(id),
|
|
});
|
|
};
|
|
const showConfirm_out = (id: string) => {
|
|
Modal.confirm({
|
|
title: '操作提醒',
|
|
content: '请确认是否要解禁该用户',
|
|
onOk: () => OutBlock(id),
|
|
});
|
|
};
|
|
|
|
const showConfirm_del = (id: string) => {
|
|
Modal.confirm({
|
|
title: '操作提醒',
|
|
content: '请确认是否要删除该用户',
|
|
onOk: () => deluser(id),
|
|
});
|
|
};
|
|
const deluser = async (id: any) => {
|
|
const res = await del(id);
|
|
if (res.code == 200) {
|
|
getAll()
|
|
}
|
|
};
|
|
const OutBlock = async (id: string) => {
|
|
const res = await OutBlack(id);
|
|
if (res.code == 200) {
|
|
getAll()
|
|
}
|
|
};
|
|
|
|
const handleBeforeOk = async () => {
|
|
const res = await set_user_password(userid.value, password.value);
|
|
if (res.code == 200) {
|
|
Message.success('修改密码成功')
|
|
}
|
|
password.value = ""
|
|
}
|
|
|
|
const handleBeforeOk_remark = async () => {
|
|
const res = await set_user_remark(userid.value, remark.value);
|
|
if (res.code == 200) {
|
|
Message.success('修改备注成功')
|
|
getAll()
|
|
}
|
|
remark.value = ""
|
|
}
|
|
|
|
const handleBlock = async (id: string) => {
|
|
const res = await black(id);
|
|
if (res.code == 200) {
|
|
Message.success('拉黑成功')
|
|
getAll()
|
|
} else {
|
|
Message.error('拉黑失败')
|
|
}
|
|
};
|
|
|
|
|
|
const handleBeforeOk_money=async ()=>{
|
|
const res = await add_money(userid.value,money.money,money.memo);
|
|
if (res.code == 200) {
|
|
Message.success('操作成功')
|
|
getAll()
|
|
} else {
|
|
Message.error('操作失败')
|
|
}
|
|
}
|
|
const queryParams = ref({
|
|
key: "",
|
|
status: 1,
|
|
current: 1,
|
|
pageSize: 10,
|
|
});
|
|
|
|
const reset=()=>{
|
|
queryParams.value.key=""
|
|
queryParams.value.status=-1
|
|
getAll();
|
|
}
|
|
/**
|
|
* 获取所有的用户列表
|
|
*/
|
|
const getAll = async () => {
|
|
const res: any = await lists(queryParams.value);
|
|
if (res.code == 200) {
|
|
data.value = res.data.data;
|
|
pagination.total = res.data.total;
|
|
}
|
|
};
|
|
onMounted(async () => {
|
|
getAll()
|
|
})
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
padding: 0 20px 20px 20px;
|
|
}
|
|
|
|
.left-side {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.right-side {
|
|
width: 280px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.panel {
|
|
background-color: var(--color-bg-2);
|
|
border-radius: 4px;
|
|
overflow: auto;
|
|
}
|
|
|
|
:deep(.panel-border) {
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid rgb(var(--gray-2));
|
|
}
|
|
|
|
.moduler-wrap {
|
|
border-radius: 4px;
|
|
background-color: var(--color-bg-2);
|
|
|
|
:deep(.text) {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color: rgb(var(--gray-8));
|
|
}
|
|
|
|
:deep(.wrapper) {
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
.text {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.icon {
|
|
color: rgb(var(--arcoblue-6));
|
|
background-color: #e8f3ff;
|
|
}
|
|
|
|
.text {
|
|
color: rgb(var(--arcoblue-6));
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.icon) {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-bottom: 4px;
|
|
color: rgb(var(--dark-gray-1));
|
|
line-height: 32px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
background-color: rgb(var(--gray-1));
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="less" scoped>
|
|
// responsive
|
|
.mobile {
|
|
.container {
|
|
display: block;
|
|
}
|
|
|
|
.right-side {
|
|
// display: none;
|
|
width: 100%;
|
|
margin-left: 0;
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 10px;
|
|
background-color: white;
|
|
border-top: 1px solid #e8e8e8;
|
|
}
|
|
</style>
|