feat: 内容稿件上传、编辑
This commit is contained in:
rd
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="确认提示" width="480px" @close="onClose">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认取消上传这 {{ num }} 个文件吗？此操作不可恢复。</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button size="medium" @click="onClose">继续编辑</a-button>
|
||||
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">确认取消</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const router = useRouter();
|
||||
const visible = ref(false);
|
||||
const num = ref('');
|
||||
|
||||
const onClose = () => {
|
||||
num.value = '';
|
||||
visible.value = false;
|
||||
};
|
||||
const onConfirm = () => {
|
||||
onClose();
|
||||
router.push({ name: 'ManuscriptList' });
|
||||
};
|
||||
|
||||
const open = (manusNum) => {
|
||||
num.value = manusNum;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -0,0 +1,225 @@
|
||||
<script lang="jsx">
|
||||
import { Button, Message as AMessage } from '@arco-design/web-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import EditForm from '../components/edit-form';
|
||||
import CancelUploadModal from './cancel-upload-modal.vue';
|
||||
import UploadSuccessModal from './upload-success-modal.vue';
|
||||
|
||||
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
|
||||
|
||||
import icon1 from '@/assets/img/creative-generation-workshop/icon-photo.png';
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-video.png';
|
||||
|
||||
const generateMockData = (count = 20) =>
|
||||
Array.from({ length: count }, (_, i) => ({
|
||||
id: `${i + 1}`,
|
||||
title: '',
|
||||
desc: '',
|
||||
content: '挖到宝了！这个平价好物让我素颜出门都自信✨挖到宝了！这个平价好物让我素颜出门都自信✨',
|
||||
type: 1,
|
||||
project_ids: [],
|
||||
files: [],
|
||||
}));
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditForm,
|
||||
},
|
||||
setup(props, { emit, expose }) {
|
||||
const formRef = ref(null);
|
||||
const cancelUploadModal = ref(null);
|
||||
const uploadSuccessModal = ref(null);
|
||||
const dataSource = ref([]);
|
||||
const selectCardInfo = ref({});
|
||||
const errorDataCards = ref([]);
|
||||
const uploadLoading = ref(false);
|
||||
|
||||
const onCancel = () => {
|
||||
cancelUploadModal.value?.open(dataSource.value.length);
|
||||
};
|
||||
|
||||
const validateDataSource = () => {
|
||||
return new Promise((resolve) => {
|
||||
dataSource.value.forEach((item) => {
|
||||
if (!item.title?.trim()) {
|
||||
errorDataCards.value.push(item);
|
||||
}
|
||||
});
|
||||
if (!errorDataCards.value.length) {
|
||||
resolve();
|
||||
}
|
||||
|
||||
if (errorDataCards.value.length > 0) {
|
||||
AMessage.error(`有 ${errorDataCards.value.length} 个必填信息未填写，请检查`);
|
||||
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById(`card-${errorDataCards.value[0]?.id}`);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => {
|
||||
validateDataSource().then((res) => {
|
||||
console.log('success');
|
||||
uploadSuccessModal.value?.open(dataSource.value);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
errorDataCards.value.push(err);
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmitAndCheck = () => {
|
||||
console.log('onSubmitAndCheck');
|
||||
};
|
||||
|
||||
const handleReValidate = () => {
|
||||
formRef.value?.validate().then(() => {
|
||||
deleteErrorCard(selectCardInfo.value);
|
||||
});
|
||||
};
|
||||
const onselect = (item) => {
|
||||
selectCardInfo.value = item;
|
||||
};
|
||||
|
||||
const deleteErrorCard = (item) => {
|
||||
const errorIndex = errorDataCards.value.findIndex((v) => v.id === item.id);
|
||||
errorIndex > -1 && errorDataCards.value.splice(errorIndex, 1);
|
||||
};
|
||||
|
||||
const onDelete = (e, item, index) => {
|
||||
e.stopPropagation();
|
||||
dataSource.value.splice(index, 1);
|
||||
deleteErrorCard(item);
|
||||
|
||||
if (item.id === selectCardInfo.value.id) {
|
||||
if (dataSource.value.length) {
|
||||
const _target = dataSource.value[0] ?? {};
|
||||
selectCardInfo.value = _target;
|
||||
} else {
|
||||
selectCardInfo.value = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const renderFooterRow = () => {
|
||||
if (dataSource.value.length > 1) {
|
||||
return (
|
||||
<>
|
||||
<Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
|
||||
取消上传
|
||||
</Button>
|
||||
<Button type="primary" size="medium" onClick={onSubmit} loading={uploadLoading.value}>
|
||||
{uploadLoading.value ? '批量上传' : '批量上传'}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
|
||||
取消上传
|
||||
</Button>
|
||||
<Button size="medium" type="outline" onClick={onSubmit} class="mr-12px">
|
||||
上传
|
||||
</Button>
|
||||
<Button type="primary" size="medium" onClick={onSubmitAndCheck} loading={uploadLoading.value}>
|
||||
上传并审核
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
const getData = () => {
|
||||
dataSource.value = generateMockData();
|
||||
selectCardInfo.value = dataSource.value[0] ?? {};
|
||||
};
|
||||
const getCardClass = (item) => {
|
||||
if (selectCardInfo.value.id === item.id) {
|
||||
return '!border-#6D4CFE !bg-#F0EDFF';
|
||||
}
|
||||
if (errorDataCards.value.find((v) => v.id === item.id)) {
|
||||
return '!border-#F64B31';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<div class="manuscript-upload-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid flex">
|
||||
<div class="left flex-1 overflow-y-auto p-24px">
|
||||
<EditForm ref={formRef} v-model={selectCardInfo.value} onReValidate={handleReValidate} />
|
||||
</div>
|
||||
{dataSource.value.length > 1 && (
|
||||
<div class="right pt-24px pb-12px flex flex-col">
|
||||
<div class="title flex items-center px-24px">
|
||||
<div class="w-3px h-16px bg-#6D4CFE rounded-2px mr-8px"></div>
|
||||
<p class="cts bold !color-#211F24 !text-16px !lh-24px mr-8px">上传内容稿件列表</p>
|
||||
<p class="cts">{`共${dataSource.value.length}个`}</p>
|
||||
</div>
|
||||
<div class="flex-1 px-24px overflow-y-auto pt-24px">
|
||||
{dataSource.value.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
id={`card-${item.id}`}
|
||||
class={`group relative mb-12px px-8px py-12px flex flex-col rounded-8px bg-#F7F8FA border-1px border-solid border-transparent transition-all duration-300 cursor-pointer hover:bg-#E6E6E8 ${getCardClass(
|
||||
item,
|
||||
)}`}
|
||||
onClick={() => onselect(item)}
|
||||
>
|
||||
<icon-close-circle-fill
|
||||
size={16}
|
||||
class="absolute top--8px right--8px color-#737478 hover:color-#211F24 hidden group-hover:block"
|
||||
onClick={(e) => onDelete(e, item, index)}
|
||||
/>
|
||||
<TextOverTips
|
||||
context={item.content}
|
||||
line={1}
|
||||
class={`cts !color-#211F24 mb-8px ${selectCardInfo.value.id === item.id ? 'bold' : ''}`}
|
||||
/>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center ">
|
||||
<img
|
||||
src={item.type === EnumManuscriptType.Image ? icon1 : icon2}
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span
|
||||
class={`cts ${item.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'}`}
|
||||
>
|
||||
{item.type === EnumManuscriptType.Image ? '图文' : '视频'}
|
||||
</span>
|
||||
</div>
|
||||
{errorDataCards.value.find((v) => v.id === item.id) && (
|
||||
<p class="cts !color-#F64B31">必填项未填</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">{renderFooterRow()}</div>
|
||||
|
||||
<CancelUploadModal ref={cancelUploadModal} />
|
||||
<UploadSuccessModal ref={uploadSuccessModal} />
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
$footer-height: 68px;
|
||||
.manuscript-upload-wrap {
|
||||
height: calc(100% - 72px);
|
||||
.cts {
|
||||
color: #939499;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&.bold {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
border-left: 1px solid var(--Border-2, #e6e6e8);
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.footer-row {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: $sidebar-width;
|
||||
width: calc(100% - $sidebar-width);
|
||||
border-top: 1px solid #e6e6e8;
|
||||
height: $footer-height;
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="提示" width="480px" @close="onClose" modal-class="upload-success11-modal">
|
||||
<div class="flex items-center flex-col justify-center">
|
||||
<img :src="icon1" width="80" height="80" class="mb-16px" />
|
||||
<span class="text-18px lh-26px font-400 color-#211F24 md">上传成功</span>
|
||||
<p class="text-14px lh-22px font-400 color-#737478 ld">为确保内容合规，建议您立即进行审核</p>
|
||||
<p class="text-14px lh-22px font-400 color-#737478 ld">检测是否存在违规内容</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button size="medium" @click="onBack">回到列表</a-button>
|
||||
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">批量审核</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-feedback-success.png';
|
||||
|
||||
const router = useRouter();
|
||||
const visible = ref(false);
|
||||
const data = ref([]);
|
||||
|
||||
const onClose = () => {
|
||||
data.value = [];
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
onClose();
|
||||
router.push({ name: 'ManuscriptList' });
|
||||
};
|
||||
const onConfirm = () => {
|
||||
onClose();
|
||||
console.log('跳转至「内容稿件审核」菜单tab，进入批量审核稿件页面');
|
||||
router.push({ name: 'ManuscriptCheck' });
|
||||
};
|
||||
|
||||
const open = (dataSource) => {
|
||||
data.value = dataSource;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.upload-success11-modal {
|
||||
.arco-modal-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
.md {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
.ld {
|
||||
font-family: $font-family-regular;
|
||||
}
|
||||
.arco-modal-footer {
|
||||
border-top: none;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user