tianheng-ui 0.0.42 → 0.0.43

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.
Files changed (14) hide show
  1. package/lib/index.js +1 -1
  2. package/lib/tianheng-ui.js +6 -11
  3. package/lib/tianheng-ui.js.map +1 -1
  4. package/package.json +1 -1
  5. package/packages/formMaking/Container.vue +36 -40
  6. package/packages/formMaking/CusDialog.vue +2 -2
  7. package/packages/formMaking/FormConfig.vue +6 -6
  8. package/packages/formMaking/GenerateForm.vue +1 -1
  9. package/packages/formMaking/Upload/index.vue +298 -177
  10. package/packages/formMaking/WidgetConfig.vue +494 -232
  11. package/packages/formMaking/WidgetForm.vue +1 -1
  12. package/packages/formMaking/WidgetFormItem.vue +1 -1
  13. package/packages/formMaking/componentsConfig.js +138 -119
  14. package/packages/formMaking/index.js +25 -27
package/packages/formMaking/WidgetConfig.vue CHANGED
@@ -1,182 +1,353 @@
1
1
  <template>
2
2
  <div v-if="show">
3
3
  <el-form label-position="top">
4
- <el-form-item :label="$t('fm.config.widget.model')" v-if="data.type!='grid'">
4
+ <el-form-item label="字段标识" v-if="data.type != 'grid'">
5
5
  <el-input v-model="data.model"></el-input>
6
6
  </el-form-item>
7
- <el-form-item :label="$t('fm.config.widget.name')" v-if="data.type!='grid'">
7
+ <el-form-item label="标题" v-if="data.type != 'grid'">
8
8
  <el-input v-model="data.name"></el-input>
9
9
  </el-form-item>
10
- <el-form-item :label="$t('fm.config.widget.width')" v-if="Object.keys(data.options).indexOf('width')>=0">
10
+ <el-form-item
11
+ label="宽度"
12
+ v-if="Object.keys(data.options).indexOf('width') >= 0"
13
+ >
11
14
  <el-input v-model="data.options.width"></el-input>
12
15
  </el-form-item>
13
16
 
14
- <el-form-item :label="$t('fm.config.widget.height')" v-if="Object.keys(data.options).indexOf('height')>=0">
17
+ <el-form-item
18
+ label="高度"
19
+ v-if="Object.keys(data.options).indexOf('height') >= 0"
20
+ >
15
21
  <el-input v-model="data.options.height"></el-input>
16
22
  </el-form-item>
17
23
 
