组件版设计器结合jsLPSolver实现规划求解 - part2

接上文：组件版设计器结合jsLPSolver实现规划求解 - part1
本篇文章主要介绍以下两部分：
1、如何在组件版设计器中自定义工具栏按钮：规划求解
2、如何实现点击按钮后出现的规划求解弹窗

1、自定义工具栏按钮
实现思路是修改designer的config结构，这里我们新增加一个ribbon，并在ribbon中添加一个button。
（大家可以根据自己的需要设置规划求解按钮的位置）
代码如下：

1. //excelSolver方法（点击按钮后执行的操作）
   
2. function excelSolver(context) {
   
3. }
   
4. //新增 操作 选项卡
   
5. const operateRibbon = {
   
6.     id: "operate",
   
7.     text: "操作",
   
8.     buttonGroups: []
   
9. };
   
10. //定义点击 规划求解 按钮时对应的命令
    
11. const operateCommands = {
    
12.     solver: {
    
13.         title: "规划求解",
    
14.         commandName: "solver",
    
15.         execute: async (context) => {
    
16.             excelSolver(context);
    
17.         },
    
18.         iconClass: "ribbon-button-upload"
    
19.     }
    
20. }
    
21. //新增 规划求解 按钮
    
22. const operateConfig = {
    
23.     label: "规划求解",
    
24.     thumbnailClass: "ribbon-thumbnail-spreadsettings",
    
25.     commandGroup: {
    
26.         children: [{
    
27.             direction: "vertical",
    
28.             commands: ["solver"]
    
29.         }]
    
30.     }
    
31. }
    
32. //在ribbon中加入自定义的命令和按钮
    
33. operateRibbon.buttonGroups.push(operateConfig);
    
34. // 导出 designerConfig
    
35. const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
    
36. //将命令注册到config的commandMap属性上
    
37. designerConfig.commandMap = {};
    
38. Object.assign(designerConfig.commandMap, operateCommands);
    
39. //将新增选项卡添加到designerConfig中
    
40. designerConfig.ribbon.push(operateRibbon);
    
41. //将designerConfig作为参数初始化designer
    
42. var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig);

复制代码

这样在工具栏就新建一个ribbon和按钮了。
如下图：

2、定义点击按钮的弹窗
1) 在 excelSolver 方法中执行打开弹窗命令

1. function excelSolver(context) {
   
2.     var option = {};
   
3.     GC.Spread.Sheets.Designer.showDialog("newTab", option, (result) => {
   
4. 
   
5.     })
   
6. }

复制代码

2）定义弹窗结构

