更新任务日程

src/api/task.ts

@@ -4,6 +4,18 @@ import request from '@/utils/request'
 export function apiTaskAdd(params: any) {
     return request.post({ url: '/task_scheduling_plan.task_scheduling_plan/add', params })
 }
+
+//修改任务
+export function apiTaskEdit(params: any) {
+    return request.post({ url: '/task_scheduling_plan.task_scheduling_plan/edit', params })
+}
+
+//删除任务
+export function apiTaskDelete(params: any) {
+    return request.post({ url: '/task_scheduling_plan.task_scheduling_plan/delete', params })
+}
+
+
 //任务日程-列表
 export function apiTaskList(params: any) {
     return request.get({ url: '/task_scheduling_plan.task_scheduling_plan/lists', params })

src/components/popup/index.vue

@@ -19,7 +19,7 @@
       <!-- 自定义内容 -->
       <slot>{{ content }}</slot>
       <!-- 底部弹窗页脚 -->
-            <template #footer>
+      <template v-if="button" #footer>
         <div class="dialog-footer">
           <el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
             {{ cancelButtonText }}
@@ -43,86 +43,91 @@ export default defineComponent({
     title: {
       // 弹窗标题
       type: String,
-            default: ''
+      default: "",
+    },
+    button: {
+      // 是否显示按钮
+      type: Boolean,
+      default: true,
     },
     content: {
       // 弹窗内容
       type: String,
-            default: ''
+      default: "",
     },
     confirmButtonText: {
       // 确认按钮内容
       type: [String, Boolean],
-            default: '确定'
+      default: "确定",
     },
     cancelButtonText: {
       // 取消按钮内容
       type: [String, Boolean],
-            default: '取消'
+      default: "取消",
     },
     width: {
       // 弹窗的宽度
       type: String,
-            default: '400px'
+      default: "400px",
     },
     disabled: {
       // 是否禁用
       type: Boolean,
-            default: false
+      default: false,
     },
     async: {
       // 是否开启异步关闭
       type: Boolean,
-            default: false
+      default: false,
     },
     clickModalClose: {
       // 点击遮罩层关闭对话窗口
       type: Boolean,
-            default: false
+      default: false,
     },
     center: {
       // 是否居中布局
       type: Boolean,
-            default: false
+      default: false,
     },
     customClass: {
       type: String,
-            default: ''
+      default: "",
-        }
     },
-    emits: ['confirm', 'cancel', 'close', 'open'],
+  },
+  emits: ["confirm", "cancel", "close", "open"],
   setup(props, { emit }) {
-        const visible = ref(false)
+    const visible = ref(false);
 
-        const handleEvent = (type: 'confirm' | 'cancel') => {
+    const handleEvent = (type: "confirm" | "cancel") => {
-            emit(type)
+      emit(type);
-            if (!props.async || type === 'cancel') {
+      if (!props.async || type === "cancel") {
-                close()
+        close();
-            }
       }
+    };
 
     const close = () => {
-            visible.value = false
+      visible.value = false;
       nextTick(() => {
-                emit('close')
+        emit("close");
-            })
+      });
-        }
+    };
     const open = () => {
       if (props.disabled) {
-                return
+        return;
       }
-            emit('open')
+      emit("open");
-            visible.value = true
+      visible.value = true;
-        }
+    };
-        provide('visible', visible)
+    provide("visible", visible);
     return {
       visible,
       handleEvent,
       close,
-            open
+      open,
-        }
+    };
-    }
+  },
-})
+});
 </script>
 
 <style scoped lang="scss">

src/views/task/editTow.vue

@@ -2,24 +2,47 @@
   <div class="edit-popup">
     <popup
       ref="popupRef"
-            title="创建日程安排"
+      :title="title"
       :async="true"
       width="800px"
       @confirm="handleSubmit"
       @close="handleClose"
+      :clickModalClose="mode == 'show'"
+      :button="mode != 'show'"
     >
-            <el-form class="formdata" :model="detailsdt" label-width="120px">
+      <el-form
-                <el-form-item label="任务日期">
+        ref="formRef"
-                    <el-date-picker v-model="formData.time" type="date" placeholder="选择日期" />
+        :rules="rules"
+        class="formdata"
+        :model="formData"
+        label-width="120px"
+      >
+        <el-form-item required label="任务日期" prop="datetime">
+          <el-date-picker
+            :disabled="isDisabled"
+            v-model="formData.datetime"
+            name="datetime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="changeDateTime"
+          />
         </el-form-item>
-                <el-form-item label="任务模板">
+        <el-form-item required label="任务模板" prop="template_id">
           <el-input
+            :disabled="isDisabled"
             v-model="formData.template_name"
             @click="isShow = true"