18
- <el-form-item :label="$t('fm.config.widget.size')" v-if="Object.keys(data.options).indexOf('size')>=0">
19
- {{$t('fm.config.widget.width')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.width"></el-input>
20
- {{$t('fm.config.widget.height')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.height"></el-input>
24
+ <el-form-item
25
+ label="大小"
26
+ v-if="Object.keys(data.options).indexOf('size') >= 0"
27
+ >
28
+ 宽度
29
+ <el-input
30
+ style="width: 90px;"
31
+ type="number"
32
+ v-model.number="data.options.size.width"
33
+ ></el-input>
34
+ 高度
35
+ <el-input
36
+ style="width: 90px;"
37
+ type="number"
38
+ v-model.number="data.options.size.height"
39
+ ></el-input>
21
40
  </el-form-item>
22
41
 
23
- <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date')">
42
+ <el-form-item
43
+ label="占位内容"
44
+ v-if="
45
+ Object.keys(data.options).indexOf('placeholder') >= 0 &&
46
+ (data.type != 'time' || data.type != 'date')
47
+ "
48
+ >
24
49
  <el-input v-model="data.options.placeholder"></el-input>
25
50
  </el-form-item>
26
- <el-form-item :label="$t('fm.config.widget.layout')" v-if="Object.keys(data.options).indexOf('inline')>=0">
51
+ <el-form-item
52
+ label="布局方式"
53
+ v-if="Object.keys(data.options).indexOf('inline') >= 0"
54
+ >
27
55
  <el-radio-group v-model="data.options.inline">
28
- <el-radio-button :label="false">{{$t('fm.config.widget.block')}}</el-radio-button>
29
- <el-radio-button :label="true">{{$t('fm.config.widget.inline')}}</el-radio-button>
56
+ <el-radio-button :label="false">块级</el-radio-button>
57
+ <el-radio-button :label="true">inline</el-radio-button>
30
58
  </el-radio-group>
31
59
  </el-form-item>
32
- <el-form-item :label="$t('fm.config.widget.showInput')" v-if="Object.keys(data.options).indexOf('showInput')>=0">
33
- <el-switch v-model="data.options.showInput" ></el-switch>
60
+ <el-form-item
61
+ label="显示输入框"
62
+ v-if="Object.keys(data.options).indexOf('showInput') >= 0"
63
+ >
64
+ <el-switch v-model="data.options.showInput"></el-switch>
34
65
  </el-form-item>
35
- <el-form-item :label="$t('fm.config.widget.min')" v-if="Object.keys(data.options).indexOf('min')>=0">
36
- <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"></el-input-number>
66
+ <el-form-item
67
+ label="最小值"
68
+ v-if="Object.keys(data.options).indexOf('min') >= 0"
69
+ >
70
+ <el-input-number
71
+ v-model="data.options.min"
72
+ :min="0"
73
+ :max="100"
74
+ :step="1"
75
+ ></el-input-number>
37
76
  </el-form-item>
38
- <el-form-item :label="$t('fm.config.widget.max')" v-if="Object.keys(data.options).indexOf('max')>=0">
39
- <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"></el-input-number>
77
+ <el-form-item
78
+ label="最大值"
79
+ v-if="Object.keys(data.options).indexOf('max') >= 0"
80
+ >
81
+ <el-input-number
82
+ v-model="data.options.max"
83
+ :min="0"
84
+ :max="100"
85
+ :step="1"
86
+ ></el-input-number>
40
87
  </el-form-item>
41
- <el-form-item :label="$t('fm.config.widget.step')" v-if="Object.keys(data.options).indexOf('step')>=0">
42
- <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"></el-input-number>
88
+ <el-form-item
89
+ label="步长"
90
+ v-if="Object.keys(data.options).indexOf('step') >= 0"
91
+ >
92
+ <el-input-number
93
+ v-model="data.options.step"
94
+ :min="0"
95
+ :max="100"
96
+ :step="1"
97
+ ></el-input-number>
43
98
  </el-form-item>
44
- <el-form-item :label="$t('fm.config.widget.multiple')" v-if="data.type=='select' || data.type=='imgupload'">
45
- <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
99
+ <el-form-item
100
+ label="是否多选"
101
+ v-if="data.type == 'select' || data.type == 'imgupload'"
102
+ >
103
+ <el-switch
104
+ v-model="data.options.multiple"
105
+ @change="handleSelectMuliple"
106
+ ></el-switch>
46
107
  </el-form-item>
47
- <el-form-item :label="$t('fm.config.widget.filterable')" v-if="data.type=='select'">
108
+ <el-form-item label="是否可搜索" v-if="data.type == 'select'">
48
109
  <el-switch v-model="data.options.filterable"></el-switch>
49
110
  </el-form-item>
50
- <el-form-item :label="$t('fm.config.widget.allowHalf')" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
51
- <el-switch
52
- v-model="data.options.allowHalf"
53
- >
54
- </el-switch>
111
+ <el-form-item
112
+ label="允许半选"
113
+ v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
114
+ >
115
+ <el-switch v-model="data.options.allowHalf"> </el-switch>
55
116
  </el-form-item>
56
- <el-form-item :label="$t('fm.config.widget.showAlpha')" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
57
- <el-switch
58
- v-model="data.options.showAlpha"
59
- >
60
- </el-switch>
117
+ <el-form-item
118
+ label="支持透明度选择"
119
+ v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
120
+ >
121
+ <el-switch v-model="data.options.showAlpha"> </el-switch>
61
122
  </el-form-item>
62
- <el-form-item :label="$t('fm.config.widget.showLabel')" v-if="Object.keys(data.options).indexOf('showLabel')>=0">
63
- <el-switch
64
- v-model="data.options.showLabel"
65
- >
66
- </el-switch>
123
+ <el-form-item
124
+ label="是否显示标签"
125
+ v-if="Object.keys(data.options).indexOf('showLabel') >= 0"
126
+ >
127
+ <el-switch v-model="data.options.showLabel"> </el-switch>
67
128
  </el-form-item>
68
- <el-form-item :label="$t('fm.config.widget.option')" v-if="Object.keys(data.options).indexOf('options')>=0">
69
- <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
70
- <el-radio-button :label="false">{{$t('fm.config.widget.staticData')}}</el-radio-button>
71
- <el-radio-button :label="true">{{$t('fm.config.widget.remoteData')}}</el-radio-button>
129
+ <el-form-item
130
+ label="选项"
131
+ v-if="Object.keys(data.options).indexOf('options') >= 0"
132
+ >
133
+ <el-radio-group
134
+ v-model="data.options.remote"
135
+ size="mini"
136
+ style="margin-bottom:10px;"
137
+ >
138
+ <el-radio-button :label="false">静态数据</el-radio-button>
139
+ <el-radio-button :label="true">远端数据</el-radio-button>
72
140
  </el-radio-group>
73
141
  <template v-if="data.options.remote">
74
142
  <div>
75
143
  <el-input size="mini" style="" v-model="data.options.remoteFunc">
76
- <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
144
+ <template slot="prepend">远端方法</template>
77
145
  </el-input>
78
146
  <el-input size="mini" style="" v-model="data.options.props.value">
79
- <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
147
+ <template slot="prepend">值</template>
80
148
  </el-input>
81
149
  <el-input size="mini" style="" v-model="data.options.props.label">
82
- <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
150
+ <template slot="prepend">标签</template>
83
151
  </el-input>
84
152
  </div>
85
153
  </template>
86
154
  <template v-else>
87
- <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
155
+ <template
156
+ v-if="
157
+ data.type == 'radio' ||
158
+ (data.type == 'select' && !data.options.multiple)
159
+ "
160
+ >
88
161
  <el-radio-group v-model="data.options.defaultValue">
89
- <draggable tag="ul" :list="data.options.options"
90
- v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
162
+ <draggable
163
+ tag="ul"
164
+ :list="data.options.options"
165
+ v-bind="{
166
+ group: { name: 'options' },
167
+ ghostClass: 'ghost',
168
+ handle: '.drag-item'
169
+ }"
91
170
  handle=".drag-item"
92
171
  >
93
- <li v-for="(item, index) in data.options.options" :key="index" >
94
- <el-radio
95
- :label="item.value"
96
- style="margin-right: 5px;"
97
- >
98
- <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
99
- <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
172
+ <li v-for="(item, index) in data.options.options" :key="index">
173
+ <el-radio :label="item.value" style="margin-right: 5px;">
174
+ <el-input
175
+ :style="{
176
+ width: data.options.showLabel ? '90px' : '180px'
177
+ }"
178
+ size="mini"
179
+ v-model="item.value"
180
+ ></el-input>
181
+ <el-input
182
+ style="width:90px;"
183
+ size="mini"
184
+ v-if="data.options.showLabel"
185
+ v-model="item.label"
186
+ ></el-input>
100
187
  <!-- <input v-model="item.value"/> -->
101
188
  </el-radio>
102
- <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
103
- <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
104
-
189
+ <i
190
+ class="drag-item"
191
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
192
+ ><i class="iconfont icon-icon_bars"></i
193
+ ></i>
194
+ <el-button
195
+ @click="handleOptionsRemove(index)"
196
+ circle
197
+ plain
198
+ type="danger"
199
+ size="mini"
200
+ icon="el-icon-minus"
201
+ style="padding: 4px;margin-left: 5px;"
202
+ ></el-button>
105
203
  </li>
106
204
  </draggable>
107
-
108
205
  </el-radio-group>
109
206
  </template>
110
207
 
111
- <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
208
+ <template
209
+ v-if="
210
+ data.type == 'checkbox' ||
211
+ (data.type == 'select' && data.options.multiple)
212
+ "
213
+ >
112
214
  <el-checkbox-group v-model="data.options.defaultValue">
113
-
114
- <draggable tag="ul" :list="data.options.options"
115
- v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
215
+ <draggable
216
+ tag="ul"
217
+ :list="data.options.options"
218
+ v-bind="{
219
+ group: { name: 'options' },
220
+ ghostClass: 'ghost',
221
+ handle: '.drag-item'
222
+ }"
116
223
  handle=".drag-item"
117
224
  >
118
- <li v-for="(item, index) in data.options.options" :key="index" >
119
- <el-checkbox
120
- :label="item.value"
121
- style="margin-right: 5px;"
122
- >
123
- <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
124
- <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
225
+ <li v-for="(item, index) in data.options.options" :key="index">
226
+ <el-checkbox :label="item.value" style="margin-right: 5px;">
227
+ <el-input
228
+ :style="{
229
+ width: data.options.showLabel ? '90px' : '180px'
230
+ }"
231
+ size="mini"
232
+ v-model="item.value"
233
+ ></el-input>
234
+ <el-input
235
+ style="width:90px;"
236
+ size="mini"
237
+ v-if="data.options.showLabel"
238
+ v-model="item.label"
239
+ ></el-input>
125
240
  </el-checkbox>
