我的日程

src/views/oa/work/schedule/index.vue

@@ -0,0 +1,526 @@
+<template>
+  <div class="outer-layer">
+    <div class="schedule-left">
+      <div class="title commons-title" style="margin-bottom: 0">我的日程</div>
+      <div style="margin-top: 16px">
+        <el-input v-model="sourceList.pagination.keyword" placeholder="请输入关键词" class="input-with-select" clearable>
+          <template #append>
+            <el-button :icon="Search" @click="getList" />
+          </template>
+        </el-input>
+      </div>
+      <div style="margin-top: 16px">
+        <el-menu :default-active="menuDefault" class="el-menu-vertical-demo" @select="handleSelectMenu">
+          <el-menu-item :index="1">
+            <span>我的创建</span>
+          </el-menu-item>
+          <el-menu-item :index="2">
+            <span>全员日程</span>
+          </el-menu-item>
+          <el-menu-item :index="3">
+            <span>我的待办</span>
+          </el-menu-item>
+          <el-menu-item :index="4" disabled>
+            <span>客户明细</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+      <div style="margin-top: 16px; font-size: 20px; font-weight: 700">
+        <span>{{ day }}</span>
+        <span style="margin-left: 16px">{{ calculationWeek(day, "yyyy年MM月DD日") }}</span>
+      </div>
+    </div>
+    <div class="schedule-right">
+      <div class="schedule-top">
+        <el-row>
+          <el-col :span="10" style="text-align: left">
+            <el-select v-model="status" style="width: 110px">
+              <el-option v-for="item in tableStatus" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-button type="info" style="margin-left: 8px" @click="clickToday()" plain>今日</el-button>
+          </el-col>
+          <el-col :span="4" style="text-align: center; height: 32px; line-height: 32px">
+            <div style="display: flex; justify-content: space-between">
+              <el-button :icon="ArrowLeftBold" @click="prevMonth()" />
+              <span style="font-weight: 700">{{ month }}</span>
+              <el-button :icon="ArrowRightBold" @click="nextMonth()" />
+            </div>
+          </el-col>
+          <el-col :span="10" style="text-align: right">
+            <el-button type="primary" @click="newSchedule()">新建日程</el-button>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="schedule-bottom">
+        <el-calendar v-model="date" ref="calendar">
+          <template #date-cell="{ data }">
+            <div>
+              <div :class="'title ' + (data.isSelected ? 'is-selected' : '')" :style="data.isSelected ? '  background-color: #eeeeee;' : ''">
+                <span :class="data.isSelected ? 'select-title' : ''">{{ data.day.substr(8, 10) }}</span>
+                <span style="position: absolute; right: 4px; top: 4px; font-size: 14px; color: black">4条</span>
+              </div>
+              <div :class="data.isSelected ? 'is-selected' : ''" style="text-align: center; height: 18px; line-height: 18px">
+                {{ data.day.substr(8, 10) }}
+              </div>
+              <div :class="data.isSelected ? 'is-selected' : ''" style="text-align: center; height: 18px; line-height: 18px">
+                {{ data.day.substr(8, 10) }}
+              </div>
+              <div :class="data.isSelected ? 'is-selected' : ''" style="text-align: center; height: 18px; line-height: 18px">
+                {{ data.day.substr(8, 10) }}
+              </div>
+              <div :class="data.isSelected ? 'is-selected' : ''" style="text-align: center; height: 18px; line-height: 18px">
+                {{ data.day.substr(8, 10) }}
+              </div>
+            </div>
+          </template>
+        </el-calendar>
+      </div>
+    </div>
+
+    <el-dialog title="新建日程" v-if="openSchedule" v-model="openSchedule" width="640" v-loading="loadingDialog" :close-on-click-modal="false">
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="schedule">
+        <template #time>
+          <div style="width: 100%">
+            <!-- <el-row :gutter="10" style="margin-bottom: 18px"> -->
+            <el-row :gutter="10">
+              <el-col :span="11">
+                <el-form-item prop="startDate">
+                  <el-date-picker
+                    v-model="formData.data.startDate"
+                    type="datetime"
+                    placeholder="请选择开始时间"
+                    value-format="YYYY-MM-DD HH:mm:ss"
+                    style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" style="text-align: center"> 至 </el-col>
+              <el-col :span="11">
+                <el-form-item prop="endDate">
+                  <el-date-picker
+                    v-model="formData.data.endDate"
+                    type="datetime"
+                    placeholder="请选择结束时间"
+                    value-format="YYYY-MM-DD HH:mm:ss"
+                    style="width: 100%" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <!-- <el-row :gutter="10" style="margin-bottom: 18px">
+              <el-col :span="11">
+                <el-form-item prop="repeatType">
+                  <el-select v-model="formData.data.repeatType" placeholder="请选择重复类型" style="width: 100%">
+                    <el-option v-for="item in repeatType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="13">
+                <el-checkbox v-model="formData.data.isAllDay" label="全天任务" :true-label="1" :false-label="0" border />
+              </el-col>
+            </el-row> -->
+          </div>
+        </template>
+        <template #color>
+          <div style="width: 100%; display: flex">
+            <el-radio-group v-model="formData.data.color" class="radio-color">
+              <el-radio v-for="(item, index) in predefineColors" :key="index" :label="item">
+                <div :style="'background-color: ' + item">
+                  <el-icon style="color: #fff; font-size: 20px; margin: 2px 0 0 2px" v-if="item === formData.data.color"><Check /></el-icon>
+                </div>
+              </el-radio>
+            </el-radio-group>
+          </div>
+        </template>
+        <template #participantList>
+          <div style="width: 100%">
+            <el-select v-model="formData.data.participantList" multiple placeholder="请选择参与人" style="width: 100%">
+              <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <div style="color: #ccc; font-size: 12px">
+              <span v-if="formData.data.participantList && formData.data.participantList.length > 0">共{{ formData.data.participantList.length }}人参与</span>
+              <span v-else>共0人参与</span>
+            </div>
+          </div>
+        </template>
+        <template #noticeType>
+          <div style="width: 100%">
+            <el-select v-model="formData.data.noticeType" placeholder="请选择通知" style="width: 100%">
+              <el-option v-for="item in noticeType" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+        </template>
+        <!-- <template #taskPermissions>
+          <div style="width: 100%">
+            <el-form-item prop="taskPermissions">
+              <el-radio-group v-model="formData.data.taskPermissions">
+                <el-radio v-for="item in taskPermissions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+        </template> -->
+      </byForm>
+      <template #footer>
+        <el-button @click="openSchedule = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="clickSubmit()" size="large">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { Search, ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
+import moment from "moment";
+import byForm from "@/components/byForm/index";
+import useUserStore from "@/store/modules/user";
+import { ElMessage } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const sourceList = ref({
+  data: [],
+  pagination: {
+    pageNum: 1,
+    pageSize: 10,
+    keyword: "",
+    createUser: "",
+    participantId: "",
+    startDate: "",
+    endDate: "",
+  },
+});
+const menuDefault = ref(2);
+const day = ref(moment().format("yyyy年MM月DD日"));
+const month = ref(moment().format("yyyy年MM月"));
+const status = ref("0");
+const tableStatus = ref([
+  {
+    label: "月",
+    value: "0",
+  },
+  {
+    label: "周",
+    value: "1",
+  },
+]);
+const date = ref(moment().format("yyyy-MM-DD"));
+const calendar = ref();
+watch(
+  () => date.value,
+  (newValue) => {
+    if (month.value !== moment(newValue).format("yyyy年MM月")) {
+      month.value = moment(newValue).format("yyyy年MM月");
+      console.log("date-change");
+      getList();
+    }
+  }
+);
+const selectDate = (val) => {
+  calendar.value.selectDate(val);
+};
+const handleSelectMenu = (index) => {
+  console.log("handleSelectMenu", index);
+  if (index === 1) {
+    sourceList.value.pagination.createUser = useUserStore().user.userId;
+    sourceList.value.pagination.participantId = "";
+  } else if (index === 2) {
+    sourceList.value.pagination.createUser = useUserStore().user.userId;
+    sourceList.value.pagination.participantId = useUserStore().user.userId;
+  } else if (index === 3) {
+    sourceList.value.pagination.createUser = "";
+    sourceList.value.pagination.participantId = useUserStore().user.userId;
+  }
+  getList();
+};
+const getList = async () => {
+  sourceList.value.pagination.startDate = moment(month.value, "yyyy年MM月").format("yyyy-MM-DD");
+  sourceList.value.pagination.endDate = moment(moment(month.value, "yyyy年MM月").add(+1, "month").add(-1, "days").calendar()).format("yyyy-MM-DD");
+  console.log("getList", sourceList.value.pagination);
+  proxy.post("/scheduleInfo/page", sourceList.value.pagination).then((res) => {
+    console.log(res);
+    // sourceList.value.data = res.rows;
+  });
+};
+const clickToday = () => {
+  console.log("clickToday", sourceList.value.pagination);
+};
+const prevMonth = () => {
+  month.value = moment(moment(month.value, "yyyy年MM月").add(-1, "month").calendar()).format("yyyy年MM月");
+  console.log("prevMonth", month.value);
+  selectDate("prev-month");
+  getList();
+};
+const nextMonth = () => {
+  month.value = moment(moment(month.value, "yyyy年MM月").add(+1, "month").calendar()).format("yyyy年MM月");
+  console.log("nextMonth", month.value);
+  selectDate("next-month");
+  getList();
+};
+const userList = ref([]);
+const getDict = () => {
+  proxy.get("/tenantUser/list", { pageNum: 1, pageSize: 10000, tenantId: useUserStore().user.tenantId }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      userList.value = res.rows.map((item) => {
+        return {
+          label: item.userName,
+          value: item.userId,
+        };
+      });
+    }
+  });
+};
+getDict();
+handleSelectMenu(2);
+const openSchedule = ref(false);
+const loadingDialog = ref(false);
+const schedule = ref(null);
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+});
+const formData = reactive({
+  data: {
+    isAllDay: 0,
+    participantList: [],
+  },
+});
+// const repeatType = ref([
+//   {
+//     label: "不重复",
+//     value: 0,
+//   },
+//   {
+//     label: "每天重复",
+//     value: 1,
+//   },
+//   {
+//     label: "每周重复",
+//     value: 2,
+//   },
+//   {
+//     label: "每月重复",
+//     value: 3,
+//   },
+// ]);
+const noticeType = ref([
+  {
+    label: "提前15分钟",
+    value: 15,
+  },
+  {
+    label: "提前30分钟",
+    value: 30,
+  },
+  {
+    label: "提前1小时",
+    value: 60,
+  },
+]);
+// const taskPermissions = ref([
+//   {
+//     label: "仅自己可见",
+//     value: 0,
+//   },
+//   {
+//     label: "参与人可见",
+//     value: 1,
+//   },
+//   {
+//     label: "全员可见",
+//     value: 2,
+//   },
+// ]);
+const predefineColors = ref([
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "#ff4500ad",
+  "#ff7800",
+  "#fad400",
+  "#90f09080",
+  "#00babd",
+  "#1f93ffba",
+  "#c7158577",
+]);
+const formConfig = computed(() => {
+  return [
+    {
+      type: "input",
+      prop: "title",
+      label: "标题",
+      itemType: "text",
+    },
+    {
+      type: "slot",
+      prop: "time",
+      slotName: "time",
+      label: "时间",
+    },
+    {
+      type: "slot",
+      prop: "color",
+      slotName: "color",
+      label: "颜色",
+    },
+    {
+      type: "slot",
+      prop: "participantList",
+      slotName: "participantList",
+      label: "参与人",
+    },
+    // {
+    //   type: "input",
+    //   prop: "place",
+    //   label: "地点",
+    //   itemType: "text",
+    // },
+    {
+      type: "slot",
+      prop: "noticeType",
+      slotName: "noticeType",
+      label: "通知",
+    },
+    // {
+    //   type: "slot",
+    //   prop: "taskPermissions",
+    //   slotName: "taskPermissions",
+    //   label: "任务权限",
+    // },
+    {
+      type: "input",
+      prop: "remark",
+      label: "具体描述",
+      itemType: "textarea",
+    },
+  ];
+});
+const rules = ref({
+  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+  startDate: [{ required: true, message: "请选择开始时间", trigger: "change" }],
+  endDate: [{ required: true, message: "请选择结束时间", trigger: "change" }],
+  // repeatType: [{ required: true, message: "请选择重复类型", trigger: "change" }],
+  color: [{ required: true, message: "请选择颜色", trigger: "change" }],
+  participantList: [{ required: true, message: "请选择参与人", trigger: "change" }],
+  // place: [{ required: true, message: "请输入日程、事项、活动地址等", trigger: "blur" }],
+  noticeType: [{ required: true, message: "请选择通知类型", trigger: "change" }],
+  // taskPermissions: [{ required: true, message: "请选择任务权限", trigger: "change" }],
+});
+const newSchedule = () => {
+  formData.data = {
+    isAllDay: 0,
+    participantList: [],
+  };
+  loadingDialog.value = false;
+  openSchedule.value = true;
+};
+const clickSubmit = () => {
+  schedule.value.handleSubmit(() => {
+    loadingDialog.value = true;
+    let data = JSON.parse(JSON.stringify(formData.data));
+    if (data.participantList && data.participantList.length > 0) {
+      data.participantList = data.participantList.map((item) => {
+        return {
+          participantId: item,
+        };
+      });
+    }
+    proxy.post("/scheduleInfo/add", data).then(
+      () => {
+        ElMessage({
+          message: "新建成功",
+          type: "success",
+        });
+        openSchedule.value = false;
+        getList();
+      },
+      (err) => {
+        console.log(err);
+        loadingDialog.value = false;
+      }
+    );
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.outer-layer {
+  margin: 20px;
+  display: flex;
+  justify-content: space-between;
+  .schedule-left {
+    width: 360px;
+    background: #fff;
+    height: calc(100vh - 100px - 40px);
+    padding: 20px;
+    overflow-y: auto;
+  }
+  .schedule-right {
+    width: calc(100% - 380px);
+    .schedule-top {
+      width: 100%;
+      background: #fff;
+      padding: 20px;
+    }
+    .schedule-bottom {
+      width: 100%;
+      background: #fff;
+      height: calc(100vh - 100px - 40px - 92px);
+      padding: 20px;
+      margin-top: 20px;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 0px;
+      }
+    }
+  }
+}
+::v-deep(.el-menu) {
+  border-right: 0;
+}
+::v-deep(.el-menu-item) {
+  height: 40px;
+}
+::v-deep(.el-calendar__header) {
+  display: none;
+}
+::v-deep(.el-calendar__body) {
+  padding: 0;
+}
+::v-deep(.el-calendar-table .el-calendar-day) {
+  padding: 0;
+  min-height: calc((100vh - 100px - 40px - 92px - 50px - 40px) / 6);
+}
+.is-selected {
+  color: #1989fa;
+}
+.title {
+  text-align: center;
+  height: 30px;
+  line-height: 22px;
+  position: relative;
+  padding: 4px;
+  .select-title {
+    border-radius: 50px;
+    background-color: #1989fa;
+    color: #eee;
+    padding: 4px;
+  }
+}
+::v-deep(.radio-color .el-radio) {
+  margin-right: 8px;
+}
+::v-deep(.radio-color .el-radio__input) {
+  display: none;
+}
+::v-deep(.radio-color .el-radio__label) {
+  div {
+    width: 24px;
+    height: 24px;
+    border-radius: 50px;
+  }
+}
+</style>