更新日历

package.json

@@ -25,6 +25,7 @@
     "vue-clipboard3": "^2.0.0",
     "vue-echarts": "^6.2.3",
     "vue-router": "^4.0.16",
+    "vue-simple-calendar": "^6.3.1",
     "vue3-video-play": "^1.3.1-beta.6",
     "vuedraggable": "^4.1.0"
   },

src/views/task/calendar.vue

@@ -1,168 +1,116 @@
 <template>
-    <div>
+  <div id="example-simple">
-        <el-card class="!border-none" v-loading="loading" shadow="never">
+    <calendar-view
-            <el-button v-perms="['flow_type/add']" type="primary" @click="handleAdd">
+      :show-date="showDate"
-                <template #icon>
+      class="holiday-us-traditional holiday-us-official holiday-ue theme-gcal"
-                    <icon name="el-icon-Plus" />
+      :enable-drag-drop="false"
-                </template>
+      :item-top="themeOptions.top"
-                新增
+      :item-content-height="themeOptions.height"
-            </el-button>
+      :item-border-height="themeOptions.border"
-            <div class="mt-4">
+      @click-item="clickItems"
-                <el-calendar v-model="dateValue">
+      :items="taskList"
-                    <template #dateCell="{ data }">
+      :current-period-label="'今日'"
-                        <div style="width: 100%; height: 100%; background-color: aquamarine">
-                            <p :class="data.isSelected ? 'is-selected' : ''">
-                                {{ data.day.split('-').slice(1).join('-') }}
-                                <!-- {{ data.isSelected ? '✔️' : '' }} -->
-                            </p>
-                            <div
-                                class="task"
-                                :class="{
-                                    fou: item.priority == 4,
-                                    tow: item.priority == 2,
-                                    the: item.priority == 3
-                                }"
-                                v-if="taskList[data.day]"
-                                @click="handleEdit(item)"
-                                v-for="(item, index) in taskList[data.day]"
-                                :key="index"
     >
-                                {{ item.title }}
+      <template #header="{ headerProps }">
-                            </div>
+        <calendar-view-header
-                        </div>
+          :header-props="headerProps"
-                    </template>
+          :previous-year-label="themeOptions.previousYearLabel"
-                </el-calendar>
+          :previous-period-label="themeOptions.previousPeriodLabel"
-            </div>
+          :next-period-label="themeOptions.nextPeriodLabel"
-        </el-card>
+          :next-year-label="themeOptions.nextYearLabel"
-        <edit-popup
+          @input="setShowDate"
-            v-if="showEdit"
-            ref="editRef"
-            :dict-data="dictData"
-            :dateValue="dateValue"
-            @success="loadTask"
-            @close="showEdit = false"
         />
+      </template>
+    </calendar-view>
   </div>
 </template>
   
 <script lang="ts" setup name="task">
-import { useDictData } from '@/hooks/useDictOptions'
+// 日历组件
-import { timeFormat } from '@/utils/util'
+import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
-import feedback from '@/utils/feedback'
-// import { getRoutePath } from "router";
-import EditPopup from './edit.vue'
-import { reactive, watch } from 'vue'
-const route = useRoute()
 
-const dateValue = ref(new Date())
+const showDate = ref(new Date());
+const setShowDate = (d) => {
+  showDate.value = d;
+  emits("initShowDate", d);
+};
 
-watch(
+const props = defineProps({
-    () => dateValue,
+  list: {
-    (newValue, oldValue) => {
+    type: Array,
-        initShowDate(timeFormat(newValue.value.getTime()))
+    default: () => {
+      return [];
     },
-    { deep: true }
+  },
-)
+});
 
-const test = (e: any) => {
+const taskList = ref([]);
-    console.log(e)
+onUpdated(() => {
-}
+  taskList.value = [];
+  props.list.forEach((item) => {
+    taskList.value.push({
+      id: item.id,
+      title: item.template_name,
+      startDate: new Date(item.start_time),
+      endDate: new Date(item.end_time),
+    });
+  });
+});
 
-// 加载
+const emits = defineEmits(["clickItem", "initShowDate"]);
-const loading = ref(true)
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const clickItems = (e) => {
-// 是否显示编辑框
+  emits("clickItem", e.id);
-const showEdit = ref(false)
+};
 
-// 查询条件
+const themeOptions = computed((): any => {
-const queryParams = reactive({
+  return {
-    start_time: '',
+    top: "2.6em",
-    end_time: '',
+    height: "2.1em",
-    day: 1,
+    border: "0px",
-    page_no: 1,
+    previousYearLabel: "<<",
-    pageSize: 150
+    previousPeriodLabel: "<",
-})
+    nextPeriodLabel: ">",
-
+    nextYearLabel: ">>",
-const taskList = ref<any>([])
+    currentPeriodLabel: "今天",
-
+  };
-// 查询
+});
-const start_date = ref('')
-const end_date = ref('')
-// 计算当前显示的第一天和最后一天
-const initShowDate = (dateStr = '') => {
-    const currentDate = dateStr ? new Date(dateStr) : new Date()
-    const currentYear = currentDate.getFullYear()
-    const currentMonth = currentDate.getMonth()
-    const lastDay = new Date(currentYear, currentMonth + 1, 0).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()) //获取第一天时间
-    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.end_time = end_date.value
-        loading.value = true
-    }
-}
-initShowDate()
-
-// 获取字典数据
-const { dictData } = useDictData('')
-
-// 添加
-const handleAdd = async () => {
-    console.log(2232)
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('add')
-    if (route.query.id) {
-        console.log(22)
-        const emits = defineEmits(['scheduling_id'])
-        emits('scheduling_id', route.query.id)
-    }
-}
-
-// 编辑
-const handleEdit = async (data: any) => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('edit')
-    editRef.value?.setFormData(data)
-}
-
-// 删除
-// const handleDelete = async (id: number | any[]) => {
-//   await feedback.confirm("确定要删除？");
-//   await apiFlowTypeDelete({ id });
-//   getLists();
-// };
-
-// getLists();
 </script>
   
