扩展任务属性 - 开发教程 - 项目管理

扩展任务属性

自定义任务属性的原理:

  • 给任务对象扩展属性。比如从服务端加载的时候,给任务多增加属性。
  • 界面对扩展的任务属性进行编辑。如自定义列和任务编辑界面,对新增的任务属性进行编辑。
  • 保存任务属性。扩展任务表的字段,修改服务端SQL操作,将新的任务属性保存进数据库。

EdoProject的自定义任务属性涉及到如下几个方面:

  1. 扩展任务表edo_task的字段。
  2. 服务端SQL对新增字段的操作:insert和select。
  3. 在界面上扩展任务树的列,显示和编辑新增的任务属性。

简单类型

下面我们以给任务增加一个High(严重级别)属性为例。
首先,我们在edo_task任务表内定义一个High字段列,为数字类型。

然后,,我们在EdoProject.xml数据库SQL操作文件内,为新增的字段补上相关的sql,如果是简单属性, 我们只需要修改"insertTask"新增sql就可以了:

<insert id="insertTask">
  INSERT INTO edo_task
  (
  UID,
  ...
  High  <!--新增的字段-->
  )
  VALUES (
  #UID#,
  ...
  #High#  <!--新增的字段-->
  )
</insert>

注意:因为我们获取任务数据的时候, 是“select * ”方式,所以,不需修改获取任务属性的SQL。

最后,我们在前台页面创建易度甘特图显示对象时候,插入一个新增的列,代码如下:

//获得任务树已有定义的列配置对象
var columns = project.tree.groupColumns;
//新增一列,以及编辑器
columns[0].columns.insert(0, {
    header: '严重级别',
    dataIndex: 'High',
    editor: {
        type: 'text'
    }
});
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

效果图如下:

选择类型(单选)

选择类型是不需要直接输入信息的,而是从多个结果中选择一个或多个的选中项。

本节以选择单选任务状态Status为例,说明如何实现一个有多个结果的单选场景。

我们在任务表edo_task需要扩展一个字段:Status。数字类型。其他SQL代码修改,与上节"简单类型"一样。

然后,我们对任务树扩展一个任务状态列,代码如下:

var TaskStatus = [
    {id: 1, name: '未启动'},
    {id: 2, name: '进行中'},
    {id: 3, name: '暂停中'},
    {id: 4, name: '已完成'}
];
//获得任务树已有定义的列配置对象
var columns = project.tree.groupColumns;
//新增"任务状态列"
columns[0].columns.insert(0, {
    header: '任务状态', dataIndex: 'Status',
    editor: {
        id: 'taskstatus', 
        type: 'combo',      //下拉选择框
        displayField: 'name', 
        valueField: 'id',
        readOnly: true,
        data: TaskStatus
    },
    renderer: function(v, r){          
        for(var i=0,l=TaskStatus.length; i<l; i++){
            var d = TaskStatus[i];
            if(v == d.id) return d.name;
        }
        return '';
    }
});
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

效果图如下:

选择类型(多选)

可以轻松实现多选。

本节以选择多选部门为例。

我们在任务表edo_task需要扩展一个字段:Department。字符串类型。其他SQL代码修改,与上节"简单类型"一样。

然后,我们对任务树扩展一个部门列,代码如下:

var Departments = [
    {id: 1, name: '研发部'},
    {id: 2, name: '财务部'},
    {id: 3, name: '人事部'},
    {id: 4, name: '投资部'},
    {id: 5, name: '商务部'}
];
//获得任务树已有定义的列配置对象
var columns = project.tree.groupColumns;
//新增"部门"
columns[0].columns.insert(0, {
    header: '部门', dataIndex: 'Department',
    editor: {        
        type: 'multicombo',      //多选下拉选择框
        displayField: 'name', 
        valueField: 'id',
        readOnly: true,
        data: Departments
    },
    renderer: function(v, r){       
        if(!v) return;        
        var ds = v.split(',');
        var sb = [];
        for(var j=0,k=ds.length; j<k; j++){
            var id = ds[j];
            for(var i=0,l=Departments.length; i<l; i++){
                var d = Departments[i];
                if(id == d.id) {
                    sb.push(d.name);
                    break;
                }
            }        
        }
        return sb.join(',');
    }
});
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

效果图如下: