ap-dev 1.1.9 → 1.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -80,21 +80,15 @@ const menus = [
80
80
  }, {
81
81
  id: 'ApiApSql',
82
82
  label: '5.2 动态SQL'
83
- }, {
84
- id: 'ApiServiceUtil',
85
- label: '5.3 生成通用代码'
86
83
  }, {
87
84
  id: 'ApiMybatis',
88
- label: '5.4 Mybatis规范'
89
- }, {
90
- id: 'ApiPaging',
91
- label: '5.5 表格分页'
85
+ label: '5.3 Mybatis规范'
92
86
  }, {
93
87
  id: 'ApiJavaUtils',
94
- label: '5.6 常用工具类'
88
+ label: '5.4 常用工具类'
95
89
  }, {
96
90
  id: 'ApiOtherJava',
97
- label: '5.7 其他'
91
+ label: '5.5 其他'
98
92
  }]
99
93
  }]
100
94
  export default menus
@@ -271,7 +271,7 @@ toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save", "separator",
271
271
  default: '无',
272
272
  memo: '添加行时对象的默认值。<br>一对象:默认值。<br>二、方法:()方法返回默认值<br><span class="api-memo">注:和列的addDefaultValue效果相同,主要处理页面不需要显示的字段的默认值。</span>',
273
273
  code: '<span class="api-code">// 1、对象形式:添加行的fdDeleted默认为0 <br>addDefaultObj: {fdDeleted:0}' +
274
- '<br>// 2、方法形式:动态返回添加行的默认值 <br>addDefaultObj: () => {fdDeleted:0}</span>'
274
+ '<br>// 2、方法形式:动态返回添加行的默认值 <br>addDefaultObj: () => { return {fdDeleted:0} }</span>'
275
275
  }
276
276
  ]
