hours-panel

1.1.3版本

跟新内容

新增参数： 
  limitSize: 最小时间限制，默认15分钟
  limitMinute: 最小移动分钟时间，默认5分钟
  isResize: 是否显示左侧拖动宽度边框

安装

npm install hours-panel

使用

// 组件引用 main.js
import HoursPanel from 'hours-panel'
Vue.use(HoursPanel)

// 组件使用示例
<template>
  <div>
    <div style="height: 30px;line-height: 30px; border: 1px beige;margin: 10px;"
    @contextmenu.prevent.stop="onContextmenu"
    @mousedown.prevent="mouseD"
    >
    456
    </div>
    <div style="height: 30px;line-height: 30px; border: 1px beige;margin: 10px;"
    @contextmenu.prevent.stop="onContextmenu"
    @mousedown.prevent="mouseD"
    >
    789
    </div>

    <HoursPanel
      ref="hoursPanel"                    // 写死
      :day="hoursFocusIdx"                // 任务所属天数
      :data="tempInfo"                    // 所有已经安排的任务：{hoursFocusIdx: {level1:[任务], level2:[任务], level3:[任务]}}
      :show="showHours"                   // 是否显示当前组件
      :dragTaskInfo="dragTaskInfo"        // mixins的dragTaskMixin的参数
      :isDragBlockMove="isDragBlockMove"  // mixins的dragTaskMixin的参数
      :dragOverConfig="dragOverConfig"    // mixins的dragTaskMixin的参数
      @moveAreaChange="moveAreaChange"    // mixins的dragTaskMixin的方法
      @changeTaskInfo="changeTaskInfo"    // mixins的dragTaskMixin的方法
      @hide="handleHideHours"             // 隐藏当前组件
    />

  </div>

</template>

<script>

import { dragTaskMixin } from 'hours-panel/dragTaskMixin'
import { MEASURE_ENUM } from 'hours-panel/lib/enum.js'

export default {
  mixins: [dragTaskMixin],
  data() {
    return {
      showHours: false,
      tempInfo: {},       // 所有已经安排的任务：{hoursFocusIdx: {level1:[任务], level2:[任务], level3:[任务]}}
      hoursFocusIdx: -1,  // 任务所属时间天数
      goalTable: {
        goalMap: new Map(), // 储存所有项目的微观任务{hoursFocusIdx：{任务所属项目Id：任务}}  （只有level1和level2任务）
        hoursInfo: {        // 所有已经安排的任务：{hoursFocusIdx: {level1:[任务], level2:[任务], level3:[任务]}}
        },
      }
    }
  },
  mounted() { 
    // 初始化测试数据
    this.initData()
  },
  methods: {
    initData() { 
      this.hoursFocusIdx = 13538
      this.goalTable = {
        goalMap: {
          13538: {  // key为当前天数
            '1705142510832': {  // key为任务所属项目Id
              bold: 1, // 非0 即是level1
              finish: 0, // 非0 即是完成
              desc: 'level1--111',   // 内容
              idx: 13538,
              item_id: '1705142510832',
              isAssigned: 1, // 是否被安排
              assignStartTime: '', // 所安排的开始时间
              assignEndTime: '', // 所安排的结束时间
              created_at: 1706334306212,
              type: MEASURE_ENUM.day, // 尺度枚举（同步下标）
            },
            '1705142510831': {  // key为任务所属项目Id
              bold: 0, // 非0 即是level1
              finish: 0, // 非0 即是完成
              desc: 'level2--222',   // 内容
              idx: 13538,
              item_id: '1705142510831',
              isAssigned: 0, // 是否被安排
              assignStartTime: '', // 所安排的开始时间
              assignEndTime: '', // 所安排的结束时间
              created_at: 1706334306212,
              type: MEASURE_ENUM.day, // 尺度枚举（同步下标）
            }
          }
        },
        hoursInfo: {
          13538: {
            level1: [
            {
                "bold": 1,
                "finish": 0,
                "desc": "level1--111",
                "idx": 13538,
                "item_id": "1705142510832",
                "isAssigned": 1,
                "assignStartTime": "8:59",
                "assignEndTime": "9:59",
                "type": 6,
                "level": "level1",
                created_at: 1706334306212,
                "height": 45.470588235294116,
                "top": 90.26470588235294
            }
            ],
            level2: [],
            level3: [
              {  
                assignEndTime: "11:31",
                assignStartTime: "10:31",
                desc: "level3-test",
                finish: 0,
                height: 45.470588235294116,
                idx: 13538,
                inputFocus: false,
                isAssigned: 1,
                item_id: "1706406040037",
                created_at: 1706334306212,
                level: "level3",
                top: 160,
              }
            ],
          }
        }
      }
      this.tempInfo = this.goalTable.hoursInfo[this.hoursFocusIdx]
    },
    // 拖动任务到组件方法
    mouseD(e) {
      const txt = e.target.textContent
      const isLevel1 = txt.indexOf('789')>0 ||txt.indexOf('000')>0 
      let key = isLevel1 ? '1705142510832' : '1705142510831'
      let item = { idx: this.hoursFocusIdx, type: MEASURE_ENUM.day }
      // mixins的dragTaskMixin中的方法dragTaskStart
      if (this.showHours) this.dragTaskStart(e, this.goalTable.goalMap, key, item)
    },
    
    handleHideHours() {
      this.showHours = false;
    },
    // 右键功能方法，需要vue-contextmenujs包
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: "Hours",
            onClick: () => {
              this.$nextTick(() => {
                this.showHours = true;
              })
            }
          }
        ],
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "custom-class",
        zIndex: 3,
        minWidth: 230
      })
    },
    /**
     * 任务修改通知
     * @param {Object} task 任务
     * @param {String} type 任务类型  addPlan/upPlan/cancelPlan
     * @param {String} level 任务等级 level1/level2/level3
     */
    changeTask(task, type, level) {
      console.log(type, level, task)
    }
  }
}
</script>