126
- <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
127
- <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
128
-
241
+ <i
242
+ class="drag-item"
243
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
244
+ ><i class="iconfont icon-icon_bars"></i
245
+ ></i>
246
+ <el-button
247
+ @click="handleOptionsRemove(index)"
248
+ circle
249
+ plain
250
+ type="danger"
251
+ size="mini"
252
+ icon="el-icon-minus"
253
+ style="padding: 4px;margin-left: 5px;"
254
+ ></el-button>
129
255
  </li>
130
256
  </draggable>
131
257
  </el-checkbox-group>
132
258
  </template>
133
259
  <div style="margin-left: 22px;">
134
- <el-button type="text" @click="handleAddOption">{{$t('fm.actions.addOption')}}</el-button>
260
+ <el-button type="text" @click="handleAddOption">添加选项</el-button>
135
261
  </div>
136
262
  </template>
137
-
138
263
  </el-form-item>
139
264
 
140
- <el-form-item :label="$t('fm.config.widget.remoteData')" v-if="data.type=='cascader'">
265
+ <el-form-item label="远端数据" v-if="data.type == 'cascader'">
141
266
  <div>
142
267
  <el-input size="mini" style="" v-model="data.options.remoteFunc">
143
- <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
268
+ <template slot="prepend">远端方法</template>
144
269
  </el-input>
145
270
  <el-input size="mini" style="" v-model="data.options.props.value">
146
- <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
271
+ <template slot="prepend">值</template>
147
272
  </el-input>
148
273
  <el-input size="mini" style="" v-model="data.options.props.label">
149
- <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
274
+ <template slot="prepend">标签</template>
150
275
  </el-input>
151
276
  <el-input size="mini" style="" v-model="data.options.props.children">
152
- <template slot="prepend">{{$t('fm.config.widget.childrenOption')}}</template>
277
+ <template slot="prepend">子选项</template>
153
278
  </el-input>
154
279
  </div>
155
280
  </el-form-item>
156
281
 
157
- <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch' || data.type=='text')">
158
- <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></el-input>
159
- <el-input v-if="data.type=='input'" v-model="data.options.defaultValue"></el-input>
160
- <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"></el-rate>
161
- <el-button type="text" v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{$t('fm.actions.clear')}}</el-button>
282
+ <el-form-item
283
+ label="默认值"
284
+ v-if="
285
+ Object.keys(data.options).indexOf('defaultValue') >= 0 &&
286
+ (data.type == 'textarea' ||
287
+ data.type == 'input' ||
288
+ data.type == 'rate' ||
289
+ data.type == 'color' ||
290
+ data.type == 'switch' ||
291
+ data.type == 'text')
292
+ "
293
+ >
294
+ <el-input
295
+ v-if="data.type == 'textarea'"
296
+ type="textarea"
297
+ :rows="5"
298
+ v-model="data.options.defaultValue"
299
+ ></el-input>
300
+ <el-input
301
+ v-if="data.type == 'input'"
302
+ v-model="data.options.defaultValue"
303
+ ></el-input>
304
+ <el-rate
305
+ v-if="data.type == 'rate'"
306
+ style="display:inline-block;vertical-align: middle;"
307
+ :max="data.options.max"
308
+ :allow-half="data.options.allowHalf"
309
+ v-model="data.options.defaultValue"
310
+ ></el-rate>
311
+ <el-button
312
+ type="text"
313
+ v-if="data.type == 'rate'"
314
+ style="display:inline-block;vertical-align: middle;margin-left: 10px;"
315
+ @click="data.options.defaultValue = 0"
316
+ >清空</el-button
317
+ >
162
318
  <el-color-picker
163
319
  v-if="data.type == 'color'"
164
320
  v-model="data.options.defaultValue"
165
321
  :show-alpha="data.options.showAlpha"
166
322
  ></el-color-picker>
167
- <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
168
- <el-input v-if="data.type=='text'" v-model="data.options.defaultValue"></el-input>
323
+ <el-switch
324
+ v-if="data.type == 'switch'"
325
+ v-model="data.options.defaultValue"
326
+ ></el-switch>
327
+ <el-input
328
+ v-if="data.type == 'text'"
329
+ v-model="data.options.defaultValue"
330
+ ></el-input>
169
331
  </el-form-item>
170
332
 
171
- <el-form-item :label="$t('fm.config.widget.maxlength')" v-if="(data.type == 'textarea' || data.type == 'input')">
172
- <el-input-number v-model="data.options.maxlength" :min="-1" ></el-input-number>
333
+ <el-form-item
334
+ label="最大字数"
335
+ v-if="data.type == 'textarea' || data.type == 'input'"
336
+ >
337
+ <el-input-number
338
+ v-model="data.options.maxlength"
339
+ :min="-1"
340
+ ></el-input-number>
173
341
  </el-form-item>
174
- <el-form-item :label="$t('fm.config.widget.showWordLimit')" v-if="(data.type == 'textarea' || data.type == 'input')">
175
- <el-switch v-model="data.options.showWordLimit" ></el-switch>
342
+ <el-form-item
343
+ label="显示字数统计"
344
+ v-if="data.type == 'textarea' || data.type == 'input'"
345
+ >
346
+ <el-switch v-model="data.options.showWordLimit"></el-switch>
176
347
  </el-form-item>
177
348
 
178
349
  <template v-if="data.type == 'time' || data.type == 'date'">
179
- <el-form-item :label="$t('fm.config.widget.showType')" v-if="data.type == 'date'">
350
+ <el-form-item label="显示类型" v-if="data.type == 'date'">
180
351
  <el-select v-model="data.options.type">
181
352
  <el-option value="year"></el-option>
182
353
  <el-option value="month"></el-option>
@@ -188,31 +359,53 @@
188
359
  <el-option value="daterange"></el-option>
189
360
  </el-select>
190
361
  </el-form-item>
191
- <el-form-item :label="$t('fm.config.widget.isRange')" v-if="data.type == 'time'">
192
- <el-switch
193
- v-model="data.options.isRange"
194
- >
195
- </el-switch>
362
+ <el-form-item label="是否为范围选择" v-if="data.type == 'time'">
363
+ <el-switch v-model="data.options.isRange"> </el-switch>
196
364
  </el-form-item>
197
- <el-form-item :label="$t('fm.config.widget.isTimestamp')" v-if="data.type == 'date'">
198
- <el-switch
199
- v-model="data.options.timestamp"
200
- >
201
- </el-switch>
365
+ <el-form-item label="是否获取时间戳" v-if="data.type == 'date'">
366
+ <el-switch v-model="data.options.timestamp"> </el-switch>
202
367
  </el-form-item>
