原料库成品库
This commit is contained in:
lq
@ -56,12 +56,13 @@
|
||||
placeholder="描述你想让AI帮你生成的内容。未填写时，AI 会参考账号历史内容的题材与行业方向，结合当下话题，自动生成文案和图片后发布"
|
||||
class="task-description font-size-12px"
|
||||
:rows="5"
|
||||
v-model="taskDescription"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 素材添加区域 -->
|
||||
<div class="form-section material-section">
|
||||
<div v-if="hasChose" class="flex items-center"></div>
|
||||
<div v-if="hasChoseMaterial" class="flex items-center"></div>
|
||||
<div v-else class="flex flex-col items-center">
|
||||
<Button class="add-material-btn" @click="handleAddMaterial">
|
||||
<template #icon>
|
||||
@ -129,343 +130,55 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="isActive == 'ai'">
|
||||
<a-drawer
|
||||
title="原料库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
v-model:visible="showDrawer2"
|
||||
@after-visible-change="showDriwerChange"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="record.cover" class="w-64px h-64px border-rounded-8px bg-#F0EDFF" />
|
||||
<div class="flex flex-col ml-8px">
|
||||
<div>{{ record.name }}</div>
|
||||
<div class="text-#999 text-12px">序号：{{ record.uid }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ getType(record.type) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #from="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ getFrom(record.type) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #create_at="{ record }">
|
||||
<div class="flex items-center">
|
||||
{{ record.created_at ? dayjs(record.created_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" 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>
|
||||
</div>
|
||||
<div v-show="isActive == 'chose'">
|
||||
<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>
|
||||
<Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</div>
|
||||
|
||||
<!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
|
||||
<RawMaterialDrawer
|
||||
:visible="showDrawer2"
|
||||
@update:visible="val => showDrawer2 = val"
|
||||
:query="materialQuery"
|
||||
@after-visible-change="handleMaterialDrawerVisibleChange"
|
||||
@confirm="handleMaterialConfirm"
|
||||
@cancel="handleMaterialCancel"
|
||||
/>
|
||||
|
||||
<!-- 成品库子组件：使用:visible和@update:visible替代v-model -->
|
||||
<FinishedProductDrawer
|
||||
:visible="showDrawer3"
|
||||
@update:visible="val => showDrawer3 = val"
|
||||
:query="productQuery"
|
||||
@after-visible-change="handleProductDrawerVisibleChange"
|
||||
@confirm="handleProductConfirm"
|
||||
@cancel="handleProductCancel"
|
||||
/>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getWorksPage, getWriterLinksGenerate } from '@/api/all/generationWorkshop.ts';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { getWorksPage } from '@/api/all/generationWorkshop.ts';
|
||||
import { ref, reactive, watch, 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';
|
||||
import { Button, DatePicker, TimePicker } from 'ant-design-vue';
|
||||
import { TABS_LIST, ORIGIN_LIST, RawMaterialType } from '@/views/material-center/components/raw-material/constants';
|
||||
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';
|
||||
// 引入子组件
|
||||
import RawMaterialDrawer from './raw-material-drawer.vue';
|
||||
import FinishedProductDrawer from './finished-product-drawer.vue';
|
||||
|
||||
// 状态管理
|
||||
const choseText = ref('');
|
||||
const columns = ref([
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
slots: { customRender: 'name' },
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
slots: { customRender: 'type' },
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'from',
|
||||
width: 100,
|
||||
slots: { customRender: 'from' },
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 200,
|
||||
slots: { customRender: 'create_at' },
|
||||
},
|
||||
]);
|
||||
|
||||
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 handleAddMaterial = () => {
|
||||
handleSearch();
|
||||
showDrawer2.value = true;
|
||||
};
|
||||
const handleAddContent = () => {
|
||||
handleSearchWork();
|
||||
showDrawer3.value = true;
|
||||
};
|
||||
const handleSelect = (value) => {
|
||||
isActive.value = value;
|
||||
if (value == 'ai') {
|
||||
showDrawer3.value = false;
|
||||
} else {
|
||||
showDrawer2.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const choseImgArray = ref([]);
|
||||
// 表格分页逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
onPageChange: () => handleSearch(),
|
||||
onPageSizeChange: () => handleSearch(),
|
||||
});
|
||||
|
||||
// 监听选中项变化
|
||||
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;
|
||||
return acc;
|
||||
}, {});
|
||||
console.log('+++++', typeCount);
|
||||
Object.entries(typeCount).forEach(([type, count]) => {
|
||||
console.log('++++tyype', type, getType(type));
|
||||
console.log(`${getType(type)}: ${count}个`);
|
||||
choseText.value += `${getType(type)}: ${count}个 `;
|
||||
});
|
||||
});
|
||||
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
});
|
||||
// 查询参数
|
||||
const query = reactive({
|
||||
page: pageInfo.value.page,
|
||||
page_size: pageInfo.value.page_size,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
top_execution_time: undefined,
|
||||
});
|
||||
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 taskDescription = ref('');
|
||||
const hasChoseMaterial = ref(false);
|
||||
const isActive = ref('ai');
|
||||
const showDriwer = ref(false);
|
||||
const showDrawer2 = ref(false);
|
||||
const showDrawer3 = ref(false);
|
||||
|
||||
// 发布类型选项
|
||||
const publishOptions = ref([
|
||||
{ value: 'immediate', label: '立即发布' },
|
||||
@ -475,109 +188,166 @@ 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) {
|
||||
case RawMaterialType.Image:
|
||||
case '0':
|
||||
case 0:
|
||||
return '图片';
|
||||
case RawMaterialType.Video:
|
||||
case '1':
|
||||
case 1:
|
||||
return '视频';
|
||||
case RawMaterialType.Text:
|
||||
case '2':
|
||||
case 2:
|
||||
return '文本';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
// 时间选择相关
|
||||
const currentDate = ref(new Date());
|
||||
const strValue = ref(dayjs().format('HH:mm'));
|
||||
|
||||
const getFrom = (type) => {
|
||||
switch (type) {
|
||||
case 0:
|
||||
return '本地上传';
|
||||
case 1:
|
||||
return 'AI生成';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
// 处理发布类型变化
|
||||
const handlePublishTypeChange = (value) => {
|
||||
publishType.value = value;
|
||||
};
|
||||
// 定义props和emit
|
||||
const props = defineProps({
|
||||
operators: Array,
|
||||
platformOptions: Array,
|
||||
accountList: Array,
|
||||
query: Object,
|
||||
});
|
||||
|
||||
// 本地筛选状态（保持上次选择）
|
||||
const localQuery = ref({
|
||||
accounts: props.query?.ids || [],
|
||||
});
|
||||
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());
|
||||
// 将时间选择器默认值设置为当前时间
|
||||
const strValue = ref(dayjs().format('HH:mm'));
|
||||
|
||||
// 监听抽屉显示状态，每次打开时更新时间为当前时间
|
||||
// 原料库查询参数
|
||||
const materialQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
top_execution_time: undefined,
|
||||
});
|
||||
|
||||
// 成品库查询参数
|
||||
const productQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
});
|
||||
|
||||
// 选中的素材数据
|
||||
const selectedMaterials = ref({
|
||||
keys: [],
|
||||
data: [],
|
||||
text: '',
|
||||
images: []
|
||||
});
|
||||
|
||||
const selectedProducts = ref({
|
||||
keys: [],
|
||||
data: [],
|
||||
text: '',
|
||||
images: []
|
||||
});
|
||||
|
||||
// 处理AI/成品库选择切换
|
||||
const handleSelect = (value) => {
|
||||
isActive.value = value;
|
||||
if (value === 'ai') {
|
||||
showDrawer3.value = false;
|
||||
} else {
|
||||
showDrawer2.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 打开原料库抽屉
|
||||
const handleAddMaterial = () => {
|
||||
materialQuery.page = 1;
|
||||
materialQuery.page_size = 10;
|
||||
showDrawer2.value = true;
|
||||
};
|
||||
|
||||
// 打开成品库抽屉
|
||||
const handleAddContent = () => {
|
||||
productQuery.page = 1;
|
||||
productQuery.page_size = 10;
|
||||
showDrawer3.value = true;
|
||||
};
|
||||
|
||||
// 处理原料库选择确认
|
||||
const handleMaterialConfirm = (result) => {
|
||||
selectedMaterials.value = {
|
||||
keys: result.selectedKeys,
|
||||
data: result.selectedData,
|
||||
text: result.choseText,
|
||||
images: result.choseImgArray
|
||||
};
|
||||
hasChoseMaterial.value = result.selectedKeys.length > 0;
|
||||
};
|
||||
|
||||
// 处理原料库取消
|
||||
const handleMaterialCancel = () => {
|
||||
// 取消逻辑
|
||||
};
|
||||
|
||||
// 处理成品库选择确认
|
||||
const handleProductConfirm = (result) => {
|
||||
selectedProducts.value = {
|
||||
keys: result.selectedKeys,
|
||||
data: result.selectedData,
|
||||
text: result.choseText,
|
||||
images: result.choseImgArray
|
||||
};
|
||||
};
|
||||
|
||||
// 处理成品库取消
|
||||
const handleProductCancel = () => {
|
||||
// 取消逻辑
|
||||
};
|
||||
|
||||
// 处理发布类型变化
|
||||
const handlePublishTypeChange = (value) => {
|
||||
publishType.value = value;
|
||||
};
|
||||
|
||||
// 处理日期变化
|
||||
const handleDateChange = (date) => {
|
||||
// 日期处理逻辑
|
||||
};
|
||||
|
||||
// 抽屉显示状态变化
|
||||
const showDriwerChange = (visible: boolean) => {
|
||||
console.log('Main Drawer visible: ', visible);
|
||||
};
|
||||
|
||||
// 原料库抽屉显示状态变化
|
||||
const handleMaterialDrawerVisibleChange = (visible: boolean) => {
|
||||
console.log('Raw Material Drawer visible: ', visible);
|
||||
};
|
||||
|
||||
// 成品库抽屉显示状态变化
|
||||
const handleProductDrawerVisibleChange = (visible: boolean) => {
|
||||
console.log('Finished Product Drawer visible: ', visible);
|
||||
};
|
||||
|
||||
// 处理筛选条件变化
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
emit('filter-change', {
|
||||
accounts: localQuery.value.accounts,
|
||||
});
|
||||
};
|
||||
|
||||
// 监听主抽屉显示状态，每次打开时更新时间为当前时间
|
||||
watch(showDriwer, (newVal) => {
|
||||
if (newVal) {
|
||||
strValue.value = dayjs().format('HH:mm');
|
||||
}
|
||||
});
|
||||
|
||||
const handleDateChange = (date) => {};
|
||||
// 暴露方法给父组件
|
||||
const showDrawer = (accountInfo = null) => {
|
||||
showDriwer.value = true;
|
||||
// 如果传入了账号信息，则设置为默认选中
|
||||
if (accountInfo && accountInfo.id) {
|
||||
// 使用 nextTick 确保在 DOM 更新后设置默认值
|
||||
nextTick(() => {
|
||||
localQuery.value.accounts = [accountInfo.name];
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const showDriwerChange = (visible: boolean) => {
|
||||
console.log('Drawer visible: ', visible);
|
||||
};
|
||||
// 定义事件发射器
|
||||
const emit = defineEmits(['filter-change', 'create-task']);
|
||||
|
||||
// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
|
||||
const handleChange = (field, value) => {
|
||||
localQuery.value[field] = value;
|
||||
// 直接触发筛选变更，不需要确认按钮
|
||||
emit('filter-change', {
|
||||
accounts: localQuery.value.accounts,
|
||||
});
|
||||
};
|
||||
|
||||
// 使用defineExpose暴露方法
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
showDrawer,
|
||||
});
|
||||
@ -591,7 +361,6 @@ defineExpose({
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 抽屉左侧圆角样式 */
|
||||
.arco-drawer {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-bottom-left-radius: 8px !important;
|
||||
@ -611,40 +380,6 @@ defineExpose({
|
||||
border: #722ed1 1px solid !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.tab-group {
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ai-tab .ai-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #722ed1;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -678,7 +413,7 @@ defineExpose({
|
||||
height: 126px;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important; /* 去除默认的聚焦轮廓 */
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.task-description::placeholder {
|
||||
@ -702,34 +437,12 @@ defineExpose({
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #ff7d00;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.material-hint {
|
||||
color: #939499;
|
||||
font-size: 14px;
|
||||
margin: 0 40px;
|
||||
}
|
||||
|
||||
.size-selector {
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.size-tag {
|
||||
font-size: 14px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.publish-type-select :deep(.ant-select-selection-item) {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@ -737,22 +450,10 @@ defineExpose({
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.publish-select {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.line {
|
||||
background-color: #e6e6e8;
|
||||
width: 382px;
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
/* 分页样式 */
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="成品库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
:visible="visible"
|
||||
@after-visible-change="onAfterVisibleChange"
|
||||
@close="handleClose"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<!-- 成品库表格 -->
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns"
|
||||
: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">{{ record.title }}</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.last_modified_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div 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"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
|
||||
import { Table, Button, Pagination } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import { getWorksPage } from '@/api/all/generationWorkshop.ts';
|
||||
// 引入图片资源
|
||||
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';
|
||||
|
||||
// 定义Props
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
keyword: '',
|
||||
audit_status: undefined,
|
||||
type: undefined,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
// 定义Emits
|
||||
const emit = defineEmits(['update:visible', 'after-visible-change', 'confirm', 'cancel']);
|
||||
|
||||
// 内部状态管理
|
||||
const materialData = ref([]);
|
||||
const choseText = ref('');
|
||||
const choseImgArray = ref([]);
|
||||
|
||||
// 表格列配置
|
||||
const columns = 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' } },
|
||||
]);
|
||||
|
||||
// 1. 先定义数据获取函数，确保使用最新的query参数
|
||||
const fetchProductData = async () => {
|
||||
try {
|
||||
// 使用主组件传递的最新查询参数
|
||||
const params = { ...props.query };
|
||||
console.log('成品库请求参数:', params); // 调试用
|
||||
|
||||
const res = await getWorksPage(params);
|
||||
materialData.value = [];
|
||||
pageInfo.value.total = res.data.total;
|
||||
if (pageInfo.value.page === 1) {
|
||||
materialData.value = res.data.data;
|
||||
} else {
|
||||
materialData.value = [...materialData.value, ...res.data.data];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取成品库数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 2. 初始化表格选择逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
onPageChange: fetchProductData,
|
||||
onPageSizeChange: fetchProductData,
|
||||
});
|
||||
|
||||
// 监听query参数变化，当主组件传递的参数变化时重新请求数据
|
||||
watchEffect(() => {
|
||||
if (props.visible) {
|
||||
console.log('成品库查询参数变化，重新加载数据');
|
||||
fetchProductData();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听选中项变化
|
||||
watch(selectedRowKeys, (newKeys) => {
|
||||
const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
|
||||
|
||||
// 统计各类型数量
|
||||
const typeCount = filteredData.reduce((acc, item) => {
|
||||
const typeKey = item.type === EnumManuscriptType.Image ? 'image' : 'video';
|
||||
acc[typeKey] = (acc[typeKey] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// 生成选中文本
|
||||
choseText.value = [];
|
||||
if (typeCount.image) choseText.value.push(`图文: ${typeCount.image}个`);
|
||||
if (typeCount.video) choseText.value.push(`视频: ${typeCount.video}个`);
|
||||
choseText.value = choseText.value.join(' ');
|
||||
|
||||
// 筛选选中的内容用于预览
|
||||
choseImgArray.value = filteredData;
|
||||
});
|
||||
|
||||
// 格式化审核状态显示
|
||||
const getStatus = (status: number) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '待审核';
|
||||
case 1:
|
||||
return '审核中';
|
||||
case 2:
|
||||
return '已通过';
|
||||
case 3:
|
||||
return '已拒绝';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
// 抽屉显示状态变化处理
|
||||
const onAfterVisibleChange = (visible: boolean) => {
|
||||
emit('after-visible-change', visible);
|
||||
|
||||
if (visible) {
|
||||
// 当抽屉显示时，使用最新参数请求数据
|
||||
fetchProductData();
|
||||
} else {
|
||||
// 关闭时清空数据
|
||||
materialData.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
choseText.value = '';
|
||||
choseImgArray.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 抽屉关闭事件处理
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
// 取消按钮处理
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
emit('cancel');
|
||||
};
|
||||
|
||||
// 确定按钮处理
|
||||
const handleOk = () => {
|
||||
const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
|
||||
emit('confirm', {
|
||||
selectedKeys: selectedRowKeys.value,
|
||||
selectedData,
|
||||
choseText: choseText.value,
|
||||
choseImgArray: choseImgArray.value,
|
||||
});
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
title="原料库"
|
||||
cancel-text="取消"
|
||||
ok-text="确定"
|
||||
placement="right"
|
||||
:visible="visible"
|
||||
@after-visible-change="onAfterVisibleChange"
|
||||
@close="handleClose"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
width="904px"
|
||||
class="task-drawer"
|
||||
style="right: 481px"
|
||||
>
|
||||
<!-- 加载状态 -->
|
||||
<a-spin :spinning="loading" tip="加载中...">
|
||||
<!-- 表格区域 -->
|
||||
<div class="table-container">
|
||||
<Table
|
||||
:data-source="materialData"
|
||||
bordered
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<!-- 名称列自定义渲染 -->
|
||||
<template #cell:name="{ record }">
|
||||
<div class="name-cell">
|
||||
<img :src="getTypeIcon(record.type)" alt="类型图标" class="type-icon" />
|
||||
<span class="material-name">{{ record.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 类型列自定义渲染 -->
|
||||
<template #cell:type="{ record }">
|
||||
<span>{{ getType(record.type) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 来源列自定义渲染 -->
|
||||
<template #cell:from="{ record }">
|
||||
<span>{{ getFrom(record.from) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 上传时间列自定义渲染 -->
|
||||
<template #cell:created_at="{ record }">
|
||||
<span>{{ formatDate(record.created_at) }}</span>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div v-if="pageInfo.total > 0" class="pagination-container">
|
||||
<a-pagination
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
:total="pageInfo.total"
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handlePageSizeChange"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:show-total="(total) => `共 ${total} 条`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { Table, Button, Pagination } from 'ant-design-vue';
|
||||
// // 修正Arco Design图标导入方式
|
||||
// import { FileTextOutlined } from '@arco-design/web-vue/es/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import { RawMaterialType } from '@/views/material-center/components/raw-material/constants';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
|
||||
|
||||
// 引入类型图标
|
||||
import imgIcon from '@/assets/img/material/icon-image.png';
|
||||
import videoIcon from '@/assets/img/material/icon-video.png';
|
||||
import textIcon from '@/assets/img/material/icon-text.png';
|
||||
import unknownIcon from '@/assets/img/material/icon-unknown.png';
|
||||
|
||||
// 定义Props类型
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Object as () => {
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
platforms?: any;
|
||||
operator_ids?: any;
|
||||
ids?: any[];
|
||||
top_execution_time?: any;
|
||||
keyword?: string;
|
||||
type?: any;
|
||||
},
|
||||
required: true,
|
||||
default: () => ({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
top_execution_time: undefined,
|
||||
keyword: '',
|
||||
type: undefined,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
// 定义Emits类型
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'after-visible-change', visible: boolean): void;
|
||||
(
|
||||
e: 'confirm',
|
||||
data: {
|
||||
selectedKeys: string[];
|
||||
selectedData: any[];
|
||||
choseText: string;
|
||||
choseImgArray: any[];
|
||||
},
|
||||
): void;
|
||||
(e: 'cancel'): void;
|
||||
}>();
|
||||
|
||||
// 内部状态管理
|
||||
const materialData = ref<any[]>([]);
|
||||
const choseText = ref('');
|
||||
const choseImgArray = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const pageInfo = ref({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
// 数据获取函数
|
||||
const fetchMaterialData = async () => {
|
||||
if (!props.visible) return;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
const params = {
|
||||
...props.query,
|
||||
page: pageInfo.value.page,
|
||||
page_size: pageInfo.value.page_size,
|
||||
};
|
||||
|
||||
const res = await getRawMaterialsPage(params);
|
||||
console.log('获取原料库数据成功:', res);
|
||||
if (res?.code == 200) {
|
||||
materialData.value = res.data.data;
|
||||
pageInfo.value.total = res.data.total || 0;
|
||||
console.log('获取原料库数据成功++++:', res, materialData.value);
|
||||
} else {
|
||||
materialData.value = [];
|
||||
pageInfo.value.total = 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取原料库数据失败:', error);
|
||||
materialData.value = [];
|
||||
pageInfo.value.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref([
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'from',
|
||||
key: 'from',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 200,
|
||||
},
|
||||
]);
|
||||
|
||||
// 表格选择逻辑
|
||||
const { rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
|
||||
rowKey: 'id',
|
||||
});
|
||||
|
||||
// 分页处理函数
|
||||
const handlePageChange = (page: number) => {
|
||||
pageInfo.value.page = page;
|
||||
fetchMaterialData();
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
pageInfo.value.page = 1;
|
||||
pageInfo.value.page_size = size;
|
||||
fetchMaterialData();
|
||||
};
|
||||
|
||||
// 监听查询参数变化
|
||||
watch(
|
||||
() => props.query,
|
||||
(newQuery) => {
|
||||
if (props.visible) {
|
||||
pageInfo.value.page = 1;
|
||||
fetchMaterialData();
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 监听抽屉显示状态
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
emit('after-visible-change', visible);
|
||||
if (visible) {
|
||||
pageInfo.value.page = 1;
|
||||
fetchMaterialData();
|
||||
} else {
|
||||
materialData.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
choseText.value = '';
|
||||
choseImgArray.value = [];
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 监听选中项变化
|
||||
watch(selectedRowKeys, (newKeys) => {
|
||||
const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
|
||||
|
||||
const typeCount: Record<string, number> = {};
|
||||
filteredData.forEach((item) => {
|
||||
typeCount[item.type] = (typeCount[item.type] || 0) + 1;
|
||||
});
|
||||
|
||||
choseText.value = Object.entries(typeCount)
|
||||
.map(([type, count]) => `${getType(Number(type))}: ${count}个`)
|
||||
.join(' ');
|
||||
|
||||
choseImgArray.value = filteredData.filter((item) => [0, 1].includes(item.type));
|
||||
});
|
||||
|
||||
// 辅助函数
|
||||
const getType = (type: number): string => {
|
||||
const typeMap = {
|
||||
[RawMaterialType.Image]: '图片',
|
||||
[RawMaterialType.Video]: '视频',
|
||||
[RawMaterialType.Text]: '文本',
|
||||
};
|
||||
return typeMap[type] || '未知';
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: number): string => {
|
||||
const iconMap = {
|
||||
[RawMaterialType.Image]: imgIcon,
|
||||
[RawMaterialType.Video]: videoIcon,
|
||||
[RawMaterialType.Text]: textIcon,
|
||||
};
|
||||
return iconMap[type] || unknownIcon;
|
||||
};
|
||||
|
||||
const getFrom = (from: number): string => {
|
||||
const fromMap = {
|
||||
0: '本地上传',
|
||||
1: 'AI生成',
|
||||
};
|
||||
return fromMap[from] || '未知';
|
||||
};
|
||||
|
||||
const formatDate = (dateString?: string): string => {
|
||||
if (!dateString) return '';
|
||||
return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
|
||||
};
|
||||
|
||||
// 事件处理函数
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
emit('cancel');
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
|
||||
emit('confirm', {
|
||||
selectedKeys: selectedRowKeys.value,
|
||||
selectedData,
|
||||
choseText: choseText.value,
|
||||
choseImgArray: choseImgArray.value,
|
||||
});
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
const onAfterVisibleChange = (visible: boolean) => {
|
||||
// 空实现，避免未定义错误
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式保持不变 */
|
||||
.table-container {
|
||||
height: calc(100% - 50px);
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.material-table {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
padding: 16px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.material-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user