@tmagic/editor 1.3.14 → 1.3.15
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/tmagic-editor.js +44 -12
- package/dist/tmagic-editor.umd.cjs +43 -11
- package/package.json +11 -11
- package/src/fields/CodeSelect.vue +24 -3
- package/src/fields/CodeSelectCol.vue +6 -3
- package/src/fields/DataSourceMethodSelect.vue +22 -5
- package/src/fields/EventSelect.vue +2 -1
- package/src/type.ts +2 -0
- package/types/fields/CodeSelectCol.vue.d.ts +1 -1
- package/types/fields/DataSourceMethodSelect.vue.d.ts +1 -1
- package/types/type.d.ts +2 -0
package/dist/tmagic-editor.js
CHANGED
|
@@ -6,7 +6,7 @@ import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagi
|
|
|
6
6
|
import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
|
|
7
7
|
import * as monaco from 'monaco-editor';
|
|
8
8
|
import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
|
|
9
|
-
import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
|
|
9
|
+
import { MFormBox, MFormDrawer, MForm, filterFunction, createValues, MSelect } from '@tmagic/form';
|
|
10
10
|
import { MagicTable } from '@tmagic/table';
|
|
11
11
|
import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
|
|
12
12
|
import Gesto from 'gesto';
|
|
@@ -365,6 +365,9 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
|
365
365
|
title: (mForm, { model, index }) => {
|
|
366
366
|
if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
|
|
367
367
|
if (Array.isArray(model.codeId)) {
|
|
368
|
+
if (model.codeId.length < 2) {
|
|
369
|
+
return index;
|
|
370
|
+
}
|
|
368
371
|
const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
|
|
369
372
|
return `${ds?.title} / ${model.codeId[1]}`;
|
|
370
373
|
}
|
|
@@ -384,14 +387,31 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
|
384
387
|
{ value: HookCodeType.CODE, text: "代码块" },
|
|
385
388
|
{ value: HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
|
|
386
389
|
],
|
|
387
|
-
defaultValue: "code"
|
|
390
|
+
defaultValue: "code",
|
|
391
|
+
onChange: (mForm, v, { model }) => {
|
|
392
|
+
if (v === HookCodeType.DATA_SOURCE_METHOD) {
|
|
393
|
+
model.codeId = [];
|
|
394
|
+
} else {
|
|
395
|
+
model.codeId = "";
|
|
396
|
+
}
|
|
397
|
+
return v;
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
type: "code-select-col",
|
|
402
|
+
name: "codeId",
|
|
403
|
+
span: 16,
|
|
404
|
+
labelWidth: 0,
|
|
405
|
+
display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
|
|
406
|
+
notEditable: () => !services?.codeBlockService.getEditStatus()
|
|
388
407
|
},
|
|
389
408
|
{
|
|
390
|
-
type:
|
|
409
|
+
type: "data-source-method-select",
|
|
391
410
|
name: "codeId",
|
|
392
411
|
span: 16,
|
|
393
412
|
labelWidth: 0,
|
|
394
|
-
|
|
413
|
+
display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
|
|
414
|
+
notEditable: () => !services?.dataSourceService.get("editable")
|
|
395
415
|
}
|
|
396
416
|
]
|
|
397
417
|
}
|
|
@@ -3412,8 +3432,10 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
|
3412
3432
|
},
|
|
3413
3433
|
emits: ["change"],
|
|
3414
3434
|
setup(__props, { emit: __emit }) {
|
|
3435
|
+
const mForm = inject("mForm");
|
|
3415
3436
|
const services = inject("services");
|
|
3416
3437
|
const emit = __emit;
|
|
3438
|
+
const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
|
|
3417
3439
|
const props = __props;
|
|
3418
3440
|
const getParamItemsConfig = (codeId) => {
|
|
3419
3441
|
if (!codeDsl.value || !codeId)
|
|
@@ -3440,6 +3462,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
|
3440
3462
|
const selectConfig = {
|
|
3441
3463
|
type: "select",
|
|
3442
3464
|
name: props.name,
|
|
3465
|
+
disable: props.disabled,
|
|
3443
3466
|
options: () => {
|
|
3444
3467
|
if (codeDsl.value) {
|
|
3445
3468
|
return map(codeDsl.value, (value, key) => ({
|
|
@@ -3479,7 +3502,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
|
3479
3502
|
_ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
|
|
3480
3503
|
key: 0,
|
|
3481
3504
|
class: "icon",
|
|
3482
|
-
icon: !
|
|
3505
|
+
icon: !notEditable.value ? unref(Edit) : unref(View),
|
|
3483
3506
|
onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
|
|
3484
3507
|
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
3485
3508
|
]),
|
|
@@ -3495,7 +3518,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
|
3495
3518
|
key: 1,
|
|
3496
3519
|
ref_key: "codeBlockEditor",
|
|
3497
3520
|
ref: codeBlockEditor,
|
|
3498
|
-
disabled:
|
|
3521
|
+
disabled: notEditable.value,
|
|
3499
3522
|
content: unref(codeConfig),
|
|
3500
3523
|
onSubmit: unref(submitCodeBlockHandler)
|
|
3501
3524
|
}, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
|
|
@@ -4290,15 +4313,22 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
|
4290
4313
|
},
|
|
4291
4314
|
emits: ["change"],
|
|
4292
4315
|
setup(__props, { emit: __emit }) {
|
|
4316
|
+
const mForm = inject("mForm");
|
|
4293
4317
|
const services = inject("services");
|
|
4294
4318
|
const emit = __emit;
|
|
4295
4319
|
const dataSourceService = services?.dataSourceService;
|
|
4296
4320
|
const props = __props;
|
|
4321
|
+
const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
|
|
4297
4322
|
const dataSources = computed(() => dataSourceService?.get("dataSources"));
|
|
4298
|
-
const
|
|
4323
|
+
const isCustomMethod = computed(() => {
|
|
4324
|
+
const [id, name] = props.model[props.name];
|
|
4325
|
+
const dataSource = dataSourceService?.getDataSourceById(id);
|
|
4326
|
+
return Boolean(dataSource?.methods.find((method) => method.name === name));
|
|
4327
|
+
});
|
|
4328
|
+
const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
|
|
4299
4329
|
if (!dataSourceId)
|
|
4300
4330
|
return [];
|
|
4301
|
-
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name ===
|
|
4331
|
+
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
|
|
4302
4332
|
if (!paramStatements)
|
|
4303
4333
|
return [];
|
|
4304
4334
|
return paramStatements.map((paramState) => ({
|
|
@@ -4332,6 +4362,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
|
4332
4362
|
type: "cascader",
|
|
4333
4363
|
name: props.name,
|
|
4334
4364
|
options: methodsOptions.value,
|
|
4365
|
+
disable: props.disabled,
|
|
4335
4366
|
onChange: (formState, dataSourceMethod) => {
|
|
4336
4367
|
setParamsConfig(dataSourceMethod, formState);
|
|
4337
4368
|
return dataSourceMethod;
|
|
@@ -4363,10 +4394,10 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
|
4363
4394
|
model: _ctx.model,
|
|
4364
4395
|
onChange: onChangeHandler
|
|
4365
4396
|
}, null, 8, ["config", "model"]),
|
|
4366
|
-
_ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$O, {
|
|
4397
|
+
_ctx.model[_ctx.name] && isCustomMethod.value ? (openBlock(), createBlock(_sfc_main$O, {
|
|
4367
4398
|
key: 0,
|
|
4368
4399
|
class: "icon",
|
|
4369
|
-
icon: !
|
|
4400
|
+
icon: !notEditable.value ? unref(Edit) : unref(View),
|
|
4370
4401
|
onClick: editCodeHandler
|
|
4371
4402
|
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
4372
4403
|
]),
|
|
@@ -4383,7 +4414,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
|
4383
4414
|
key: 1,
|
|
4384
4415
|
ref_key: "codeBlockEditor",
|
|
4385
4416
|
ref: codeBlockEditor,
|
|
4386
|
-
disabled:
|
|
4417
|
+
disabled: notEditable.value,
|
|
4387
4418
|
content: unref(codeConfig),
|
|
4388
4419
|
onSubmit: submitCodeBlockHandler
|
|
4389
4420
|
}, null, 8, ["disabled", "content"])) : createCommentVNode("", true)
|
|
@@ -4796,7 +4827,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
4796
4827
|
type: "code-select-col",
|
|
4797
4828
|
text: "代码块",
|
|
4798
4829
|
name: "codeId",
|
|
4799
|
-
|
|
4830
|
+
notEditable: () => !codeBlockService?.getEditStatus(),
|
|
4800
4831
|
display: (mForm, { model }) => model.actionType === ActionType.CODE
|
|
4801
4832
|
};
|
|
4802
4833
|
return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
|
|
@@ -4806,6 +4837,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
4806
4837
|
type: "data-source-method-select",
|
|
4807
4838
|
text: "数据源方法",
|
|
4808
4839
|
name: "dataSourceMethod",
|
|
4840
|
+
notEditable: () => !services?.dataSourceService.get("editable"),
|
|
4809
4841
|
display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE
|
|
4810
4842
|
};
|
|
4811
4843
|
return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
|
|
@@ -370,6 +370,9 @@
|
|
|
370
370
|
title: (mForm, { model, index }) => {
|
|
371
371
|
if (model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD) {
|
|
372
372
|
if (Array.isArray(model.codeId)) {
|
|
373
|
+
if (model.codeId.length < 2) {
|
|
374
|
+
return index;
|
|
375
|
+
}
|
|
373
376
|
const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
|
|
374
377
|
return `${ds?.title} / ${model.codeId[1]}`;
|
|
375
378
|
}
|
|
@@ -389,14 +392,31 @@
|
|
|
389
392
|
{ value: schema.HookCodeType.CODE, text: "代码块" },
|
|
390
393
|
{ value: schema.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
|
|
391
394
|
],
|
|
392
|
-
defaultValue: "code"
|
|
395
|
+
defaultValue: "code",
|
|
396
|
+
onChange: (mForm, v, { model }) => {
|
|
397
|
+
if (v === schema.HookCodeType.DATA_SOURCE_METHOD) {
|
|
398
|
+
model.codeId = [];
|
|
399
|
+
} else {
|
|
400
|
+
model.codeId = "";
|
|
401
|
+
}
|
|
402
|
+
return v;
|
|
403
|
+
}
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
type: "code-select-col",
|
|
407
|
+
name: "codeId",
|
|
408
|
+
span: 16,
|
|
409
|
+
labelWidth: 0,
|
|
410
|
+
display: (mForm, { model }) => model.codeType !== schema.HookCodeType.DATA_SOURCE_METHOD,
|
|
411
|
+
notEditable: () => !services?.codeBlockService.getEditStatus()
|
|
393
412
|
},
|
|
394
413
|
{
|
|
395
|
-
type:
|
|
414
|
+
type: "data-source-method-select",
|
|
396
415
|
name: "codeId",
|
|
397
416
|
span: 16,
|
|
398
417
|
labelWidth: 0,
|
|
399
|
-
|
|
418
|
+
display: (mForm, { model }) => model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD,
|
|
419
|
+
notEditable: () => !services?.dataSourceService.get("editable")
|
|
400
420
|
}
|
|
401
421
|
]
|
|
402
422
|
}
|
|
@@ -3417,8 +3437,10 @@
|
|
|
3417
3437
|
},
|
|
3418
3438
|
emits: ["change"],
|
|
3419
3439
|
setup(__props, { emit: __emit }) {
|
|
3440
|
+
const mForm = vue.inject("mForm");
|
|
3420
3441
|
const services = vue.inject("services");
|
|
3421
3442
|
const emit = __emit;
|
|
3443
|
+
const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
|
|
3422
3444
|
const props = __props;
|
|
3423
3445
|
const getParamItemsConfig = (codeId) => {
|
|
3424
3446
|
if (!codeDsl.value || !codeId)
|
|
@@ -3445,6 +3467,7 @@
|
|
|
3445
3467
|
const selectConfig = {
|
|
3446
3468
|
type: "select",
|
|
3447
3469
|
name: props.name,
|
|
3470
|
+
disable: props.disabled,
|
|
3448
3471
|
options: () => {
|
|
3449
3472
|
if (codeDsl.value) {
|
|
3450
3473
|
return lodashEs.map(codeDsl.value, (value, key) => ({
|
|
@@ -3484,7 +3507,7 @@
|
|
|
3484
3507
|
_ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
|
|
3485
3508
|
key: 0,
|
|
3486
3509
|
class: "icon",
|
|
3487
|
-
icon: !
|
|
3510
|
+
icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
|
|
3488
3511
|
onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
|
|
3489
3512
|
}, null, 8, ["icon"])) : vue.createCommentVNode("", true)
|
|
3490
3513
|
]),
|
|
@@ -3500,7 +3523,7 @@
|
|
|
3500
3523
|
key: 1,
|
|
3501
3524
|
ref_key: "codeBlockEditor",
|
|
3502
3525
|
ref: codeBlockEditor,
|
|
3503
|
-
disabled:
|
|
3526
|
+
disabled: notEditable.value,
|
|
3504
3527
|
content: vue.unref(codeConfig),
|
|
3505
3528
|
onSubmit: vue.unref(submitCodeBlockHandler)
|
|
3506
3529
|
}, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true)
|
|
@@ -4295,15 +4318,22 @@
|
|
|
4295
4318
|
},
|
|
4296
4319
|
emits: ["change"],
|
|
4297
4320
|
setup(__props, { emit: __emit }) {
|
|
4321
|
+
const mForm = vue.inject("mForm");
|
|
4298
4322
|
const services = vue.inject("services");
|
|
4299
4323
|
const emit = __emit;
|
|
4300
4324
|
const dataSourceService = services?.dataSourceService;
|
|
4301
4325
|
const props = __props;
|
|
4326
|
+
const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
|
|
4302
4327
|
const dataSources = vue.computed(() => dataSourceService?.get("dataSources"));
|
|
4303
|
-
const
|
|
4328
|
+
const isCustomMethod = vue.computed(() => {
|
|
4329
|
+
const [id, name] = props.model[props.name];
|
|
4330
|
+
const dataSource = dataSourceService?.getDataSourceById(id);
|
|
4331
|
+
return Boolean(dataSource?.methods.find((method) => method.name === name));
|
|
4332
|
+
});
|
|
4333
|
+
const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
|
|
4304
4334
|
if (!dataSourceId)
|
|
4305
4335
|
return [];
|
|
4306
|
-
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name ===
|
|
4336
|
+
const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
|
|
4307
4337
|
if (!paramStatements)
|
|
4308
4338
|
return [];
|
|
4309
4339
|
return paramStatements.map((paramState) => ({
|
|
@@ -4337,6 +4367,7 @@
|
|
|
4337
4367
|
type: "cascader",
|
|
4338
4368
|
name: props.name,
|
|
4339
4369
|
options: methodsOptions.value,
|
|
4370
|
+
disable: props.disabled,
|
|
4340
4371
|
onChange: (formState, dataSourceMethod) => {
|
|
4341
4372
|
setParamsConfig(dataSourceMethod, formState);
|
|
4342
4373
|
return dataSourceMethod;
|
|
@@ -4368,10 +4399,10 @@
|
|
|
4368
4399
|
model: _ctx.model,
|
|
4369
4400
|
onChange: onChangeHandler
|
|
4370
4401
|
}, null, 8, ["config", "model"]),
|
|
4371
|
-
_ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
|
|
4402
|
+
_ctx.model[_ctx.name] && isCustomMethod.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
|
|
4372
4403
|
key: 0,
|
|
4373
4404
|
class: "icon",
|
|
4374
|
-
icon: !
|
|
4405
|
+
icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
|
|
4375
4406
|
onClick: editCodeHandler
|
|
4376
4407
|
}, null, 8, ["icon"])) : vue.createCommentVNode("", true)
|
|
4377
4408
|
]),
|
|
@@ -4388,7 +4419,7 @@
|
|
|
4388
4419
|
key: 1,
|
|
4389
4420
|
ref_key: "codeBlockEditor",
|
|
4390
4421
|
ref: codeBlockEditor,
|
|
4391
|
-
disabled:
|
|
4422
|
+
disabled: notEditable.value,
|
|
4392
4423
|
content: vue.unref(codeConfig),
|
|
4393
4424
|
onSubmit: submitCodeBlockHandler
|
|
4394
4425
|
}, null, 8, ["disabled", "content"])) : vue.createCommentVNode("", true)
|
|
@@ -4801,7 +4832,7 @@
|
|
|
4801
4832
|
type: "code-select-col",
|
|
4802
4833
|
text: "代码块",
|
|
4803
4834
|
name: "codeId",
|
|
4804
|
-
|
|
4835
|
+
notEditable: () => !codeBlockService?.getEditStatus(),
|
|
4805
4836
|
display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
|
|
4806
4837
|
};
|
|
4807
4838
|
return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
|
|
@@ -4811,6 +4842,7 @@
|
|
|
4811
4842
|
type: "data-source-method-select",
|
|
4812
4843
|
text: "数据源方法",
|
|
4813
4844
|
name: "dataSourceMethod",
|
|
4845
|
+
notEditable: () => !services?.dataSourceService.get("editable"),
|
|
4814
4846
|
display: (mForm, { model }) => model.actionType === schema.ActionType.DATA_SOURCE
|
|
4815
4847
|
};
|
|
4816
4848
|
return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.3.
|
|
2
|
+
"version": "1.3.15",
|
|
3
3
|
"name": "@tmagic/editor",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": [
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@babel/core": "^7.18.0",
|
|
44
44
|
"@element-plus/icons-vue": "^2.3.1",
|
|
45
|
-
"@tmagic/core": "1.3.
|
|
46
|
-
"@tmagic/dep": "1.3.
|
|
47
|
-
"@tmagic/design": "1.3.
|
|
48
|
-
"@tmagic/form": "1.3.
|
|
49
|
-
"@tmagic/schema": "1.3.
|
|
50
|
-
"@tmagic/stage": "1.3.
|
|
51
|
-
"@tmagic/table": "1.3.
|
|
52
|
-
"@tmagic/utils": "1.3.
|
|
45
|
+
"@tmagic/core": "1.3.15",
|
|
46
|
+
"@tmagic/dep": "1.3.15",
|
|
47
|
+
"@tmagic/design": "1.3.15",
|
|
48
|
+
"@tmagic/form": "1.3.15",
|
|
49
|
+
"@tmagic/schema": "1.3.15",
|
|
50
|
+
"@tmagic/stage": "1.3.15",
|
|
51
|
+
"@tmagic/table": "1.3.15",
|
|
52
|
+
"@tmagic/utils": "1.3.15",
|
|
53
53
|
"buffer": "^6.0.3",
|
|
54
54
|
"color": "^3.1.3",
|
|
55
55
|
"emmet-monaco-es": "^5.3.0",
|
|
@@ -63,8 +63,8 @@
|
|
|
63
63
|
"vue": "^3.3.8"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
|
-
"@tmagic/design": "1.3.
|
|
67
|
-
"@tmagic/form": "1.3.
|
|
66
|
+
"@tmagic/design": "1.3.15",
|
|
67
|
+
"@tmagic/form": "1.3.15",
|
|
68
68
|
"monaco-editor": "^0.41.0",
|
|
69
69
|
"vue": "^3.3.8"
|
|
70
70
|
},
|
|
@@ -42,6 +42,10 @@ const codeConfig = computed(() => ({
|
|
|
42
42
|
title: (mForm: FormState, { model, index }: any) => {
|
|
43
43
|
if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
|
|
44
44
|
if (Array.isArray(model.codeId)) {
|
|
45
|
+
if (model.codeId.length < 2) {
|
|
46
|
+
return index;
|
|
47
|
+
}
|
|
48
|
+
|
|
45
49
|
const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
|
|
46
50
|
return `${ds?.title} / ${model.codeId[1]}`;
|
|
47
51
|
}
|
|
@@ -63,14 +67,31 @@ const codeConfig = computed(() => ({
|
|
|
63
67
|
{ value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
|
|
64
68
|
],
|
|
65
69
|
defaultValue: 'code',
|
|
70
|
+
onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
|
|
71
|
+
if (v === HookCodeType.DATA_SOURCE_METHOD) {
|
|
72
|
+
model.codeId = [];
|
|
73
|
+
} else {
|
|
74
|
+
model.codeId = '';
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return v;
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
type: 'code-select-col',
|
|
82
|
+
name: 'codeId',
|
|
83
|
+
span: 16,
|
|
84
|
+
labelWidth: 0,
|
|
85
|
+
display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
|
|
86
|
+
notEditable: () => !services?.codeBlockService.getEditStatus(),
|
|
66
87
|
},
|
|
67
88
|
{
|
|
68
|
-
type:
|
|
69
|
-
model.codeType === HookCodeType.DATA_SOURCE_METHOD ? 'data-source-method-select' : 'code-select-col',
|
|
89
|
+
type: 'data-source-method-select',
|
|
70
90
|
name: 'codeId',
|
|
71
91
|
span: 16,
|
|
72
92
|
labelWidth: 0,
|
|
73
|
-
|
|
93
|
+
display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
|
|
94
|
+
notEditable: () => !services?.dataSourceService.get('editable'),
|
|
74
95
|
},
|
|
75
96
|
],
|
|
76
97
|
},
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
@change="onParamsChangeHandler"
|
|
11
11
|
></m-form-container>
|
|
12
12
|
<!-- 查看/编辑按钮 -->
|
|
13
|
-
<Icon v-if="model[name]" class="icon" :icon="!
|
|
13
|
+
<Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
|
|
14
14
|
</div>
|
|
15
15
|
|
|
16
16
|
<!-- 参数填写框 -->
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<CodeBlockEditor
|
|
28
28
|
ref="codeBlockEditor"
|
|
29
29
|
v-if="codeConfig"
|
|
30
|
-
:disabled="
|
|
30
|
+
:disabled="notEditable"
|
|
31
31
|
:content="codeConfig"
|
|
32
32
|
@submit="submitCodeBlockHandler"
|
|
33
33
|
></CodeBlockEditor>
|
|
@@ -39,7 +39,7 @@ import { computed, inject, ref, watch } from 'vue';
|
|
|
39
39
|
import { Edit, View } from '@element-plus/icons-vue';
|
|
40
40
|
import { isEmpty, map } from 'lodash-es';
|
|
41
41
|
|
|
42
|
-
import { createValues, FieldProps } from '@tmagic/form';
|
|
42
|
+
import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
|
|
43
43
|
import type { Id } from '@tmagic/schema';
|
|
44
44
|
|
|
45
45
|
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
|
|
@@ -52,9 +52,11 @@ defineOptions({
|
|
|
52
52
|
name: 'MEditorCodeSelectCol',
|
|
53
53
|
});
|
|
54
54
|
|
|
55
|
+
const mForm = inject<FormState | undefined>('mForm');
|
|
55
56
|
const services = inject<Services>('services');
|
|
56
57
|
const emit = defineEmits(['change']);
|
|
57
58
|
|
|
59
|
+
const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
|
|
58
60
|
const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
|
|
59
61
|
disabled: false,
|
|
60
62
|
});
|
|
@@ -92,6 +94,7 @@ watch(
|
|
|
92
94
|
const selectConfig = {
|
|
93
95
|
type: 'select',
|
|
94
96
|
name: props.name,
|
|
97
|
+
disable: props.disabled,
|
|
95
98
|
options: () => {
|
|
96
99
|
if (codeDsl.value) {
|
|
97
100
|
return map(codeDsl.value, (value, key) => ({
|
|
@@ -7,7 +7,12 @@
|
|
|
7
7
|
:model="model"
|
|
8
8
|
@change="onChangeHandler"
|
|
9
9
|
></m-form-container>
|
|
10
|
-
<Icon
|
|
10
|
+
<Icon
|
|
11
|
+
v-if="model[name] && isCustomMethod"
|
|
12
|
+
class="icon"
|
|
13
|
+
:icon="!notEditable ? Edit : View"
|
|
14
|
+
@click="editCodeHandler"
|
|
15
|
+
></Icon>
|
|
11
16
|
</div>
|
|
12
17
|
|
|
13
18
|
<CodeParams
|
|
@@ -23,7 +28,7 @@
|
|
|
23
28
|
<CodeBlockEditor
|
|
24
29
|
ref="codeBlockEditor"
|
|
25
30
|
v-if="codeConfig"
|
|
26
|
-
:disabled="
|
|
31
|
+
:disabled="notEditable"
|
|
27
32
|
:content="codeConfig"
|
|
28
33
|
@submit="submitCodeBlockHandler"
|
|
29
34
|
></CodeBlockEditor>
|
|
@@ -34,7 +39,7 @@
|
|
|
34
39
|
import { computed, inject, ref } from 'vue';
|
|
35
40
|
import { Edit, View } from '@element-plus/icons-vue';
|
|
36
41
|
|
|
37
|
-
import { createValues, FieldProps } from '@tmagic/form';
|
|
42
|
+
import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
|
|
38
43
|
import type { CodeBlockContent, Id } from '@tmagic/schema';
|
|
39
44
|
|
|
40
45
|
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
|
|
@@ -47,6 +52,7 @@ defineOptions({
|
|
|
47
52
|
name: 'MEditorDataSourceMethodSelect',
|
|
48
53
|
});
|
|
49
54
|
|
|
55
|
+
const mForm = inject<FormState | undefined>('mForm');
|
|
50
56
|
const services = inject<Services>('services');
|
|
51
57
|
const emit = defineEmits(['change']);
|
|
52
58
|
|
|
@@ -56,14 +62,24 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
|
|
|
56
62
|
disabled: false,
|
|
57
63
|
});
|
|
58
64
|
|
|
65
|
+
const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
|
|
66
|
+
|
|
59
67
|
const dataSources = computed(() => dataSourceService?.get('dataSources'));
|
|
60
68
|
|
|
61
|
-
const
|
|
69
|
+
const isCustomMethod = computed(() => {
|
|
70
|
+
const [id, name] = props.model[props.name];
|
|
71
|
+
|
|
72
|
+
const dataSource = dataSourceService?.getDataSourceById(id);
|
|
73
|
+
|
|
74
|
+
return Boolean(dataSource?.methods.find((method) => method.name === name));
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
|
|
62
78
|
if (!dataSourceId) return [];
|
|
63
79
|
|
|
64
80
|
const paramStatements = dataSources.value
|
|
65
81
|
?.find((item) => item.id === dataSourceId)
|
|
66
|
-
?.methods?.find((item) => item.name ===
|
|
82
|
+
?.methods?.find((item) => item.name === methodName)?.params;
|
|
67
83
|
|
|
68
84
|
if (!paramStatements) return [];
|
|
69
85
|
|
|
@@ -107,6 +123,7 @@ const cascaderConfig = computed(() => ({
|
|
|
107
123
|
type: 'cascader',
|
|
108
124
|
name: props.name,
|
|
109
125
|
options: methodsOptions.value,
|
|
126
|
+
disable: props.disabled,
|
|
110
127
|
onChange: (formState: any, dataSourceMethod: [Id, string]) => {
|
|
111
128
|
setParamsConfig(dataSourceMethod, formState);
|
|
112
129
|
|
|
@@ -171,7 +171,7 @@ const codeActionConfig = computed(() => {
|
|
|
171
171
|
type: 'code-select-col',
|
|
172
172
|
text: '代码块',
|
|
173
173
|
name: 'codeId',
|
|
174
|
-
|
|
174
|
+
notEditable: () => !codeBlockService?.getEditStatus(),
|
|
175
175
|
display: (mForm, { model }) => model.actionType === ActionType.CODE,
|
|
176
176
|
};
|
|
177
177
|
return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
|
|
@@ -183,6 +183,7 @@ const dataSourceActionConfig = computed(() => {
|
|
|
183
183
|
type: 'data-source-method-select',
|
|
184
184
|
text: '数据源方法',
|
|
185
185
|
name: 'dataSourceMethod',
|
|
186
|
+
notEditable: () => !services?.dataSourceService.get('editable'),
|
|
186
187
|
display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
|
|
187
188
|
};
|
|
188
189
|
return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
|
package/src/type.ts
CHANGED
|
@@ -600,6 +600,7 @@ export interface CodeSelectColConfig {
|
|
|
600
600
|
text: string;
|
|
601
601
|
labelWidth?: number | string;
|
|
602
602
|
disabled?: boolean | FilterFunction;
|
|
603
|
+
notEditable?: boolean | FilterFunction;
|
|
603
604
|
display?: boolean | FilterFunction;
|
|
604
605
|
}
|
|
605
606
|
|
|
@@ -618,6 +619,7 @@ export interface DataSourceMethodSelectConfig {
|
|
|
618
619
|
text: string;
|
|
619
620
|
labelWidth?: number | string;
|
|
620
621
|
disabled?: boolean | FilterFunction;
|
|
622
|
+
notEditable?: boolean | FilterFunction;
|
|
621
623
|
display?: boolean | FilterFunction;
|
|
622
624
|
}
|
|
623
625
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FieldProps } from '@tmagic/form';
|
|
1
|
+
import { type FieldProps } from '@tmagic/form';
|
|
2
2
|
import type { CodeSelectColConfig } from '../type';
|
|
3
3
|
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<CodeSelectColConfig>>, {
|
|
4
4
|
disabled: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FieldProps } from '@tmagic/form';
|
|
1
|
+
import { type FieldProps } from '@tmagic/form';
|
|
2
2
|
import type { DataSourceMethodSelectConfig } from '../type';
|
|
3
3
|
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<DataSourceMethodSelectConfig>>, {
|
|
4
4
|
disabled: boolean;
|
package/types/type.d.ts
CHANGED
|
@@ -511,6 +511,7 @@ export interface CodeSelectColConfig {
|
|
|
511
511
|
text: string;
|
|
512
512
|
labelWidth?: number | string;
|
|
513
513
|
disabled?: boolean | FilterFunction;
|
|
514
|
+
notEditable?: boolean | FilterFunction;
|
|
514
515
|
display?: boolean | FilterFunction;
|
|
515
516
|
}
|
|
516
517
|
export interface PageFragmentSelectConfig {
|
|
@@ -527,6 +528,7 @@ export interface DataSourceMethodSelectConfig {
|
|
|
527
528
|
text: string;
|
|
528
529
|
labelWidth?: number | string;
|
|
529
530
|
disabled?: boolean | FilterFunction;
|
|
531
|
+
notEditable?: boolean | FilterFunction;
|
|
530
532
|
display?: boolean | FilterFunction;
|
|
531
533
|
}
|
|
532
534
|
export interface DataSourceFieldSelectConfig {
|