diff --git a/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/index.vue b/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/index.vue new file mode 100644 index 0000000..42a9cc0 --- /dev/null +++ b/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/index.vue @@ -0,0 +1,78 @@ + + + diff --git a/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/style.scss b/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/style.scss new file mode 100644 index 0000000..943ca06 --- /dev/null +++ b/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/style.scss @@ -0,0 +1,31 @@ +.check-list-drawer-xt { + .arco-drawer-body { + overflow: hidden; + display: flex; + flex-direction: column; + padding: 0 0 24px; + .cts { + color: var(--Text-1, #939499); + + font-family: $font-family-regular; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + &.bold { + color: var(--Text-1, #211f24); + font-family: $font-family-medium; + } + } + .card-item { + border: 1px solid transparent; + &:not(:last-child) { + margin-bottom: 12px; + } + &.active { + border-color: #6d4cfe; + background-color: #f0edff; + } + } + } +} diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue b/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue index ae43424..cc047d7 100644 --- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue +++ b/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue @@ -43,22 +43,19 @@ export default { type: Object, default: {}, }, - checkLoading: { - type: Boolean, - default: false, - }, }, - emits: ['update:modelValue', 'filesChange', 'againCheck', 'imageClick'], + emits: ['update:modelValue', 'filesChange', 'selectImage'], setup(props, { emit, expose }) { const activeTab = ref(enumTab.TEXT); const aiCheckLoading = ref(false); const formRef = ref(null); const uploadRef = ref(null); const modules = [Navigation]; + const checkLoading = ref(false); const isTextTab = computed(() => activeTab.value === enumTab.TEXT); - const onAiCheck = () => { + const onAiReplace = () => { if (aiCheckLoading.value) return; aiCheckLoading.value = true; @@ -66,16 +63,16 @@ export default { aiCheckLoading.value = false; }, 2000); }; - const onAgainCheck = () => { - if (isTextTab.value) { - emit('againCheck'); - } else { - if (!props.modelValue.files?.length) { - AMessage.warning('请先上传需审核图片'); - return; - } - emit('againCheck'); + + const onCheck = () => { + if (!isTextTab.value && !props.modelValue.files?.length) { + AMessage.warning('请先上传需审核图片'); + return; } + checkLoading.value = true; + setTimeout(() => { + checkLoading.value = false; + }, 2000); }; const onReplaceImage = () => { uploadRef.value?.upload?.(); @@ -94,26 +91,28 @@ export default { }); }); }; - const resetForm = () => { + const reset = () => { formRef.value?.resetFields?.(); formRef.value?.clearValidate?.(); + aiCheckLoading.value = false; + checkLoading.value = false; }; const getFileExtension = (filename) => { const match = filename.match(/\.([^.]+)$/); return match ? match[1].toLowerCase() : ''; }; const handleSelectImage = (item) => { - emit('imageClick', item); + emit('selectImage', item); }; - const renderUpload = (UploadBtn) => { + const renderUpload = (UploadBtn, action = 'upload') => { return ( uploadImage(option, action)} accept=".jpg,.jpeg,.png,.gif,.webp" show-file-list={false} multiple @@ -125,16 +124,11 @@ export default { ); }; - const uploadImage = async (option) => { + const uploadImage = async (option, action = 'upload') => { const { fileItem: { file }, } = option; - // 验证文件数量 - if (formData.value.files?.length >= 18) { - AMessage.error('最多只能上传18张图片！'); - return; - } const { name, size, type } = file; const response = await getImagePreSignedUrl({ suffix: getFileExtension(name) }); const { file_name, upload_url, file_url } = response?.data; @@ -144,25 +138,34 @@ export default { headers: { 'Content-Type': type }, }); - const _files = [ - ...props.modelValue.files, - { - url: file_url, - name: file_name, - size, - }, - ]; - emits('filesChange', _files); + const _file = { + url: file_url, + name: file_name, + size, + }; + + const _newFiles = + action === 'replaceImage' + ? props.modelValue.files.map((item) => { + if (item.url === props.selectedImageInfo.url) { + return _file; + } + return item; + }) + : [...props.modelValue.files, _file]; + + emit('filesChange', _newFiles); + emit('selectImage', _file); }; const renderFooterRow = () => { return ( <> - {isTextTab.value ? ( - , + 'replaceImage', )} )} @@ -197,7 +201,7 @@ export default { size="large" maxLength={30} show-word-limit - disabled={props.checkLoading} + disabled={checkLoading.value} /> @@ -208,7 +212,7 @@ export default { show-word-limit maxLength={1000} show-word-limit - disabled={props.checkLoading} + disabled={checkLoading.value} /> @@ -223,6 +227,7 @@ export default { src={props.selectedImageInfo.url} width={370} height={370} + preview={false} class="flex items-center justify-center mb-16px" fit="contain" v-slots={{ @@ -297,42 +302,42 @@ export default { }; const renderRightBox = () => { - if (isEmpty(props.checkResult)) { - return ( -
-

审核结果

-
- {RESULT_LIST.map((item, index) => ( -
- 30 - {item.label} -
- ))} -
-
-
- AI 审核建议 - -
-
- - - {isTextTab.value ? '恭喜，您的文案中没有检测出违禁词' : '恭喜，您的图片中没有检测出违禁内容'} - -
-
-
- ); - } - - if (props.checkLoading) { + if (checkLoading.value) { return (

审核结果

- +
); } else { + if (isEmpty(props.checkResult)) { + return ( +
+

审核结果

+
+ {RESULT_LIST.map((item, index) => ( +
+ 30 + {item.label} +
+ ))} +
+
+
+ AI 审核建议 + +
+
+ + + {isTextTab.value ? '恭喜，您的文案中没有检测出违禁词' : '恭喜，您的图片中没有检测出违禁内容'} + +
+
+
+ ); + } + return (

审核结果

@@ -377,7 +382,7 @@ export default { expose({ validate, - resetForm, + reset, }); const descs = [ diff --git a/src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue b/src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue index 4e7765c..a00b885 100644 --- a/src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue +++ b/src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue @@ -59,6 +59,7 @@ export default { { - contentCardRef.value.resetForm(); + contentCardRef.value.reset(); isSaved.value = false; submitLoading.value = false; - checkLoading.value = false; checkResult.value = {}; selectCardInfo.value = cloneDeep(item); selectedImageInfo.value = cloneDeep(item.files?.[0] ?? {}); @@ -57,7 +57,7 @@ export default { } }; - const onImageClick = (item) => { + const onSelectImage = (item) => { selectedImageInfo.value = cloneDeep(item); }; @@ -65,6 +65,7 @@ export default { const { code, data } = await getWorkAuditsBatchDetail({ ids: workIds.value }); if (code === 200) { dataSource.value = data ?? []; + remoteDataSource.value = cloneDeep(data ?? []); selectCardInfo.value = cloneDeep(data?.[0] ?? {}); selectedImageInfo.value = data?.[0].files?.[0] ?? {}; } @@ -72,9 +73,8 @@ export default { const isSelectCardModified = () => { return new Promise((resolve) => { - const _a = dataSource.value.find((item) => item.id === selectCardInfo.value); - const _b = remoteDataSource.value.find((item) => item.id === selectCardInfo.value); - resolve(!isEqual(_a, _b) && !isSaved.value); + const _item = remoteDataSource.value.find((item) => item.id === selectCardInfo.value.id); + resolve(!isEqual(selectCardInfo.value, _item) && !isSaved.value); }); }; @@ -87,6 +87,10 @@ export default { } }; const onSave = async () => { + if (!selectCardInfo.value.title) { + AMessage.warning('标题不能为空'); + } + contentCardRef.value?.validate().then(async () => { const { code, data } = await putWorkAuditsUpdate(selectCardInfo.value); if (code === 200) { @@ -123,12 +127,6 @@ export default { const onFilesChange = (files) => { selectCardInfo.value.files = cloneDeep(files); }; - const onAgainCheck = () => { - checkLoading.value = true; - setTimeout(() => { - checkLoading.value = false; - }, 2000); - }; const renderFooterRow = () => { return ( <> @@ -155,13 +153,23 @@ export default { return () => ( <>
-
+
内容稿件审核 {`${workIds.value.length > 0 ? '批量' : ''}审核内容稿件`}
+ {dataSource.value.length > 1 && ( +
checkListDrawerRef.value.open(dataSource.value, selectCardInfo.value)} + > + + 审核列表 +
+ )} +
@@ -171,10 +179,8 @@ export default { selectCardInfo={selectCardInfo.value} checkResult={checkResult.value} onFilesChange={onFilesChange} - onAgainCheck={onAgainCheck} - checkLoading={checkLoading.value} selectedImageInfo={selectedImageInfo.value} - onImageClick={onImageClick} + onSelectImage={onSelectImage} />
@@ -185,6 +191,7 @@ export default { + ); }, diff --git a/src/views/creative-generation-workshop/manuscript/check/style.scss b/src/views/creative-generation-workshop/manuscript/check/style.scss index e4727a2..2a6deb1 100644 --- a/src/views/creative-generation-workshop/manuscript/check/style.scss +++ b/src/views/creative-generation-workshop/manuscript/check/style.scss @@ -13,6 +13,21 @@ $footer-height: 68px; font-family: $font-family-medium; } } + .check-list-icon { + // width: 92px; + cursor: pointer; + height: 36px; + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + border-radius: 30px 0 0 30px; + border: 1px solid var(--Border-1, #d7d7d9); + background: #fff; + position: absolute; + right: 0; + top: calc($navbar-height + 8px); + } } .footer-row { position: fixed; @@ -21,4 +36,4 @@ $footer-height: 68px; width: calc(100% - $sidebar-width); border-top: 1px solid #e6e6e8; height: $footer-height; -} \ No newline at end of file +}