277
277
  const gridAttrData_col = [
@@ -1,24 +1,50 @@
1
1
  <template>
2
- <api-tabs :options.sync="opts"></api-tabs>
2
+ <el-tabs v-model="activeName" tabPosition="left" class="api-tabs">
3
+ <template v-for="(item,index) in opts">
4
+ <el-tab-pane :label="item.label" :name="'tab' + index" class="api-tab">
5
+ <component :is="item.component"></component>
6
+ </el-tab-pane>
7
+ </template>
8
+ </el-tabs>
3
9
  </template>
4
10
 
5
11
  <script>
6
- import ApiTabs from './../components/ApiTabs'
12
+ import ApiServiceUtil from './../tabs/ApiServiceUtil'
13
+ import ApiException from './../tabs/ApiException'
14
+ import ApiPermission from './../tabs/ApiPermission'
15
+ import ApiPaging from './../tabs/ApiPaging'
16
+ import ApiTask from './../tabs/ApiTask'
7
17
 
8
18
  export default {
9
- name: "ApiJavaCommon",
10
- components: {ApiTabs},
19
+ name: "ApiJavaCommonUtil",
20
+ components: {
21
+ ApiServiceUtil,
22
+ ApiException,
23
+ ApiPermission,
24
+ ApiPaging,
25
+ ApiTask
26
+ },
11
27
  data() {
12
- let opts = [
13
- {
14
- label: "1.异常处理",
15
- component: "ApiException"
16
- },{
17
- label: "2.权限判断",
18
- component: "ApiPermission"
19
- }
28
+
29
+ let opts = [{
30
+ label: "代码生成",
31
+ component: "ApiServiceUtil"
32
+ }, {
33
+ label: "异常处理",
34
+ component: "ApiException"
35
+ }, {
36
+ label: "权限判断",
37
+ component: "ApiPermission"
38
+ }, {
39
+ label: "表格分页",
40
+ component: "ApiPaging"
41
+ }, {
42
+ label: "调度管理",
43
+ component: "ApiTask"
44
+ }
20
45
  ];
21
46
  return {
47
+ activeName: 'tab0',
22
48
  opts: opts
23
49
  }
24
50
  }
@@ -26,4 +52,13 @@ export default {
26
52
  </script>
27
53
 
28
54
  <style scoped>
55
+ .api-tabs {
56
+ display: flex;
57
+ height: 100%;
58
+ }
59
+
60
+ .api-tabs /deep/ .el-tabs__content {
61
+ flex: 1;
62
+ overflow: scroll;
63
+ }
29
64
  </style>
@@ -48,6 +48,12 @@ export default {
48
48
  memo: `显示checkbox选择框<br>
49
49
  <span class="api-memo">注:支持多选时要配置</span>`,
50
50
  code: `<div class="api-code">showCheckbox: true,</div>`
51
+ },{
52
+ name: 'defaultExpandAll',
53
+ type: '布尔',
54
+ default: 'true',
55
+ memo: `默认展开`,
56
+ code: `<div class="api-code">defaultExpandAll: false,</div>`
51
57
  },{
52
58
  name: 'toolbarBtn',
53
59
  type: '数组',
File without changes
@@ -1,101 +1,107 @@
1
1
  <template>
2
- <div style="height: 100%">
3
- <h3>字符串工具类 - StringUtil</h3>
4
- <api-table :data="methodData" :columns="methodCols" />
5
- </div>
2
+ <div style="height: 100%">
3
+ <h3>字符串工具类 - StringUtil</h3>
4
+ <api-table :data="methodData" :columns="methodCols"/>
5
+ </div>
6
6
  </template>
7
7
 
8
8
  <script>
9
- import { ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2 } from './../components'
9
+ import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
10
10
 
11
11
  export default {
12
- name: 'ApiStringUtil',
13
- components: {
14
- ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
15
- },
16
- data() {
17
- const methodCols = [
18
- { label: '方法名', prop: 'name', width: '220px' },
19
- { label: '说明', prop: 'memo', width: '300px' },
20
- { label: '示例代码', prop: 'code', minWidth: '100px' }]
21
- const methodData = [
22
- {
23
- name: 'isEmpty',
24
- memo: `判断是否为空<br><span class="api-memo">注:null和"" 均为空。</span>`,
25
- code: `<span class="api-code">// 1、为空:返回true
12
+ name: 'ApiStringUtil',
13
+ components: {
14
+ ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
15
+ },
16
+ data() {
17
+ const methodCols = [
18
+ {label: '方法名', prop: 'name', width: '220px'},
19
+ {label: '说明', prop: 'memo', width: '300px'},
20
+ {label: '示例代码', prop: 'code', minWidth: '100px'}]
21
+ const methodData = [
22
+ {
23
+ name: 'isEmpty',
24
+ memo: `判断是否为空<br><span class="api-memo">注:null和"" 均为空。</span>`,
25
+ code: `<span class="api-code">// 1、为空:返回true
26
26
  boolean a = StringUtil.isEmpty("");
27
27
  boolean a = StringUtil.isEmpty(null);
28
28
  // 2、不为空:false
29
29
  boolean a = StringUtil.isEmpty("xx");
30
30
  </span>`
31
- },
32
- {
33
- name: 'isNotEmpty',
34
- memo: `判断是否不为空<br><span class="api-memo">注:null和"" 均为空。</span>`,
35
- code: `<span class="api-code">// 1、不为空:返回true
31
+ },
32
+ {
33
+ name: 'isNotEmpty',
34
+ memo: `判断是否不为空<br><span class="api-memo">注:null和"" 均为空。</span>`,
35
+ code: `<span class="api-code">// 1、不为空:返回true
36
36
  boolean a = StringUtil.isNotEmpty("xx");
37
37
  // 2、为空:返回false
38
38
  boolean a = StringUtil.isNotEmpty("");
39
39
  boolean a = StringUtil.isNotEmpty(null);
40
40
  </span>`
41
- },
42
- {
43
- name: 'convertStringToDB',
44
- memo: '将驼峰属性转为DB形式<br>userName -> user_name',
45
- code: `<span class="api-code">// 转换:返回 user_name
41
+ },
42
+ {
43
+ name: 'convertStringToDB',
44
+ memo: '将驼峰属性转为DB形式<br>userName -> user_name',
45
+ code: `<span class="api-code">// 转换:返回 user_name
46
46
  String a= StringUtil.convertStringToDB("userName")
47
47
  </span>`
48
- },
49
- {
50
- name: 'convertDBStrToParam',
51
- memo: '将DB形式转为驼峰属性<br>user_name -> userName',
52
- code: `<span class="api-code">// 转换:返回 userName
48
+ },
49
+ {
50
+ name: 'convertDBStrToParam',
51
+ memo: '将DB形式转为驼峰属性<br>user_name -> userName',
52
+ code: `<span class="api-code">// 转换:返回 userName
53
53
  String a= StringUtil.convertDBStrToParam("user_name")</span>`
54
- },
55
- {
56
- name: 'convertDBStrToBean',
57
- memo: '将DB形式转为驼峰属性<br>user_name -> UserName',
58
- code: `<span class="api-code">// 转换:返回 UserName
54
+ },
55
+ {
56
+ name: 'convertDBStrToBean',
57
+ memo: '将DB形式转为驼峰属性<br>user_name -> UserName',
58
+ code: `<span class="api-code">// 转换:返回 UserName
59
59
  String a= StringUtil.convertDBStrToBean("user_name")</span>`
60
- },
61
- {
62
- name: 'convertSqlParam',
63
- memo: '字符串转为引号拼接形式<br> a,b,c -> \'a\',\'b\',\'c\'<br> <span class="api-memo">注:转换后,数据库形式逗号拼接的字符串。</span>',
64
- code: `<span class="api-code">// 转换:返回 'a','b','c'
60
+ },
61
+ {
62
+ name: 'convertSqlParam',
63
+ memo: '字符串转为引号拼接形式<br> a,b,c -> \'a\',\'b\',\'c\'<br> <span class="api-memo">注:转换后,数据库形式逗号拼接的字符串。</span>',
64
+ code: `<span class="api-code">// 转换:返回 'a','b','c'
65
65
  String a= StringUtil.convertDBStrToBean("a,b,c")</span>`
66
- },
67
- {
68
- name: 'convertToList',
69
- memo: '","拼接的字符串转为list',
70
- code: `<span class="api-code">// 转换:返回list
66
+ },
67
+ {
68
+ name: 'convertToList',
69
+ memo: '","拼接的字符串转为list',
70
+ code: `<span class="api-code">// 转换:返回list
71
71
  List&lt;String> a= StringUtil.convertToList("a,b,c")</span>`
72
- },
73
- {
74
- name: 'getSuffix',
75
- memo: '获取文件的后缀名',
76
- code: `<span class="api-code">// 返回 .jpg
72
+ },
73
+ {
74
+ name: 'asList',
75
+ memo: '","拼接的字符串转为list',
76
+ code: `<span class="api-code">// 转换:返回list
77
+ List&lt;Object> a= StringUtil.asList("a,b,c")</span>`
78
+ },
79
+ {
80
+ name: 'getSuffix',
81
+ memo: '获取文件的后缀名',
82
+ code: `<span class="api-code">// 返回 .jpg
77
83
  String a= StringUtil.getSuffix("aaa.jgp")</span>`
78
- },
79
- {
80
- name: 'initialUpperCase',
81
- memo: '字符串首字母转为大写',
82
- code: `<span class="api-code">// 返回 Abc
84
+ },
85
+ {
86
+ name: 'initialUpperCase',
87
+ memo: '字符串首字母转为大写',
88
+ code: `<span class="api-code">// 返回 Abc
83
89
  String a= StringUtil.initialUpperCase("abc")</span>`
84
- },
85
- {
86
- name: 'deleteLastChar',
87
- memo: '删除最后一个字符',
88
- code: `<span class="api-code">// 返回 ab
90
+ },
91
+ {
92
+ name: 'deleteLastChar',
93
+ memo: '删除最后一个字符',
94
+ code: `<span class="api-code">// 返回 ab
89
95
  String a= StringUtil.deleteLastChar("abc")</span>`
90
- }
91
- ]
96
+ }
97
+ ]
92
98
 
93
- return {
94
- methodData,
95
- methodCols
96
- }
97
- },
98
- methods: {}
99
+ return {
100
+ methodData,
101
+ methodCols
102
+ }
103
+ },
104
+ methods: {}
99
105
  }
100
106
  </script>
101
107
 
@@ -0,0 +1,80 @@
1
+ <template>
2
+ <div style="line-height: 1.5;">
3
+ <api-tittle-1>任务调度管理:</api-tittle-1>
4
+ <api-tittle-2>一、【调度任务】定义任务</api-tittle-2>
5
+ <api-content>
6
+ <b>表格列说明:</b><br>
7
+ <b>任务类型:</b>任务分组类型<br>
8
+ <b>接口类型:</b>kettle、java接口。<br>
9
+ <b>路径(java接口):</b>/项目名/xx/xxx。如:/bi/test/getXxx<br>
10
+ <b>路径(kettle):</b>kettle需要上传kettle文件,上传成功自动生成路径<br>
11
+ <div class="api-memo">注:1、java接口即为controller接口。<br>
12
+ 2、kettle接口,支持转换(*.ktr)和job(*.kjb)<br>
13
+ 3、kettle文件使用Spoon生成,对应的spoon版本:pdi-ce-9.2.0.0-290<br>
14
+ 4、需要kettle执行本地文件时,可手动将路径临时改为本地路径。例:"E:\kettle\test.ktr"<br>
15
+ </div>
16
+ </api-content>
17
+ <br>
18
+ <api-tittle-2>二、【调度环境】定义任务可执行的环境ip</api-tittle-2>
19
+ <api-content>
20
+ <b>表格列说明:</b><br>
21
+ <b>ip地址:</b>调度计划的配置项,具体参考调度计划。<br>
22
+ </api-content>
23
+ <br>
24
+ <api-tittle-2>三、【调度计划】定义任务可执行的时间</api-tittle-2>
25
+ <api-content>
26
+ <b>操作说明:</b><br>
27
+ <b>立即执行:</b>立即执行调度计划任务<br>
28
+ <b>加载:</b>将调度计划加载到spring中,只有加载到spring中的计划定时才生效<br>
29
+ <b>移除:</b>将调度计划从spring中移除<br>
30
+ <br>
31
+ <b>表格列说明:</b><br>
32
+ <b>调度任务:</b>选择需要执行的任务<br>
33
+ <b>定时表达式:</b>cron表达式<br>
34
+ <b>执行环境:</b>选择允许执行的环境。eg:如果想要本地执行定时任务,那么执行环境必须有选择本地的ip项<br>
35
+ <b>开始时间、结束时间:</b>不填表示长期执行的计划。有填写,在任务调度时会校验时间<br>
36
+ <b>加载状态:</b>调度计划是否已经加载到spring中<br>
37
+ <div class="api-memo">注:1、调度计划不执行:定时任务失效、调度计划失效、调度时间不在调度计划的区间内,调度计划会终止执行。<br>
38
+ </div>
39
+ </api-content>
40
+ <br>
41
+ <api-tittle-2>四、【同步时间戳】记录数据库表的最后同步时间</api-tittle-2>
42
+ <api-content>
43
+ <b>表格列说明:</b><br>
44
+ <b>编码:</b>编码,用于获取和更新时间戳<br>
45
+ <b>名称:</b>同步名称<br>
46
+ <b>表:</b>同步的数据库表<br>
47
+ <b>数据源:</b>同步的数据源<br>
48
+ <api-code>
49
+ // 更新时间戳:code-> 编码、lastTime-> 最后更新时间<br>
50
+ TaskUtil.updateTimeStamp(code, lastTime)<br>
51
+ // 更新时间戳:code-> 编码<br>
52
+ TaskUtil.getTimeStamp(code)<br>
53
+ </api-code>
54
+ <div class="api-memo">
55
+ 注:同步时间戳需要在各自接口中手动调用<br>
56
+ </div>
57
+ </api-content>
58
+ <br>
59
+ <api-tittle-2>五、【调度日志】</api-tittle-2>
60
+ <api-content>
61
+ 查看调度计划执行的情况
62
+ </api-content>
63
+ <br>
64
+ </div>
65
+ </template>
66
+
67
+ <script>
68
+ import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
69
+
70
+ export default {
71
+ name: 'ApiLoginUser',
72
+ components: {
73
+ ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
74
+ }
75
+ }
76
+ </script>
77
+
78
+ <style scoped>
79
+
80
+ </style>
@@ -11,7 +11,7 @@
11
11
  <el-tree
12
12
  ref="typeTree"
13
13
  class="filter-tree"
14
- node-key="fdId"
14
+ node-key="tableName"
15
15
  :data="typeTreeList"
16
16
  :props="defaultProps"
17
17
  :highlight-current="true"
@@ -25,9 +25,9 @@
25
25
  >
26
26
  <div slot-scope="{ node, data }" style="width: 100%">
27
27
  <div class="dev-tree-node-left ap-ellipse">
28
- {{ data.fdName }}
28
+ {{ data.tableName }}
29
29
  </div>
30
- <div style="font-size: 12px;">{{ data.comment }}</div>
30
+ <div style="font-size: 12px;">{{ data.tableComment }}</div>
31
31
  </div>
32
32
  </el-tree>
33
33
  </div>
@@ -57,7 +57,9 @@
57
57
  <div>
58
58
  <span v-if="selectedTables.length <1" style="color: red;font-size: 14px;">请选择需要生成的表</span>
59
59
  <template v-for="t in selectedTables">
60
- <el-tag style="margin: 5px;width: 30%;">{{ t.comment }}:{{ t.tableSchema }}.{{ t.fdName }}
60
+ <el-tag style="margin: 5px;width: 30%;">{{ t.tableComment }}:{{ t.tableSchema }}.{{
61
+ t.tableName
62
+ }}
61
63
  </el-tag>
62
64
  </template>
63
65
  </div>
@@ -115,6 +117,7 @@
115
117
  <script>
116
118
  import {convertToTreeData} from 'ap-util/util/DataUtil'
117
119
  import {getUserConfig} from './../dev/DevUtil'
120
+
118
121
  export default {
119
122
  name: 'BackgroundPanel',
120
123
  data() {
@@ -126,7 +129,7 @@ export default {
126
129
  typeTreeList: [],
127
130
  defaultProps: {
128
131
  children: 'children',
129
- label: 'fdName'
132
+ label: 'tableName'
130
133
  },
131
134
  // ----- dialog -----
132
135
  selectedTables: [],
@@ -154,7 +157,7 @@ export default {
154
157
  // 左侧树:列头
155
158
  setHeaderName() {
156
159
  if (this.typeTreeList.length > 1) {
157
- this.headerName = "[" + this.typeTreeList[0].fdDatabase + "] - 表";
160
+ this.headerName = "[" + this.typeTreeList[0].tableSchema + "] - 表";
158
161
  }
159
162
  },
160
163
  // 左侧树:加载数据
@@ -168,8 +171,8 @@ export default {
168
171
  }
169
172
  }).then(response => {
170
173
  this.typeTreeList = convertToTreeData(response.data, {
171
- idKey: "fdId",
172
- parentKey: "fdParentId",
174
+ idKey: "tableName",
175
+ parentKey: "parentId",
173
176
  childrenKey: "children",
174
177
  });
175
178
  this.setHeaderName();
@@ -186,10 +189,10 @@ export default {
186
189
  // 左侧树:过滤节点
187
190
  filterNode(value, data) {
188
191
  if (!value) return true
189
- if (data.fdName.indexOf(value) !== -1) {
192
+ if (data.tableName.indexOf(value) !== -1) {
190
193
  return true
191
194
  }
192
- if (data.comment != null && data.comment.indexOf(value) !== -1) {
195
+ if (data.tableComment != null && data.tableComment.indexOf(value) !== -1) {
193
196
  return true
194
197
  }
195
198
  return false
@@ -202,9 +205,7 @@ export default {
202
205
 
203
206
  const newList = []
204
207
  for (let i = 0; i < tables.length; i++) {
205
- if (tables[i].fdType == 1) {
206
- newList.push(tables[i])
207
- }
208
+ newList.push(tables[i])
208
209
  }
209
210
  this.selectedTables = newList
210
211
  },
@@ -250,7 +251,7 @@ export default {
250
251
  return
251
252
  }
252
253
 
253
- const javaUrl =this.userConfig.fdJavaPath
254
+ const javaUrl = this.userConfig.fdJavaPath
254
255
  if (javaUrl == null || javaUrl == '') {
255
256
  this.$message.error('请先配置共通参数。【顶栏】->【配置】')
256
257
  return
@@ -268,7 +269,7 @@ export default {
268
269
  for (let i = 0; i < this.selectedTables.length; i++) {
269
270
  const selectedTable = this.selectedTables[i]
270
271
  tableList.push({
271
- fdName: selectedTable.fdName,
272
+ tableName: selectedTable.tableName,
272
273
  tableSchema: selectedTable.tableSchema
273
274
  })
274
275
  }
@@ -0,0 +1,108 @@
1
+ <template>
2
+ <ap-container>
3
+ <ap-main margin="1111">
4
+ <div v-if="!showPage">
5
+ <el-input v-model="secretKey" placeholder="请输入授权秘钥!" show-password style="width: 200px"></el-input>
6
+ <el-button type="primary" @click="checkPageAuth">确定</el-button>
7
+ </div>
8
+ <ap-table v-if="showPage" ref="tDevDbSourceRef" :options.sync="tDevDbSourceOpt"></ap-table>
9
+ </ap-main>
10
+ </ap-container>
11
+ </template>
12
+
13
+ <script>
14
+ export default {
15
+ name: 'DevDbSource',
16
+ data() {
17
+ let columns = [
18
+ {
19
+ prop: 'fdName',
20
+ label: '连接名',
21
+ type: 'input',
22
+ width: 150,
23
+ }, {
24
+ prop: 'fdDbName',
25
+ label: '数据库名称',
26
+ type: 'input',
27
+ width: 100,
28
+ }, {
29
+ prop: 'fdUrl',
30
+ label: '数据库地址',
31
+ type: 'input',
32
+ minWidth: 200,
33
+ showOverflowTooltip: true
34
+ }, {
35
+ prop: 'fdUserName',
36
+ label: '数据库用户名',
37
+ type: 'input',
38
+ width: 100,
39
+ }, {
40
+ prop: 'fdPassword',
41
+ label: '数据库密码',
42
+ type: 'input',
43
+ width: 100,
44
+ html: function (value, row) {
45
+ return "******";
46
+ }
47
+ }, {
48
+ prop: 'fdComment',
49
+ label: '备注',
50
+ type: 'input',
51
+ minWidth: 150,
52
+ }, {
53
+ prop: "fdDisabled",
54
+ label: "是否有效",
55
+ type: "select",
56
+ width: 100,
57
+ selectOptions: [{label: "失效", value: 1}, {label: "有效", value: 0}],
58
+ addDefaultValue: 0,
59
+ align: "center",
60
+ html: function (value, row) {
61
+ if (value == 1) {
62
+ return '<div class="ap-tag-danger">失效</div>'
63
+ } else if (value == 0) {
64
+ return '<div class="ap-tag-success">有效</el-tag>';
65
+ }
66
+ }
67
+ },
68
+ ];
69
+ let tableOpt = {
70
+ title: "数据源管理",
71
+ columns: columns,
72
+ editPk: "fdId", //默认fdId
73
+ deletePk: "fdId", // 默认fdId
74
+ dataUrl: "/apd/db/TDevDbSource/getTDevDbSourceGridList",
75
+ saveUrl: "/apd/db/TDevDbSource/saveTDevDbSourceGridData",
76
+ deleteUrl: "/apd/db/TDevDbSource/deleteTDevDbSourceGridData",
77
+ toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save"],
78
+ initData: true, // 默认false
79
+ params: {}
80
+ };
81
+ return {
82
+ tDevDbSourceOpt: tableOpt,
83
+ secretKey: '',
84
+ showPage: false
85
+ }
86
+ },
87
+ methods: {
88
+ checkPageAuth() {
89
+ this.$request({
90
+ url: '/apd/db/TDevDbAuth/checkPageAuth',
91
+ method: 'post',
92
+ data: {
93
+ secretKey: this.secretKey
94
+ }
95
+ }).then(response => {
96
+ if (response.data) {
97
+ this.showPage = true;
98
+ } else {
99
+ this.$message.error("授权秘钥错误!")
100
+ }
101
+ })
102
+ }
103
+ }
104
+ }
105
+ </script>
106
+
107
+ <style scoped>
108
+ </style>