hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Design): 为 MatrixText 组件添加占位符并优化代码格式

Browse Source 
- 在 MatrixText 组件的输入框中添加占位符
- 格式化 validate 相关的测试代码，使其更加规范
- 在 validateMatrixCheckbox 中添加日志输出，便于调试
- 优化 language 相关代码，新增请求数量相关的翻译文本
This commit is contained in:
陈昱达
2025-05-28 15:09:04 +08:00
parent 9afd82d9d7
commit 8561011f9b
9 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/Design/components/Questions/MatrixText.vue
View File

@@ -3,6 +3,7 @@
type="text"
class="el-input"
style="width: 100%"
:placeholder="element.config.placeholder"
:name="`R${rowIndex + 1}`"
:value="getInputValue(rowIndex, colIndex)"
@change="handleMatrixTextChange(rowIndex, colIndex, $event)"
@@ -21,6 +22,9 @@ const element = defineModel<question>('element', {
/**/
}
});
console.log(element);
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
function getInputValue(row: number, col: number) {

5
src/views/Survey/views/Preview/components/questions/validate/previewCompletion.ts
View File

@@ -6,7 +6,10 @@ import { validateEmail } from '@/views/Survey/views/Preview/components/questions
import { validatePhone } from '@/views/Survey/views/Preview/components/questions/validate/validatePhone';
import { validateIDCard } from '@/views/Survey/views/Preview/components/questions/validate/validateIDCard';
import type { ITranslatedText } from '@/views/Survey/views/Preview/components/questions/validate/validateChineseLetter';
import { validateMinLength,validateMaxLength } from '@/views/Survey/views/Preview/components/questions/validate/validateStringLength';
import {
validateMinLength,
validateMaxLength
} from '@/views/Survey/views/Preview/components/questions/validate/validateStringLength';
/**
* 生成对应的语言文字

4
src/views/Survey/views/Preview/components/questions/validate/test/validateEmail.spec.ts
View File

@@ -20,7 +20,7 @@ describe('validateEmail 函数测试', () => {
'test123@example.com'
];
validEmails.forEach(email => {
validEmails.forEach((email) => {
const result = validateEmail(email, mockTranslatedText);
expect(result).toBe('');
});
@@ -40,7 +40,7 @@ describe('validateEmail 函数测试', () => {
'test@example.com@example.com'
];
invalidEmails.forEach(email => {
invalidEmails.forEach((email) => {
const result = validateEmail(email, mockTranslatedText);
expect(result).toBe(mockTranslatedText.PleaseEnterACorrectEmail);
});

4
src/views/Survey/views/Preview/components/questions/validate/test/validateIDCard.spec.ts
View File

@@ -19,7 +19,7 @@ describe('validateIDCard 函数测试', () => {
'11010119900307095x'
];
validIDs.forEach(id => {
validIDs.forEach((id) => {
const result = validateIDCard(id, mockTranslatedText);
expect(result).toBe('');
});
@@ -38,7 +38,7 @@ describe('validateIDCard 函数测试', () => {
'12345678901234567' // 格式错误
];
invalidIDs.forEach(id => {
invalidIDs.forEach((id) => {
const result = validateIDCard(id, mockTranslatedText);
expect(result).toBe(mockTranslatedText.PleaseEnterACorrectID);
});

4
src/views/Survey/views/Preview/components/questions/validate/test/validatePhone.spec.ts
View File

@@ -20,7 +20,7 @@ describe('validatePhone 函数测试', () => {
'008613800138000'
];
validPhones.forEach(phone => {
validPhones.forEach((phone) => {
const result = validatePhone(phone, mockTranslatedText);
expect(result).toBe('');
});
@@ -38,7 +38,7 @@ describe('validatePhone 函数测试', () => {
'00112345678901' // 非中国号码
];
invalidPhones.forEach(phone => {
invalidPhones.forEach((phone) => {
const result = validatePhone(phone, mockTranslatedText);
expect(result).toBe(mockTranslatedText.PleaseEnterACorrectPhone);
});

24
src/views/Survey/views/Preview/components/questions/validate/test/validateStringLength.spec.ts
View File

@@ -20,7 +20,7 @@ describe('validateStringLength 函数测试', () => {
it('当字符串长度大于最小值时，应返回 undefined', () => {
const answer = '测试字符串';
const config: ICompletionConfig = { min: 3, max: 20, text_type: 0 };
const result = validateMinLength(answer, false, config, mockTranslatedText);
expect(result).toBeUndefined();
});
@@ -28,7 +28,7 @@ describe('validateStringLength 函数测试', () => {
it('当字符串长度小于最小值时，应返回错误信息', () => {
const answer = '测试';
const config: ICompletionConfig = { min: 5, max: 20, text_type: 0 };
const result = validateMinLength(answer, false, config, mockTranslatedText);
expect(result).toEqual({
isError: true,
@@ -39,7 +39,7 @@ describe('validateStringLength 函数测试', () => {
it('当 min 为空字符串时，应返回 undefined', () => {
const answer = '';
const config: ICompletionConfig = { min: '', max: 20, text_type: 0 };
const result = validateMinLength(answer, false, config, mockTranslatedText);
expect(result).toBeUndefined();
});
@@ -47,7 +47,7 @@ describe('validateStringLength 函数测试', () => {
it('当已有错误时，应返回 undefined', () => {
const answer = '测试';
const config: ICompletionConfig = { min: 5, max: 20, text_type: 0 };
const result = validateMinLength(answer, true, config, mockTranslatedText);
expect(result).toBeUndefined();
});
@@ -56,10 +56,10 @@ describe('validateStringLength 函数测试', () => {
const answer = '123';
const config1: ICompletionConfig = { min: 5, max: 20, text_type: 1 };
const config2: ICompletionConfig = { min: 5, max: 20, text_type: 2 };
const result1 = validateMinLength(answer, false, config1, mockTranslatedText);
const result2 = validateMinLength(answer, false, config2, mockTranslatedText);
expect(result1).toBeUndefined();
expect(result2).toBeUndefined();
});
@@ -69,7 +69,7 @@ describe('validateStringLength 函数测试', () => {
it('当字符串长度小于最大值时，应返回 undefined', () => {
const answer = '测试字符串';
const config: ICompletionConfig = { min: 3, max: 20, text_type: 0 };
const result = validateMaxLength(answer, false, config, mockTranslatedText);
expect(result).toBeUndefined();
});
@@ -77,7 +77,7 @@ describe('validateStringLength 函数测试', () => {
it('当字符串长度大于等于最大值时，应返回错误信息', () => {
const answer = '这是一个非常长的测试字符串，超过了最大长度限制';
const config: ICompletionConfig = { min: 5, max: 20, text_type: 0 };
const result = validateMaxLength(answer, false, config, mockTranslatedText);
expect(result).toEqual({
isError: true,
@@ -88,7 +88,7 @@ describe('validateStringLength 函数测试', () => {
it('当 max 为空字符串时，应返回 undefined', () => {
const answer = '测试字符串';
const config: ICompletionConfig = { min: 3, max: '', text_type: 0 };
const result = validateMaxLength(answer, false, config, mockTranslatedText);
expect(result).toBeUndefined();
});
@@ -96,7 +96,7 @@ describe('validateStringLength 函数测试', () => {
it('当已有错误时，应返回 undefined', () => {
const answer = '这是一个非常长的测试字符串，超过了最大长度限制';
const config: ICompletionConfig = { min: 5, max: 20, text_type: 0 };
const result = validateMaxLength(answer, true, config, mockTranslatedText);
expect(result).toBeUndefined();
});
@@ -105,10 +105,10 @@ describe('validateStringLength 函数测试', () => {
const answer = '123456789012345678901234567890';
const config1: ICompletionConfig = { min: 5, max: 20, text_type: 1 };
const config2: ICompletionConfig = { min: 5, max: 20, text_type: 2 };
const result1 = validateMaxLength(answer, false, config1, mockTranslatedText);
const result2 = validateMaxLength(answer, false, config2, mockTranslatedText);
expect(result1).toBeUndefined();
expect(result2).toBeUndefined();
});

2
src/views/Survey/views/Preview/components/questions/validate/validateMatrixCheckbox.ts
View File

@@ -106,7 +106,7 @@ function validateMatrixCheckbox(
: translatedText.PleaseSelectLessOptionsPerLine(maxSelect, rowIndex);
}
});
console.log(rows.options!.length, answer.length);
// 检测所有的答案是否正常选择
if (errorMessage.length === 0 && rows.options!.length > answer.length) {
errorMessage = translatedText.PleaseSelectAllRows;

4
src/views/Survey/views/Preview/js/language.js
View File

@@ -102,6 +102,10 @@ export const language = {
en: 'Please enter a valid ID card number.',
zh: '请输入正确的身份证号。'
},
PleaseEnterMoreThanOneCharacters: {
en: (count) => `Please enter more than ${count} character${count > 1 ? 's' : ''}.`,
zh: (count) => `请输入大于${count}个字符。`
},
PleaseEnterLessCharacters: {
en: (count) => `Please enter less than ${count} character${count > 1 ? 's' : ''}.`,
zh: (count) => `请输入小于${count}个字符。`

10
src/views/Survey/views/Preview/js/test/language.spec.ts
View File

@@ -1,7 +1,7 @@
import { test, spec } from "vitest";
import { getLanguage } from "../language";
import { test, spec } from 'vitest';
import { getLanguage } from '../language';
test("检测 language 列表", () => {
const res = getLanguage(['zh'])
test('检测 language 列表', () => {
const res = getLanguage(['zh']);
console.log(res);
});
});