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/lib/tianheng-ui.js +10 -10
- package/package.json +1 -1
- package/packages/FormMaking/Container.vue +19 -7
- package/packages/FormMaking/styles/index.scss +2 -5
- package/packages/TableMaking/index.vue +44 -13
- package/packages/TableMaking/widgetConfig.vue +117 -21
- package/packages/TableMaking/widgetTable.vue +75 -16
package/package.json
CHANGED
@@ -99,16 +99,26 @@
|
|
99
99
|
<!-- 操作区 -->
|
100
100
|
<el-header>
|
101
101
|
<div class="client">
|
102
|
-
<
|
103
|
-
|
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
|
-
|
107
|
-
|
108
|
-
|
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
|
-
|
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
|
-
|
123
|
-
|
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
|
-
<
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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(
|
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.
|
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
|
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.
|
83
|
+
<el-switch v-model="tableConfig.table.pageInfo.show"> </el-switch>
|
77
84
|
</el-form-item>
|
78
|
-
<el-form-item
|
79
|
-
|
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
|
-
<
|
102
|
-
|
103
|
-
|
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:
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
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>
|
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
|
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
|
-
|
175
|
-
|
176
|
-
|
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
|
-
|
185
|
-
|
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
|
}
|