Merge pull request 'test_任务管理v2' (#57) from test_任务管理v2 into main
Reviewed-on: ai-team/lingji-work-fe#57
This commit is contained in:
@ -32,6 +32,10 @@
|
||||
border-color: #e6e6e8 !important;
|
||||
color: #737478 !important;
|
||||
}
|
||||
&:active {
|
||||
border-color: #D7D7D9 !important;
|
||||
color: #211F24 !important;
|
||||
}
|
||||
}
|
||||
&.ant-btn-dangerous {
|
||||
border-color: $color-error !important;
|
||||
|
||||
28
src/styles/components/ant-dropdown.scss
Normal file
28
src/styles/components/ant-dropdown.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.ant-dropdown {
|
||||
.ant-dropdown-menu {
|
||||
padding: 4px 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Border-1, #d7d7d9);
|
||||
background: var(--BG-White, #fff);
|
||||
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ant-dropdown-menu-item {
|
||||
height: 36px;
|
||||
padding: 0 12px !important;
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: var(--Text-1, #211f24);
|
||||
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.active {
|
||||
.ant-dropdown-menu-title-content {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -17,3 +17,4 @@
|
||||
@import "./ant-spin.scss";
|
||||
@import "./ant-drawer.scss";
|
||||
@import "./ant-pagination.scss";
|
||||
@import "./ant-dropdown.scss";
|
||||
@ -30,34 +30,43 @@
|
||||
|
||||
<!-- 日期导航按钮 -->
|
||||
<div class="flex items-center ml-12px">
|
||||
<a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
|
||||
<template #icon><icon-left /></template>
|
||||
<a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text" size="small">
|
||||
<template #icon>
|
||||
<SvgIcon name="xt-left" size="20" class="color-#737478" />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button
|
||||
@click="navigateToToday"
|
||||
type="text"
|
||||
style="background-color: #f7f8fa !important; color: #211f24 !important; height: 28px"
|
||||
style="color: #211f24 !important"
|
||||
size="small"
|
||||
class="!bg-#f7f8fa !hover:bg-#E6E6E8"
|
||||
>今天</a-button
|
||||
>
|
||||
<a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
|
||||
<template #icon><icon-right /></template>
|
||||
<a-button class="ml-4px prv-btn" @click="navigate(1)" type="text" size="small">
|
||||
<template #icon>
|
||||
<SvgIcon name="xt-right" size="20" class="color-#737478" />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 维度切换下拉框 -->
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center ml-12px">
|
||||
<a-dropdown
|
||||
position="bottom"
|
||||
@select="handleTypeChange"
|
||||
class="w-80px"
|
||||
:popupVisible="dropdownVisible"
|
||||
@popupVisibleChange="handleDropdownVisibleChange"
|
||||
:open="dropdownVisible"
|
||||
@openChange="handleDropdownVisibleChange"
|
||||
>
|
||||
<a-button type="text" class="prv-today"> {{ choseType }}<icon-down class="ml-4px" /> </a-button>
|
||||
<template #content>
|
||||
<a-doption value="日" class="doption">日</a-doption>
|
||||
<a-doption value="周" class="doption">周</a-doption>
|
||||
<a-doption value="月" class="doption">月</a-doption>
|
||||
<a-button type="text" class="prv-today !bg-#f7f8fa !hover:bg-#E6E6E8 !px-12px">
|
||||
<span>{{ choseType }} </span>
|
||||
<SvgIcon name="xt-down" size="14" class="color-#737478" />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleTypeChange">
|
||||
<a-menu-item v-for="item in DAYS" :key="item" :class="choseType === item ? 'active' : ''"> {{ item }} </a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
@ -67,6 +76,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, defineProps, defineEmits, withDefaults, computed } from 'vue';
|
||||
import DateUtils from '@/utils/DateUtils';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
// 1. 定义Props：接收父组件初始日期配置
|
||||
interface Props {
|
||||
@ -78,6 +88,8 @@ interface Props {
|
||||
};
|
||||
}
|
||||
|
||||
const DAYS = ['日','周','月'];
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
|
||||
});
|
||||
@ -144,8 +156,10 @@ const getDateRange = (): { start: string; end: string } => {
|
||||
};
|
||||
|
||||
// 5. 维度切换处理（日/周/月）
|
||||
const handleTypeChange = (val: '日' | '周' | '月') => {
|
||||
choseType.value = val;
|
||||
const handleTypeChange = (val) => {
|
||||
const { key } = val;
|
||||
|
||||
choseType.value = key;
|
||||
// 切换维度时默认选中当天对应的维度日期
|
||||
const today = new Date();
|
||||
currentDate.value = today;
|
||||
@ -252,17 +266,16 @@ setTimeout(() => {
|
||||
}, 0);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
.prv-btn {
|
||||
background-color: #f7f8fa !important; /* 使用正确的6位十六进制颜色值 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
color: #211f24 !important;
|
||||
&:hover {
|
||||
background-color: var(--BG-300, #e6e6e8) !important;
|
||||
}
|
||||
}
|
||||
.doption {
|
||||
width: 78px !important;
|
||||
@ -270,10 +283,23 @@ setTimeout(() => {
|
||||
.prv-today {
|
||||
color: #211f24 !important;
|
||||
width: 80px !important;
|
||||
background-color: #f7f8fa !important;
|
||||
// background-color: #f7f8fa !important;
|
||||
height: 28px;
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-color: $color-primary !important;
|
||||
&:hover {
|
||||
border-color: $color-primary !important;
|
||||
color: #211f24 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-dropdown-trigger {
|
||||
&.ant-dropdown-open {
|
||||
.svg-icon {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -73,18 +73,39 @@
|
||||
<div
|
||||
v-for="item in selectedMaterials.texts"
|
||||
:key="item.id"
|
||||
class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
|
||||
class="relative flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
|
||||
@mouseenter="item.showDelete = true"
|
||||
@mouseleave="item.showDelete = false"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="flex items-center w-full">
|
||||
<img
|
||||
v-for="item in selectedMaterials.images"
|
||||
:key="item.id"
|
||||
:src="item.cover"
|
||||
class="w-88 h-88 mr-8px border-rounded-8px"
|
||||
{{ item.name || item.title || item }}
|
||||
<SvgIcon
|
||||
name="xt-close"
|
||||
size="14"
|
||||
@click="handleDeleteText(item)"
|
||||
v-show="item.showDelete"
|
||||
class="absolute top-8px right-8px w-20px h-20px cursor-pointer bg-#737478 rounded-4px p-2px color-#FFFFFF"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="grid grid-cols-4 gap-8px w-full">
|
||||
<div
|
||||
v-for="(item, index) in selectedMaterials.images"
|
||||
:key="item.id"
|
||||
class="relative w-88px h-88px"
|
||||
@mouseenter="item.showDelete = true"
|
||||
@mouseleave="item.showDelete = false"
|
||||
>
|
||||
<img :src="item.cover" class="w-full h-full rounded-8px" />
|
||||
<SvgIcon
|
||||
name="xt-close"
|
||||
size="14"
|
||||
@click="handleDeleteImage(item.id)"
|
||||
v-show="item.showDelete"
|
||||
class="absolute top--8px right--8px w-16px h-16px cursor-pointer bg-#737478 rounded-50% p-2px color-#FFFFFF"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center">
|
||||
<p class="material-hint">AI会参考添加的文本、图片、视频等素材，完成符合需求的创作</p>
|
||||
@ -118,7 +139,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-12px" v-if="selectedProducts.data.length > 0">{{ selectedProducts.data[0].title }}</div>
|
||||
<div class="mb-12px color-#939499" v-if="selectedProducts.data.length > 0">
|
||||
<div class="mb-12px color-#939499 line-clamp-2" v-if="selectedProducts.data.length > 0">
|
||||
{{ selectedProducts.data[0].content }}
|
||||
</div>
|
||||
<div v-for="item in selectedProducts.images" :key="item.id">
|
||||
@ -200,7 +221,7 @@
|
||||
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 { SwapOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { SwapOutlined, DeleteOutlined, CloseOutlined } from '@ant-design/icons-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';
|
||||
@ -369,6 +390,30 @@ const handleDelte = () => {
|
||||
images: [],
|
||||
};
|
||||
};
|
||||
|
||||
// 删除文本项
|
||||
const handleDeleteText = (id) => {
|
||||
selectedMaterials.value.texts = selectedMaterials.value.texts.filter((item) => item !== id);
|
||||
selectedMaterials.value.keys = selectedMaterials.value.keys.filter((key) => key !== id);
|
||||
|
||||
// 更新hasChoseMaterial状态
|
||||
updateHasChoseMaterial();
|
||||
};
|
||||
|
||||
// 删除图片项
|
||||
const handleDeleteImage = (id) => {
|
||||
selectedMaterials.value.images = selectedMaterials.value.images.filter((item) => item.id !== id);
|
||||
selectedMaterials.value.keys = selectedMaterials.value.keys.filter((key) => key !== id);
|
||||
|
||||
// 更新hasChoseMaterial状态
|
||||
updateHasChoseMaterial();
|
||||
};
|
||||
|
||||
// 更新hasChoseMaterial状态
|
||||
const updateHasChoseMaterial = () => {
|
||||
hasChoseMaterial.value = selectedMaterials.value.texts.length > 0 || selectedMaterials.value.images.length > 0;
|
||||
};
|
||||
|
||||
// 处理原料库选择确认
|
||||
const handleMaterialConfirm = (result) => {
|
||||
console.log('handleMaterialConfirm', result);
|
||||
@ -379,6 +424,28 @@ const handleMaterialConfirm = (result) => {
|
||||
images: result.choseImgArray,
|
||||
texts: result.selectedTexts || [],
|
||||
};
|
||||
|
||||
// 为每个文本项添加showDelete属性（如果它们是对象）
|
||||
if (selectedMaterials.value.texts.length > 0 && typeof selectedMaterials.value.texts[0] === 'object') {
|
||||
selectedMaterials.value.texts = selectedMaterials.value.texts.map((text) => ({
|
||||
...text,
|
||||
showDelete: false,
|
||||
}));
|
||||
} else {
|
||||
// 如果是字符串，则包装成对象
|
||||
selectedMaterials.value.texts = selectedMaterials.value.texts.map((text, index) => ({
|
||||
id: `text_${index}`,
|
||||
name: text,
|
||||
showDelete: false,
|
||||
}));
|
||||
}
|
||||
|
||||
// 为每个图片项添加showDelete属性
|
||||
selectedMaterials.value.images = selectedMaterials.value.images.map((image) => ({
|
||||
...image,
|
||||
showDelete: false,
|
||||
}));
|
||||
|
||||
hasChoseMaterial.value = result.selectedKeys.length > 0;
|
||||
};
|
||||
|
||||
@ -401,7 +468,7 @@ const handleProductConfirm = async (result) => {
|
||||
hasChoseFinishedProducts.value = true;
|
||||
// 取第一个选中的项目
|
||||
const selectedProduct = result.selectedRows[0];
|
||||
|
||||
|
||||
// 获取成品详情
|
||||
try {
|
||||
const res = await getWorkDetail(selectedProduct.id);
|
||||
@ -411,7 +478,7 @@ const handleProductConfirm = async (result) => {
|
||||
keys: [workDetail.id],
|
||||
data: [workDetail],
|
||||
text: workDetail.title || '1个稿件',
|
||||
images: workDetail.files ? workDetail.files.filter(f => f.type === 0) : [], // 图片文件
|
||||
images: workDetail.files ? workDetail.files.filter((f) => f.type === 0) : [], // 图片文件
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
@ -493,7 +560,7 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
|
||||
if (accountInfo && accountInfo.id) {
|
||||
nextTick(() => {
|
||||
// 查找账号列表中匹配的账号，包含平台信息和图标
|
||||
const matchedAccount = accountList.value.find(account => account.value === accountInfo.id);
|
||||
const matchedAccount = accountList.value.find((account) => account.value === accountInfo.id);
|
||||
if (matchedAccount) {
|
||||
localQuery.value.accounts = [matchedAccount.name];
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
@ -505,20 +572,24 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
} else {
|
||||
// 账号列表尚未加载，等待加载完成后再设置
|
||||
const unwatch = watch(accountList, (newAccountList) => {
|
||||
if (newAccountList.length > 0) {
|
||||
const matched = newAccountList.find(account => account.value === accountInfo.id);
|
||||
if (matched) {
|
||||
localQuery.value.accounts = [matched.name];
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
} else {
|
||||
localQuery.value.accounts = [`${accountInfo.name}(${getPlatformName(accountInfo.platform)})`];
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
const unwatch = watch(
|
||||
accountList,
|
||||
(newAccountList) => {
|
||||
if (newAccountList.length > 0) {
|
||||
const matched = newAccountList.find((account) => account.value === accountInfo.id);
|
||||
if (matched) {
|
||||
localQuery.value.accounts = [matched.name];
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
} else {
|
||||
localQuery.value.accounts = [`${accountInfo.name}(${getPlatformName(accountInfo.platform)})`];
|
||||
localQuery.value.ids = [accountInfo.id];
|
||||
}
|
||||
// 取消监听
|
||||
unwatch();
|
||||
}
|
||||
// 取消监听
|
||||
unwatch();
|
||||
}
|
||||
}, { immediate: true });
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -535,7 +606,7 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
|
||||
const fillTaskData = async (taskData) => {
|
||||
// 如果传入的数据包含完整信息，则直接使用，否则获取详情
|
||||
let fullTaskData = taskData;
|
||||
|
||||
|
||||
// 如果没有work或raw_materials等详细信息，则需要获取完整详情
|
||||
if ((!taskData.work && !taskData.raw_materials) || taskData.id) {
|
||||
try {
|
||||
@ -547,7 +618,7 @@ const fillTaskData = async (taskData) => {
|
||||
console.error('获取任务详情失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 设置账号信息
|
||||
if (fullTaskData.media_account) {
|
||||
nextTick(() => {
|
||||
@ -555,15 +626,15 @@ const fillTaskData = async (taskData) => {
|
||||
localQuery.value.ids = [fullTaskData.media_account.id];
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 设置AI生成或成品库选择
|
||||
isActive.value = fullTaskData.is_ai_generate ? 'ai' : 'chose';
|
||||
|
||||
|
||||
// 设置任务描述（AI生成时）
|
||||
if (fullTaskData.is_ai_generate && fullTaskData.ai_prompt) {
|
||||
taskDescription.value = fullTaskData.ai_prompt;
|
||||
}
|
||||
|
||||
|
||||
// 设置发布时间
|
||||
if (fullTaskData.publish_type === 1 && fullTaskData.execution_time) {
|
||||
// 定时发布
|
||||
@ -575,20 +646,20 @@ const fillTaskData = async (taskData) => {
|
||||
// 立即发布
|
||||
publishType.value = 'immediate';
|
||||
}
|
||||
|
||||
|
||||
// 设置选中的素材（AI生成时）
|
||||
if (fullTaskData.is_ai_generate && fullTaskData.raw_materials && fullTaskData.raw_materials.length > 0) {
|
||||
const materials = fullTaskData.raw_materials;
|
||||
selectedMaterials.value = {
|
||||
keys: materials.map(m => m.id),
|
||||
keys: materials.map((m) => m.id),
|
||||
data: materials,
|
||||
text: '',
|
||||
images: materials.filter(m => m.type === 0), // 图片
|
||||
texts: materials.filter(m => m.type === 2), // 文本
|
||||
images: materials.filter((m) => m.type === 0), // 图片
|
||||
texts: materials.filter((m) => m.type === 2), // 文本
|
||||
};
|
||||
hasChoseMaterial.value = materials.length > 0;
|
||||
}
|
||||
|
||||
|
||||
// 设置选中的成品（成品库选择时）
|
||||
if (!fullTaskData.is_ai_generate && fullTaskData.work) {
|
||||
const work = fullTaskData.work;
|
||||
@ -596,7 +667,7 @@ const fillTaskData = async (taskData) => {
|
||||
keys: [work.id],
|
||||
data: [work],
|
||||
text: work.title || '1个稿件',
|
||||
images: work.files ? work.files.filter(f => f.type === 0) : [], // 图片文件
|
||||
images: work.files ? work.files.filter((f) => f.type === 0) : [], // 图片文件
|
||||
};
|
||||
hasChoseFinishedProducts.value = true;
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="flex-column justify-between bg-#fff rounded-8px p-24px">
|
||||
<div class="flex flex-col justify-between bg-white rounded-8px p-24px">
|
||||
<!-- 日期选择器和筛选区域 -->
|
||||
<div class="flex justify-between items-start w-full">
|
||||
<div class="flex justify-between items-start w-full mb-24px">
|
||||
<DateSelector v-model="dateSelectorModel" @date-change="handleDateSelectorChange" />
|
||||
<div class="flex items-start">
|
||||
<colorTip />
|
||||
<div class="flex items-start gap-12px">
|
||||
<ColorTip />
|
||||
<FilterPopup
|
||||
:operators="operators"
|
||||
:platformOptions="platformOptions"
|
||||
@ -12,82 +12,76 @@
|
||||
:query="query"
|
||||
@filter-change="handleFilterChange"
|
||||
/>
|
||||
<Button type="primary" class="w-112px" size="middle" @click="handleAddTask">
|
||||
<template #default>创建任务</template>
|
||||
</Button>
|
||||
<a-button type="primary" class="w-112px" size="middle" @click="handleAddTask"> 创建任务 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容区域 -->
|
||||
<div class="flex justify-between items-start w-full">
|
||||
<div class="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
|
||||
<div class="flex-1 w-full">
|
||||
<div class="flex flex-col" style="width: 100%; overflow-x: auto">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:bordered="{ cell: true }"
|
||||
:data-source="data"
|
||||
:bordered="true"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
style="width: 100%"
|
||||
:pagination="false"
|
||||
:locale="{ emptyText: emptyText }"
|
||||
@change="handleTableChange"
|
||||
@cell-click="handleCellClick"
|
||||
>
|
||||
<!-- 空数据显示 -->
|
||||
<template #empty>
|
||||
<div class="flex flex-col items-center justify-center" style="min-height: 400px">
|
||||
<img :src="emptyIcon" class="img mt-20px" alt="暂无数据" width="106" height="72" />
|
||||
<div class="text mt-36px">暂无数据</div>
|
||||
<div class="mt-12px mb-12px">可通过账号管理添加账号，进行任务排期管理</div>
|
||||
<a-button type="primary" @click="handleAddAccount">去添加</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 账号与平台列 -->
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center justify-start">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
|
||||
:alt="getPlatformName(record.platform)"
|
||||
/>
|
||||
{{ record.name || '-' }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 动态日期单元格 -->
|
||||
<template #dateCell="{ record, column }">
|
||||
<div v-if="record[column.dataIndex]?.length" class="task-container">
|
||||
<!-- 任务数量≥3时显示更多 -->
|
||||
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
|
||||
<TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
|
||||
<a-trigger trigger="click" position="br">
|
||||
<div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
|
||||
还有{{ record[column.dataIndex].length - 1 }}项
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="bg-#fff w-160px p-12px rounded-4px flex flex-col more-content">
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</div>
|
||||
<!-- 任务数量<3时直接显示 -->
|
||||
<div v-else>
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<!-- 账号名称列 -->
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<div class="flex items-center justify-start color-#211F24">
|
||||
<img
|
||||
:src="getPlatformIcon(record.platform)"
|
||||
class="w-16px h-16px mr-8px rounded-4px"
|
||||
:alt="getPlatformName(record.platform)"
|
||||
/>
|
||||
{{ record.name || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-task"></div>
|
||||
</template>
|
||||
|
||||
<!-- 动态日期单元格 -->
|
||||
<template v-else-if="column.dataIndex === 'dateCell'">
|
||||
<div
|
||||
v-if="record[column.dataIndex]?.length"
|
||||
class="task-container"
|
||||
@click="handleCellClick(record, column)"
|
||||
>
|
||||
<!-- 任务数量≥3时显示更多 -->
|
||||
<div v-if="record[column.dataIndex].length >= 3" class="task-more">
|
||||
<TaskItem :task="record[column.dataIndex][0]" :record="record" @handle-task="handleTaskAction" />
|
||||
<a-popover trigger="click" placement="bottomRight">
|
||||
<template #content>
|
||||
<div class="bg-white w-160px p-12px rounded-4px flex flex-col more-content">
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex].slice(1)"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="size-12px color-#8f959f h-19px ml-4px rounded-2px cursor-pointer" @click.stop>
|
||||
还有{{ record[column.dataIndex].length - 1 }}项
|
||||
</div>
|
||||
</a-popover>
|
||||
</div>
|
||||
<!-- 任务数量<3时直接显示 -->
|
||||
<div v-else>
|
||||
<TaskItem
|
||||
v-for="task in record[column.dataIndex]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:record="record"
|
||||
@handle-task="handleTaskAction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-task" @click="handleCellClick(record, column)"></div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
@ -95,38 +89,48 @@
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
size="small"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
show-size-changer
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除确认弹窗 -->
|
||||
<a-modal v-model:visible="showModal" @ok="handleDeleteConfirm" @cancel="showModal = false" ok-text="确认删除">
|
||||
<template #title>{{ deleteTitle }}</template>
|
||||
<a-modal
|
||||
v-model:open="showModal"
|
||||
@ok="handleDeleteConfirm"
|
||||
@cancel="showModal = false"
|
||||
ok-text="确认删除"
|
||||
:title="deleteTitle"
|
||||
>
|
||||
<div>{{ deleteContent }}</div>
|
||||
</a-modal>
|
||||
<DrowPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
|
||||
|
||||
<DrawPopup ref="drawerPopupRef" @create-task="handleCreateTask" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, computed, inject } from 'vue';
|
||||
import type { ColumnProps } from 'ant-design-vue/es/table';
|
||||
import { ref, reactive, onMounted, computed, nextTick, h } from 'vue';
|
||||
import { Table, Button, Popover, Pagination, Modal, notification, message } from 'ant-design-vue';
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
import router from '@/router';
|
||||
import DateUtils from '@/utils/DateUtils';
|
||||
|
||||
// 组件引入
|
||||
import DateSelector from './components/date-selector.vue';
|
||||
import colorTip from './components/colorTip.vue';
|
||||
import ColorTip from './components/colorTip.vue';
|
||||
import FilterPopup from './components/filter-popup.vue';
|
||||
import DrowPopup from './components/draw-popup.vue';
|
||||
import DrawPopup from './components/draw-popup.vue';
|
||||
import TaskItem from './components/task-item.vue';
|
||||
|
||||
// API引入
|
||||
import {
|
||||
getTaskSchedules,
|
||||
@ -136,8 +140,10 @@ import {
|
||||
generateContent,
|
||||
} from '@/api/all/assignment-management';
|
||||
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
|
||||
|
||||
// 工具引入
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
|
||||
// 静态资源
|
||||
import emptyIcon from '@/assets/img/media-account/icon-empty.png';
|
||||
// 平台图标
|
||||
@ -149,8 +155,7 @@ import iconSph from '@/assets/img/platform/icon-sph.png';
|
||||
import iconWb from '@/assets/img/platform/icon-wb.png';
|
||||
import iconGzh from '@/assets/img/platform/icon-gzh.png';
|
||||
import iconWarn from '@/assets/img/media-account/icon-warn.png';
|
||||
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
// 表格分页逻辑
|
||||
const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
|
||||
onPageChange: () => handleSearch(),
|
||||
@ -164,7 +169,8 @@ const dateSelectorModel = ref({
|
||||
weekModel: new Date(),
|
||||
monthModel: new Date(),
|
||||
});
|
||||
const columns = ref<ColumnProps[]>([]);
|
||||
|
||||
const columns = ref<TableProps['columns']>([]);
|
||||
const data = ref<any[]>([]);
|
||||
const operators = ref([]);
|
||||
const accountList = ref([]);
|
||||
@ -172,6 +178,17 @@ const showModal = ref(false);
|
||||
const currentTask = ref<any>(null);
|
||||
const deleteTitle = ref('');
|
||||
const deleteContent = ref('');
|
||||
const drawerPopupRef = ref();
|
||||
|
||||
// 空状态显示
|
||||
const emptyText = () => {
|
||||
return h('div', { class: 'flex flex-col items-center justify-center', style: { minHeight: '600px' } }, [
|
||||
h('img', { src: emptyIcon, class: 'img mt-20px', alt: '暂无数据', width: 106, height: 72 }),
|
||||
h('div', { class: 'text mt-36px' }, '暂无数据'),
|
||||
h('div', { class: 'mt-12px mb-12px' }, '可通过账号管理添加账号，进行任务排期管理'),
|
||||
h(Button, { type: 'primary', onClick: handleAddAccount }, '去添加'),
|
||||
]);
|
||||
};
|
||||
|
||||
// 获取当前周的日期范围
|
||||
const getCurrentWeekRange = () => {
|
||||
@ -186,7 +203,7 @@ const query = reactive({
|
||||
platforms: undefined,
|
||||
operator_ids: undefined,
|
||||
ids: [],
|
||||
execution_time: getCurrentWeekRange(), // 设置默认值为当前周
|
||||
execution_time: getCurrentWeekRange(),
|
||||
top_execution_time: undefined,
|
||||
});
|
||||
|
||||
@ -204,6 +221,7 @@ const platformConfig = {
|
||||
{ id: 6, name: '公众号', icon: iconGzh },
|
||||
],
|
||||
};
|
||||
|
||||
const platformOptions = ref(platformConfig.options);
|
||||
|
||||
// 工具函数
|
||||
@ -230,6 +248,7 @@ const processTableData = (apiData: any[]) => {
|
||||
dateHeaders.forEach((day) => {
|
||||
rowData[day] = [];
|
||||
});
|
||||
|
||||
// 分配任务到对应日期列
|
||||
if (account.task_schedules?.length) {
|
||||
account.task_schedules.forEach((task: any) => {
|
||||
@ -246,34 +265,19 @@ const processTableData = (apiData: any[]) => {
|
||||
return processedData;
|
||||
};
|
||||
|
||||
// 创建任务
|
||||
const handleAddTask = () => {
|
||||
drawerPopupRef.value?.showDrawer();
|
||||
};
|
||||
|
||||
const handleCreateTask = async (value) => {
|
||||
const res = await createTask(value);
|
||||
if (res && res.code === 200) {
|
||||
message.success('创建成功');
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
// 添加对DrowPopup组件的引用
|
||||
const drawerPopupRef = ref();
|
||||
|
||||
// 设置表格列
|
||||
const setTableColumns = () => {
|
||||
columns.value = [
|
||||
const baseColumns: TableProps['columns'] = [
|
||||
{
|
||||
title: '账号与发布平台',
|
||||
slotName: 'name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
fixed: 'left', // 固定列
|
||||
fixed: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
let dateHeaders: any[] = [];
|
||||
const { choseType } = dateSelectorModel.value;
|
||||
|
||||
@ -306,46 +310,95 @@ const setTableColumns = () => {
|
||||
// 添加日期列
|
||||
dateHeaders.forEach((item) => {
|
||||
const isWeekend = item.date?.getDay() === 0 || item.date?.getDay() === 6;
|
||||
// 确保item.date存在再进行判断
|
||||
const todayFlag = item.date ? isToday(item.date) : false;
|
||||
|
||||
// 调试信息
|
||||
if (todayFlag) {
|
||||
console.log('Today column detected:', item);
|
||||
console.log('Today flag value:', todayFlag);
|
||||
}
|
||||
|
||||
const columnConfig = {
|
||||
title: `${item.weekday}`,
|
||||
dataIndex: item.day,
|
||||
slotName: 'dateCell',
|
||||
date: item.date,
|
||||
const columnConfig: any = {
|
||||
title: item.weekday,
|
||||
dataIndex: item.day.toString(),
|
||||
key: item.day.toString(),
|
||||
width: 135,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
sorter: true,
|
||||
sorter: true,
|
||||
customRender: ({ text, record, index }) => {
|
||||
if (!text || !text.length) {
|
||||
return h('div', { class: 'no-task' });
|
||||
}
|
||||
|
||||
if (text.length >= 3) {
|
||||
return h('div', { class: 'task-more' }, [
|
||||
h(TaskItem, {
|
||||
task: text[0],
|
||||
record: record,
|
||||
onHandleTask: handleTaskAction,
|
||||
}),
|
||||
h(
|
||||
Popover,
|
||||
{
|
||||
trigger: 'click',
|
||||
placement: 'bottomRight',
|
||||
},
|
||||
{
|
||||
content: () =>
|
||||
h(
|
||||
'div',
|
||||
{ class: 'more-content' },
|
||||
text.slice(1).map((task) =>
|
||||
h(TaskItem, {
|
||||
task: task,
|
||||
record: record,
|
||||
onHandleTask: handleTaskAction,
|
||||
}),
|
||||
),
|
||||
),
|
||||
default: () =>
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'task-more-indicator',
|
||||
onClick: (e: Event) => e.stopPropagation(),
|
||||
},
|
||||
`还有${text.length - 1}项`,
|
||||
),
|
||||
},
|
||||
),
|
||||
]);
|
||||
}
|
||||
|
||||
return h(
|
||||
'div',
|
||||
{},
|
||||
text.map((task) =>
|
||||
h(TaskItem, {
|
||||
task: task,
|
||||
record: record,
|
||||
onHandleTask: handleTaskAction,
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
weekday: item.weekday,
|
||||
todayFlag,
|
||||
// 为周末设置特定的背景色
|
||||
cellClass: isWeekend ? 'weekend-column' : '',
|
||||
// 为今日添加特殊类名
|
||||
class: todayFlag ? 'today-column' : '',
|
||||
onCell: (record, index) => ({
|
||||
style: {
|
||||
backgroundColor: isWeekend ? '#fbfaff' : todayFlag ? '#6d4cfe' : 'transparent',
|
||||
},
|
||||
class: todayFlag ? 'today-column' : isWeekend ? 'weekend-column' : '',
|
||||
}),
|
||||
onHeaderCell: () => ({
|
||||
style: {
|
||||
backgroundColor: todayFlag ? '#6d4cfe' : 'transparent',
|
||||
color: todayFlag ? 'white' : 'inherit',
|
||||
},
|
||||
class: todayFlag ? 'today-column' : '',
|
||||
}),
|
||||
};
|
||||
|
||||
// 更多调试信息
|
||||
if (todayFlag) {
|
||||
console.log('Column config for today:', columnConfig);
|
||||
}
|
||||
|
||||
columns.value.push(columnConfig);
|
||||
baseColumns.push(columnConfig);
|
||||
});
|
||||
|
||||
columns.value = baseColumns;
|
||||
};
|
||||
|
||||
// 当前日期头部计算
|
||||
const currentDateHeaders = computed(() => {
|
||||
const { choseType } = dateSelectorModel.value;
|
||||
|
||||
if (choseType === '周') {
|
||||
return DateUtils.getWeekDaysByDate(dateSelectorModel.value.weekModel, 0).map((item) =>
|
||||
parseInt(item.day.toString(), 10),
|
||||
@ -364,6 +417,7 @@ const currentDateHeaders = computed(() => {
|
||||
const handleSearch = () => {
|
||||
query.page = pageInfo.value.page;
|
||||
query.page_size = pageInfo.value.page_size;
|
||||
|
||||
getTaskSchedules(query)
|
||||
.then((response) => {
|
||||
if (response.data) {
|
||||
@ -379,46 +433,33 @@ const handleSearch = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 添加一个标志位来避免死循环
|
||||
let isDateSelectorUpdating = false;
|
||||
// 日期选择器变化处理
|
||||
let isDateSelectorUpdating = false;
|
||||
const handleDateSelectorChange = (value: any) => {
|
||||
// 如果正在更新中，则跳过
|
||||
if (isDateSelectorUpdating) {
|
||||
return;
|
||||
}
|
||||
if (isDateSelectorUpdating) return;
|
||||
|
||||
const newStartDate = value.dateRange.start;
|
||||
const newEndDate = value.dateRange.end;
|
||||
|
||||
// 添加空值检查以避免数组越界错误
|
||||
const currentStart =
|
||||
Array.isArray(query.execution_time) && query.execution_time.length > 0 ? query.execution_time[0] : null;
|
||||
const currentEnd =
|
||||
Array.isArray(query.execution_time) && query.execution_time.length > 1 ? query.execution_time[1] : null;
|
||||
|
||||
// 如果日期范围没有变化，则不执行后续操作
|
||||
if (currentStart === newStartDate && currentEnd === newEndDate) {
|
||||
return;
|
||||
}
|
||||
if (currentStart === newStartDate && currentEnd === newEndDate) return;
|
||||
|
||||
// 设置标志位
|
||||
isDateSelectorUpdating = true;
|
||||
|
||||
query.execution_time = [newStartDate, newEndDate];
|
||||
setTableColumns();
|
||||
handleSearch();
|
||||
|
||||
// 在下一个事件循环重置标志位
|
||||
setTimeout(() => {
|
||||
isDateSelectorUpdating = false;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
// 筛选条件变化处理
|
||||
|
||||
const handleFilterChange = (filters: any) => {
|
||||
console.log(filters);
|
||||
if (typeof filters === 'object' && filters !== null) {
|
||||
Object.keys(filters).forEach((key) => {
|
||||
switch (key) {
|
||||
@ -435,59 +476,54 @@ const handleFilterChange = (filters: any) => {
|
||||
query[key] = filters[key];
|
||||
}
|
||||
});
|
||||
console.log(query);
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
// 表格排序变化
|
||||
const handleTableChange = (pagination: any, sorter: any) => {
|
||||
if (sorter && sorter.sorter?.direction === 'ascend' && sorter.sorter?.field) {
|
||||
const column = columns.value.find((col) => col.dataIndex == sorter.sorter.field);
|
||||
if (column?.date) {
|
||||
query.top_execution_time = DateUtils.formatDate(column.date);
|
||||
}
|
||||
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
||||
if (sorter && sorter.order === 'ascend' && sorter.column?.date) {
|
||||
const column = sorter.column;
|
||||
query.top_execution_time = DateUtils.formatDate(column.date);
|
||||
} else {
|
||||
query.top_execution_time = undefined;
|
||||
}
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
const handleCellClick = (record: any, rowIndex: any, column: any) => {
|
||||
// 单元格点击事件
|
||||
const handleCellClick = (record: any, column: any) => {
|
||||
const accountInfo = {
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
platform: record.platform,
|
||||
};
|
||||
const selectedDate = rowIndex.date;
|
||||
|
||||
// 检查选中的日期是否小于今天，如果是则不处理
|
||||
const selectedDate = column.date;
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const selectedDateTime = new Date(selectedDate);
|
||||
selectedDateTime.setHours(0, 0, 0, 0);
|
||||
|
||||
if (selectedDateTime < today) {
|
||||
console.log('选择的日期已过去，不打开抽屉');
|
||||
message.warning('选择的日期已过去，无法创建任务');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('selectedDate', selectedDate, accountInfo);
|
||||
drawerPopupRef.value.showDrawer(accountInfo, selectedDate);
|
||||
drawerPopupRef.value?.showDrawer(accountInfo, selectedDate);
|
||||
};
|
||||
|
||||
// 任务操作处理
|
||||
const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
|
||||
console.log('handleTaskAction', action, task, args);
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
currentTask.value = task;
|
||||
deleteTitle.value = task.type === 1 ? '删除内容稿件排期' : '删除选题排期';
|
||||
deleteContent.value = `确认删除“${task.name || 'AI生成内容'}”吗？`;
|
||||
deleteContent.value = `确认删除"${task.name || 'AI生成内容'}"吗？`;
|
||||
showModal.value = true;
|
||||
break;
|
||||
|
||||
case 'edit-time':
|
||||
console.log('handleTaskAction edit-time', task, args);
|
||||
editTaskSchedulesTime(task.id, { execution_time: args[0] }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
message.success(res.message);
|
||||
@ -495,17 +531,19 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'goto-detail':
|
||||
router.push(`/media-account/management-detail/${task.id}`);
|
||||
break;
|
||||
|
||||
case 'ai-create':
|
||||
const res = await generateContent(task.id);
|
||||
if (res.code === 200) {
|
||||
message.success(res.message);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'edit-task':
|
||||
console.log('edit-task', args[0], typeof args[0]);
|
||||
const accountInfo = {
|
||||
id: args[0].id,
|
||||
name: args[0].name,
|
||||
@ -514,23 +552,33 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
|
||||
const selectedDate = task.execution_time;
|
||||
const date = new Date(selectedDate);
|
||||
|
||||
// 显示抽屉
|
||||
drawerPopupRef.value.showDrawer(accountInfo, date);
|
||||
|
||||
// 等待抽屉打开后再填充数据
|
||||
drawerPopupRef.value?.showDrawer(accountInfo, date);
|
||||
nextTick(() => {
|
||||
// 将任务信息回填到draw-popup组件
|
||||
drawerPopupRef.value.fillTaskData(task);
|
||||
drawerPopupRef.value?.fillTaskData(task);
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 创建任务
|
||||
const handleAddTask = () => {
|
||||
drawerPopupRef.value?.showDrawer();
|
||||
};
|
||||
|
||||
const handleCreateTask = async (value: any) => {
|
||||
const res = await createTask(value);
|
||||
if (res && res.code === 200) {
|
||||
message.success('创建成功');
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
// 确认删除
|
||||
const handleDeleteConfirm = () => {
|
||||
if (currentTask.value) {
|
||||
delTaskSchedules(currentTask.value.id).then(() => {
|
||||
showModal.value = false;
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
});
|
||||
}
|
||||
@ -538,7 +586,6 @@ const handleDeleteConfirm = () => {
|
||||
|
||||
// 添加账号
|
||||
const handleAddAccount = () => {
|
||||
// 跳转到添加账号页面的逻辑
|
||||
router.push('/media-account/add');
|
||||
};
|
||||
|
||||
@ -574,9 +621,17 @@ const getAccountList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 分页处理
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
onPageChange(page);
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (current: number, size: number) => {
|
||||
onPageSizeChange(size);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 确保在初始化时设置表格列和执行搜索
|
||||
setTableColumns();
|
||||
handleSearch();
|
||||
getOperators();
|
||||
@ -589,6 +644,8 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
@ -603,7 +660,15 @@ onMounted(() => {
|
||||
.task-more {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.task-more-indicator {
|
||||
color: #8f959f;
|
||||
height: 19px;
|
||||
margin-left: 4px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.no-task {
|
||||
@ -611,6 +676,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 周末列样式 */
|
||||
@ -619,52 +685,59 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 今日列样式 */
|
||||
:deep(th.today-column),
|
||||
:deep(td.today-column) {
|
||||
:deep(.today-column) {
|
||||
background-color: #6d4cfe !important;
|
||||
}
|
||||
|
||||
:deep(th.today-column) .arco-table-th-item,
|
||||
:deep(th.today-column) .arco-table-th-item-title {
|
||||
color: #6d4cfe !important;
|
||||
background-color: white !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(th.today-column) .arco-table-th-item-title {
|
||||
color: #6d4cfe !important;
|
||||
}
|
||||
|
||||
/* 只对 td 单元格应用样式，避免影响表头 */
|
||||
:deep(td .arco-table-cell) {
|
||||
padding: 0px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
:deep(td .arco-table-cell:first-child) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(td.today-column) .arco-table-cell-wrap {
|
||||
:deep(.today-column .ant-table-cell) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* 抽屉左侧圆角样式 */
|
||||
:deep(.rounded-left .ant-drawer-content) {
|
||||
border-top-left-radius: 8px !important;
|
||||
border-bottom-left-radius: 8px !important;
|
||||
:deep(.today-column .ant-table-cell .task-item) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* 任务弹出框样式 */
|
||||
:deep(.task-popup-content) {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
/* 添加表格分割线和固定行高 */
|
||||
:deep(.ant-table) {
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
:deep(.ant-table-container) {
|
||||
border-left: 1px solid #f0f0f0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
border-right: 1px solid #f0f0f0 !important;
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
height: 42px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-right: 1px solid #f0f0f0 !important;
|
||||
height: 42px;
|
||||
padding: 8px 12px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 第一列垂直居中 */
|
||||
:deep(.ant-table-tbody > tr > td:first-child) {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
/* 移除最后一列的右边框 */
|
||||
:deep(.ant-table-thead > tr > th:last-child),
|
||||
:deep(.ant-table-tbody > tr > td:last-child) {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.task-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 分页样式 */
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
@ -674,17 +747,11 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 下拉框样式优化 */
|
||||
:deep(.arco-dropdown-open .arco-icon-down) {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.more-content {
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
|
||||
/* Shadow 2 */
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user