byte-sailing-new/src/views/oa/work/schedule/index.vue

<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>