任务管理项目总结

1. 时间控件使用

1.1 datepicker

const DATE_PICKER_TIME_FORMAT = "yyyy-mm-dd"
const DATE_PICKER_OPTIONS = {
        orientation: "bottom",
        autoclose: true,
        format: DATE_PICKER_TIME_FORMAT,
        language: "zh-CN",
        todayHighlight: true,
        startDate: new Date(),
}
代码设置开始时间
$('#new-task-start-time').datepicker('setStartDate', new Date());

显示默认时间
$('#new-task-start-time').val(new Date().Format(TIME_FORMAT));
复制代码

1.2 daterange使用

const TIME_RANGE_FORMAT = "YYYY-MM-DD";
$('#searchDateRangerPickerId').daterangepicker({
    "locale": {
            format: TIME_RANGE_FORMAT,
            separator: ' ~ ',
            applyLabel: "应用",
            cancelLabel: "清除",
    },
}, function (start, end, label) {
        console.log('A date range was chosen: ' + start.format(TIME_RANGE_FORMAT) + ' to ' + end.format(TIME_RANGE_FORMAT));
});


$('#searchDateRangerPickerId').val(''); // 初始化搜索实际为空
// 监听清空事件
$('#searchDateRangerPickerId').on('cancel.daterangepicker', function (ev, picker) {
    $('#searchDateRangerPickerId').val('');
});
// 监听应用事件
$("#searchDateRangerPickerId").on('apply.daterangepicker', function () {
    Task.isSearchable = true; // 由于没有使用服务器模式，手动传递搜索参数
    //当选择搜索时间段后，出发dt的重新加载数据的方法
    taskTable.ajax.reload();
    //获取dt请求参数
    var args = taskTable.ajax.params();
    console.log("额外传到后台的参数值extra_search为：" + args.extra_search);
});
复制代码

2. ArtTemplate基本使用

<script id="editTaskTemplate" type="text/html">
// 如果是数组类型使用 each
...
    <p class="form-control-static">{{TASK_DESCRIPTION}}</p>
</script>

let html = template(templateId, data); // 加载模板
复制代码

2.1 辅助函数：格式化时间

<div class="form-group">
    <label class="col-sm-3 control-label">进度得分</label>
    <div class="col-sm-9">
        <p class="form-control-static task-progress-score">{{TASK_PROGRESS_SCORE | scoreFormat}}</p>
    </div>
</div>
注意 TASK_PROGRESS_SCORE | 之间的空格

template.helper('scoreFormat', function (score) {
    return checkValue(score); // 默认值为-1，转为空字符串
});
复制代码

3. Bootstrap Modal 点击事件重复执行问题

$('#taskTableId tbody').on('click', 'button.btn-update', function () {
   if ($(this).hasClass("disabled")) {
        toast("任务已关闭，无法编辑！");
        return;
    } else {
        $('#editModal').modal('show');
    }

    var row = taskTable.row($(this).parents('tr'));
    var selectTask = row.data();
    Task.selectRow = row;  // 保存当前编辑数据
    Task.selectTask = selectTask;

    Task.initEditTaskUI(selectTask);
    // Task.registerSaveTask(); modal中的点击事件不能放在此处
});

Task.registerSaveTask(); // 需要放在外层

registerSaveTask() {
   // modal中的点击事件必须独立，否则会出现重复点击问题(次数累加)
    $('.save-task').on('click', function (e) {
        if (!Task.selectTask) {
            toast("当前选择的任务为空！")
            return;
        }
        if (!Task.selectRow) {
            toast("当前未选择指定的行！")
            return;
        }
        if (!Task.isReadOnly && !TaskBiz.validateTaskTime(Task.getTaskTime())) {
            return false;
        }
        let editTask = Task.generateEditTask(Task.selectTask[KEY.ID]); // 必须从控件获取新的值
        TaskBiz.updateTask(editTask, function () {
            toast("任务更新成功！", "success");
            $('#editModal').modal('hide');
            Task.selectRow.data(Task.transferTask(Task.selectTask));//更新表格数据
        });
    })
},
复制代码

转载于:https://juejin.im/post/5ad701406fb9a028c42ebb6a