-<style lang="scss">
+  <style lang="scss">
-.is-selected {
+@import "../../../node_modules/vue-simple-calendar/dist/style.css";
-    color: #1989fa;
+@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;
 }
-.el-calendar-table .el-calendar-day {
+
-    height: 6.2rem;
+.theme-gcal .cv-day.today .cv-day-number {
+  background-color: #4a5dff;
 }
-.task {
+
-    font-size: 0.8rem;
+#example-simple .cv-item {
-    color: #f7ba2a;
+  /* background-color: #f56c6c; */
-    white-space: nowrap; /* 设置文本不换行 */
+  background-color: rgba($color: #4a5dff, $alpha: 0.8) !important;
-    overflow: hidden; /* 隐藏溢出的部分 */
+  color: #fff;
-    text-overflow: ellipsis; /* 在溢出的部分显示省略号 */
 }
-.the {
+
-    color: #ff5100;
+#example-simple .cv-item.custom-date-class-red {
+  background-color: #f66;
+  color: #fff;
 }
-.tow {
+.cv-wrapper.holiday-us-traditional .d05-05 .cv-day-number::before {
-    color: #f38200;
+  content: "" !important;
-}
-.fou {
-    color: red;
 }
 </style>
+  

src/views/task/taskCalendar.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
     <el-card class="!border-none" v-loading="loading" shadow="never">
-      <el-button v-perms="['flow_type/add']" type="primary" @click="handleAdd">
+      <div style="display: flex; justify-content: space-between">
+        <el-button
+          v-perms="['flow_type/add']"
+          type="primary"
+          @click="handleAdd"
+        >
           <template #icon>
             <icon name="el-icon-Plus" />
           </template>
           新增
         </el-button>
-      <div class="mt-4">
+        <!-- <div class="btn">
+          <div :class="{ active: nowType == 0 }" @click="nowType = 0">日历</div>
+          <div :class="{ active: nowType == 1 }" @click="nowType = 1">列表</div>
+        </div> -->
+      </div>
+      <calendar
+        :list="taskList"
+        @clickItem="clickTask"
+        @initShowDate="initShowDate"
+      ></calendar>
+      <!-- <div class="mt-4">
         <el-calendar v-model="dateValue">
           <template #dateCell="{ data }">
             <div style="width: 100%; height: 100%">
@@ -28,15 +43,9 @@
             </div>
           </template>
         </el-calendar>
-      </div>
+      </div>-->
     </el-card>
 
-    <edit-popup
-      ref="editRef"
-      :dateValue="dateValue"
-      @success="loadTask"
-      @close="showEdit = false"
-    />
     <EditTowPopup
       ref="editTowRef"
       :task="task"
@@ -55,28 +64,11 @@ import EditPopup from "./edit.vue";
 import EditTowPopup from "./editTow.vue";
 import { reactive, watch } from "vue";
 import { apiTaskList, apiTaskDetails } from "@/api/task";
-import { apiTaskSchedulingPlanAdd } from "@/api/task_scheduling_plan";
+import calendar from "./calendar.vue";
+
 const route = useRoute();
 
 const dateValue = ref(new Date());
-// watch(
-//   () => 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({
@@ -92,7 +84,8 @@ const task = ref({
 const popupType = ref("add");
 const clickTask = (e: any) => {
   popupType.value = "show";
-  task.value = e;
+  // task.value = e;
+  task.value = taskList.value.find((item: any) => item.id == e);
   handleSelect();
 };
 
@@ -119,8 +112,8 @@ const taskList = ref<any>([]);
 const loadTask = async () => {
   apiTaskList(queryParams).then((res) => {
     taskList.value = res.lists;
-  });
     loading.value = false;
+  });
 };
 
 const start_date = ref("");
@@ -177,6 +170,12 @@ const handleSelect = async () => {
   editTowRef.value?.open("show");
   editTowRef.value?.updatedForm();
 };
+
+// 当前选择类型
+const nowType = ref(0);
+const handleTypeClick = (e) => {
+  console.log(e);
+};
 </script>
 
 <style lang="scss">
@@ -210,4 +209,22 @@ const handleSelect = async () => {
 .fou {
   color: red;
 }
+.btn {
+  height: 30px;
+  width: 150px;
+  border: 1px solid #4a5dff;
+  border-radius: 5px;
+  overflow: hidden;
+  display: flex;
+  cursor: pointer;
+  div {
+    flex: 1;
+    text-align: center;
+    line-height: 30px;
+  }
+  .active {
+    background-color: #4a5dff;
+    color: #fff;
+  }
+}
 </style>

src/views/task/taskList.vue

@@ -17,16 +17,26 @@
       <div class="mt-4">
         <el-table :data="pager.lists" @selection-change="handleSelectionChange">
           {{ pager }}
-                    <el-table-column label="id" prop="id" show-overflow-tooltip width="60" />
+          <el-table-column
+            label="id"
+            prop="id"
+            show-overflow-tooltip
+            width="60"
+          />
           <el-table-column label="名称" prop="title" show-overflow-tooltip />
-                    <el-table-column label="优先级" prop="title" width="90" show-overflow-tooltip>
+          <el-table-column
+            label="优先级"
+            prop="title"
+            width="90"
+            show-overflow-tooltip
+          >
             <template #default="{ row }">
               <span
                 :class="{
                   one: row.priority == 1,
                   tow: row.priority == 2,
                   the: row.priority == 3,
-                                    fou: row.priority == 4
+                  fou: row.priority == 4,
                 }"
                 >{{ row.priority_name }}</span
               >
@@ -50,16 +60,33 @@
             width="90"
             show-overflow-tooltip
           />
-                    <el-table-column label="开始时间" prop="start_time" show-overflow-tooltip />
+          <el-table-column
-                    <el-table-column label="结束时间" prop="end_time" show-overflow-tooltip />
+            label="开始时间"
-                    <el-table-column label="审查时间" prop="check_time" show-overflow-tooltip />
+            prop="start_time"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="结束时间"
+            prop="end_time"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="审查时间"
+            prop="check_time"
+            show-overflow-tooltip
+          />
           <el-table-column label="状态" prop="status" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.status == 1" style="color: #67c23a">正常</span>
               <span v-else style="color: #fe0000">禁用</span>
             </template>
           </el-table-column>
-                    <el-table-column label="操作" align="center" width="auto" fixed="right">
+          <el-table-column
+            label="操作"
+            align="center"
+            width="auto"
+            fixed="right"
+          >
             <template #default="{ row }">
               <el-button
                 v-perms="['flow/edit']"
@@ -82,7 +109,7 @@
         </el-table>
       </div>
       <div class="flex mt-4 justify-end">
-                <pagination v-model="pager" @change="getLists" />
+        <!-- <pagination v-model="pager" @change="getLists" /> -->
       </div>
     </el-card>
     <edit-popup
@@ -96,49 +123,49 @@
 </template>
 
 <script lang="ts">
-import { usePaging } from '@/hooks/usePaging'
+import { usePaging } from "@/hooks/usePaging";
-import { useDictData } from '@/hooks/useDictOptions'
+import { useDictData } from "@/hooks/useDictOptions";
-import { timeFormat } from '@/utils/util'
+import { timeFormat } from "@/utils/util";
-import feedback from '@/utils/feedback'
+import feedback from "@/utils/feedback";
-import EditPopup from './edit.vue'
+import EditPopup from "./edit.vue";
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
 // 是否显示编辑框
-const showEdit = ref(false)
+const showEdit = ref(false);
 
 // 查询条件
-const queryParams = reactive({})
+const queryParams = reactive({});
 
 // 选中数据
-const selectData = ref<any[]>([])
+const selectData = ref<any[]>([]);
 
 // 表格选择后回调事件
 const handleSelectionChange = (val: any[]) => {
-    selectData.value = val.map(({ id }) => id)
+  selectData.value = val.map(({ id }) => id);
-}
+};
 
 // 获取字典数据
-const { dictData } = useDictData('')
+const { dictData } = useDictData("");
 
 // 添加
 const handleAdd = async () => {
-    showEdit.value = true
+  showEdit.value = true;
-    await nextTick()
+  await nextTick();
-    editRef.value?.open('add')
+  editRef.value?.open("add");
-}
+};
 
 // 编辑
 const handleEdit = async (data: any) => {
-    showEdit.value = true
+  showEdit.value = true;
-    await nextTick()
+  await nextTick();
-    editRef.value?.open('edit')
+  editRef.value?.open("edit");
-    editRef.value?.setFormData(data)
+  editRef.value?.setFormData(data);
-}
+};
 
 // 删除
 const handleDelete = async (id: number | any[]) => {
-    await feedback.confirm('确定要删除？')
+  await feedback.confirm("确定要删除？");
-}
+};
 </script>
 
 <style lang="scss">