|
|
@@ -603,7 +603,7 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
];
|
|
|
const obj = $(setting.selector);
|
|
|
const html = [], pageLength = 15;
|
|
|
- let billsTags = [], classIndexes = [], billsIndexes = {};
|
|
|
+ let billsTags = [], classIndexes = [], billsIndexes = {}, curShow = [];
|
|
|
html.push('<div class="sjs-bar d-flex justify-content-between">');
|
|
|
// 下拉过滤
|
|
|
html.push('<div class="dropdown mr-2">');
|
|
|
@@ -618,8 +618,10 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
html.push('</div>', '</div>');
|
|
|
// 搜索框
|
|
|
html.push('<div class="input-group input-group-sm">');
|
|
|
- html.push('<input type="text" class="form-control" placeholder="可查找 项目节编号 / 清单编号 /名称">');
|
|
|
- html.push('<div class="input-group-append">', '<button class="btn btn-outline-secondary" type="button" id="bills-tag-search">搜索</button>', '</div>');
|
|
|
+ html.push('<input type="text" class="form-control" placeholder="可查找 项目节编号 / 清单编号 /名称" id="bills-tag-keyword">');
|
|
|
+ html.push('<div class="input-group-append">', '<div class="input-group-cancel">',
|
|
|
+ '<a href="javascript: void(0);" id="bills-tag-clear" class="text-danger"><i class="fa fa-times-circle" title="移除搜索结果"></i></a>', '</div>',
|
|
|
+ '<button class="btn btn-outline-secondary" type="button" id="bills-tag-search">搜索</button>', '</div>');
|
|
|
html.push('</div>');
|
|
|
html.push('</div>');
|
|
|
// 书签列表
|
|
|
@@ -627,16 +629,55 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
obj.html(html.join(''));
|
|
|
|
|
|
const clearViewTags = function () {
|
|
|
- const viewTags = $('[name=billsTag]', obj);
|
|
|
+ const viewTags = $('.tag-item', obj);
|
|
|
if (viewTags && viewTags.length > 0) viewTags.remove();
|
|
|
billsTags.forEach(x => {x.display = false});
|
|
|
};
|
|
|
|
|
|
- const getTagDisplayHtml = function(tag) {
|
|
|
+ const getTagEditHtml = function(tag) {
|
|
|
const tagClass = classIndexes.find(x => {return x.color === tag.color});
|
|
|
const tagHtml = [];
|
|
|
+ tagHtml.push('<div name="tag-edit">');
|
|
|
tagHtml.push('<div class="card-header p-2"><div class="dropdown">');
|
|
|
- tagHtml.push(`<a class="pull-left mr-2" href="" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tag ${tagClass.tagClass}" title="修改书签颜色"></i></a>`);
|
|
|
+ tagHtml.push(`<a class="pull-left mr-2" href="javascript: void(0);" id="tag-change-color" tag-color="${tag.color}" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tag ${tagClass.tagClass}" title="修改书签颜色"></i></a>`);
|
|
|
+ // 下拉选择颜色
|
|
|
+ tagHtml.push('<div class="dropdown-menu" aria-labelledby="tag-change-color" style="min-width:60px">',
|
|
|
+ '<a class="dropdown-item text-primary" href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
|
|
|
+ '<a class="dropdown-item text-success " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
|
|
|
+ '<a class="dropdown-item text-danger " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
|
|
|
+ '<a class="dropdown-item text-warning " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>',
|
|
|
+ '<a class="dropdown-item text-info " href="javascript: void(0);" name="tag-color"><i class="fa fa-tint"></i></a>', '</div>');
|
|
|
+ tagHtml.push('</div>');
|
|
|
+ tag.node && tagHtml.push((tag.node.code || '') + (tag.node.b_code || ''), ' / ', tag.node.name || '');
|
|
|
+ tagHtml.push('</div>');
|
|
|
+
|
|
|
+ tagHtml.push('<div class="card-body p-2">');
|
|
|
+ tagHtml.push('<p class="card-text">', '<textarea class="form-control" id="tag-comment">', tag.comment, '</textarea>', '</p>');
|
|
|
+
|
|
|
+ tagHtml.push('<div class="d-flex justify-content-between">');
|
|
|
+ // 参与人可见
|
|
|
+ tagHtml.push('<div class="custom-control custom-switch mr-2">');
|
|
|
+ tagHtml.push('<input type="checkbox" class="custom-control-input custom-control-warning-input" id="tag-share">');
|
|
|
+ tagHtml.push('<label class="custom-control-label custom-control-warning-label" for="tag-share" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="所有参与台帐审批管理的用户都可以看到这条书签"><i class="fa fa-users"></i> 参与者可见</label>');
|
|
|
+ tagHtml.push('</div>');
|
|
|
+ // 编辑按钮
|
|
|
+ tagHtml.push('<div>', '<button type="button" class="btn btn-sm btn-outline-danger mr-3" id="tag-del"><i class="fa fa-close"></i> 删除书签</button>',
|
|
|
+ '<button type="button" class="btn btn-sm btn-outline-success mr-1" id="tag-edit-ok"><i class="fa fa-check"></i> 确定</button>',
|
|
|
+ '<button type="button" class="btn btn-sm btn-outline-secondary" id="tag-edit-cancel">取消</button>', '</div>');
|
|
|
+ tagHtml.push('</div>');
|
|
|
+
|
|
|
+ tagHtml.push('</div>');
|
|
|
+
|
|
|
+ tagHtml.push('</div>');
|
|
|
+ return tagHtml.join('');
|
|
|
+ };
|
|
|
+
|
|
|
+ const getTagDisplayHtml = function (tag) {
|
|
|
+ const tagClass = classIndexes.find(x => {return x.color === tag.color});
|
|
|
+ const tagHtml = [];
|
|
|
+ tagHtml.push('<div name="tag-view">');
|
|
|
+ tagHtml.push('<div class="card-header p-2"><div class="dropdown">');
|
|
|
+ tagHtml.push(`<div class="pull-left mr-2"><i class="fa fa-tag ${tagClass.tagClass}"></i></div>`);
|
|
|
tagHtml.push('</div>');
|
|
|
tag.node && tagHtml.push((tag.node.code || '') + (tag.node.b_code || ''), ' / ', tag.node.name || '');
|
|
|
if (tag.share) {
|
|
|
@@ -645,19 +686,51 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
tagHtml.push('<div class="pull-right edit-tag-btn">');
|
|
|
const lid = tag.node ? tag.node.ledger_id : -1;
|
|
|
tagHtml.push(`<a class="mr-1" name="bills-tag-locate" href="javascript: void(0);" lid="${lid}"><i class="fa fa-crosshairs"></i> 定位</a>`);
|
|
|
- if (tag.uid === userID) tagHtml.push('<a href="javascript: void(0);"><i class="fa fa-edit"></i> 编辑</a>');
|
|
|
+ if (tag.uid === userID) tagHtml.push(`<a href="javascript: void(0);" name="bills-tag-edit" tag-id="${tag.id}"><i class="fa fa-edit"></i> 编辑</a>`);
|
|
|
tagHtml.push('</div>');
|
|
|
tagHtml.push('<div class="card-body p-2">', '<p class="card-text">', tag.comment, '</p>', '</div>');
|
|
|
+ tagHtml.push('</div>');
|
|
|
return tagHtml.join('');
|
|
|
};
|
|
|
|
|
|
+ const searchTagsAndShow = function () {
|
|
|
+ const keyword = $('#bills-tag-keyword').val();
|
|
|
+ const filterClass = $('#bills-tag-filter')[0].classList;
|
|
|
+ const tagClass = filterClass.length > 2 ? filterClass[2] : null;
|
|
|
+ const ci = tagClass ? classIndexes.find(x => {return x.tagClass === tagClass}) : null;
|
|
|
+ curShow = billsTags.filter(x => {
|
|
|
+ if (ci && ci.color !== x.color) return false;
|
|
|
+ if (!keyword) return true;
|
|
|
+ if (x.node.code && x.node.code.indexOf(keyword) >= 0) return true;
|
|
|
+ if (x.node.b_code && x.node.b_code.indexOf(keyword) >= 0) return true;
|
|
|
+ if (x.node.name && x.node.name.indexOf(keyword) >= 0) return true;
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ reloadViewTags();
|
|
|
+ };
|
|
|
+
|
|
|
+ const refreshTagView = function (tag) {
|
|
|
+ const obj = $('#bills-tag-' + tag.id);
|
|
|
+ if (obj && obj.length > 0) {
|
|
|
+ obj.html(getTagDisplayHtml(tag));
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const refreshBillsTagView = function (bills) {
|
|
|
+ const bi = billsIndexes[bills.id] || [];
|
|
|
+
|
|
|
+ for (const tag of bi) {
|
|
|
+ refreshTagView(tag);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
const reviewTag = function (tag, isTop = false) {
|
|
|
const obj = $('#bills-tag-' + tag.id);
|
|
|
if (obj && obj.length > 0) {
|
|
|
obj.html(getTagDisplayHtml(tag));
|
|
|
} else {
|
|
|
const objHtml = [];
|
|
|
- objHtml.push(`<div class="card border-primary my-2 tag-item" id="bills-tag-${tag.id}">`);
|
|
|
+ objHtml.push(`<div class="card border-primary my-2 tag-item" id="bills-tag-${tag.id}" tag-id="${tag.id}">`);
|
|
|
objHtml.push(getTagDisplayHtml(tag));
|
|
|
objHtml.push('</div>');
|
|
|
if (isTop) {
|
|
|
@@ -669,9 +742,9 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
tag.display = true;
|
|
|
};
|
|
|
|
|
|
- const loadViewTags = function (tags) {
|
|
|
+ const loadViewTags = function () {
|
|
|
let showCount = 0;
|
|
|
- for (const t of tags) {
|
|
|
+ for (const t of curShow) {
|
|
|
if (showCount >= pageLength) continue;
|
|
|
if (t.display) continue;
|
|
|
reviewTag(t);
|
|
|
@@ -679,6 +752,12 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ const reloadViewTags = function () {
|
|
|
+ clearViewTags();
|
|
|
+ $("#bills-tag-lis").scrollTop(0);
|
|
|
+ loadViewTags();
|
|
|
+ };
|
|
|
+
|
|
|
const _addToBillsIndex = function(data, isTop = false) {
|
|
|
let bi = billsIndexes[data.lid];
|
|
|
if (!bi) {
|
|
|
@@ -695,28 +774,23 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
billsTags.push(d);
|
|
|
_addToBillsIndex(d);
|
|
|
}
|
|
|
- for (const ci of classIndexes) {
|
|
|
- ci.tags = billsTags.filter(x => {return x.color === ci.color});
|
|
|
- }
|
|
|
- clearViewTags();
|
|
|
- loadViewTags(billsTags);
|
|
|
+ curShow = billsTags;
|
|
|
+ reloadViewTags();
|
|
|
};
|
|
|
|
|
|
const updateDatas = function (data) {
|
|
|
const refresh = {};
|
|
|
if (data.add) {
|
|
|
billsTags.push(data.add);
|
|
|
- const tagClass = classIndexes.find(x => {return x.color === data.add.color});
|
|
|
- if (tagClass) tagClass.tags.push(data.add);
|
|
|
_addToBillsIndex(data.add, true);
|
|
|
refresh.add = data.add;
|
|
|
}
|
|
|
if (data.del) {
|
|
|
- const delTag = billsTags.find(x => {return x.id === data.del.id});
|
|
|
+ const delTag = billsTags.find(x => {return x.id === data.del});
|
|
|
billsTags.splice(billsTags.indexOf(delTag), 1);
|
|
|
- const tagClass = classIndexes.find(x => {x.color = delTag.color});
|
|
|
- if (tagClass) tagClass.splice(tagClass.indexOf(delTag), -1);
|
|
|
- refresh.del = data.del
|
|
|
+ const bi = billsIndexes[delTag.node.id];
|
|
|
+ bi.splice(bi.indexOf(delTag), 1);
|
|
|
+ refresh.del = delTag;
|
|
|
}
|
|
|
if (data.update) {
|
|
|
const updateTag = billsTags.find(x => {return x.id === data.update.id});
|
|
|
@@ -729,10 +803,21 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
};
|
|
|
|
|
|
const updateDatasAndShow = function (data) {
|
|
|
+ const relaBills = [];
|
|
|
const refresh = updateDatas(data);
|
|
|
if (refresh.add) {
|
|
|
reviewTag(refresh.add, true);
|
|
|
+ relaBills.push(refresh.add.node);
|
|
|
}
|
|
|
+ if (refresh.del) {
|
|
|
+ $('#bills-tag-' + refresh.del.id).remove();
|
|
|
+ relaBills.push(refresh.del.node);
|
|
|
+ }
|
|
|
+ if (refresh.update) {
|
|
|
+ refreshTagView(refresh.update);
|
|
|
+ relaBills.push(refresh.update.node);
|
|
|
+ }
|
|
|
+ return relaBills;
|
|
|
};
|
|
|
|
|
|
const show = function () {
|
|
|
@@ -757,7 +842,85 @@ const showSelectTab = function(select, spread, afterShow) {
|
|
|
SpreadJsObj.locateTreeNode(setting.relaSpread.getActiveSheet(), lid);
|
|
|
setting.afterLocated && setting.afterLocated();
|
|
|
});
|
|
|
+ $('body').on('click', '[name=bills-tag-edit]', function () {
|
|
|
+ const tagId = this.getAttribute('tag-id');
|
|
|
+ const tag = billsTags.find(x => {return x.id == tagId});
|
|
|
+ if (tag) {
|
|
|
+ const obj = $('#bills-tag-' + tag.id);
|
|
|
+ $('[name=tag-view]', obj).hide();
|
|
|
+ obj.append(getTagEditHtml(tag));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('body').on('click', '#tag-edit-cancel', function () {
|
|
|
+ const obj = $('[name=tag-edit]').parent();
|
|
|
+ $('[name=tag-edit]').remove();
|
|
|
+ $('[name=tag-view]', obj).show();
|
|
|
+ });
|
|
|
+ $('body').on('click', '#tag-del', function () {
|
|
|
+ const obj = $('[name=tag-edit]').parent();
|
|
|
+ postData(setting.updateUrl, {del: parseInt(obj.attr('tag-id'))}, function (result) {
|
|
|
+ if (!result.del) return;
|
|
|
+
|
|
|
+ const bills = updateDatasAndShow(result);
|
|
|
+ setting.afterModify && setting.afterModify(bills);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ $('body').on('click', '#tag-edit-ok', function () {
|
|
|
+ const obj = $('[name=tag-edit]').parent();
|
|
|
+ const data = {
|
|
|
+ id: parseInt(obj.attr('tag-id')),
|
|
|
+ share: $('#tag-share')[0].checked,
|
|
|
+ comment: $('#tag-comment').val(),
|
|
|
+ color: $('#tag-change-color').attr('tag-color'),
|
|
|
+ };
|
|
|
+ postData(setting.updateUrl, {update: data}, function (result) {
|
|
|
+ if (!result.update) return;
|
|
|
+
|
|
|
+ const bills = updateDatasAndShow(result);
|
|
|
+ setting.afterModify && setting.afterModify(bills);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ $('body').on('click', '[name=tag-color]', function () {
|
|
|
+ const tagClass = this.classList[1];
|
|
|
+ const ci = classIndexes.find(tc => {return tc.tagClass === tagClass});
|
|
|
+ const tcc = $('#tag-change-color');
|
|
|
+ tcc.attr('tag-color', ci.color);
|
|
|
+ tcc.find('i').attr('class', 'fa fa-tag ' + tagClass);
|
|
|
+ });
|
|
|
+ $('body').on('click', '[tagType]', function () {
|
|
|
+ const tagClass = this.getAttribute('tagType');
|
|
|
+ if (tagClass === 'all') {
|
|
|
+ $('#bills-tag-filter').attr('class', 'fa fa-list-ol');
|
|
|
+ } else {
|
|
|
+ $('#bills-tag-filter').attr('class', 'fa fa-tag ' + tagClass);
|
|
|
+ }
|
|
|
+ searchTagsAndShow();
|
|
|
+ });
|
|
|
+ // 防抖
|
|
|
+ function debounce(fun, delay) {
|
|
|
+ let timer = null;
|
|
|
+ return function () {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ timer = setTimeout(fun, delay);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $('#bills-tag-list').bind('scroll', debounce(function (e) {
|
|
|
+ const obj = $('#bills-tag-list');
|
|
|
+ var sum = obj[0].scrollHeight;
|
|
|
+ if (sum <= obj.scrollTop() + obj.height()) {
|
|
|
+ loadViewTags();
|
|
|
+ }
|
|
|
+ }, 300));
|
|
|
+ $('#bills-tag-clear').bind('click', () => {
|
|
|
+ if (!$('#bills-tag-keyword').val()) return;
|
|
|
+ $('#bills-tag-keyword').val('');
|
|
|
+ searchTagsAndShow();
|
|
|
+ });
|
|
|
+ $('#bills-tag-search').bind('click', () => {searchTagsAndShow();});
|
|
|
+ $('#bills-tag-keyword').bind('keydown', e => {if (e.keyCode === 13) searchTagsAndShow();});
|
|
|
|
|
|
- return { loadDatas, updateDatasAndShow, show, getBillsTagsColor, getBillsTagsInfo }
|
|
|
+ return { loadDatas, updateDatasAndShow, show, getBillsTagsColor, getBillsTagsInfo, refreshBillsTagView, }
|
|
|
}
|
|
|
})(jQuery);
|
