@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
|
@@ -4956,6 +4956,7 @@ var script$w = {
|
|
|
4956
4956
|
methods: {
|
|
4957
4957
|
onFieldsChange() {
|
|
4958
4958
|
this.executeOptionListExpression();
|
|
4959
|
+
this.dispatchExpression();
|
|
4959
4960
|
},
|
|
4960
4961
|
executeOptionListExpression() {
|
|
4961
4962
|
this.elements.forEach(ele => {
|
|
@@ -4991,22 +4992,81 @@ var script$w = {
|
|
|
4991
4992
|
this.formModel = props;
|
|
4992
4993
|
this.dispatchExpression();
|
|
4993
4994
|
},
|
|
4994
|
-
rebuildRules(
|
|
4995
|
-
|
|
4996
|
-
|
|
4995
|
+
rebuildRules(ele) {
|
|
4996
|
+
const {
|
|
4997
|
+
rules = []
|
|
4998
|
+
} = ele;
|
|
4999
|
+
const nextRules = rules.map(rule => {
|
|
5000
|
+
const nextRule = {
|
|
5001
|
+
...rule
|
|
5002
|
+
};
|
|
4997
5003
|
const {
|
|
4998
|
-
validator
|
|
4999
|
-
|
|
5004
|
+
validator,
|
|
5005
|
+
required
|
|
5006
|
+
} = nextRule;
|
|
5007
|
+
// 支持 validator 函数
|
|
5000
5008
|
if (validator) {
|
|
5001
|
-
validator
|
|
5002
|
-
|
|
5009
|
+
nextRule.validator = (rule, value, cb) => {
|
|
5010
|
+
validator.formModel = this.getFieldsValue();
|
|
5011
|
+
validator.exposed = this.exposedMethods;
|
|
5012
|
+
return validator(rule, value, cb);
|
|
5013
|
+
};
|
|
5014
|
+
}
|
|
5015
|
+
// 支持 rules 内部的 required 表达式
|
|
5016
|
+
if (required !== undefined && type.isStr(required)) {
|
|
5017
|
+
nextRule.required = this.executeExpression(required);
|
|
5003
5018
|
}
|
|
5019
|
+
return nextRule;
|
|
5004
5020
|
});
|
|
5005
|
-
|
|
5021
|
+
// 支持顶层 required 表达式（优先级高于 rules 内部）
|
|
5022
|
+
const {
|
|
5023
|
+
required
|
|
5024
|
+
} = ele;
|
|
5025
|
+
if (required !== undefined) {
|
|
5026
|
+
const isRequired = this.executeExpression(required);
|
|
5027
|
+
const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'));
|
|
5028
|
+
if (!hasRequiredRule) {
|
|
5029
|
+
nextRules.unshift({
|
|
5030
|
+
required: isRequired,
|
|
5031
|
+
message: `${ele.label}是必填项`
|
|
5032
|
+
});
|
|
5033
|
+
} else {
|
|
5034
|
+
nextRules.forEach(r => {
|
|
5035
|
+
if (Object.keys(r).includes('required')) {
|
|
5036
|
+
r.required = isRequired;
|
|
5037
|
+
}
|
|
5038
|
+
});
|
|
5039
|
+
}
|
|
5040
|
+
}
|
|
5041
|
+
return nextRules;
|
|
5006
5042
|
},
|
|
5007
5043
|
dispatchExpression() {
|
|
5008
5044
|
this.evalDisabledExpression();
|
|
5009
5045
|
this.evalShowExpression();
|
|
5046
|
+
this.evalRequiredExpression();
|
|
5047
|
+
},
|
|
5048
|
+
evalRequiredExpression() {
|
|
5049
|
+
this.elements.forEach(ele => {
|
|
5050
|
+
// 优先使用顶层 required 表达式
|
|
5051
|
+
let requiredExpr = ele.required;
|
|
5052
|
+
// 如果顶层没有，则从 rules 中查找
|
|
5053
|
+
if (requiredExpr === undefined && ele.rules) {
|
|
5054
|
+
const requiredRule = ele.rules.find(r => r.required !== undefined);
|
|
5055
|
+
if (requiredRule) {
|
|
5056
|
+
requiredExpr = requiredRule.required;
|
|
5057
|
+
}
|
|
5058
|
+
}
|
|
5059
|
+
if (requiredExpr !== undefined) {
|
|
5060
|
+
const ret = this.executeExpression(requiredExpr);
|
|
5061
|
+
const oldRequired = ele._required;
|
|
5062
|
+
this.$set(ele, '_required', ret);
|
|
5063
|
+
// 初始化或状态变化时更新版本号，强制组件重新渲染
|
|
5064
|
+
if (oldRequired === undefined || oldRequired !== ret) {
|
|
5065
|
+
const currentVersion = ele._rulesVersion || 0;
|
|
5066
|
+
this.$set(ele, '_rulesVersion', currentVersion + 1);
|
|
5067
|
+
}
|
|
5068
|
+
}
|
|
5069
|
+
});
|
|
5010
5070
|
},
|
|
5011
5071
|
evalDisabledExpression() {
|
|
5012
5072
|
this.elements.forEach(ele => {
|
|
@@ -5030,12 +5090,13 @@ var script$w = {
|
|
|
5030
5090
|
executeExpression(expression) {
|
|
5031
5091
|
if (type.isBool(expression)) return expression;
|
|
5032
5092
|
if (type.isEmpty(expression)) return false;
|
|
5033
|
-
|
|
5034
|
-
...this.getFieldsValue(),
|
|
5093
|
+
const scope = {
|
|
5035
5094
|
...this.formModel,
|
|
5095
|
+
...this.getFieldsValue(),
|
|
5036
5096
|
_route: this.$route.query,
|
|
5037
5097
|
_routeMeta: this.$route.meta
|
|
5038
|
-
}
|
|
5098
|
+
};
|
|
5099
|
+
return parse$1(expression, scope);
|
|
5039
5100
|
},
|
|
5040
5101
|
onChange(value, props) {
|
|
5041
5102
|
const {
|
|
@@ -5122,16 +5183,24 @@ var __vue_render__$w = function () {
|
|
|
5122
5183
|
[
|
|
5123
5184
|
_vm._l(_vm.elements, function (ele) {
|
|
5124
5185
|
return [
|
|
5125
|
-
|
|
5186
|
+
ele._show
|
|
5126
5187
|
? _c(
|
|
5127
5188
|
"a-col",
|
|
5128
|
-
{
|
|
5189
|
+
{
|
|
5190
|
+
key: ele.name + "_" + (ele._rulesVersion || 0),
|
|
5191
|
+
attrs: { span: ele.span },
|
|
5192
|
+
},
|
|
5129
5193
|
[
|
|
5130
5194
|
ele.type == "ele-input" || ele.type == "Input"
|
|
5131
5195
|
? [
|
|
5132
5196
|
_c(
|
|
5133
5197
|
"a-form-item",
|
|
5134
|
-
{
|
|
5198
|
+
{
|
|
5199
|
+
attrs: {
|
|
5200
|
+
label: ele.label + "：",
|
|
5201
|
+
required: ele._required,
|
|
5202
|
+
},
|
|
5203
|
+
},
|
|
5135
5204
|
[
|
|
5136
5205
|
_c("ele-input", {
|
|
5137
5206
|
directives: [
|
|
@@ -5140,21 +5209,15 @@ var __vue_render__$w = function () {
|
|
|
5140
5209
|
rawName: "v-decorator",
|
|
5141
5210
|
value: [
|
|
5142
5211
|
ele.name,
|
|
5143
|
-
{
|
|
5144
|
-
rules: _vm.rebuildRules(
|
|
5145
|
-
ele.rules
|
|
5146
|
-
),
|
|
5147
|
-
},
|
|
5212
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5148
5213
|
],
|
|
5149
5214
|
expression:
|
|
5150
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5215
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5151
5216
|
},
|
|
5152
5217
|
],
|
|
5153
5218
|
staticStyle: { width: "100%" },
|
|
5154
5219
|
attrs: {
|
|
5155
|
-
disabled:
|
|
5156
|
-
ele._disabled
|
|
5157
|
-
),
|
|
5220
|
+
disabled: ele._disabled,
|
|
5158
5221
|
"max-length": ele.maxLength,
|
|
5159
5222
|
},
|
|
5160
5223
|
on: {
|
|
@@ -5172,7 +5235,12 @@ var __vue_render__$w = function () {
|
|
|
5172
5235
|
? [
|
|
5173
5236
|
_c(
|
|
5174
5237
|
"a-form-item",
|
|
5175
|
-
{
|
|
5238
|
+
{
|
|
5239
|
+
attrs: {
|
|
5240
|
+
label: ele.label + "：",
|
|
5241
|
+
required: ele._required,
|
|
5242
|
+
},
|
|
5243
|
+
},
|
|
5176
5244
|
[
|
|
5177
5245
|
_c("ele-textarea", {
|
|
5178
5246
|
directives: [
|
|
@@ -5181,23 +5249,17 @@ var __vue_render__$w = function () {
|
|
|
5181
5249
|
rawName: "v-decorator",
|
|
5182
5250
|
value: [
|
|
5183
5251
|
ele.name,
|
|
5184
|
-
{
|
|
5185
|
-
rules: _vm.rebuildRules(
|
|
5186
|
-
ele.rules
|
|
5187
|
-
),
|
|
5188
|
-
},
|
|
5252
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5189
5253
|
],
|
|
5190
5254
|
expression:
|
|
5191
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5255
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5192
5256
|
},
|
|
5193
5257
|
],
|
|
5194
5258
|
staticStyle: { width: "100%" },
|
|
5195
5259
|
attrs: {
|
|
5196
5260
|
"max-length": ele.maxLength,
|
|
5197
5261
|
autosize: ele.autosize,
|
|
5198
|
-
disabled:
|
|
5199
|
-
ele._disabled
|
|
5200
|
-
),
|
|
5262
|
+
disabled: ele._disabled,
|
|
5201
5263
|
"allow-clear": ele.allowClear,
|
|
5202
5264
|
placeholder: ele.placeholder,
|
|
5203
5265
|
},
|
|
@@ -5215,7 +5277,12 @@ var __vue_render__$w = function () {
|
|
|
5215
5277
|
? [
|
|
5216
5278
|
_c(
|
|
5217
5279
|
"a-form-item",
|
|
5218
|
-
{
|
|
5280
|
+
{
|
|
5281
|
+
attrs: {
|
|
5282
|
+
label: ele.label + "：",
|
|
5283
|
+
required: ele._required,
|
|
5284
|
+
},
|
|
5285
|
+
},
|
|
5219
5286
|
[
|
|
5220
5287
|
_c("ele-select", {
|
|
5221
5288
|
directives: [
|
|
@@ -5224,22 +5291,16 @@ var __vue_render__$w = function () {
|
|
|
5224
5291
|
rawName: "v-decorator",
|
|
5225
5292
|
value: [
|
|
5226
5293
|
ele.name,
|
|
5227
|
-
{
|
|
5228
|
-
rules: _vm.rebuildRules(
|
|
5229
|
-
ele.rules
|
|
5230
|
-
),
|
|
5231
|
-
},
|
|
5294
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5232
5295
|
],
|
|
5233
5296
|
expression:
|
|
5234
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5297
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5235
5298
|
},
|
|
5236
5299
|
],
|
|
5237
5300
|
staticStyle: { width: "100%" },
|
|
5238
5301
|
attrs: {
|
|
5239
5302
|
"data-source": ele.optionList,
|
|
5240
|
-
disabled:
|
|
5241
|
-
ele._disabled
|
|
5242
|
-
),
|
|
5303
|
+
disabled: ele._disabled,
|
|
5243
5304
|
multiple: ele.multiple,
|
|
5244
5305
|
mode: ele.mode,
|
|
5245
5306
|
code: ele.code,
|
|
@@ -5261,7 +5322,12 @@ var __vue_render__$w = function () {
|
|
|
5261
5322
|
? [
|
|
5262
5323
|
_c(
|
|
5263
5324
|
"a-form-item",
|
|
5264
|
-
{
|
|
5325
|
+
{
|
|
5326
|
+
attrs: {
|
|
5327
|
+
label: ele.label + "：",
|
|
5328
|
+
required: ele._required,
|
|
5329
|
+
},
|
|
5330
|
+
},
|
|
5265
5331
|
[
|
|
5266
5332
|
_c("ele-upload", {
|
|
5267
5333
|
directives: [
|
|
@@ -5270,14 +5336,10 @@ var __vue_render__$w = function () {
|
|
|
5270
5336
|
rawName: "v-decorator",
|
|
5271
5337
|
value: [
|
|
5272
5338
|
ele.name,
|
|
5273
|
-
{
|
|
5274
|
-
rules: _vm.rebuildRules(
|
|
5275
|
-
ele.rules
|
|
5276
|
-
),
|
|
5277
|
-
},
|
|
5339
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5278
5340
|
],
|
|
5279
5341
|
expression:
|
|
5280
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5342
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5281
5343
|
},
|
|
5282
5344
|
],
|
|
5283
5345
|
staticStyle: { width: "100%" },
|
|
@@ -5300,7 +5362,12 @@ var __vue_render__$w = function () {
|
|
|
5300
5362
|
? [
|
|
5301
5363
|
_c(
|
|
5302
5364
|
"a-form-item",
|
|
5303
|
-
{
|
|
5365
|
+
{
|
|
5366
|
+
attrs: {
|
|
5367
|
+
label: ele.label + "：",
|
|
5368
|
+
required: ele._required,
|
|
5369
|
+
},
|
|
5370
|
+
},
|
|
5304
5371
|
[
|
|
5305
5372
|
_c("ele-date-range", {
|
|
5306
5373
|
directives: [
|
|
@@ -5309,22 +5376,14 @@ var __vue_render__$w = function () {
|
|
|
5309
5376
|
rawName: "v-decorator",
|
|
5310
5377
|
value: [
|
|
5311
5378
|
ele.name,
|
|
5312
|
-
{
|
|
5313
|
-
rules: _vm.rebuildRules(
|
|
5314
|
-
ele.rules
|
|
5315
|
-
),
|
|
5316
|
-
},
|
|
5379
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5317
5380
|
],
|
|
5318
5381
|
expression:
|
|
5319
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5382
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5320
5383
|
},
|
|
5321
5384
|
],
|
|
5322
5385
|
staticStyle: { width: "100%" },
|
|
5323
|
-
attrs: {
|
|
5324
|
-
disabled: _vm.executeExpression(
|
|
5325
|
-
ele._disabled
|
|
5326
|
-
),
|
|
5327
|
-
},
|
|
5386
|
+
attrs: { disabled: ele._disabled },
|
|
5328
5387
|
}),
|
|
5329
5388
|
],
|
|
5330
5389
|
1
|
|
@@ -5334,7 +5393,12 @@ var __vue_render__$w = function () {
|
|
|
5334
5393
|
? [
|
|
5335
5394
|
_c(
|
|
5336
5395
|
"a-form-item",
|
|
5337
|
-
{
|
|
5396
|
+
{
|
|
5397
|
+
attrs: {
|
|
5398
|
+
label: ele.label + "：",
|
|
5399
|
+
required: ele._required,
|
|
5400
|
+
},
|
|
5401
|
+
},
|
|
5338
5402
|
[
|
|
5339
5403
|
_c("ele-date", {
|
|
5340
5404
|
directives: [
|
|
@@ -5343,14 +5407,10 @@ var __vue_render__$w = function () {
|
|
|
5343
5407
|
rawName: "v-decorator",
|
|
5344
5408
|
value: [
|
|
5345
5409
|
ele.name,
|
|
5346
|
-
{
|
|
5347
|
-
rules: _vm.rebuildRules(
|
|
5348
|
-
ele.rules
|
|
5349
|
-
),
|
|
5350
|
-
},
|
|
5410
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5351
5411
|
],
|
|
5352
5412
|
expression:
|
|
5353
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5413
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5354
5414
|
},
|
|
5355
5415
|
],
|
|
5356
5416
|
staticStyle: { width: "100%" },
|
|
@@ -5360,9 +5420,7 @@ var __vue_render__$w = function () {
|
|
|
5360
5420
|
"show-time": ele.showTime,
|
|
5361
5421
|
"show-today": ele.showToday,
|
|
5362
5422
|
"value-format": ele.valueFormat,
|
|
5363
|
-
disabled:
|
|
5364
|
-
ele._disabled
|
|
5365
|
-
),
|
|
5423
|
+
disabled: ele._disabled,
|
|
5366
5424
|
},
|
|
5367
5425
|
}),
|
|
5368
5426
|
],
|
|
@@ -5374,7 +5432,12 @@ var __vue_render__$w = function () {
|
|
|
5374
5432
|
? [
|
|
5375
5433
|
_c(
|
|
5376
5434
|
"a-form-item",
|
|
5377
|
-
{
|
|
5435
|
+
{
|
|
5436
|
+
attrs: {
|
|
5437
|
+
label: ele.label + "：",
|
|
5438
|
+
required: ele._required,
|
|
5439
|
+
},
|
|
5440
|
+
},
|
|
5378
5441
|
[
|
|
5379
5442
|
_c("ele-select-entity", {
|
|
5380
5443
|
directives: [
|
|
@@ -5383,14 +5446,10 @@ var __vue_render__$w = function () {
|
|
|
5383
5446
|
rawName: "v-decorator",
|
|
5384
5447
|
value: [
|
|
5385
5448
|
ele.name,
|
|
5386
|
-
{
|
|
5387
|
-
rules: _vm.rebuildRules(
|
|
5388
|
-
ele.rules
|
|
5389
|
-
),
|
|
5390
|
-
},
|
|
5449
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5391
5450
|
],
|
|
5392
5451
|
expression:
|
|
5393
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5452
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5394
5453
|
},
|
|
5395
5454
|
],
|
|
5396
5455
|
staticStyle: { width: "100%" },
|
|
@@ -5404,7 +5463,12 @@ var __vue_render__$w = function () {
|
|
|
5404
5463
|
? [
|
|
5405
5464
|
_c(
|
|
5406
5465
|
"a-form-item",
|
|
5407
|
-
{
|
|
5466
|
+
{
|
|
5467
|
+
attrs: {
|
|
5468
|
+
label: ele.label + "：",
|
|
5469
|
+
required: ele._required,
|
|
5470
|
+
},
|
|
5471
|
+
},
|
|
5408
5472
|
[
|
|
5409
5473
|
_c(
|
|
5410
5474
|
"ele-input-number",
|
|
@@ -5417,21 +5481,17 @@ var __vue_render__$w = function () {
|
|
|
5417
5481
|
value: [
|
|
5418
5482
|
ele.name,
|
|
5419
5483
|
{
|
|
5420
|
-
rules: _vm.rebuildRules(
|
|
5421
|
-
ele.rules
|
|
5422
|
-
),
|
|
5484
|
+
rules: _vm.rebuildRules(ele),
|
|
5423
5485
|
},
|
|
5424
5486
|
],
|
|
5425
5487
|
expression:
|
|
5426
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5488
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5427
5489
|
},
|
|
5428
5490
|
],
|
|
5429
5491
|
staticStyle: { width: "100%" },
|
|
5430
5492
|
attrs: {
|
|
5431
5493
|
precision: ele.precision,
|
|
5432
|
-
disabled:
|
|
5433
|
-
ele._disabled
|
|
5434
|
-
),
|
|
5494
|
+
disabled: ele._disabled,
|
|
5435
5495
|
},
|
|
5436
5496
|
on: {
|
|
5437
5497
|
change: function ($event) {
|
|
@@ -5453,7 +5513,12 @@ var __vue_render__$w = function () {
|
|
|
5453
5513
|
? [
|
|
5454
5514
|
_c(
|
|
5455
5515
|
"a-form-item",
|
|
5456
|
-
{
|
|
5516
|
+
{
|
|
5517
|
+
attrs: {
|
|
5518
|
+
label: ele.label + "：",
|
|
5519
|
+
required: ele._required,
|
|
5520
|
+
},
|
|
5521
|
+
},
|
|
5457
5522
|
[
|
|
5458
5523
|
_c("ele-checkbox", {
|
|
5459
5524
|
directives: [
|
|
@@ -5462,22 +5527,16 @@ var __vue_render__$w = function () {
|
|
|
5462
5527
|
rawName: "v-decorator",
|
|
5463
5528
|
value: [
|
|
5464
5529
|
ele.name,
|
|
5465
|
-
{
|
|
5466
|
-
rules: _vm.rebuildRules(
|
|
5467
|
-
ele.rules
|
|
5468
|
-
),
|
|
5469
|
-
},
|
|
5530
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5470
5531
|
],
|
|
5471
5532
|
expression:
|
|
5472
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5533
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5473
5534
|
},
|
|
5474
5535
|
],
|
|
5475
5536
|
staticStyle: { width: "100%" },
|
|
5476
5537
|
attrs: {
|
|
5477
5538
|
"data-source": ele.optionList,
|
|
5478
|
-
disabled:
|
|
5479
|
-
ele._disabled
|
|
5480
|
-
),
|
|
5539
|
+
disabled: ele._disabled,
|
|
5481
5540
|
},
|
|
5482
5541
|
}),
|
|
5483
5542
|
],
|
|
@@ -5488,7 +5547,12 @@ var __vue_render__$w = function () {
|
|
|
5488
5547
|
? [
|
|
5489
5548
|
_c(
|
|
5490
5549
|
"a-form-item",
|
|
5491
|
-
{
|
|
5550
|
+
{
|
|
5551
|
+
attrs: {
|
|
5552
|
+
label: ele.label + "：",
|
|
5553
|
+
required: ele._required,
|
|
5554
|
+
},
|
|
5555
|
+
},
|
|
5492
5556
|
[
|
|
5493
5557
|
_c("ele-radio", {
|
|
5494
5558
|
directives: [
|
|
@@ -5497,21 +5561,15 @@ var __vue_render__$w = function () {
|
|
|
5497
5561
|
rawName: "v-decorator",
|
|
5498
5562
|
value: [
|
|
5499
5563
|
ele.name,
|
|
5500
|
-
{
|
|
5501
|
-
rules: _vm.rebuildRules(
|
|
5502
|
-
ele.rules
|
|
5503
|
-
),
|
|
5504
|
-
},
|
|
5564
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5505
5565
|
],
|
|
5506
5566
|
expression:
|
|
5507
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5567
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5508
5568
|
},
|
|
5509
5569
|
],
|
|
5510
5570
|
staticStyle: { width: "100%" },
|
|
5511
5571
|
attrs: {
|
|
5512
|
-
disabled:
|
|
5513
|
-
ele._disabled
|
|
5514
|
-
),
|
|
5572
|
+
disabled: ele._disabled,
|
|
5515
5573
|
"data-source": ele.optionList,
|
|
5516
5574
|
},
|
|
5517
5575
|
on: {
|
|
@@ -5528,7 +5586,12 @@ var __vue_render__$w = function () {
|
|
|
5528
5586
|
? [
|
|
5529
5587
|
_c(
|
|
5530
5588
|
"a-form-item",
|
|
5531
|
-
{
|
|
5589
|
+
{
|
|
5590
|
+
attrs: {
|
|
5591
|
+
label: ele.label + "：",
|
|
5592
|
+
required: ele._required,
|
|
5593
|
+
},
|
|
5594
|
+
},
|
|
5532
5595
|
[
|
|
5533
5596
|
_c("ele-form-img-crop", {
|
|
5534
5597
|
directives: [
|
|
@@ -5537,14 +5600,10 @@ var __vue_render__$w = function () {
|
|
|
5537
5600
|
rawName: "v-decorator",
|
|
5538
5601
|
value: [
|
|
5539
5602
|
ele.name,
|
|
5540
|
-
{
|
|
5541
|
-
rules: _vm.rebuildRules(
|
|
5542
|
-
ele.rules
|
|
5543
|
-
),
|
|
5544
|
-
},
|
|
5603
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5545
5604
|
],
|
|
5546
5605
|
expression:
|
|
5547
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5606
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5548
5607
|
},
|
|
5549
5608
|
],
|
|
5550
5609
|
staticStyle: { width: "100%" },
|
|
@@ -5555,9 +5614,7 @@ var __vue_render__$w = function () {
|
|
|
5555
5614
|
"cropper-config": ele.cropperConfig,
|
|
5556
5615
|
uploadFileConfig: ele.uploadFileConfig,
|
|
5557
5616
|
"oper-text": ele.operText,
|
|
5558
|
-
disabled:
|
|
5559
|
-
ele._disabled
|
|
5560
|
-
),
|
|
5617
|
+
disabled: ele._disabled,
|
|
5561
5618
|
},
|
|
5562
5619
|
on: {
|
|
5563
5620
|
change: function ($event) {
|
|
@@ -5573,7 +5630,12 @@ var __vue_render__$w = function () {
|
|
|
5573
5630
|
? [
|
|
5574
5631
|
_c(
|
|
5575
5632
|
"a-form-item",
|
|
5576
|
-
{
|
|
5633
|
+
{
|
|
5634
|
+
attrs: {
|
|
5635
|
+
label: ele.label + "：",
|
|
5636
|
+
required: ele._required,
|
|
5637
|
+
},
|
|
5638
|
+
},
|
|
5577
5639
|
[
|
|
5578
5640
|
_c(
|
|
5579
5641
|
"ele-tree-select",
|
|
@@ -5586,21 +5648,15 @@ var __vue_render__$w = function () {
|
|
|
5586
5648
|
value: [
|
|
5587
5649
|
ele.name,
|
|
5588
5650
|
{
|
|
5589
|
-
rules: _vm.rebuildRules(
|
|
5590
|
-
ele.rules
|
|
5591
|
-
),
|
|
5651
|
+
rules: _vm.rebuildRules(ele),
|
|
5592
5652
|
},
|
|
5593
5653
|
],
|
|
5594
5654
|
expression:
|
|
5595
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5655
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5596
5656
|
},
|
|
5597
5657
|
],
|
|
5598
5658
|
staticStyle: { width: "100%" },
|
|
5599
|
-
attrs: {
|
|
5600
|
-
disabled: _vm.executeExpression(
|
|
5601
|
-
ele._disabled
|
|
5602
|
-
),
|
|
5603
|
-
},
|
|
5659
|
+
attrs: { disabled: ele._disabled },
|
|
5604
5660
|
on: {
|
|
5605
5661
|
change: function ($event) {
|
|
5606
5662
|
return _vm.onChange($event, ele)
|
|
@@ -5620,7 +5676,12 @@ var __vue_render__$w = function () {
|
|
|
5620
5676
|
? [
|
|
5621
5677
|
_c(
|
|
5622
5678
|
"a-form-item",
|
|
5623
|
-
{
|
|
5679
|
+
{
|
|
5680
|
+
attrs: {
|
|
5681
|
+
label: ele.label + "：",
|
|
5682
|
+
required: ele._required,
|
|
5683
|
+
},
|
|
5684
|
+
},
|
|
5624
5685
|
[
|
|
5625
5686
|
_c(
|
|
5626
5687
|
"ele-select-entity-modal-table",
|
|
@@ -5633,21 +5694,15 @@ var __vue_render__$w = function () {
|
|
|
5633
5694
|
value: [
|
|
5634
5695
|
ele.name,
|
|
5635
5696
|
{
|
|
5636
|
-
rules: _vm.rebuildRules(
|
|
5637
|
-
ele.rules
|
|
5638
|
-
),
|
|
5697
|
+
rules: _vm.rebuildRules(ele),
|
|
5639
5698
|
},
|
|
5640
5699
|
],
|
|
5641
5700
|
expression:
|
|
5642
|
-
"[ele.name, { rules: rebuildRules(ele
|
|
5701
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5643
5702
|
},
|
|
5644
5703
|
],
|
|
5645
5704
|
staticStyle: { width: "100%" },
|
|
5646
|
-
attrs: {
|
|
5647
|
-
disabled: _vm.executeExpression(
|
|
5648
|
-
ele._disabled
|
|
5649
|
-
),
|
|
5650
|
-
},
|
|
5705
|
+
attrs: { disabled: ele._disabled },
|
|
5651
5706
|
on: {
|
|
5652
5707
|
change: function ($event) {
|
|
5653
5708
|
return _vm.onChange($event, ele)
|
|
@@ -5686,11 +5741,11 @@ __vue_render__$w._withStripped = true;
|
|
|
5686
5741
|
/* style */
|
|
5687
5742
|
const __vue_inject_styles__$w = function (inject) {
|
|
5688
5743
|
if (!inject) return
|
|
5689
|
-
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 });
|
|
5744
|
+
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 });
|
|
5690
5745
|
|
|
5691
5746
|
};
|
|
5692
5747
|
/* scoped */
|
|
5693
|
-
const __vue_scope_id__$w = "data-v-
|
|
5748
|
+
const __vue_scope_id__$w = "data-v-7561ae99";
|
|
5694
5749
|
/* module identifier */
|
|
5695
5750
|
const __vue_module_identifier__$w = undefined;
|
|
5696
5751
|
/* functional template */
|