+            name="template_id"
             clearable
             placeholder="请输入任务模板"
           />
         </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>
+        </el-form-item>
       </el-form>
     </popup>
     <el-dialog v-model="isShow" title="选择任务" width="60%">
@@ -29,57 +52,141 @@
 </template>
 
 <script lang="ts" setup name="taskEidt">
-import type { FormInstance } from 'element-plus'
+import type { FormInstance, FormRules } from "element-plus";
-import Popup from '@/components/popup/index.vue'
+import Popup from "@/components/popup/index.vue";
-import { apiTaskAdd } from '@/api/task'
+import { apiTaskAdd, apiTaskEdit, apiTaskDelete } from "@/api/task";
-import { reactive, onUpdated, type PropType } from 'vue'
+import { reactive, onUpdated, type PropType } from "vue";
-import DialogIndex from '@/views/task_template/list_two.vue'
+import DialogIndex from "@/views/task_template/list_two.vue";
-const route = useRoute()
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+const route = useRoute();
 
-const emit = defineEmits(['success', 'close'])
+const emit = defineEmits(["success", "close"]);
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
-const mode = ref('add')
+const mode = ref("add");
-const detailsdt = ref({})
+const detailsdt = ref({});
-const isShow = ref(false)
+const isShow = ref(false);
+const title = ref("创建日程安排");
+
+const changeDateTime = (e: any) => {
+  formData.start_time = timeFormat(e[0]);
+  formData.end_time = timeFormat(e[1]);
+};
 
 // 表单数据
 const formData = reactive({
-    time: '',
+  id: "",
-    template_id: '',
+  create_user_id: "",
-    scheduling_id: '',
+  status: "",
-    template_name: ''
+  template_id: "",
-})
+  scheduling_id: "",
-function customEvent(data: any) {
+  template_name: "",
-    isShow.value = false
+  start_time: "",
-    formData.template_id = data.id
+  end_time: "",
-    formData.template_name = data.title
+  datetime: "",
-}
+});
-if (route.query.id) {
+
-    formData.scheduling_id = route.query.id.toString()
+interface RuleForm {
+  datetime: Date | String;
+  template_id: String;
 }
 
+const rules = reactive<FormRules<RuleForm>>({
+  datetime: { required: true, message: "请选择时间范围", trigger: "blur" },
+  template_id: {
+    required: true,
+    message: "请选择任务模板",
+    trigger: "change",
+  },
+});
+
+function customEvent(data: any) {
+  isShow.value = false;
+  formData.template_id = data.id;
+  formData.template_name = data.title;
+}
+if (route.query.id) {
+  formData.scheduling_id = route.query.id.toString();
+}
+
+const formRef = ref(null);
+
+const props = defineProps({
+  task: {
+    type: Object,
+    defualt: () => {
+      null;
+    },
+  },
+});
+const isDisabled = ref(false);
+
+const updatedForm = async () => {
+  if (mode.value == "show") {
+    title.value = "查看日程安排";
+    isDisabled.value = true;
+    Object.keys(formData).forEach((key: any) => {
+      if (props.task[key] != null && props.task[key] != undefined)
+        formData[key] = props.task[key];
+    });
+    formData.datetime = [
+      formData.start_time.split(" ")[0],
+      formData.end_time.split(" ")[0],
+    ];
+  } else {
+    isDisabled.value = false;
+    Object.keys(formData).forEach((key: any) => {
+      formData[key] = "";
+    });
+  }
+  await nextTick();
+  formRef.value.resetFields();
+};
+
+const clickUpdate = () => {
+  mode.value = "edit";
+  isDisabled.value = false;
+};
+
+// 删除
+const clickDelete = () => {
+  feedback.confirm("确定要删除吗?").then(async (e) => {
+    if (e == "confirm") {
+      await apiTaskDelete({ id: formData.id });
+      popupRef.value?.close();
+      emit("success");
+    }
+  });
+};
+
 // 提交按钮
-const handleSubmit = async () => {
+const handleSubmit = () => {
-    const data = { ...formData }
+  if (mode.value == "show") return popupRef.value?.close();
-    console.log(data)
+  else
-    mode.value == 'edit' ? await apiTaskAdd(data) : await apiTaskAdd(data)
+    formRef.value.validate(async (e: Boolean) => {
-    popupRef.value?.close()
+      if (e) {
-    emit('success')
+        const data = { ...formData };
+        mode.value == "edit" ? await apiTaskEdit(data) : await apiTaskAdd(data);
+        popupRef.value?.close();
+        emit("success");
       }
+    });
+};
 //打开弹窗
-const open = (type = 'add') => {
+const open = (type = "add") => {
-    mode.value = type
+  mode.value = type;
-    popupRef.value?.open()
+  popupRef.value?.open();
-}
+};
 
 // 关闭回调
 const handleClose = () => {
-    emit('close')
+  emit("close");
-}
+};
 
 defineExpose({
-    open
+  open,
-})
+  updatedForm,
+});
 </script>
 <style lang="scss" scoped>
 .formdata {

src/views/task/taskCalendar.vue

@@ -15,26 +15,17 @@
                 :class="data.isSelected ? 'is-selected' : ''"
                 style="padding: 8px 8px 0 8px"
               >
-                                {{ data.day.split('-').slice(1).join('-') }}
+                {{ data.day.split("-").slice(1).join("-") }}
-                                <!-- {{ data.isSelected ? '✔️' : '' }} -->
               </p>
-                            <div>{{ dateNow(data.day) }}</div>
               <div
                 class="task"
-                                :class="{
+                @click="clickTask(item)"
-                                    fou: item.priority == 4,
+                v-for="(item, index) in taskListFilter(data.day)"
-                                    tow: item.priority == 2,
-                                    the: item.priority == 3
-                                }"
-                                @click="handleEdit(item)"
-                                v-for="(item, index) in taskList"
                 :key="index"
               >
