tianheng-ui 0.0.76 → 0.0.78

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.0.76",
4
+ "version": "0.0.78",
5
5
  "author": "shu lang <403732931@qq.com>",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -99,16 +99,26 @@
99
99
  <!-- 操作区 -->
100
100
  <el-header>
101
101
  <div class="client">
102
- <i
103
- class="el-icon-monitor"
102
+ <el-button
103
+ v-if="tools.includes('monitor')"
104
104
  :class="{ active: client === 'monitor' }"
105
+ type="text"
106
+ size="medium"
107
+ icon="el-icon-monitor"
105
108
  @click="client = 'monitor'"
106
- ></i>
107
- <i
108
- class="el-icon-mobile"
109
+ >
110
+ 桌面端
111
+ </el-button>
112
+ <el-button
113
+ v-if="tools.includes('mobile')"
109
114
  :class="{ active: client === 'mobile' }"
115
+ type="text"
116
+ size="medium"
117
+ icon="el-icon-mobile"
110
118
  @click="client = 'mobile'"
111
- ></i>
119
+ >
120
+ 移动端
121
+ </el-button>
112
122
  </div>
113
123
  <slot name="action"> </slot>
114
124
  <el-popover
@@ -396,6 +406,8 @@ export default {
396
406
  type: Array,
397
407
  default: () => {
398
408
  return [
409
+ "monitor",
410
+ "mobile",
399
411
  "upload",
400
412
  "clearable",
401
413
  "preview",
@@ -523,7 +535,7 @@ export default {
523
535
  mounted() {
524
536
  if (this.data && this.data.list) {
525
537
  this.widgetFormData.list = this.data.list;
526
- this.widgetFormSelect = this.data.list[0]
538
+ this.widgetFormSelect = this.data.list[0];
527
539
  }
528
540
  if (this.data && this.data.config) {
529
541
  this.widgetFormData.config = this.data.config;
@@ -119,14 +119,11 @@ $primary-background-color: #ecf5ff;
119
119
  .client {
120
120
  flex: 1;
121
121
  text-align: left;
122
- i {
123
- padding: 8px 5px;
124
- border-radius: 4px;
125
- cursor: pointer;
122
+ .el-button {
123
+ color: #333;
126
124
  }
127
125
  .active {
128
126
  color: #409eff;
129
- background-color: #f2f2f2;
130
127
  }
131
128
  }
132
129
  }
@@ -3,12 +3,27 @@
3
3
  <el-container>
4
4
  <el-container>
5
5
  <el-header>
6
- <el-button type="text" size="medium" icon="el-icon-delete">
7
- 桌面端
8
- </el-button>
9
- <el-button type="text" size="medium" icon="el-icon-delete">
10
- 移动端
11
- </el-button>
6
+ <div class="client">
7
+ <el-button
8
+ :class="{ active: client === 'monitor' }"
9
+ type="text"
10
+ size="medium"
11
+ icon="el-icon-monitor"
12
+ @click="client = 'monitor'"
13
+ >
14
+ 桌面端
15
+ </el-button>
16
+ <el-button
17
+ :class="{ active: client === 'mobile' }"
18
+ type="text"
19
+ size="medium"
20
+ icon="el-icon-mobile"
21
+ @click="client = 'mobile'"
22
+ >
23
+ 移动端
24
+ </el-button>
25
+ </div>
26
+ <slot name="action"></slot>
12
27
  </el-header>
13
28
  <el-main>
14
29
  <widget-table
@@ -46,18 +61,18 @@ export default {
46
61
  data() {
47
62
  return {
48
63
  searchFields: [],
49
- tableFields: []
64
+ tableFields: [],
65
+ client: "monitor"
50
66
  };
51
67
  },
52
68
  mounted() {},
53
69
  methods: {
54
70
  handleFieldsChange(val) {
55
- console.log("handleFieldsChange =>", val);
56
71
  const type = val.type;
57
72
  const data = val.data;
58
73
  const list = [];
59
74
  data.forEach(i => {
60
- list.push(JSON.parse(JSON.stringify(this.fields[i])));
75
+ list.push(this.fields[i]);
61
76
  });
62
77
  if (type === 0) {
63
78
  this.searchFields = list;
@@ -66,7 +81,6 @@ export default {
66
81
  }
67
82
  },
68
83
  handleMoveChange(val) {
69
- console.log("handleMoveChange =>", val);
70
84
  const type = val.type;
71
85
  const data = val.data;
72
86
  const newIndex = data.newIndex;
@@ -75,12 +89,12 @@ export default {
75
89
  let list = this.$refs.configRef.search.fields;
76
90
  list = this.mobile(list, oldIndex, newIndex);
77
91
  this.$refs.configRef.search.fields = list;
78
- this.searchFields = this.mobile(this.searchFields, oldIndex, newIndex)
92
+ this.searchFields = this.mobile(this.searchFields, oldIndex, newIndex);
79
93
  } else {
80
94
  let list = this.$refs.configRef.table.fields;
81
95
  list = this.mobile(list, oldIndex, newIndex);
82
96
  this.$refs.configRef.table.fields = list;
83
- this.tableFields = this.mobile(this.tableFields, oldIndex, newIndex)
97
+ this.tableFields = this.mobile(this.tableFields, oldIndex, newIndex);
84
98
  }
85
99
  },
86
100
  mobile(list, oldIndex, newIndex) {
@@ -95,7 +109,12 @@ export default {
95
109
  }
96
110
  return list;
97
111
  },
98
- getJson(){}
112
+ getJson() {
113
+ const tableConfig = this.$refs.configRef.getJson();
114
+ tableConfig.search.options = this.searchFields;
115
+ tableConfig.table.options = this.tableFields;
116
+ return tableConfig
117
+ }
99
118
  }
100
119
  };
101
120
  </script>
@@ -106,10 +125,22 @@ export default {
106
125
  background-color: white;
107
126
  border: 1px solid #dcdfe6;
108
127
 
128
+ .client {
129
+ flex: 1;
130
+ .el-button {
131
+ color: #333;
132
+ }
133
+ .active {
134
+ color: #409eff;
135
+ }
136
+ }
137
+
109
138
  .el-container {
110
139
  height: 100%;
111
140
  }
112
141
  .el-header {
142
+ display: flex;
143
+ align-items: center;
113
144
  height: 45px !important;
114
145
  line-height: 45px;
115
146
  border-bottom: 1px solid #dcdfe6;
@@ -53,18 +53,22 @@
53
53
  <el-collapse v-model="tableCollapse" @change="handleChange">
54
54
  <el-collapse-item title="表格配置" name="1">
55
55
  <el-form-item label="高级查询">
56
- <el-switch v-model="tableConfig.search"> </el-switch>
56
+ <el-switch v-model="tableConfig.search.show"> </el-switch>
57
57
  </el-form-item>
58
58
  <el-form-item label="排序类型">
59
- <el-radio-group v-model="tableConfig.sortType">
59
+ <el-radio-group v-model="tableConfig.table.sort.type">
60
60
  <el-radio-button label="1">降序</el-radio-button>
61
61
  <el-radio-button label="2">升序</el-radio-button>
62
62
  </el-radio-group>
63
63
  </el-form-item>
64
64
  <el-form-item label="排序字段">
65
- <el-select v-model="tableConfig.sortField" placeholder="请选择">
65
+ <el-select
66
+ v-model="tableConfig.table.sort.key"
67
+ placeholder="请选择"
68
+ clearable
69
+ >
66
70
  <el-option
67
- v-for="item in []"
71
+ v-for="item in sortFieldOptions"
68
72
  :key="item.value"
69
73
  :label="item.label"
70
74
  :value="item.value"
@@ -72,11 +76,17 @@
72
76
  </el-option>
73
77
  </el-select>
74
78
  </el-form-item>
79
+ <el-form-item label="序号">
80
+ <el-switch v-model="tableConfig.table.sequence"> </el-switch>
81
+ </el-form-item>
75
82
  <el-form-item label="分页设置">
76
- <el-switch v-model="tableConfig.openPaging"> </el-switch>
83
+ <el-switch v-model="tableConfig.table.pageInfo.show"> </el-switch>
77
84
  </el-form-item>
78
- <el-form-item label="分页条数">
79
- <el-radio-group v-model="tableConfig.pageSize">
85
+ <el-form-item
86
+ v-if="tableConfig.table.pageInfo.show"
87
+ label="分页条数"
88
+ >
89
+ <el-radio-group v-model="tableConfig.table.pageInfo.pageSize">
80
90
  <el-radio-button :label="20">20条</el-radio-button>
81
91
  <el-radio-button :label="50">50条</el-radio-button>
82
92
  <el-radio-button :label="100">100条</el-radio-button>
@@ -84,7 +94,7 @@
84
94
  </el-radio-group>
85
95
  </el-form-item>
86
96
  </el-collapse-item>
87
- <el-collapse-item title="子表配置" name="2">
97
+ <!-- <el-collapse-item title="子表配置" name="2">
88
98
  <el-form-item label="子表样式">
89
99
  <el-select v-model="tableConfig.sortField" placeholder="请选择">
90
100
  <el-option
@@ -96,17 +106,79 @@
96
106
  </el-option>
97
107
  </el-select>
98
108
  </el-form-item>
99
- </el-collapse-item>
109
+ </el-collapse-item> -->
100
110
  <el-collapse-item title="按钮配置" name="3">
101
- <div>
102
- 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
103
- </div>
111
+ <el-form-item label-width="90px">
112
+ <el-checkbox v-model="tableConfig.tools.add.show" slot="label"
113
+ >新增</el-checkbox
114
+ >
115
+ <el-input
116
+ v-model="tableConfig.tools.add.name"
117
+ placeholder="请输入内容"
118
+ ></el-input>
119
+ </el-form-item>
120
+ <el-form-item label-width="90px">
121
+ <el-checkbox v-model="tableConfig.tools.edit.show" slot="label"
122
+ >编辑</el-checkbox
123
+ >
124
+ <el-input
125
+ v-model="tableConfig.tools.edit.name"
126
+ placeholder="请输入内容"
127
+ ></el-input>
128
+ </el-form-item>
129
+ <el-form-item label-width="90px">
130
+ <el-checkbox v-model="tableConfig.tools.detail.show" slot="label"
131
+ >详情</el-checkbox
132
+ >
133
+ <el-input
134
+ v-model="tableConfig.tools.detail.name"
135
+ placeholder="请输入内容"
136
+ ></el-input>
137
+ </el-form-item>
138
+ <el-form-item label-width="90px">
139
+ <el-checkbox v-model="tableConfig.tools.delete.show" slot="label"
140
+ >删除</el-checkbox
141
+ >
142
+ <el-input
143
+ v-model="tableConfig.tools.delete.name"
144
+ placeholder="请输入内容"
145
+ ></el-input>
146
+ </el-form-item>
147
+ <el-form-item label-width="90px">
148
+ <el-checkbox
149
+ v-model="tableConfig.tools.batchDelete.show"
150
+ slot="label"
151
+ >批量删除</el-checkbox
152
+ >
153
+ <el-input
154
+ v-model="tableConfig.tools.batchDelete.name"
155
+ placeholder="请输入内容"
156
+ ></el-input>
157
+ </el-form-item>
158
+ <el-form-item label-width="90px">
159
+ <el-checkbox v-model="tableConfig.tools.export.show" slot="label"
160
+ >导出</el-checkbox
161
+ >
162
+ <el-input
163
+ v-model="tableConfig.tools.export.name"
164
+ placeholder="请输入内容"
165
+ ></el-input>
166
+ </el-form-item>
167
+ <el-form-item label-width="90px">
168
+ <el-checkbox v-model="tableConfig.tools.import.show" slot="label"
169
+ >导入</el-checkbox
170
+ >
171
+ <el-input
172
+ v-model="tableConfig.tools.import.name"
173
+ placeholder="请输入内容"
174
+ ></el-input>
175
+ </el-form-item>
104
176
  </el-collapse-item>
105
- <el-collapse-item title="权限设置" name="4">
177
+ <!-- <el-collapse-item title="权限设置" name="4">
106
178
  <div>
107
179
  与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
108
180
  </div>
109
- </el-collapse-item>
181
+ </el-collapse-item> -->
110
182
  </el-collapse>
111
183
  </el-form>
112
184
  </div>
@@ -141,14 +213,35 @@ export default {
141
213
  isCheckAll: false,
142
214
  isIndeterminate: false
143
215
  },
144
- tableCollapse: ["1"],
216
+ tableCollapse: ["1", "3"],
145
217
  tableConfig: {
146
- search: true,
147
- sortType: "1",
148
- sortField: "",
149
- openPaging: true,
150
- pageSize: 20
151
- }
218
+ search: {
219
+ show: true,
220
+ options: []
221
+ },
222
+ table: {
223
+ options: [],
224
+ sort: {
225
+ type: "1",
226
+ key: "createTime"
227
+ },
228
+ pageInfo: {
229
+ show: true,
230
+ pageSize: 20
231
+ },
232
+ sequence: false //序号
233
+ },
234
+ tools: {
235
+ add: { show: true, name: "新增" },
236
+ edit: { show: true, name: "编辑" },
237
+ detail: { show: false, name: "查看" },
238
+ delete: { show: true, name: "删除" },
239
+ batchDelete: { show: false, name: "批量删除" },
240
+ export: { show: false, name: "导出" },
241
+ import: { show: false, name: "导入" }
242
+ }
243
+ },
244
+ sortFieldOptions: [{ label: "创建时间", value: "createTime" }]
152
245
  };
153
246
  },
154
247
  mounted() {},
@@ -196,6 +289,9 @@ export default {
196
289
  this.table.fields = list;
197
290
  this.table.isIndeterminate = false;
198
291
  this.handleChange();
292
+ },
293
+ getJson() {
294
+ return JSON.parse(JSON.stringify(this.tableConfig));
199
295
  }
200
296
  }
201
297
  };
@@ -7,6 +7,8 @@
7
7
  <div>列名</div>
8
8
  <div>字段</div>
9
9
  <div>类型</div>
10
+ <div>默认值</div>
11
+ <div>数据来源</div>
10
12
  </div>
11
13
  <draggable
12
14
  class="table-content"
@@ -29,7 +31,32 @@
29
31
  </div>
30
32
  <div>{{ item.label }}</div>
31
33
  <div>{{ item.prop }}</div>
32
- <div>{{ item.type }}</div>
34
+ <div>
35
+ <el-select v-model="item.type" placeholder="请选择" size="mini">
36
+ <el-option
37
+ v-for="item in componentOptions"
38
+ :key="item.value"
39
+ :label="item.label"
40
+ :value="item.value"
41
+ >
42
+ </el-option>
43
+ </el-select>
44
+ </div>
45
+ <div>
46
+ <el-input
47
+ v-model="item.defaultValue"
48
+ placeholder="请输入内容"
49
+ size="mini"
50
+ ></el-input>
51
+ </div>
52
+ <div>
53
+ <template v-if="item.type === 'select'">
54
+ <el-button type="text" size="mini" @click="handleStaticData(item)"
55
+ >静态</el-button
56
+ >
57
+ <el-button type="text" size="mini" disabled>远端</el-button>
58
+ </template>
59
+ </div>
33
60
  </div>
34
61
  </draggable>
35
62
  </div>
@@ -68,10 +95,10 @@
68
95
  <div>
69
96
  <el-select v-model="item.align" placeholder="请选择" size="mini">
70
97
  <el-option
71
- v-for="item in ['left', 'center', 'right']"
72
- :key="item"
73
- :label="item"
74
- :value="item"
98
+ v-for="item in alignOptions"
99
+ :key="item.value"
100
+ :label="item.label"
101
+ :value="item.value"
75
102
  >
76
103
  </el-option>
77
104
  </el-select>
@@ -87,6 +114,14 @@
87
114
  </div>
88
115
  </draggable>
89
116
  </div>
117
+
118
+ <th-dialog
119
+ v-model="dialog.visible"
120
+ :title="dialog.title"
121
+ @on-affirm="handleDialogAffirm"
122
+ >
123
+ <th-code-editor v-model="codeEditorValue"></th-code-editor>
124
+ </th-dialog>
90
125
  </div>
91
126
  </template>
92
127
 
@@ -111,7 +146,19 @@ export default {
111
146
  data() {
112
147
  return {
113
148
  searchData: this.searchFields,
114
- tableData: this.tableFields
149
+ tableData: this.tableFields,
150
+ componentOptions: [
151
+ { label: "输入框", value: "input" },
152
+ { label: "下拉框", value: "select" },
153
+ { label: "日期框", value: "date" }
154
+ ],
155
+ alignOptions: [
156
+ { label: "左对齐", value: "left" },
157
+ { label: "居中对齐", value: "center" },
158
+ { label: "右对齐", value: "right" }
159
+ ],
160
+ dialog: { visible: false, title: "", data: null },
161
+ codeEditorValue: ""
115
162
  };
116
163
  },
117
164
  watch: {
@@ -141,6 +188,18 @@ export default {
141
188
  },
142
189
  handleTableMoveEnd(val) {
143
190
  this.$emit("move", { type: "table", data: val });
191
+ },
192
+ handleStaticData(val) {
193
+ this.dialog = {
194
+ visible: true,
195
+ title: `静态数据 - ${val.label}`,
196
+ data: val
197
+ };
198
+ this.codeEditorValue = val.staticData || "";
199
+ },
200
+ handleDialogAffirm() {
201
+ this.dialog.data.staticData = this.codeEditorValue;
202
+ this.dialog = { visible: false, title: "", data: null };
144
203
  }
145
204
  }
146
205
  };
@@ -170,20 +229,20 @@ export default {
170
229
  height: calc(100% - 240px);
171
230
  border: 1px solid #dcdfe6;
172
231
 
173
- .table-header {
174
- div:nth-child(4) {
175
- flex: none;
176
- width: 60px !important;
177
- }
178
- }
232
+ // .table-header {
233
+ // div:nth-child(4) {
234
+ // flex: none;
235
+ // width: 70px !important;
236
+ // }
237
+ // }
179
238
  .table-content {
180
239
  height: calc(100% - 40px);
181
240
  overflow-y: scroll;
182
241
  }
183
- .table-content .table-content-item > div:nth-child(4) {
184
- flex: none;
185
- width: 60px !important;
186
- }
242
+ // .table-content .table-content-item > div:nth-child(4) {
243
+ // flex: none;
244
+ // width: 70px !important;
245
+ // }
187
246
  .el-input-number--mini {
188
247
  width: 100%;
189
248
  }