feat: 原料库
This commit is contained in:
rd
@ -150,3 +150,23 @@ export const deleteShareWorksComments = (id: string, commentId: string, shareCod
|
||||
headers: { 'share-code': shareCode },
|
||||
});
|
||||
};
|
||||
|
||||
// 原料库-分页
|
||||
export const getRawMaterialsPage = (params = {}) => {
|
||||
return Http.get('/v1/raw-materials', params);
|
||||
};
|
||||
|
||||
// 原料库-删除
|
||||
export const deleteRawMaterial = (id: string) => {
|
||||
return Http.delete(`/v1/raw-materials/${id}`);
|
||||
};
|
||||
|
||||
// 原料库-批量删除
|
||||
export const batchDeleteRawMaterials = (params = {}) => {
|
||||
return Http.delete(`/v1/raw-materials/batch`, { data: params });
|
||||
};
|
||||
|
||||
// 原料库-AI添加
|
||||
export const postRawMaterialsAI = (params = {}) => {
|
||||
return Http.post('/v1/raw-materials/ai', params);
|
||||
};
|
||||
|
||||
@ -115,7 +115,7 @@ export function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const sizes = ['Bytes', 'kb', 'mB', 'gB', 'tB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="common-filter-wrap">
|
||||
<div class="filter-row">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">文件名称</span>
|
||||
<a-input
|
||||
v-model="query.name"
|
||||
class="!w-240px"
|
||||
placeholder="请输入文件名称"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">序号</span>
|
||||
<a-space size="medium">
|
||||
<a-input
|
||||
v-model="query.uid"
|
||||
class="!w-160px"
|
||||
placeholder="请输入序号"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- <div class="filter-row-item">
|
||||
<span class="label">来源</span>
|
||||
<CommonSelect
|
||||
placeholder="请选择所属项目"
|
||||
:options="CHECK_STATUS"
|
||||
v-model="query.audit_status"
|
||||
class="!w-160px"
|
||||
:multiple="false"
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="filter-row-item">
|
||||
<span class="label">上传时间</span>
|
||||
<a-range-picker
|
||||
v-model="created_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD"
|
||||
class="w-280px"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
// import CommonSelect from '@/components/common-select';
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits('search', 'reset', 'update:query');
|
||||
|
||||
const created_at = ref([]);
|
||||
|
||||
const handleSearch = () => {
|
||||
emits('update:query', props.query);
|
||||
nextTick(() => {
|
||||
emits('search');
|
||||
});
|
||||
};
|
||||
|
||||
const onDateChange = (value) => {
|
||||
if (!value) {
|
||||
props.query.created_at = [];
|
||||
handleSearch();
|
||||
return;
|
||||
}
|
||||
|
||||
const [start, end] = value;
|
||||
const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
|
||||
props.query.created_at = [
|
||||
dayjs(start).startOf('day').format(FORMAT_DATE),
|
||||
dayjs(end).endOf('day').format(FORMAT_DATE),
|
||||
];
|
||||
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
|
||||
const handleReset = () => {
|
||||
created_at.value = [];
|
||||
emits('reset');
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,54 @@
|
||||
<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>确认删除 {{ fileName }} 文件吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button size="medium" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" class="ml-16px" status="danger" size="medium" @click="onDelete">确认删除</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { deleteRawMaterial, batchDeleteRawMaterials } from '@/api/all/generationWorkshop';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const update = inject('update');
|
||||
|
||||
const visible = ref(false);
|
||||
const fileId = ref(null);
|
||||
const fileName = ref('');
|
||||
|
||||
const isBatch = computed(() => Array.isArray(fileId.value));
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
fileId.value = null;
|
||||
fileName.value = '';
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
fileId.value = id;
|
||||
fileName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? batchDeleteRawMaterials : deleteRawMaterial;
|
||||
const _params = isBatch.value ? { ids: fileId.value } : fileId.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
column-resizable
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="flex-1 manuscript-table w-100%"
|
||||
bordered
|
||||
:row-selection="rowSelection"
|
||||
:selected-row-keys="selectedRowKeys"
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
|
||||
@select-all="(check) => emits('selectAll', check)"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData text="暂无稿件" />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'name'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" fit="cover">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</a-image>
|
||||
</HoverImagePreview>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
|
||||
<TextOverTips :context="`序号：${record.uid}`" :line="1" class="cts !color-#737478 regular" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
{{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'size'" #cell="{ record }">
|
||||
<span class="cts num">{{ formatFileSize(record.size) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'origin'" #cell="{ record }">
|
||||
{{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }}
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template #cell="{ record }" v-else-if="['created_at'].includes(column.dataIndex)">
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
|
||||
<a-button type="outline" size="mini" @click="onDownload(record)">下载</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools';
|
||||
import { slsWithCatch } from '@/utils/stroage.ts';
|
||||
import { TABS_LIST, ORIGIN_LIST } from '../../constants';
|
||||
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
|
||||
import HoverImagePreview from '@/components/hover-image-preview';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
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 emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableColumns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
rowSelection: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedRowKeys: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const tableRef = ref(null);
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
|
||||
};
|
||||
const onDelete = (item) => {
|
||||
emits('delete', item);
|
||||
};
|
||||
const onDownload = (item) => {
|
||||
downloadByUrl(item.file);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
.manuscript-table {
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&.num {
|
||||
font-family: $font-family-manrope-regular;
|
||||
}
|
||||
&.regular {
|
||||
font-family: $font-family-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
export enum RawMaterialType {
|
||||
All = '',
|
||||
Image = 0,
|
||||
Video = 1,
|
||||
Text = 2,
|
||||
}
|
||||
|
||||
export const TABS_LIST = [
|
||||
{
|
||||
label: '全部',
|
||||
value: RawMaterialType.All,
|
||||
},
|
||||
{
|
||||
label: '图片',
|
||||
value: RawMaterialType.Image,
|
||||
},
|
||||
{
|
||||
label: '视频',
|
||||
value: RawMaterialType.Video,
|
||||
},
|
||||
{
|
||||
label: '文本',
|
||||
value: RawMaterialType.Text,
|
||||
},
|
||||
];
|
||||
|
||||
export const ORIGIN_LIST = [
|
||||
{
|
||||
label: '本地上传',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: 'AI生成',
|
||||
value: 1,
|
||||
},
|
||||
]
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
uid: '',
|
||||
type: RawMaterialType.All,
|
||||
created_at: [],
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
width: 400,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'origin',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
dataIndex: 'size',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '上传人员',
|
||||
dataIndex: 'uploader',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
}
|
||||
]
|
||||
@ -1,10 +1,143 @@
|
||||
<script lang="tsx">
|
||||
import { provide } from 'vue';
|
||||
import { Tabs, TabPane } from 'ant-design-vue';
|
||||
import { TABS_LIST, RawMaterialType, INITIAL_QUERY, TABLE_COLUMNS } from './constants';
|
||||
import FilterBlock from './components/filter-block/index.vue';
|
||||
import RawMaterialTable from './components/table/index.vue';
|
||||
import DeleteRawMaterialModal from './components/table/delete-file-modal.vue';
|
||||
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
|
||||
|
||||
export default defineComponent({
|
||||
setup(_, { attrs, slots, expose }) {
|
||||
const {
|
||||
dataSource,
|
||||
pageInfo,
|
||||
rowSelection,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
resetPageInfo,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const deleteRawMaterialModalRef = ref(null);
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
const getData = async () => {
|
||||
const { page, page_size } = pageInfo.value;
|
||||
const { code, data } = await getRawMaterialsPage({
|
||||
...query.value,
|
||||
page,
|
||||
page_size,
|
||||
});
|
||||
if (code === 200) {
|
||||
dataSource.value = data?.data ?? [];
|
||||
pageInfo.value.total = data.total;
|
||||
}
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
const handleReset = () => {
|
||||
resetPageInfo();
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order;
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedRows.value.map((item) => item.id);
|
||||
const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
|
||||
|
||||
deleteRawMaterialModalRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
|
||||
const handleDelete = (item) => {
|
||||
const { id, name } = item;
|
||||
deleteRawMaterialModalRef.value?.open({ id, name: `“${name}”` });
|
||||
};
|
||||
|
||||
const handleTabClick = (key) => {
|
||||
query.value.type = key;
|
||||
reload();
|
||||
};
|
||||
|
||||
const onBatchSuccess = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class="raw-material-wrap h-full flex flex-col">
|
||||
原材料库
|
||||
<div class="bg-white rounded-t-8px">
|
||||
<Tabs v-model:activeKey={query.value.type} onTabClick={handleTabClick}>
|
||||
{TABS_LIST.map((item) => (
|
||||
<TabPane key={item.value} tab={item.label}>
|
||||
{item.label}
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
<div class="filter-wrap bg-#fff rounded-b-8px mb-16px">
|
||||
<FilterBlock v-model:query={query.value} onSearch={handleSearch} onReset={handleReset} />
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
<div class="flex justify-end mb-12px">
|
||||
<a-button type="outline" class="w-fit" size="medium" onClick={handleBatchDelete}>
|
||||
批量删除
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<RawMaterialTable
|
||||
tableColumns={TABLE_COLUMNS}
|
||||
rowSelection={rowSelection}
|
||||
selectedRowKeys={selectedRowKeys.value}
|
||||
dataSource={dataSource.value}
|
||||
onSorterChange={handleSorterChange}
|
||||
onDelete={handleDelete}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="pagination-row">
|
||||
<a-pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
current={pageInfo.value.page}
|
||||
pageSize={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DeleteRawMaterialModal ref={deleteRawMaterialModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,3 +1,37 @@
|
||||
.raw-material-wrap {
|
||||
|
||||
}
|
||||
:deep(.ant-tabs) {
|
||||
.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
padding: 0 24px;
|
||||
.ant-tabs-nav-wrap {
|
||||
height: 56px;
|
||||
.ant-tabs-nav-list {
|
||||
.ant-tabs-tab {
|
||||
.ant-tabs-tab-btn {
|
||||
color: var(--Text-2, #55585f);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
.ant-tabs-tab-btn {
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
font-weight: 500;
|
||||
font-family: $font-family-medium;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-ink-bar {
|
||||
background: #6D4CFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-content-holder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
export enum RawMaterialType {
|
||||
All = '0',
|
||||
Image = '0',
|
||||
Video = '1',
|
||||
Text = '2',
|
||||
}
|
||||
|
||||
export const TABS_LIST = [
|
||||
{
|
||||
label: '全部',
|
||||
value: RawMaterialType.All,
|
||||
},
|
||||
{
|
||||
label: '图片',
|
||||
value: RawMaterialType.Image,
|
||||
},
|
||||
{
|
||||
label: '视频',
|
||||
value: RawMaterialType.Video,
|
||||
},
|
||||
{
|
||||
label: '文本',
|
||||
value: RawMaterialType.Text,
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
<script lang="tsx">
|
||||
import { Tabs, TabPane } from 'ant-design-vue';
|
||||
import { TABS_LIST, RawMaterialType } from './constants';
|
||||
|
||||
export default defineComponent({
|
||||
setup(_, { attrs, slots, expose }) {
|
||||
|
||||
const rawMaterialType = ref(RawMaterialType.All);
|
||||
return () => (
|
||||
<div class="raw-material-wrap h-full flex flex-col">
|
||||
原材料库
|
||||
<div class="bg-white rounded-t-8px">
|
||||
<Tabs
|
||||
v-model:activeKey={rawMaterialType.value}
|
||||
>
|
||||
{TABS_LIST.map((item) => (
|
||||
<TabPane key={item.value} tab={item.label}>
|
||||
{item.label}
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user