From 8561011f9ba73a1d6ababa27bdee3a313cbd981f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= Date: Wed, 28 May 2025 15:09:04 +0800 Subject: [PATCH] =?UTF-8?q?refactor(Design):=20=E4=B8=BA=20MatrixText=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E5=8D=A0=E4=BD=8D=E7=AC=A6?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 MatrixText 组件的输入框中添加占位符 - 格式化 validate 相关的测试代码，使其更加规范 - 在 validateMatrixCheckbox 中添加日志输出，便于调试 - 优化 language 相关代码，新增请求数量相关的翻译文本 --- .../components/Questions/MatrixText.vue | 4 ++++ .../questions/validate/previewCompletion.ts | 5 +++- .../validate/test/validateEmail.spec.ts | 4 ++-- .../validate/test/validateIDCard.spec.ts | 4 ++-- .../validate/test/validatePhone.spec.ts | 4 ++-- .../test/validateStringLength.spec.ts | 24 +++++++++---------- .../validate/validateMatrixCheckbox.ts | 2 +- src/views/Survey/views/Preview/js/language.js | 4 ++++ .../views/Preview/js/test/language.spec.ts | 10 ++++---- 9 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/views/Design/components/Questions/MatrixText.vue b/src/views/Design/components/Questions/MatrixText.vue index a4712a1..5a72c41 100644 --- a/src/views/Design/components/Questions/MatrixText.vue +++ b/src/views/Design/components/Questions/MatrixText.vue @@ -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('element', { /**/ } }); + +console.log(element); + const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']); function getInputValue(row: number, col: number) { diff --git a/src/views/Survey/views/Preview/components/questions/validate/previewCompletion.ts b/src/views/Survey/views/Preview/components/questions/validate/previewCompletion.ts index b0c7b52..fb8eee5 100644 --- a/src/views/Survey/views/Preview/components/questions/validate/previewCompletion.ts +++ b/src/views/Survey/views/Preview/components/questions/validate/previewCompletion.ts @@ -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'; /** * 生成对应的语言文字 diff --git a/src/views/Survey/views/Preview/components/questions/validate/test/validateEmail.spec.ts b/src/views/Survey/views/Preview/components/questions/validate/test/validateEmail.spec.ts index 7e5223c..ae59cf4 100644 --- a/src/views/Survey/views/Preview/components/questions/validate/test/validateEmail.spec.ts +++ b/src/views/Survey/views/Preview/components/questions/validate/test/validateEmail.spec.ts @@ -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); }); diff --git a/src/views/Survey/views/Preview/components/questions/validate/test/validateIDCard.spec.ts b/src/views/Survey/views/Preview/components/questions/validate/test/validateIDCard.spec.ts index 39bc6a2..e14ed4a 100644 --- a/src/views/Survey/views/Preview/components/questions/validate/test/validateIDCard.spec.ts +++ b/src/views/Survey/views/Preview/components/questions/validate/test/validateIDCard.spec.ts @@ -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); }); diff --git a/src/views/Survey/views/Preview/components/questions/validate/test/validatePhone.spec.ts b/src/views/Survey/views/Preview/components/questions/validate/test/validatePhone.spec.ts index c09f44e..30935c1 100644 --- a/src/views/Survey/views/Preview/components/questions/validate/test/validatePhone.spec.ts +++ b/src/views/Survey/views/Preview/components/questions/validate/test/validatePhone.spec.ts @@ -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); }); diff --git a/src/views/Survey/views/Preview/components/questions/validate/test/validateStringLength.spec.ts b/src/views/Survey/views/Preview/components/questions/validate/test/validateStringLength.spec.ts index 943169d..15e38af 100644 --- a/src/views/Survey/views/Preview/components/questions/validate/test/validateStringLength.spec.ts +++ b/src/views/Survey/views/Preview/components/questions/validate/test/validateStringLength.spec.ts @@ -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(); }); diff --git a/src/views/Survey/views/Preview/components/questions/validate/validateMatrixCheckbox.ts b/src/views/Survey/views/Preview/components/questions/validate/validateMatrixCheckbox.ts index 28c45f7..238b70d 100644 --- a/src/views/Survey/views/Preview/components/questions/validate/validateMatrixCheckbox.ts +++ b/src/views/Survey/views/Preview/components/questions/validate/validateMatrixCheckbox.ts @@ -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; diff --git a/src/views/Survey/views/Preview/js/language.js b/src/views/Survey/views/Preview/js/language.js index 788d345..4d7fe0b 100644 --- a/src/views/Survey/views/Preview/js/language.js +++ b/src/views/Survey/views/Preview/js/language.js @@ -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}个字符。` diff --git a/src/views/Survey/views/Preview/js/test/language.spec.ts b/src/views/Survey/views/Preview/js/test/language.spec.ts index 7729856..7c9d68d 100644 --- a/src/views/Survey/views/Preview/js/test/language.spec.ts +++ b/src/views/Survey/views/Preview/js/test/language.spec.ts @@ -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); -}); \ No newline at end of file +});