feat: 空间列表分页和搜索及数据列表优化 (#344)
1、fix: 修复因滚动条宽度影响皮肤标签的问题 2、feat: 空间列表分页和搜索及数据列表样式优化 3、feat: 对部分代码进行了优化
This commit is contained in:
parent
2044da4be9
commit
7c336e2320
@ -32,6 +32,7 @@ describe('WorkspaceController', () => {
|
|||||||
useValue: {
|
useValue: {
|
||||||
create: jest.fn(),
|
create: jest.fn(),
|
||||||
findAllById: jest.fn(),
|
findAllById: jest.fn(),
|
||||||
|
findAllByIdWithPagination: jest.fn(),
|
||||||
update: jest.fn(),
|
update: jest.fn(),
|
||||||
delete: jest.fn(),
|
delete: jest.fn(),
|
||||||
},
|
},
|
||||||
@ -145,20 +146,28 @@ describe('WorkspaceController', () => {
|
|||||||
jest
|
jest
|
||||||
.spyOn(workspaceMemberService, 'findAllByUserId')
|
.spyOn(workspaceMemberService, 'findAllByUserId')
|
||||||
.mockResolvedValue(memberList as unknown as Array<WorkspaceMember>);
|
.mockResolvedValue(memberList as unknown as Array<WorkspaceMember>);
|
||||||
|
|
||||||
jest
|
jest
|
||||||
.spyOn(workspaceService, 'findAllById')
|
.spyOn(workspaceService, 'findAllByIdWithPagination')
|
||||||
.mockResolvedValue(workspaces as Array<Workspace>);
|
.mockResolvedValue({
|
||||||
|
list: workspaces as Array<Workspace>,
|
||||||
|
count: workspaces.length,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
jest.spyOn(userService, 'getUserListByIds').mockResolvedValue([]);
|
jest.spyOn(userService, 'getUserListByIds').mockResolvedValue([]);
|
||||||
|
|
||||||
const result = await controller.findAll(req);
|
const result = await controller.findAll(req, {curPage:1,pageSize:10});
|
||||||
|
|
||||||
expect(result.code).toEqual(200);
|
expect(result.code).toEqual(200);
|
||||||
expect(workspaceMemberService.findAllByUserId).toHaveBeenCalledWith({
|
expect(workspaceMemberService.findAllByUserId).toHaveBeenCalledWith({
|
||||||
userId: req.user._id.toString(),
|
userId: req.user._id.toString(),
|
||||||
});
|
});
|
||||||
expect(workspaceService.findAllById).toHaveBeenCalledWith({
|
expect(workspaceService.findAllByIdWithPagination).toHaveBeenCalledWith({
|
||||||
workspaceIdList: memberList.map((item) => item.workspaceId),
|
workspaceIdList: memberList.map((item) => item.workspaceId),
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
name: undefined
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -9,6 +9,7 @@ import {
|
|||||||
Request,
|
Request,
|
||||||
SetMetadata,
|
SetMetadata,
|
||||||
HttpCode,
|
HttpCode,
|
||||||
|
Query,
|
||||||
} from '@nestjs/common';
|
} from '@nestjs/common';
|
||||||
import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
|
import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
@ -31,6 +32,7 @@ import { splitMembers } from '../utils/splitMember';
|
|||||||
import { UserService } from 'src/modules/auth/services/user.service';
|
import { UserService } from 'src/modules/auth/services/user.service';
|
||||||
import { SurveyMetaService } from 'src/modules/survey/services/surveyMeta.service';
|
import { SurveyMetaService } from 'src/modules/survey/services/surveyMeta.service';
|
||||||
import { Logger } from 'src/logger';
|
import { Logger } from 'src/logger';
|
||||||
|
import { GetWorkspaceListDto } from '../dto/getWorkspaceList.dto';
|
||||||
|
|
||||||
@ApiTags('workspace')
|
@ApiTags('workspace')
|
||||||
@ApiBearerAuth()
|
@ApiBearerAuth()
|
||||||
@ -128,8 +130,21 @@ export class WorkspaceController {
|
|||||||
|
|
||||||
@Get()
|
@Get()
|
||||||
@HttpCode(200)
|
@HttpCode(200)
|
||||||
async findAll(@Request() req) {
|
async findAll(@Request() req, @Query() queryInfo: GetWorkspaceListDto) {
|
||||||
|
const { value, error } = GetWorkspaceListDto.validate(queryInfo);
|
||||||
|
if (error) {
|
||||||
|
this.logger.error(
|
||||||
|
`GetWorkspaceListDto validate failed: ${error.message}`,
|
||||||
|
{ req },
|
||||||
|
);
|
||||||
|
throw new HttpException(
|
||||||
|
`参数错误: 请联系管理员`,
|
||||||
|
EXCEPTION_CODE.PARAMETER_ERROR,
|
||||||
|
);
|
||||||
|
}
|
||||||
const userId = req.user._id.toString();
|
const userId = req.user._id.toString();
|
||||||
|
const curPage = Number(value.curPage);
|
||||||
|
const pageSize = Number(value.pageSize);
|
||||||
// 查询当前用户参与的空间
|
// 查询当前用户参与的空间
|
||||||
const workspaceInfoList = await this.workspaceMemberService.findAllByUserId(
|
const workspaceInfoList = await this.workspaceMemberService.findAllByUserId(
|
||||||
{ userId },
|
{ userId },
|
||||||
@ -139,9 +154,16 @@ export class WorkspaceController {
|
|||||||
pre[cur.workspaceId] = cur;
|
pre[cur.workspaceId] = cur;
|
||||||
return pre;
|
return pre;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
// 查询当前用户的空间列表
|
// 查询当前用户的空间列表
|
||||||
const list = await this.workspaceService.findAllById({ workspaceIdList });
|
const { list, count } =
|
||||||
const ownerIdList = list.map((item) => item.ownerId);
|
await this.workspaceService.findAllByIdWithPagination({
|
||||||
|
workspaceIdList,
|
||||||
|
page: curPage,
|
||||||
|
limit: pageSize,
|
||||||
|
name: queryInfo.name,
|
||||||
|
});
|
||||||
|
const ownerIdList = list.map((item: { ownerId: any }) => item.ownerId);
|
||||||
const userList = await this.userService.getUserListByIds({
|
const userList = await this.userService.getUserListByIds({
|
||||||
idList: ownerIdList,
|
idList: ownerIdList,
|
||||||
});
|
});
|
||||||
@ -150,6 +172,7 @@ export class WorkspaceController {
|
|||||||
pre[id] = cur;
|
pre[id] = cur;
|
||||||
return pre;
|
return pre;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
const surveyTotalList = await Promise.all(
|
const surveyTotalList = await Promise.all(
|
||||||
workspaceIdList.map((item) => {
|
workspaceIdList.map((item) => {
|
||||||
return this.surveyMetaService.countSurveyMetaByWorkspaceId({
|
return this.surveyMetaService.countSurveyMetaByWorkspaceId({
|
||||||
@ -193,6 +216,7 @@ export class WorkspaceController {
|
|||||||
memberTotal: memberTotalMap[workspaceId] || 0,
|
memberTotal: memberTotalMap[workspaceId] || 0,
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
|
count,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
21
server/src/modules/workspace/dto/getWorkspaceList.dto.ts
Normal file
21
server/src/modules/workspace/dto/getWorkspaceList.dto.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { ApiProperty } from '@nestjs/swagger';
|
||||||
|
import Joi from 'joi';
|
||||||
|
|
||||||
|
export class GetWorkspaceListDto {
|
||||||
|
@ApiProperty({ description: '当前页码', required: true })
|
||||||
|
curPage: number;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '分页', required: false })
|
||||||
|
pageSize: number;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '空间名称', required: false })
|
||||||
|
name?: string;
|
||||||
|
|
||||||
|
static validate(data: Partial<GetWorkspaceListDto>): Joi.ValidationResult {
|
||||||
|
return Joi.object({
|
||||||
|
curPage: Joi.number().required(),
|
||||||
|
pageSize: Joi.number().allow(null).default(10),
|
||||||
|
name: Joi.string().allow(null, '').optional(),
|
||||||
|
}).validate(data);
|
||||||
|
}
|
||||||
|
}
|
@ -8,6 +8,17 @@ import { SurveyMeta } from 'src/models/surveyMeta.entity';
|
|||||||
import { ObjectId } from 'mongodb';
|
import { ObjectId } from 'mongodb';
|
||||||
import { RECORD_STATUS } from 'src/enums';
|
import { RECORD_STATUS } from 'src/enums';
|
||||||
|
|
||||||
|
interface FindAllByIdWithPaginationParams {
|
||||||
|
workspaceIdList: string[];
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
name?: string;
|
||||||
|
}
|
||||||
|
interface FindAllByIdWithPaginationResult {
|
||||||
|
list: Workspace[];
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class WorkspaceService {
|
export class WorkspaceService {
|
||||||
constructor(
|
constructor(
|
||||||
@ -41,15 +52,17 @@ export class WorkspaceService {
|
|||||||
}: {
|
}: {
|
||||||
workspaceIdList: string[];
|
workspaceIdList: string[];
|
||||||
}): Promise<Workspace[]> {
|
}): Promise<Workspace[]> {
|
||||||
return this.workspaceRepository.find({
|
const query = {
|
||||||
where: {
|
|
||||||
_id: {
|
_id: {
|
||||||
$in: workspaceIdList.map((item) => new ObjectId(item)),
|
$in: workspaceIdList.map((item) => new ObjectId(item)),
|
||||||
},
|
},
|
||||||
'curStatus.status': {
|
'curStatus.status': {
|
||||||
$ne: RECORD_STATUS.REMOVED,
|
$ne: RECORD_STATUS.REMOVED,
|
||||||
},
|
},
|
||||||
},
|
};
|
||||||
|
|
||||||
|
return this.workspaceRepository.find({
|
||||||
|
where: query,
|
||||||
order: {
|
order: {
|
||||||
_id: -1,
|
_id: -1,
|
||||||
},
|
},
|
||||||
@ -64,6 +77,35 @@ export class WorkspaceService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async findAllByIdWithPagination({
|
||||||
|
workspaceIdList,
|
||||||
|
page,
|
||||||
|
limit,
|
||||||
|
name,
|
||||||
|
}: FindAllByIdWithPaginationParams): Promise<FindAllByIdWithPaginationResult> {
|
||||||
|
const skip = (page - 1) * limit;
|
||||||
|
if (!Array.isArray(workspaceIdList) || workspaceIdList.length === 0) {
|
||||||
|
return { list: [], count: 0 };
|
||||||
|
}
|
||||||
|
const query = {
|
||||||
|
_id: {
|
||||||
|
$in: workspaceIdList.map((m) => new ObjectId(m)),
|
||||||
|
},
|
||||||
|
'curStatus.status': {
|
||||||
|
$ne: RECORD_STATUS.REMOVED,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
if (name) {
|
||||||
|
query['name'] = { $regex: name, $options: 'i' };
|
||||||
|
}
|
||||||
|
const [data, count] = await this.workspaceRepository.findAndCount({
|
||||||
|
where: query,
|
||||||
|
skip,
|
||||||
|
take: limit,
|
||||||
|
});
|
||||||
|
return { list: data, count };
|
||||||
|
}
|
||||||
|
|
||||||
update(id: string, workspace: Partial<Workspace>) {
|
update(id: string, workspace: Partial<Workspace>) {
|
||||||
return this.workspaceRepository.update(id, workspace);
|
return this.workspaceRepository.update(id, workspace);
|
||||||
}
|
}
|
||||||
|
@ -8,8 +8,10 @@ export const updateSpace = ({ workspaceId, name, description, members }: any) =>
|
|||||||
return axios.post(`/workspace/${workspaceId}`, { name, description, members })
|
return axios.post(`/workspace/${workspaceId}`, { name, description, members })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getSpaceList = () => {
|
export const getSpaceList = (params: any) => {
|
||||||
return axios.get('/workspace')
|
return axios.get('/workspace', {
|
||||||
|
params
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getSpaceDetail = (workspaceId: string) => {
|
export const getSpaceDetail = (workspaceId: string) => {
|
||||||
|
@ -9,7 +9,7 @@ export const spaceListConfig = {
|
|||||||
name: {
|
name: {
|
||||||
title: '空间名称',
|
title: '空间名称',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
width: 300
|
width: 200
|
||||||
},
|
},
|
||||||
surveyTotal: {
|
surveyTotal: {
|
||||||
title: '问卷数',
|
title: '问卷数',
|
||||||
@ -82,6 +82,16 @@ export const noListDataConfig = {
|
|||||||
img: '/imgs/icons/list-empty.webp'
|
img: '/imgs/icons/list-empty.webp'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const noSpaceDataConfig = {
|
||||||
|
title: '您还没有创建团队空间',
|
||||||
|
desc: '赶快点击右上角立即创建团队空间吧!',
|
||||||
|
img: '/imgs/icons/list-empty.webp'
|
||||||
|
}
|
||||||
|
export const noSpaceSearchDataConfig = {
|
||||||
|
title: '没有满足该查询条件的团队空间哦',
|
||||||
|
desc: '可以更换条件查询试试',
|
||||||
|
img: '/imgs/icons/list-empty.webp'
|
||||||
|
}
|
||||||
export const noSearchDataConfig = {
|
export const noSearchDataConfig = {
|
||||||
title: '没有满足该查询条件的问卷哦',
|
title: '没有满足该查询条件的问卷哦',
|
||||||
desc: '可以更换条件查询试试',
|
desc: '可以更换条件查询试试',
|
||||||
|
@ -42,7 +42,7 @@
|
|||||||
</el-table>
|
</el-table>
|
||||||
<el-popover
|
<el-popover
|
||||||
ref="popover"
|
ref="popover"
|
||||||
popper-style="text-align: center;"
|
popper-style="text-align: center;font-size: 13px;"
|
||||||
:virtual-ref="popoverVirtualRef"
|
:virtual-ref="popoverVirtualRef"
|
||||||
placement="top"
|
placement="top"
|
||||||
width="400"
|
width="400"
|
||||||
@ -83,11 +83,11 @@ const setPopoverContent = (content) => {
|
|||||||
}
|
}
|
||||||
const onPopoverRefOver = (scope, type) => {
|
const onPopoverRefOver = (scope, type) => {
|
||||||
let popoverContent
|
let popoverContent
|
||||||
if (type == 'head') {
|
if (type === 'head') {
|
||||||
popoverVirtualRef.value = popoverRefMap.value[scope.column.id]
|
popoverVirtualRef.value = popoverRefMap.value[scope.column.id]
|
||||||
popoverContent = scope.column.label.replace(/ /g, '')
|
popoverContent = scope.column.label.replace(/ /g, '')
|
||||||
}
|
}
|
||||||
if (type == 'content') {
|
if (type === 'content') {
|
||||||
popoverVirtualRef.value = popoverRefMap.value[scope.$index + scope.column.property]
|
popoverVirtualRef.value = popoverRefMap.value[scope.$index + scope.column.property]
|
||||||
popoverContent = getContent(scope.row[scope.column.property])
|
popoverContent = getContent(scope.row[scope.column.property])
|
||||||
}
|
}
|
||||||
@ -99,7 +99,6 @@ const onPopoverRefOver = (scope, type) => {
|
|||||||
.data-table-wrapper {
|
.data-table-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 20px;
|
|
||||||
min-height: v-bind('tableMinHeight');
|
min-height: v-bind('tableMinHeight');
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
@ -132,4 +131,7 @@ const onPopoverRefOver = (scope, type) => {
|
|||||||
/* 显示省略号 */
|
/* 显示省略号 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:deep(.el-table td.el-table__cell div) {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -8,7 +8,14 @@
|
|||||||
<NavPanel></NavPanel>
|
<NavPanel></NavPanel>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-group">
|
<div class="right-group">
|
||||||
<CooperationPanel></CooperationPanel>
|
<CooperationPanel>
|
||||||
|
<template #content="{ onCooper }">
|
||||||
|
<div class="btn" @click="onCooper">
|
||||||
|
<i-ep-connection class="view-icon" :size="20" />
|
||||||
|
<span class="btn-txt">协作</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</CooperationPanel>
|
||||||
<PreviewPanel></PreviewPanel>
|
<PreviewPanel></PreviewPanel>
|
||||||
<HistoryPanel></HistoryPanel>
|
<HistoryPanel></HistoryPanel>
|
||||||
<SavePanel></SavePanel>
|
<SavePanel></SavePanel>
|
||||||
@ -34,6 +41,12 @@ const store = useStore()
|
|||||||
const title = computed(() => _get(store.state, 'edit.schema.metaData.title'))
|
const title = computed(() => _get(store.state, 'edit.schema.metaData.title'))
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import url('@/management/styles/edit-btn.scss');
|
||||||
|
.view-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
height: 29px;
|
||||||
|
line-height: 29px;
|
||||||
|
}
|
||||||
.nav {
|
.nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
|
@ -92,6 +92,10 @@ const changePreset = (banner: any) => {
|
|||||||
border: none;
|
border: none;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.title {
|
.title {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
@ -1,14 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="list-wrap">
|
<div class="search">
|
||||||
|
<TextSearch placeholder="请输入问卷标题" :value="searchVal" @search="onSearchText" />
|
||||||
|
</div>
|
||||||
|
<div class="list-wrap" v-if="props.total > 0">
|
||||||
<el-table
|
<el-table
|
||||||
ref="multipleListTable"
|
ref="multipleListTable"
|
||||||
class="list-table"
|
class="list-table"
|
||||||
:data="dataList"
|
:data="data"
|
||||||
empty-text="暂无数据"
|
empty-text="暂无数据"
|
||||||
row-key="_id"
|
row-key="_id"
|
||||||
header-row-class-name="tableview-header"
|
header-row-class-name="tableview-header"
|
||||||
row-class-name="tableview-row"
|
row-class-name="tableview-row"
|
||||||
cell-class-name="tableview-cell"
|
cell-class-name="tableview-cell"
|
||||||
|
v-loading="loading"
|
||||||
|
:height="550"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<el-table-column column-key="space" width="20" />
|
<el-table-column column-key="space" width="20" />
|
||||||
@ -30,7 +35,6 @@
|
|||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="操作"
|
label="操作"
|
||||||
:width="200"
|
:width="200"
|
||||||
@ -50,6 +54,19 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<EmptyIndex :data="!searchVal ? noSpaceDataConfig : noSpaceSearchDataConfig" />
|
||||||
|
</div>
|
||||||
|
<div class="list-pagination">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="curPage"
|
||||||
|
background
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="props.total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
<SpaceModify
|
<SpaceModify
|
||||||
v-if="showSpaceModify"
|
v-if="showSpaceModify"
|
||||||
:type="modifyType"
|
:type="modifyType"
|
||||||
@ -58,28 +75,47 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, watch } from 'vue'
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import 'element-plus/theme-chalk/src/message-box.scss'
|
import 'element-plus/theme-chalk/src/message-box.scss'
|
||||||
import { get, map } from 'lodash-es'
|
import { get, map } from 'lodash-es'
|
||||||
import { spaceListConfig } from '@/management/config/listConfig'
|
import {
|
||||||
|
noSpaceDataConfig,
|
||||||
|
noSpaceSearchDataConfig,
|
||||||
|
spaceListConfig
|
||||||
|
} from '@/management/config/listConfig'
|
||||||
import SpaceModify from './SpaceModify.vue'
|
import SpaceModify from './SpaceModify.vue'
|
||||||
|
import TextSearch from '@/management/pages/list/components/TextSearch.vue'
|
||||||
|
import EmptyIndex from '@/management/components/EmptyIndex.vue'
|
||||||
import ToolBar from './ToolBar.vue'
|
import ToolBar from './ToolBar.vue'
|
||||||
import { UserRole } from '@/management/utils/types/workSpace'
|
import { UserRole } from '@/management/utils/types/workSpace'
|
||||||
|
|
||||||
|
|
||||||
const showSpaceModify = ref(false)
|
const showSpaceModify = ref(false)
|
||||||
const modifyType = ref('edit')
|
const modifyType = ref('edit')
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
const props = defineProps({
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['reflush'])
|
||||||
const fields = ['name', 'surveyTotal', 'memberTotal', 'owner', 'createDate']
|
const fields = ['name', 'surveyTotal', 'memberTotal', 'owner', 'createDate']
|
||||||
const fieldList = computed(() => {
|
const fieldList = computed(() => {
|
||||||
return map(fields, (f) => {
|
return map(fields, (f) => {
|
||||||
return get(spaceListConfig, f, null)
|
return get(spaceListConfig, f, null)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const dataList = computed(() => {
|
|
||||||
return store.state.list.teamSpaceList
|
|
||||||
})
|
|
||||||
const isAdmin = (id: string) => {
|
const isAdmin = (id: string) => {
|
||||||
return (
|
return (
|
||||||
store.state.list.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
|
store.state.list.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
|
||||||
@ -87,6 +123,26 @@ const isAdmin = (id: string) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const data = computed(() => {
|
||||||
|
return props.data
|
||||||
|
})
|
||||||
|
let searchVal = ref('')
|
||||||
|
let curPage = ref(1)
|
||||||
|
const emitReflush = (page: number, name: string) => {
|
||||||
|
curPage.value = page
|
||||||
|
emit('reflush', {
|
||||||
|
curPage: page,
|
||||||
|
name
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handleCurrentChange = async (val: number) => {
|
||||||
|
emitReflush(val, searchVal.value)
|
||||||
|
}
|
||||||
|
const onSearchText = async (e: string) => {
|
||||||
|
searchVal.value = e
|
||||||
|
emitReflush(1, e)
|
||||||
|
}
|
||||||
|
|
||||||
const getTools = (data: any) => {
|
const getTools = (data: any) => {
|
||||||
const flag = isAdmin(data._id)
|
const flag = isAdmin(data._id)
|
||||||
const tools = [{ key: 'modify', label: flag ? '管理' : '查看' }]
|
const tools = [{ key: 'modify', label: flag ? '管理' : '查看' }]
|
||||||
@ -101,7 +157,6 @@ const handleModify = async (id: string) => {
|
|||||||
modifyType.value = 'edit'
|
modifyType.value = 'edit'
|
||||||
showSpaceModify.value = true
|
showSpaceModify.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDelete = (id: string) => {
|
const handleDelete = (id: string) => {
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm(
|
||||||
'删除团队后,团队内的问卷将同步被删除,请谨慎考虑!是否确认本次删除?',
|
'删除团队后,团队内的问卷将同步被删除,请谨慎考虑!是否确认本次删除?',
|
||||||
@ -115,6 +170,7 @@ const handleDelete = (id: string) => {
|
|||||||
.then(async () => {
|
.then(async () => {
|
||||||
await store.dispatch('list/deleteSpace', id)
|
await store.dispatch('list/deleteSpace', id)
|
||||||
await store.dispatch('list/getSpaceList')
|
await store.dispatch('list/getSpaceList')
|
||||||
|
curPage.value = 1
|
||||||
})
|
})
|
||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
}
|
}
|
||||||
@ -130,17 +186,31 @@ const handleClick = (key: string, data: any) => {
|
|||||||
const onCloseModify = () => {
|
const onCloseModify = () => {
|
||||||
showSpaceModify.value = false
|
showSpaceModify.value = false
|
||||||
store.dispatch('list/getSpaceList')
|
store.dispatch('list/getSpaceList')
|
||||||
|
curPage.value = 1
|
||||||
}
|
}
|
||||||
// const handleCurrentChange = (current) => {
|
defineExpose({ onCloseModify })
|
||||||
// this.currentPage = current
|
|
||||||
// this.init()
|
|
||||||
// }
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.list-pagination {
|
||||||
|
margin-top: 20px;
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
.list-wrap {
|
.list-wrap {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.list-table {
|
.list-table {
|
||||||
:deep(.el-table__header) {
|
:deep(.el-table__header) {
|
||||||
.tableview-header .el-table__cell {
|
.tableview-header .el-table__cell {
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
>
|
>
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<i-ep-search class="el-input__icon" />
|
<i-ep-search @click="onSearch" class="el-input__icon" />
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</div>
|
</div>
|
||||||
|
@ -52,7 +52,14 @@
|
|||||||
@reflush="fetchSurveyList"
|
@reflush="fetchSurveyList"
|
||||||
v-if="spaceType !== SpaceType.Group"
|
v-if="spaceType !== SpaceType.Group"
|
||||||
></BaseList>
|
></BaseList>
|
||||||
<SpaceList v-if="spaceType === SpaceType.Group"></SpaceList>
|
<SpaceList
|
||||||
|
ref="spaceListRef"
|
||||||
|
@reflush="fetchSpaceList"
|
||||||
|
:loading="loading2"
|
||||||
|
:data="spaceList"
|
||||||
|
:total="spaceTotal"
|
||||||
|
v-if="spaceType === SpaceType.Group"
|
||||||
|
></SpaceList>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<SpaceModify
|
<SpaceModify
|
||||||
@ -86,6 +93,21 @@ const surveyList = computed(() => {
|
|||||||
const surveyTotal = computed(() => {
|
const surveyTotal = computed(() => {
|
||||||
return store.state.list.surveyTotal
|
return store.state.list.surveyTotal
|
||||||
})
|
})
|
||||||
|
let spaceListRef = ref<InstanceType<typeof SpaceList> | null>(null)
|
||||||
|
const loading2 = ref(false)
|
||||||
|
const spaceList = computed(() => {
|
||||||
|
return store.state.list.teamSpaceList
|
||||||
|
})
|
||||||
|
const spaceTotal = computed(() => {
|
||||||
|
return store.state.list.teamSpaceListTotal
|
||||||
|
})
|
||||||
|
const fetchSpaceList = async (params?: any) => {
|
||||||
|
loading2.value = true
|
||||||
|
store.commit('list/changeWorkSpace', '')
|
||||||
|
await store.dispatch('list/getSpaceList', params)
|
||||||
|
loading2.value = false
|
||||||
|
}
|
||||||
|
|
||||||
const activeIndex = ref('1')
|
const activeIndex = ref('1')
|
||||||
|
|
||||||
const spaceMenus = computed(() => {
|
const spaceMenus = computed(() => {
|
||||||
@ -97,39 +119,37 @@ const workSpaceId = computed(() => {
|
|||||||
const spaceType = computed(() => {
|
const spaceType = computed(() => {
|
||||||
return store.state.list.spaceType
|
return store.state.list.spaceType
|
||||||
})
|
})
|
||||||
const handleSpaceSelect = (id: any) => {
|
const handleSpaceSelect = (id: SpaceType | string) => {
|
||||||
if (id === SpaceType.Personal) {
|
if (id === store.state.list.spaceType || id === store.state.list.workSpaceId) {
|
||||||
// 点击个人空间菜单
|
return void 0
|
||||||
if (store.state.list.spaceType === SpaceType.Personal) {
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
store.commit('list/changeSpaceType', SpaceType.Personal)
|
const changeSpaceType = (type: SpaceType) => {
|
||||||
store.commit('list/changeWorkSpace', '')
|
store.commit('list/changeSpaceType', type)
|
||||||
} else if (id === SpaceType.Group) {
|
|
||||||
// 点击团队空间组菜单
|
|
||||||
if (store.state.list.spaceType === SpaceType.Group) {
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
store.commit('list/changeSpaceType', SpaceType.Group)
|
const changeWorkSpace = (id: string) => {
|
||||||
store.commit('list/changeWorkSpace', '')
|
|
||||||
} else if (!Object.values(SpaceType).includes(id)) {
|
|
||||||
// 点击具体团队空间
|
|
||||||
if (store.state.list.workSpaceId === id) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
store.commit('list/changeSpaceType', SpaceType.Teamwork)
|
|
||||||
store.commit('list/changeWorkSpace', id)
|
store.commit('list/changeWorkSpace', id)
|
||||||
}
|
}
|
||||||
|
switch (id) {
|
||||||
|
case SpaceType.Personal:
|
||||||
|
changeSpaceType(SpaceType.Personal)
|
||||||
|
changeWorkSpace('')
|
||||||
|
break
|
||||||
|
case SpaceType.Group:
|
||||||
|
changeSpaceType(SpaceType.Group)
|
||||||
|
changeWorkSpace('')
|
||||||
|
fetchSpaceList()
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
changeSpaceType(SpaceType.Teamwork)
|
||||||
|
changeWorkSpace(id)
|
||||||
|
break
|
||||||
|
}
|
||||||
fetchSurveyList()
|
fetchSurveyList()
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchSpaceList()
|
fetchSpaceList()
|
||||||
fetchSurveyList()
|
fetchSurveyList()
|
||||||
})
|
})
|
||||||
const fetchSpaceList = () => {
|
|
||||||
store.dispatch('list/getSpaceList')
|
|
||||||
}
|
|
||||||
const fetchSurveyList = async (params?: any) => {
|
const fetchSurveyList = async (params?: any) => {
|
||||||
if (!params) {
|
if (!params) {
|
||||||
params = {
|
params = {
|
||||||
@ -160,7 +180,10 @@ const onSetGroup = async () => {
|
|||||||
|
|
||||||
const onCloseModify = (type: string) => {
|
const onCloseModify = (type: string) => {
|
||||||
showSpaceModify.value = false
|
showSpaceModify.value = false
|
||||||
if (type === 'update') fetchSpaceList()
|
if (type === 'update' && spaceListRef.value) {
|
||||||
|
fetchSpaceList()
|
||||||
|
spaceListRef.value.onCloseModify()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const onSpaceCreate = () => {
|
const onSpaceCreate = () => {
|
||||||
showSpaceModify.value = true
|
showSpaceModify.value = true
|
||||||
|
@ -37,7 +37,9 @@ export default {
|
|||||||
spaceType: SpaceType.Personal,
|
spaceType: SpaceType.Personal,
|
||||||
workSpaceId: '',
|
workSpaceId: '',
|
||||||
spaceDetail: null,
|
spaceDetail: null,
|
||||||
|
// 团队空间
|
||||||
teamSpaceList: [],
|
teamSpaceList: [],
|
||||||
|
teamSpaceListTotal: 0,
|
||||||
// 列表管理
|
// 列表管理
|
||||||
surveyList: [],
|
surveyList: [],
|
||||||
surveyTotal: 0,
|
surveyTotal: 0,
|
||||||
@ -116,6 +118,9 @@ export default {
|
|||||||
setTeamSpaceList(state, data) {
|
setTeamSpaceList(state, data) {
|
||||||
state.teamSpaceList = data
|
state.teamSpaceList = data
|
||||||
},
|
},
|
||||||
|
setTeamSpaceListTotal(state, teamSpaceListTotal) {
|
||||||
|
state.teamSpaceListTotal = teamSpaceListTotal
|
||||||
|
},
|
||||||
setSurveyList(state, list) {
|
setSurveyList(state, list) {
|
||||||
state.surveyList = list
|
state.surveyList = list
|
||||||
},
|
},
|
||||||
@ -145,18 +150,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
async getSpaceList({ commit }) {
|
async getSpaceList({ commit }, p = { curPage: 1 }) {
|
||||||
try {
|
try {
|
||||||
const res = await getSpaceList()
|
const res = await getSpaceList(p)
|
||||||
|
|
||||||
if (res.code === CODE_MAP.SUCCESS) {
|
if (res.code === CODE_MAP.SUCCESS) {
|
||||||
const { list } = res.data
|
const { list, count } = res.data
|
||||||
const teamSpace = list.map((item) => {
|
const teamSpace = list.map((item) => {
|
||||||
return {
|
return {
|
||||||
id: item._id,
|
id: item._id,
|
||||||
name: item.name
|
name: item.name
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
commit('setTeamSpaceListTotal', count)
|
||||||
commit('setTeamSpaceList', list)
|
commit('setTeamSpaceList', list)
|
||||||
commit('updateSpaceMenus', teamSpace)
|
commit('updateSpaceMenus', teamSpace)
|
||||||
} else {
|
} else {
|
||||||
|
Loading…
Reference in New Issue
Block a user