From 2e7b6ad08ae107e34cb7898b7fa2942d236aadf4 Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Sat, 23 Dec 2023 13:44:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=85=AC=E5=8F=B8=E8=A1=A8?=
 =?UTF-8?q?=E4=B8=8D=E5=BF=85=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/calendar.vue     | 149 +++++++++++++++++++++++++++
 src/views/task/editTow.vue      | 133 +-----------------------
 src/views/task/taskCalendar.vue | 175 ++++++++++++--------------------
 3 files changed, 216 insertions(+), 241 deletions(-)
 create mode 100644 src/views/task/calendar.vue

diff --git a/src/views/task/calendar.vue b/src/views/task/calendar.vue
new file mode 100644
index 0000000..8fc8ce2
--- /dev/null
+++ b/src/views/task/calendar.vue
@@ -0,0 +1,149 @@
+<template>
+  <div id="example-simple">
+    <calendar-view
+      :show-date="showDate"
+      class="holiday-us-traditional holiday-us-official holiday-ue theme-gcal"
+      :enable-drag-drop="false"
+      :item-top="themeOptions.top"
+      :item-content-height="themeOptions.height"
+      :item-border-height="themeOptions.border"
+      @click-item="clickItems"
+      @click-date="clickDate"
+      :items="taskList"
+      :current-period-label="'今日'"
+    >
+      <template #header="{ headerProps }">
+        <calendar-view-header
+          :header-props="headerProps"
+          :previous-year-label="themeOptions.previousYearLabel"
+          :previous-period-label="themeOptions.previousPeriodLabel"
+          :next-period-label="themeOptions.nextPeriodLabel"
+          :next-year-label="themeOptions.nextYearLabel"
+          @input="setShowDate"
+        />
+      </template>
+    </calendar-view>
+  </div>
+</template>
+  
+<script lang="ts" setup name="task">
+// 日历组件
+import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
+
+const showDate = ref(new Date());
+const setShowDate = (d) => {
+  showDate.value = d;
+  emits("initShowDate", d);
+};
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const taskList = computed(() => {
+  let arr: any = [];
+  props.list.forEach((item: any) => {
+    arr.push({
+      id: item.id,
+      title: item.template_name,
+      startDate: new Date(item.start_time),
+      endDate: new Date(item.end_time),
+    });
+  });
+  return arr;
+});
+
+const emits = defineEmits(["clickItem", "initShowDate"]);
+
+const clickItems = (e) => {
+  emits("clickItem", e.id);
+};
+
+const clickDate = (e) => {
+  console.log(e);
+};
+
+const themeOptions = computed((): any => {
+  return {
+    top: "2.6em",
+    height: "2.1em",
+    border: "0px",
+    previousYearLabel: "<<",
+    previousPeriodLabel: "<",
+    nextPeriodLabel: ">",
+    nextYearLabel: ">>",
+    currentPeriodLabel: "今天",
+  };
+});
+</script>
+  
+  <style lang="scss">
+@import "../../../node_modules/vue-simple-calendar/dist/style.css";
+@import "../../../node_modules/vue-simple-calendar/dist/css/default.css";
+@import "../../../node_modules/vue-simple-calendar/dist/css/holidays-us.css";
+/* @import "../../../node_modules/vue-simple-calendar/dist/css/holidays-ue.css"; */
+@import "../../../node_modules/vue-simple-calendar/dist/css/gcal.css";
+
+#example-simple {
+  font-family: Avenir, Arial, Helvetica, sans-serif;
+  display: flex;
+  flex-direction: column;
+  height: 85vh !important;
+  width: 100% !important;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30px;
+}
+
+.theme-gcal .cv-day.today .cv-day-number {
+  background-color: #4a5dff;
+}
+
+#example-simple .cv-item {
+  /* background-color: #f56c6c; */
+  background-color: rgba($color: #4a5dff, $alpha: 0.8) !important;
+  color: #fff;
+  cursor: pointer;
+}
+/* #example-simple .cv-day {
+  &:hover {
+    background-color: rgba($color: #000000, $alpha: 0.1);
+  }
+} */
+
+#example-simple .cv-item.custom-date-class-red {
+  background-color: #f66;
+  color: #fff;
+}
+.cv-wrapper.holiday-us-traditional .cv-day-number::before {
+  content: none !important;
+}
+
+.theme-gcal .periodLabel {
+  font-size: 16px !important;
+}
+.theme-gcal .cv-header button.previousYear,
+.theme-gcal .cv-header button.previousPeriod,
+.theme-gcal .cv-header button.nextPeriod,
+.theme-gcal .cv-header button.nextYear {
+  width: 2em;
+  border: 1px solid #ccc;
+  text-align: center !important;
+  margin-left: 10px;
+  border-radius: 5px;
+  padding-right: 0 !important;
+  font-size: 1.8em;
+}
+.theme-gcal .cv-header button.previousYear,
+.theme-gcal .cv-header button.previousPeriod,
+.theme-gcal .cv-header button.nextPeriod,
+.theme-gcal .cv-header button.nextYear {
+  letter-spacing: 0;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/task/editTow.vue b/src/views/task/editTow.vue
index 9bfaa0f..3a9517c 100644
--- a/src/views/task/editTow.vue
+++ b/src/views/task/editTow.vue
@@ -22,7 +22,7 @@
             :disabled="true"
             v-model="formData.id"
             clearable
-            placeholder="请输入任务ID"
+            placeholder="请输入任务安排"
           />
         </el-form-item>
         <el-form-item label="任务日期" prop="datetime">
@@ -50,131 +50,10 @@
         <el-form-item label="任务描述" v-if="formData.template_name">
           <el-input
             disabled
-            v-model="formData.templateInfo.content"
+            v-model="formData.content"
             placeholder="没有任务描述"
           />
         </el-form-item>
-        <el-form-item label="一阶段天数">
-          <el-input
-            disabled
-            v-model="formData.templateInfo.stage_day_one"
-            clearable
-            placeholder="请输入天数"
-            type="number"
-          >
-            <template #append>天</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="一阶段金额">
-          <el-input
-            disabled
-            v-model="formData.templateInfo.money"
-            clearable
-            placeholder="请输入金额"
-            type="number"
-          >
-            <template #append>元</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="二阶段天数">
-          <el-input
-            disabled
-            v-model="formData.templateInfo.stage_day_two"
-            clearable
-            placeholder="请输入天数"
-            type="number"
-          >
-            <template #append>天</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="二阶段金额">
-          <el-input
-            disabled
-            v-model="formData.templateInfo.money_two"
-            clearable
-            placeholder="请输入金额"
-            type="number"
-          >
-            <template #append>元</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="noThreefilter(+formData.templateInfo.type)"
-          label="三阶段天数"
-        >
-          <el-input
-            disabled
-            v-model="formData.templateInfo.stage_day_three"
-            clearable
-            placeholder="请输入天数"
-            type="number"
-          >
-            <template #append>天</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="noThreefilter(+formData.templateInfo.type)"
-          label="三阶段金额"
-        >
-          <el-input
-            disabled
-            v-model="formData.templateInfo.new_money_three"
-            clearable
-            placeholder="请输入金额"
-            type="number"
-          >
-            <template #append>元</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="长期金额" v-if="+formData.templateInfo.types == 2">
-          <el-input
-            disabled
-            v-model="formData.templateInfo.money_three"
-            clearable
-            placeholder="请输入金额"
-            type="number"
-          >
-            <template #append>元</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item v-if="formData.templateInfo.type == 32" label="中转点">
-          <el-input
-            disabled
-            placeholder="请选择中转点"
-            :value="formData.templateInfo?.extend?.transfer?.address"
-          />
-        </el-form-item>
-        <el-form-item v-if="formData.templateInfo.type == 32" label="终点">
-          <el-input
-            disabled
-            placeholder="请选择终点"
-            :value="formData.templateInfo?.extend?.terminus?.address"
-          />
-        </el-form-item>
-        <!-- <el-form-item
-          v-if="formData.templateInfo.type == 35"
-          label="负责人"
-          prop="task_admin"
-          @click="clickTaskAdmin"
-        >
-          <el-input
-            placeholder="请选择负责人"
-            readonly
-            v-model="formData.task_admin_name"
-          />
-        </el-form-item> -->
-        <el-form-item
-          v-if="formData.templateInfo.type == 35"
-          label="充值金额(元)"
-          prop="recharge"
-        >
-          <el-input
-            disabled
-            placeholder="请输入充值金额(元)"
-            v-model="formData.templateInfo.recharge"
-            type="number"
-          />
-        </el-form-item>
         <!-- <el-form-item v-if="mode == 'show'" label="">
           <el-button type="primary" @click="clickUpdate"> 修改 </el-button>
           <el-button type="danger" @click="clickDelete"> 删除 </el-button>
@@ -221,7 +100,6 @@ const formData = reactive({
   end_time: "",
   datetime: "",
   content: "",
-  templateInfo: {},
 });
 
 interface RuleForm {
@@ -238,13 +116,6 @@ const rules = reactive<FormRules<RuleForm>>({
   },
 });
 
-// 没有三阶段的任务类型ID, 使用以下方法过滤
-const noThreeList = reactive([31, 32, 33, 34, 35, 45, 48, 49]);
-const noThreefilter = (id: number) => {
-  if (noThreeList.includes(id)) return false;
-  else return true;
-};
-
 function customEvent(data: any) {
   isShow.value = false;
   formData.template_id = data.id;
diff --git a/src/views/task/taskCalendar.vue b/src/views/task/taskCalendar.vue
index cc2f45f..e618f3e 100644
--- a/src/views/task/taskCalendar.vue
+++ b/src/views/task/taskCalendar.vue
@@ -13,11 +13,11 @@
           新增
         </el-button>
       </div> -->
-      <!-- <calendar
+      <calendar
         :list="taskList"
         @clickItem="clickTask"
         @initShowDate="initShowDate"
-      ></calendar> -->
+      ></calendar>
       <!-- <div class="mt-4">
         <el-calendar v-model="dateValue">
           <template #dateCell="{ data }">
@@ -40,58 +40,31 @@
           </template>
         </el-calendar>
       </div>-->
-
-      <el-calendar v-model="value" @click="dateClick">
-        <template slot="dateCell" slot-scope="{ date, data }">
-          查看任务
-        </template>
-      </el-calendar>
-
     </el-card>
 
-    <!-- <EditTowPopup ref="editTowRef" :task="task" :type="popupType" :company_id="company_id" @success="loadTask"
-      @close="showEditTow = false" /> -->
-
-    <popTaskList ref="popTaskTable" @openDeatl="openTask"
-      @close="showEditTow = false" />
-
-      <popTaskDetail  ref="popDeatil" />
+    <EditTowPopup
+      ref="editTowRef"
+      :task="task"
+      :type="popupType"
+      :company_id="company_id"
+      @success="loadTask"
+      @close="showEditTow = false"
+    />
   </div>
 </template>
 
 <script lang="ts" setup name="task">
 import { timeFormat } from "@/utils/util";
-import popTaskList from "./popTaskList.vue";
-import popTaskDetail from "./popTaskDetail.vue";
+import feedback from "@/utils/feedback";
+// import { getRoutePath } from "router";
+import EditTowPopup from "./editTow.vue";
 import { reactive, watch } from "vue";
-// import { apiTaskList, apiTaskDetails } from "@/api/task";
-// import calendar from "./calendar.vue";
-const value = ref(new Date())
+import { apiTaskList, apiTaskDetails } from "@/api/task";
+import calendar from "./calendar.vue";
+
 const route = useRoute();
 
-
-//点击日历
-const dateClick = () => {
-
-  popTaskTable.value?.open(value.value, route.query.company_id);
-
-
-}
-// 任务详情
-const popDeatil=ref('')
-
-const openTask=(row)=>{
-  popDeatil.value.openDeatl(row)
-
-}
-
-
-
-
-
-
-
-// return
+const dateValue = ref(new Date());
 
 // 当前点击的任务
 const task = ref({
@@ -109,20 +82,17 @@ const clickTask = (e: any) => {
   popupType.value = "show";
   // task.value = e;
   task.value = taskList.value.find((item: any) => item.id == e) || null;
-  // handleSelect();
+  handleSelect();
 };
 
 // 加载
-const loading = ref(false);
+const loading = ref(true);
 
 const editRef = shallowRef<InstanceType<typeof EditPopup>>();
 const editTowRef = shallowRef<InstanceType<typeof EditPopup>>();
-const popTaskTable = shallowRef<InstanceType<typeof EditPopup>>();
-
 // 是否显示编辑框
 const showEdit = ref(false);
 const showEditTow = ref(false);
-const showEditDeatil = ref(false);
 
 // 查询条件
 const queryParams = reactive({
@@ -130,7 +100,7 @@ const queryParams = reactive({
   start_time: "",
   end_time: "",
   page_no: 1,
-  page_size: 300,
+  pageSize: 150,
 });
 if (route.query.id) {
   queryParams.scheduling_id = route.query.id.toString();
@@ -139,12 +109,13 @@ const company_id = ref("");
 if (route.query.company_id) company_id.value = route.query.company_id;
 const taskList = ref<any>([]);
 
-// const loadTask = async () => {
-//   apiTaskList(queryParams).then((res) => {
-//     taskList.value = res.lists;
-//     loading.value = false;
-//   });
-// };
+// 查询
+const loadTask = async () => {
+  apiTaskList(queryParams).then((res) => {
+    taskList.value = res.lists;
+    loading.value = false;
+  });
+};
 
 const start_date = ref("");
 const end_date = ref("");
@@ -166,89 +137,79 @@ const initShowDate = (dateStr = "") => {
   if (queryParams.start_time != start_date.value) {
     queryParams.start_time = start_date.value;
     queryParams.end_time = end_date.value;
-    // loading.value = true;
-    // loadTask();
+    loading.value = true;
+    loadTask();
   }
 };
-// initShowDate();
+initShowDate();
 
-// // 过滤的任务列表
-// const taskListFilter = (e: any) => {
-//   return taskList.value
-//     .filter((item: any) => {
-//       const now = new Date(e).getTime() / 1000;
-//       const start = new Date(item.start_time).getTime() / 1000;
-//       const end = new Date(item.end_time).getTime() / 1000;
-//       return now - start >= 0 && now - end <= 0;
-//     })
-//     .slice(0, 5);
-// };
+// 过滤的任务列表
+const taskListFilter = (e: any) => {
+  return taskList.value
+    .filter((item: any) => {
+      const now = new Date(e).getTime() / 1000;
+      const start = new Date(item.start_time).getTime() / 1000;
+      const end = new Date(item.end_time).getTime() / 1000;
+      return now - start >= 0 && now - end <= 0;
+    })
+    .slice(0, 5);
+};
 
-// // 添加
-// const handleAdd = async () => {
-//   popupType.value = "add";
-//   showEditTow.value = true;
-//   await nextTick();
-//   editTowRef.value?.open("add");
-//   editTowRef.value?.updatedForm();
-// };
-// // 查询
-// const handleSelect = async () => {
-//   popupType.value = "show";
-//   showEditTow.value = true;
-//   await nextTick();
-//   editTowRef.value?.open("show");
-//   editTowRef.value?.updatedForm(task.value);
-// };
+// 添加
+const handleAdd = async () => {
+  popupType.value = "add";
+  showEditTow.value = true;
+  await nextTick();
+  editTowRef.value?.open("add");
+  editTowRef.value?.updatedForm();
+};
+// 查询
+const handleSelect = async () => {
+  popupType.value = "show";
+  showEditTow.value = true;
+  await nextTick();
+  editTowRef.value?.open("show");
+  editTowRef.value?.updatedForm(task.value);
+};
 
-// // 当前选择类型
-// const nowType = ref(0);
-// const handleTypeClick = (e) => {
-//   console.log(e);
-// };
+// 当前选择类型
+const nowType = ref(0);
+const handleTypeClick = (e) => {
+  console.log(e);
+};
 </script>
 
 <style lang="scss">
 .is-selected {
   color: #1989fa;
 }
-
 .el-calendar-table .el-calendar-day {
   min-height: 8.2rem;
   padding: 0;
 }
-
 .task {
   font-size: 0.8rem;
   /* color: #f7ba2a; */
   color: #1989fa;
   padding: 0 8px;
-  white-space: nowrap;
-  /* 设置文本不换行 */
-  overflow: hidden;
-  /* 隐藏溢出的部分 */
-  text-overflow: ellipsis;
-
-  /* 在溢出的部分显示省略号 */
+  white-space: nowrap; /* 设置文本不换行 */
+  overflow: hidden; /* 隐藏溢出的部分 */
+  text-overflow: ellipsis; /* 在溢出的部分显示省略号 */
   &:hover {
     background-color: rgba($color: #f38200, $alpha: 0.7);
     border-radius: 4px;
     color: #fff;
   }
 }
-
 .the {
   color: #ff5100;
 }
-
 .tow {
   color: #f38200;
 }
-
 .fou {
   color: red;
 }
-
 .btn {
   height: 30px;
   width: 150px;
@@ -257,20 +218,14 @@ const initShowDate = (dateStr = "") => {
   overflow: hidden;
   display: flex;
   cursor: pointer;
-
   div {
     flex: 1;
     text-align: center;
     line-height: 30px;
   }
-
   .active {
     background-color: #4a5dff;
     color: #fff;
   }
 }
-
-.is-selected {
-  color: #1989fa;
-}
 </style>