geekai/new-ui/projects/admin/src/views/User/UserContainer.vue
2024-03-15 11:07:41 +08:00

97 lines
2.7 KiB
Vue

<script lang="ts" setup>
import SearchTable from "@/components/SearchTable/SearchTable.vue";
import type { SearchTableColumns } from "@/components/SearchTable/type";
import { getList, save as saveApi, deletApi, resetPassword } from "./api";
import UserForm from "./UserForm.vue";
import { Message } from "@arco-design/web-vue";
import { dateFormat } from "@chatgpt-plus/packages/utils";
import UserPassword from "./UserPassword.vue";
import useCustomFormPopup from "@/composables/useCustomFormPopup";
const columns: SearchTableColumns[] = [
{
title: "用户头像",
dataIndex: "avatar",
slotName: "avatar",
},
{
title: "账号",
dataIndex: "username",
search: {
valueType: "input",
},
},
{
title: "剩余算力",
dataIndex: "calls",
},
{
title: "状态",
dataIndex: "status",
render: ({ record }) => {
return record.status ? "正常" : "停用";
},
},
{
title: "过期时间",
dataIndex: "expired_time",
width: 180,
slotName: "expired_time",
},
{
title: "注册时间",
dataIndex: "created_at",
width: 180,
render: ({ record }) => {
return dateFormat(record.created_at);
},
},
{
title: "操作",
slotName: "actions",
width: 180,
fixed: "right",
},
];
//弹窗
const editModal = useCustomFormPopup(UserForm, saveApi, {
popupProps: (arg) => ({ title: arg[0].record ? "编辑用户" : "新增用户" }),
});
const password = useCustomFormPopup(UserPassword, resetPassword, {
popupProps: (arg) => ({ title: "重置密码" }),
});
const handleDelete = async ({ id }: { id: string }, reload) => {
const res = await deletApi(id);
if (res.code === 0) {
Message.success("操作成功");
reload();
}
};
</script>
<template>
<SearchTable :request="getList" :columns="columns">
<template #avatar="{ record }">
<a-avatar>
<a-image :src="record.avatar" style="border-radius: 50%" />
</a-avatar>
</template>
<template #expired_time="{ record }">
<a-tag v-if="record.expired_time === 0" color="blue">长期有效</a-tag>
<template v-else>{{ dateFormat(record.expired_time) }}</template>
</template>
<template #actions="{ record, reload }">
<a-link @click="editModal({ record, reload })">编辑</a-link>
<a-popconfirm content="确定删除?" @ok="handleDelete(record, reload)">
<a-link status="danger">删除</a-link>
</a-popconfirm>
<a-link @click="password({ record, reload })">重置密码</a-link>
</template>
<template #search-extra="{ reload }">
<a-button @click="editModal({ reload })" size="small" type="primary">
<template #icon> <icon-plus /> </template>新增
</a-button>
</template>
</SearchTable>
</template>