renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 分享内容稿件

Browse Source
This commit is contained in:
rd
2025-08-01 17:25:21 +08:00
parent a9bb9a45c0
commit 0969c806f5
5 changed files with 288 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common-select/index.vue
View File

@ -8,7 +8,7 @@
:multiple="multiple" :multiple="multiple"
size="medium" size="medium"
:placeholder="placeholder" :placeholder="placeholder"
allow-clear :allow-clear="allClear"
:max-tag-count="maxTagCount" :max-tag-count="maxTagCount"
@change="handleChange" @change="handleChange"
> >
@ -42,6 +42,10 @@ const props = defineProps({
type: Number, type: Number,
default: 3, default: 3,
}, },
allClear: {
type: Boolean,
default: true,
}
}); });
const emits = defineEmits(['update:modelValue', 'change']); const emits = defineEmits(['update:modelValue', 'change']);

280
src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/index.vue
View File

@ -12,6 +12,7 @@ import {
} from '@arco-design/web-vue'; } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select'; import CommonSelect from '@/components/common-select';
import TextOverTips from '@/components/text-over-tips'; import TextOverTips from '@/components/text-over-tips';
import ShareModal from './share-modal';
import { INITIAL_FORM, TABLE_COLUMNS } from './constants'; import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
import { formatTableField, exactFormatTime } from '@/utils/tools'; import { formatTableField, exactFormatTime } from '@/utils/tools';
@ -46,6 +47,7 @@ export default {
const visible = ref(false); const visible = ref(false);
const query = ref(cloneDeep(INITIAL_FORM)); const query = ref(cloneDeep(INITIAL_FORM));
const tableRef = ref(null); const tableRef = ref(null);
const shareModalRef = ref(null);
const reset = () => { const reset = () => {
query.value = cloneDeep(INITIAL_FORM); query.value = cloneDeep(INITIAL_FORM);
@ -67,7 +69,8 @@ export default {
pageInfo.value.total = data.total; pageInfo.value.total = data.total;
} }
}; };
const handleSearch = () => { const handleSearch = (value) => {
query.value.audit_status = value;
reload(); reload();
}; };
const reload = () => { const reload = () => {
@ -113,7 +116,7 @@ export default {
}; };
const onShare = () => { const onShare = () => {
console.log('onShare'); shareModalRef.value?.open();
}; };
const handleSorterChange = (column, order) => { const handleSorterChange = (column, order) => {
query.value.sort_column = column; query.value.sort_column = column;
@ -127,136 +130,159 @@ export default {
open, open,
}); });
return () => ( return () => (
<Modal <>
v-model:visible={visible.value} <Modal
title="分享内容稿件" v-model:visible={visible.value}
width="920px" title="分享内容稿件"
onClose={onClose} width="920px"
modal-class="share-manuscript-modal" onClose={onClose}
v-slots={{ unmount-on-close
footer: () => ( modal-class="share-manuscript-modal"
<>
<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={{ v-slots={{
empty: () => <NoData />, footer: () => (
columns: () => ( <div class="flex justify-between w-full items-center">
<> <p class="cts color-#737478">
{TABLE_COLUMNS.map((column) => ( 已选择 <span class="cts color-#211F24 bold">{selectedRows.value.length}</span> 个
<TableColumn </p>
key={column.dataIndex} <div class="flex items-center">
data-index={column.dataIndex} <Button size="large" onClick={onClose}>
fixed={column.fixed} 取消
width={column.width} </Button>
min-width={column.minWidth} <Button
sortable={column.sortable} type="primary"
align={column.align} class="ml-16px"
ellipsis size="large"
tooltip onClick={onShare}
v-slots={{ disabled={!selectedRows.value.length}
title: () => ( >
<div class="flex items-center"> 分享
<span class="cts mr-4px">{column.title}</span> </Button>
{column.tooltip && ( </div>
<Tooltip content={column.tooltip} position="top"> </div>
<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 flex-col h-100%">
<div class="flex justify-end mt-16px"> <div class="filter-row-item mb-16px">
<Pagination <span class="cts text-#211f24 !text-14px mr-12px">审核状态</span>
total={pageInfo.value.total} <CommonSelect
size="mini" placeholder="全部"
show-total options={CHECK_STATUS}
show-jumper v-model={query.value.audit_status}
show-page-size class="!w-200px"
current={pageInfo.value.page} multiple={false}
page-size={pageInfo.value.page_size} onChange={handleSearch}
onChange={onPageChange} />
onPageSizeChange={onPageSizeChange} </div>
<Table
ref={tableRef}
data={dataSource.value}
row-key="id"
column-resizable
row-selection={rowSelection.value}
selected-keys={selectedRowKeys.value}
pagination={false}
scroll={{ x: '100%', y: '100%' }}
class="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>
)}
</div> </div>
)} </Modal>
</Modal> <ShareModal ref={shareModalRef} onClose={onClose} />
</>
); );
}, },
}; };

115
src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/share-modal.vue Normal file
View File

@ -0,0 +1,115 @@
<script lang="jsx">
import { Modal, Form, FormItem, Input, Button, Message as AMessage } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select';
import { useClipboard } from '@vueuse/core';
const INITIAL_FORM = {
link: '',
data: 1,
target: '',
};
const OPTIONS = [
{
id: 1,
name: '1天',
},
{
id: 2,
name: '3天',
},
{
id: 3,
name: '7天',
},
{
id: 4,
name: '15天',
},
{
id: 5,
name: '30天',
},
{
id: 6,
name: '60天',
},
];
export default {
emits: ['close'],
setup(props, { emit, expose }) {
const visible = ref(false);
const formRef = ref(null);
const formData = ref(cloneDeep(INITIAL_FORM));
const { copy } = useClipboard({ source: formData.value.link });
const reset = () => {
formData.value = cloneDeep(INITIAL_FORM);
formRef.value?.resetFields?.();
formRef.value?.clearValidate?.();
};
const onClose = () => {
visible.value = false;
reset();
};
const onCopy = () => {
onClose();
copy(formData.value.link);
AMessage.success('复制成功！');
emit('close');
};
const open = () => {
visible.value = true;
};
expose({
open,
});
return () => (
<Modal
v-model:visible={visible.value}
title="分享内容稿件"
width="480px"
onClose={onClose}
unmount-on-close
v-slots={{
footer: () => (
<>
<Button size="large" onClick={onClose}>
取消
</Button>
<Button type="primary" class="ml-16px" size="large" onClick={onCopy}>
复制链接
</Button>
</>
),
}}
>
<Form ref={formRef} model={formData.value} auto-label-width>
<FormItem label="分享地址" prop="link">
<Input v-model={formData.value.link} size="large" placeholder="请输入分享地址" />
</FormItem>
<FormItem label="有效期" prop="data">
<CommonSelect
v-model={formData.value.data}
options={OPTIONS}
multiple={false}
placeholder="请选择有效期"
size="large"
class="!w-240px"
allClear={false}
/>
</FormItem>
<FormItem label="分享对象" prop="target">
<Input v-model={formData.value.target} class="!w-240px" size="large" placeholder="请输入分享对象" />
</FormItem>
</Form>
</Modal>
);
},
};
</script>

18
src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/style.scss
View File

@ -1,17 +1,27 @@
.share-manuscript-modal { .share-manuscript-modal {
.cts {
font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
&.bold {
font-family: $font-family-medium;
}
}
.filter-row-item { .filter-row-item {
.label { .label {
color: var(--Text-1, #211f24); color: var(--Text-1, #211f24);
font-family: $font-family-regular;
font-size: 14px; font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
} }
} }
.arco-modal-body { .arco-modal-body {
height: 464px; height: 464px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
.arco-scrollbar-track {
display: none !important;
}
} }
} }

1
src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/index.vue
View File

@ -11,6 +11,7 @@ import {
Message as AMessage, Message as AMessage,
Textarea, Textarea,
} from '@arco-design/web-vue'; } from '@arco-design/web-vue';
import { useClipboard } from '@vueuse/core';
import TextOverTips from '@/components/text-over-tips'; import TextOverTips from '@/components/text-over-tips';
import icon1 from '@/assets/img/media-account/icon-feedback-fail.png'; import icon1 from '@/assets/img/media-account/icon-feedback-fail.png';