block-calendar AMS日历看板

预览图

安装

npm i --save @ams-team/block-calendar

options配置

参数 | 类型 | 是否必填 | 说明 --|---|---|---|--- type | string | 是 | block类型，固定值为calendar resource | string | 否 | 指定resource data | object | 是 | content为日历内容，searchs为搜索条件，year、month为看板展示的year年month+1月的日历 options | object | 是 | title为标题；draggable表示是否支持数据拖拽 events | object | 否 | 事件定义 actions | object | 否 | 自定义actions，可被events中使用

例子

{
  "type": "calendar",
  "ctx": "view",
  "resource": {
    "fields": {
      "date": {
        "type": "date",
        "props": {
          "value-format": "yyyy-MM",
          "type": "month"
        }
      }
    }
  },
  "data": {
    "searchs": {
      "date": "2019-03"
    },
    "year": 2019,
    "month": 2,
    "content": {}
  },
  "options": {
    "title": "日历看板",
    "draggable": true
  },
  "searchs": {
    "date": true
  },
  "on": {
    "end": function end(obj) {
      console.log('from:', obj.from.dataset.date, obj.from.dataset.time, obj.oldIndex);
      console.log('to:', obj.to.dataset.date, obj.to.dataset.time, obj.newIndex);
    },
    "cell-click": function cellClick(index, id, date, time) {
      console.log('click', index, id, date, time);
    }
  },
  "events": {
    "init": "@fieldChange",
    "getList": "@getList"
  },
  "actions": {
    "fieldChange": function fieldChange(_ref) {
      var name = _ref.name,
        value = _ref.value;
      var data = this.block.data;

      if (name) {
        data.searchs[name] = value;
      }

      if (name === 'date') {
        // 切换时间，看板展示数据相应变化
        data.year = value.split('-')[0];
        data.month = value.split('-')[1] - 1;
      }

      var args = {};
      this.callAction(this.block.events.getList, args);
    },
    "getList": function getList(args) {
      if (this.block.options.draggable) {
        // 拖拽
        this.block.data.content = {
          1551974400000: {
            10: [{
              html: "<div>\u6570\u636E1</div>",
              id: 1
            }, {
              html: "<div>\u6570\u636E2</div>",
              id: 2
            }],
            20: [{
              html: "<div>\u6570\u636E3</div>",
              id: 3
            }]
          },
          1552320000000: {
            10: [{
              html: "<div>\u6570\u636E4</div>",
              id: 4
            }],
            20: [{
              html: "<div>\u6570\u636E5</div>",
              id: 5
            }]
          }
        };
      } else {
        // 不可拖拽
        this.block.data.content = {
          1551974400000: {
            10: ["<div>\u6570\u636E1</div>", "<div>\u6570\u636E2</div>"],
            20: ["<div>\u6570\u636E3</div>"]
          },
          1552320000000: {
            10: ["<div>\u6570\u636E4</div>"],
            20: ["<div>\u6570\u636E5</div>"]
          }
        };
      }
    }
  }
}