Skip to content

M
mengchangaigc
Commit d240acec authored by 黄同智's avatar 黄同智
Browse files
Options

添加任务协作的路由，布局任务协作的页面和交互

parent e143a5c7
Show whitespace changes
Inline Side-by-side
Showing with 639 additions and 19 deletions
apps/web-vue/src/layout/index.vue
View file @ d240acec
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<template v-for="(item, index) in menus" :key="index"> <template v-for="(item, index) in menus" :key="index">
<el-sub-menu v-if="item.children && item.children.length" :index="item.path"> <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
<template #title> <template #title>
<SvgIcon name="HD" size="20" class="mr-10 iconscoal" /> <SvgIcon :name="item.icon" size="20" class="mr-10 iconscoal" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</template> </template>
<el-menu-item v-for="(child, cindex) in item.children" :key="cindex" :index="item.path + child.path"> <el-menu-item v-for="(child, cindex) in item.children" :key="cindex" :index="item.path + child.path">
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
<el-menu-item v-else :index="item.path"> <el-menu-item v-else :index="item.path">
<SvgIcon name="HD" size="20" class="mr-10 iconscoal" /> <SvgIcon :name="item.icon" size="20" class="mr-10 iconscoal" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
...@@ -77,47 +77,47 @@ const menus = [ ...@@ -77,47 +77,47 @@ const menus = [
{ {
name: '首页', name: '首页',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'room',
}, },
{ {
name: '快速创作', name: '快速创作',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'add',
}, },
{ {
name: 'Agent创作', name: 'Agent创作',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'audio',
}, },
{ {
name: '爆款复刻', name: '爆款复刻',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'caijian',
}, },
{ {
name: 'AI视频', name: 'AI视频',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'video',
}, },
{ {
name: 'AI图片', name: 'AI图片',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'image',
}, },
{ {
name: '画布', name: '画布',
path: '/', path: '/',
icon: 'el-icon-s-home', icon: 'redraw',
}, },
{ {
name: '任务协作', name: '任务协作',
path: '/', path: '/task',
icon: 'el-icon-s-home', icon: 'map',
}, },
{ {
name: '资源库', name: '资源库',
path: '/resource', path: '/resource',
icon: 'el-icon-s-home', icon: 'fineness',
children: [ children: [
{ {
name: '成片管理', name: '成片管理',
......
apps/web-vue/src/router/index.ts
View file @ d240acec
...@@ -8,6 +8,7 @@ import video from '@/views/vue-flow/video.vue' ...@@ -8,6 +8,7 @@ import video from '@/views/vue-flow/video.vue'
import VideoOutMp4 from '@/views/vue-flow/components/VideoOutMp4.vue' import VideoOutMp4 from '@/views/vue-flow/components/VideoOutMp4.vue'
import ThreeD from '@/views/vue-flow/3d.vue' import ThreeD from '@/views/vue-flow/3d.vue'
import Layout from '@/layout/index.vue' import Layout from '@/layout/index.vue'
import Task from '@/views/task/index.vue'
const routes = [ const routes = [
{ {
...@@ -29,6 +30,19 @@ const routes = [ ...@@ -29,6 +30,19 @@ const routes = [
] ]
}, },
{ {
path: '/task',
component: Layout,
children: [
{
path: 'task',
alias: '',
name: 'Task',
component: Task,
meta: { title: '任务协作', icon: 'House', affix: true }
}
]
},
{
path: '/resource', path: '/resource',
component: Layout, component: Layout,
children: [ children: [
......
apps/web-vue/src/views/home/components/section2.vue
View file @ d240acec
...@@ -70,6 +70,7 @@ function onSearch() { ...@@ -70,6 +70,7 @@ function onSearch() {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.08);
} }
</style> </style>
apps/web-vue/src/views/home/components/section3.vue
View file @ d240acec
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
style="background-color: rgba(var(--main-color), 0.1);">上传视频</span> style="background-color: rgba(var(--main-color), 0.1);">上传视频</span>
<span class="color-999">2026-03-25 14:25:34</span> <span class="color-999">2026-03-25 14:25:34</span>
</div> </div>
<span class="fs-12 px-8 py-2 round-100 bg-eee" style="color: red;">未读</span> <span class="fs-12 px-8 py-2 round-100 bg-eee pointer" style="color: red;">未读</span>
</div> </div>
<div class="mt-10 ellipsis">视频《冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染。</div> <div class="mt-10 ellipsis">视频《冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染。</div>
</div> </div>
......
apps/web-vue/src/views/home/components/section4.vue
View file @ d240acec
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<section class="flex flex-wrap gap-10 mt-20"> <section class="flex flex-wrap gap-10 mt-20">
<div v-for="(item, index) in helpItems" :key="index" class="round-6 p-12 flex-center flex-col" <div v-for="(item, index) in helpItems" :key="index" class="round-6 p-12 flex-center flex-col pointer"
style="background-color: #88888810;flex: 0 0 calc((100% - 10px*2)/3);"> style="background-color: #88888810;flex: 0 0 calc((100% - 10px*2)/3);">
<span class="font-bold">⬇️</span> <span class="font-bold">⬇️</span>
<span class="font-bold">{{ item.label }}</span> <span class="font-bold">{{ item.label }}</span>
......
apps/web-vue/src/views/home/components/section5.vue
View file @ d240acec
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<section class="mt-20 flex gap-10"> <section class="mt-20 flex gap-10">
<div v-for="(item, index) in list" :key="index" class="round-6 p-12" <div v-for="(item, index) in list" :key="index" class="round-6 p-12 pointer"
style="background-color: #88888810; flex: 0 0 calc((100% - 10px * 3) / 4);overflow: hidden;"> style="background-color: #88888810; flex: 0 0 calc((100% - 10px * 3) / 4);overflow: hidden;">
<div class="flex-items-center justify-between"> <div class="flex-items-center justify-between">
<div class="fs-12 flex gap-6"> <div class="fs-12 flex gap-6">
......
apps/web-vue/src/views/home/index.vue
View file @ d240acec
<template> <template>
<div class="content"> <div class="content pb-20">
<Section1 class="pt-20" /> <Section1 class="pt-20" />
<Section2 class="mt-40" /> <Section2 class="mt-20" />
<div class="flex gap-20 mt-40"> <div class="flex gap-20 mt-20">
<Section3 style="width: 60%;" /> <Section3 style="width: 60%;" />
<Section4 style="width: 40%;" /> <Section4 style="width: 40%;" />
</div> </div>
<Section5 class="mt-40" /> <Section5 class="mt-20" />
</div> </div>
</template> </template>
......
apps/web-vue/src/views/task/index.vue 0 → 100644
View file @ d240acec
<template>
<div class="bgmr vh100 p-20 over-y-auto">
<section class="bg-fff round-10 px-16 py-14 flex-between filter-card">
<div class="flex-items-center gap-30">
<div v-for="item in taskTabs" :key="item.value" class="pb-8 pointer tab-item"
:class="{ active: activeTab === item.value }" @click="activeTab = item.value">
<span class="font-bold">{{ item.label }} ({{ item.count }})</span>
</div>
</div>
<div class="flex-items-center gap-10">
<el-date-picker v-model="publishRange" type="daterange" start-placeholder="2026-06-01"
end-placeholder="2026-06-30" range-separator="至" style="width: 220px;" />
<el-date-picker v-model="outputRange" type="daterange" start-placeholder="出片开始日期"
end-placeholder="出片结束日期" range-separator="至" style="width: 240px;" />
</div>
</section>
<section class="bg-fff round-10 p-14 mt-16 filter-card">
<div class="flex flex-wrap gap-10">
<div class="flex filter-combo">
<el-select v-model="filters.publisherType" class="w-90">
<el-option label="发布人" value="publisher" />
<el-option label="部门" value="department" />
</el-select>
<el-select v-model="filters.publisher" filterable clearable class="w-210" placeholder="请选择(支持输入搜索)">
<el-option v-for="item in publisherOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<div class="flex filter-combo">
<el-select v-model="filters.outputType" class="w-90">
<el-option label="出片人" value="output" />
<el-option label="小组" value="group" />
</el-select>
<el-select v-model="filters.outputUser" filterable clearable class="w-210"
placeholder="请选择出片人(支持输入搜索)">
<el-option v-for="item in outputUserOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<el-select v-model="filters.videoStatus" clearable class="w-280" placeholder="请选择视频状态">
<el-option v-for="item in videoStatusOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-select v-model="filters.scriptStatus" clearable class="w-280" placeholder="请选择脚本状态">
<el-option v-for="item in scriptStatusOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-input v-model="filters.taskId" class="w-280" placeholder="任务ID" clearable />
<el-input v-model="filters.scriptId" class="w-300" placeholder="脚本ID" clearable />
<el-input v-model="filters.remark" class="w-300" placeholder="备注" clearable />
<div>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
</div>
</div>
</section>
<section class="mt-18 flex-between">
<div class="flex-items-center">
<el-button v-for="item in statusTabs" :key="item.value"
:type="activeStatus === item.value ? 'primary' : ''" @click="activeStatus = item.value">
{{ item.label }}
</el-button>
<el-select v-model="sortType" class="w-180 ml-10" size="default">
<el-option label="排序: 按发布时间" value="publishTime" />
<el-option label="排序: 按出片时间" value="outputTime" />
<el-option label="排序: 按消耗金额" value="cost" />
</el-select>
</div>
<div class="flex-items-center gap-8">
<el-button type="primary" @click="publishTask">发布任务</el-button>
<el-button type="primary" @click="exportTask">批量导出</el-button>
</div>
</section>
<section class="mt-16 bg-fff round-10 hidden table-card">
<el-table :data="pageList" size="large" class="task-table" row-key="id">
<el-table-column prop="publisher" label="发布任务" width="170">
<template #default="{ row }">
<div>
<span class="font-bold color-main">{{ row.publisher }}</span>
<span class="ml-4 color-888 fs-12">{{ row.publishDate }}</span>
</div>
<div class="fs-12 color-888 mt-4">ID: {{ row.taskId }}</div>
</template>
</el-table-column>
<el-table-column prop="outputUser" label="出片任务" width="150">
<template #default="{ row }">
<div class="fs-12 color-000">{{ row.outputDate }}</div>
<div class="font-bold color-000 mt-4">{{ row.outputUser }}</div>
</template>
</el-table-column>
<el-table-column prop="progress" label="出片进度" width="140">
<template #default="{ row }">
<div class="font-bold" :class="row.finished ? 'color-green' : 'color-red'">
<span class="dot mr-6" :class="row.finished ? 'bg-green' : 'bg-red'"></span>
{{ row.finished ? '已达标' : '未完成' }}
</div>
<div class="mt-4 font-bold" :class="row.finished ? 'color-000' : 'color-red'">
{{ row.progress }}
</div>
</template>
</el-table-column>
<el-table-column prop="operate" label="操作" width="200">
<template #default="{ row }">
<el-button type="default" link size="small" @click="showAction(row, '详情')">详情</el-button>
<el-button link size="small" @click="showAction(row, '复制')">复制</el-button>
<el-button type="primary" link size="small" @click="showAction(row, '编辑')">编辑</el-button>
<el-button type="danger" link size="small" :disabled="row.finished"
@click="showAction(row, '删除')">删除</el-button>
</template>
</el-table-column>
<el-table-column prop="works" width="220">
<template #header>
<span>关联作品</span>
</template>
<template #default="{ row }">
<div class="flex flex-col gap-4">
<el-popover placement="bottom" trigger="click" width="110">
<div v-for="item in workMenu" :key="item" class="py-8 px-10 pointer hover-main"
@click="selectWorkMenu(row, item)">
{{ item }}
</div>
<template #reference>
<div class="color-main gl-btn flex-center minw-24 w-24 h-24 round-6 pointer"
style="user-select: none;">+</div>
</template>
</el-popover>
<div v-if="row.work" class="flex-1 work-tag flex round-4 py-4 pr-4 hidden">
<span class="px-6 fs-12 color-main">素</span>
<div class="ellipsis fs-12 flex-1">{{ row.work }}</div>
<div class="px-4 round-4 fs-10 ml-2 color-fff bg-danger" style="white-space: nowrap;">{{
row.workStatus }}</div>
</div>
<div v-else class="flex-1"></div>
</div>
</template>
</el-table-column>
<el-table-column prop="cost" label="任务关联消耗" width="160" align="center">
<template #default="{ row }">
<span class="font-bold">¥{{ row.cost }}</span>
</template>
</el-table-column>
<el-table-column prop="script" width="270">
<template #header>
<span>关联脚本</span>
</template>
<template #default="{ row }">
<div class="flex flex-col gap-4">
<div class="flex gap-4">
<div class="color-main gl-btn flex-center minw-24 w-24 h-24 round-6 pointer" title=""
style="user-select: none;">+</div>
<div class="color-main gl-btn flex-center minw-24 w-24 fs-12 h-24 round-6 pointer"
style="user-select: none;">展</div>
</div>
<div v-if="row.script" class="flex-items-center gap-4">
<div class="flex-1 work-tag flex round-4 p-4 hidden">
<div class="ellipsis flex-1 fs-12">{{ row.script }}</div>
<div v-if="row.workStatus" class="px-4 round-4 fs-10 ml-2 color-fff bg-danger"
style="white-space: nowrap;">{{
row.workStatus }}</div>
</div>
<div class="fs-12">删</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="230">
<template #default="{ row }">
<span class="color-666">{{ row.remark }}</span>
</template>
</el-table-column>
<el-table-column prop="product" width="150">
<template #header>
<span>产品 ⌕</span>
</template>
</el-table-column>
<el-table-column prop="scriptType" width="150">
<template #header>
<span>脚本类型 ⌕</span>
</template>
</el-table-column>
<el-table-column prop="splitStatus" label="脚本拆解表" width="140" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="showAction(row, '填写拆解表')">{{ row.splitStatus
}}</el-button>
</template>
</el-table-column>
</el-table>
<div class="px-16 py-12 flex-between table-footer">
<span class="color-000">共 {{ filteredList.length }} 条</span>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[50, 100]"
background layout="sizes, prev, pager, next, jumper" :total="filteredList.length" />
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
type TaskItem = {
id: number;
publisher: string;
publishDate: string;
taskId: string;
outputDate: string;
outputUser: string;
finished: boolean;
progress: string;
work: string;
workStatus: string;
cost: number;
script: string;
scriptStatus: string;
remark: string;
product: string;
scriptType: string;
splitStatus: string;
};
const activeTab = ref('all');
const activeStatus = ref('all');
const sortType = ref('publishTime');
const currentPage = ref(1);
const pageSize = ref(50);
const publishRange = ref<[Date, Date] | ''>('');
const outputRange = ref<[Date, Date] | ''>('');
const filters = reactive({
publisherType: 'publisher',
publisher: '',
outputType: 'output',
outputUser: '',
videoStatus: '',
scriptStatus: '',
taskId: '',
scriptId: '',
remark: '',
});
const taskTabs = [
{ label: '全部任务', value: 'all', count: 10 },
{ label: '给我的任务', value: 'mine', count: 5 },
{ label: '我发布的任务', value: 'published', count: 5 },
];
const statusTabs = [
{ label: '全部', value: 'all' },
{ label: '待完成', value: 'todo' },
{ label: '已达标', value: 'done' },
];
const publisherOptions = [
{ label: '徐振', value: '徐振' },
{ label: '蔡卓良', value: '蔡卓良' },
{ label: '孙剧本', value: '孙剧本' },
];
const outputUserOptions = [
{ label: '梁浩然', value: '梁浩然' },
{ label: '莫钦全', value: '莫钦全' },
{ label: '徐振', value: '徐振' },
];
const videoStatusOptions = [
{ label: '未完成', value: 'todo' },
{ label: '已达标', value: 'done' },
];
const scriptStatusOptions = [
{ label: '可改拍摄', value: 'canShoot' },
{ label: '待审核', value: 'review' },
{ label: '改写', value: 'rewrite' },
];
const workMenu = ['关联视频', '关联图片', '关联音频'];
const taskList = ref<TaskItem[]>([
{
id: 1,
publisher: '徐振',
publishDate: '2026-06-12',
taskId: '06131146256',
outputDate: '2026-06-13',
outputUser: '梁浩然',
finished: false,
progress: '0/8',
work: '',
workStatus: '',
cost: 0,
script: '【完美记忆】无钢圈内衣...',
scriptStatus: '可改拍摄',
remark: '另：复刻可正常提交当前备，合适也会安排',
product: '6017无钢圈内衣',
scriptType: '剧情演绎',
splitStatus: '填写拆解表',
},
{
id: 2,
publisher: '徐振',
publishDate: '2026-06-12',
taskId: '06131146255',
outputDate: '2026-06-13',
outputUser: '莫钦全',
finished: false,
progress: '3/8',
work: '250: 奶茶精华实测背号...',
workStatus: '通过',
cost: 450,
script: '【爆款改写】无钢圈内...',
scriptStatus: '可改拍摄',
remark: '本周训练二创为主，8条的任务都是二创。另：复刻可正常提交当前备，合适也会安排',
product: '6017无钢圈内衣',
scriptType: '痛点对比',
splitStatus: '填写拆解表',
},
{
id: 3,
publisher: '蔡卓良',
publishDate: '2026-06-01',
taskId: '06061131660',
outputDate: '2026-06-06',
outputUser: '徐振',
finished: true,
progress: '5/5',
work: '抗衰精华买测背号...',
workStatus: '通过',
cost: 1200,
script: '【抗衰精华】A醇精油夜...',
scriptStatus: '可改拍摄',
remark: '质感要求极高，请使用高清晰度4K灯光源',
product: '抗衰精华液',
scriptType: '口播种草',
splitStatus: '已拆解',
},
{
id: 4,
publisher: '徐振',
publishDate: '2026-06-15',
taskId: '06201148431',
outputDate: '2026-06-20',
outputUser: '蔡卓良',
finished: false,
progress: '2/8',
work: '',
workStatus: '',
cost: 300,
script: '【补水面膜】夏季晒后...',
scriptStatus: '待审核',
remark: '加急制作，本周首发',
product: '补水面膜',
scriptType: '特写展示',
splitStatus: '填写拆解表',
},
{
id: 5,
publisher: '蔡卓良',
publishDate: '2026-06-14',
taskId: '06201148428',
outputDate: '2026-06-18',
outputUser: '徐振',
finished: true,
progress: '6/6',
work: '风衣走秀快切成片...',
workStatus: '通过',
cost: 1800,
script: '【秋装风衣】高级Hook...',
scriptStatus: '可改拍摄',
remark: '效果优异，已完成跑量',
product: '加绒风衣',
scriptType: '混剪卡点',
splitStatus: '已拆解',
},
{
id: 6,
publisher: '梁浩然',
publishDate: '2026-06-18',
taskId: '06211055102',
outputDate: '2026-06-22',
outputUser: '徐振',
finished: false,
progress: '1/4',
work: '',
workStatus: '',
cost: 200,
script: '【防晒冰袖】户外骑行...',
scriptStatus: '可改拍摄',
remark: '突出冰感触感与透气网眼细节',
product: '防晒冰袖',
scriptType: '开箱测评',
splitStatus: '填写拆解表',
},
{
id: 7,
publisher: '徐振',
publishDate: '2026-06-19',
taskId: '06220912301',
outputDate: '2026-06-24',
outputUser: '王剪辑',
finished: true,
progress: '10/10',
work: '修护霜对比成片...',
workStatus: '通过',
cost: 2500,
script: '【修护霜】屏障受损肌...',
scriptStatus: '可改拍摄',
remark: '投放千川大盘，消耗突破5万',
product: '修护霜',
scriptType: '痛点对比',
splitStatus: '已拆解',
},
{
id: 8,
publisher: '孙剧本',
publishDate: '2026-06-20',
taskId: '06231430099',
outputDate: '2026-06-25',
outputUser: '徐振',
finished: false,
progress: '0/6',
work: '',
workStatus: '',
cost: 0,
script: '【星光吊坠】送女友生...',
scriptStatus: '改写',
remark: '强调情侣节日赠礼情感价值',
product: '星光吊坠',
scriptType: '剧情演绎',
splitStatus: '填写拆解表',
},
{
id: 9,
publisher: '徐振',
publishDate: '2026-06-21',
taskId: '06241600120',
outputDate: '2026-06-26',
outputUser: '周洋',
finished: false,
progress: '3/5',
work: '马丁靴上脚卡点01发大师傅发射点发射点发',
workStatus: '待审核',
cost: 800,
script: '【复古马丁靴】C晚A感到十分赶得上官方的说法烦烦烦',
scriptStatus: '可改拍摄',
remark: '注意配合潮流BGM音频节奏',
product: '复古马丁靴',
scriptType: '混剪卡点',
splitStatus: '已拆解',
},
{
id: 10,
publisher: '莫钦全',
publishDate: '2026-06-22',
taskId: '06251820455',
outputDate: '2026-06-27',
outputUser: '徐振',
finished: false,
progress: '4/8',
work: '早C晚A抗衰精油...',
workStatus: '待审核',
cost: 1000,
script: '【抗衰精华液】早C晚A感到十分赶得上官方的说法广东省',
scriptStatus: '可改拍摄',
remark: '二创卡点素材已同步上传',
product: '抗衰精华液',
scriptType: '口播种草',
splitStatus: '已拆解',
},
]);
const filteredList = computed(() => {
return taskList.value.filter((item) => {
const statusMatched =
activeStatus.value === 'all' ||
(activeStatus.value === 'done' && item.finished) ||
(activeStatus.value === 'todo' && !item.finished);
const publisherMatched = !filters.publisher || item.publisher === filters.publisher;
const outputMatched = !filters.outputUser || item.outputUser === filters.outputUser;
const videoMatched =
!filters.videoStatus ||
(filters.videoStatus === 'done' && item.finished) ||
(filters.videoStatus === 'todo' && !item.finished);
const scriptMatched =
!filters.scriptStatus ||
item.scriptStatus === scriptStatusOptions.find((option) => option.value === filters.scriptStatus)?.label;
const textMatched =
!filters.remark ||
`${item.remark}${item.product}${item.script}${item.publisher}${item.outputUser}`.includes(filters.remark);
return statusMatched && publisherMatched && outputMatched && videoMatched && scriptMatched && textMatched;
});
});
const pageList = computed(() => {
const sortedList = [...filteredList.value].sort((a, b) => {
if (sortType.value === 'cost') return b.cost - a.cost;
if (sortType.value === 'outputTime') return b.outputDate.localeCompare(a.outputDate);
return b.publishDate.localeCompare(a.publishDate);
});
const start = (currentPage.value - 1) * pageSize.value;
return sortedList.slice(start, start + pageSize.value);
});
const selectWorkMenu = (row: TaskItem, menu: string) => {
ElMessage.success(`${row.publisher} ${menu}`);
};
const showAction = (row: TaskItem, action: string) => {
ElMessage.success(`${action}: ${row.taskId}`);
};
const publishTask = () => ElMessage.success('发布任务');
const exportTask = () => ElMessage.success('批量导出');
</script>
<style scoped lang="scss">
.filter-card,
.table-card {
border: 1px solid #dfe7f2;
}
.tab-item {
color: #3c506f;
&.active {
color: rgba(var(--main-color), 1);
border-bottom: 3px solid rgba(var(--main-color), 1);
}
}
.filter-combo {
:deep(.el-select:first-child .el-select__wrapper) {
border-radius: 6px 0 0 6px;
}
:deep(.el-select:last-child .el-select__wrapper) {
border-radius: 0 6px 6px 0;
}
}
.task-table {
:deep(.el-table__header th) {
background-color: #f8fbff;
color: #48607f;
font-weight: bold;
}
:deep(.el-table__cell) {
border-bottom: 1px solid #edf0f5;
.cell {
line-height: normal;
}
}
}
.table-footer {
border-top: 1px solid #edf0f5;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.color-green {
color: #00a86b;
}
.color-red {
color: #f03b65;
}
.bg-green {
background-color: #00b779;
}
.bg-red {
background-color: #f03b65;
}
.bg-danger {
background-color: #ff4d2d;
}
.bg-orange {
background-color: #ff8a00;
}
.work-tag,
.soft-btn {
background-color: rgba(var(--main-color), .08);
}
.gl-btn {
background-color: rgba(var(--main-color), .08);
border: 1px solid rgba(var(--main-color), .3);
}
.hover-main {
&:hover {
color: rgba(var(--main-color), 1);
background-color: rgba(var(--main-color), .08);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment