<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>计算公式</title>
|
<link href="./css/iconfont.css" rel="stylesheet">
|
<link href="./css/designer.css" rel="stylesheet">
|
<link href="./css/editor.css" rel="stylesheet">
|
<link href="./css/formula.css" rel="stylesheet">
|
<link href="./css/bandtree.css" rel="stylesheet">
|
<link href="./css/workbook.css" rel="stylesheet">
|
<link href="./css/toolbar.css" rel="stylesheet">
|
<script src="./js/Sortable.js"></script>
|
<script src="../../../../js/jquery-3.5.1.min.js"></script>
|
<script src="../../../../js/foundation.js?V1"></script>
|
<script src="./js/popmenu.js"></script>
|
<script src="./js/bandtree.js"></script>
|
<script src="./js/sheet.js"></script>
|
<script src="./js/toolbar.js"></script>
|
<script src="./js/formula.js"></script>
|
<script src="./js/designer_data.js"></script>
|
<!-- <script src="./js/data.js"></script> -->
|
<body>
|
<div class="area-datasource">
|
<div class="datasource-title">
|
<span>
|
<i class="icon iconfont icon-database"></i>
|
数据源列表
|
</span>
|
</div>
|
<div class="datasource-body">
|
<div id="band_tree" >
|
|
</div>
|
</div>
|
</div>
|
|
<div class="area-workspace">
|
<div class="area-workbook">
|
<div class="workbook">
|
<div class="workbook-header">
|
<div class="sheet-header">
|
<span class="iconfont icon-field"></span>
|
折扣计算
|
</div>
|
<div class="sheet-filter">
|
年份：
|
<select class="sheet-filter-select" name="year" id="year_select">
|
<option value="2021">2021</option>
|
<option value="2022">2022</option>
|
<option value="2023">2023</option>
|
</select>
|
月度：
|
<select class="sheet-filter-select" name="month" id="month_select">
|
<option value="1">1</option>
|
<option value="2">2</option>
|
<option value="3">3</option>
|
<option value="4">4</option>
|
<option value="5">5</option>
|
<option value="6">6</option>
|
<option value="7">7</option>
|
<option value="8">8</option>
|
<option value="9">9</option>
|
<option value="10">10</option>
|
<option value="11">11</option>
|
<option value="12">12</option>
|
</select>
|
</div>
|
<div class="sheet-btn" onclick="refreshSheet();">刷新</div>
|
<div class="sheet-btn" onclick="saveSheet();">保存</div>
|
</div>
|
<div id="workbook" class="workbook-body">
|
</div>
|
</div>
|
</div>
|
|
<div class="area-formula">
|
<div id="toolbar" class="panel-buttons">
|
|
</div>
|
|
<div id="panel_formula" class="panel-formula">
|
</div>
|
</div>
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
var params = getGetParamsByUrl(window.location.href);
|
|
window.top.Root.popupParames= {
|
data: {
|
id: params.id
|
}
|
};
|
|
var type_code = "type1";
|
if (params.id == "P005") {
|
type_code = "type2";
|
}
|
else if (params.id == "FP004") {
|
type_code = "type3";
|
}
|
else if (params.id == "P002") {
|
type_code = "type4";
|
}
|
else if (params.id == "P004") {
|
type_code = "type5";
|
}
|
// var result = designer_type[type_code];
|
var tableList_datalist = designer_datalist_type[type_code];
|
|
let now = new Date();
|
$("#year_select").val(now.getFullYear());
|
$("#month_select").val(now.getMonth() + 1);
|
function getGetParamsByUrl(url) {
|
const search = url.split('?')[1]
|
var JSON_ = {};
|
|
if (!search) {
|
return {}
|
}
|
var search_list = search.split("&");
|
search_list.map(s=>{
|
var s_list = s.split("=");
|
if (s_list.length == 2) {
|
var s_list_k = s_list[0];//.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')
|
var s_list_val = s_list[1];//.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')
|
|
JSON_[s_list_k] = s_list_val;
|
}
|
});
|
|
return JSON_
|
}
|
|
|
|
function refreshSheet() {
|
var el = sheet.getHolder();
|
sheetBody.appendChild(el);
|
}
|
|
function saveSheet() {
|
var columns = sheet.getChangedColumns();
|
var param = {
|
planId: popupParames.id,
|
columns: columns
|
}
|
|
Server.call("root/planHandler/saveBookColumns", param, function(result) {
|
var dataList = result.data.datalist;
|
sheet.loadData(dataList);
|
});
|
}
|
|
//1. get data
|
var buckets = util.decode(buckets);
|
|
//2. band tree
|
var bandPopmenu = new Popmenu({
|
items: [{
|
name: "添加到工作簿",
|
onClick: function(item) {
|
sheet.createOneColumn(item);
|
}
|
}, {
|
name: "添加到公式",
|
onClick: function(item) {
|
sheet.setColumnSetting(item);
|
}
|
}]
|
});
|
var bandTree = new BandTree({
|
element: "band_tree",
|
popmenu: bandPopmenu
|
});
|
|
function createHierarchySort(oneBand) {
|
if(!oneBand) {
|
return;
|
}
|
let bodyEle = oneBand.body.get(0);
|
if (!bodyEle) {
|
return;
|
}
|
|
Sortable.create(bodyEle, {
|
animation: 300,
|
direction: "horizontal",
|
sort: false,
|
filter: ".field-used",
|
removeCloneOnHide: false,
|
group:{
|
name: 'itxst',
|
pull: true,
|
put: false,
|
},
|
onStart: function (evt) {
|
mode = "drag";
|
},
|
onEnd: function (event) {
|
let option = clone(holderOption);
|
holder = null;
|
mode = null;
|
holderOption = null;
|
sheet.refreshNewColumnData(option);
|
},
|
forceFallback: true,
|
onCreateGhost: function (dragEl) {
|
var title = $("#text", $(dragEl));
|
var text = title.html();
|
let dragInHolder = bandTree.getHolder(text, dragEl);
|
holderOption = dragInHolder.option;
|
return dragInHolder;
|
}
|
});
|
}
|
|
|
function onAfterBandTreeCreated() {
|
let bands = bandTree.bands;
|
bands.forEach(oneBand => {
|
createHierarchySort(oneBand);
|
})
|
}
|
|
//3. sheet
|
var lineNum_ = 7;
|
if (params.id == "P005") {
|
lineNum_ = 5;
|
}
|
else if (params.id == "FP004") {
|
lineNum_ = 2;
|
}
|
else if (params.id == "P002") {
|
lineNum_ = 2;
|
}
|
else if (params.id == "P004") {
|
lineNum_ = 2;
|
}
|
|
var sheet = new Sheet({
|
element: "workbook",
|
columns: [],
|
lineNum: lineNum_,
|
onChangeColumn: function (option) {
|
if(!option || !formulaDesigner) {
|
return;
|
}
|
let oneTip = {
|
name: option.name,
|
text:"[" + option.name + "]"
|
};
|
|
formulaDesigner.addOneTip(oneTip);
|
},
|
onUpdateColumn: function (option) {
|
if(!option) {
|
return;
|
}
|
// let params = {
|
// planId:popupParames.id,
|
// column: option
|
// }
|
// Server.call("root/planHandler/updateBookColumn", params, function(result) {
|
// var dataList = result.data.datalist;
|
// sheet.loadData(dataList);
|
// });
|
|
},
|
onAddColumnByBand: function (option) {
|
if(!option || !option.bandcolumn) {
|
return;
|
}
|
var dataList = {};
|
var tableList_datalist_ = tableList_datalist;
|
if (option.bandcolumn == "doc_date") {
|
var flowdata = [
|
"2023-03-08",
|
"2023-03-09",
|
"2023-03-10",
|
"2023-03-11",
|
"2023-03-12",
|
"2023-03-13",
|
"2023-03-14"
|
]
|
tableList_datalist_[option.code] = flowdata;
|
// {
|
// "success": true,
|
// "data": {
|
// "datalist": tableList_datalist_,
|
// "type": "workbook"
|
// }
|
// }
|
}
|
if (option.bandcolumn == "month") {
|
var flowdata = [
|
"3",
|
"3",
|
"3",
|
"3",
|
"3",
|
"3",
|
"3"
|
]
|
tableList_datalist_[option.code] = flowdata;
|
}
|
if (option.bandcolumn == "year") {
|
var flowdata = [
|
"2023",
|
"2023",
|
"2023",
|
"2023",
|
"2023",
|
"2023",
|
"2023"
|
]
|
tableList_datalist_[option.code] = flowdata;
|
}
|
dataList = tableList_datalist_;
|
sheet.loadData(dataList);
|
// let params = {
|
// planId:popupParames.id,
|
// column: option
|
// }
|
// Server.call("root/planHandler/addBookColumn", params, function(result) {
|
// var dataList = result.data.datalist;
|
// sheet.loadData(dataList);
|
// });
|
},
|
onDeleteColumn: function (option) {
|
if(!option) {
|
return;
|
}
|
|
let id = option.id;
|
|
let params = {
|
planId:popupParames.id,
|
id: id
|
}
|
let oneTip = {
|
name: option.name,
|
text:"[" + option.name + "]"
|
};
|
sheet.removeOneColumn(option);
|
|
oneTip[option.code] = {};
|
formulaDesigner.deleteOneTip(oneTip);
|
if(!id) {
|
return;
|
}
|
Server.call("root/planHandler/deleteBookColumn", params, function(result) {
|
// sheet.removeOneColumn(option);
|
// var dataList = result.data.datalist;
|
// sheet.loadData(dataList);
|
//不等请求完成 页面端先进行删除
|
});
|
|
},
|
});
|
var sheetBody = document.getElementById('sheet_body');
|
Sortable.create(sheetBody, {
|
animation: 600,
|
delay:400,
|
sort: true,
|
filter: ".column-addOne",
|
direction: "horizontal",
|
freezeY: true,
|
group:{
|
name: 'itxst',
|
pull: true,
|
put: true,
|
},
|
onStart: function (evt) {
|
mode = "sort";
|
},
|
onSort: function (evt) {
|
holder = null;
|
mode = null;
|
},
|
onEnd: function (evt) {
|
holder = null;
|
},
|
forceFallback: true,
|
onCreateGhost: function (dragEl) {
|
var title = $(".cell-title", $(dragEl));
|
var text = title.html();
|
return sheet.getHolder(text);
|
},
|
onInjectDragElement: function(parentEl, method, dragEl, after) {
|
if ("sort" != mode) {
|
var title = $("#text", $(dragEl));
|
var text = title.html();
|
if (!holder) {
|
holder = sheet.getHolder(text);
|
}
|
|
this.dragEl = holder;
|
return holder;
|
}
|
}
|
});
|
var holder, mode, holderOption;
|
|
//4. formula
|
var formulaDesigner = new FormulaDesigner({
|
element: "panel_formula",
|
settingListener: sheet,
|
|
});
|
sheet.config.settingListener = formulaDesigner;
|
|
//5. buttons
|
var formulaToolBar = new Toolbar({
|
element: "toolbar",
|
items: [
|
{group: "edit", caption: "<span>+</span> 加", onClick: function() { formulaDesigner.insertMathOperator("+") }},
|
{caption: "<span>-</span> 减", onClick: function() { formulaDesigner.insertMathOperator("-") }},
|
{caption: "<span>×</span> 乘</div>", onClick: function() { formulaDesigner.insertMathOperator("×") }},
|
{caption: "<span>÷</span> 除", onClick: function() { formulaDesigner.insertMathOperator("÷") }},
|
{caption: "<span></span> lookup", onClick: function() { formulaDesigner.insertMathOperator("lookup()", 1) }},
|
{caption: "<span></span> getVal", onClick: function() { formulaDesigner.insertMathOperator("getVal()", 1) }},
|
{group: "setting", caption: "<span></span> 赋值表达式", onClick: function() { formulaDesigner.gotoMathLogic() }},
|
{group: "setting", caption: "<span></span> 条件表达式", onClick: function() { formulaDesigner.gotoIFLogic() }},
|
{group: "clear", caption: "<span></span>清空</div>", onClick: function() { formulaDesigner.clear() }},
|
{group: "save", caption: "<span></span>保存</div>", onClick: function() { save(); }, active: true },
|
{group: "delete", caption: "<span></span>移除</div>", onClick: function() { delOneColumn(); }, active: true },
|
]
|
});
|
// {group: "calculate", caption: "<span></span>试算</div>", onClick: function() { calculate(); }},
|
|
|
//6. load buckets
|
|
//6. load buckets
|
var param = {
|
isClientMode: false
|
};
|
|
var result = designer_type[type_code];
|
|
//6.1 band list
|
var buckets = result.data.plan.buckets;
|
bandTree.load(buckets);
|
onAfterBandTreeCreated();
|
|
//6.2 workbook columns
|
var plan = result.data.plan;
|
sheet.config.planId = plan.id;
|
sheet.config.bookId = plan.workbook.id;
|
sheet.loadColumns(plan.workbook.columns);
|
|
//6.3 workbook data
|
var result_2 = {
|
"success": true,
|
"data": {
|
"datalist": tableList_datalist,
|
"type": "workbook"
|
}
|
}
|
|
var dataList = result_2.data.datalist;
|
sheet.loadData(dataList);
|
|
// popupParames = window.top.Root.popupParames.data;
|
// var param = {
|
// planId: popupParames.id
|
// };
|
|
// Server.call("root/planHandler/getPlane", param, function(result) {
|
// //6.1 band list
|
// var buckets = result.data.plan.buckets;
|
// bandTree.load(buckets);
|
// onAfterBandTreeCreated();
|
|
// //6.2 workbook columns
|
// var plan = result.data.plan;
|
// sheet.config.planId = plan.id;
|
// sheet.config.bookId = plan.workbook.id;
|
// sheet.loadColumns(plan.workbook.columns);
|
|
// //6.3 workbook data
|
// var segment = "?planId=" + popupParames.id + "&sourceId=sales_rep";
|
// Server.call("root/planHandler/getDataList" + segment, param, function(result) {
|
// var dataList = result.data.datalist;
|
// sheet.loadData(dataList);
|
// });
|
// });
|
|
function save() {
|
if(!sheet || !sheet.selectedColumn || !sheet.selectedColumn.option){
|
return;
|
}
|
formulaDesigner.onChangeVariantName();
|
formulaDesigner.onChangeVariantCode();
|
formulaDesigner.onChangeLayoutSetting();
|
formulaDesigner.onSaveExpression();
|
sheet.onUpdateColumn(sheet.selectedColumn.option);
|
}
|
|
function delOneColumn() {
|
if(!sheet || !sheet.selectedColumn || !sheet.selectedColumn.option){
|
return;
|
}
|
sheet.onDeleteColumn(sheet.selectedColumn.option);
|
}
|
function clone(obj) {
|
if(!obj){
|
return null;
|
}
|
return {...obj};
|
}
|
</script>
|
<style>
|
.chosen {
|
border: solid 1px gray;
|
}
|
.ghosted {
|
border: 1px solid gray
|
}
|
.draged {
|
background-color: #eaeaea;
|
border: 1px solid #eaeaea;
|
border-radius: 13px;
|
float: left;
|
width: 120px;
|
overflow: hidden;
|
}
|
</style>
|
</html>
|