203
- <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
368
+ <el-form-item
369
+ label="占位内容"
370
+ v-if="
371
+ (!data.options.isRange && data.type == 'time') ||
372
+ (data.type != 'time' &&
373
+ data.options.type != 'datetimerange' &&
374
+ data.options.type != 'daterange')
375
+ "
376
+ >
204
377
  <el-input v-model="data.options.placeholder"></el-input>
205
378
  </el-form-item>
206
- <el-form-item :label="$t('fm.config.widget.startPlaceholder')" v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'">
379
+ <el-form-item
380
+ label="开始时间占位内容"
381
+ v-if="
382
+ data.options.isRange ||
383
+ data.options.type == 'datetimerange' ||
384
+ data.options.type == 'daterange'
385
+ "
386
+ >
207
387
  <el-input v-model="data.options.startPlaceholder"></el-input>
208
388
  </el-form-item>
209
- <el-form-item :label="$t('fm.config.widget.endPlaceholder')" v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'">
389
+ <el-form-item
390
+ label="结束时间占位内容"
391
+ v-if="
392
+ data.options.isRange ||
393
+ data.options.type == 'datetimerange' ||
394
+ data.options.type == 'daterange'
395
+ "
396
+ >
210
397
  <el-input v-model="data.options.endPlaceholder"></el-input>
211
398
  </el-form-item>
212
- <el-form-item :label="$t('fm.config.widget.format')">
399
+ <el-form-item label="格式">
213
400
  <el-input v-model="data.options.format"></el-input>
214
401
  </el-form-item>
215
- <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0">
402
+ <el-form-item
403
+ label="默认值"
404
+ v-if="
405
+ data.type == 'time' &&
406
+ Object.keys(data.options).indexOf('isRange') >= 0
407
+ "
408
+ >
216
409
  <el-time-picker
217
410
  key="1"
218
411
  style="width: 100%;"
@@ -235,109 +428,173 @@
235
428
  </el-form-item>
236
429
  </template>
237
430
 
238
- <template v-if="data.type=='imgupload'">
239
-
240
- <el-form-item :label="$t('fm.config.widget.limit')">
241
- <el-input type="number" v-model.number="data.options.length"></el-input>
431
+ <template v-if="data.type == 'imgupload'">
432
+ <el-form-item label="最大上传数">
433
+ <el-input
434
+ type="number"
435
+ v-model.number="data.options.length"
436
+ ></el-input>
242
437
  </el-form-item>
243
- <el-form-item :label="$t('fm.config.widget.isQiniu')">
438
+ <el-form-item label="使用七牛上传">
244
439
  <el-switch v-model="data.options.isQiniu"></el-switch>
245
440
  </el-form-item>
246
441
  <template v-if="data.options.isQiniu">
247
442
  <el-form-item label="Domain" :required="true">
248
- <el-input v-model="data.options.domain"></el-input>
443
+ <el-input v-model="data.options.domain"></el-input>
249
444
  </el-form-item>
250
- <el-form-item :label="$t('fm.config.widget.tokenFunc')" :required="true">
445
+ <el-form-item label="获取七牛Token方法" :required="true">
251
446
  <el-input v-model="data.options.tokenFunc"></el-input>
252
447
  </el-form-item>
253
448
  </template>
254
449
  <template v-else>
255
- <el-form-item :label="$t('fm.config.widget.imageAction')" :required="true">
450
+ <el-form-item label="图片上传地址" :required="true">
256
451
  <el-input v-model="data.options.action"></el-input>
257
452
  </el-form-item>
258
453
  </template>
259
454
  </template>
260
455
 
261
- <template v-if="data.type=='blank'">
262
- <el-form-item :label="$t('fm.config.widget.defaultType')">
456
+ <template v-if="data.type == 'blank'">
457
+ <el-form-item label="绑定数据类型">
263
458
  <el-select v-model="data.options.defaultType">
264
- <el-option value="String" :label="$t('fm.config.widget.string')"></el-option>
265
- <el-option value="Object" :label="$t('fm.config.widget.object')"></el-option>
266
- <el-option value="Array" :label="$t('fm.config.widget.array')"></el-option>
459
+ <el-option value="String" label="字符串"></el-option>
460
+ <el-option value="Object" label="对象"></el-option>
461
+ <el-option value="Array" label="数组"></el-option>
267
462
  </el-select>
268
463
  </el-form-item>
269
464
  </template>
270
465
 
271
466
  <template v-if="data.type == 'grid'">
272
- <el-form-item :label="$t('fm.config.widget.gutter')">
273
- <el-input type="number" v-model.number="data.options.gutter"></el-input>
467
+ <el-form-item label="栅格间隔">
468
+ <el-input
469
+ type="number"
470
+ v-model.number="data.options.gutter"
471
+ ></el-input>
274
472
  </el-form-item>
275
- <el-form-item :label="$t('fm.config.widget.columnOption')">
276
- <draggable tag="ul" :list="data.columns"
277
- v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
473
+ <el-form-item label="列配置项">
474
+ <draggable
475
+ tag="ul"
476
+ :list="data.columns"
477
+ v-bind="{
478
+ group: { name: 'options' },
479
+ ghostClass: 'ghost',
480
+ handle: '.drag-item'
481
+ }"
278
482
  handle=".drag-item"