-                                {{ item.title }}
+                {{ item.template_name }}
               </div>
             </div>
-                        <!-- <div class="task" style="color: var(--el-color-primary);">完成BUG测试</div>
-                          <div class="task" style="color: var(--el-color-danger);">完成BUG测试</div> -->
           </template>
         </el-calendar>
       </div>
@@ -42,17 +33,14 @@
 
     <edit-popup
       ref="editRef"
-            :dict-data="dictData"
       :dateValue="dateValue"
-            :detailsdata="detailsdata"
       @success="loadTask"
       @close="showEdit = false"
     />
     <EditTowPopup
       ref="editTowRef"
-            :dict-data="dictData"
+      :task="task"
-            :dateValue="dateValue"
+      :type="popupType"
-            :detailsdata="detailsdata"
       @success="loadTask"
       @close="showEditTow = false"
     />
@@ -60,121 +48,135 @@
 </template>
 
 <script lang="ts" setup name="task">
-import { timeFormat } from '@/utils/util'
+import { timeFormat } from "@/utils/util";
-import feedback from '@/utils/feedback'
+import feedback from "@/utils/feedback";
 // import { getRoutePath } from "router";
-import EditPopup from './edit.vue'
+import EditPopup from "./edit.vue";
-import EditTowPopup from './editTow.vue'
+import EditTowPopup from "./editTow.vue";
-import { reactive, watch } from 'vue'
+import { reactive, watch } from "vue";
-import { apiTaskList, apiTaskDetails } from '@/api/task'
+import { apiTaskList, apiTaskDetails } from "@/api/task";
-import { apiTaskSchedulingPlanAdd } from '@/api/task_scheduling_plan'
+import { apiTaskSchedulingPlanAdd } from "@/api/task_scheduling_plan";
-const route = useRoute()
+const route = useRoute();
 
-const dateValue = ref(new Date())
+const dateValue = ref(new Date());
-const detailsdata = reactive({
+// watch(
-    create_time: '',
+//   () => dateValue,
+//   async (newValue, oldValue) => {
+//     const id = taskList.value.find(
+//       (item) =>
+//         item.start_time.split(" ")[0] == timeFormat(newValue.value.getTime())
+//     )?.id;
+//     if (id) {
+//       const res = await apiTaskDetails({ id });
+//       Object.keys(detailsdata).forEach((key) => {
+//         res[key] ? (detailsdata[key] = res[key]) : null;
+//       });
+//       editRef.value?.open("add");
+//       initShowDate(timeFormat(newValue.value.getTime()));
+//     }
+//   },
+//   { deep: true }
+// );
+
+// 当前点击的任务
+const task = ref({
   create_user_id: 0,
-    delete_time: '',
+  end_time: "",
-    end_time: '',
-    extend: '',
-    id: '',
-    scheduling_id: '',
-    sn: '',
-    start_time: '',
-    status: '',
-    task_id: '',
-    task_info: {
-        admin_id: 0,
-        content: '',
-        create_time: '',
-        delete_time: '',
   id: 0,
-        money: '',
+  scheduling_id: 0,
+  start_time: "",
   status: 0,
-        title: '',
-        type: 0,
-        type_name: '',
-        update_time: ''
-    },
   template_id: 0,
-    update_time: ''
+  template_name: "",
-})
+});
-watch(
+const popupType = ref("add");
-    () => dateValue,
+const clickTask = (e: any) => {
-    async (newValue, oldValue) => {
+  popupType.value = "show";
-        const id = taskList.value.find(
+  task.value = e;
-            (item) => item.start_time.split(' ')[0] == timeFormat(newValue.value.getTime())
+  handleSelect();
-        )?.id
+};
-        if (id) {
-            const res = await apiTaskDetails({ id })
-            Object.keys(detailsdata).forEach((key) => {
-                res[key] ? (detailsdata[key] = res[key]) : null
-            })
-            editRef.value?.open('add')
-            initShowDate(timeFormat(newValue.value.getTime()))
-        }
-    },
-    { deep: true }
-)
 
 // 加载
