94 changed files with 1991 additions and 1428 deletions
@ -0,0 +1,390 @@ |
|||
import { ref, computed } from 'vue'; |
|||
import { axios, Environment, $t, Tools, EnumTools, Options } from 'platform-core'; |
|||
import { Processor } from '../Processor'; |
|||
import { PlaceHolder } from '@/utils/PlaceHolder'; |
|||
|
|||
class HttpRequest extends Processor { |
|||
#editorDialogWidth: number = 1280; |
|||
#HttpMethodTypeEnum: any; |
|||
#httpMethodTypeOptionsRef = ref(<any>[]); |
|||
#parameterOptionsRef = ref(<any>[]); |
|||
#sqlQueryResultFieldsRef = ref(<any>[]); |
|||
#editorForm: any; |
|||
|
|||
constructor(targetType: string, context?: any) { |
|||
super(targetType, context); |
|||
EnumTools.fetch(['io.sc.engine.rule.core.enums.HttpMethodType']).then((value) => { |
|||
this.#HttpMethodTypeEnum = value.HttpMethodType; |
|||
this.#httpMethodTypeOptionsRef = Options.enum(this.#HttpMethodTypeEnum); |
|||
}); |
|||
if (this.targetType === Processor.PARAMETER) { |
|||
axios.get(Environment.apiContextPath('/api/re/model/parameter/listParemtersByParameterId/' + this.context.target.id)).then((response) => { |
|||
this.#parameterOptionsRef.value = Tools.objects2Options(response.data, 'name', 'code'); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public getToolbarAction(): any { |
|||
return { |
|||
extend: 'add', |
|||
name: 'http', |
|||
label: $t('io.sc.engine.rule.core.enums.ProcessorType.HTTP_REQUEST'), |
|||
icon: 'sync_alt', |
|||
enableIf: (args: any) => { |
|||
const type = this.context.target.type; |
|||
return type !== 'RULE_RESULT' && type !== 'SINGLE_RULE_RESULT'; |
|||
}, |
|||
afterClick: (args: any) => { |
|||
args.grid.getEditorForm().setFieldValue('type', 'HTTP_REQUEST'); |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
public format(row: any): any { |
|||
return { |
|||
componentType: 'w-code-mirror', |
|||
attrs: { |
|||
lang: 'sql', |
|||
rows: 4, |
|||
editable: false, |
|||
modelValue: row.sql, |
|||
placeholder: true, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
public getEditorFields(): any { |
|||
return [ |
|||
{ |
|||
colSpan: 2, |
|||
name: 'httpMethod', |
|||
label: $t('re.resources.designer.processor.grid.entity.httpMethod'), |
|||
type: 'w-select', |
|||
clearable: true, |
|||
options: this.#httpMethodTypeOptionsRef, |
|||
rows: 1, |
|||
showIf: (args: any) => { |
|||
return 'HTTP_REQUEST' === args.form.getFieldValue('type'); |
|||
}, |
|||
}, |
|||
{ |
|||
colSpan: 5, |
|||
name: 'sql', |
|||
label: $t('re.resources.designer.processor.grid.entity.httpUrl'), |
|||
type: 'w-text', |
|||
showIf: (args: any) => { |
|||
return 'HTTP_REQUEST' === args.form.getFieldValue('type'); |
|||
}, |
|||
}, |
|||
{ |
|||
colSpan: 3, |
|||
name: 'sqlParameterValues', |
|||
label: $t('re.resources.designer.processor.grid.entity.sqlParameterValues'), |
|||
showIf: (args: any) => { |
|||
return 'SQL' === args.form.getFieldValue('type'); |
|||
}, |
|||
type: 'w-grid', |
|||
height: 150, |
|||
title: $t('re.resources.designer.processor.grid.entity.sqlParameterValues'), |
|||
autoFetchData: false, |
|||
dense: true, |
|||
dbClickOperation: 'edit', |
|||
dndMode: 'local', |
|||
pageable: false, |
|||
configButton: false, |
|||
toolbarConfigure: { noIcon: false }, |
|||
toolbarActions: [ |
|||
{ |
|||
name: 'analyze', |
|||
label: $t('analyze'), |
|||
icon: 'bi-tag', |
|||
click: (args: any) => { |
|||
const sql = args.grid.getEditorForm().getFieldValue('sql'); |
|||
const regex = /\$\{[\u0000-\uFFFF]+?\}/g; |
|||
const array: any[] = sql.match(regex); |
|||
const rows: any[] = []; |
|||
array.forEach((item) => { |
|||
rows.push({ name: item, value: '' }); |
|||
}); |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlParameterValues'); |
|||
grid.setLocalData(rows); |
|||
}, |
|||
}, |
|||
'separator', |
|||
'add', |
|||
'edit', |
|||
[ |
|||
{ |
|||
extend: 'remove', |
|||
click: (args: any) => { |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlParameterValues'); |
|||
grid.removeRows(args.selecteds); |
|||
}, |
|||
}, |
|||
{ |
|||
extend: 'remove', |
|||
name: 'removeAll', |
|||
label: $t('deleteAll'), |
|||
click: (args: any) => { |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlParameterValues'); |
|||
grid.setLocalData([]); |
|||
}, |
|||
}, |
|||
], |
|||
], |
|||
columns: [ |
|||
{ |
|||
width: '50%', |
|||
name: 'name', |
|||
label: $t('name'), |
|||
align: 'left', |
|||
sortable: false, |
|||
format: (value: any) => { |
|||
return PlaceHolder.replace(value); |
|||
}, |
|||
}, |
|||
{ |
|||
width: '100%', |
|||
name: 'value', |
|||
label: $t('value'), |
|||
sortable: false, |
|||
}, |
|||
], |
|||
editor: { |
|||
dialog: { |
|||
width: '600px', |
|||
}, |
|||
form: { |
|||
colsNum: 1, |
|||
fields: [ |
|||
{ |
|||
name: 'name', |
|||
label: $t('name'), |
|||
type: 'w-code-mirror', |
|||
toolbar: false, |
|||
lang: 'java', |
|||
rows: 1, |
|||
placeholder: true, |
|||
autoCompletion: this.autoCompletionManager.autoCompletion(), |
|||
}, |
|||
{ |
|||
name: 'value', |
|||
label: $t('value'), |
|||
type: 'w-text', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
onBeforeEditorDataSubmit: (args: any) => { |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlParameterValues'); |
|||
const form = grid.getEditorForm(); |
|||
if ('add' == form.getStatus() || 'clone' == form.getStatus()) { |
|||
grid.addLocalData(args.data); |
|||
args.callback(false); |
|||
} else if ('edit' == form.getStatus()) { |
|||
grid.updateLocalData(args.data); |
|||
args.callback(false); |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
colSpan: 4, |
|||
name: 'sqlQueryResult', |
|||
label: $t('re.resources.designer.processor.grid.entity.sqlQueryResult'), |
|||
showIf: (args: any) => { |
|||
return 'SQL' === args.form.getFieldValue('type'); |
|||
}, |
|||
type: 'w-grid', |
|||
height: 250, |
|||
autoFetchData: false, |
|||
title: $t('re.resources.designer.processor.grid.entity.sqlQueryResult'), |
|||
dense: true, |
|||
dndMode: 'local', |
|||
pageable: false, |
|||
checkboxSelection: false, |
|||
configButton: false, |
|||
toolbarConfigure: { noIcon: false }, |
|||
toolbarActions: [ |
|||
{ |
|||
name: 'execute', |
|||
label: $t('execute'), |
|||
icon: 'bi-caret-right', |
|||
click: (args: any) => { |
|||
const sql = this.#editorForm.getFieldValue('sql'); |
|||
const grid = this.#editorForm.getFieldComponent('sqlParameterValues'); |
|||
const sqlParameterValues = grid?.getRows(); |
|||
axios |
|||
.post(Environment.apiContextPath('/api/re/model/parameter/processor/executeSql'), { |
|||
sql: sql, |
|||
sqlParameterValues: sqlParameterValues, |
|||
}) |
|||
.then((response) => { |
|||
const fieldMetaDatas: any[] = response.data.fieldMetaDatas; |
|||
fieldMetaDatas.forEach((field) => { |
|||
field.value = field.name; |
|||
field.label = field.name; |
|||
}); |
|||
const data = response.data.data; |
|||
const grid = this.#editorForm.getFieldComponent('sqlQueryResult'); |
|||
this.#sqlQueryResultFieldsRef.value = fieldMetaDatas; |
|||
grid.setLocalData(data); |
|||
}); |
|||
}, |
|||
}, |
|||
], |
|||
columns: computed(() => { |
|||
return this.#sqlQueryResultFieldsRef.value; |
|||
}), |
|||
}, |
|||
{ |
|||
colSpan: 3, |
|||
name: 'sqlFieldMapping', |
|||
label: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping'), |
|||
showIf: (args: any) => { |
|||
return 'SQL' === args.form.getFieldValue('type'); |
|||
}, |
|||
type: 'w-grid', |
|||
height: 250, |
|||
width: '100%', |
|||
autoFetchData: false, |
|||
title: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping'), |
|||
dense: true, |
|||
dbClickOperation: 'edit', |
|||
dndMode: 'local', |
|||
pageable: false, |
|||
configButton: false, |
|||
toolbarConfigure: { noIcon: false }, |
|||
toolbarActions: [ |
|||
'add', |
|||
'edit', |
|||
[ |
|||
{ |
|||
extend: 'remove', |
|||
click: (args: any) => { |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlFieldMapping'); |
|||
grid.removeLocalData(args.selecteds); |
|||
}, |
|||
}, |
|||
{ |
|||
extend: 'remove', |
|||
name: 'removeAll', |
|||
label: $t('deleteAll'), |
|||
click: (args: any) => { |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlFieldMapping'); |
|||
grid.setLocalData([]); |
|||
}, |
|||
}, |
|||
], |
|||
], |
|||
columns: [ |
|||
{ |
|||
width: '50%', |
|||
name: 'parameter', |
|||
label: $t('parameterName'), |
|||
sortable: false, |
|||
format: (value: any) => { |
|||
return PlaceHolder.replace(value); |
|||
}, |
|||
}, |
|||
{ |
|||
width: '50%', |
|||
name: 'field', |
|||
label: $t('fieldName'), |
|||
align: 'left', |
|||
sortable: false, |
|||
}, |
|||
], |
|||
editor: { |
|||
dialog: { |
|||
width: '600px', |
|||
}, |
|||
form: { |
|||
colsNum: 1, |
|||
fields: [ |
|||
{ |
|||
name: 'parameter', |
|||
label: $t('parameterName'), |
|||
type: 'w-select', |
|||
options: this.#parameterOptionsRef.value, |
|||
}, |
|||
{ |
|||
name: 'field', |
|||
label: $t('fieldName'), |
|||
type: 'w-select', |
|||
options: this.#sqlQueryResultFieldsRef.value, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
onBeforeEditorDataSubmit: (args: any) => { |
|||
const grid = args.grid.getEditorForm().getFieldComponent('sqlFieldMapping'); |
|||
const form = grid.getEditorForm(); |
|||
if ('add' == form.getStatus() || 'clone' == form.getStatus()) { |
|||
grid.addLocalData(args.data); |
|||
args.callback(false); |
|||
} else if ('edit' == form.getStatus()) { |
|||
grid.updateLocalData(args.data); |
|||
args.callback(false); |
|||
} |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
public getViewerFields(): any { |
|||
return [ |
|||
{ name: 'sqlDatasourceName', label: $t('re.resources.designer.processor.grid.entity.sqlDatasourceName') }, |
|||
{ name: 'sql', label: $t('re.resources.designer.processor.grid.entity.sql') }, |
|||
{ name: 'sqlParameterValues', label: $t('re.resources.designer.processor.grid.entity.sqlParameterValues') }, |
|||
{ name: 'sqlFieldMapping', label: $t('re.resources.designer.processor.grid.entity.sqlFieldMapping') }, |
|||
]; |
|||
} |
|||
|
|||
public beforeEditorDataSubmit(args: any): void { |
|||
const form = args.grid.getEditorForm(); |
|||
const sqlParameterValuesGrid = form.getFieldComponent('sqlParameterValues'); |
|||
const sqlParameterValuesLocalData: any[] = sqlParameterValuesGrid.getRows(); |
|||
const sqlParameterValues: any[] = []; |
|||
sqlParameterValuesLocalData.forEach((item) => { |
|||
sqlParameterValues.push({ |
|||
name: item.name, |
|||
value: item.value, |
|||
}); |
|||
}); |
|||
args.data.sqlParameterValues = Tools.object2Json(sqlParameterValues); |
|||
|
|||
const sqlFieldMappingGrid = form.getFieldComponent('sqlFieldMapping'); |
|||
const sqlFieldMappingLocalData: any[] = sqlFieldMappingGrid.getRows(); |
|||
const sqlFieldMapping: any[] = Tools.objects2Objects(sqlFieldMappingLocalData, { field: 'field', parameter: 'parameter' }); |
|||
args.data.sqlFieldMapping = Tools.object2Json(sqlFieldMapping); |
|||
} |
|||
|
|||
public afterEditorOpen(args: any): void { |
|||
args.grid.getEditorDialog().setWidth(this.#editorDialogWidth); |
|||
this.initAutoCompletionManager(); |
|||
this.initUserDefinedFunctionsManager(); |
|||
|
|||
this.#editorForm = args.grid.getEditorForm(); |
|||
const form = args.grid.getEditorForm(); |
|||
const row = args.data; |
|||
|
|||
axios.get(Environment.apiContextPath('api/re/model/parameter/findParametersByParameterId?parameterId=' + this.context.target.id)).then((response) => { |
|||
this.#parameterOptionsRef.value = Tools.objects2Objects(response.data, { |
|||
label: 'name', |
|||
value: (parameter: any) => { |
|||
return '${' + parameter.name + '}'; |
|||
}, |
|||
}); |
|||
}); |
|||
|
|||
const sqlParameterValuesGrid = form.getFieldComponent('sqlParameterValues'); |
|||
const sqlParameterValuesRows = Tools.json2Object(row.sqlParameterValues); |
|||
sqlParameterValuesGrid.setLocalData(sqlParameterValuesRows); |
|||
|
|||
const sqlFieldMappingGrid = form.getFieldComponent('sqlFieldMapping'); |
|||
const sqlFieldMappingRows = Tools.json2Object(row.sqlFieldMapping); |
|||
sqlFieldMappingGrid.setLocalData(sqlFieldMappingRows); |
|||
} |
|||
} |
|||
|
|||
export { HttpRequest }; |
|||
@ -0,0 +1,39 @@ |
|||
<template> |
|||
<q-item clickable> |
|||
<q-item-section> |
|||
<q-item-label>{{ $t('math.toolbar.functions.log') }}</q-item-label> |
|||
</q-item-section> |
|||
<q-item-section side> |
|||
<q-icon name="keyboard_arrow_right" /> |
|||
</q-item-section> |
|||
<q-menu anchor="top end" self="top start"> |
|||
<q-list> |
|||
<q-item v-close-popup clickable :title="$t('math.toolbar.functions.log.lg')" draggable="true" @dragstart="nowRef?.dragstart" @click="lgRef?.append"> |
|||
<q-item-section><Lg ref="lgRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Lg></q-item-section> |
|||
</q-item> |
|||
<q-item v-close-popup clickable :title="$t('math.toolbar.functions.log.ln')" draggable="true" @dragstart="nowRef?.dragstart" @click="lnRef?.append"> |
|||
<q-item-section><Ln ref="lnRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Ln></q-item-section> |
|||
</q-item> |
|||
<q-item v-close-popup clickable :title="$t('math.toolbar.functions.log.log')" draggable="true" @dragstart="nowRef?.dragstart" @click="logRef?.append"> |
|||
<q-item-section><Log ref="logRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Log></q-item-section> |
|||
</q-item> |
|||
</q-list> |
|||
</q-menu> |
|||
</q-item> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import Lg from './log/Lg.vue'; |
|||
import Ln from './log/Ln.vue'; |
|||
import Log from './log/Log.vue'; |
|||
|
|||
const modelValueRef = defineModel({ type: String, default: '' }); |
|||
const props = defineProps({ |
|||
sourceCodeEditor: { type: Object, default: undefined }, |
|||
}); |
|||
|
|||
const nowRef = ref(); |
|||
const lgRef = ref(); |
|||
const lnRef = ref(); |
|||
const logRef = ref(); |
|||
</script> |
|||
@ -0,0 +1,6 @@ |
|||
.q-markup-table.q-table--horizontal-separator thead tr:last-child > th, |
|||
.q-markup-table.q-table--horizontal-separator tbody tr:last-child > td, |
|||
.q-markup-table.q-table--cell-separator thead tr:last-child > th, |
|||
.q-markup-table.q-table--cell-separator tbody tr:last-child > td { |
|||
border-bottom-width: 0px !important; |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
import { Tools } from './Tools'; |
|||
|
|||
/** |
|||
* 度量单位 |
|||
*/ |
|||
class UnitOfMeasure { |
|||
/** |
|||
* 宽度 |
|||
* @param width 宽度(纯数字或带单位的数字,示例: 100, '50%', '100px') |
|||
* @returns 宽度 |
|||
*/ |
|||
public static width(width: number | string): string { |
|||
return UnitOfMeasure.distance(width); |
|||
} |
|||
|
|||
/** |
|||
* 高度 |
|||
* @param width 高度(纯数字或带单位的数字,示例: 100, '50%', '100px') |
|||
* @returns 高度 |
|||
*/ |
|||
public static height(height: number | string): string { |
|||
return UnitOfMeasure.distance(height); |
|||
} |
|||
|
|||
private static distance(width: number | string): string { |
|||
if (Tools.isNumber(width)) { |
|||
return width + 'px'; |
|||
} |
|||
return width as string; |
|||
} |
|||
} |
|||
|
|||
export { UnitOfMeasure }; |
|||
Loading…
Reference in new issue