成品库和原料库
This commit is contained in:
lq
@ -81,7 +81,7 @@
|
||||
<div class="font-size-12px text-[#999999]">（必填）</div>
|
||||
</div>
|
||||
<div class="form-section material-section">
|
||||
<Button @click="handleAddMaterial" class="add-material-btn">
|
||||
<Button @click="handleAddContent" class="add-material-btn">
|
||||
<template #icon>
|
||||
<icon-plus size="16" class="mr-8px" />
|
||||
</template>
|
||||
@ -192,6 +192,101 @@
|
||||
<div class="flex items-center">
|
||||
<div class="color-#737478 font-size-14px">已选择：</div>
|
||||
<div class="color-#737478 font-size-14px">{{ choseText }}</div>
|
||||
<div v-for="item in choseImgArray" :key="item.id" class="ml-16px">
|
||||
<img :src="item.cover" alt="" class="w-44px h-44px border-rounded-8px bg-#F0EDFF" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button @click="handleCancel">取消</Button>
|
||||
<Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
<a-drawer
|
||||
title="成品库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
v-model:visible="showDrawer3"
|
||||
@after-visible-change="showDriwerChange"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns2"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #cover="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.cover ? record.cover : icon4"
|
||||
alt=""
|
||||
class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center">
|
||||
<div>{{ record.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #uploader="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ record.last_modifier.mobile }}
|
||||
</div>
|
||||
</template>
|
||||
<template #audit_status="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ getStatus(record.audit_status) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #last_modified_at="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ record.created_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<!-- 分页控件 -->
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="color-#737478 font-size-14px">已选择：</div>
|
||||
<div class="color-#737478 font-size-14px">{{ choseText }}</div>
|
||||
<div v-for="item in choseImgArray" :key="item.id" class="ml-16px">
|
||||
<img :src="item.cover ? item.cover : icon4" class="w-44px h-44px border-rounded-8px bg-#F0EDFF" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Button @click="handleCancel">取消</Button>
|
||||
@ -204,6 +299,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getWorksPage, getWriterLinksGenerate } from '@/api/all/generationWorkshop.ts';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import aiIcon from '@/assets/img/media-account/icon-AI.png';
|
||||
import { Checkbox, Button, Space, Pagination, notification, DatePicker, TimePicker, Table } from 'ant-design-vue';
|
||||
@ -212,6 +308,10 @@ import dayjs from 'dayjs';
|
||||
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
|
||||
// 工具引入
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
|
||||
import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
|
||||
import icon4 from '@/assets/img/error-img.png';
|
||||
const choseText = ref('');
|
||||
const columns = ref([
|
||||
{
|
||||
@ -240,6 +340,57 @@ const columns = ref([
|
||||
},
|
||||
]);
|
||||
|
||||
const columns2 = ref([
|
||||
{
|
||||
title: '图片/视频',
|
||||
dataIndex: 'cover',
|
||||
width: 200,
|
||||
slots: { customRender: 'cover' },
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
slots: { customRender: 'name' },
|
||||
},
|
||||
{
|
||||
title: '稿件类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
slots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '审核状态',
|
||||
dataIndex: 'audit_status',
|
||||
width: 100,
|
||||
slots: { customRender: 'audit_status' },
|
||||
},
|
||||
{
|
||||
title: '最后修改时间',
|
||||
dataIndex: 'last_modified_at',
|
||||
width: 200,
|
||||
slots: { customRender: 'last_modified_at' },
|
||||
},
|
||||
{
|
||||
title: '上传人员',
|
||||
dataIndex: 'uploader',
|
||||
width: 200,
|
||||
slots: { customRender: 'uploader' },
|
||||
},
|
||||
]);
|
||||
|
||||
const handleSelect = (value) => {
|
||||
isActive.value = value;
|
||||
if (value == 'ai') {
|
||||
showDrawer3.value = false;
|
||||
handleSearch();
|
||||
} else {
|
||||
showDrawer2.value = false;
|
||||
handleSearchWork();
|
||||
}
|
||||
};
|
||||
|
||||
const choseImgArray = ref([]);
|
||||
// 表格分页逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
@ -252,6 +403,10 @@ watch(selectedRowKeys, (newVal) => {
|
||||
console.log(newVal);
|
||||
query.ids = newVal;
|
||||
const filteredData = materialData.value.filter((item) => newVal.includes(item.id));
|
||||
choseImgArray.value = materialData.value.filter(
|
||||
(item) => newVal.includes(item.id) && (item.type == 0 || item.type == 1),
|
||||
);
|
||||
console.log('+++++', choseImgArray.value);
|
||||
choseText.value = '';
|
||||
const typeCount = filteredData.reduce((acc, item) => {
|
||||
acc[item.type] = (acc[item.type] || 0) + 1;
|
||||
@ -285,11 +440,22 @@ const materialData = ref([]);
|
||||
const handleSearch = async () => {
|
||||
const res = await getRawMaterialsPage(query);
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page == 1) {
|
||||
materialData.value = [];
|
||||
}
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
};
|
||||
|
||||
const handleSearchWork = async () => {
|
||||
const res = await getWorksPage(query);
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page == 1) {
|
||||
materialData.value = [];
|
||||
}
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
};
|
||||
|
||||
const isActive = ref('ai');
|
||||
|
||||
// 发布类型选项
|
||||
const publishOptions = ref([
|
||||
{ value: 'immediate', label: '立即发布' },
|
||||
@ -299,6 +465,27 @@ const publishOptions = ref([
|
||||
// 发布类型，默认为立即发布
|
||||
const publishType = ref('immediate');
|
||||
|
||||
const getStatus = (status) => {
|
||||
// 处理字符串和数字类型的type值
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '全部';
|
||||
case RawMaterialType.Video:
|
||||
case '1':
|
||||
case 1:
|
||||
return '待审核';
|
||||
case RawMaterialType.Text:
|
||||
case '2':
|
||||
case 2:
|
||||
return '审核中';
|
||||
case RawMaterialType.Text:
|
||||
case '3':
|
||||
case 3:
|
||||
return '已通过';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
const getType = (type) => {
|
||||
// 处理字符串和数字类型的type值
|
||||
switch (type) {
|
||||
@ -340,6 +527,7 @@ const localQuery = ref({
|
||||
});
|
||||
const showDriwer = ref(false);
|
||||
const showDrawer2 = ref(false);
|
||||
const showDrawer3 = ref(false);
|
||||
const emit = defineEmits(['filter-change']);
|
||||
const isTiming = ref(true);
|
||||
const currentDate = ref(new Date());
|
||||
@ -353,15 +541,15 @@ watch(showDriwer, (newVal) => {
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
const handleTabSelect = (value) => {
|
||||
isActive.value = value;
|
||||
};
|
||||
const handleAddMaterial = () => {
|
||||
showDrawer2.value = true;
|
||||
};
|
||||
const handleAddContent = () => {
|
||||
showDrawer3.value = true;
|
||||
};
|
||||
const handleDateChange = (date) => {};
|
||||
// 暴露方法给父组件
|
||||
const showDrawer = (accountInfo = null) => {
|
||||
|
||||
Reference in New Issue
Block a user