添加左侧的侧边栏

src/views/property-marketing/assignment-management/components/draw-popup.vue

@@ -0,0 +1,33 @@
+<template>
+  <a-drawer
+    title="创建任务"
+    cancel-text="取消"
+    ok-text="创建任务"
+    placement="right"
+    v-model:visible="showDriwer"
+    @after-visible-change="showDriwerChange"
+    width="480px"
+    class="rounded-left"
+  >
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const showDriwer = ref(false);
+
+// 暴露方法给父组件
+const showDrawer = () => {
+  showDriwer.value = true;
+};
+
+const showDriwerChange = (visible: boolean) => {
+  console.log('Drawer visible: ', visible);
+};
+
+// 使用defineExpose暴露方法
+defineExpose({
+  showDrawer
+});
+</script>

src/views/property-marketing/assignment-management/index.vue

@@ -20,7 +20,7 @@
 
     <!-- 表格内容区域 -->
     <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="table-wrap py-24px flex flex-col" style="width: 100%; overflow-x: auto">
         <a-table
           :columns="columns"
           :data="data"
@@ -110,10 +110,11 @@
     <template #title>{{ deleteTitle }}</template>
     <div>{{ deleteContent }}</div>
   </a-modal>
+  <DrowPopup ref="drawerPopupRef" />
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, computed } from 'vue';
+import { ref, reactive, onMounted, computed, inject } from 'vue';
 import type { ColumnProps } from 'ant-design-vue/es/table';
 import router from '@/router';
 import DateUtils from '@/utils/DateUtils';
@@ -121,6 +122,7 @@ import DateUtils from '@/utils/DateUtils';
 import DateSelector from './components/date-selector.vue';
 import colorTip from './components/colorTip.vue';
 import FilterPopup from './components/filter-popup.vue';
+import DrowPopup from './components/draw-popup.vue';
 // API引入
 import { getTaskSchedules, delTaskSchedules, editTaskSchedules } from '@/api/all/assignment-management';
 import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
@@ -211,6 +213,13 @@ const timestampToDayNumber = (timestamp: number) => {
   return new Date(timestamp * 1000).getDate();
 };
 
+// // 获取任务列表
+// const handleSearch = async () => {
+//   const { data: accountData } = await fetchAccountOperators();
+//   const { data: mediaAccountData } = await getMediaAccountList();
+//   operators.value = accountData;
+//   accountList.value = mediaAccountData;
+// };
 // const timestampToTime = (timestamp: number): string => {
 //   const date = new Date(timestamp * 1000);
 //   return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -255,7 +264,14 @@ const processTableData = (apiData: any[]) => {
 };
 
 // 创建任务
-const handleAddTask = () => {};
+const handleAddTask = () => {
+  console.log('handleAddTask');
+  drawerPopupRef.value?.showDrawer();
+};
+
+// 添加对DrowPopup组件的引用
+const drawerPopupRef = ref();
+
 // 设置表格列
 const setTableColumns = () => {
   columns.value = [
@@ -302,7 +318,7 @@ const setTableColumns = () => {
     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);
@@ -326,12 +342,12 @@ const setTableColumns = () => {
       // 为今日添加特殊类名
       class: todayFlag ? 'today-column' : '',
     };
-    
+
     // 更多调试信息
     if (todayFlag) {
       console.log('Column config for today:', columnConfig);
     }
-    
+
     columns.value.push(columnConfig);
   });
 };
@@ -553,39 +569,34 @@ onMounted(() => {
 
 /* 周末列样式 */
 :deep(.weekend-column) {
-  background-color: #FBFAFF !important;
+  background-color: #fbfaff !important;
 }
 
 /* 今日列样式 */
 :deep(th.today-column),
 :deep(td.today-column) {
-  background-color: #6D4CFE !important;
+  background-color: #6d4cfe !important;
-  color: white !important;
 }
 
 :deep(th.today-column) .arco-table-th-item,
 :deep(th.today-column) .arco-table-th-item-title {
-  color: #6D4CFE !important;
+  color: #6d4cfe !important;
   background-color: white !important;
   font-weight: bold;
 }
 
+:deep(th.today-column) .arco-table-th-item-title {
+  color: #6d4cfe !important;
+}
+
 :deep(td.today-column) .arco-table-cell-wrap {
   color: white !important;
 }
 
-/* 表头今日样式增强 */
+/* 抽屉左侧圆角样式 */
-:deep(th.today-column) {
+:deep(.rounded-left .ant-drawer-content) {
-  background-color: #6D4CFE !important;
+  border-top-left-radius: 8px !important;
-}
+  border-bottom-left-radius: 8px !important;
-
-:deep(th.today-column .arco-table-th-item) {
-  background-color: white !important;
-  color: #6D4CFE !important;
-}
-
-:deep(td.today-column) {
-  background-color: #6D4CFE !important;
 }
 
 /* 分页样式 */