279
483
  >
280
- <li v-for="(item, index) in data.columns" :key="index" >
281
- <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
282
- <el-input :placeholder="$t('fm.config.widget.span')" size="mini" style="width: 100px;" type="number" v-model.number="item.span"></el-input>
283
-
284
- <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
285
-
484
+ <li v-for="(item, index) in data.columns" :key="index">
485
+ <i
486
+ class="drag-item"
487
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
488
+ ><i class="iconfont icon-icon_bars"></i
489
+ ></i>
490
+ <el-input
491
+ placeholder="栅格值"
492
+ size="mini"
493
+ style="width: 100px;"
494
+ type="number"
495
+ v-model.number="item.span"
496
+ ></el-input>
497
+
498
+ <el-button
499
+ @click="handleOptionsRemove(index)"
500
+ circle
501
+ plain
502
+ type="danger"
503
+ size="mini"
504
+ icon="el-icon-minus"
505
+ style="padding: 4px;margin-left: 5px;"
506
+ ></el-button>
286
507
  </li>
287
508
  </draggable>
288
509
  <div style="margin-left: 22px;">
289
- <el-button type="text" @click="handleAddColumn">{{$t('fm.actions.addColumn')}}</el-button>
510
+ <el-button type="text" @click="handleAddColumn">添加列</el-button>
290
511
  </div>
291
512
  </el-form-item>
292
- <el-form-item :label="$t('fm.config.widget.justify')">
513
+ <el-form-item label="水平排列方式">
293
514
  <el-select v-model="data.options.justify">
294
- <el-option value="start" :label="$t('fm.config.widget.justifyStart')"></el-option>
295
- <el-option value="end" :label="$t('fm.config.widget.justifyEnd')"></el-option>
296
- <el-option value="center" :label="$t('fm.config.widget.justifyCenter')"></el-option>
297
- <el-option value="space-around" :label="$t('fm.config.widget.justifySpaceAround')"></el-option>
298
- <el-option value="space-between" :label="$t('fm.config.widget.justifySpaceBetween')"></el-option>
515
+ <el-option value="start" label="左对齐"></el-option>
516
+ <el-option value="end" label="右对齐"></el-option>
517
+ <el-option value="center" label="居中"></el-option>
518
+ <el-option value="space-around" label="两侧间隔相等"></el-option>
519
+ <el-option value="space-between" label="两端对齐"></el-option>
299
520
  </el-select>
300
521
  </el-form-item>
301
- <el-form-item :label="$t('fm.config.widget.align')">
522
+ <el-form-item label="垂直排列方式">
302
523
  <el-select v-model="data.options.align">
303
- <el-option value="top" :label="$t('fm.config.widget.alignTop')"></el-option>
304
- <el-option value="middle" :label="$t('fm.config.widget.alignMiddle')"></el-option>
305
- <el-option value="bottom" :label="$t('fm.config.widget.alignBottom')"></el-option>
524
+ <el-option value="top" label="顶部对齐"></el-option>
525
+ <el-option value="middle" label="居中"></el-option>
526
+ <el-option value="bottom" label="底部对齐"></el-option>
306
527
  </el-select>
307
528
  </el-form-item>
308
529
  </template>
309
530
 
310
-
311
531
  <template v-if="data.type != 'grid'">
312
- <el-form-item :label="$t('fm.config.widget.attribute')">
313
- <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">{{$t('fm.config.widget.readonly')}}</el-checkbox>
314
- <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">{{$t('fm.config.widget.disabled')}} </el-checkbox>
315
- <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">{{$t('fm.config.widget.editable')}}</el-checkbox>
316
- <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">{{$t('fm.config.widget.clearable')}} </el-checkbox>
317
- <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">{{$t('fm.config.widget.arrowControl')}}</el-checkbox>
318
- <el-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete')>=0">{{$t('fm.config.widget.isDelete')}}</el-checkbox>
319
- <el-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit')>=0">{{$t('fm.config.widget.isEdit')}}</el-checkbox>
320
-
532
+ <el-form-item label="操作属性">
533
+ <el-checkbox
534
+ v-model="data.options.readonly"
535
+ v-if="Object.keys(data.options).indexOf('readonly') >= 0"
536
+ >完全只读</el-checkbox
537
+ >
538
+ <el-checkbox
539
+ v-model="data.options.disabled"
540
+ v-if="Object.keys(data.options).indexOf('disabled') >= 0"
541
+ >禁用
542
+ </el-checkbox>
543
+ <el-checkbox
544
+ v-model="data.options.editable"
545
+ v-if="Object.keys(data.options).indexOf('editable') >= 0"
546
+ >文本框可输入</el-checkbox
547
+ >
548
+ <el-checkbox
549
+ v-model="data.options.clearable"
550
+ v-if="Object.keys(data.options).indexOf('clearable') >= 0"
551
+ >显示清除按钮</el-checkbox
552
+ >
553
+ <el-checkbox
554
+ v-model="data.options.arrowControl"
555
+ v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
556
+ >使用箭头进行时间选择</el-checkbox
557
+ >
558
+ <el-checkbox
559
+ v-model="data.options.isDelete"
560
+ v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
561
+ >删除</el-checkbox
562
+ >
563
+ <el-checkbox
564
+ v-model="data.options.isEdit"
565
+ v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
566
+ >编辑</el-checkbox
567
+ >
321
568
  </el-form-item>