-const loading = ref(true)
+const loading = ref(true);
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
-const editTowRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editTowRef = shallowRef<InstanceType<typeof EditPopup>>();
 // 是否显示编辑框
-const showEdit = ref(false)
+const showEdit = ref(false);
-const showEditTow = ref(false)
+const showEditTow = ref(false);
 
 // 查询条件
 const queryParams = reactive({
-    start_time: '',
+  start_time: "",
-    end_time: '',
+  end_time: "",
   page_no: 1,
-    pageSize: 150
+  pageSize: 150,
-})
+});
 
-const taskList = ref<any>([])
+const taskList = ref<any>([]);
 
 // 查询
 const loadTask = async () => {
   apiTaskList(queryParams).then((res) => {
-        taskList.value = res.lists
+    taskList.value = res.lists;
-    })
+  });
-    loading.value = false
+  loading.value = false;
-}
+};
 
-const start_date = ref('')
+const start_date = ref("");
-const end_date = ref('')
+const end_date = ref("");
 // 计算当前显示的第一天和最后一天
-const initShowDate = (dateStr = '') => {
+const initShowDate = (dateStr = "") => {
-    const currentDate = dateStr ? new Date(dateStr) : new Date()
+  const currentDate = dateStr ? new Date(dateStr) : new Date();
-    const currentYear = currentDate.getFullYear()
+  const currentYear = currentDate.getFullYear();
-    const currentMonth = currentDate.getMonth()
+  const currentMonth = currentDate.getMonth();
-    const lastDay = new Date(currentYear, currentMonth + 1, 0).getDay() //获取第一天星期
+  const lastDay = new Date(currentYear, currentMonth + 1, 0).getDay(); //获取第一天星期
-    const startDay = new Date(currentYear, currentMonth, 1).getDay() //获取最后一天星期
+  const startDay = new Date(currentYear, currentMonth, 1).getDay(); //获取最后一天星期
   // console.log(new Date(currentYear, currentMonth, 1-startDay).getDate());
   // console.log(new Date(currentYear, currentMonth + 1, 6-lastDay).getDate());
-    start_date.value = timeFormat(new Date(currentYear, currentMonth, 1 - startDay).getTime()) //获取第一天时间
+  start_date.value = timeFormat(
-    end_date.value = timeFormat(new Date(currentYear, currentMonth + 1, 6 - lastDay).getTime()) //获取最后一天时间
+    new Date(currentYear, currentMonth, 1 - startDay).getTime()
+  ); //获取第一天时间
+  end_date.value = timeFormat(
+    new Date(currentYear, currentMonth + 1, 6 - lastDay).getTime()
+  ); //获取最后一天时间
   if (queryParams.start_time != start_date.value) {
-        queryParams.start_time = start_date.value
+    queryParams.start_time = start_date.value;
-        queryParams.end_time = end_date.value
+    queryParams.end_time = end_date.value;
-        loading.value = true
+    loading.value = true;
-        loadTask()
+    loadTask();
-    }
-}
-initShowDate()
-const dateNow = (day) => {
-    return taskList.value.find((item) => item.start_time.split(' ')[0] == day)?.template_name
   }
+};
+initShowDate();
+
+// 过滤的任务列表
+const taskListFilter = (e: any) => {
+  return taskList.value
+    .filter((item: any) => {
+      let now = new Date(e).getTime() / 1000;
+      let start = new Date(item.start_time).getTime() / 1000;
+      let end = new Date(item.end_time).getTime() / 1000;
+      return now - start >= 0 && now - end <= 0;
+    })
+    .slice(0, 5);
+};
 
 // 添加
 const handleAdd = async () => {
-    showEditTow.value = true
+  popupType.value = "add";
-    await nextTick()
+  showEditTow.value = true;
-    editTowRef.value?.open('add')
+  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();
+};
 </script>
 
 <style lang="scss">
@@ -182,16 +184,22 @@ const handleAdd = async () => {
   color: #1989fa;
 }
 .el-calendar-table .el-calendar-day {
-    height: auto;
+  min-height: 8.2rem;
-    min-height: 6.2rem;
   padding: 0;
 }
 .task {
   font-size: 0.8rem;
-    color: #f7ba2a;
+  /* color: #f7ba2a; */
+  color: #1989fa;
+  padding: 0 8px;
   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;