@codernote/plan-hours-vue3 NPM

计划软件 - hours

计划软件右侧hours, vue3版本

安装

npm install @codernote/plan-hours-vue3

使用

<template>
  <PlanHours
    :hoursMap="hoursMap"
    :day="hoursFocusIdx"
    :show="showHours"
    :importType="1"
    @hide="handleHideHours"
    @updateHoursInfo="updateHoursInfo"
    @taskStatusChange="taskStatusChange"
  />
</template>

<script>

import {
  PlanHours, // 组件
  hoursConstant, // 常量
} from "@codernote/plan-hours";

const getCurrentDayIdx = () => {
  const dayTimeStamp = 24 * 60 * 60 * 1000
  const beginTime = new Date('1987/01/01 00:00:00').getTime()
  const pastTime = Date.now() - beginTime
  return parseInt(pastTime / dayTimeStamp)
}

export default {
  components: {
    PlanHours,
  },
  data() {
    return {
      showHours: false,
      hoursFocusIdx: getCurrentDayIdx(),  // 任务所属时间天数, 模版取当天
      hoursMap: {
        level1: [],
        level2: [],
        level3: []
      },
    }
  },
  mounted() { 
    // 初始化测试数据
    this.initData()
  },
  methods: {
    initData() {
      this.hoursMap = {
        // 重点任务
        level1: [
          {
            "bold": 1,
            "finish": 0,
            "desc": "重要任务",
            "idx": this.hoursFocusIdx,
            "item_id": "1720970094340",
            "isAssigned": 1,
            "assignStartTime": "11:58",
            "assignEndTime": "12:58",
            "type": 6,
            "created_at": 1720970102545,
            "updated_at": 1720970102545,
            "deleted_at": 0,
            "lastInsertRowid": 33,
            "success": true
          }
        ],
        // 已安排的任务
        level2: [
          {
            "item_id": "1720967835253",
            "type": 6,
            "idx": this.hoursFocusIdx,
            "desc": "任务2",
            "finish": 0,
            "bold": 1,
            "isAssigned": 1,
            "assignStartTime": "13:58",
            "assignEndTime": "14:58",
            "created_at": 1720969641966,
            "updated_at": 1720970065241,
            "deleted_at": 0
          }
        ], // 临时任务
        level3: [
          {
            "idx": this.hoursFocusIdx,
            "desc": "临时任务",
            "finish": 0,
            "assignStartTime": "15:26",
            "assignEndTime": "16:26",
            "created_at": 1720961199752,
            "updated_at": 1720961200251,
            "deleted_at": 0,
            "level": "level3",
            "item_id": "1720961199752",
            "top": "395.8705882352941",
            "height": "46.94117647058823"
          }
        ]
      }
      this.showHours = true
    },
    /**
     * 隐藏组件
     */
    handleHideHours() {
      this.showHours = false
    },
    /**
     * 修改hourseInfo数据
     * @param {any} data 数据
     */
    updateHoursInfo(data = {}) {
      this.hoursMap = data
    },
    /**
     * 任务状态变更
     * @param {String} tableName 操作的表: hoursInfo || goalTree
     * @param {Number} action 任务类型  1:添加  2:修改  3:取消
     * @param {Object} item 任务数据
     */
    taskStatusChange(enter) {
      const { tableName, action, item } = enter
      switch(action) {
        case hoursConstant.ARRANGE_TASK_TYPE.add:
          console.log('添加', tableName, item)
          break;
        case hoursConstant.ARRANGE_TASK_TYPE.update:
          console.log('修改', tableName, item)
          break;
        case hoursConstant.ARRANGE_TASK_TYPE.del:
          console.log('删除', tableName, item)
          break;
      }
    }
  }
}
</script>

props

<PlanHours
  {/* 必传，任务所属天数 */}
  :day="hoursFocusIdx"

  {/* 必传，当前日期的数据合集 */}
  :hoursMap="{
    // 🌟 重点任务
    level1: [], // goalTree表，根据条件查询 filter: { isAssigned: 1, type: 6, idx: hoursFocusIdx, bold: 1}
    // 🌟 已安排的任务
    level2: [], // goalTree表，根据条件查询 filter: { isAssigned: 1, type: 6, idx: hoursFocusIdx, bold: 0}
    // 🌟 临时任务
    level3: []  // hoursInfo表, 根据条件查询 filter: { idx: hoursFocusIdx }
  }"

  {/* 必传，是否显示当前组件，默认false */}
  :show="true"

  {/* 可选，是否禁止编辑 */}
  :disabled="false"

  {/* 可选，是否开启宽度渐入渐出 */}
  :isWidthTransition="false"
  
  {/* 可选，引入端类型， 1: electron  2、H5; 默认为1 */}
  :importType="1"
  
  {/* 可选，打开底部菜单模式，仅在importType=2时生效 */}
  :openBottomMenu="true"

  {/* 可选，头部配置 */}
  :headConf="{
    dateShow: true, // 日期显示
    clockStart: 7, // 开始钟点时间
    clockEnd: 24, // 结束钟点时间
    clockShow: true, // 显示钟点区间
    closeShow: true, // 显示关闭按钮
  }"

  {/* 可选，主题色 */}
  :themeColor="{
    timeScale: '#e7e7e7', // 时间轴背景色
    timeLine: 'green', // 时间线颜色
    taskBorderColor: '#008080', // 任务active边框色
    task1Back: '#909399', // 左侧任务背景色
    task2Back: '#c0c4cc', // 中间任务背景色
    task3Back: '#e4e7ed', // 右侧任务背景色
  }"
    
  {/* 可选，关闭窗口 */}
  @hide="handleHideHours"

  {/* 必需，修改hourseInfo数据, 参考上方模版 */}
  @updateHoursInfo="updateHoursInfo"

  {/* 可选，任务状态变更通知，参考上方模版 */}
  @taskStatusChange="taskStatusChange"
/>

helper

/**
 * 获取当前时间的尺度Idx
 * @returns 距离1987/01/01 00:00:00的天数
 */
const getCurrentDayIdx = () => {
    const dayTimeStamp = 24 * 60 * 60 * 1000
    const beginTime = new Date('1987/01/01 00:00:00').getTime()
    const pastTime = Date.now() - beginTime
    return parseInt(pastTime / dayTimeStamp)
}

constants

/**
 * 微观枚举
 */
const MEASURE_ENUM = {
    lives: 0, // 生
    expect: 1, // 期
    year: 2, // 年
    quarter: 3, // 季
    month: 4, // 月
    week: 5, // 周
    day: 6 // 日
}