feat: 账号管理-授权、添加、分组管理、标签管理
This commit is contained in:
rd
@ -7,7 +7,7 @@
|
||||
<div class="container px-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账号名称</span>
|
||||
<span class="label">账户名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
@ -17,7 +17,7 @@
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">项目分组</span>
|
||||
<span class="label">计划分组</span>
|
||||
<a-space class="w-200px">
|
||||
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</a-space>
|
||||
|
||||
@ -12,74 +12,65 @@
|
||||
:mask-closable="false"
|
||||
@close="close"
|
||||
>
|
||||
<template v-if="!list.length">
|
||||
<div class="flex items-center justify-center flex-col">
|
||||
<div class="w-120px h-120px flex items-center justify-center mb-32px">
|
||||
<img :src="icon2" width="106" height="72" />
|
||||
</div>
|
||||
<span class="s1 mb-16px">暂无分组</span>
|
||||
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
|
||||
><template #icon>
|
||||
<img :src="icon3" width="16" height="16" class="relative top-3px" />
|
||||
</template>
|
||||
<template #default>去添加</template>
|
||||
</a-button>
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button type="primary" size="medium" @click="openAdd"
|
||||
><template #icon>
|
||||
<img :src="icon3" width="16" height="16" />
|
||||
</template>
|
||||
<template #default>添加新分组</template>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 500 }"
|
||||
class="h-500px"
|
||||
:pagination="false"
|
||||
@sorter-change="handleSorterChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
<a-button type="primary" size="medium" @click="openAdd"
|
||||
><template #icon>
|
||||
<img :src="icon3" width="16" height="16" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
|
||||
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="pagination-box flex justify-end">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>添加新分组</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:scroll="{ y: 500 }"
|
||||
class="h-500px"
|
||||
:pagination="false"
|
||||
@sorter-change="handleSorterChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData>
|
||||
<span class="s1 mb-16px">暂无分组</span>
|
||||
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
|
||||
><template #icon>
|
||||
<img :src="icon3" width="16" height="16" class="relative top-3px" />
|
||||
</template>
|
||||
<template #default>去添加</template>
|
||||
</a-button>
|
||||
</NoData>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
|
||||
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AddGroup ref="addGroupRef" @success="update" />
|
||||
<DeleteGroup ref="deleteGroupRef" @success="update" />
|
||||
@ -107,8 +98,8 @@ const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const query = ref({
|
||||
name: '',
|
||||
column: '',
|
||||
order: '',
|
||||
sort_column: '',
|
||||
sort_order: '',
|
||||
});
|
||||
const pageInfo = ref({
|
||||
page: 1,
|
||||
@ -148,8 +139,8 @@ const close = () => {
|
||||
pageInfo.value.page = 1;
|
||||
pageInfo.value.pageSize = 20;
|
||||
pageInfo.value.total = 0;
|
||||
query.value.column = '';
|
||||
query.value.order = '';
|
||||
query.value.sort_column = '';
|
||||
query.value.sort_order = '';
|
||||
list.value = [];
|
||||
visible.value = false;
|
||||
};
|
||||
@ -167,8 +158,8 @@ function openDelete(record) {
|
||||
}
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.column = column;
|
||||
query.value.order = order === 'ascend' ? 'asc' : 'desc';
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
getData();
|
||||
};
|
||||
async function getData() {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
|
||||
<a-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||
<a-tab-pane key="1" title="账户"></a-tab-pane>
|
||||
<a-tab-pane key="2" title="项目"></a-tab-pane>
|
||||
<a-tab-pane key="2" title="计划"></a-tab-pane>
|
||||
<template v-if="!isAccountTab" #extra>
|
||||
<a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
|
||||
<template #icon>
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GroupManageModal ref="groupManageModalRef" @update="() => filterBlockRef?.getGroups()" />
|
||||
<GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user