1. var CreateId = {
   
2.     type: "FlexContainer",
   
3.     margin: "10px",
   
4.     children: [{
   
5.             type: "FlexContainer",
   
6.             children: [
   
7.                 {
   
8.                     type: "TextBlock",
   
9.                     text: "设置目标：",
   
10.                     margin: "5px"
    
11.                 },
    
12.                 {
    
13.                     type: "ColumnSet",
    
14.                     children: [
    
15.                         {
    
16.                             type: "RangeSelect",
    
17.                             needSheetName: false,
    
18.                             absoluteReference: true,
    
19.                             bindingPath: "target1",
    
20.                             style: "width: 300px",
    
21.                             margin: "5px 15px"
    
22.                         }
    
23. 
    
24.                     ]
    
25.                 },
    
26.                 {
    
27.                     type: "ColumnSet",
    
28.                     children: [
    
29.                         {
    
30.                             type: "RangeSelect",
    
31.                             needSheetName: false,
    
32.                             absoluteReference: true,
    
33.                             bindingPath: "target2",
    
34.                             style: "width: 300px",
    
35.                             margin: "5px 15px"
    
36.                         }
    
37.                     ]
    
38.                 },
    
39.                 {
    
40.                     type: "ColumnSet",
    
41.                     children: [
    
42.                         {
    
43.                             type: "TextBlock",
    
44.                             text: "到",
    
45.                             margin: "5px"
    
46.                         },
    
47.                         {
    
48.                             type: "ColumnSet",
    
49.                             children: [{
    
50.                                 type: "Radio",
    
51.                                 bindingPath: "radioValue",
    
52.                                 columnCount: 2,
    
53.                                 margin: "5px",
    
54.                                 items: [{
    
55.                                         text: '最大值',
    
56.                                         value: 'max'
    
57.                                     },
    
58.                                     {
    
59.                                         text: '最小值',
    
60.                                         value: 'min'
    
61.                                     }
    
62.                                 ]
    
63.                             }]
    
64.                         }
    
65.                     ]
    
66.                 },
    
67.                 {
    
68.                     type: "TextBlock",
    
69.                     text: "可变因素:",
    
70.                     margin: "5px"
    
71.                 },
    
72.                 {
    
73.                     type: "ColumnSet",
    
74.                     children: [
    
75.                         {
    
76.                             type: "RangeSelect",
    
77.                             needSheetName: false,
    
78.                             absoluteReference: true,
    
79.                             bindingPath: "optimalQuantity1",
    
80.                             style: "width: 120px",
    
81.                             margin: "5px 15px"
    
82.                         },
    
83.                         {
    
84.                             type: "RangeSelect",
    
85.                             needSheetName: false,
    
86.                             absoluteReference: true,
    
87.                             bindingPath: "person1",
    
88.                             style: "width: 120px",
    
89.                             margin: "5px"
    
90.                         },
    
91.                         {
    
92.                             type: "RangeSelect",
    
93.                             needSheetName: false,
    
94.                             absoluteReference: true,
    
95.                             bindingPath: "cost1",
    
96.                             style: "width: 120px",
    
97.                             margin: "5px"
    
98.                         }
    
99.                     ]
    
100.                 },
     
101.                 {
     
102.                     type: "ColumnSet",
     
103.                     children: [
     
104.                         {
     
105.                             type: "RangeSelect",
     
106.                             needSheetName: false,
     
107.                             absoluteReference: true,
     
108.                             bindingPath: "optimalQuantity2",
     
109.                             style: "width: 120px",
     
110.                             margin: "5px 15px"
     
111.                            
     
112.                         },
     
113.                         {
     
114.                             type: "RangeSelect",
     
115.                             needSheetName: false,
     
116.                             absoluteReference: true,
     
117.                             bindingPath: "person2",
     
118.                             style: "width: 120px",
     
119.                             margin: "5px"
     
120.                         },
     
121.                         {
     
122.                             type: "RangeSelect",
     
123.                             needSheetName: false,
     
124.                             absoluteReference: true,
     
125.                             bindingPath: "cost2",
     
126.                             style: "width: 120px",
     
127.                             margin: "5px"
     
128.                         }
     
129.                     ]
     
130.                 },
     
131.                 {
     
132.                     type: "TextBlock",
     
133.                     text: "约束条件：",
     
134.                     margin: "5px"
     
135.                 },
     
136.                 {
     
137.                     type: "ColumnSet",
     
138.                     children: [
     
139.                         {
     
140.                             type: "TextBlock",
     
141.                             text: "总数量",
     
142.                             //bindingPath: "quantityAll",
     
143.                             style: "width: 50px",
     
144.                             margin: "5px 15px"
     
145.                         },
     
146.                         {
     
147.                             type: "ListComboEditor",
     
148.                             bindingPath: "compare1",
     
149.                             style: "width: 120px",
     
150.                             margin: "5px",
     
151.                             items: [
     
152.                                 {
     
153.                                     text: "<=",
     
154.                                     value: "max"
     
155.                                 },
     
156.                                 {
     
157.                                     text: ">=",
     
158.                                     value: "min"
     
159.                                 },
     
160.                                 {
     
161.                                     text: "=",
     
162.                                     value: "equal"
     
163.                                 }
     
164.                             ]
     
165.                         },
     
166.                         {
     
167.                             type: "TextEditor",
     
168.                             bindingPath: "quantityNumber",
     
169.                             style: "width: 120px",
     
170.                             margin: "5px"
     
171.                         }
     
172.                     ]
     
173.                 },
     
174.                 {
     
175.                     type: "ColumnSet",
     
176.                     children: [
     
177.                         {
     
178.                             type: "TextBlock",
     
179.                             text: "总人数",
     
180.                             //bindingPath: "personAll",
     
181.                             style: "width: 50px",
     
182.                             margin: "5px 15px"
     
183.                         },
     
184.                         {
     
185.                             type: "ListComboEditor",
     
186.                             bindingPath: "compare2",
     
187.                             style: "width: 120px",
     
188.                             margin: "5px",
     
189.                             items: [
     
190.                                 {
     
191.                                     text: "<=",
     
192.                                     value: "max"
     
193.                                 },
     
194.                                 {
     
195.                                     text: ">=",
     
196.                                     value: "min"
     
197.                                 },
     
198.                                 {
     
199.                                     text: "=",
     
200.                                     value: "equal"
     
201.                                 }
     
202.                             ]
     
203.                         },
     
204.                         {
     
205.                             type: "TextEditor",
     
206.                             bindingPath: "personNumber",
     
207.                             style: "width: 120px",
     
208.                             margin: "5px"
     
209.                         }
     
210.                     ]
     
211.                 },
     
212.                 {
     
213.                     type: "ColumnSet",
     
214.                     children: [
     
215.                         {
     
216.                             type: "TextBlock",
     
217.                             text: "总费用",
     
218.                             //bindingPath: "costAll",
     
219.                             style: "width: 50px",
     
220.                             margin: "5px 15px"
     
221.                         },
     
222.                         {
     
223.                             type: "ListComboEditor",
     
224.                             bindingPath: "compare3",
     
225.                             style: "width: 120px",
     
226.                             margin: "5px",
     
227.                             items: [
     
228.                                 {
     
229.                                     text: "<=",
     
230.                                     value: "max"
     
231.                                 },
     
232.                                 {
     
233.                                     text: ">=",
     
234.                                     value: "min"
     
235.                                 },
     
236.                                 {
     
237.                                     text: "=",
     
238.                                     value: "equal"
     
239.                                 }
     
240.                             ]
     
241.                         },
     
242.                         {
     
243.                             type: "TextEditor",
     
244.                             bindingPath: "costNumber",
     
245.                             style: "width: 120px",
     
246.                             margin: "5px"
     
247.                         }
     
248.                     ]
     
249.                 }
     
250.             ]
     
251.         }
     
252. 
     
253.     ]
     
254. }

复制代码

1. //规划求解dialog
   
2. const richSheetTagTemplate = {
   
3.     title: "规划求解",
   
4.     content: [{
   
5.         type: "TabControl",
   
6.         width: 500,
   
7.         height: 500,
   
8.         bindingPath: "dialogOption",
   
9.         children: [{
   
10.             key: "solverTab",
    
11.             text: "规划求解",
    
12.             children: [
    
13.                 CreateId
    
14.             ]
    
15.         }]
    
16.     }]
    
17. }

复制代码

1. //注册模版
   
2. GC.Spread.Sheets.Designer.registerTemplate("newTab", richSheetTagTemplate);

复制代码

此时点击规划求解按钮，弹出弹窗如下图：



在下篇文章：
组件版设计器结合jsLPSolver实现规划求解 - part3
中我们将介绍如何将jsLPSolver与弹窗结合，实现规划求解。

（注：完整demo见part3）