322
- <el-form-item :label="$t('fm.config.widget.validate')">
323
- <div v-if="Object.keys(data.options).indexOf('required')>=0">
324
- <el-checkbox v-model="data.options.required">{{$t('fm.config.widget.required')}}</el-checkbox>
569
+ <el-form-item label="校验">
570
+ <div v-if="Object.keys(data.options).indexOf('required') >= 0">
571
+ <el-checkbox v-model="data.options.required">必填</el-checkbox>
325
572
  </div>
326
- <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
327
- <el-option value="string" :label="$t('fm.config.widget.string')"></el-option>
328
- <el-option value="number" :label="$t('fm.config.widget.number')"></el-option>
329
- <el-option value="boolean" :label="$t('fm.config.widget.boolean')"></el-option>
330
- <el-option value="integer" :label="$t('fm.config.widget.integer')"></el-option>
331
- <el-option value="float" :label="$t('fm.config.widget.float')"></el-option>
332
- <el-option value="url" :label="$t('fm.config.widget.url')"></el-option>
333
- <el-option value="email" :label="$t('fm.config.widget.email')"></el-option>
334
- <el-option value="hex" :label="$t('fm.config.widget.hex')"></el-option>
573
+ <el-select
574
+ v-if="Object.keys(data.options).indexOf('dataType') >= 0"
575
+ v-model="data.options.dataType"
576
+ size="mini"
577
+ >
578
+ <el-option value="string" label="字符串"></el-option>
579
+ <el-option value="number" label="数字"></el-option>
580
+ <el-option value="boolean" label="布尔值"></el-option>
581
+ <el-option value="integer" label="整数"></el-option>
582
+ <el-option value="float" label="浮点数"></el-option>
583
+ <el-option value="url" label="URL地址"></el-option>
584
+ <el-option value="email" label="邮箱地址"></el-option>
585
+ <el-option value="hex" label="十六进制"></el-option>
335
586
  </el-select>
336
587
 
337
- <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
338
- <el-input size="mini" class="config-pattern-input" v-model.lazy="data.options.pattern" style=" width: 240px;" :placeholder="$t('fm.config.widget.patternPlaceholder')">
339
- <template slot="prepend" >/</template>
340
- <template slot="append" >/</template>
588
+ <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
589
+ <el-input
590
+ size="mini"
591
+ class="config-pattern-input"
592
+ v-model.lazy="data.options.pattern"
593
+ style=" width: 240px;"
594
+ placeholder="填写正则表达式"
595
+ >
596
+ <template slot="prepend">/</template>
597
+ <template slot="append">/</template>
341
598
  </el-input>
342
599
  </div>
343
600
  </el-form-item>
@@ -347,14 +604,14 @@
347
604
  </template>
348
605
 
349
606
  <script>
350
- import Draggable from 'vuedraggable'
607
+ import Draggable from "vuedraggable";
351
608
 
