答卷白名单前端代码 (#309)
* --story=1059873 --user=T8罗佳明 【ALL】2024年06月日常优化 https://www.tapd.cn/23402991/s/2202857 * feat: 新增分题统计相关功能 (#275) * feat: 分题统计前端开发 (#276) * [refactor]: check for the ispc-html class is done using a regular expression to ensure that the class is only added once when the browser window is resized (#301) * feat: 调整文档内容 * fix: 修复预览兼容 * fix: 修复文档内容 * feat:答卷白名单功能 * fix:修复提示框不重置的问题 * fix:修复lint问题 * fix:修复server的lint问题 --------- Co-authored-by: luch <32321690+luch1994@users.noreply.github.com> Co-authored-by: hiStephen <30630927+1004801012@users.noreply.github.com> Co-authored-by: yelang <happyforeveron@gmail.com> Co-authored-by: sudoooooo <zjbbabybaby@gmail.com>
This commit is contained in:
chaorenluo
GitHub
parent
667d13962c
commit
dab83e4d4c
18
README.md
18
README.md
@ -53,11 +53,11 @@ _**(个人和企业用户均可快速构建特定领域的调研类解决方案
|
||||
|
||||
# 技术
|
||||
|
||||
Web 端：Vue3 + ElementPlus；C 端多端渲染（在建，[申请加入共建](https://xiaojusurvey.didi.cn/docs/next/share/%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E8%B4%A1%E7%8C%AE#%E6%88%90%E4%B8%BA%E5%AE%98%E6%96%B9%E4%B8%93%E9%A1%B9%E5%BB%BA%E8%AE%BE%E8%80%85)）
|
||||
Web 端：Vue3 + ElementPlus；C 端多端渲染（规划中）
|
||||
|
||||
Server 端：Nestjs + MongoDB；Java（在建，[申请加入共建](https://xiaojusurvey.didi.cn/docs/next/share/%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E8%B4%A1%E7%8C%AE#%E6%88%90%E4%B8%BA%E5%AE%98%E6%96%B9%E4%B8%93%E9%A1%B9%E5%BB%BA%E8%AE%BE%E8%80%85)）
|
||||
Server 端：Nestjs + MongoDB；Java（在建，[欢迎加入共建](https://github.com/didi/xiaoju-survey/issues/306)）
|
||||
|
||||
智能化基座：（在建）
|
||||
智能化基座：（规划中）
|
||||
|
||||
# 项目优势
|
||||
|
||||
@ -194,18 +194,18 @@ npm run serve
|
||||
|
||||
<br /><br />
|
||||
|
||||
## 微信交流群（推荐）
|
||||
|
||||
官方群会发布项目最新消息、建设计划和社区活动，欢迎你的加入。任何问题和合作可以联系小助手：
|
||||
|
||||
<img src="https://img-hxy021.didistatic.com/static/starimg/img/KXKvc7sjHz1700061188156.png" width="200" />
|
||||
|
||||
## QQ 交流群
|
||||
|
||||
官方群会发布项目最新消息、建设计划和社区活动，欢迎你的加入：
|
||||
|
||||
[<img src="https://img-hxy021.didistatic.com/static/starimg/img/iJUmLIHKV21700192846057.png" width="210" />](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P61UJI_q8AzizyBLGOm-bUvzNrUnSQq-&authKey=yZFtL9biGB5yiIME3%2Bi%2Bf6XMOdTNiuf0pCIaviEEAIryySNzVy6LJ4xl7uHdEcrM&noverify=0&group_code=920623419)
|
||||
|
||||
## 微信交流群
|
||||
|
||||
官方群会发布项目最新消息、建设计划和社区活动，欢迎你的加入。任何问题和合作可以联系小助手：
|
||||
|
||||
<img src="https://img-hxy021.didistatic.com/static/starimg/img/KXKvc7sjHz1700061188156.png" width="200" />
|
||||
|
||||
## Star
|
||||
|
||||
开源不易，如果该项目对你有帮助，请 star 一下 ❤️❤️❤️，你的支持是我们最大的动力。
|
||||
|
||||
20
README_EN.md
20
README_EN.md
@ -47,17 +47,17 @@
|
||||
|
||||
> For more comprehensive features, please refer to the official Feature documentation.
|
||||
|
||||
<img src="https://github.com/didi/xiaoju-survey/assets/16012672/dd427471-368d-49d9-bc44-13c34d84e3be" width="700" />
|
||||
<img src="https://github.com/didi/xiaoju-survey/assets/16012672/508ce30f-0ae8-4f5f-84a7-e96de8238a7f" width="700" />
|
||||
|
||||
_**(Both individual and enterprise users can quickly build survey solutions specific to their fields.)**_
|
||||
|
||||
# Technology
|
||||
|
||||
Web: Vue3 + ElementPlus; Multi-end rendering for C-end (under construction, application for co-construction welcome).
|
||||
Web: Vue3 + ElementPlus; Multi-end rendering for C-end (planning).
|
||||
|
||||
Server: Nestjs + MongoDB; Java (under construction).
|
||||
Server: Nestjs + MongoDB; Java ([under construction](https://github.com/didi/xiaoju-survey/issues/306)).
|
||||
|
||||
Intelligent Foundation: (under construction).
|
||||
Intelligent Foundation: (planning).
|
||||
|
||||
# Project Advantages
|
||||
|
||||
@ -194,18 +194,18 @@ Create and publish a questionnaire.
|
||||
|
||||
<br /><br />
|
||||
|
||||
## QQ Group
|
||||
|
||||
The official group will release the latest project news, construction plans, and community activities. Welcome to join:
|
||||
|
||||
[<img src="https://img-hxy021.didistatic.com/static/starimg/img/iJUmLIHKV21700192846057.png" width="210" />](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P61UJI_q8AzizyBLGOm-bUvzNrUnSQq-&authKey=yZFtL9biGB5yiIME3%2Bi%2Bf6XMOdTNiuf0pCIaviEEAIryySNzVy6LJ4xl7uHdEcrM&noverify=0&group_code=920623419)
|
||||
|
||||
## WeChat Group
|
||||
|
||||
The official group will release the latest project news, construction plans, and community activities. Any questions and cooperation can contact the assistant:
|
||||
|
||||
<img src="https://img-hxy021.didistatic.com/static/starimg/img/KXKvc7sjHz1700061188156.png" width="200" />
|
||||
|
||||
## QQ Group
|
||||
|
||||
The official group will release the latest project news, construction plans, and community activities. Welcome to join:
|
||||
|
||||
[<img src="https://img-hxy021.didistatic.com/static/starimg/img/iJUmLIHKV21700192846057.png" width="210" />](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P61UJI_q8AzizyBLGOm-bUvzNrUnSQq-&authKey=yZFtL9biGB5yiIME3%2Bi%2Bf6XMOdTNiuf0pCIaviEEAIryySNzVy6LJ4xl7uHdEcrM&noverify=0&group_code=920623419)
|
||||
|
||||
## Star
|
||||
|
||||
Open source is not easy. If this project helps you, please star it ❤️❤️❤️. Your support is our greatest motivation.
|
||||
|
||||
@ -11,6 +11,7 @@ import { NoPermissionException } from 'src/exceptions/noPermissionException';
|
||||
import { SurveyMeta } from 'src/models/surveyMeta.entity';
|
||||
import { WorkspaceMember } from 'src/models/workspaceMember.entity';
|
||||
import { Collaborator } from 'src/models/collaborator.entity';
|
||||
import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
|
||||
|
||||
describe('SurveyGuard', () => {
|
||||
let guard: SurveyGuard;
|
||||
@ -81,7 +82,19 @@ describe('SurveyGuard', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should allow access if user is the owner of the survey', async () => {
|
||||
it('should allow access if user is the owner of the survey by ownerId', async () => {
|
||||
const context = createMockExecutionContext();
|
||||
const surveyMeta = { ownerId: 'testUserId', workspaceId: null };
|
||||
jest.spyOn(reflector, 'get').mockReturnValue('params.surveyId');
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
|
||||
const result = await guard.canActivate(context);
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('should allow access if user is the owner of the survey by username', async () => {
|
||||
const context = createMockExecutionContext();
|
||||
const surveyMeta = { owner: 'testUser', workspaceId: null };
|
||||
jest.spyOn(reflector, 'get').mockReturnValue('params.surveyId');
|
||||
@ -108,7 +121,35 @@ describe('SurveyGuard', () => {
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('should throw NoPermissionException if user has no permissions', async () => {
|
||||
it('should throw NoPermissionException if user is not a workspace member', async () => {
|
||||
const context = createMockExecutionContext();
|
||||
const surveyMeta = { owner: 'anotherUser', workspaceId: 'workspaceId' };
|
||||
jest.spyOn(reflector, 'get').mockReturnValue('params.surveyId');
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
jest.spyOn(workspaceMemberService, 'findOne').mockResolvedValue(null);
|
||||
|
||||
await expect(guard.canActivate(context)).rejects.toThrow(
|
||||
NoPermissionException,
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw NoPermissionException if no permissions are provided', async () => {
|
||||
const context = createMockExecutionContext();
|
||||
const surveyMeta = { owner: 'anotherUser', workspaceId: null };
|
||||
jest.spyOn(reflector, 'get').mockReturnValueOnce('params.surveyId');
|
||||
jest.spyOn(reflector, 'get').mockReturnValueOnce(null);
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
|
||||
await expect(guard.canActivate(context)).rejects.toThrow(
|
||||
NoPermissionException,
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw NoPermissionException if user has no matching permissions', async () => {
|
||||
const context = createMockExecutionContext();
|
||||
const surveyMeta = { owner: 'anotherUser', workspaceId: null };
|
||||
jest.spyOn(reflector, 'get').mockReturnValueOnce('params.surveyId');
|
||||
@ -125,6 +166,24 @@ describe('SurveyGuard', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should allow access if user has the required permissions', async () => {
|
||||
const context = createMockExecutionContext();
|
||||
const surveyMeta = { owner: 'anotherUser', workspaceId: null };
|
||||
jest.spyOn(reflector, 'get').mockReturnValueOnce('params.surveyId');
|
||||
jest
|
||||
.spyOn(reflector, 'get')
|
||||
.mockReturnValueOnce([SURVEY_PERMISSION.SURVEY_CONF_MANAGE]);
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
jest.spyOn(collaboratorService, 'getCollaborator').mockResolvedValue({
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
|
||||
} as Collaborator);
|
||||
|
||||
const result = await guard.canActivate(context);
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
function createMockExecutionContext(): ExecutionContext {
|
||||
return {
|
||||
switchToHttp: jest.fn().mockReturnValue({
|
||||
|
||||
@ -6,6 +6,7 @@ import { User } from 'src/models/user.entity';
|
||||
import { HttpException } from 'src/exceptions/httpException';
|
||||
import { hash256 } from 'src/utils/hash256';
|
||||
import { RECORD_STATUS } from 'src/enums';
|
||||
import { ObjectId } from 'mongodb';
|
||||
|
||||
describe('UserService', () => {
|
||||
let service: UserService;
|
||||
@ -21,6 +22,7 @@ describe('UserService', () => {
|
||||
create: jest.fn(),
|
||||
save: jest.fn(),
|
||||
findOne: jest.fn(),
|
||||
find: jest.fn(),
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -32,6 +34,10 @@ describe('UserService', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
expect(service).toBeDefined();
|
||||
});
|
||||
|
||||
it('should create a user', async () => {
|
||||
const userInfo = {
|
||||
username: 'testUser',
|
||||
@ -102,7 +108,7 @@ describe('UserService', () => {
|
||||
expect(user).toEqual({ ...userInfo, password: hashedPassword });
|
||||
});
|
||||
|
||||
it('should return undefined when user is not found by credentials', async () => {
|
||||
it('should return null when user is not found by credentials', async () => {
|
||||
const userInfo = {
|
||||
username: 'nonExistingUser',
|
||||
password: 'nonExistingPassword',
|
||||
@ -129,7 +135,8 @@ describe('UserService', () => {
|
||||
const userInfo = {
|
||||
username: username,
|
||||
password: 'existingPassword',
|
||||
} as User;
|
||||
curStatus: { status: 'ACTIVE' },
|
||||
} as unknown as User;
|
||||
|
||||
jest.spyOn(userRepository, 'findOne').mockResolvedValue(userInfo);
|
||||
|
||||
@ -137,10 +144,129 @@ describe('UserService', () => {
|
||||
|
||||
expect(userRepository.findOne).toHaveBeenCalledWith({
|
||||
where: {
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
username: username,
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
},
|
||||
});
|
||||
expect(user).toEqual(userInfo);
|
||||
});
|
||||
|
||||
it('should return null when user is not found by username', async () => {
|
||||
const username = 'nonExistingUser';
|
||||
|
||||
const findOneSpy = jest
|
||||
.spyOn(userRepository, 'findOne')
|
||||
.mockResolvedValue(null);
|
||||
|
||||
const user = await service.getUserByUsername(username);
|
||||
|
||||
expect(findOneSpy).toHaveBeenCalledWith({
|
||||
where: {
|
||||
username: username,
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
},
|
||||
});
|
||||
expect(user).toBe(null);
|
||||
});
|
||||
|
||||
it('should return a user by id', async () => {
|
||||
const id = '60c72b2f9b1e8a5f4b123456';
|
||||
const userInfo = {
|
||||
_id: new ObjectId(id),
|
||||
username: 'testUser',
|
||||
curStatus: { status: 'ACTIVE' },
|
||||
} as unknown as User;
|
||||
|
||||
jest.spyOn(userRepository, 'findOne').mockResolvedValue(userInfo);
|
||||
|
||||
const user = await service.getUserById(id);
|
||||
|
||||
expect(userRepository.findOne).toHaveBeenCalledWith({
|
||||
where: {
|
||||
_id: new ObjectId(id),
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
},
|
||||
});
|
||||
expect(user).toEqual(userInfo);
|
||||
});
|
||||
|
||||
it('should return null when user is not found by id', async () => {
|
||||
const id = '60c72b2f9b1e8a5f4b123456';
|
||||
|
||||
const findOneSpy = jest
|
||||
.spyOn(userRepository, 'findOne')
|
||||
.mockResolvedValue(null);
|
||||
|
||||
const user = await service.getUserById(id);
|
||||
|
||||
expect(findOneSpy).toHaveBeenCalledWith({
|
||||
where: {
|
||||
_id: new ObjectId(id),
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
},
|
||||
});
|
||||
expect(user).toBe(null);
|
||||
});
|
||||
|
||||
it('should return a list of users by username', async () => {
|
||||
const username = 'test';
|
||||
const userList = [
|
||||
{ _id: new ObjectId(), username: 'testUser1', createDate: new Date() },
|
||||
{ _id: new ObjectId(), username: 'testUser2', createDate: new Date() },
|
||||
];
|
||||
|
||||
jest
|
||||
.spyOn(userRepository, 'find')
|
||||
.mockResolvedValue(userList as unknown as User[]);
|
||||
|
||||
const result = await service.getUserListByUsername({
|
||||
username,
|
||||
skip: 0,
|
||||
take: 10,
|
||||
});
|
||||
|
||||
expect(userRepository.find).toHaveBeenCalledWith({
|
||||
where: {
|
||||
username: new RegExp(username),
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
},
|
||||
skip: 0,
|
||||
take: 10,
|
||||
select: ['_id', 'username', 'createDate'],
|
||||
});
|
||||
expect(result).toEqual(userList);
|
||||
});
|
||||
|
||||
it('should return a list of users by ids', async () => {
|
||||
const idList = ['60c72b2f9b1e8a5f4b123456', '60c72b2f9b1e8a5f4b123457'];
|
||||
const userList = [
|
||||
{
|
||||
_id: new ObjectId(idList[0]),
|
||||
username: 'testUser1',
|
||||
createDate: new Date(),
|
||||
},
|
||||
{
|
||||
_id: new ObjectId(idList[1]),
|
||||
username: 'testUser2',
|
||||
createDate: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
jest
|
||||
.spyOn(userRepository, 'find')
|
||||
.mockResolvedValue(userList as unknown as User[]);
|
||||
|
||||
const result = await service.getUserListByIds({ idList });
|
||||
|
||||
expect(userRepository.find).toHaveBeenCalledWith({
|
||||
where: {
|
||||
_id: {
|
||||
$in: idList.map((id) => new ObjectId(id)),
|
||||
},
|
||||
'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
|
||||
},
|
||||
select: ['_id', 'username', 'createDate'],
|
||||
});
|
||||
expect(result).toEqual(userList);
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,7 +10,13 @@ import { UserService } from 'src/modules/auth/services/user.service';
|
||||
import { ObjectId } from 'mongodb';
|
||||
import { SurveyMetaService } from '../services/surveyMeta.service';
|
||||
import { WorkspaceMemberService } from 'src/modules/workspace/services/workspaceMember.service';
|
||||
import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
|
||||
import {
|
||||
SURVEY_PERMISSION,
|
||||
SURVEY_PERMISSION_DESCRIPTION,
|
||||
} from 'src/enums/surveyPermission';
|
||||
import { BatchSaveCollaboratorDto } from '../dto/batchSaveCollaborator.dto';
|
||||
import { User } from 'src/models/user.entity';
|
||||
import { SurveyMeta } from 'src/models/surveyMeta.entity';
|
||||
|
||||
jest.mock('src/guards/authentication.guard');
|
||||
jest.mock('src/guards/survey.guard');
|
||||
@ -21,6 +27,8 @@ describe('CollaboratorController', () => {
|
||||
let collaboratorService: CollaboratorService;
|
||||
let logger: Logger;
|
||||
let userService: UserService;
|
||||
let surveyMetaService: SurveyMetaService;
|
||||
let workspaceMemberServie: WorkspaceMemberService;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
@ -34,12 +42,18 @@ describe('CollaboratorController', () => {
|
||||
changeUserPermission: jest.fn(),
|
||||
deleteCollaborator: jest.fn(),
|
||||
getCollaborator: jest.fn(),
|
||||
batchDeleteBySurveyId: jest.fn(),
|
||||
batchCreate: jest.fn(),
|
||||
batchDelete: jest.fn(),
|
||||
updateById: jest.fn(),
|
||||
batchSaveCollaborator: jest.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: Logger,
|
||||
useValue: {
|
||||
error: jest.fn(),
|
||||
info: jest.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -72,6 +86,10 @@ describe('CollaboratorController', () => {
|
||||
collaboratorService = module.get<CollaboratorService>(CollaboratorService);
|
||||
logger = module.get<Logger>(Logger);
|
||||
userService = module.get<UserService>(UserService);
|
||||
surveyMetaService = module.get<SurveyMetaService>(SurveyMetaService);
|
||||
workspaceMemberServie = module.get<WorkspaceMemberService>(
|
||||
WorkspaceMemberService,
|
||||
);
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
@ -115,6 +133,59 @@ describe('CollaboratorController', () => {
|
||||
HttpException,
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw an exception if user does not exist', async () => {
|
||||
const reqBody: CreateCollaboratorDto = {
|
||||
surveyId: 'surveyId',
|
||||
userId: new ObjectId().toString(),
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
|
||||
};
|
||||
const req = {
|
||||
user: { _id: 'userId' },
|
||||
surveyMeta: { ownerId: new ObjectId().toString() },
|
||||
};
|
||||
|
||||
jest.spyOn(userService, 'getUserById').mockResolvedValue(null);
|
||||
|
||||
await expect(controller.addCollaborator(reqBody, req)).rejects.toThrow(
|
||||
HttpException,
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw an exception if user is the survey owner', async () => {
|
||||
const userId = new ObjectId().toString();
|
||||
const reqBody: CreateCollaboratorDto = {
|
||||
surveyId: 'surveyId',
|
||||
userId: userId,
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
|
||||
};
|
||||
const req = { user: { _id: 'userId' }, surveyMeta: { ownerId: userId } };
|
||||
|
||||
await expect(controller.addCollaborator(reqBody, req)).rejects.toThrow(
|
||||
HttpException,
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw an exception if user is already a collaborator', async () => {
|
||||
const userId = new ObjectId().toString();
|
||||
const reqBody: CreateCollaboratorDto = {
|
||||
surveyId: 'surveyId',
|
||||
userId: userId,
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
|
||||
};
|
||||
const req = {
|
||||
user: { _id: 'userId' },
|
||||
surveyMeta: { ownerId: new ObjectId().toString() },
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(collaboratorService, 'getCollaborator')
|
||||
.mockResolvedValue({} as unknown as Collaborator);
|
||||
|
||||
await expect(controller.addCollaborator(reqBody, req)).rejects.toThrow(
|
||||
HttpException,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getSurveyCollaboratorList', () => {
|
||||
@ -217,4 +288,229 @@ describe('CollaboratorController', () => {
|
||||
expect(logger.error).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
// 新增的测试方法
|
||||
describe('getPermissionList', () => {
|
||||
it('should return the permission list', async () => {
|
||||
const result = Object.values(SURVEY_PERMISSION_DESCRIPTION);
|
||||
|
||||
const response = await controller.getPermissionList();
|
||||
|
||||
expect(response).toEqual({
|
||||
code: 200,
|
||||
data: result,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('batchSaveCollaborator', () => {
|
||||
it('should batch save collaborators successfully', async () => {
|
||||
const userId0 = new ObjectId().toString();
|
||||
const userId1 = new ObjectId().toString();
|
||||
const existsCollaboratorId = new ObjectId().toString();
|
||||
const surveyId = new ObjectId().toString();
|
||||
const reqBody: BatchSaveCollaboratorDto = {
|
||||
surveyId: surveyId,
|
||||
collaborators: [
|
||||
{
|
||||
userId: userId0,
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
|
||||
},
|
||||
{
|
||||
_id: existsCollaboratorId,
|
||||
userId: userId1,
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE],
|
||||
},
|
||||
],
|
||||
};
|
||||
const req = {
|
||||
user: { _id: 'requestUserId' },
|
||||
surveyMeta: { ownerId: 'ownerId' },
|
||||
};
|
||||
|
||||
const userList = [
|
||||
{ _id: new ObjectId(userId0) },
|
||||
{ _id: new ObjectId(userId1) },
|
||||
];
|
||||
|
||||
jest
|
||||
.spyOn(userService, 'getUserListByIds')
|
||||
.mockResolvedValue(userList as unknown as User[]);
|
||||
jest
|
||||
.spyOn(collaboratorService, 'batchDelete')
|
||||
.mockResolvedValue({ deletedCount: 1, acknowledged: true });
|
||||
jest
|
||||
.spyOn(collaboratorService, 'batchCreate')
|
||||
.mockResolvedValue([{}] as any);
|
||||
jest.spyOn(collaboratorService, 'updateById').mockResolvedValue({});
|
||||
|
||||
const response = await controller.batchSaveCollaborator(reqBody, req);
|
||||
|
||||
expect(response).toEqual({
|
||||
code: 200,
|
||||
});
|
||||
expect(userService.getUserListByIds).toHaveBeenCalled();
|
||||
expect(collaboratorService.batchDelete).toHaveBeenCalled();
|
||||
expect(collaboratorService.batchCreate).toHaveBeenCalled();
|
||||
expect(collaboratorService.updateById).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should throw an exception if validation fails', async () => {
|
||||
const reqBody: BatchSaveCollaboratorDto = {
|
||||
surveyId: '',
|
||||
collaborators: [
|
||||
{
|
||||
userId: '',
|
||||
permissions: [SURVEY_PERMISSION.SURVEY_COOPERATION_MANAGE],
|
||||
},
|
||||
],
|
||||
};
|
||||
const req = { user: { _id: 'userId' } };
|
||||
|
||||
await expect(
|
||||
controller.batchSaveCollaborator(reqBody, req),
|
||||
).rejects.toThrow(HttpException);
|
||||
expect(logger.error).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getUserSurveyPermissions', () => {
|
||||
it('should return owner permissions if user is the owner', async () => {
|
||||
const req = {
|
||||
user: { _id: new ObjectId(), username: 'owner' },
|
||||
};
|
||||
const query = { surveyId: 'surveyId' };
|
||||
const surveyMeta = {
|
||||
ownerId: req.user._id.toString(),
|
||||
owner: req.user.username,
|
||||
workspaceId: 'workspaceId',
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
|
||||
const response = await controller.getUserSurveyPermissions(req, query);
|
||||
|
||||
expect(response).toEqual({
|
||||
code: 200,
|
||||
data: {
|
||||
isOwner: true,
|
||||
permissions: [
|
||||
SURVEY_PERMISSION.SURVEY_COOPERATION_MANAGE,
|
||||
SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE,
|
||||
SURVEY_PERMISSION.SURVEY_CONF_MANAGE,
|
||||
],
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should return default permissions if user is a workspace member', async () => {
|
||||
const req = {
|
||||
user: { _id: new ObjectId(), username: 'user' },
|
||||
};
|
||||
const query = { surveyId: 'surveyId' };
|
||||
const surveyMeta = {
|
||||
ownerId: 'ownerId',
|
||||
owner: 'owner',
|
||||
workspaceId: 'workspaceId',
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
jest.spyOn(workspaceMemberServie, 'findOne').mockResolvedValue({} as any);
|
||||
|
||||
const response = await controller.getUserSurveyPermissions(req, query);
|
||||
|
||||
expect(response).toEqual({
|
||||
code: 200,
|
||||
data: {
|
||||
isOwner: false,
|
||||
permissions: [
|
||||
SURVEY_PERMISSION.SURVEY_COOPERATION_MANAGE,
|
||||
SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE,
|
||||
SURVEY_PERMISSION.SURVEY_CONF_MANAGE,
|
||||
],
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should return collaborator permissions if user is a collaborator', async () => {
|
||||
const req = {
|
||||
user: { _id: new ObjectId(), username: 'user' },
|
||||
};
|
||||
const query = { surveyId: 'surveyId' };
|
||||
const surveyMeta = {
|
||||
ownerId: 'ownerId',
|
||||
owner: 'owner',
|
||||
workspaceId: 'workspaceId',
|
||||
};
|
||||
const collaborator = {
|
||||
permissions: ['read', 'write'],
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
jest.spyOn(workspaceMemberServie, 'findOne').mockResolvedValue(null);
|
||||
jest
|
||||
.spyOn(collaboratorService, 'getCollaborator')
|
||||
.mockResolvedValue(collaborator as Collaborator);
|
||||
|
||||
const response = await controller.getUserSurveyPermissions(req, query);
|
||||
|
||||
expect(response).toEqual({
|
||||
code: 200,
|
||||
data: {
|
||||
isOwner: false,
|
||||
permissions: collaborator.permissions,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should return empty permissions if user has no permissions', async () => {
|
||||
const req = {
|
||||
user: { _id: new ObjectId(), username: 'user' },
|
||||
};
|
||||
const query = { surveyId: 'surveyId' };
|
||||
const surveyMeta = {
|
||||
ownerId: 'ownerId',
|
||||
owner: 'owner',
|
||||
workspaceId: 'workspaceId',
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValue(surveyMeta as SurveyMeta);
|
||||
jest.spyOn(workspaceMemberServie, 'findOne').mockResolvedValue(null);
|
||||
jest
|
||||
.spyOn(collaboratorService, 'getCollaborator')
|
||||
.mockResolvedValue(null);
|
||||
|
||||
const response = await controller.getUserSurveyPermissions(req, query);
|
||||
|
||||
expect(response).toEqual({
|
||||
code: 200,
|
||||
data: {
|
||||
isOwner: false,
|
||||
permissions: [],
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should throw an exception if survey does not exist', async () => {
|
||||
const req = { user: { _id: 'userId' } };
|
||||
const query = { surveyId: 'nonexistentSurveyId' };
|
||||
|
||||
jest
|
||||
.spyOn(surveyMetaService, 'getSurveyById')
|
||||
.mockResolvedValueOnce(null);
|
||||
|
||||
await expect(
|
||||
controller.getUserSurveyPermissions(req, query),
|
||||
).rejects.toThrow(HttpException);
|
||||
expect(logger.error).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,6 +14,7 @@ import { Logger } from 'src/logger';
|
||||
import { UserService } from 'src/modules/auth/services/user.service';
|
||||
import { ResponseSecurityPlugin } from 'src/securityPlugin/responseSecurityPlugin';
|
||||
import { AuthService } from 'src/modules/auth/services/auth.service';
|
||||
import { HttpException } from 'src/exceptions/httpException';
|
||||
|
||||
jest.mock('../services/dataStatistic.service');
|
||||
jest.mock('../services/surveyMeta.service');
|
||||
@ -21,11 +22,13 @@ jest.mock('../../surveyResponse/services/responseScheme.service');
|
||||
|
||||
jest.mock('src/guards/authentication.guard');
|
||||
jest.mock('src/guards/survey.guard');
|
||||
jest.mock('src/guards/workspace.guard');
|
||||
|
||||
describe('DataStatisticController', () => {
|
||||
let controller: DataStatisticController;
|
||||
let dataStatisticService: DataStatisticService;
|
||||
let responseSchemaService: ResponseSchemaService;
|
||||
let pluginManager: XiaojuSurveyPluginManager;
|
||||
let logger: Logger;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
@ -64,9 +67,14 @@ describe('DataStatisticController', () => {
|
||||
controller = module.get<DataStatisticController>(DataStatisticController);
|
||||
dataStatisticService =
|
||||
module.get<DataStatisticService>(DataStatisticService);
|
||||
const pluginManager = module.get<XiaojuSurveyPluginManager>(
|
||||
responseSchemaService = module.get<ResponseSchemaService>(
|
||||
ResponseSchemaService,
|
||||
);
|
||||
pluginManager = module.get<XiaojuSurveyPluginManager>(
|
||||
XiaojuSurveyPluginManager,
|
||||
);
|
||||
logger = module.get<Logger>(Logger);
|
||||
|
||||
pluginManager.registerPlugin(
|
||||
new ResponseSecurityPlugin('dataAesEncryptSecretKey'),
|
||||
);
|
||||
@ -82,6 +90,9 @@ describe('DataStatisticController', () => {
|
||||
const mockRequest = {
|
||||
query: {
|
||||
surveyId,
|
||||
isDesensitive: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
user: {
|
||||
username: 'testUser',
|
||||
@ -105,13 +116,13 @@ describe('DataStatisticController', () => {
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(controller['responseSchemaService'], 'getResponseSchemaByPageId')
|
||||
.spyOn(responseSchemaService, 'getResponseSchemaByPageId')
|
||||
.mockResolvedValueOnce({} as any);
|
||||
jest
|
||||
.spyOn(dataStatisticService, 'getDataTable')
|
||||
.mockResolvedValueOnce(mockDataTable);
|
||||
|
||||
const result = await controller.data(mockRequest.query, {});
|
||||
const result = await controller.data(mockRequest.query, mockRequest);
|
||||
|
||||
expect(result).toEqual({
|
||||
code: 200,
|
||||
@ -125,6 +136,8 @@ describe('DataStatisticController', () => {
|
||||
query: {
|
||||
surveyId,
|
||||
isDesensitive: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
user: {
|
||||
username: 'testUser',
|
||||
@ -146,19 +159,499 @@ describe('DataStatisticController', () => {
|
||||
{ difTime: '0.5', createDate: '2024-02-11', data123: '13800000000' },
|
||||
],
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(controller['responseSchemaService'], 'getResponseSchemaByPageId')
|
||||
.spyOn(responseSchemaService, 'getResponseSchemaByPageId')
|
||||
.mockResolvedValueOnce({} as any);
|
||||
jest
|
||||
.spyOn(dataStatisticService, 'getDataTable')
|
||||
.mockResolvedValueOnce(mockDataTable);
|
||||
|
||||
const result = await controller.data(mockRequest.query, {});
|
||||
const result = await controller.data(mockRequest.query, mockRequest);
|
||||
|
||||
expect(result).toEqual({
|
||||
code: 200,
|
||||
data: mockDataTable,
|
||||
});
|
||||
});
|
||||
|
||||
it('should throw an exception if validation fails', async () => {
|
||||
const mockRequest = {
|
||||
query: {
|
||||
surveyId: '',
|
||||
},
|
||||
user: {
|
||||
username: 'testUser',
|
||||
},
|
||||
};
|
||||
|
||||
await expect(
|
||||
controller.data(mockRequest.query, mockRequest),
|
||||
).rejects.toThrow(HttpException);
|
||||
expect(logger.error).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('aggregationStatis', () => {
|
||||
it('should return aggregation statistics', async () => {
|
||||
const mockRequest = {
|
||||
query: {
|
||||
surveyId: new ObjectId().toString(),
|
||||
},
|
||||
};
|
||||
|
||||
const mockResponseSchema = {
|
||||
_id: new ObjectId('6659c3283b1cb279bc2e2b0c'),
|
||||
curStatus: {
|
||||
status: 'published',
|
||||
date: 1717159136024,
|
||||
},
|
||||
statusList: [
|
||||
{
|
||||
status: 'published',
|
||||
date: 1717158851823,
|
||||
},
|
||||
],
|
||||
createDate: 1717158851823,
|
||||
updateDate: 1717159136025,
|
||||
title: '问卷调研',
|
||||
surveyPath: 'ZdGNzTTR',
|
||||
code: {
|
||||
bannerConf: {
|
||||
titleConfig: {
|
||||
mainTitle:
|
||||
'<h3 style="text-align: center">欢迎填写问卷</h3><p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style="color: rgb(204, 0, 0)">期待您的参与！</span></p>',
|
||||
subTitle: '',
|
||||
applyTitle: '',
|
||||
},
|
||||
bannerConfig: {
|
||||
bgImage: '/imgs/skin/17e06b7604a007e1d3e1453b9ddadc3c.webp',
|
||||
bgImageAllowJump: false,
|
||||
bgImageJumpLink: '',
|
||||
videoLink: '',
|
||||
postImg: '',
|
||||
},
|
||||
},
|
||||
baseConf: {
|
||||
begTime: '2024-05-31 20:31:36',
|
||||
endTime: '2034-05-31 20:31:36',
|
||||
language: 'chinese',
|
||||
showVoteProcess: 'allow',
|
||||
tLimit: 0,
|
||||
answerBegTime: '00:00:00',
|
||||
answerEndTime: '23:59:59',
|
||||
answerLimitTime: 0,
|
||||
},
|
||||
bottomConf: {
|
||||
logoImage: '/imgs/Logo.webp',
|
||||
logoImageWidth: '60%',
|
||||
},
|
||||
skinConf: {
|
||||
backgroundConf: {
|
||||
color: '#fff',
|
||||
},
|
||||
themeConf: {
|
||||
color: '#ffa600',
|
||||
},
|
||||
contentConf: {
|
||||
opacity: 100,
|
||||
},
|
||||
skinColor: '#4a4c5b',
|
||||
inputBgColor: '#ffffff',
|
||||
},
|
||||
submitConf: {
|
||||
submitTitle: '提交',
|
||||
msgContent: {
|
||||
msg_200: '提交成功',
|
||||
msg_9001: '您来晚了，感谢支持问卷~',
|
||||
msg_9002: '请勿多次提交！',
|
||||
msg_9003: '您来晚了，已经满额！',
|
||||
msg_9004: '提交失败！',
|
||||
},
|
||||
confirmAgain: {
|
||||
is_again: true,
|
||||
again_text: '确认要提交吗？',
|
||||
},
|
||||
link: '',
|
||||
},
|
||||
logicConf: {
|
||||
showLogicConf: [],
|
||||
},
|
||||
dataConf: {
|
||||
dataList: [
|
||||
{
|
||||
isRequired: true,
|
||||
showIndex: true,
|
||||
showType: true,
|
||||
showSpliter: true,
|
||||
type: 'radio',
|
||||
placeholderDesc: '',
|
||||
field: 'data515',
|
||||
title: '标题2',
|
||||
placeholder: '',
|
||||
randomSort: false,
|
||||
checked: false,
|
||||
minNum: '',
|
||||
maxNum: '',
|
||||
options: [
|
||||
{
|
||||
text: '选项1',
|
||||
imageUrl: '',
|
||||
others: false,
|
||||
mustOthers: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '115019',
|
||||
},
|
||||
{
|
||||
text: '选项2',
|
||||
imageUrl: '',
|
||||
others: false,
|
||||
mustOthers: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '115020',
|
||||
},
|
||||
],
|
||||
importKey: 'single',
|
||||
importData: '',
|
||||
cOption: '',
|
||||
cOptions: [],
|
||||
star: 5,
|
||||
exclude: false,
|
||||
textRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '500',
|
||||
value: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data893',
|
||||
showIndex: true,
|
||||
showType: true,
|
||||
showSpliter: true,
|
||||
type: 'checkbox',
|
||||
placeholderDesc: '',
|
||||
sLimit: 0,
|
||||
mhLimit: 0,
|
||||
title: '标题2',
|
||||
placeholder: '',
|
||||
valid: '',
|
||||
isRequired: true,
|
||||
randomSort: false,
|
||||
showLeftNum: true,
|
||||
innerRandom: false,
|
||||
checked: false,
|
||||
selectType: 'radio',
|
||||
sortWay: 'v',
|
||||
noNps: '',
|
||||
minNum: '',
|
||||
maxNum: '',
|
||||
starStyle: 'star',
|
||||
starMin: 1,
|
||||
starMax: 5,
|
||||
min: 0,
|
||||
max: 10,
|
||||
minMsg: '极不满意',
|
||||
maxMsg: '十分满意',
|
||||
rangeConfig: {},
|
||||
options: [
|
||||
{
|
||||
text: '选项1',
|
||||
others: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '466671',
|
||||
},
|
||||
{
|
||||
text: '选项2',
|
||||
others: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '095415',
|
||||
},
|
||||
],
|
||||
star: 5,
|
||||
optionOrigin: '',
|
||||
originType: 'selected',
|
||||
matrixOptionsRely: '',
|
||||
numberRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '1000',
|
||||
value: 1000,
|
||||
},
|
||||
},
|
||||
textRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '500',
|
||||
value: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data820',
|
||||
showIndex: true,
|
||||
showType: true,
|
||||
showSpliter: true,
|
||||
type: 'radio-nps',
|
||||
placeholderDesc: '',
|
||||
sLimit: 0,
|
||||
mhLimit: 0,
|
||||
title: '标题3',
|
||||
placeholder: '',
|
||||
valid: '',
|
||||
isRequired: true,
|
||||
randomSort: false,
|
||||
showLeftNum: true,
|
||||
innerRandom: false,
|
||||
checked: false,
|
||||
selectType: 'radio',
|
||||
sortWay: 'v',
|
||||
noNps: '',
|
||||
minNum: '',
|
||||
maxNum: '',
|
||||
starStyle: 'star',
|
||||
starMin: 1,
|
||||
starMax: 5,
|
||||
min: 0,
|
||||
max: 10,
|
||||
minMsg: '极不满意',
|
||||
maxMsg: '十分满意',
|
||||
rangeConfig: {},
|
||||
options: [
|
||||
{
|
||||
text: '选项1',
|
||||
others: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '268884',
|
||||
},
|
||||
{
|
||||
text: '选项2',
|
||||
others: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '371166',
|
||||
},
|
||||
],
|
||||
star: 5,
|
||||
optionOrigin: '',
|
||||
originType: 'selected',
|
||||
matrixOptionsRely: '',
|
||||
numberRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '1000',
|
||||
value: 1000,
|
||||
},
|
||||
},
|
||||
textRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '500',
|
||||
value: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data549',
|
||||
showIndex: true,
|
||||
showType: true,
|
||||
showSpliter: true,
|
||||
type: 'radio-star',
|
||||
placeholderDesc: '',
|
||||
sLimit: 0,
|
||||
mhLimit: 0,
|
||||
title: '标题4',
|
||||
placeholder: '',
|
||||
valid: '',
|
||||
isRequired: true,
|
||||
randomSort: false,
|
||||
showLeftNum: true,
|
||||
innerRandom: false,
|
||||
checked: false,
|
||||
selectType: 'radio',
|
||||
sortWay: 'v',
|
||||
noNps: '',
|
||||
minNum: '',
|
||||
maxNum: '',
|
||||
starStyle: 'star',
|
||||
starMin: 1,
|
||||
starMax: 5,
|
||||
min: 0,
|
||||
max: 10,
|
||||
minMsg: '极不满意',
|
||||
maxMsg: '十分满意',
|
||||
rangeConfig: {},
|
||||
options: [
|
||||
{
|
||||
text: '选项1',
|
||||
others: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '274183',
|
||||
},
|
||||
{
|
||||
text: '选项2',
|
||||
others: false,
|
||||
othersKey: '',
|
||||
placeholderDesc: '',
|
||||
hash: '842967',
|
||||
},
|
||||
],
|
||||
star: 5,
|
||||
optionOrigin: '',
|
||||
originType: 'selected',
|
||||
matrixOptionsRely: '',
|
||||
numberRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '1000',
|
||||
value: 1000,
|
||||
},
|
||||
},
|
||||
textRange: {
|
||||
min: {
|
||||
placeholder: '0',
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
placeholder: '500',
|
||||
value: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
pageId: '6659c3283b1cb279bc2e2b0c',
|
||||
};
|
||||
|
||||
const mockAggregationResult = [
|
||||
{
|
||||
field: 'data515',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '115019',
|
||||
count: 1,
|
||||
},
|
||||
{
|
||||
id: '115020',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data893',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '466671',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
id: '095415',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data820',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '8',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data549',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '5',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
jest
|
||||
.spyOn(responseSchemaService, 'getResponseSchemaByPageId')
|
||||
.mockResolvedValueOnce(mockResponseSchema as any);
|
||||
jest
|
||||
.spyOn(dataStatisticService, 'aggregationStatis')
|
||||
.mockResolvedValueOnce(mockAggregationResult);
|
||||
|
||||
const result = await controller.aggregationStatis(mockRequest.query);
|
||||
|
||||
expect(result).toEqual({
|
||||
code: 200,
|
||||
data: expect.any(Array),
|
||||
});
|
||||
});
|
||||
|
||||
it('should throw an exception if validation fails', async () => {
|
||||
const mockRequest = {
|
||||
query: {
|
||||
surveyId: '',
|
||||
},
|
||||
};
|
||||
|
||||
await expect(
|
||||
controller.aggregationStatis(mockRequest.query),
|
||||
).rejects.toThrow(HttpException);
|
||||
});
|
||||
|
||||
it('should return empty data if response schema does not exist', async () => {
|
||||
const mockRequest = {
|
||||
query: {
|
||||
surveyId: new ObjectId().toString(),
|
||||
},
|
||||
};
|
||||
|
||||
jest
|
||||
.spyOn(responseSchemaService, 'getResponseSchemaByPageId')
|
||||
.mockResolvedValueOnce(null);
|
||||
|
||||
const result = await controller.aggregationStatis(mockRequest.query);
|
||||
|
||||
expect(result).toEqual({
|
||||
code: 200,
|
||||
data: [],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -197,7 +197,6 @@ describe('DataStatisticService', () => {
|
||||
data413_3: expect.any(String),
|
||||
data413: expect.any(Number),
|
||||
data863: expect.any(String),
|
||||
data413_custom: expect.any(String),
|
||||
difTime: expect.any(String),
|
||||
createDate: expect.any(String),
|
||||
}),
|
||||
@ -310,4 +309,161 @@ describe('DataStatisticService', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('aggregationStatis', () => {
|
||||
it('should return correct aggregation data', async () => {
|
||||
const surveyId = '65afc62904d5db18534c0f78';
|
||||
const mockAggregationResult = {
|
||||
data515: [
|
||||
{
|
||||
count: 1,
|
||||
data: {
|
||||
data515: '115019',
|
||||
},
|
||||
},
|
||||
{
|
||||
count: 1,
|
||||
data: {
|
||||
data515: '115020',
|
||||
},
|
||||
},
|
||||
],
|
||||
data893: [
|
||||
{
|
||||
count: 1,
|
||||
data: {
|
||||
data893: ['466671'],
|
||||
},
|
||||
},
|
||||
{
|
||||
count: 1,
|
||||
data: {
|
||||
data893: ['466671', '095415'],
|
||||
},
|
||||
},
|
||||
],
|
||||
data820: [
|
||||
{
|
||||
count: 1,
|
||||
data: {
|
||||
data820: 8,
|
||||
},
|
||||
},
|
||||
],
|
||||
data549: [
|
||||
{
|
||||
count: 1,
|
||||
data: {
|
||||
data549: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const fieldList = Object.keys(mockAggregationResult);
|
||||
|
||||
jest.spyOn(surveyResponseRepository, 'aggregate').mockReturnValue({
|
||||
next: jest.fn().mockResolvedValue(mockAggregationResult),
|
||||
} as any);
|
||||
|
||||
const result = await service.aggregationStatis({
|
||||
surveyId,
|
||||
fieldList,
|
||||
});
|
||||
|
||||
expect(result).toEqual(
|
||||
expect.arrayContaining([
|
||||
{
|
||||
field: 'data515',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '115019',
|
||||
count: 1,
|
||||
},
|
||||
{
|
||||
id: '115020',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data893',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '466671',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
id: '095415',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data820',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '8',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data549',
|
||||
data: {
|
||||
aggregation: [
|
||||
{
|
||||
id: '5',
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
submitionCount: 1,
|
||||
},
|
||||
},
|
||||
]),
|
||||
);
|
||||
});
|
||||
|
||||
it('should return empty aggregation data when no responses', async () => {
|
||||
const surveyId = '65afc62904d5db18534c0f78';
|
||||
const fieldList = ['data458', 'data515'];
|
||||
|
||||
jest.spyOn(surveyResponseRepository, 'aggregate').mockReturnValue({
|
||||
next: jest.fn().mockResolvedValue({}),
|
||||
} as any);
|
||||
|
||||
const result = await service.aggregationStatis({
|
||||
surveyId,
|
||||
fieldList,
|
||||
});
|
||||
|
||||
expect(result).toEqual(
|
||||
expect.arrayContaining([
|
||||
{
|
||||
field: 'data458',
|
||||
data: {
|
||||
aggregation: [],
|
||||
submitionCount: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'data515',
|
||||
data: {
|
||||
aggregation: [],
|
||||
submitionCount: 0,
|
||||
},
|
||||
},
|
||||
]),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -319,6 +319,7 @@ export class CollaboratorController {
|
||||
const surveyMeta = await this.surveyMetaService.getSurveyById({ surveyId });
|
||||
|
||||
if (!surveyMeta) {
|
||||
this.logger.error(`问卷不存在: ${surveyId}`, { req });
|
||||
throw new HttpException('问卷不存在', EXCEPTION_CODE.SURVEY_NOT_FOUND);
|
||||
}
|
||||
|
||||
|
||||
@ -20,6 +20,8 @@ import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
|
||||
import { Logger } from 'src/logger';
|
||||
import { HttpException } from 'src/exceptions/httpException';
|
||||
import { EXCEPTION_CODE } from 'src/enums/exceptionCode';
|
||||
import { AggregationStatisDto } from '../dto/aggregationStatis.dto';
|
||||
import { handleAggretionData } from '../utils';
|
||||
|
||||
@ApiTags('survey')
|
||||
@ApiBearerAuth()
|
||||
@ -80,4 +82,50 @@ export class DataStatisticController {
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@Get('/aggregationStatis')
|
||||
@HttpCode(200)
|
||||
@UseGuards(Authentication)
|
||||
async aggregationStatis(@Query() queryInfo: AggregationStatisDto) {
|
||||
// 聚合统计
|
||||
const { value, error } = AggregationStatisDto.validate(queryInfo);
|
||||
if (error) {
|
||||
throw new HttpException('参数错误', EXCEPTION_CODE.PARAMETER_ERROR);
|
||||
}
|
||||
const responseSchema =
|
||||
await this.responseSchemaService.getResponseSchemaByPageId(
|
||||
value.surveyId,
|
||||
);
|
||||
if (!responseSchema) {
|
||||
return {
|
||||
code: 200,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
const allowQuestionType = [
|
||||
'radio',
|
||||
'checkbox',
|
||||
'binary-choice',
|
||||
'radio-star',
|
||||
'radio-nps',
|
||||
'vote',
|
||||
];
|
||||
const fieldList = responseSchema.code.dataConf.dataList
|
||||
.filter((item) => allowQuestionType.includes(item.type))
|
||||
.map((item) => item.field);
|
||||
const dataMap = responseSchema.code.dataConf.dataList.reduce((pre, cur) => {
|
||||
pre[cur.field] = cur;
|
||||
return pre;
|
||||
}, {});
|
||||
const res = await this.dataStatisticService.aggregationStatis({
|
||||
surveyId: value.surveyId,
|
||||
fieldList,
|
||||
});
|
||||
return {
|
||||
code: 200,
|
||||
data: res.map((item) => {
|
||||
return handleAggretionData({ item, dataMap });
|
||||
}),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
13
server/src/modules/survey/dto/aggregationStatis.dto.ts
Normal file
13
server/src/modules/survey/dto/aggregationStatis.dto.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { ApiProperty } from '@nestjs/swagger';
|
||||
import Joi from 'joi';
|
||||
|
||||
export class AggregationStatisDto {
|
||||
@ApiProperty({ description: '问卷id', required: true })
|
||||
surveyId: string;
|
||||
|
||||
static validate(data) {
|
||||
return Joi.object({
|
||||
surveyId: Joi.string().required(),
|
||||
}).validate(data);
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,10 @@ import Joi from 'joi';
|
||||
import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
|
||||
|
||||
export class CollaboratorDto {
|
||||
@ApiProperty({ description: '用户id', required: false })
|
||||
@ApiProperty({ description: '协作id', required: false })
|
||||
_id?: string;
|
||||
|
||||
@ApiProperty({ description: '用户id', required: true })
|
||||
userId: string;
|
||||
|
||||
@ApiProperty({
|
||||
@ -16,7 +19,7 @@ export class CollaboratorDto {
|
||||
SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE,
|
||||
],
|
||||
})
|
||||
permissions: Array<number>;
|
||||
permissions: Array<string>;
|
||||
}
|
||||
|
||||
export class BatchSaveCollaboratorDto {
|
||||
|
||||
@ -7,7 +7,7 @@ import moment from 'moment';
|
||||
import { keyBy } from 'lodash';
|
||||
import { DataItem } from 'src/interfaces/survey';
|
||||
import { ResponseSchema } from 'src/models/responseSchema.entity';
|
||||
import { getListHeadByDataList } from '../utils';
|
||||
import { getListHeadByDataList, transformAndMergeArrayFields } from '../utils';
|
||||
@Injectable()
|
||||
export class DataStatisticService {
|
||||
private radioType = ['radio-star', 'radio-nps'];
|
||||
@ -101,4 +101,62 @@ export class DataStatisticService {
|
||||
listBody,
|
||||
};
|
||||
}
|
||||
|
||||
async aggregationStatis({ surveyId, fieldList }) {
|
||||
const $facet = fieldList.reduce((pre, cur) => {
|
||||
const $match = { $match: { [`data.${cur}`]: { $nin: [[], '', null] } } };
|
||||
const $group = { $group: { _id: `$data.${cur}`, count: { $sum: 1 } } };
|
||||
const $project = {
|
||||
$project: {
|
||||
_id: 0,
|
||||
count: 1,
|
||||
secretKeys: 1,
|
||||
sensitiveKeys: 1,
|
||||
[`data.${cur}`]: '$_id',
|
||||
},
|
||||
};
|
||||
pre[cur] = [$match, $group, $project];
|
||||
return pre;
|
||||
}, {});
|
||||
const aggregation = this.surveyResponseRepository.aggregate(
|
||||
[
|
||||
{
|
||||
$match: {
|
||||
pageId: surveyId,
|
||||
'curStatus.status': {
|
||||
$ne: 'removed',
|
||||
},
|
||||
},
|
||||
},
|
||||
{ $facet },
|
||||
],
|
||||
{ maxTimeMS: 30000, allowDiskUse: true },
|
||||
);
|
||||
const res = await aggregation.next();
|
||||
const submitionCountMap: Record<string, number> = {};
|
||||
for (const field in res) {
|
||||
let count = 0;
|
||||
if (Array.isArray(res[field])) {
|
||||
for (const optionItem of res[field]) {
|
||||
count += optionItem.count;
|
||||
}
|
||||
}
|
||||
submitionCountMap[field] = count;
|
||||
}
|
||||
const transformedData = transformAndMergeArrayFields(res);
|
||||
return fieldList.map((field) => {
|
||||
return {
|
||||
field,
|
||||
data: {
|
||||
aggregation: (transformedData?.[field] || []).map((optionItem) => {
|
||||
return {
|
||||
id: optionItem.data[field],
|
||||
count: optionItem.count,
|
||||
};
|
||||
}),
|
||||
submitionCount: submitionCountMap?.[field] || 0,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,3 +66,177 @@ export function getListHeadByDataList(dataList) {
|
||||
});
|
||||
return listHead;
|
||||
}
|
||||
|
||||
export function transformAndMergeArrayFields(data) {
|
||||
const transformedData = {};
|
||||
|
||||
for (const key in data) {
|
||||
const valueMap: Record<string, number> = {};
|
||||
|
||||
for (const entry of data[key]) {
|
||||
const nestedDataKey = Object.keys(entry.data)[0];
|
||||
const nestedDataValue = entry.data[nestedDataKey];
|
||||
|
||||
if (Array.isArray(nestedDataValue)) {
|
||||
for (const value of nestedDataValue) {
|
||||
if (!valueMap[value]) {
|
||||
valueMap[value] = 0;
|
||||
}
|
||||
valueMap[value] += entry.count;
|
||||
}
|
||||
} else {
|
||||
if (!valueMap[nestedDataValue]) {
|
||||
valueMap[nestedDataValue] = 0;
|
||||
}
|
||||
valueMap[nestedDataValue] += entry.count;
|
||||
}
|
||||
}
|
||||
|
||||
transformedData[key] = Object.keys(valueMap).map((value) => ({
|
||||
count: valueMap[value],
|
||||
data: {
|
||||
[key]: value,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
return transformedData;
|
||||
}
|
||||
|
||||
export function handleAggretionData({ dataMap, item }) {
|
||||
const type = dataMap[item.field].type;
|
||||
const aggregationMap = item.data.aggregation.reduce((pre, cur) => {
|
||||
pre[cur.id] = cur;
|
||||
return pre;
|
||||
}, {});
|
||||
if (['radio', 'checkbox', 'vote', 'binary-choice'].includes(type)) {
|
||||
return {
|
||||
...item,
|
||||
title: dataMap[item.field].title,
|
||||
type: dataMap[item.field].type,
|
||||
data: {
|
||||
...item.data,
|
||||
aggregation: dataMap[item.field].options.map((optionItem) => {
|
||||
return {
|
||||
id: optionItem.hash,
|
||||
text: optionItem.text,
|
||||
count: aggregationMap[optionItem.hash]?.count || 0,
|
||||
};
|
||||
}),
|
||||
},
|
||||
};
|
||||
} else if (['radio-star', 'radio-nps'].includes(type)) {
|
||||
const summary: Record<string, any> = {};
|
||||
const average = getAverage({ aggregation: item.data.aggregation });
|
||||
const median = getMedian({ aggregation: item.data.aggregation });
|
||||
const variance = getVariance({
|
||||
aggregation: item.data.aggregation,
|
||||
average,
|
||||
});
|
||||
summary['average'] = average;
|
||||
summary['median'] = median;
|
||||
summary['variance'] = variance;
|
||||
if (type === 'radio-nps') {
|
||||
summary['nps'] = getNps({ aggregation: item.data.aggregation });
|
||||
}
|
||||
const range = type === 'radio-nps' ? [0, 10] : [1, 5];
|
||||
const arr = [];
|
||||
for (let i = range[0]; i <= range[1]; i++) {
|
||||
arr.push(i);
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
title: dataMap[item.field].title,
|
||||
type: dataMap[item.field].type,
|
||||
data: {
|
||||
aggregation: arr.map((item) => {
|
||||
const num = item.toString();
|
||||
return {
|
||||
text: num,
|
||||
id: num,
|
||||
count: aggregationMap?.[num]?.count || 0,
|
||||
};
|
||||
}),
|
||||
submitionCount: item.data.submitionCount,
|
||||
summary,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
title: dataMap[item.field].title,
|
||||
type: dataMap[item.field].type,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getAverage({ aggregation }) {
|
||||
const { sum, count } = aggregation.reduce(
|
||||
(pre, cur) => {
|
||||
const num = parseInt(cur.id);
|
||||
pre.sum += num * cur.count;
|
||||
pre.count += cur.count;
|
||||
return pre;
|
||||
},
|
||||
{ sum: 0, count: 0 },
|
||||
);
|
||||
if (count === 0) {
|
||||
return 0;
|
||||
}
|
||||
return (sum / count).toFixed(2);
|
||||
}
|
||||
|
||||
function getMedian({ aggregation }) {
|
||||
const sortedArr = aggregation.sort((a, b) => {
|
||||
return parseInt(a.id) - parseInt(b.id);
|
||||
});
|
||||
const resArr = [];
|
||||
for (const item of sortedArr) {
|
||||
const tmp = new Array(item.count).fill(parseInt(item.id));
|
||||
resArr.push(...tmp);
|
||||
}
|
||||
if (resArr.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
if (resArr.length % 2 === 1) {
|
||||
const midIndex = Math.floor(resArr.length / 2);
|
||||
return resArr[midIndex].toFixed(2);
|
||||
}
|
||||
const rightIndex = resArr.length / 2;
|
||||
const leftIndex = rightIndex - 1;
|
||||
return ((resArr[leftIndex] + resArr[rightIndex]) / 2).toFixed(2);
|
||||
}
|
||||
|
||||
function getVariance({ aggregation, average }) {
|
||||
const { sum, count } = aggregation.reduce(
|
||||
(pre, cur) => {
|
||||
const sub = Number(cur.id) - average;
|
||||
pre.sum += sub * sub;
|
||||
pre.count += cur.count;
|
||||
return pre;
|
||||
},
|
||||
{ sum: 0, count: 0 },
|
||||
);
|
||||
if (count === 0 || count === 1) {
|
||||
return '0.00';
|
||||
}
|
||||
return (sum / (count - 1)).toFixed(2);
|
||||
}
|
||||
|
||||
function getNps({ aggregation }) {
|
||||
// 净推荐值(NPS)=(推荐者数/总样本数)×100%-(贬损者数/总样本数)×100%
|
||||
// 0～10分举例子：推荐者（9-10分）；被动者（7-8分）；贬损者（0-6分）
|
||||
let recommand = 0,
|
||||
derogatory = 0,
|
||||
total = 0;
|
||||
for (const item of aggregation) {
|
||||
const num = parseInt(item.id);
|
||||
if (num >= 9) {
|
||||
recommand += item.count;
|
||||
} else if (num <= 6) {
|
||||
derogatory += item.count;
|
||||
}
|
||||
total += item.count;
|
||||
}
|
||||
return ((recommand / total - derogatory / total) * 100).toFixed(2) + '%';
|
||||
}
|
||||
|
||||
@ -25,7 +25,6 @@ import { WhitelistService } from 'src/modules/auth/services/whitelist.service';
|
||||
import { MemberType, WhitelistType } from 'src/interfaces/survey';
|
||||
import { ResponseSchema } from 'src/models/responseSchema.entity';
|
||||
import { EXCEPTION_CODE } from 'src/enums/exceptionCode';
|
||||
import { WhitelistVerify } from 'src/models/whitelistVerify.entity';
|
||||
|
||||
const mockDecryptErrorBody = {
|
||||
surveyPath: 'EBzdmnSp',
|
||||
|
||||
3
web/components.d.ts
vendored
3
web/components.d.ts
vendored
@ -17,6 +17,7 @@ declare module 'vue' {
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
@ -29,6 +30,7 @@ declare module 'vue' {
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSegmented: typeof import('element-plus/es')['ElSegmented']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
@ -40,6 +42,7 @@ declare module 'vue' {
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
IEpBottom: typeof import('~icons/ep/bottom')['default']
|
||||
IEpCheck: typeof import('~icons/ep/check')['default']
|
||||
IEpCirclePlus: typeof import('~icons/ep/circle-plus')['default']
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"axios": "^1.4.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "^5.5.0",
|
||||
"element-plus": "^2.7.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"moment": "^2.29.4",
|
||||
|
||||
@ -8,3 +8,11 @@ export const getRecycleList = (data) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getStatisticList = (data) => {
|
||||
return axios.get('/survey/dataStatistic/aggregationStatis', {
|
||||
params: {
|
||||
...data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
77
web/src/management/config/analysisConfig.js
Normal file
77
web/src/management/config/analysisConfig.js
Normal file
@ -0,0 +1,77 @@
|
||||
import { menuItems } from './questionMenuConfig'
|
||||
|
||||
export const noDataConfig = {
|
||||
title: '暂无数据',
|
||||
desc: '您的问卷当前还没有数据，快去回收问卷吧！',
|
||||
img: '/imgs/icons/analysis-empty.webp'
|
||||
}
|
||||
|
||||
export const separateItemListHead = [
|
||||
{
|
||||
title: '选项',
|
||||
field: 'text'
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
field: 'count'
|
||||
},
|
||||
{
|
||||
title: '占比',
|
||||
field: 'percent'
|
||||
}
|
||||
]
|
||||
|
||||
// 图表名称需要和./chartConfig.js中保持一致
|
||||
export const questionChartsConfig = {
|
||||
[menuItems['checkbox']['type']]: ['bar'],
|
||||
[menuItems['radio-nps']['type']]: ['gauge', 'pie', 'bar'],
|
||||
default: ['pie', 'bar']
|
||||
}
|
||||
|
||||
export const analysisTypeMap = {
|
||||
dataTable: 'dataTable',
|
||||
separateStatistics: 'separateStatistics'
|
||||
}
|
||||
|
||||
export const analysisType = [
|
||||
{
|
||||
value: analysisTypeMap.dataTable,
|
||||
label: '数据列表',
|
||||
icon: 'icon-shujuliebiao'
|
||||
},
|
||||
{
|
||||
value: analysisTypeMap.separateStatistics,
|
||||
label: '分题统计',
|
||||
icon: 'icon-fentitongji'
|
||||
}
|
||||
]
|
||||
|
||||
export const summaryType = {
|
||||
between: 'between'
|
||||
}
|
||||
|
||||
export const summaryItemConfig = {
|
||||
'radio-nps': [
|
||||
{
|
||||
text: '推荐者',
|
||||
field: 'id',
|
||||
type: summaryType.between,
|
||||
max: 10,
|
||||
min: 9
|
||||
},
|
||||
{
|
||||
text: '中立者',
|
||||
field: 'id',
|
||||
type: summaryType.between,
|
||||
max: 8,
|
||||
min: 7
|
||||
},
|
||||
{
|
||||
text: '贬损者',
|
||||
field: 'id',
|
||||
type: summaryType.between,
|
||||
max: 6,
|
||||
min: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
57
web/src/management/config/chartConfig/bar.js
Normal file
57
web/src/management/config/chartConfig/bar.js
Normal file
@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @Description: 柱状图配置
|
||||
* @CreateDate: 2024-04-30
|
||||
*/
|
||||
export default (data) => {
|
||||
const xAxisData = data.map((item) => item.name)
|
||||
return {
|
||||
color: ['#55A8FD'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: '{a} <br/>{b}: {c}'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
formatter(value) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
name: '提交人数',
|
||||
type: 'bar',
|
||||
barMaxWidth: 50,
|
||||
data
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
146
web/src/management/config/chartConfig/gauge.js
Normal file
146
web/src/management/config/chartConfig/gauge.js
Normal file
@ -0,0 +1,146 @@
|
||||
/**
|
||||
* @Description: gauge(仪表盘)
|
||||
* @CreateDate: 2024-04-30
|
||||
*/
|
||||
export default (data) => {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: -100,
|
||||
max: 100,
|
||||
radius: '130%',
|
||||
center: ['50%', '80%'],
|
||||
splitNumber: 4,
|
||||
z: 2,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
color: '#AAB1C0',
|
||||
fontSize: 12,
|
||||
fontFamily: 'DaQi-Font'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 40,
|
||||
color: [[1, '#e3efff']]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 174,
|
||||
endAngle: 5,
|
||||
min: -100,
|
||||
max: 100,
|
||||
radius: '130%',
|
||||
splitNumber: 4,
|
||||
center: ['50%', '80%'],
|
||||
z: 3,
|
||||
axisLabel: {
|
||||
distance: -5,
|
||||
color: '#666',
|
||||
rotate: 'tangential',
|
||||
fontSize: 12,
|
||||
fontFamily: 'DaQi-Font'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 40,
|
||||
color: [[1, '#e3efff']]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 178,
|
||||
endAngle: 0,
|
||||
min: -100,
|
||||
max: 100,
|
||||
radius: '109%',
|
||||
z: 4,
|
||||
center: ['50%', '80%'],
|
||||
splitNumber: 4,
|
||||
itemStyle: {
|
||||
color: '#58D9F9'
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: true,
|
||||
width: 15,
|
||||
itemStyle: {
|
||||
color: '#55A8FD',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#55A8FD'
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
icon: 'triangle',
|
||||
length: '10%',
|
||||
width: 8,
|
||||
offsetCenter: [0, '-80%'],
|
||||
itemStyle: {
|
||||
color: '#55A8FD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [[1, '#d3e5fe']]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
offsetCenter: [0, '-15%'],
|
||||
fontSize: 18,
|
||||
color: '#666'
|
||||
},
|
||||
detail: {
|
||||
fontSize: 46,
|
||||
lineHeight: 40,
|
||||
height: 40,
|
||||
offsetCenter: [0, '-45%'],
|
||||
valueAnimation: true,
|
||||
color: '#55A8FD',
|
||||
formatter: function (value) {
|
||||
if (value) {
|
||||
return value + '%'
|
||||
} else if (value === 0) {
|
||||
return value
|
||||
} else {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: data,
|
||||
name: 'NPS'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
9
web/src/management/config/chartConfig/index.js
Normal file
9
web/src/management/config/chartConfig/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import pie from './pie'
|
||||
import bar from './bar'
|
||||
import gauge from './gauge'
|
||||
|
||||
export const getOption = {
|
||||
pie,
|
||||
bar,
|
||||
gauge
|
||||
}
|
||||
57
web/src/management/config/chartConfig/pie.js
Normal file
57
web/src/management/config/chartConfig/pie.js
Normal file
@ -0,0 +1,57 @@
|
||||
const color = [
|
||||
'#55A8FD',
|
||||
'#36CBCB',
|
||||
'#FAD337',
|
||||
'#A6D6FF',
|
||||
'#A177DC',
|
||||
'#F46C73',
|
||||
'#FFBA62',
|
||||
'#ACE474',
|
||||
'#BEECD6',
|
||||
'#AFD2FF'
|
||||
]
|
||||
/*
|
||||
* @Description: 饼图配置
|
||||
* @CreateDate: 2024-04-30
|
||||
*/
|
||||
export default (data) => {
|
||||
return {
|
||||
color,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 12,
|
||||
top: 12,
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
formatter(name) {
|
||||
return name.length > 17 ? name.substr(0, 17) + '...' : name
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '提交人数',
|
||||
type: 'pie',
|
||||
radius: ['50%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter({ data }) {
|
||||
const name = data?.name || ''
|
||||
return name.length > 17 ? name.substr(0, 17) + '...' : name
|
||||
}
|
||||
},
|
||||
data
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
const menuItems = {
|
||||
export const menuItems = {
|
||||
text: {
|
||||
type: 'text',
|
||||
snapshot: '/imgs/question-type-snapshot/iL84te6xxU1657702189333.webp',
|
||||
|
||||
25
web/src/management/hooks/useCharts.js
Normal file
25
web/src/management/hooks/useCharts.js
Normal file
@ -0,0 +1,25 @@
|
||||
import * as echarts from 'echarts'
|
||||
import { getOption } from '@/management/config/chartConfig'
|
||||
|
||||
/**
|
||||
* 绘制图表
|
||||
* @param {Object} el
|
||||
* @param {String} type
|
||||
* @param {Array} data
|
||||
*/
|
||||
export default (el, type, data) => {
|
||||
const chart = echarts.init(el)
|
||||
const option = getOption[type](data)
|
||||
|
||||
chart.setOption(option, true)
|
||||
|
||||
const resize = () => {
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
const changeType = (type, data) => {
|
||||
chart.setOption(getOption[type](data), true)
|
||||
}
|
||||
|
||||
return { chart, resize, changeType }
|
||||
}
|
||||
20
web/src/management/hooks/useResizeObserver.js
Normal file
20
web/src/management/hooks/useResizeObserver.js
Normal file
@ -0,0 +1,20 @@
|
||||
// 引入防抖函数
|
||||
import _debounce from 'lodash/debounce'
|
||||
/**
|
||||
* @description: 监听元素尺寸变化
|
||||
* @param {*} el 元素dom
|
||||
* @param {*} cb resize变化时执行的方法
|
||||
* @param {*} wait 防抖间隔
|
||||
* @return {*}
|
||||
*/
|
||||
export default (el, cb, wait = 200) => {
|
||||
const resizeObserver = new ResizeObserver(_debounce(cb, wait))
|
||||
|
||||
resizeObserver.observe(el)
|
||||
|
||||
const destroy = () => {
|
||||
resizeObserver.disconnect(el)
|
||||
}
|
||||
|
||||
return { destroy, resizeObserver }
|
||||
}
|
||||
77
web/src/management/hooks/useStatisticsItemChart.js
Normal file
77
web/src/management/hooks/useStatisticsItemChart.js
Normal file
@ -0,0 +1,77 @@
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { cleanRichText } from '@/common/xss'
|
||||
import { questionChartsConfig } from '../config/analysisConfig'
|
||||
|
||||
// 饼图数据处理
|
||||
const pie = (data) => {
|
||||
const aggregation = data?.aggregation
|
||||
return (
|
||||
aggregation?.map?.((item) => {
|
||||
const { id, count, text } = item
|
||||
return {
|
||||
id,
|
||||
value: count,
|
||||
name: cleanRichText(text)
|
||||
}
|
||||
}) || []
|
||||
)
|
||||
}
|
||||
// 柱状图数据处理
|
||||
const bar = (data) => {
|
||||
const aggregation = data?.aggregation
|
||||
return (
|
||||
aggregation?.map?.((item) => {
|
||||
const { id, count, text } = item
|
||||
return {
|
||||
id,
|
||||
value: count,
|
||||
name: cleanRichText(text)
|
||||
}
|
||||
}) || []
|
||||
)
|
||||
}
|
||||
// 仪表盘数据处理
|
||||
const gauge = (data) => {
|
||||
return parseFloat(data?.summary?.nps) || 0
|
||||
}
|
||||
|
||||
const dataFormateConfig = {
|
||||
pie,
|
||||
bar,
|
||||
gauge
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 分题统计图表hook
|
||||
* @param {*} chartType
|
||||
* @param {*} data
|
||||
* @return {*} chartRef 图表实例 chartTypeList 图表类型列表 chartType 图表类型 chartData 图表数据
|
||||
*/
|
||||
export default ({ questionType, data }) => {
|
||||
const chartRef = ref(null)
|
||||
const chartTypeList = ref([])
|
||||
const chartType = ref('')
|
||||
const chartData = ref({})
|
||||
|
||||
watchEffect(() => {
|
||||
if (questionType.value) {
|
||||
// 根据题型获取图表类型列表
|
||||
chartTypeList.value = questionChartsConfig[questionType.value] || questionChartsConfig.default
|
||||
if (!chartType.value) {
|
||||
// 默认选中第一项
|
||||
chartType.value = chartTypeList.value?.[0]
|
||||
}
|
||||
if (chartType.value) {
|
||||
// 根据图表类型获取图表数据
|
||||
chartData.value = dataFormateConfig[chartType.value](data)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
chartTypeList,
|
||||
chartType,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
@ -1,139 +1,28 @@
|
||||
<template>
|
||||
<div class="analysis-page">
|
||||
<leftMenu class="left"></leftMenu>
|
||||
<div class="content-wrapper right">
|
||||
<template v-if="tableData.total">
|
||||
<h2 class="data-list">数据列表</h2>
|
||||
<div class="menus">
|
||||
<el-switch
|
||||
:model-value="isShowOriginData"
|
||||
active-text="是否展示原数据"
|
||||
@input="onIsShowOriginChange"
|
||||
<div class="right">
|
||||
<div class="analysis-tabs">
|
||||
<router-link
|
||||
v-for="item in analysisType"
|
||||
class="analysis-tabs__item"
|
||||
:key="item.value"
|
||||
:to="{ name: item.value }"
|
||||
>
|
||||
</el-switch>
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
<span>{{ item.label }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="tableData.total">
|
||||
<DataTable :main-table-loading="mainTableLoading" :table-data="tableData" />
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
popper-class="analysis-pagination"
|
||||
:total="tableData.total"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
<div v-else>
|
||||
<EmptyIndex :data="noDataConfig" />
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/src/message.scss'
|
||||
|
||||
import EmptyIndex from '@/management/components/EmptyIndex.vue'
|
||||
<script setup>
|
||||
import LeftMenu from '@/management/components/LeftMenu.vue'
|
||||
import { getRecycleList } from '@/management/api/analysis'
|
||||
|
||||
import DataTable from './components/DataTable.vue'
|
||||
|
||||
export default {
|
||||
name: 'AnalysisPage',
|
||||
data() {
|
||||
return {
|
||||
mainTableLoading: false,
|
||||
tableData: {
|
||||
total: 0,
|
||||
listHead: [],
|
||||
listBody: []
|
||||
},
|
||||
noDataConfig: {
|
||||
title: '暂无数据',
|
||||
desc: '您的问卷当前还没有数据，快去回收问卷吧！',
|
||||
img: '/imgs/icons/analysis-empty.webp'
|
||||
},
|
||||
currentPage: 1,
|
||||
isShowOriginData: false,
|
||||
tmpIsShowOriginData: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
if (!this.$route.params.id) {
|
||||
ElMessage.error('没有传入问卷参数~')
|
||||
return
|
||||
}
|
||||
this.mainTableLoading = true
|
||||
try {
|
||||
const res = await getRecycleList({
|
||||
page: this.currentPage,
|
||||
surveyId: this.$route.params.id,
|
||||
isDesensitive: !this.tmpIsShowOriginData // 发起请求的时候，isShowOriginData还没改变，暂存了一个字段
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
const listHead = this.formatHead(res.data.listHead)
|
||||
this.tableData = { ...res.data, listHead }
|
||||
this.mainTableLoading = false
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('查询回收数据失败，请重试')
|
||||
}
|
||||
},
|
||||
handleCurrentChange(current) {
|
||||
if (this.mainTableLoading) {
|
||||
return
|
||||
}
|
||||
this.currentPage = current
|
||||
this.init()
|
||||
},
|
||||
formatHead(listHead = []) {
|
||||
const head = []
|
||||
|
||||
listHead.forEach((headItem) => {
|
||||
head.push({
|
||||
field: headItem.field,
|
||||
title: headItem.title
|
||||
})
|
||||
|
||||
if (headItem.othersCode?.length) {
|
||||
headItem.othersCode.forEach((item) => {
|
||||
head.push({
|
||||
field: item.code,
|
||||
title: `${headItem.title}-${item.option}`
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return head
|
||||
},
|
||||
async onIsShowOriginChange(data) {
|
||||
if (this.mainTableLoading) {
|
||||
return
|
||||
}
|
||||
// console.log(data)
|
||||
this.tmpIsShowOriginData = data
|
||||
await this.init()
|
||||
this.isShowOriginData = data
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
DataTable,
|
||||
EmptyIndex,
|
||||
LeftMenu
|
||||
}
|
||||
}
|
||||
import { analysisType } from '@/management/config/analysisConfig'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -152,29 +41,60 @@ export default {
|
||||
.right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.menus {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 30px 40px 50px 40px;
|
||||
border-radius: 2px;
|
||||
background-color: #f6f7f9;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
|
||||
:deep(.el-pagination) {
|
||||
margin-top: 20px;
|
||||
min-width: 1160px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: #f6f7f9;
|
||||
|
||||
.analysis-tabs {
|
||||
flex: none;
|
||||
gap: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e7e9eb;
|
||||
|
||||
&__item {
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
color: #92949d;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-list {
|
||||
margin-bottom: 20px;
|
||||
.router-link-active {
|
||||
color: $font-color-title;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% + 5px);
|
||||
height: 3px;
|
||||
background-color: $primary-color;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
padding: 24px 24px 24px 104px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,22 +17,23 @@
|
||||
minWidth="200"
|
||||
>
|
||||
<template #header="scope">
|
||||
<div class="table-row-cell">
|
||||
<span
|
||||
<div
|
||||
class="table-row-cell"
|
||||
@mouseover="onPopoverRefOver(scope, 'head')"
|
||||
:ref="(el) => (popoverRefMap[scope.column.id] = el)"
|
||||
>
|
||||
<span>
|
||||
{{ scope.column.label.replace(/ /g, '') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span
|
||||
<div
|
||||
class="table-row-cell"
|
||||
@mouseover="onPopoverRefOver(scope, 'content')"
|
||||
:ref="(el) => (popoverRefMap[scope.$index + scope.column.property] = el)"
|
||||
>
|
||||
<span>
|
||||
{{ getContent(scope.row[scope.column.property]) }}
|
||||
</span>
|
||||
</div>
|
||||
@ -44,6 +45,7 @@
|
||||
popper-style="text-align: center;"
|
||||
:virtual-ref="popoverVirtualRef"
|
||||
placement="top"
|
||||
width="400"
|
||||
trigger="hover"
|
||||
virtual-triggering
|
||||
:content="popoverContent"
|
||||
@ -62,6 +64,10 @@ const props = defineProps({
|
||||
},
|
||||
mainTableLoading: {
|
||||
type: Boolean
|
||||
},
|
||||
tableMinHeight: {
|
||||
type: String,
|
||||
default: '620px'
|
||||
}
|
||||
})
|
||||
const popoverRefMap = ref({})
|
||||
@ -94,15 +100,18 @@ const onPopoverRefOver = (scope, type) => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
min-height: 620px;
|
||||
min-height: v-bind('tableMinHeight');
|
||||
background: #fff;
|
||||
padding: 10px 20px;
|
||||
|
||||
.table-border {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
width: 100%;
|
||||
|
||||
.thead-cell .el-table__cell {
|
||||
.cell {
|
||||
height: 24px;
|
||||
@ -111,10 +120,16 @@ const onPopoverRefOver = (scope, type) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-cell {
|
||||
white-space: nowrap; /* 禁止自动换行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
/* 禁止自动换行 */
|
||||
overflow: hidden;
|
||||
/* 超出部分隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
/* 显示省略号 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
242
web/src/management/pages/analysis/components/StatisticsItem.vue
Normal file
242
web/src/management/pages/analysis/components/StatisticsItem.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="separate-item">
|
||||
<div class="separate-item-title">
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="400"
|
||||
trigger="hover"
|
||||
:disabled="!titlePoppverShow"
|
||||
:content="cleanRichText(StatisticsData.title)"
|
||||
>
|
||||
<template #reference>
|
||||
<p ref="titleRef" class="text" v-html="cleanRichText(StatisticsData.title)"></p>
|
||||
</template>
|
||||
</el-popover>
|
||||
<p v-if="questionTypeDesc" class="type">{{ questionTypeDesc }}</p>
|
||||
</div>
|
||||
<div class="separate-item-content">
|
||||
<div class="chart-wrapper">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
<div v-if="chartTypeList.length > 1" class="chart-type-list">
|
||||
<el-segmented v-model="chartType" :options="chartTypeList" size="small">
|
||||
<template #default="{ item }">
|
||||
<i class="iconfont" :class="`icon-${item}`"></i>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<data-table :table-data :table-min-height />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, toRefs, defineProps, computed, watch, onMounted, onUnmounted, ref } from 'vue'
|
||||
import _cloneDeep from 'lodash/cloneDeep'
|
||||
import {
|
||||
separateItemListHead,
|
||||
summaryType,
|
||||
summaryItemConfig
|
||||
} from '@/management/config/analysisConfig'
|
||||
import useCharts from '@/management/hooks/useCharts'
|
||||
import useStatisticsItemChart from '@/management/hooks/useStatisticsItemChart'
|
||||
import { cleanRichText } from '@/common/xss'
|
||||
import { menuItems } from '@/management/config/questionMenuConfig'
|
||||
import DataTable from './DataTable.vue'
|
||||
import useResizeObserver from '@/management/hooks/useResizeObserver'
|
||||
|
||||
const props = defineProps({
|
||||
StatisticsData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const questionType = computed(() => {
|
||||
return props?.StatisticsData?.type
|
||||
})
|
||||
|
||||
const questionTypeDesc = computed(() => {
|
||||
return menuItems?.[questionType.value]?.title || ''
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const separateItemListBody = computed(() => {
|
||||
try {
|
||||
const aggregation = _cloneDeep(props?.StatisticsData?.data?.aggregation)
|
||||
const submitionCount = props?.StatisticsData?.data?.submitionCount
|
||||
const summaryList = summaryItemConfig[questionType.value]
|
||||
// 增加聚合信息
|
||||
if (summaryList?.length) {
|
||||
summaryList.forEach((item, index) => {
|
||||
const { type, text, field, max, min } = item
|
||||
if (text && field && type === summaryType.between) {
|
||||
aggregation.push({
|
||||
id: `summary_${index}`,
|
||||
text,
|
||||
count: aggregation.reduce((n, item) => {
|
||||
if (item[field] >= min && item[field] <= max) {
|
||||
return n + item.count
|
||||
}
|
||||
return n
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
aggregation?.map((item) => {
|
||||
const { id, count, text } = item
|
||||
const percent = submitionCount ? `${((count / submitionCount) * 100).toFixed(1)}%` : '0%'
|
||||
return {
|
||||
id,
|
||||
count,
|
||||
text,
|
||||
percent
|
||||
}
|
||||
}) || []
|
||||
)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
const separateItemState = reactive({
|
||||
tableData: {
|
||||
total: 0,
|
||||
listHead: separateItemListHead,
|
||||
listBody: separateItemListBody
|
||||
},
|
||||
tableMinHeight: '0px'
|
||||
})
|
||||
|
||||
const { tableData, tableMinHeight } = toRefs(separateItemState)
|
||||
|
||||
const titlePoppverShow = ref(false)
|
||||
const titleRef = ref(null)
|
||||
|
||||
const titleResize = () => {
|
||||
if (titleRef.value?.scrollWidth > titleRef.value?.offsetWidth) {
|
||||
titlePoppverShow.value = true
|
||||
} else {
|
||||
titlePoppverShow.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const { chartRef, chartTypeList, chartType, chartData } = useStatisticsItemChart({
|
||||
questionType,
|
||||
data: props?.StatisticsData?.data
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 需要获取图表dom，所以得在mounted中执行
|
||||
const { changeType, resize: chartResize } = useCharts(
|
||||
chartRef.value,
|
||||
chartType.value,
|
||||
chartData.value
|
||||
)
|
||||
|
||||
const { destroy } = useResizeObserver(chartRef.value, () => {
|
||||
chartResize()
|
||||
titleResize()
|
||||
})
|
||||
|
||||
// 图型切换
|
||||
watch(chartType, () => {
|
||||
changeType(chartType.value, chartData.value)
|
||||
})
|
||||
|
||||
// 销毁resizeObserver
|
||||
onUnmounted(destroy)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.separate-item {
|
||||
padding: 32px 12px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
color: white;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 7px 3px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
flex: auto;
|
||||
width: 50%;
|
||||
min-width: 300px;
|
||||
height: 320px;
|
||||
max-width: 1000px;
|
||||
box-shadow: 0 2px 8px -2px rgba(136, 136, 157, 0.2);
|
||||
border-radius: 2px;
|
||||
padding: 24px;
|
||||
|
||||
.chart-type-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.iconfont {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: auto;
|
||||
width: 50%;
|
||||
min-width: 300px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1660px) {
|
||||
&-content {
|
||||
gap: 80px;
|
||||
|
||||
.chart-wrapper {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
web/src/management/pages/analysis/pages/DataTablePage.vue
Normal file
142
web/src/management/pages/analysis/pages/DataTablePage.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="data-table-page">
|
||||
<template v-if="tableData.total">
|
||||
<div class="menus">
|
||||
<el-switch
|
||||
:model-value="isShowOriginData"
|
||||
active-text="是否展示原数据"
|
||||
@input="onIsShowOriginChange"
|
||||
>
|
||||
</el-switch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="tableData.total">
|
||||
<DataTable :main-table-loading :table-data />
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
popper-class="analysis-pagination"
|
||||
:total="tableData.total"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
<div v-else>
|
||||
<EmptyIndex :data="noDataConfig" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, toRefs } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/src/message.scss'
|
||||
import EmptyIndex from '@/management/components/EmptyIndex.vue'
|
||||
import { getRecycleList } from '@/management/api/analysis'
|
||||
import { noDataConfig } from '@/management/config/analysisConfig'
|
||||
import DataTable from '../components/DataTable.vue'
|
||||
|
||||
const dataTableState = reactive({
|
||||
mainTableLoading: false,
|
||||
tableData: {
|
||||
total: 0,
|
||||
listHead: [],
|
||||
listBody: []
|
||||
},
|
||||
currentPage: 1,
|
||||
isShowOriginData: false,
|
||||
tmpIsShowOriginData: false
|
||||
})
|
||||
|
||||
const { mainTableLoading, tableData, isShowOriginData } = toRefs(dataTableState)
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const formatHead = (listHead) => {
|
||||
const head = []
|
||||
|
||||
listHead.forEach((headItem) => {
|
||||
head.push({
|
||||
field: headItem.field,
|
||||
title: headItem.title
|
||||
})
|
||||
|
||||
if (headItem.othersCode?.length) {
|
||||
headItem.othersCode.forEach((item) => {
|
||||
head.push({
|
||||
field: item.code,
|
||||
title: `${headItem.title}-${item.option}`
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return head
|
||||
}
|
||||
|
||||
const onIsShowOriginChange = async (data) => {
|
||||
if (dataTableState.mainTableLoading) {
|
||||
return
|
||||
}
|
||||
dataTableState.tmpIsShowOriginData = data
|
||||
await init()
|
||||
dataTableState.isShowOriginData = data
|
||||
}
|
||||
|
||||
const handleCurrentChange = async (page) => {
|
||||
if (dataTableState.mainTableLoading) {
|
||||
return
|
||||
}
|
||||
dataTableState.currentPage = page
|
||||
await init()
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
if (!route.params.id) {
|
||||
ElMessage.error('没有传入问卷参数~')
|
||||
return
|
||||
}
|
||||
dataTableState.mainTableLoading = true
|
||||
try {
|
||||
const res = await getRecycleList({
|
||||
page: dataTableState.currentPage,
|
||||
surveyId: route.params.id,
|
||||
isDesensitive: !dataTableState.tmpIsShowOriginData // 发起请求的时候，isShowOriginData还没改变，暂存了一个字段
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
const listHead = formatHead(res.data.listHead)
|
||||
dataTableState.tableData = { ...res.data, listHead }
|
||||
dataTableState.mainTableLoading = false
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('查询回收数据失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
init()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-table-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menus {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-pagination) {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div v-if="data.length" class="separate-statis-page">
|
||||
<StatisticsItem v-for="StatisticsData in data" :key="StatisticsData.field" :StatisticsData />
|
||||
</div>
|
||||
<div v-else>
|
||||
<EmptyIndex :data="noDataConfig" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/src/message.scss'
|
||||
import { noDataConfig } from '@/management/config/analysisConfig'
|
||||
import EmptyIndex from '@/management/components/EmptyIndex.vue'
|
||||
import { getStatisticList } from '@/management/api/analysis'
|
||||
import StatisticsItem from '../components/StatisticsItem.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const initData = async () => {
|
||||
try {
|
||||
const res = await getStatisticList({
|
||||
surveyId: route.params.id
|
||||
})
|
||||
if (res.code === 200) {
|
||||
data.value = res?.data || []
|
||||
} else {
|
||||
ElMessage.error(res?.errmsg)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '查询回收数据失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(initData)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.separate-statis-page {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 0 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@ -8,26 +8,12 @@
|
||||
{{ form.title }}
|
||||
</span>
|
||||
</div>
|
||||
<el-form
|
||||
class="question-config-form"
|
||||
label-position="left"
|
||||
label-width="200px"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form class="question-config-form" label-position="left" label-width="200px" @submit.prevent>
|
||||
<template v-for="(item, index) in form.formList">
|
||||
<FormItem
|
||||
v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])"
|
||||
:key="index"
|
||||
:form-config="item"
|
||||
:style="item.style"
|
||||
>
|
||||
<Component
|
||||
v-if="Boolean(registerTypes[item.type])"
|
||||
:is="components[item.type]"
|
||||
:module-config="form.dataConfig"
|
||||
:form-config="item"
|
||||
@form-change="handleFormChange"
|
||||
/>
|
||||
<FormItem v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])" :key="index"
|
||||
:form-config="item" :style="item.style">
|
||||
<Component v-if="Boolean(registerTypes[item.type])" :is="components[item.type]"
|
||||
:module-config="form.dataConfig" :form-config="item" @form-change="handleFormChange" />
|
||||
</FormItem>
|
||||
</template>
|
||||
</el-form>
|
||||
@ -39,7 +25,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, shallowRef } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { cloneDeep as _cloneDeep, isArray as _isArray, get as _get } from 'lodash-es'
|
||||
import { cloneDeep as _cloneDeep, isArray as _isArray, get as _get,isFunction as _isFunction} from 'lodash-es'
|
||||
|
||||
import baseConfig from './config/baseConfig'
|
||||
import baseFormConfig from './config/baseFormConfig'
|
||||
@ -49,6 +35,9 @@ import setterLoader from '@/materials/setters/setterLoader'
|
||||
const formConfigList = ref<Array<any>>([])
|
||||
const components = shallowRef<any>({})
|
||||
const registerTypes = ref<any>({})
|
||||
const store = useStore()
|
||||
const schemaBaseConf = computed(() => store.state.edit?.schema?.baseConf || {})
|
||||
|
||||
const setterList = computed(() => {
|
||||
const list = _cloneDeep(formConfigList.value)
|
||||
|
||||
@ -71,6 +60,14 @@ const setterList = computed(() => {
|
||||
}
|
||||
formItem.value = formValue
|
||||
}
|
||||
// 动态显隐设置器
|
||||
form.formList = form.formList.filter((item:any) => {
|
||||
if (_isFunction(item.relyFunc)) {
|
||||
return item.relyFunc(schemaBaseConf.value)
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
|
||||
form.dataConfig = dataConfig
|
||||
|
||||
@ -78,7 +75,6 @@ const setterList = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const store = useStore()
|
||||
const handleFormChange = (data: any) => {
|
||||
store.dispatch('edit/changeSchema', {
|
||||
key: data.key,
|
||||
|
||||
@ -8,5 +8,11 @@ export default [
|
||||
title: '提交限制',
|
||||
key: 'limitConfig',
|
||||
formList: ['limit_tLimit']
|
||||
}, {
|
||||
title: '作答限制',
|
||||
key: 'respondConfig',
|
||||
formList: ['interview_pwd','answer_type','white_placeholder','white_list','team_list']
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -21,5 +21,44 @@ export default {
|
||||
tip: '问卷仅在指定时间段内可填写',
|
||||
type: 'QuestionTimeHour',
|
||||
placement: 'top'
|
||||
},
|
||||
interview_pwd: {
|
||||
keys: ['baseConf.passwordSwitch', 'baseConf.password'],
|
||||
label: '访问密码',
|
||||
type: 'SwitchInput',
|
||||
placeholder: '请输入访问密码'
|
||||
},
|
||||
answer_type: {
|
||||
key: 'baseConf.whitelistType',
|
||||
label: '答题名单',
|
||||
type: 'AnswerRadio',
|
||||
},
|
||||
white_placeholder:{
|
||||
key: 'baseConf.whitelistTip',
|
||||
label: '名单登录提示语',
|
||||
placeholder:'请输入名单提示语',
|
||||
type: 'InputWordLimit',
|
||||
maxlength: 40,
|
||||
relyFunc: (data) => {
|
||||
return ['CUSTOM','MEMBER'].includes(data.whitelistType)
|
||||
}
|
||||
},
|
||||
white_list:{
|
||||
keys: ['baseConf.whitelist','baseConf.memberType'],
|
||||
label: '白名单列表',
|
||||
type: 'whiteList',
|
||||
relyFunc: (data) => {
|
||||
return data.whitelistType == 'CUSTOM'
|
||||
}
|
||||
},
|
||||
team_list:{
|
||||
key: 'baseConf.whitelist',
|
||||
label: '团队空间成员选择',
|
||||
type: 'teamMemberList',
|
||||
relyFunc: (data) => {
|
||||
return data.whitelistType == 'MEMBER'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -139,7 +139,7 @@ import {
|
||||
noSearchDataConfig,
|
||||
selectOptionsDict,
|
||||
buttonOptionsDict
|
||||
} from '../config'
|
||||
} from '@/management/config/listConfig'
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
@ -75,7 +75,7 @@ import { useStore } from 'vuex'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/src/message-box.scss'
|
||||
import { get, map } from 'lodash-es'
|
||||
import { spaceListConfig } from '../config'
|
||||
import { spaceListConfig } from '@/management/config/listConfig'
|
||||
import SpaceModify from './SpaceModify.vue'
|
||||
import { UserRole } from '@/management/utils/types/workSpace'
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { statusMaps } from '../config'
|
||||
import { statusMaps } from '@/management/config/listConfig'
|
||||
export default {
|
||||
name: 'StateModule',
|
||||
props: {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { type as surveyType } from '../config'
|
||||
import { type as surveyType } from '@/management/config/listConfig'
|
||||
export default {
|
||||
name: 'TagModule',
|
||||
props: {
|
||||
|
||||
@ -2,6 +2,7 @@ import { createRouter, createWebHistory, type RouteLocationNormalized, type Navi
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import { useStore, type Store } from 'vuex'
|
||||
import { SurveyPermissions } from '@/management/utils/types/workSpace'
|
||||
import { analysisTypeMap } from '@/management/config/analysisConfig'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/src/message.scss'
|
||||
|
||||
@ -92,11 +93,34 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/survey/:id/analysis',
|
||||
name: 'analysisPage',
|
||||
redirect: {
|
||||
name: analysisTypeMap.dataTable
|
||||
},
|
||||
meta: {
|
||||
needLogin: true,
|
||||
permissions: [SurveyPermissions.DataManage]
|
||||
},
|
||||
component: () => import('../pages/analysis/AnalysisPage.vue')
|
||||
component: () => import('../pages/analysis/AnalysisPage.vue'),
|
||||
children: [
|
||||
{
|
||||
path: analysisTypeMap.dataTable,
|
||||
name: analysisTypeMap.dataTable,
|
||||
meta: {
|
||||
needLogin: true,
|
||||
premissions: [SurveyPermissions.DataManage]
|
||||
},
|
||||
component: () => import('../pages/analysis/pages/DataTablePage.vue')
|
||||
},
|
||||
{
|
||||
path: analysisTypeMap.separateStatistics,
|
||||
name: analysisTypeMap.separateStatistics,
|
||||
meta: {
|
||||
needLogin: true,
|
||||
premissions: [SurveyPermissions.DataManage]
|
||||
},
|
||||
component: () => import('../pages/analysis/pages/SeparateStatisticsPage.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/survey/:id/publish',
|
||||
|
||||
@ -42,7 +42,13 @@ export default {
|
||||
tLimit: 0,
|
||||
answerBegTime: '',
|
||||
answerEndTime: '',
|
||||
answerLimitTime: 0
|
||||
answerLimitTime: 0,
|
||||
passwordSwitch: false,
|
||||
password:'',
|
||||
whitelistType: 'ALL',
|
||||
whitelistTip:'',
|
||||
whitelist: [],
|
||||
memberType:'MOBILE',
|
||||
},
|
||||
submitConf: {
|
||||
submitTitle: '',
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 4263849 */
|
||||
font-family: 'iconfont';
|
||||
/* Project id 4263849 */
|
||||
src:
|
||||
url('//at.alicdn.com/t/c/font_4263849_xfsn9z31epc.woff2?t=1716556097756') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4263849_xfsn9z31epc.woff?t=1716556097756') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4263849_xfsn9z31epc.ttf?t=1716556097756') format('truetype');
|
||||
url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.woff2?t=1717580126029') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.woff?t=1717580126029') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.ttf?t=1717580126029') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -125,15 +126,39 @@
|
||||
.icon-erweima:before {
|
||||
content: '\e6c0';
|
||||
}
|
||||
|
||||
.icon-yangshishezhi:before {
|
||||
content: '\e6e6';
|
||||
}
|
||||
|
||||
.icon-NPSpingfen::before {
|
||||
content: '\e6e7';
|
||||
}
|
||||
|
||||
.icon-wodekongjian::before {
|
||||
content: '\e6ee';
|
||||
}
|
||||
|
||||
.icon-tuanduikongjian::before {
|
||||
content: '\e6ec';
|
||||
}
|
||||
|
||||
.icon-shujuliebiao:before {
|
||||
content: '\e6f2';
|
||||
}
|
||||
|
||||
.icon-fentitongji:before {
|
||||
content: '\e6f3';
|
||||
}
|
||||
|
||||
.icon-bar:before {
|
||||
content: '\e600';
|
||||
}
|
||||
|
||||
.icon-pie:before {
|
||||
content: '\e606';
|
||||
}
|
||||
|
||||
.icon-gauge:before {
|
||||
content: '\e6db';
|
||||
}
|
||||
|
||||
41
web/src/materials/setters/widgets/AnswerRadio.vue
Normal file
41
web/src/materials/setters/widgets/AnswerRadio.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="answer-radio-wrap">
|
||||
<el-radio-group v-model="whitelistType" @change="handleRadioGroupChange">
|
||||
<el-radio value="ALL">所有人</el-radio>
|
||||
<el-radio value="MEMBER">空间成员</el-radio>
|
||||
<el-radio value="CUSTOM">白名单</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
|
||||
const whitelistType = ref(props.formConfig?.value || 'ALL')
|
||||
|
||||
const handleRadioGroupChange = (value) => {
|
||||
const key = props.formConfig.key
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key, value })
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key:'baseConf.whitelist', value: [] })
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key: 'baseConf.memberType', value: 'MOBILE' })
|
||||
if (whitelistType.value == 'ALL') {
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key:'baseConf.whitelistTip', value:'' })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.switch-input-wrap{
|
||||
width: 100%;
|
||||
.mt16{
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
web/src/materials/setters/widgets/InputWordLimit.vue
Normal file
34
web/src/materials/setters/widgets/InputWordLimit.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-input
|
||||
:maxlength="maxlength"
|
||||
v-model="modelValue"
|
||||
:placeholder="placeholder"
|
||||
show-word-limit
|
||||
type="text"
|
||||
@change="handleInputChange"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed,ref } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
|
||||
const modelValue = ref(props.formConfig.value || '')
|
||||
|
||||
const maxlength = computed(() => props.formConfig.maxlength || 10)
|
||||
|
||||
const placeholder = computed(() => props.formConfig.placeholder || '')
|
||||
|
||||
const handleInputChange = (value) => {
|
||||
const key = props.formConfig.key
|
||||
|
||||
modelValue.value = value
|
||||
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key, value })
|
||||
}
|
||||
|
||||
</script>
|
||||
44
web/src/materials/setters/widgets/SwitchInput.vue
Normal file
44
web/src/materials/setters/widgets/SwitchInput.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="switch-input-wrap">
|
||||
<el-switch v-model="passwordSwitch" @change="changeData(props.formConfig.keys[0],passwordSwitch)" />
|
||||
<el-input
|
||||
v-if="passwordSwitch"
|
||||
class="mt16"
|
||||
maxlength="6"
|
||||
placeholder="请输入6位字符串类型访问密码"
|
||||
show-word-limit
|
||||
v-model="password"
|
||||
type="text"
|
||||
@blur="changeData(props.formConfig.keys[1],password)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
const passwordSwitch = ref(props.formConfig?.value[0] || false);
|
||||
const password = ref(props.formConfig?.value[1] || '');
|
||||
|
||||
const changeData = (key,value) => {
|
||||
emit(FORM_CHANGE_EVENT_KEY, {
|
||||
key,
|
||||
value
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.switch-input-wrap{
|
||||
width: 100%;
|
||||
.mt16{
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
109
web/src/materials/setters/widgets/teamMemberList.vue
Normal file
109
web/src/materials/setters/widgets/teamMemberList.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="team-member-wrap">
|
||||
<div class="team-tree-wrap">
|
||||
<el-tree ref="treeRef" :default-expanded-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"
|
||||
:data="treeData" empty-text="暂无数据" @check="handleChange" style="height:201px" highlight-current show-checkbox
|
||||
node-key="id" :props="defaultProps" />
|
||||
</div>
|
||||
<div class="member-count">已选择 <span>{{ selectCount }}</span> 人</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, defineProps, defineEmits, onMounted, nextTick } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
|
||||
const store = useStore();
|
||||
const treeRef = ref(null)
|
||||
const treeData = ref([])
|
||||
const defaultCheckedKeys = ref([])
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
}
|
||||
|
||||
const handleChange = () => {
|
||||
const key = props.formConfig.key;
|
||||
const userKeys = treeRef.value?.getCheckedKeys(false);
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key: key, value: userKeys });
|
||||
}
|
||||
|
||||
const spaceDetail = computed(() => {
|
||||
return store.state.list.spaceDetail
|
||||
})
|
||||
|
||||
|
||||
|
||||
const selectCount = computed(() => {
|
||||
return treeRef.value?.getCheckedKeys(true).length || 0
|
||||
})
|
||||
|
||||
const getSpaceMenus = async () => {
|
||||
await store.dispatch('list/getSpaceList')
|
||||
store.state?.list?.spaceMenus.map((v) => {
|
||||
if (v.id == "group") {
|
||||
const promiseList = []
|
||||
v.children?.map((item) => {
|
||||
promiseList.push(store.dispatch('list/getSpaceDetail', item.id).then(() => {
|
||||
treeData.value.push({
|
||||
id: item.id,
|
||||
label: item.name,
|
||||
children: getChildren()
|
||||
})
|
||||
}))
|
||||
})
|
||||
Promise.all(promiseList).then(() => {
|
||||
nextTick(() => {
|
||||
defaultCheckedKeys.value = props.formConfig.value;
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getChildren = () => {
|
||||
const members = [];
|
||||
if (spaceDetail.value?.members?.length > 0) {
|
||||
spaceDetail.value.members.map(v => {
|
||||
members.push({
|
||||
id: v.userId,
|
||||
label: v.username,
|
||||
})
|
||||
})
|
||||
}
|
||||
return members
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getSpaceMenus();
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.team-member-wrap {
|
||||
width: 508px;
|
||||
|
||||
.team-tree-wrap {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(227, 228, 232, 1);
|
||||
border-radius: 2px;
|
||||
min-height: 204px;
|
||||
max-height: 204px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
119
web/src/materials/setters/widgets/whiteList.vue
Normal file
119
web/src/materials/setters/widgets/whiteList.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="white-list-wrap">
|
||||
<el-button class="create-btn" type="primary" @click="whiteVisible=true">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button v-if="whitelist.length>0" class="create-btn" color="#4A4C5B" @click="delAllList">
|
||||
全部删除
|
||||
</el-button>
|
||||
<el-table class="table-wrap" empty-text="暂无数据" :data="whitelist" height="240" style="width: 426px">
|
||||
<el-table-column label="名单" width="350" >
|
||||
<template #default="scope">
|
||||
<div>{{ whitelist[scope.$index] }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="74" >
|
||||
<template #default="scope">
|
||||
<div @click="delRowItem(scope.$index)" class="flex cursor"><i-ep-delete :size="16" /></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog v-model="whiteVisible" title="添加白名单" width="600" @closed="handleClose">
|
||||
<div>
|
||||
<el-form-item label-position="top" label="类型选择" label-width="auto">
|
||||
<el-radio-group v-model="memberType" >
|
||||
<el-radio value="MOBILE">手机号</el-radio>
|
||||
<el-radio value="EMAIL">邮箱</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label-position="top" class="flex-column" label="名单录入" label-width="auto">
|
||||
<el-input v-model="whiteTextarea" placeholder="多个用逗号(半角)“,”隔开" rows="7" resize="none" type="textarea" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="whiteVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleChange">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { ref,nextTick } from 'vue'
|
||||
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
|
||||
|
||||
const props = defineProps({
|
||||
formConfig: Object,
|
||||
})
|
||||
const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
|
||||
|
||||
const whitelist = ref(props.formConfig.value[0] || [])
|
||||
const memberType = ref(props.formConfig.value[1] || 'MOBILE')
|
||||
const whiteVisible = ref(false)
|
||||
const whiteTextarea = ref(whitelist.value.join(','))
|
||||
|
||||
|
||||
|
||||
|
||||
const handleChange = () => {
|
||||
const keys = props.formConfig.keys;
|
||||
const list = whiteTextarea.value ? whiteTextarea.value.split(',') : []
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key:keys[0], value: list });
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key: keys[1], value: memberType.value })
|
||||
whiteVisible.value = false
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
nextTick(() => {
|
||||
whitelist.value = props.formConfig.value[0] || []
|
||||
whiteTextarea.value = whitelist.value.join(',')
|
||||
memberType.value = props.formConfig.value[1] || 'MOBILE'
|
||||
})
|
||||
}
|
||||
|
||||
const delRowItem = (index) => {
|
||||
whitelist.value.splice(index, 1);
|
||||
whiteTextarea.value = whitelist.value.join(',')
|
||||
const keys = props.formConfig.keys;
|
||||
emit(FORM_CHANGE_EVENT_KEY, { key:keys[0], value: whitelist.value });
|
||||
}
|
||||
|
||||
const delAllList = () => {
|
||||
whitelist.value = []
|
||||
whiteTextarea.value = ''
|
||||
handleChange();
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.white-list-wrap {
|
||||
.flex-column{
|
||||
flex-direction: column;
|
||||
}
|
||||
:deep(th){
|
||||
padding:4px 0;
|
||||
background: #F6F7F9;
|
||||
}
|
||||
:deep(td){
|
||||
padding:6px 0;
|
||||
}
|
||||
.table-wrap{
|
||||
margin-top: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 2px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -32,3 +32,10 @@ export const queryVote = ({ surveyPath, fieldList }) => {
|
||||
export const getEncryptInfo = () => {
|
||||
return axios.get('/clientEncrypt/getEncryptInfo')
|
||||
}
|
||||
|
||||
export const validate = ({ surveyPath,password, value }) => {
|
||||
return axios.post(`/responseSchema/${surveyPath}/validate`, {
|
||||
password,
|
||||
value
|
||||
})
|
||||
}
|
||||
@ -58,6 +58,7 @@ const questionConfig = computed(() => {
|
||||
}
|
||||
if (
|
||||
RATES.includes(type) &&
|
||||
rest.rangeConfig &&
|
||||
Object.keys(rest.rangeConfig).filter((index) => rest.rangeConfig[index].isShowInput).length > 0
|
||||
) {
|
||||
let { rangeConfig, othersValue } = useShowInput(field)
|
||||
|
||||
137
web/src/render/components/VerifyWhiteDialog.vue
Normal file
137
web/src/render/components/VerifyWhiteDialog.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="whiteVisible"
|
||||
title="验证"
|
||||
:show-close="false"
|
||||
class="verify-white-wrap"
|
||||
width="315"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
align-center
|
||||
|
||||
>
|
||||
<template #header>
|
||||
<div class="verify-white-head">
|
||||
<div class="verify-white-title">验证</div>
|
||||
<div v-if="whitelistTip" class="verify-white-tips">{{ whitelistTip }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="verify-white-body">
|
||||
<el-input v-if="isPwd" v-model="state.password" class="wd255" placeholder="请输入6位字符串类型访问密码" />
|
||||
<el-input v-if="isValue" v-model="state.value" class="wd255 mt16" :placeholder="placeholder" />
|
||||
<div class="submit-btn" @click="handleSubmit">验证并开始答题</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref,reactive,computed,onMounted } from 'vue'
|
||||
import { validate } from '../api/survey'
|
||||
import { useStore } from 'vuex'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/src/message.scss'
|
||||
|
||||
const whiteVisible = ref(false)
|
||||
|
||||
|
||||
const store = useStore()
|
||||
const state = reactive({
|
||||
password: '',
|
||||
value: '',
|
||||
is_submit:false
|
||||
})
|
||||
|
||||
const baseConf = computed(() => store.state.baseConf || {})
|
||||
const isPwd = computed(() => baseConf.value.passwordSwitch)
|
||||
const whitelistType = computed(() => baseConf.value.whitelistType)
|
||||
const memberType = computed(() => baseConf.value.memberType)
|
||||
const whitelistTip = computed(() => baseConf.value.whitelistTip)
|
||||
const surveyPath = computed(() => store.state?.surveyPath || '')
|
||||
|
||||
const isValue = computed(() => {
|
||||
if(!whitelistType.value) return false
|
||||
return whitelistType.value!='ALL'
|
||||
})
|
||||
|
||||
const placeholder = computed(() => {
|
||||
if (whitelistType.value == 'MEMBER') {
|
||||
return '请输入用户名'
|
||||
}
|
||||
if(memberType.value == 'MOBILE'){
|
||||
return '请输入手机号'
|
||||
}
|
||||
if(memberType.value == 'EMAIL'){
|
||||
return '请输入邮箱'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const handleSubmit = async() => {
|
||||
if (state.is_submit) return;
|
||||
const params = {
|
||||
surveyPath:surveyPath.value
|
||||
}
|
||||
if (isValue.value) {
|
||||
params.value = state.value
|
||||
}
|
||||
if(isPwd.value){
|
||||
params.password = state.password
|
||||
}
|
||||
|
||||
const res = await validate(params)
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.errmsg || '验证失败')
|
||||
return
|
||||
}
|
||||
whiteVisible.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if(isValue.value || isPwd.value){
|
||||
whiteVisible.value = true;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.verify-white-wrap{
|
||||
.verify-white-body{
|
||||
padding:0 14px
|
||||
}
|
||||
.verify-white-head{
|
||||
padding:0 14px;
|
||||
margin-bottom: 8px;
|
||||
margin-top:2px;
|
||||
}
|
||||
.mt16{
|
||||
margin-top:16px;
|
||||
}
|
||||
.verify-white-tips{
|
||||
text-align: center;
|
||||
margin-top:8px;
|
||||
font-size: 14px;
|
||||
color: #92949D;
|
||||
}
|
||||
.verify-white-title{
|
||||
font-size: 16px;
|
||||
color: #292A36;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.submit-btn{
|
||||
background: #FAA600;
|
||||
border-radius: 2px;
|
||||
width:255px;
|
||||
height:32px;
|
||||
color:#fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top:20px;
|
||||
margin-bottom:14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -15,8 +15,10 @@
|
||||
|
||||
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
|
||||
width = width < PC_W ? width : PC_W
|
||||
if (!docEl.className.includes('ispc-html')) {
|
||||
docEl.className += ' ispc-html'
|
||||
}
|
||||
}
|
||||
|
||||
var f = Math.min(width / 7.5, 50)
|
||||
docEl.style.fontSize = f + 'px'
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
@submit="handleSubmit"
|
||||
></SubmitButton>
|
||||
<LogoIcon :logo-conf="logoConf" :readonly="true" />
|
||||
<VerifyWhiteDialog v-if="store.state?.bannerConf" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,6 +27,7 @@ import { useRouter } from 'vue-router'
|
||||
import communalLoader from '@materials/communals/communalLoader.js'
|
||||
import MainRenderer from '../components/MainRenderer.vue'
|
||||
import AlertDialog from '../components/AlertDialog.vue'
|
||||
import VerifyWhiteDialog from '../components/VerifyWhiteDialog.vue'
|
||||
import ConfirmDialog from '../components/ConfirmDialog.vue'
|
||||
import ProgressBar from '../components/ProgressBar.vue'
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user