@idooel/components 0.0.2-beta.27 → 0.0.2-beta.28
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/dist/@idooel/components.esm.js +194 -139
- package/dist/@idooel/components.umd.js +194 -139
- package/package.json +1 -1
- package/packages/form/src/index.vue +97 -46
|
@@ -4961,6 +4961,7 @@
|
|
|
4961
4961
|
methods: {
|
|
4962
4962
|
onFieldsChange() {
|
|
4963
4963
|
this.executeOptionListExpression();
|
|
4964
|
+
this.dispatchExpression();
|
|
4964
4965
|
},
|
|
4965
4966
|
executeOptionListExpression() {
|
|
4966
4967
|
this.elements.forEach(ele => {
|
|
@@ -4996,22 +4997,81 @@
|
|
|
4996
4997
|
this.formModel = props;
|
|
4997
4998
|
this.dispatchExpression();
|
|
4998
4999
|
},
|
|
4999
|
-
rebuildRules(
|
|
5000
|
-
|
|
5001
|
-
|
|
5000
|
+
rebuildRules(ele) {
|
|
5001
|
+
const {
|
|
5002
|
+
rules = []
|
|
5003
|
+
} = ele;
|
|
5004
|
+
const nextRules = rules.map(rule => {
|
|
5005
|
+
const nextRule = {
|
|
5006
|
+
...rule
|
|
5007
|
+
};
|
|
5002
5008
|
const {
|
|
5003
|
-
validator
|
|
5004
|
-
|
|
5009
|
+
validator,
|
|
5010
|
+
required
|
|
5011
|
+
} = nextRule;
|
|
5012
|
+
// 支持 validator 函数
|
|
5005
5013
|
if (validator) {
|
|
5006
|
-
validator
|
|
5007
|
-
|
|
5014
|
+
nextRule.validator = (rule, value, cb) => {
|
|
5015
|
+
validator.formModel = this.getFieldsValue();
|
|
5016
|
+
validator.exposed = this.exposedMethods;
|
|
5017
|
+
return validator(rule, value, cb);
|
|
5018
|
+
};
|
|
5019
|
+
}
|
|
5020
|
+
// 支持 rules 内部的 required 表达式
|
|
5021
|
+
if (required !== undefined && shared.type.isStr(required)) {
|
|
5022
|
+
nextRule.required = this.executeExpression(required);
|
|
5008
5023
|
}
|
|
5024
|
+
return nextRule;
|
|
5009
5025
|
});
|
|
5010
|
-
|
|
5026
|
+
// 支持顶层 required 表达式（优先级高于 rules 内部）
|
|
5027
|
+
const {
|
|
5028
|
+
required
|
|
5029
|
+
} = ele;
|
|
5030
|
+
if (required !== undefined) {
|
|
5031
|
+
const isRequired = this.executeExpression(required);
|
|
5032
|
+
const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'));
|
|
5033
|
+
if (!hasRequiredRule) {
|
|
5034
|
+
nextRules.unshift({
|
|
5035
|
+
required: isRequired,
|
|
5036
|
+
message: `${ele.label}是必填项`
|
|
5037
|
+
});
|
|
5038
|
+
} else {
|
|
5039
|
+
nextRules.forEach(r => {
|
|
5040
|
+
if (Object.keys(r).includes('required')) {
|
|
5041
|
+
r.required = isRequired;
|
|
5042
|
+
}
|
|
5043
|
+
});
|
|
5044
|
+
}
|
|
5045
|
+
}
|
|
5046
|
+
return nextRules;
|
|
5011
5047
|
},
|
|
5012
5048
|
dispatchExpression() {
|
|
5013
5049
|
this.evalDisabledExpression();
|
|
5014
5050
|
this.evalShowExpression();
|
|
5051
|
+
this.evalRequiredExpression();
|
|
5052
|
+
},
|
|
5053
|
+
evalRequiredExpression() {
|
|
5054
|
+
this.elements.forEach(ele => {
|
|
5055
|
+
// 优先使用顶层 required 表达式
|
|
5056
|
+
let requiredExpr = ele.required;
|
|
5057
|
+
// 如果顶层没有，则从 rules 中查找
|
|
5058
|
+
if (requiredExpr === undefined && ele.rules) {
|
|
5059
|
+
const requiredRule = ele.rules.find(r => r.required !== undefined);
|
|
5060
|
+
if (requiredRule) {
|
|
5061
|
+
requiredExpr = requiredRule.required;
|
|
5062
|
+
}
|
|
5063
|
+
}
|
|
5064
|
+
if (requiredExpr !== undefined) {
|
|
5065
|
+
const ret = this.executeExpression(requiredExpr);
|
|
5066
|
+
const oldRequired = ele._required;
|
|
5067
|
+
this.$set(ele, '_required', ret);
|
|
5068
|
+
// 初始化或状态变化时更新版本号，强制组件重新渲染
|
|
5069
|
+
if (oldRequired === undefined || oldRequired !== ret) {
|
|
5070
|
+
const currentVersion = ele._rulesVersion || 0;
|
|
5071
|
+
this.$set(ele, '_rulesVersion', currentVersion + 1);
|
|
5072
|
+
}
|
|
5073
|
+
}
|
|
5074
|
+
});
|
|
5015
5075
|
},
|
|
5016
5076
|
evalDisabledExpression() {
|
|
5017
5077
|
this.elements.forEach(ele => {
|
|
@@ -5035,12 +5095,13 @@
|
|
|
5035
5095
|
executeExpression(expression$1) {
|
|
5036
5096
|
if (shared.type.isBool(expression$1)) return expression$1;
|
|
5037
5097
|
if (shared.type.isEmpty(expression$1)) return false;
|
|
5038
|
-
|
|
5039
|
-
...this.getFieldsValue(),
|
|
5098
|
+
const scope = {
|
|
5040
5099
|
...this.formModel,
|
|
5100
|
+
...this.getFieldsValue(),
|
|
5041
5101
|
_route: this.$route.query,
|
|
5042
5102
|
_routeMeta: this.$route.meta
|
|
5043
|
-
}
|
|
5103
|
+
};
|
|
5104
|
+
return expression.parse(expression$1, scope);
|
|
5044
5105
|
},
|
|
5045
5106
|
onChange(value, props) {
|
|
5046
5107
|
const {
|
|
@@ -5127,16 +5188,24 @@
|
|
|
5127
5188
|
[
|
|
5128
5189
|
_vm._l(_vm.elements, function (ele) {
|
|
5129
5190
|
return [
|
|
5130
|
-
|
|
5191
|
+
ele._show
|
|
5131
5192
|
? _c(
|
|
5132
5193
|
"a-col",
|
|
5133
|
-
{
|
|
5194
|
+
{
|
|
5195
|
+
key: ele.name + "_" + (ele._rulesVersion || 0),
|
|
5196
|
+
attrs: { span: ele.span },
|
|
5197
|
+
},
|
|
5134
5198
|
[
|
|
5135
5199
|
ele.type == "ele-input" || ele.type == "Input"
|
|
5136
5200
|
? [
|
|
5137
5201
|
_c(
|
|
5138
5202
|
"a-form-item",
|
|
5139
|
-
{
|
|
5203
|
+
{
|
|
5204
|
+
attrs: {
|
|
5205
|
+
label: ele.label + "：",
|
|
5206
|
+
required: ele._required,
|
|
5207
|
+
},
|
|
5208
|
+
},
|
|
5140
5209
|
[
|
|
5141
5210
|
_c("ele-input", {
|
|
5142
5211
|
directives: [
|
|
@@ -5145,21 +5214,15 @@
|
|
|
5145
5214
|
rawName: "v-decorator",
|
|
5146
5215
|
value: [
|
|
5147
5216
|
ele.name,
|
|
5148
|
-
{
|
|
5149
|
-
rules: _vm.rebuildRules(
|
|
5150
|
-
ele.rules
|
|
5151
|
-
),
|
|
5152
|
-
},
|
|
5217
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5153
5218
|
],
|
|
5154
5219
|
expression:
|
|
5155
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5220
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5156
5221
|
},
|
|
5157
5222
|
],
|
|
5158
5223
|
staticStyle: { width: "100%" },
|
|
5159
5224
|
attrs: {
|
|
5160
|
-
disabled:
|
|
5161
|
-
ele._disabled
|
|
5162
|
-
),
|
|
5225
|
+
disabled: ele._disabled,
|
|
5163
5226
|
"max-length": ele.maxLength,
|
|
5164
5227
|
},
|
|
5165
5228
|
on: {
|
|
@@ -5177,7 +5240,12 @@
|
|
|
5177
5240
|
? [
|
|
5178
5241
|
_c(
|
|
5179
5242
|
"a-form-item",
|
|
5180
|
-
{
|
|
5243
|
+
{
|
|
5244
|
+
attrs: {
|
|
5245
|
+
label: ele.label + "：",
|
|
5246
|
+
required: ele._required,
|
|
5247
|
+
},
|
|
5248
|
+
},
|
|
5181
5249
|
[
|
|
5182
5250
|
_c("ele-textarea", {
|
|
5183
5251
|
directives: [
|
|
@@ -5186,23 +5254,17 @@
|
|
|
5186
5254
|
rawName: "v-decorator",
|
|
5187
5255
|
value: [
|
|
5188
5256
|
ele.name,
|
|
5189
|
-
{
|
|
5190
|
-
rules: _vm.rebuildRules(
|
|
5191
|
-
ele.rules
|
|
5192
|
-
),
|
|
5193
|
-
},
|
|
5257
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5194
5258
|
],
|
|
5195
5259
|
expression:
|
|
5196
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5260
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5197
5261
|
},
|
|
5198
5262
|
],
|
|
5199
5263
|
staticStyle: { width: "100%" },
|
|
5200
5264
|
attrs: {
|
|
5201
5265
|
"max-length": ele.maxLength,
|
|
5202
5266
|
autosize: ele.autosize,
|
|
5203
|
-
disabled:
|
|
5204
|
-
ele._disabled
|
|
5205
|
-
),
|
|
5267
|
+
disabled: ele._disabled,
|
|
5206
5268
|
"allow-clear": ele.allowClear,
|
|
5207
5269
|
placeholder: ele.placeholder,
|
|
5208
5270
|
},
|
|
@@ -5220,7 +5282,12 @@
|
|
|
5220
5282
|
? [
|
|
5221
5283
|
_c(
|
|
5222
5284
|
"a-form-item",
|
|
5223
|
-
{
|
|
5285
|
+
{
|
|
5286
|
+
attrs: {
|
|
5287
|
+
label: ele.label + "：",
|
|
5288
|
+
required: ele._required,
|
|
5289
|
+
},
|
|
5290
|
+
},
|
|
5224
5291
|
[
|
|
5225
5292
|
_c("ele-select", {
|
|
5226
5293
|
directives: [
|
|
@@ -5229,22 +5296,16 @@
|
|
|
5229
5296
|
rawName: "v-decorator",
|
|
5230
5297
|
value: [
|
|
5231
5298
|
ele.name,
|
|
5232
|
-
{
|
|
5233
|
-
rules: _vm.rebuildRules(
|
|
5234
|
-
ele.rules
|
|
5235
|
-
),
|
|
5236
|
-
},
|
|
5299
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5237
5300
|
],
|
|
5238
5301
|
expression:
|
|
5239
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5302
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5240
5303
|
},
|
|
5241
5304
|
],
|
|
5242
5305
|
staticStyle: { width: "100%" },
|
|
5243
5306
|
attrs: {
|
|
5244
5307
|
"data-source": ele.optionList,
|
|
5245
|
-
disabled:
|
|
5246
|
-
ele._disabled
|
|
5247
|
-
),
|
|
5308
|
+
disabled: ele._disabled,
|
|
5248
5309
|
multiple: ele.multiple,
|
|
5249
5310
|
mode: ele.mode,
|
|
5250
5311
|
code: ele.code,
|
|
@@ -5266,7 +5327,12 @@
|
|
|
5266
5327
|
? [
|
|
5267
5328
|
_c(
|
|
5268
5329
|
"a-form-item",
|
|
5269
|
-
{
|
|
5330
|
+
{
|
|
5331
|
+
attrs: {
|
|
5332
|
+
label: ele.label + "：",
|
|
5333
|
+
required: ele._required,
|
|
5334
|
+
},
|
|
5335
|
+
},
|
|
5270
5336
|
[
|
|
5271
5337
|
_c("ele-upload", {
|
|
5272
5338
|
directives: [
|
|
@@ -5275,14 +5341,10 @@
|
|
|
5275
5341
|
rawName: "v-decorator",
|
|
5276
5342
|
value: [
|
|
5277
5343
|
ele.name,
|
|
5278
|
-
{
|
|
5279
|
-
rules: _vm.rebuildRules(
|
|
5280
|
-
ele.rules
|
|
5281
|
-
),
|
|
5282
|
-
},
|
|
5344
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5283
5345
|
],
|
|
5284
5346
|
expression:
|
|
5285
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5347
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5286
5348
|
},
|
|
5287
5349
|
],
|
|
5288
5350
|
staticStyle: { width: "100%" },
|
|
@@ -5305,7 +5367,12 @@
|
|
|
5305
5367
|
? [
|
|
5306
5368
|
_c(
|
|
5307
5369
|
"a-form-item",
|
|
5308
|
-
{
|
|
5370
|
+
{
|
|
5371
|
+
attrs: {
|
|
5372
|
+
label: ele.label + "：",
|
|
5373
|
+
required: ele._required,
|
|
5374
|
+
},
|
|
5375
|
+
},
|
|
5309
5376
|
[
|
|
5310
5377
|
_c("ele-date-range", {
|
|
5311
5378
|
directives: [
|
|
@@ -5314,22 +5381,14 @@
|
|
|
5314
5381
|
rawName: "v-decorator",
|
|
5315
5382
|
value: [
|
|
5316
5383
|
ele.name,
|
|
5317
|
-
{
|
|
5318
|
-
rules: _vm.rebuildRules(
|
|
5319
|
-
ele.rules
|
|
5320
|
-
),
|
|
5321
|
-
},
|
|
5384
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5322
5385
|
],
|
|
5323
5386
|
expression:
|
|
5324
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5387
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5325
5388
|
},
|
|
5326
5389
|
],
|
|
5327
5390
|
staticStyle: { width: "100%" },
|
|
5328
|
-
attrs: {
|
|
5329
|
-
disabled: _vm.executeExpression(
|
|
5330
|
-
ele._disabled
|
|
5331
|
-
),
|
|
5332
|
-
},
|
|
5391
|
+
attrs: { disabled: ele._disabled },
|
|
5333
5392
|
}),
|
|
5334
5393
|
],
|
|
5335
5394
|
1
|
|
@@ -5339,7 +5398,12 @@
|
|
|
5339
5398
|
? [
|
|
5340
5399
|
_c(
|
|
5341
5400
|
"a-form-item",
|
|
5342
|
-
{
|
|
5401
|
+
{
|
|
5402
|
+
attrs: {
|
|
5403
|
+
label: ele.label + "：",
|
|
5404
|
+
required: ele._required,
|
|
5405
|
+
},
|
|
5406
|
+
},
|
|
5343
5407
|
[
|
|
5344
5408
|
_c("ele-date", {
|
|
5345
5409
|
directives: [
|
|
@@ -5348,14 +5412,10 @@
|
|
|
5348
5412
|
rawName: "v-decorator",
|
|
5349
5413
|
value: [
|
|
5350
5414
|
ele.name,
|
|
5351
|
-
{
|
|
5352
|
-
rules: _vm.rebuildRules(
|
|
5353
|
-
ele.rules
|
|
5354
|
-
),
|
|
5355
|
-
},
|
|
5415
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5356
5416
|
],
|
|
5357
5417
|
expression:
|
|
5358
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5418
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5359
5419
|
},
|
|
5360
5420
|
],
|
|
5361
5421
|
staticStyle: { width: "100%" },
|
|
@@ -5365,9 +5425,7 @@
|
|
|
5365
5425
|
"show-time": ele.showTime,
|
|
5366
5426
|
"show-today": ele.showToday,
|
|
5367
5427
|
"value-format": ele.valueFormat,
|
|
5368
|
-
disabled:
|
|
5369
|
-
ele._disabled
|
|
5370
|
-
),
|
|
5428
|
+
disabled: ele._disabled,
|
|
5371
5429
|
},
|
|
5372
5430
|
}),
|
|
5373
5431
|
],
|
|
@@ -5379,7 +5437,12 @@
|
|
|
5379
5437
|
? [
|
|
5380
5438
|
_c(
|
|
5381
5439
|
"a-form-item",
|
|
5382
|
-
{
|
|
5440
|
+
{
|
|
5441
|
+
attrs: {
|
|
5442
|
+
label: ele.label + "：",
|
|
5443
|
+
required: ele._required,
|
|
5444
|
+
},
|
|
5445
|
+
},
|
|
5383
5446
|
[
|
|
5384
5447
|
_c("ele-select-entity", {
|
|
5385
5448
|
directives: [
|
|
@@ -5388,14 +5451,10 @@
|
|
|
5388
5451
|
rawName: "v-decorator",
|
|
5389
5452
|
value: [
|
|
5390
5453
|
ele.name,
|
|
5391
|
-
{
|
|
5392
|
-
rules: _vm.rebuildRules(
|
|
5393
|
-
ele.rules
|
|
5394
|
-
),
|
|
5395
|
-
},
|
|
5454
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5396
5455
|
],
|
|
5397
5456
|
expression:
|
|
5398
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5457
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5399
5458
|
},
|
|
5400
5459
|
],
|
|
5401
5460
|
staticStyle: { width: "100%" },
|
|
@@ -5409,7 +5468,12 @@
|
|
|
5409
5468
|
? [
|
|
5410
5469
|
_c(
|
|
5411
5470
|
"a-form-item",
|
|
5412
|
-
{
|
|
5471
|
+
{
|
|
5472
|
+
attrs: {
|
|
5473
|
+
label: ele.label + "：",
|
|
5474
|
+
required: ele._required,
|
|
5475
|
+
},
|
|
5476
|
+
},
|
|
5413
5477
|
[
|
|
5414
5478
|
_c(
|
|
5415
5479
|
"ele-input-number",
|
|
@@ -5422,21 +5486,17 @@
|
|
|
5422
5486
|
value: [
|
|
5423
5487
|
ele.name,
|
|
5424
5488
|
{
|
|
5425
|
-
rules: _vm.rebuildRules(
|
|
5426
|
-
ele.rules
|
|
5427
|
-
),
|
|
5489
|
+
rules: _vm.rebuildRules(ele),
|
|
5428
5490
|
},
|
|
5429
5491
|
],
|
|
5430
5492
|
expression:
|
|
5431
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5493
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5432
5494
|
},
|
|
5433
5495
|
],
|
|
5434
5496
|
staticStyle: { width: "100%" },
|
|
5435
5497
|
attrs: {
|
|
5436
5498
|
precision: ele.precision,
|
|
5437
|
-
disabled:
|
|
5438
|
-
ele._disabled
|
|
5439
|
-
),
|
|
5499
|
+
disabled: ele._disabled,
|
|
5440
5500
|
},
|
|
5441
5501
|
on: {
|
|
5442
5502
|
change: function ($event) {
|
|
@@ -5458,7 +5518,12 @@
|
|
|
5458
5518
|
? [
|
|
5459
5519
|
_c(
|
|
5460
5520
|
"a-form-item",
|
|
5461
|
-
{
|
|
5521
|
+
{
|
|
5522
|
+
attrs: {
|
|
5523
|
+
label: ele.label + "：",
|
|
5524
|
+
required: ele._required,
|
|
5525
|
+
},
|
|
5526
|
+
},
|
|
5462
5527
|
[
|
|
5463
5528
|
_c("ele-checkbox", {
|
|
5464
5529
|
directives: [
|
|
@@ -5467,22 +5532,16 @@
|
|
|
5467
5532
|
rawName: "v-decorator",
|
|
5468
5533
|
value: [
|
|
5469
5534
|
ele.name,
|
|
5470
|
-
{
|
|
5471
|
-
rules: _vm.rebuildRules(
|
|
5472
|
-
ele.rules
|
|
5473
|
-
),
|
|
5474
|
-
},
|
|
5535
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5475
5536
|
],
|
|
5476
5537
|
expression:
|
|
5477
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5538
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5478
5539
|
},
|
|
5479
5540
|
],
|
|
5480
5541
|
staticStyle: { width: "100%" },
|
|
5481
5542
|
attrs: {
|
|
5482
5543
|
"data-source": ele.optionList,
|
|
5483
|
-
disabled:
|
|
5484
|
-
ele._disabled
|
|
5485
|
-
),
|
|
5544
|
+
disabled: ele._disabled,
|
|
5486
5545
|
},
|
|
5487
5546
|
}),
|
|
5488
5547
|
],
|
|
@@ -5493,7 +5552,12 @@
|
|
|
5493
5552
|
? [
|
|
5494
5553
|
_c(
|
|
5495
5554
|
"a-form-item",
|
|
5496
|
-
{
|
|
5555
|
+
{
|
|
5556
|
+
attrs: {
|
|
5557
|
+
label: ele.label + "：",
|
|
5558
|
+
required: ele._required,
|
|
5559
|
+
},
|
|
5560
|
+
},
|
|
5497
5561
|
[
|
|
5498
5562
|
_c("ele-radio", {
|
|
5499
5563
|
directives: [
|
|
@@ -5502,21 +5566,15 @@
|
|
|
5502
5566
|
rawName: "v-decorator",
|
|
5503
5567
|
value: [
|
|
5504
5568
|
ele.name,
|
|
5505
|
-
{
|
|
5506
|
-
rules: _vm.rebuildRules(
|
|
5507
|
-
ele.rules
|
|
5508
|
-
),
|
|
5509
|
-
},
|
|
5569
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5510
5570
|
],
|
|
5511
5571
|
expression:
|
|
5512
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5572
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5513
5573
|
},
|
|
5514
5574
|
],
|
|
5515
5575
|
staticStyle: { width: "100%" },
|
|
5516
5576
|
attrs: {
|
|
5517
|
-
disabled:
|
|
5518
|
-
ele._disabled
|
|
5519
|
-
),
|
|
5577
|
+
disabled: ele._disabled,
|
|
5520
5578
|
"data-source": ele.optionList,
|
|
5521
5579
|
},
|
|
5522
5580
|
on: {
|
|
@@ -5533,7 +5591,12 @@
|
|
|
5533
5591
|
? [
|
|
5534
5592
|
_c(
|
|
5535
5593
|
"a-form-item",
|
|
5536
|
-
{
|
|
5594
|
+
{
|
|
5595
|
+
attrs: {
|
|
5596
|
+
label: ele.label + "：",
|
|
5597
|
+
required: ele._required,
|
|
5598
|
+
},
|
|
5599
|
+
},
|
|
5537
5600
|
[
|
|
5538
5601
|
_c("ele-form-img-crop", {
|
|
5539
5602
|
directives: [
|
|
@@ -5542,14 +5605,10 @@
|
|
|
5542
5605
|
rawName: "v-decorator",
|
|
5543
5606
|
value: [
|
|
5544
5607
|
ele.name,
|
|
5545
|
-
{
|
|
5546
|
-
rules: _vm.rebuildRules(
|
|
5547
|
-
ele.rules
|
|
5548
|
-
),
|
|
5549
|
-
},
|
|
5608
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5550
5609
|
],
|
|
5551
5610
|
expression:
|
|
5552
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5611
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5553
5612
|
},
|
|
5554
5613
|
],
|
|
5555
5614
|
staticStyle: { width: "100%" },
|
|
@@ -5560,9 +5619,7 @@
|
|
|
5560
5619
|
"cropper-config": ele.cropperConfig,
|
|
5561
5620
|
uploadFileConfig: ele.uploadFileConfig,
|
|
5562
5621
|
"oper-text": ele.operText,
|
|
5563
|
-
disabled:
|
|
5564
|
-
ele._disabled
|
|
5565
|
-
),
|
|
5622
|
+
disabled: ele._disabled,
|
|
5566
5623
|
},
|
|
5567
5624
|
on: {
|
|
5568
5625
|
change: function ($event) {
|
|
@@ -5578,7 +5635,12 @@
|
|
|
5578
5635
|
? [
|
|
5579
5636
|
_c(
|
|
5580
5637
|
"a-form-item",
|
|
5581
|
-
{
|
|
5638
|
+
{
|
|
5639
|
+
attrs: {
|
|
5640
|
+
label: ele.label + "：",
|
|
5641
|
+
required: ele._required,
|
|
5642
|
+
},
|
|
5643
|
+
},
|
|
5582
5644
|
[
|
|
5583
5645
|
_c(
|
|
5584
5646
|
"ele-tree-select",
|
|
@@ -5591,21 +5653,15 @@
|
|
|
5591
5653
|
value: [
|
|
5592
5654
|
ele.name,
|
|
5593
5655
|
{
|
|
5594
|
-
rules: _vm.rebuildRules(
|
|
5595
|
-
ele.rules
|
|
5596
|
-
),
|
|
5656
|
+
rules: _vm.rebuildRules(ele),
|
|
5597
5657
|
},
|
|
5598
5658
|
],
|
|
5599
5659
|
expression:
|
|
5600
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5660
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5601
5661
|
},
|
|
5602
5662
|
],
|
|
5603
5663
|
staticStyle: { width: "100%" },
|
|
5604
|
-
attrs: {
|
|
5605
|
-
disabled: _vm.executeExpression(
|
|
5606
|
-
ele._disabled
|
|
5607
|
-
),
|
|
5608
|
-
},
|
|
5664
|
+
attrs: { disabled: ele._disabled },
|
|
5609
5665
|
on: {
|
|
5610
5666
|
change: function ($event) {
|
|
5611
5667
|
return _vm.onChange($event, ele)
|
|
@@ -5625,7 +5681,12 @@
|
|
|
5625
5681
|
? [
|
|
5626
5682
|
_c(
|
|
5627
5683
|
"a-form-item",
|
|
5628
|
-
{
|
|
5684
|
+
{
|
|
5685
|
+
attrs: {
|
|
5686
|
+
label: ele.label + "：",
|
|
5687
|
+
required: ele._required,
|
|
5688
|
+
},
|
|
5689
|
+
},
|
|
5629
5690
|
[
|
|
5630
5691
|
_c(
|
|
5631
5692
|
"ele-select-entity-modal-table",
|
|
@@ -5638,21 +5699,15 @@
|
|
|
5638
5699
|
value: [
|
|
5639
5700
|
ele.name,
|
|
5640
5701
|
{
|
|
5641
|
-
rules: _vm.rebuildRules(
|
|
5642
|
-
ele.rules
|
|
5643
|
-
),
|
|
5702
|
+
rules: _vm.rebuildRules(ele),
|
|
5644
5703
|
},
|
|
5645
5704
|
],
|
|
5646
5705
|
expression:
|
|
5647
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5706
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5648
5707
|
},
|
|
5649
5708
|
],
|
|
5650
5709
|
staticStyle: { width: "100%" },
|
|
5651
|
-
attrs: {
|
|
5652
|
-
disabled: _vm.executeExpression(
|
|
5653
|
-
ele._disabled
|
|
5654
|
-
),
|
|
5655
|
-
},
|
|
5710
|
+
attrs: { disabled: ele._disabled },
|
|
5656
5711
|
on: {
|
|
5657
5712
|
change: function ($event) {
|
|
5658
5713
|
return _vm.onChange($event, ele)
|
|
@@ -5691,11 +5746,11 @@
|
|
|
5691
5746
|
/* style */
|
|
5692
5747
|
const __vue_inject_styles__$w = function (inject) {
|
|
5693
5748
|
if (!inject) return
|
|
5694
|
-
inject("data-v-750019c0_0", { source: ".ele__form--wrapper[data-v-750019c0] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele__form--wrapper\">\r\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n <a-row :gutter=\"24\">\r\n <template v-for=\"ele in elements\">\r\n <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n style=\"width:100%;\">\r\n </ele-textarea>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :multiple=\"ele.multiple\"\r\n :mode=\"ele.mode\"\r\n :code=\"ele.code\"\r\n :init=\"ele.init\"\r\n :url=\"ele.url\"\r\n :params=\"ele.params\" \r\n @change=\"onChange($event, ele)\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-upload'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n :ext=\"ele.ext\"\r\n :multiple=\"ele.multiple\"\r\n :accept=\"ele.accept\"\r\n :extensions=\"ele.extensions\"\r\n :size=\"ele.size\"\r\n :icon=\"ele.icon\"\r\n :url=\"ele.url\"\r\n :message=\"ele.message\" \r\n style=\"width:100%;\">\r\n </ele-upload>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-date-range \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-date\r\n :format=\"ele.format\"\r\n :mode=\"ele.mode\"\r\n :show-time=\"ele.showTime\"\r\n :show-today=\"ele.showToday\"\r\n :value-format=\"ele.valueFormat\"\r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n v-bind=\"ele.props\" \r\n style=\"width:100%;\">\r\n </ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-radio>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-form-img-crop\r\n @change=\"onChange($event, ele)\"\r\n :width=\"ele.width\"\r\n :height=\"ele.height\"\r\n :modal-title=\"ele.modalTitle\"\r\n :cropper-config=\"ele.cropperConfig\"\r\n :uploadFileConfig=\"ele.uploadFileConfig\"\r\n :oper-text=\"ele.operText\"\r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-form-img-crop>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-tree-select\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-tree-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select-entity-modal-table\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity-modal-table>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n name: 'ele-form',\r\n props: {\r\n value: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n disabled: {\r\n type: [Boolean, String],\r\n default: '_routeMeta.disabled'\r\n },\r\n formName: {\r\n type: [Number, String],\r\n default: 'coordinated'\r\n },\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {\r\n formModel: {}\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n computed: {\r\n contextData () {\r\n return this[CONTEXT].call(this)\r\n },\r\n globalDisabled () {\r\n return this.executeExpression(this.disabled)\r\n },\r\n form () {\r\n const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n return ref\r\n },\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue,\r\n getFieldsValue: this.getFieldsValue\r\n }\r\n }\r\n },\r\n created () {\r\n this.setDefaultValues()\r\n },\r\n methods: {\r\n onFieldsChange () {\r\n this.executeOptionListExpression()\r\n },\r\n executeOptionListExpression () {\r\n this.elements.forEach(ele => {\r\n if (ele.optionList) {\r\n const optionList = this.evalOptionListExpression(ele.optionList)\r\n this.$set(ele, 'optionList', optionList)\r\n }\r\n })\r\n },\r\n evalOptionListExpression (optionList = []) {\r\n const executeExpression = (expression) => {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return true\r\n const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n return ret\r\n }\r\n return optionList.map(item => {\r\n const { show } = item\r\n return { ...item, _show: executeExpression(show) }\r\n })\r\n },\r\n setFormModel (props = {}) {\r\n this.formModel = props\r\n this.dispatchExpression()\r\n },\r\n rebuildRules (rules = []) {\r\n //TODO\r\n rules.map(rule => {\r\n const { validator } = rule\r\n if (validator) {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n }\r\n })\r\n return rules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n },\r\n evalDisabledExpression () {\r\n this.elements.forEach(ele => {\r\n if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n const { disabled } = ele\r\n const ret = this.executeExpression(disabled)\r\n this.$set(ele, '_disabled', ret)\r\n })\r\n },\r\n evalShowExpression () {\r\n this.elements.forEach(ele => {\r\n const { show = true } = ele\r\n const ret = this.executeExpression(show)\r\n this.$set(ele, '_show', ret)\r\n })\r\n },\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n },\r\n onChange (value, props) {\r\n const { name } = props\r\n this.$set(this.formModel, name, value)\r\n this.dispatchExpression()\r\n this.setFieldsValue({ [name]: value })\r\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n },\r\n collectDefaultValues () {\r\n const ret = this.elements.reduce((ret, props) => {\r\n const { name, defaultValue } = props\r\n if (defaultValue) {\r\n ret[name] = defaultValue\r\n }\r\n return ret\r\n }, {})\r\n return ret\r\n },\r\n //TODO deprecated in the future, need to be implemented in the outer component\r\n setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\r\n this.setFormModel(defaultValues)\r\n this.setFieldsValue(defaultValues)\r\n },\r\n validateFields () {\r\n return new Promise((resolve) => {\r\n this.form.validateFields((error, values) => {\r\n resolve(!error)\r\n })\r\n })\r\n },\r\n setFieldsValue (props = {}) {\r\n this.$nextTick(() => {\r\n this.form.setFieldsValue(props)\r\n })\r\n },\r\n getFieldsValue (fieldNames) {\r\n return this.form.getFieldsValue(fieldNames)\r\n }\r\n },\r\n mounted() {\r\n this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n this.dispatchExpression()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n background: #fff;\r\n .ant-form-item {\r\n }\r\n}\r\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5749
|
+
inject("data-v-7561ae99_0", { source: ".ele__form--wrapper[data-v-7561ae99] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAoYA;EACA,gBAAA;ACnYA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele__form--wrapper\">\r\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n <a-row :gutter=\"24\">\r\n <template v-for=\"ele in elements\">\r\n <a-col v-if=\"ele._show\" :span=\"ele.span\" :key=\"`${ele.name}_${ele._rulesVersion || 0}`\">\r\n <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"ele._disabled\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\"\r\n style=\"width:100%;\">\r\n </ele-textarea>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"ele._disabled\"\r\n :multiple=\"ele.multiple\"\r\n :mode=\"ele.mode\"\r\n :code=\"ele.code\"\r\n :init=\"ele.init\"\r\n :url=\"ele.url\"\r\n :params=\"ele.params\" \r\n @change=\"onChange($event, ele)\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-upload'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n :ext=\"ele.ext\"\r\n :multiple=\"ele.multiple\"\r\n :accept=\"ele.accept\"\r\n :extensions=\"ele.extensions\"\r\n :size=\"ele.size\"\r\n :icon=\"ele.icon\"\r\n :url=\"ele.url\"\r\n :message=\"ele.message\" \r\n style=\"width:100%;\">\r\n </ele-upload>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-date-range \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-date\r\n :format=\"ele.format\"\r\n :mode=\"ele.mode\"\r\n :show-time=\"ele.showTime\"\r\n :show-today=\"ele.showToday\"\r\n :value-format=\"ele.valueFormat\"\r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-date>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n v-bind=\"ele.props\" \r\n style=\"width:100%;\">\r\n </ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-radio>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-form-img-crop\r\n @change=\"onChange($event, ele)\"\r\n :width=\"ele.width\"\r\n :height=\"ele.height\"\r\n :modal-title=\"ele.modalTitle\"\r\n :cropper-config=\"ele.cropperConfig\"\r\n :uploadFileConfig=\"ele.uploadFileConfig\"\r\n :oper-text=\"ele.operText\"\r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-form-img-crop>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-tree-select\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-tree-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-select-entity-modal-table\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity-modal-table>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n name: 'ele-form',\r\n props: {\r\n value: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n disabled: {\r\n type: [Boolean, String],\r\n default: '_routeMeta.disabled'\r\n },\r\n formName: {\r\n type: [Number, String],\r\n default: 'coordinated'\r\n },\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {\r\n formModel: {}\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n computed: {\r\n contextData () {\r\n return this[CONTEXT].call(this)\r\n },\r\n globalDisabled () {\r\n return this.executeExpression(this.disabled)\r\n },\r\n form () {\r\n const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n return ref\r\n },\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue,\r\n getFieldsValue: this.getFieldsValue\r\n }\r\n }\r\n },\r\n created () {\r\n this.setDefaultValues()\r\n },\r\n methods: {\r\n onFieldsChange () {\r\n this.executeOptionListExpression()\r\n this.dispatchExpression()\r\n },\r\n executeOptionListExpression () {\r\n this.elements.forEach(ele => {\r\n if (ele.optionList) {\r\n const optionList = this.evalOptionListExpression(ele.optionList)\r\n this.$set(ele, 'optionList', optionList)\r\n }\r\n })\r\n },\r\n evalOptionListExpression (optionList = []) {\r\n const executeExpression = (expression) => {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return true\r\n const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n return ret\r\n }\r\n return optionList.map(item => {\r\n const { show } = item\r\n return { ...item, _show: executeExpression(show) }\r\n })\r\n },\r\n setFormModel (props = {}) {\r\n this.formModel = props\r\n this.dispatchExpression()\r\n },\r\n rebuildRules (ele) {\r\n const { rules = [] } = ele\r\n const nextRules = rules.map(rule => {\r\n const nextRule = { ...rule }\r\n const { validator, required } = nextRule\r\n // 支持 validator 函数\r\n if (validator) {\r\n nextRule.validator = (rule, value, cb) => {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n return validator(rule, value, cb)\r\n }\r\n }\r\n // 支持 rules 内部的 required 表达式\r\n if (required !== undefined && type.isStr(required)) {\r\n nextRule.required = this.executeExpression(required)\r\n }\r\n return nextRule\r\n })\r\n // 支持顶层 required 表达式（优先级高于 rules 内部）\r\n const { required } = ele\r\n if (required !== undefined) {\r\n const isRequired = this.executeExpression(required)\r\n const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'))\r\n if (!hasRequiredRule) {\r\n nextRules.unshift({ required: isRequired, message: `${ele.label}是必填项` })\r\n } else {\r\n nextRules.forEach(r => {\r\n if (Object.keys(r).includes('required')) {\r\n r.required = isRequired\r\n }\r\n })\r\n }\r\n }\r\n return nextRules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n this.evalRequiredExpression()\r\n },\r\n evalRequiredExpression () {\r\n this.elements.forEach(ele => {\r\n // 优先使用顶层 required 表达式\r\n let requiredExpr = ele.required\r\n // 如果顶层没有，则从 rules 中查找\r\n if (requiredExpr === undefined && ele.rules) {\r\n const requiredRule = ele.rules.find(r => r.required !== undefined)\r\n if (requiredRule) {\r\n requiredExpr = requiredRule.required\r\n }\r\n }\r\n if (requiredExpr !== undefined) {\r\n const ret = this.executeExpression(requiredExpr)\r\n const oldRequired = ele._required\r\n this.$set(ele, '_required', ret)\r\n // 初始化或状态变化时更新版本号，强制组件重新渲染\r\n if (oldRequired === undefined || oldRequired !== ret) {\r\n const currentVersion = ele._rulesVersion || 0\r\n this.$set(ele, '_rulesVersion', currentVersion + 1)\r\n }\r\n }\r\n })\r\n },\r\n evalDisabledExpression () {\r\n this.elements.forEach(ele => {\r\n if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n const { disabled } = ele\r\n const ret = this.executeExpression(disabled)\r\n this.$set(ele, '_disabled', ret)\r\n })\r\n },\r\n evalShowExpression () {\r\n this.elements.forEach(ele => {\r\n const { show = true } = ele\r\n const ret = this.executeExpression(show)\r\n this.$set(ele, '_show', ret)\r\n })\r\n },\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n const scope = { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta }\r\n return parse(expression, scope)\r\n },\r\n onChange (value, props) {\r\n const { name } = props\r\n this.$set(this.formModel, name, value)\r\n this.dispatchExpression()\r\n this.setFieldsValue({ [name]: value })\r\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n },\r\n collectDefaultValues () {\r\n const ret = this.elements.reduce((ret, props) => {\r\n const { name, defaultValue } = props\r\n if (defaultValue) {\r\n ret[name] = defaultValue\r\n }\r\n return ret\r\n }, {})\r\n return ret\r\n },\r\n //TODO deprecated in the future, need to be implemented in the outer component\r\n setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\r\n this.setFormModel(defaultValues)\r\n this.setFieldsValue(defaultValues)\r\n },\r\n validateFields () {\r\n return new Promise((resolve) => {\r\n this.form.validateFields((error, values) => {\r\n resolve(!error)\r\n })\r\n })\r\n },\r\n setFieldsValue (props = {}) {\r\n this.$nextTick(() => {\r\n this.form.setFieldsValue(props)\r\n })\r\n },\r\n getFieldsValue (fieldNames) {\r\n return this.form.getFieldsValue(fieldNames)\r\n }\r\n },\r\n mounted() {\r\n this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n this.dispatchExpression()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n background: #fff;\r\n .ant-form-item {\r\n }\r\n}\r\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5695
5750
|
|
|
5696
5751
|
};
|
|
5697
5752
|
/* scoped */
|
|
5698
|
-
const __vue_scope_id__$w = "data-v-
|
|
5753
|
+
const __vue_scope_id__$w = "data-v-7561ae99";
|
|
5699
5754
|
/* module identifier */
|
|
5700
5755
|
const __vue_module_identifier__$w = undefined;
|
|
5701
5756
|
/* functional template */
|