feat: 分享内容稿件
This commit is contained in:
rd
@ -26,7 +26,6 @@ export const INITIAL_VIDEO_INFO = {
|
||||
name: '',
|
||||
size: '',
|
||||
percent: 0,
|
||||
poster: '',
|
||||
time: '',
|
||||
uploadSpeed: '0 KB/s',
|
||||
startTime: 0,
|
||||
@ -76,7 +75,6 @@ export default {
|
||||
|
||||
getVideoInfo(file)
|
||||
.then(({ duration, firstFrame }) => {
|
||||
console.log({ duration, firstFrame });
|
||||
formData.value.videoInfo.poster = firstFrame;
|
||||
formData.value.videoInfo.time = formatDuration(duration);
|
||||
emit('updateVideoInfo', formData.value.videoInfo);
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
export const INITIAL_FORM = {
|
||||
audit_status: '',
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'uid',
|
||||
width: 120,
|
||||
fixed: 'left',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '内容稿件标题',
|
||||
dataIndex: 'title',
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
title: '审核状态',
|
||||
dataIndex: 'audit_status',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '稿件类型',
|
||||
dataIndex: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '最后修改时间',
|
||||
dataIndex: 'last_modified_at',
|
||||
width: 160,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,267 @@
|
||||
<script lang="jsx">
|
||||
import {
|
||||
Input,
|
||||
Table,
|
||||
Modal,
|
||||
TableColumn,
|
||||
Checkbox,
|
||||
Pagination,
|
||||
Button,
|
||||
Tooltip,
|
||||
Notification,
|
||||
} from '@arco-design/web-vue';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
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';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
const visible = ref(false);
|
||||
const query = ref(cloneDeep(INITIAL_FORM));
|
||||
const tableRef = ref(null);
|
||||
|
||||
const reset = () => {
|
||||
query.value = cloneDeep(INITIAL_FORM);
|
||||
pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { page, page_size } = pageInfo.value;
|
||||
const { code, data } = await getWorksPage({
|
||||
...query.value,
|
||||
page,
|
||||
page_size,
|
||||
});
|
||||
if (code === 200) {
|
||||
dataSource.value = data?.data ?? [];
|
||||
pageInfo.value.total = data.total;
|
||||
}
|
||||
};
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
const open = () => {
|
||||
getData();
|
||||
visible.value = true;
|
||||
};
|
||||
const onClose = () => {
|
||||
visible.value = false;
|
||||
reset();
|
||||
};
|
||||
|
||||
const renderColumn = () => {
|
||||
return TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
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
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => renderCell(record),
|
||||
}}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
const onShare = () => {
|
||||
console.log('onShare');
|
||||
};
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
const getStatusInfo = (audit_status) => {
|
||||
return CHECK_STATUS.find((v) => v.id === audit_status) ?? {};
|
||||
};
|
||||
expose({
|
||||
open,
|
||||
});
|
||||
return () => (
|
||||
<Modal
|
||||
v-model:visible={visible.value}
|
||||
title="分享内容稿件"
|
||||
width="920px"
|
||||
onClose={onClose}
|
||||
modal-class="share-manuscript-modal"
|
||||
v-slots={{
|
||||
footer: () => (
|
||||
<>
|
||||
<Button size="large" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary" class="ml-16px" size="large" onClick={onShare}>
|
||||
分享
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<div class="filter-row-item mb-16px">
|
||||
<span class="label mr-12px">审核状态</span>
|
||||
<CommonSelect
|
||||
placeholder="全部"
|
||||
options={CHECK_STATUS}
|
||||
v-model={query.value.audit_status}
|
||||
class="!w-200px"
|
||||
multiple={false}
|
||||
onchange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
<Table
|
||||
ref={tableRef.value}
|
||||
data={dataSource.value}
|
||||
row-key="id"
|
||||
column-resizable
|
||||
row-selection={rowSelection.value}
|
||||
selected-keys={selectedRowKeys.value}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%' }}
|
||||
class="flex-1 w-100% overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
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
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'audit_status') {
|
||||
return (
|
||||
<div
|
||||
class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
style={{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }}
|
||||
>
|
||||
<span class="cts s1" style={{ color: getStatusInfo(record.audit_status).color }}>
|
||||
{getStatusInfo(record.audit_status).name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'title') {
|
||||
return <TextOverTips context={record.title} />;
|
||||
} else if (column.dataIndex === 'type') {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
} else if (column.dataIndex === 'last_modified_at') {
|
||||
return exactFormatTime(record.last_modified_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end mt-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
.share-manuscript-modal {
|
||||
.filter-row-item {
|
||||
.label {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.arco-modal-body {
|
||||
height: 464px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user