tianheng-ui 0.1.72 → 0.1.74

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tianheng-ui",
3
3
  "description": "A Vue.js project",
4
- "version": "0.1.72",
4
+ "version": "0.1.74",
5
5
  "author": "shu lang <403732931@qq.com>",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -29,7 +29,7 @@ export default {
29
29
  computed: {
30
30
  seflClass() {
31
31
  let className = `${this.shadow}-shadow`;
32
- if (this.border) className = `${className} th-is_border`;
32
+ if (this.border) className = `${className} th-border`;
33
33
  return className;
34
34
  }
35
35
  }
@@ -51,11 +51,11 @@ export default {
51
51
  selfCellClass() {
52
52
  let className = "th-cell";
53
53
  if (this.customClass) className = `${className} ${this.customClass}`;
54
- if (this.center) className = `${className} th-is_alignItems_center`;
54
+ if (this.center) className = `${className} th-alignItems_center`;
55
55
  if (this.active)
56
- className = `${className} ${this.activeClass || "th-is_active"}`;
56
+ className = `${className} ${this.activeClass || "th-active"}`;
57
57
  if (this.hover)
58
- className = `${className} ${this.hoverClass || "th-is_hover"}`;
58
+ className = `${className} ${this.hoverClass || "th-hover"}`;
59
59
  return className;
60
60
  }
61
61
  },
@@ -314,7 +314,7 @@
314
314
  :modal-append-to-body="false"
315
315
  @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
316
316
  >
317
- <div class="eventsSetting th-flex_box th-is_border">
317
+ <div class="eventsSetting th-flex_box th-border">
318
318
  <div class="list th-flex_aside">
319
319
  <div class="events-header">
320
320
  <div>动作库</div>
@@ -328,9 +328,9 @@
328
328
  </div>
329
329
  <div
330
330
  v-for="(item, index) in dialog.data"
331
- class="list-item th-is_hover"
331
+ class="list-item th-hover"
332
332
  :class="{
333
- 'th-is_active':
333
+ 'th-active':
334
334
  dialog.active && dialog.active.label === item.label
335
335
  }"
336
336
  :key="item.key"
@@ -132,8 +132,8 @@
132
132
  :modal-append-to-body="false"
133
133
  :showFooter="false"
134
134
  >
135
- <div class="th-flex_box th-is_border">
136
- <div class="box-list th-flex_aside th-is_border_right">
135
+ <div class="th-flex_box th-border">
136
+ <div class="box-list th-flex_aside th-border_right">
137
137
  <div class="box-header th-sticky_top">
138
138
  <div>数据列表</div>
139
139
  <el-button
@@ -146,9 +146,9 @@
146
146
  </div>
147
147
  <div
148
148
  v-for="(item, index) in widget.options.defaultValue"
149
- class="list-item th-is_hover"
149
+ class="list-item th-hover"
150
150
  :class="{
151
- 'th-is_active': dialog.data && dialog.data.label === item.label
151
+ 'th-active': dialog.data && dialog.data.label === item.label
152
152
  }"
153
153
  :key="index"
154
154
  @click="dialog.data = item"
@@ -170,9 +170,9 @@
170
170
  >
171
171
  <div
172
172
  v-if="dialog.action === 'processInstTaskRsps'"
173
- class="th-flex_box th-is_border"
173
+ class="th-flex_box th-border"
174
174
  >
175
- <div class="box-list th-flex_aside th-is_border_right">
175
+ <div class="box-list th-flex_aside th-border_right">
176
176
  <div class="box-header th-sticky_top">
177
177
  <div>节点列表</div>
178
178
  <el-button
@@ -186,9 +186,9 @@
186
186
  <div
187
187
  v-for="(item, index) in widget.options.defaultValue
188
188
  .processInstTaskRsps"
189
- class="list-item th-is_hover"
189
+ class="list-item th-hover"
190
190
  :class="{
191
- 'th-is_active': dialog.data && dialog.data.name === item.name
191
+ 'th-active': dialog.data && dialog.data.name === item.name
192
192
  }"
193
193
  :key="index"
194
194
  @click="dialog.data = item"
@@ -238,9 +238,9 @@
238
238
  </div>
239
239
  <div
240
240
  v-if="dialog.action === 'processInstButtons'"
241
- class="th-flex_box th-is_border"
241
+ class="th-flex_box th-border"
242
242
  >
