From 1ccf8b991e89e1badc04dfc2fccb799333e2115f Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Mon, 15 Sep 2025 20:26:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A6=E4=BE=A7=E7=9A=84?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/draw-popup.vue                 | 33 +++++++++++
 .../assignment-management/index.vue           | 55 +++++++++++--------
 2 files changed, 66 insertions(+), 22 deletions(-)
 create mode 100644 src/views/property-marketing/assignment-management/components/draw-popup.vue

diff --git a/src/views/property-marketing/assignment-management/components/draw-popup.vue b/src/views/property-marketing/assignment-management/components/draw-popup.vue
new file mode 100644
index 0000000..1585103
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/property-marketing/assignment-management/index.vue b/src/views/property-marketing/assignment-management/index.vue
index 0e3c90a..bc48ba2 100644
--- a/src/views/property-marketing/assignment-management/index.vue
+++ b/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;
-  color: white !important;
+  background-color: #6d4cfe !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) {
-  background-color: #6D4CFE !important;
-}
-
-:deep(th.today-column .arco-table-th-item) {
-  background-color: white !important;
-  color: #6D4CFE !important;
-}
-
-:deep(td.today-column) {
-  background-color: #6D4CFE !important;
+/* 抽屉左侧圆角样式 */
+:deep(.rounded-left .ant-drawer-content) {
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
 }
 
 /* 分页样式 */