352
609
  export default {
353
610
  components: {
354
611
  Draggable
355
612
  },
356
- props: ['data'],
357
- data () {
613
+ props: ["data"],
614
+ data() {
358
615
  return {
359
616
  validator: {
360
617
  type: null,
@@ -363,136 +620,141 @@ export default {
363
620
  range: null,
364
621
  length: null
365
622
  }
366
- }
623
+ };
367
624
  },
368
625
  computed: {
369
- show () {
626
+ show() {
370
627
  if (this.data && Object.keys(this.data).length > 0) {
371
- return true
628
+ return true;
372
629
  }
373
- return false
630
+ return false;
374
631
  }
375
632
  },
376
633
  methods: {
377
- handleOptionsRemove (index) {
378
- if (this.data.type === 'grid') {
379
- this.data.columns.splice(index, 1)
634
+ handleOptionsRemove(index) {
635
+ if (this.data.type === "grid") {
636
+ this.data.columns.splice(index, 1);
380
637
  } else {
381
- this.data.options.options.splice(index, 1)
638
+ this.data.options.options.splice(index, 1);
382
639
  }
383
-
384
640
  },
385
- handleAddOption () {
641
+ handleAddOption() {
386
642
  if (this.data.options.showLabel) {
387
643
  this.data.options.options.push({
388
- value: this.$t('fm.config.widget.newOption'),
389
- label: this.$t('fm.config.widget.newOption')
390
- })
644
+ value: "新选项",
645
+ label: "新选项"
646
+ });
391
647
  } else {
392
648
  this.data.options.options.push({
393
- value: this.$t('fm.config.widget.newOption')
394
- })
649
+ value: "新选项"
650
+ });
395
651
  }
396
-
397
652
  },
398
- handleAddColumn () {
653
+ handleAddColumn() {
399
654
  this.data.columns.push({
400
- span: '',
655
+ span: "",
401
656
  list: []
402
- })
657
+ });
403
658
  },
404
- generateRule () {
405
- this.data.rules = []
659
+ generateRule() {
660
+ this.data.rules = [];
406
661
  Object.keys(this.validator).forEach(key => {
407
662
  if (this.validator[key]) {
408
- this.data.rules.push(this.validator[key])
663
+ this.data.rules.push(this.validator[key]);
409
664
  }
410
- })
665
+ });
411
666
  },
412
- handleSelectMuliple (value) {
667
+ handleSelectMuliple(value) {
413
668
  if (value) {
414
669
  if (this.data.options.defaultValue) {
415
- this.data.options.defaultValue = [this.data.options.defaultValue]
670
+ this.data.options.defaultValue = [this.data.options.defaultValue];
416
671
  } else {
417
- this.data.options.defaultValue = []
672
+ this.data.options.defaultValue = [];
418
673
  }
419
-
420
674
  } else {
421
- if (this.data.options.defaultValue.length>0){
422
- this.data.options.defaultValue = this.data.options.defaultValue[0]
675
+ if (this.data.options.defaultValue.length > 0) {
676
+ this.data.options.defaultValue = this.data.options.defaultValue[0];
423
677
  } else {
424
- this.data.options.defaultValue = ''
678
+ this.data.options.defaultValue = "";
425
679
  }
426
-
427
680
  }
428
681
  },
429
682
 
430
- validateRequired (val) {
683
+ validateRequired(val) {
431
684
  if (val) {
432
- this.validator.required = {required: true, message: `${this.data.name}${this.$t('fm.config.widget.validatorRequired')}`}
685
+ this.validator.required = {
686
+ required: true,
687
+ message: `${this.data.name}必须填写`
688
+ };
433
689
  } else {
434
- this.validator.required = null
690
+ this.validator.required = null;
435
691
  }
436
692
 
437
693
  this.$nextTick(() => {
438
- this.generateRule()
439
- })
694
+ this.generateRule();
695
+ });
440
696
  },
441
697
 
442
- validateDataType (val) {
698
+ validateDataType(val) {
443
699
  if (!this.show) {
444
- return false
700
+ return false;
445
701
  }
446
702
 
447
703
  if (val) {
448
- this.validator.type = {type: val, message: this.data.name + this.$t('fm.config.widget.validatorType')}
704
+ this.validator.type = {
705
+ type: val,
706
+ message: this.data.name + "格式不正确"
707
+ };
449
708
  } else {
450
- this.validator.type = null
709
+ this.validator.type = null;
451
710
  }
452
711
 
453
- this.generateRule()
712
+ this.generateRule();
454
713
  },
455
- valiatePattern (val) {
714
+ valiatePattern(val) {
456
715
  if (!this.show) {
457
- return false
716
+ return false;
458
717
  }
459
718
 
460
719
  if (val) {
461
- this.validator.pattern = {pattern: val, message: this.data.name + this.$t('fm.config.widget.validatorPattern')}
720
+ this.validator.pattern = {
721
+ pattern: val,
722
+ message: this.data.name + "格式不匹配"
723
+ };
462
724
  } else {
463
- this.validator.pattern = null
725
+ this.validator.pattern = null;
464
726
  }
465
727
 
466
- this.generateRule()
728
+ this.generateRule();
467
729
  }
468
730
  },
469
731
  watch: {
470
- 'data.options.isRange': function(val) {
471
- if (typeof val !== 'undefined') {
732
+ "data.options.isRange": function(val) {
733
+ if (typeof val !== "undefined") {
472
734
  if (val) {
473
- this.data.options.defaultValue = null
735
+ this.data.options.defaultValue = null;
474
736
  } else {
475
- if (Object.keys(this.data.options).indexOf('defaultValue')>=0)
476
- this.data.options.defaultValue = ''
737
+ if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
738
+ this.data.options.defaultValue = "";
477
739
  }
478
740
  }
479
741
  },
480
- 'data.options.required': function(val) {
481
- this.validateRequired(val)
742
+ "data.options.required": function(val) {
743
+ this.validateRequired(val);
482
744
  },
483
- 'data.options.dataType': function (val) {
484
- this.validateDataType(val)
745
+ "data.options.dataType": function(val) {
746
+ this.validateDataType(val);
485
747
  },
486
- 'data.options.pattern': function (val) {
487
- this.valiatePattern(val)
748
+ "data.options.pattern": function(val) {
749
+ this.valiatePattern(val);
488
750
  },
489
- 'data.name': function (val) {
751
+ "data.name": function(val) {
490
752
  if (this.data.options) {
491
- this.validateRequired(this.data.options.required)
492
- this.validateDataType(this.data.options.dataType)
493
- this.valiatePattern(this.data.options.pattern)
753
+ this.validateRequired(this.data.options.required);
754
+ this.validateDataType(this.data.options.dataType);
755
+ this.valiatePattern(this.data.options.pattern);
494
756
  }
495
757
  }
496
758
  }
497
- }
759
+ };
498
760
  </script>