243
- <div class="box-list th-flex_aside th-is_border_right">
243
+ <div class="box-list th-flex_aside th-border_right">
244
244
  <div class="box-header th-sticky_top">
245
245
  <div>操作列表</div>
246
246
  <el-button
@@ -253,9 +253,9 @@
253
253
  </div>
254
254
  <div
255
255
  v-for="(item, index) in widget.options.buttons"
256
- class="list-item th-is_hover"
256
+ class="list-item th-hover"
257
257
  :class="{
258
- 'th-is_active': dialog.data && dialog.data.name === item.name
258
+ 'th-active': dialog.data && dialog.data.name === item.name
259
259
  }"
260
260
  :key="index"
261
261
  @click="dialog.data = item"
@@ -36,7 +36,7 @@
36
36
  {{ item.timestamp }}
37
37
  </div>
38
38
  </div>
39
- <div class="workflow-item-content th-is_border">
39
+ <div class="workflow-item-content th-border">
40
40
  <th-cell
41
41
  v-for="(persons, pIndex) in item.checkPersons"
42
42
  :key="pIndex"
@@ -2,7 +2,7 @@
2
2
  <div class="th-formMaking th-flex_box">
3
3
  <!-- 左侧字段区 -->
4
4
  <div
5
- class="formMaking-fields th-flex_aside th-is_border_right"
5
+ class="formMaking-fields th-flex_aside th-border_right"
6
6
  style="width:250px"
7
7
  >
8
8
  <div class="fields-header th-sticky_top">组件列表</div>
@@ -127,7 +127,7 @@
127
127
  </div>
128
128
 
129
129
  <!-- 右侧配置区 -->
130
- <div class="th-flex_aside th-is_border_left" style="width:300px">
130
+ <div class="th-flex_aside th-border_left" style="width:300px">
131
131
  <widget-config
132
132
  :data="widgetFormSelect"
133
133
  :config="formConfig.config"
