tianheng-ui 0.0.76 → 0.0.77
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 +43 -12
- package/packages/TableMaking/widgetConfig.vue +113 -18
- package/packages/TableMaking/widgetTable.vue +12 -7
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,13 +61,13 @@ 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 = [];
|
|
@@ -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,16 +53,19 @@
|
|
|
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
|
+
>
|
|
66
69
|
<el-option
|
|
67
70
|
v-for="item in []"
|
|
68
71
|
:key="item.value"
|
|
@@ -73,10 +76,10 @@
|
|
|
73
76
|
</el-select>
|
|
74
77
|
</el-form-item>
|
|
75
78
|
<el-form-item label="分页设置">
|
|
76
|
-
<el-switch v-model="tableConfig.
|
|
79
|
+
<el-switch v-model="tableConfig.table.pageInfo.show"> </el-switch>
|
|
77
80
|
</el-form-item>
|
|
78
81
|
<el-form-item label="分页条数">
|
|
79
|
-
<el-radio-group v-model="tableConfig.pageSize">
|
|
82
|
+
<el-radio-group v-model="tableConfig.table.pageInfo.pageSize">
|
|
80
83
|
<el-radio-button :label="20">20条</el-radio-button>
|
|
81
84
|
<el-radio-button :label="50">50条</el-radio-button>
|
|
82
85
|
<el-radio-button :label="100">100条</el-radio-button>
|
|
@@ -84,7 +87,7 @@
|
|
|
84
87
|
</el-radio-group>
|
|
85
88
|
</el-form-item>
|
|
86
89
|
</el-collapse-item>
|
|
87
|
-
<el-collapse-item title="子表配置" name="2">
|
|
90
|
+
<!-- <el-collapse-item title="子表配置" name="2">
|
|
88
91
|
<el-form-item label="子表样式">
|
|
89
92
|
<el-select v-model="tableConfig.sortField" placeholder="请选择">
|
|
90
93
|
<el-option
|
|
@@ -96,17 +99,87 @@
|
|
|
96
99
|
</el-option>
|
|
97
100
|
</el-select>
|
|
98
101
|
</el-form-item>
|
|
99
|
-
</el-collapse-item>
|
|
102
|
+
</el-collapse-item> -->
|
|
100
103
|
<el-collapse-item title="按钮配置" name="3">
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
+
<el-form-item label-width="90px">
|
|
105
|
+
<el-checkbox v-model="tableConfig.tools.add.show" slot="label"
|
|
106
|
+
>新增</el-checkbox
|
|
107
|
+
>
|
|
108
|
+
<el-input
|
|
109
|
+
v-model="tableConfig.tools.add.name"
|
|
110
|
+
placeholder="请输入内容"
|
|
111
|
+
></el-input>
|
|
112
|
+
</el-form-item>
|
|
113
|
+
<el-form-item label-width="90px">
|
|
114
|
+
<el-checkbox v-model="tableConfig.tools.edit.show" slot="label"
|
|
115
|
+
>编辑</el-checkbox
|
|
116
|
+
>
|
|
117
|
+
<el-input
|
|
118
|
+
v-model="tableConfig.tools.edit.name"
|
|
119
|
+
placeholder="请输入内容"
|
|
120
|
+
></el-input>
|
|
121
|
+
</el-form-item>
|
|
122
|
+
<el-form-item label-width="90px">
|
|
123
|
+
<el-checkbox
|
|
124
|
+
v-model="tableConfig.tools.detail.show"
|
|
125
|
+
slot="label"
|
|
126
|
+
>详情</el-checkbox
|
|
127
|
+
>
|
|
128
|
+
<el-input
|
|
129
|
+
v-model="tableConfig.tools.detail.name"
|
|
130
|
+
placeholder="请输入内容"
|
|
131
|
+
></el-input>
|
|
132
|
+
</el-form-item>
|
|
133
|
+
<el-form-item label-width="90px">
|
|
134
|
+
<el-checkbox
|
|
135
|
+
v-model="tableConfig.tools.delete.show"
|
|
136
|
+
slot="label"
|
|
137
|
+
>删除</el-checkbox
|
|
138
|
+
>
|
|
139
|
+
<el-input
|
|
140
|
+
v-model="tableConfig.tools.delete.name"
|
|
141
|
+
placeholder="请输入内容"
|
|
142
|
+
></el-input>
|
|
143
|
+
</el-form-item>
|
|
144
|
+
<el-form-item label-width="90px">
|
|
145
|
+
<el-checkbox
|
|
146
|
+
v-model="tableConfig.tools.batchDelete.show"
|
|
147
|
+
slot="label"
|
|
148
|
+
>批量删除</el-checkbox
|
|
149
|
+
>
|
|
150
|
+
<el-input
|
|
151
|
+
v-model="tableConfig.tools.batchDelete.name"
|
|
152
|
+
placeholder="请输入内容"
|
|
153
|
+
></el-input>
|
|
154
|
+
</el-form-item>
|
|
155
|
+
<el-form-item label-width="90px">
|
|
156
|
+
<el-checkbox
|
|
157
|
+
v-model="tableConfig.tools.export.show"
|
|
158
|
+
slot="label"
|
|
159
|
+
>导出</el-checkbox
|
|
160
|
+
>
|
|
161
|
+
<el-input
|
|
162
|
+
v-model="tableConfig.tools.export.name"
|
|
163
|
+
placeholder="请输入内容"
|
|
164
|
+
></el-input>
|
|
165
|
+
</el-form-item>
|
|
166
|
+
<el-form-item label-width="90px">
|
|
167
|
+
<el-checkbox
|
|
168
|
+
v-model="tableConfig.tools.import.show"
|
|
169
|
+
slot="label"
|
|
170
|
+
>导入</el-checkbox
|
|
171
|
+
>
|
|
172
|
+
<el-input
|
|
173
|
+
v-model="tableConfig.tools.import.name"
|
|
174
|
+
placeholder="请输入内容"
|
|
175
|
+
></el-input>
|
|
176
|
+
</el-form-item>
|
|
104
177
|
</el-collapse-item>
|
|
105
|
-
<el-collapse-item title="权限设置" name="4">
|
|
178
|
+
<!-- <el-collapse-item title="权限设置" name="4">
|
|
106
179
|
<div>
|
|
107
180
|
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
|
|
108
181
|
</div>
|
|
109
|
-
</el-collapse-item>
|
|
182
|
+
</el-collapse-item> -->
|
|
110
183
|
</el-collapse>
|
|
111
184
|
</el-form>
|
|
112
185
|
</div>
|
|
@@ -141,13 +214,32 @@ export default {
|
|
|
141
214
|
isCheckAll: false,
|
|
142
215
|
isIndeterminate: false
|
|
143
216
|
},
|
|
144
|
-
tableCollapse: ["1"],
|
|
217
|
+
tableCollapse: ["1", "3"],
|
|
145
218
|
tableConfig: {
|
|
146
|
-
search:
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
219
|
+
search: {
|
|
220
|
+
show: true,
|
|
221
|
+
options: []
|
|
222
|
+
},
|
|
223
|
+
table: {
|
|
224
|
+
options: [],
|
|
225
|
+
sort: {
|
|
226
|
+
type: "1",
|
|
227
|
+
key: ""
|
|
228
|
+
},
|
|
229
|
+
pageInfo: {
|
|
230
|
+
show: true,
|
|
231
|
+
pageSize: 20
|
|
232
|
+
}
|
|
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
|
+
}
|
|
151
243
|
}
|
|
152
244
|
};
|
|
153
245
|
},
|
|
@@ -196,6 +288,9 @@ export default {
|
|
|
196
288
|
this.table.fields = list;
|
|
197
289
|
this.table.isIndeterminate = false;
|
|
198
290
|
this.handleChange();
|
|
291
|
+
},
|
|
292
|
+
getJson() {
|
|
293
|
+
return JSON.parse(JSON.stringify(this.tableConfig));
|
|
199
294
|
}
|
|
200
295
|
}
|
|
201
296
|
};
|
|
@@ -68,10 +68,10 @@
|
|
|
68
68
|
<div>
|
|
69
69
|
<el-select v-model="item.align" placeholder="请选择" size="mini">
|
|
70
70
|
<el-option
|
|
71
|
-
v-for="item in
|
|
72
|
-
:key="item"
|
|
73
|
-
:label="item"
|
|
74
|
-
:value="item"
|
|
71
|
+
v-for="item in alignOptions"
|
|
72
|
+
:key="item.value"
|
|
73
|
+
:label="item.label"
|
|
74
|
+
:value="item.value"
|
|
75
75
|
>
|
|
76
76
|
</el-option>
|
|
77
77
|
</el-select>
|
|
@@ -111,7 +111,12 @@ export default {
|
|
|
111
111
|
data() {
|
|
112
112
|
return {
|
|
113
113
|
searchData: this.searchFields,
|
|
114
|
-
tableData: this.tableFields
|
|
114
|
+
tableData: this.tableFields,
|
|
115
|
+
alignOptions: [
|
|
116
|
+
{ label: "左对齐", value: "left" },
|
|
117
|
+
{ label: "居中对齐", value: "center" },
|
|
118
|
+
{ label: "右对齐", value: "right" }
|
|
119
|
+
]
|
|
115
120
|
};
|
|
116
121
|
},
|
|
117
122
|
watch: {
|
|
@@ -173,7 +178,7 @@ export default {
|
|
|
173
178
|
.table-header {
|
|
174
179
|
div:nth-child(4) {
|
|
175
180
|
flex: none;
|
|
176
|
-
width:
|
|
181
|
+
width: 70px !important;
|
|
177
182
|
}
|
|
178
183
|
}
|
|
179
184
|
.table-content {
|
|
@@ -182,7 +187,7 @@ export default {
|
|
|
182
187
|
}
|
|
183
188
|
.table-content .table-content-item > div:nth-child(4) {
|
|
184
189
|
flex: none;
|
|
185
|
-
width:
|
|
190
|
+
width: 70px !important;
|
|
186
191
|
}
|
|
187
192
|
.el-input-number--mini {
|
|
188
193
|
width: 100%;
|