@@ -19,7 +19,7 @@ export default {
19
19
  computed: {
20
20
  seflClass() {
21
21
  let className = `${this.shadow}-shadow`;
22
- if (this.border) className = `${className} th-is_border_top th-is_border_left`;
22
+ if (this.border) className = `${className} th-border_top th-border_left`;
23
23
  return className;
24
24
  }
25
25
  },
@@ -14,41 +14,43 @@
14
14
  @clear="handleInputClear"
15
15
  >
16
16
  <div v-if="icon" class="input-prefix" slot="prefix">
17
- <i :class="icon" class="icon" />
17
+ <i
18
+ v-if="icon.indexOf('th-icon') > -1 || icon.indexOf('el-icon') > -1"
19
+ :class="`icon ${icon}`"
20
+ />
21
+ <a-icon v-else class="icon" :type="icon" />
18
22
  </div>
19
23
  </el-input>
20
24
 
21
- <el-tabs v-model="tabsActiveName" type="border-card">
25
+ <el-tabs v-model="activeName" type="border-card">
22
26
  <el-tab-pane label="Tianheng图标库" name="tianheng"> </el-tab-pane>
23
27
  <el-tab-pane v-if="element" label="Element图标库" name="element">
24
28
  </el-tab-pane>
25
29
  <el-tab-pane v-if="antDesign" label="AntDesign图标库" name="antDesign">
26
30
  </el-tab-pane>
27
- <div v-if="tabsActiveName === 'tianheng'" class="th-icons-content">
31
+ <div v-if="activeName === 'tianheng'" class="th-icons-content">
28
32
  <i
29
- v-for="(icon, index) in tianhengIcons"
30
- class="icon"
31
- :class="icon"
33
+ v-for="(item, index) in tianhengIcons"
34
+ :class="`icon ${item}`"
32
35
  :key="index"
33
- @click="handleIconClick(icon)"
36
+ @click="handleIconClick(item)"
34
37
  />
35
38
  </div>
36
- <div v-if="tabsActiveName === 'element'" class="th-icons-content">
39
+ <div v-if="activeName === 'element'" class="th-icons-content">
37
40
  <i
38
- v-for="(icon, index) in elementIcons"
39
- class="icon"
40
- :class="icon"
41
+ v-for="(item, index) in elementIcons"
42
+ :class="`icon ${item}`"
41
43
  :key="index"
42
- @click="handleIconClick(icon)"
44
+ @click="handleIconClick(item)"
43
45
  />
44
46
  </div>
45
- <div v-if="tabsActiveName === 'antDesign'" class="th-icons-content">
47
+ <div v-if="activeName === 'antDesign'" class="th-icons-content">
46
48
  <a-icon
47
- v-for="(icon, index) in antDesignIcons"
49
+ v-for="(item, index) in antDesignIcons"
48
50
  class="icon"
49
- type="step-backward"
51
+ :type="item"
50
52
  :key="index"
51
- @click="handleIconClick(icon)"
53
+ @click="handleIconClick(item)"
52
54
  />
53
55
  </div>
54
56
  </el-tabs>
@@ -80,24 +82,41 @@ export default {
80
82
  antDesign: {
81
83
  type: Boolean,
82
84
  default: false
85
+ },
86
+ active: {
87
+ type: String,
88
+ default: "tianheng"
83
89
  }
84
90
  },
85
91
  data() {
86
92
  return {
87
93
  icon: this.value,
88
- tabsActiveName: "tianheng",
94
+ activeName: this.active,
89
95
  tianhengIcons: tianhengIcons,
90
96
  elementIcons: elementIcons,
91
97
  antDesignIcons: antDesignIcons
92
98
  };
93
99
  },
94
100
  watch: {
101
+ value(val) {
102
+ if (val.indexOf("th-icon") > -1) {
103
+ this.activeName = "tianheng";
104
+ } else if (val.indexOf("el-icon") > -1) {
105
+ this.activeName = "element";
106
+ } else {
107
+ this.activeName = "antDesign";
108
+ }
109
+ this.icon = val;
110
+ },
95
111
  icon(val) {
96
112
  this.$emit("input", val);
97
113
  this.$emit("update:value", val);
98
114
  },
99
- value(val) {
100
- this.icon = val;
115
+ active(val) {
116
+ this.activeName = val;
117
+ },
118
+ activeName(val) {
119
+ this.$emit("update:active", val);
101
120
  }
102
121
  },
103
122
  created() {},
@@ -119,7 +138,10 @@ export default {
119
138
  display: flex;
120
139
  align-items: center;
121
140
  .icon {
141
+ width: 20px;
142
+ height: 20px;
122
143
  font-size: 20px;
144
+ color: #666;
123
145
  }
124
146
  }
125
147
  .th-icons-content {
@@ -13,7 +13,7 @@
13
13
  :config="tableConfig"
14
14
  ></widget-table>
15
15
  </div>
16
- <div class="th-flex_aside th-is_border_left" style="width:300px">
16
+ <div class="th-flex_aside th-border_left" style="width:300px">
17
17
  <widget-config
18
18
  :config="tableConfig"
19
19
  :formOptions="formOptions"
@@ -0,0 +1,2 @@
1
+ import Vue from "vue";
2
+ export default new Vue();
@@ -518,7 +518,7 @@
518
518
  :modal-append-to-body="false"
519
519
  :showFooter="false"
520
520
  >
521
- <div class="eventsSetting th-flex_box th-is_border">
521
+ <div class="eventsSetting th-flex_box th-border">
522
522
  <div class="list th-flex_aside">
523
523
  <div class="events-header th-sticky_top">
524
524
  <div>按钮库</div>
@@ -528,9 +528,9 @@
528
528
  </div>
529
529
  <div
530
530
  v-for="item in Object.values(config.tools || [])"
531
- class="list-item th-is_hover"
531
+ class="list-item th-hover"
532
532
  :class="{
533
- 'th-is_active': dialog.data && dialog.data.name === item.name
533
+ 'th-active': dialog.data && dialog.data.name === item.name
534
534
  }"
535
535
  :key="item.type"
536
536
  @click="dialog.data = item"
@@ -661,6 +661,7 @@
661
661
  <script>
662
662
  import Draggable from "vuedraggable";
663
663
  import { deepClone } from "../FormMaking/util";
664
+ import bus from "./util/bus";
664
665
  export default {
665
666
  components: { Draggable },
666
667
  props: {
@@ -802,7 +803,20 @@ export default {
802
803
  return data;
803
804
  }
804
805
  },
805
- mounted() {},
806
+ mounted() {
807
+ bus.$on("fieldsInParamsActive", activeParams => {
808
+ const data = this.fieldsData.inParams.filter(item => {
809
+ return activeParams.includes(item.id);
810
+ });
811
+ this.config.search.options = data;
812
+ });
813
+ bus.$on("fieldsOutParamsActive", activeParams => {
814
+ const data = this.fieldsData.outParams.filter(item => {
815
+ return activeParams.includes(item.id);
816
+ });
817
+ this.config.table.options = data;
818
+ });
819
+ },
806
820
  methods: {
807
821
  handleResetTableFields() {
808
822
  this.config.search.options = [];
@@ -845,6 +859,7 @@ export default {
845
859
  initParams(this.fieldsData.inParams);
846
860
  this.fieldsData.outParams = deepClone(res.outParams || []);
847
861
  initParams(this.fieldsData.outParams);
862
+ bus.$emit("fieldsData", this.fieldsData);
848
863
  }
849
864
  };
850
865
  this.$emit("remote-params", apiId, callback);
@@ -856,6 +871,7 @@ export default {
856
871
  initParams(this.fieldsData.inParams);
857
872
  this.fieldsData.outParams = deepClone(api.outParams || []);
858
873
  initParams(this.fieldsData.outParams);
874
+ bus.$emit("fieldsData", this.fieldsData);
859
875
  }
860
876
  }
861
877
  },
@@ -3,17 +3,17 @@
3
3
  <el-steps :active="step" finish-status="success" simple>
4
4
  <el-step title="列表配置" icon="el-icon-s-operation" description="">
5
5
  </el-step>
6
- <!-- <el-step
6
+ <el-step
7
7
  title="字段配置"
8
8
  icon="el-icon-c-scale-to-original"
9
9
  description=""
10
- ></el-step> -->
10
+ ></el-step>
11
11
  <el-step title="按钮配置" icon="el-icon-set-up" description=""></el-step>
12
12
  </el-steps>
13
13
  <div class="content">
14
14
  <el-form :model="config" label-width="80px" size="small">
15
15
  <div v-show="step === 0">
16
- <el-form-item size="small">
16
+ <el-form-item>
17
17
  <el-tooltip
18
18
  slot="label"
19
19
  effect="light"
@@ -42,10 +42,10 @@
42
42
  <el-tooltip
43
43
  slot="label"
44
44
  effect="light"
45
- content="列表初始化完成后,调用该接口获取列表数据"
45
+ content="列表初始化完成后,调用该接口获取字段数据"
46
46
  placement="top"
47
47
  >
48
- <span style="color: #409EFF;">列表接口</span>
48
+ <span style="color: #409EFF;">字段接口</span>
49
49
  </el-tooltip>
50
50
  <el-select
51
51
  v-model="config.table.mounted.api"
@@ -70,11 +70,58 @@
70
70
  placeholder="请输入"
71
71
  ></el-input>
72
72
  </el-form-item>
73
+ <el-form-item label="是否分页">
74
+ <el-switch v-model="config.table.pageInfo.show"> </el-switch>
75
+ </el-form-item>
73
76
  </div>
74
77
  <div v-show="step === 1">
78
+ <el-tabs tab-position="left">
79
+ <el-tab-pane label="查询字段">
80
+ <el-transfer
81
+ v-model="inParamsActive"
82
+ filter-placeholder="请输入城市拼音"
83
+ :data="fieldsData.inParams"
84
+ :props="{ key: 'id' }"
85
+ :titles="['字段列表', '已选字段']"
86
+ @change="handleInParamsChange"
87
+ >
88
+ <div class="fields-item" slot-scope="{ option }">
89
+ <span>{{ option.label }}</span>
90
+ <span>{{ option.pAlias }}</span>
91
+ <span>{{ option.javaType }}</span>
92
+ </div>
93
+ </el-transfer>
94
+ </el-tab-pane>
95
+ <el-tab-pane label="列表字段">
96
+ <el-transfer
97
+ v-model="outParamsActive"
98
+ filter-placeholder="请输入城市拼音"
99
+ :data="fieldsData.outParams"
100
+ :props="{ key: 'id' }"
101
+ :titles="['字段列表', '已选字段']"
102
+ @change="handleOutParamsChange"
103
+ >
104
+ <div class="fields-item" slot-scope="{ option }">
105
+ <span>{{ option.label }}</span>
106
+ <span>{{ option.pAlias }}</span>
107
+ <span>{{ option.javaType }}</span>
108
+ </div>
109
+ </el-transfer>
110
+ </el-tab-pane>
111
+ </el-tabs>
112
+ </div>
113
+ <div v-show="step === 2">
75
114
  <el-form-item label="">
76
- <div v-for="item in Object.values(config.tools)" :key="item.type">
77
- <el-checkbox v-model="item.show" :label="item.name"></el-checkbox>
115
+ <div
116
+ class="tools-item"
117
+ v-for="item in Object.values(config.tools)"
118
+ :key="item.type"
119
+ >
120
+ <el-checkbox
121
+ v-model="item.show"
122
+ :label="item.name"
123
+ border
124
+ ></el-checkbox>
78
125
  </div>
79
126
  </el-form-item>
80
127
  </div>
@@ -92,7 +139,7 @@
92
139
  >上一步</el-button
93
140
  >
94
141
  <el-button
95
- v-if="step !== 1"
142
+ v-if="step !== 2"
96
143
  type="primary"
97
144
  size="small"
98
145
  @click="handleNext"
@@ -108,12 +155,15 @@
108
155
  </template>
109
156
 
110
157
  <script>
158
+ import bus from "./util/bus";
111
159
  export default {
112
160
  props: { config: Object, apiOptions: Array },
113
161
  data() {
114
162
  return {
115
163
  step: 0,
116
- formData: {}
164
+ fieldsData: { inParams: [], outParams: [] },
165
+ inParamsActive: [],
166
+ outParamsActive: []
117
167
  };
118
168
  },
119
169
  computed: {
@@ -122,16 +172,53 @@ export default {
122
172
  }
123
173
  },
124
174
  created() {},
125
- mounted() {},
175
+ mounted() {
176
+ bus.$on("fieldsData", data => {
177
+ const initParams = (list, params) => {
178
+ list.map(item => {
179
+ params.push(item);
180
+ if (item.children) {
181
+ initParams(item.children, params);
182
+ return;
183
+ }
184
+ });
185
+ };
186
+ const inParams = [];
187
+ initParams(data.inParams, inParams);
188
+ const outParams = [];
189
+ initParams(data.outParams, outParams);
190
+ this.fieldsData = { inParams, outParams };
191
+ });
192
+ },
126
193
  methods: {
127
194
  handleBack() {
128
195
  this.step--;
196
+ if (this.step === 1) {
197
+ this.handleParamsActive();
198
+ }
129
199
  },
130
200
  handleNext() {
131
201
  this.step++;
202
+ if (this.step === 1) {
203
+ this.handleParamsActive();
204
+ }
132
205
  },
133
206
  handleSave() {
134
207
  this.$emit("save");
208
+ },
209
+ handleParamsActive() {
210
+ this.inParamsActive = this.config.search.options.map(item => {
211
+ return item.id;
212
+ });
213
+ this.outParamsActive = this.config.table.options.map(item => {
214
+ return item.id;
215
+ });
216
+ },
217
+ handleInParamsChange() {
218
+ bus.$emit("fieldsInParamsActive", this.inParamsActive);
219
+ },
220
+ handleOutParamsChange() {
221
+ bus.$emit("fieldsOutParamsActive", this.outParamsActive);
135
222
  }
136
223
  }
137
224
  };
@@ -145,6 +232,10 @@ export default {
145
232
  .content {
146
233
  height: calc(100% - 96px);
147
234
  padding-top: 10px;
235
+
236
+ .tools-item {
237
+ margin-bottom: 10px;
238
+ }
148
239
  }
149
240
  .footer {
150
241
  height: 50px;
@@ -156,5 +247,35 @@ export default {
156
247
  .stepView {
157
248
  }
158
249
  }
250
+ .fields-item {
251
+ span {
252
+ padding: 0px 8px 2px 8px;
253
+ border-radius: 4px;
254
+ }
255
+ span:nth-child(1) {
256
+ color: #1890ff;
257
+ background-color: #e8f4ff;
258
+ }
259
+ span:nth-child(2) {
260
+ color: #13ce66;
261
+ background-color: #e7faf0;
262
+ }
263
+ span:nth-child(3) {
264
+ color: #909399;
265
+ background-color: #f4f4f5;
266
+ }
267
+ }
268
+ }
269
+ </style>
270
+
271
+ <style lang="scss">
272
+ .widgetGuide {
273
+ .el-transfer {
274
+ display: flex;
275
+ align-items: center;
276
+ }
277
+ .el-transfer-panel {
278
+ flex: 1;
279
+ }
159
280
  }
160
281
  </style>