Compare commits
32 Commits
dev2-fix
...
feature-da
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9d2217f8e1 | ||
|
|
704aab9265 | ||
|
|
046ef4cb9f | ||
|
|
d2f271e3cd | ||
|
|
5fdb23d6d5 | ||
|
|
734adf9a1e | ||
|
|
0e8d1957a3 | ||
|
|
e2a625ba12 | ||
|
|
eb89b3f8a6 | ||
|
|
343f97234a | ||
|
|
04f28a3be5 | ||
|
|
63099eda8b | ||
|
|
65d89b0462 | ||
|
|
c6ded099fa | ||
|
|
c072233593 | ||
|
|
4e296c1555 | ||
| 016fcaab29 | |||
|
|
bebc1ec9fa | ||
|
|
f71c3d2123 | ||
|
|
d79ce8d06b | ||
|
|
fc9c3a5e81 | ||
|
|
6df72a1ae3 | ||
|
|
372dbe50f7 | ||
|
|
68fde6d490 | ||
|
|
c398dee21e | ||
|
|
f2ab310b6d | ||
|
|
ca0f24465b | ||
|
|
3cc4b65460 | ||
|
|
a6cf95b76d | ||
|
|
484ab9fdae | ||
|
|
78bba2502f | ||
|
|
c78b3cb5c0 |
128
frontend/src/components/AppFieldSelectBox.vue
Normal file
128
frontend/src/components/AppFieldSelectBox.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
|
||||
<div class="q-mx-md q-mb-lg">
|
||||
<div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
|
||||
|
||||
<div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
|
||||
<div v-if="selField?.app && !showSelectApp">{{ selField?.app?.name }}</div>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
|
||||
showSelectApp = true;
|
||||
}"></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!showSelectApp && selField?.app?.name">
|
||||
<div>
|
||||
<div class="row q-mb-md">
|
||||
<!-- <div class="col"> -->
|
||||
<div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
|
||||
<!-- </div> -->
|
||||
<q-space />
|
||||
<!-- <div class="col"> -->
|
||||
<div class="q-mr-md">
|
||||
<q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelectFields="updateSelectFields"
|
||||
:appId="selField?.app?.id" not_page :filter="fieldFilter"
|
||||
:selectedFields="selField.fields"></field-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-width: 45vw;" v-else>
|
||||
</div>
|
||||
|
||||
|
||||
<show-dialog v-model:visible="showSelectApp" name="アプリ選択">
|
||||
<template v-slot:toolbar>
|
||||
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
||||
<AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
|
||||
:updateSelectApp="updateSelectApp"></AppSelectBox>
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watchEffect, computed, reactive } from 'vue';
|
||||
import ShowDialog from './ShowDialog.vue';
|
||||
import FieldSelect from './FieldSelect.vue';
|
||||
import AppSelectBox from './AppSelectBox.vue';
|
||||
interface IApp {
|
||||
id: string,
|
||||
name: string
|
||||
}
|
||||
interface IField {
|
||||
name: string,
|
||||
code: string,
|
||||
type: string
|
||||
}
|
||||
|
||||
interface IAppFields {
|
||||
app?: IApp,
|
||||
fields: IField[]
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
name: 'AppFieldSelectBox',
|
||||
components: {
|
||||
ShowDialog,
|
||||
FieldSelect,
|
||||
AppSelectBox,
|
||||
},
|
||||
props: {
|
||||
selectedField: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
selectType: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const showSelectApp = ref(false);
|
||||
const selField = reactive(props.selectedField);
|
||||
|
||||
const isSelected = computed(() => {
|
||||
return selField !== null && typeof selField === 'object' && ('app' in selField)
|
||||
});
|
||||
|
||||
const updateSelectApp = (newAppinfo: IApp) => {
|
||||
selField.app = newAppinfo
|
||||
}
|
||||
|
||||
const updateSelectFields = (newFields: IField[]) => {
|
||||
selField.fields = newFields
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', selField);
|
||||
});
|
||||
|
||||
return {
|
||||
showSelectApp,
|
||||
isSelected,
|
||||
updateSelectApp,
|
||||
filter: ref(),
|
||||
updateSelectFields,
|
||||
fieldFilter: ref(),
|
||||
selField
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -21,12 +21,12 @@ import { ref, onMounted, reactive, watchEffect } from 'vue'
|
||||
import { api } from 'boot/axios';
|
||||
|
||||
export default {
|
||||
name: 'AppSelect',
|
||||
name: 'AppSelectBox',
|
||||
props: {
|
||||
name: String,
|
||||
type: String,
|
||||
filter: String,
|
||||
updateExternalSelectAppInfo: {
|
||||
updateSelectApp: {
|
||||
type: Function
|
||||
}
|
||||
},
|
||||
@@ -42,8 +42,8 @@ export default {
|
||||
const selected = ref([])
|
||||
|
||||
watchEffect(()=>{
|
||||
if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
|
||||
props.updateExternalSelectAppInfo(selected.value[0])
|
||||
if (selected.value && selected.value[0] && props.updateSelectApp) {
|
||||
props.updateSelectApp(selected.value[0])
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
@@ -1,20 +1,21 @@
|
||||
<template>
|
||||
<q-field v-model="selectedObject" labelColor="primary" class="condition-object"
|
||||
:clearable="isSelected" stack-label :dense="true" :outlined="true" >
|
||||
<q-field labelColor="primary" class="condition-object" :clearable="isSelected" stack-label :dense="true"
|
||||
:outlined="true">
|
||||
<template v-slot:control>
|
||||
<q-chip color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
|
||||
<!-- <q-chip color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
|
||||
{{ selectedObject.name }}
|
||||
</q-chip>
|
||||
<q-chip color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
|
||||
{{ selectedObject.name.name }}
|
||||
</q-chip>
|
||||
</q-chip> -->
|
||||
{{ selectedObject?.sharedText }}
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" class="cursor-pointer" @click="showDg" />
|
||||
</template>
|
||||
</q-field>
|
||||
<show-dialog v-model:visible="show" name="設定項目一覧" @close="closeDg" min-width="400px">
|
||||
<template v-slot:toolbar>
|
||||
<show-dialog v-model:visible="show" name="設定項目" @close="closeDg" min-width="400px">
|
||||
<!-- <template v-slot:toolbar>
|
||||
<q-input dense debounce="200" v-model="filter" placeholder="検索" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
@@ -22,47 +23,68 @@
|
||||
</q-input>
|
||||
</template>
|
||||
<condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
|
||||
-->
|
||||
<DynamicItemInput v-model:selectedObject="selectedObject" :canInput="config.canInput"
|
||||
:buttonsConfig="config.buttonsConfig" :appId="store.appInfo?.appId" />
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, watchEffect, computed } from 'vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import ConditionObjects from '../ConditionObjects.vue';
|
||||
// import ConditionObjects from '../ConditionObjects.vue';
|
||||
import DynamicItemInput from '../DynamicItemInput/DynamicItemInput.vue';
|
||||
import { useFlowEditorStore } from '../../stores/flowEditor';
|
||||
import { IActionFlow, IActionNode, IActionVariable } from '../../types/ActionTypes';
|
||||
export default defineComponent({
|
||||
name: 'ConditionObject',
|
||||
components: {
|
||||
ShowDialog,
|
||||
ConditionObjects
|
||||
DynamicItemInput,
|
||||
// ConditionObjects
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
canInput: false,
|
||||
buttonsConfig: [
|
||||
{ label: 'フィールド', color: 'primary', type: 'FieldAdd' },
|
||||
{ label: '変数', color: 'green', type: 'VariableAdd' },
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const appDg = ref();
|
||||
// const appDg = ref();
|
||||
const show = ref(false);
|
||||
const selectedObject = ref(props.modelValue);
|
||||
const store = useFlowEditorStore();
|
||||
// const sharedText = ref(''); // 共享的文本状态
|
||||
const isSelected = computed(() => {
|
||||
return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
|
||||
return selectedObject?.value?.sharedText !== '';
|
||||
});
|
||||
// const isSelected = computed(()=>{
|
||||
// return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
|
||||
// });
|
||||
let vars: IActionVariable[] = [];
|
||||
if (store.currentFlow !== undefined && store.activeNode !== undefined) {
|
||||
vars = store.currentFlow.getVarNames(store.activeNode);
|
||||
}
|
||||
const filter=ref('');
|
||||
// const filter=ref('');
|
||||
const showDg = () => {
|
||||
show.value = true;
|
||||
};
|
||||
|
||||
const closeDg = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
selectedObject.value = appDg.value.selected[0];
|
||||
// selectedObject.value = appDg.value.selected[0];
|
||||
}
|
||||
};
|
||||
|
||||
@@ -72,14 +94,18 @@
|
||||
|
||||
return {
|
||||
store,
|
||||
appDg,
|
||||
// appDg,
|
||||
show,
|
||||
showDg,
|
||||
closeDg,
|
||||
selectedObject,
|
||||
vars: reactive(vars),
|
||||
isSelected,
|
||||
filter
|
||||
buttonsConfig: [
|
||||
{ label: 'フィールド', color: 'primary', type: 'FieldAdd' },
|
||||
{ label: '変数', color: 'green', type: 'VariableAdd' },
|
||||
]
|
||||
// filter
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -90,6 +116,7 @@
|
||||
max-height: 40px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.selected-obj {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
@@ -67,11 +67,13 @@
|
||||
<!-- condition -->
|
||||
<div @click.stop @keypress.stop v-else >
|
||||
<div class="row no-wrap items-center q-my-xs">
|
||||
<ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"></ConditionObject>
|
||||
<ConditionObject v-bind="prop.node" v-model="prop.node.object" :config="leftDynamicItemConfig" class="col-4"/>
|
||||
<q-select v-model="prop.node.operator" :options="operators" class="operator" :outlined="true" :dense="true"></q-select>
|
||||
<q-input v-if="!prop.node.object || !('options' in prop.node.object)"
|
||||
<ConditionObject v-bind="prop.node" v-model="prop.node.value" :config="rightDynamicItemConfig" class="col-4"/>
|
||||
<!-- <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"/> -->
|
||||
<!-- <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
|
||||
v-model="prop.node.value"
|
||||
class="condition-value" :outlined="true" :dense="true" ></q-input>
|
||||
class="condition-value" :outlined="true" :dense="true" ></q-input> -->
|
||||
<q-select v-if="prop.node.object && ('options' in prop.node.object)"
|
||||
v-model="prop.node.value"
|
||||
:options="objectValueOptions(prop.node.object.options)"
|
||||
@@ -113,7 +115,7 @@ import { finished } from 'stream';
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive, computed } from 'vue';
|
||||
import { defineComponent,ref,reactive, computed, inject } from 'vue';
|
||||
import { INode,ConditionTree,GroupNode,ConditionNode, LogicalOperator,Operator,NodeType } from '../../types/Conditions';
|
||||
import ConditionObject from './ConditionObject.vue';
|
||||
export default defineComponent( {
|
||||
@@ -143,12 +145,9 @@ export default defineComponent( {
|
||||
return opts;
|
||||
});
|
||||
|
||||
const operator = inject('Operator')
|
||||
const operators =computed(()=>{
|
||||
const opts=[];
|
||||
for(const op in Operator){
|
||||
opts.push(Operator[op as keyof typeof Operator]);
|
||||
}
|
||||
return opts;
|
||||
return operator ? operator : Object.values(Operator);
|
||||
});
|
||||
const tree = reactive(props.conditionTree);
|
||||
|
||||
@@ -228,6 +227,8 @@ export default defineComponent( {
|
||||
// addCondition(tree.root);
|
||||
|
||||
return {
|
||||
leftDynamicItemConfig :inject('leftDynamicItemConfig'),
|
||||
rightDynamicItemConfig:inject('rightDynamicItemConfig'),
|
||||
showingCondition,
|
||||
conditionString,
|
||||
tree,
|
||||
|
||||
141
frontend/src/components/DynamicItemInput/DynamicItemInput.vue
Normal file
141
frontend/src/components/DynamicItemInput/DynamicItemInput.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="q-mx-md" style="max-width: 600px;">
|
||||
<!-- <q-card> -->
|
||||
<div class="q-mb-md">
|
||||
<q-input ref="inputRef" outlined dense debounce="200" @update:model-value="updateSharedText"
|
||||
v-model="sharedText" :readonly="!canInput">
|
||||
<template v-slot:append>
|
||||
<q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row q-gutter-sm">
|
||||
<q-btn v-for="button in buttonsConfig" :key="button.type" :color="button.color" @mousedown.prevent
|
||||
@click="openDialog(button)" size="sm">
|
||||
{{ button.label }}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<show-dialog v-model:visible="dialogVisible" :name="currentDialogName" @close="closeDialog" min-width="400px">
|
||||
<template v-slot:toolbar>
|
||||
<q-input dense debounce="200" v-model="filter" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<!-- asdf -->
|
||||
<component :is="currentComponent" @select="handleSelect" :filter="filter" :appId="appId" />
|
||||
</show-dialog>
|
||||
<!-- </q-card> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, inject, watchEffect, defineComponent } from 'vue';
|
||||
import FieldAdd from './FieldAdd.vue';
|
||||
import VariableAdd from './VariableAdd.vue';
|
||||
// import FunctionAdd from './FunctionAdd.vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
|
||||
type ButtonConfig = {
|
||||
label: string;
|
||||
color: string;
|
||||
type: string;
|
||||
editable: boolean;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DynamicItemInput',
|
||||
components: {
|
||||
FieldAdd,
|
||||
VariableAdd,
|
||||
// FunctionAdd,
|
||||
ShowDialog
|
||||
},
|
||||
props: {
|
||||
// canInput: {
|
||||
// type: Boolean,
|
||||
// default: false
|
||||
// },
|
||||
appId: {
|
||||
type: String,
|
||||
},
|
||||
selectedObject: {
|
||||
default: {}
|
||||
},
|
||||
buttonsConfig: {
|
||||
type: Array as () => ButtonConfig[],
|
||||
default: () => [
|
||||
{ label: 'フィールド', color: 'primary', type: 'FieldAdd' }
|
||||
]
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const filter = ref('');
|
||||
const dialogVisible = ref(false);
|
||||
const currentDialogName = ref('');
|
||||
const currentComponent = ref('FieldAdd');
|
||||
const sharedText = ref(props.selectedObject?.sharedText ?? '');
|
||||
const inputRef = ref();
|
||||
const canInput = ref(true);
|
||||
const editable = ref(false);
|
||||
|
||||
const openDialog = (button: ButtonConfig) => {
|
||||
currentDialogName.value = button.label;
|
||||
currentComponent.value = button.type;
|
||||
dialogVisible.value = true;
|
||||
editable.value = button.editable ?? true;
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const handleSelect = (value) => {
|
||||
// 获取当前光标位置
|
||||
// const cursorPosition = inputRef.value.getNativeElement().selectionStart;
|
||||
// if (cursorPosition === undefined || cursorPosition === 0) {
|
||||
sharedText.value = `${value._t}`;
|
||||
// } else {
|
||||
// const textBefore = sharedText.value.substring(0, cursorPosition);
|
||||
// const textAfter = sharedText.value.substring(cursorPosition);
|
||||
// sharedText.value = `${textBefore}${value._t}${textAfter}`;
|
||||
// }
|
||||
|
||||
if (value && value._t && (value._t as string).length > 0) {
|
||||
canInput.value = editable.value;
|
||||
}
|
||||
emit('update:selectedObject', { sharedText: sharedText.value, ...value });
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const clearSharedText = () => {
|
||||
sharedText.value = '';
|
||||
canInput.value = true;
|
||||
emit('update:selectedObject', {});
|
||||
}
|
||||
const updateSharedText = (value) => {
|
||||
sharedText.value = value;
|
||||
emit('update:selectedObject', { ...props.selectedObject, sharedText: value });
|
||||
}
|
||||
|
||||
return {
|
||||
filter,
|
||||
dialogVisible,
|
||||
currentDialogName,
|
||||
currentComponent,
|
||||
canInput,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
handleSelect,
|
||||
clearSharedText,
|
||||
updateSharedText,
|
||||
sharedText,
|
||||
inputRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
41
frontend/src/components/DynamicItemInput/FieldAdd.vue
Normal file
41
frontend/src/components/DynamicItemInput/FieldAdd.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<field-list v-model="selected" type="single" :filter="filter" :appId="sourceApp ? sourceApp : appId"
|
||||
:fields="sourceFields" @update:modelValue="handleSelect" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, inject, ref } from 'vue';
|
||||
import FieldList from '../FieldList.vue';
|
||||
export default {
|
||||
name: 'FieldAdd',
|
||||
components: {
|
||||
FieldList,
|
||||
},
|
||||
props: {
|
||||
appId: Number,
|
||||
filter: String
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const sourceFields = inject<Array<unknown>>('sourceFields')
|
||||
const sourceApp = inject<number>('sourceApp')
|
||||
const appId = computed(() => {
|
||||
if (sourceFields || sourceApp) {
|
||||
return sourceApp.value
|
||||
} else {
|
||||
return props.appId
|
||||
}
|
||||
});
|
||||
return {
|
||||
sourceFields,
|
||||
sourceApp,
|
||||
selected: ref([]),
|
||||
handleSelect: (newSelection: any[]) => {
|
||||
|
||||
if (newSelection.length > 0) {
|
||||
const v = newSelection[0]
|
||||
emit('select', { _t: `field(${appId.value},${v.name})`, ...v }); // 假设您只需要选择的第一个字段的名称
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
42
frontend/src/components/DynamicItemInput/VariableAdd.vue
Normal file
42
frontend/src/components/DynamicItemInput/VariableAdd.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<variable-list v-model="selected" type="single" :vars="vars" :filter="filter" @update:modelValue="handleSelect" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import VariableList from '../VariableList.vue';
|
||||
import { useFlowEditorStore } from 'src/stores/flowEditor';
|
||||
import { IActionVariable } from 'src/types/ActionTypes';
|
||||
export default {
|
||||
name: 'VariableAdd',
|
||||
components: {
|
||||
VariableList,
|
||||
},
|
||||
props: {
|
||||
appId: Number,
|
||||
filter: String
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const store = useFlowEditorStore();
|
||||
let vars: IActionVariable[] = [];
|
||||
console.log(store.currentFlow !== undefined && store.activeNode !== undefined);
|
||||
|
||||
if (store.currentFlow !== undefined && store.activeNode !== undefined) {
|
||||
vars = store.currentFlow.getVarNames(store.activeNode);
|
||||
}
|
||||
return {
|
||||
vars,
|
||||
selected: ref([]),
|
||||
handleSelect: (newSelection: any[]) => {
|
||||
if (newSelection.length > 0) {
|
||||
const v = newSelection[0];
|
||||
let name = v.name
|
||||
if (typeof name === 'object') {
|
||||
name = name.name
|
||||
}
|
||||
emit('select', { _t: `var(${name})`, ...v }); // 假设您只需要选择的第一个字段的名称
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
]
|
||||
|
||||
const { state : rows, isReady: isLoaded, isLoading } = useAsyncState((args) => {
|
||||
if (props.fields) {
|
||||
if (props.fields && Object.keys(props.fields).length > 0) {
|
||||
return props.fields.map(f => ({ name: f.label, objectType: 'field', ...f }));
|
||||
} else {
|
||||
return api.get('api/v1/appfields', {
|
||||
|
||||
@@ -34,6 +34,9 @@ export default {
|
||||
default:()=>[]
|
||||
},
|
||||
filter: String,
|
||||
updateSelectFields: {
|
||||
type: Function
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const isLoaded = ref(false);
|
||||
@@ -69,6 +72,12 @@ export default {
|
||||
isLoaded.value = true;
|
||||
});
|
||||
|
||||
watchEffect(()=>{
|
||||
if (selected.value && selected.value[0] && props.updateSelectFields) {
|
||||
props.updateSelectFields(selected)
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
columns,
|
||||
rows,
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
<template>
|
||||
<!-- <div class="q-pa-md q-gutter-sm" > -->
|
||||
<q-dialog :model-value="visible" persistent bordered >
|
||||
<q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
|
||||
<q-card class="" style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
|
||||
<q-toolbar class="bg-grey-4">
|
||||
<q-toolbar-title>{{ name }}</q-toolbar-title>
|
||||
<q-space></q-space>
|
||||
<slot name="toolbar"></slot>
|
||||
<q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
|
||||
</q-toolbar>
|
||||
<q-card-section>
|
||||
<!-- <div class="text-h6">{{ name }}</div> -->
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-none" :style="sectionStyle">
|
||||
<q-card-section class="q-mt-md" :style="sectionStyle">
|
||||
<slot></slot>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right" class="text-primary q-mt-lg">
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
|
||||
<q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
|
||||
</q-card-actions>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-table flat bordered row-key="id" :selection="type" :selected="modelValue"
|
||||
<q-table flat bordered row-key="id" :selection="type" :selected="modelValue" :filter="filter"
|
||||
@update:selected="$emit('update:modelValue', $event)" :columns="columns" :rows="rows" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -19,7 +19,8 @@ export default {
|
||||
reqired: true,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: Array
|
||||
modelValue: Array,
|
||||
filter: String
|
||||
},
|
||||
emits: [
|
||||
'update:modelValue'
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
|
||||
<AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
|
||||
</ShowDialog>
|
||||
</template>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
import { defineComponent,ref } from 'vue';
|
||||
import {AppInfo} from '../../types/ActionTypes'
|
||||
import ShowDialog from '../../components/ShowDialog.vue';
|
||||
import AppSelect from '../../components/AppSelect.vue';
|
||||
import AppSelectBox from '../../components/AppSelectBox.vue';
|
||||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||||
import { useAuthStore } from 'src/stores/useAuthStore';
|
||||
export default defineComponent({
|
||||
@@ -47,7 +47,7 @@ export default defineComponent({
|
||||
"appSelected"
|
||||
],
|
||||
components:{
|
||||
AppSelect,
|
||||
AppSelectBox,
|
||||
ShowDialog
|
||||
},
|
||||
setup(props, context) {
|
||||
|
||||
@@ -20,7 +20,8 @@
|
||||
<div style="">
|
||||
<div v-if="selectedField.fields && selectedField.fields.length > 0">
|
||||
<q-list bordered>
|
||||
<q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
|
||||
<q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator
|
||||
v-slot="{ item, index }">
|
||||
<q-item :key="index" dense clickable>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
@@ -47,79 +48,28 @@
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
|
||||
|
||||
<div class="q-mx-md q-mb-lg">
|
||||
<div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
|
||||
|
||||
<div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
|
||||
<div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
|
||||
showSelectApp = true;
|
||||
}"></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!showSelectApp && selectedField.app?.name">
|
||||
<div>
|
||||
<div class="row q-mb-md">
|
||||
<!-- <div class="col"> -->
|
||||
<div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
|
||||
<!-- </div> -->
|
||||
<q-space />
|
||||
<!-- <div class="col"> -->
|
||||
<div class="q-mr-md">
|
||||
<q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<field-select ref="fieldDlg" name="フィールド" :type="selectType"
|
||||
:appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields" :fieldTypes="fieldTypes"></field-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-width: 45vw;" v-else>
|
||||
</div>
|
||||
|
||||
</show-dialog>
|
||||
|
||||
<show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
|
||||
<template v-slot:toolbar>
|
||||
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter" ></AppSelect>
|
||||
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
|
||||
<AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox"/>
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watchEffect, computed } from 'vue';
|
||||
import { defineComponent, ref, watchEffect } from 'vue';
|
||||
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import FieldSelect from '../FieldSelect.vue';
|
||||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||||
import AppSelect from '../AppSelect.vue';
|
||||
interface IApp{
|
||||
|
||||
export interface IApp {
|
||||
id: string,
|
||||
name: string
|
||||
}
|
||||
interface IField {
|
||||
export interface IField {
|
||||
name: string,
|
||||
code: string,
|
||||
type: string
|
||||
}
|
||||
|
||||
interface IAppFields{
|
||||
export interface IAppFields {
|
||||
app?: IApp,
|
||||
fields: IField[]
|
||||
}
|
||||
@@ -129,8 +79,7 @@ export default defineComponent({
|
||||
name: 'AppFieldSelect',
|
||||
components: {
|
||||
ShowDialog,
|
||||
FieldSelect,
|
||||
AppSelect,
|
||||
AppFieldSelectBox
|
||||
},
|
||||
props: {
|
||||
displayName: {
|
||||
@@ -152,76 +101,51 @@ export default defineComponent({
|
||||
selectType: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
fieldTypes:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const appDlg = ref();
|
||||
const fieldDlg = ref();
|
||||
const show = ref(false);
|
||||
const showSelectApp = ref(false);
|
||||
const afBox = ref();
|
||||
const selectedField = ref<IAppFields>({
|
||||
app: undefined,
|
||||
fields: []
|
||||
});
|
||||
if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
|
||||
if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
|
||||
selectedField.value = props.modelValue as IAppFields;
|
||||
}
|
||||
const store = useFlowEditorStore();
|
||||
|
||||
const isSelected = computed(() => {
|
||||
return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
|
||||
});
|
||||
|
||||
const showDg = () => {
|
||||
show.value = true;
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
selectedField.value = {
|
||||
fields: []
|
||||
};
|
||||
}
|
||||
|
||||
const closeAppDlg = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
selectedField.value.app = appDlg.value.selected[0];
|
||||
selectedField.value.fields=[];
|
||||
showSelectApp.value=false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeFieldDialog=(val:string)=>{
|
||||
if (val == 'OK') {
|
||||
selectedField.value.fields = fieldDlg.value.selected;
|
||||
}
|
||||
};
|
||||
|
||||
const removeField = (index: number) => {
|
||||
selectedField.value.fields.splice(index, 1);
|
||||
}
|
||||
|
||||
const closeAFBox = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
console.log(afBox.value);
|
||||
|
||||
selectedField.value = afBox.value.selField;
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', selectedField.value);
|
||||
});
|
||||
|
||||
return {
|
||||
store,
|
||||
appDlg,
|
||||
fieldDlg,
|
||||
afBox,
|
||||
show,
|
||||
showDg,
|
||||
closeAppDlg,
|
||||
closeFieldDialog,
|
||||
showDg: () => { show.value = true },
|
||||
selectedField,
|
||||
showSelectApp,
|
||||
isSelected,
|
||||
filter: ref(),
|
||||
clear,
|
||||
fieldFilter: ref(),
|
||||
removeField
|
||||
removeField,
|
||||
closeAFBox,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
93
frontend/src/components/right/AppSelect.vue
Normal file
93
frontend/src/components/right/AppSelect.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-field :label="displayName" labelColor="primary" stack-label>
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">アプリ選択</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="selectedField.app.name">
|
||||
{{ selectedField.app.name }}
|
||||
</div>
|
||||
<div v-else>{{ placeholder }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<ShowDialog v-model:visible="dgIsShow" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh">
|
||||
<template v-slot:toolbar>
|
||||
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
|
||||
<template v-slot:before>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
|
||||
</ShowDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import AppSelectBox from '../AppSelectBox.vue';
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
name: 'AppSelect',
|
||||
components: {
|
||||
ShowDialog,
|
||||
AppSelectBox
|
||||
},
|
||||
props: {
|
||||
context: {
|
||||
type: Array<Props>,
|
||||
default: '',
|
||||
},
|
||||
displayName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const appDg = ref()
|
||||
const dgIsShow = ref(false)
|
||||
const selectedField = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
|
||||
const closeDg = (state: string) => {
|
||||
dgIsShow.value = false;
|
||||
if (state == 'OK') {
|
||||
selectedField.app = appDg.value.selected[0];
|
||||
}
|
||||
};
|
||||
|
||||
console.log(selectedField);
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', selectedField);
|
||||
});
|
||||
|
||||
return {
|
||||
filter: ref(''),
|
||||
dgIsShow,
|
||||
appDg,
|
||||
closeDg,
|
||||
selectedField
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -4,7 +4,8 @@
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定:{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
|
||||
<q-btn color="grey-3" text-color="black" :disable="btnDisable" @click="showDg()">クリックで設定:{{ isSetted ?
|
||||
'設定済み' : '未設定' }}</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="!isSetted">{{ placeholder }}</div>
|
||||
@@ -20,7 +21,7 @@
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
|
||||
import { ConditionNode, ConditionTree, Operator, OperatorListItem } from 'app/src/types/Conditions';
|
||||
import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
|
||||
import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
|
||||
|
||||
@@ -28,6 +29,10 @@ type Props = {
|
||||
props?: {
|
||||
name: string;
|
||||
modelValue?: {
|
||||
app: {
|
||||
id: string;
|
||||
name: string;
|
||||
},
|
||||
fields: {
|
||||
type: string;
|
||||
label: string;
|
||||
@@ -37,6 +42,15 @@ type Props = {
|
||||
}
|
||||
};
|
||||
|
||||
type InputConfg = {
|
||||
canInput: boolean;
|
||||
buttonsConfig: {
|
||||
label: string;
|
||||
color: string;
|
||||
type: string;
|
||||
}[]
|
||||
};
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FieldInput',
|
||||
@@ -72,6 +86,31 @@ export default defineComponent({
|
||||
sourceType: {
|
||||
type: String,
|
||||
default: 'field'
|
||||
},
|
||||
onlySourceSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
operatorList: {
|
||||
type: Array,
|
||||
},
|
||||
inputConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
left: {
|
||||
canInput: false,
|
||||
buttonsConfig: [
|
||||
{ label: 'フィールド', color: 'primary', type: 'FieldAdd' },
|
||||
{ label: '変数', color: 'green', type: 'VariableAdd' },
|
||||
]
|
||||
},
|
||||
right: {
|
||||
canInput: true,
|
||||
buttonsConfig: [
|
||||
{ label: '変数', color: 'green', type: 'VariableAdd' },
|
||||
]
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -82,18 +121,36 @@ export default defineComponent({
|
||||
if (props.sourceType === 'field') {
|
||||
provide('sourceFields', computed(() => source.props?.modelValue?.fields ?? []));
|
||||
} else if (props.sourceType === 'app') {
|
||||
console.log('sourceApp', source.props?.modelValue);
|
||||
provide('sourceApp', computed(() => source.props?.modelValue?.app?.id));
|
||||
}
|
||||
}
|
||||
|
||||
provide('leftDynamicItemConfig', props.inputConfig.left);
|
||||
provide('rightDynamicItemConfig', props.inputConfig.right);
|
||||
provide('Operator', props.operatorList);
|
||||
|
||||
const btnDisable = computed(() => {
|
||||
const onlySourceSelect = props.onlySourceSelect;
|
||||
|
||||
if (!onlySourceSelect) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (props.sourceType === 'field') {
|
||||
return source?.props?.modelValue?.fields?.length ?? 0 > 0;
|
||||
} else if (props.sourceType === 'app') {
|
||||
return source?.props?.modelValue?.app?.id ? false : true
|
||||
}
|
||||
return true;
|
||||
})
|
||||
|
||||
const appDg = ref();
|
||||
const show = ref(false);
|
||||
const tree = reactive(new ConditionTree());
|
||||
if (props.modelValue && props.modelValue !== '') {
|
||||
tree.fromJson(props.modelValue);
|
||||
} else {
|
||||
const newNode = new ConditionNode({}, Operator.Equal, '', tree.root);
|
||||
const newNode = new ConditionNode({}, (props.operatorList && props.operatorList.length > 0) ? props.operatorList[0] as OperatorListItem : Operator.Equal, '', tree.root);
|
||||
tree.addNode(tree.root, newNode);
|
||||
}
|
||||
|
||||
@@ -109,13 +166,15 @@ export default defineComponent({
|
||||
|
||||
const onClosed = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
const conditionJson = tree.toJson();
|
||||
isSetted.value = true;
|
||||
tree.setQuery(tree.buildConditionQueryString(tree.root));
|
||||
const conditionJson = tree.toJson();
|
||||
emit('update:modelValue', conditionJson);
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
tree.setQuery(tree.buildConditionQueryString(tree.root));
|
||||
const conditionJson = tree.toJson();
|
||||
emit('update:modelValue', conditionJson);
|
||||
});
|
||||
@@ -127,7 +186,8 @@ export default defineComponent({
|
||||
showDg,
|
||||
onClosed,
|
||||
tree,
|
||||
conditionString
|
||||
conditionString,
|
||||
btnDisable
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
250
frontend/src/components/right/DataMapping.vue
Normal file
250
frontend/src/components/right/DataMapping.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-field :label="displayName" labelColor="primary" stack-label>
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" :disable="btnDisable"
|
||||
@click="() => { dgIsShow = true }">クリックで設定</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="mappingObjectsInputDisplay && mappingObjectsInputDisplay.length > 0">
|
||||
<div v-for="(item) in mappingObjectsInputDisplay" :key="item">{{ item }}</div>
|
||||
</div>
|
||||
<div v-else>{{ placeholder }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
</q-field>
|
||||
<show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="50vw" min-height="60vh">
|
||||
|
||||
<div class="q-mx-md">
|
||||
<div class="row q-col-gutter-x-xs flex-center">
|
||||
<div class="col-6">
|
||||
<div class="q-mx-xs">ソース</div>
|
||||
</div>
|
||||
<!-- <div class="col-1">
|
||||
</div> -->
|
||||
<div class="col-6">
|
||||
<div class="q-mx-xs">目標</div>
|
||||
</div>
|
||||
<!-- <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" /> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<q-virtual-scroll style="max-height: 75vh;" :items="mappingProps" separator v-slot="{ item, index }">
|
||||
<!-- <div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id"> -->
|
||||
<div class="row q-my-md q-col-gutter-x-md flex-center">
|
||||
<div class="col-6">
|
||||
<ConditionObject :config="config" v-model="item.from" />
|
||||
</div>
|
||||
<!-- <div class="col-1">
|
||||
</div> -->
|
||||
<div class="col-6">
|
||||
<q-field v-model="item.vName" type="text" outlined dense>
|
||||
<!-- <template v-slot:append>
|
||||
<q-icon name="search" class="cursor-pointer"
|
||||
@click="() => { mappingProps[index].to.isDialogVisible = true }" />
|
||||
</template> -->
|
||||
<template v-slot:control>
|
||||
<div class="self-center full-width no-outline" tabindex="0"
|
||||
v-if="item.to.app?.name && item.to.fields?.length > 0 && item.to.fields[0].label">
|
||||
{{ `${item.to.fields[0].label}` }}
|
||||
<q-tooltip>
|
||||
<div>アプリ : {{ item.to.app.name }}</div>
|
||||
<div>フィールドのコード : {{ item.to.fields[0].code }}</div>
|
||||
<div>フィールドのタイプ : {{ item.to.fields[0].type }}</div>
|
||||
<div>フィールド : {{ item.to.fields[0] }}</div>
|
||||
</q-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<!-- <div class="col-1">
|
||||
<q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
|
||||
@close="closeToDg" ref="fieldDlg">
|
||||
<FieldSelect v-if="onlySourceSelect" ref="fieldDlg" name="フィールド" :appId="sourceAppId" not_page
|
||||
:selectedFields="mappingProps[index].to.fields"
|
||||
:updateSelects="(fields) => { mappingProps[index].to.fields = fields; mappingProps[index].to.app = sourceApp }">
|
||||
</FieldSelect>
|
||||
<AppFieldSelectBox v-else v-model:selectedField="mappingProps[index].to" />
|
||||
</show-dialog>
|
||||
<!-- </div> -->
|
||||
</q-virtual-scroll>
|
||||
</div>
|
||||
</show-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { computed, defineComponent, watch, isRef, reactive, ref, watchEffect } from 'vue';
|
||||
import ConditionObject from '../ConditionEditor/ConditionObject.vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
|
||||
import FieldSelect from '../FieldSelect.vue';
|
||||
import IAppFields from './AppFieldSelect.vue';
|
||||
import { api } from 'boot/axios';
|
||||
|
||||
type Props = {
|
||||
props?: {
|
||||
name: string;
|
||||
modelValue?: {
|
||||
app: {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
type ValueType = {
|
||||
id: string;
|
||||
from: object;
|
||||
to: typeof IAppFields & {
|
||||
isDialogVisible: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DataMapping',
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
ShowDialog,
|
||||
ConditionObject,
|
||||
AppFieldSelectBox,
|
||||
FieldSelect
|
||||
},
|
||||
props: {
|
||||
context: {
|
||||
type: Array<Props>,
|
||||
default: '',
|
||||
},
|
||||
displayName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as () => ValueType[],
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
onlySourceSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
const source = props.context.find(element => element?.props?.name === 'sources')
|
||||
|
||||
const sourceApp = computed(() => source?.props?.modelValue?.app);
|
||||
|
||||
const sourceAppId = computed(() => sourceApp.value?.id);
|
||||
|
||||
const closeDg = () => {
|
||||
emit('update:modelValue', mappingProps.value
|
||||
);
|
||||
}
|
||||
|
||||
const closeToDg = () => {
|
||||
emit('update:modelValue', mappingProps.value
|
||||
);
|
||||
}
|
||||
|
||||
const mappingProps = computed(() => props.modelValue ?? []);
|
||||
|
||||
watch(() => sourceAppId.value, async (newId, oldId) => {
|
||||
if (!newId) return;
|
||||
const a = await api.get('api/v1/appfields', {
|
||||
params: {
|
||||
app: newId
|
||||
}
|
||||
}).then(res => {
|
||||
return Object.values(res.data.properties)
|
||||
.map(f => ({ name: f.label, objectType: 'field', ...f }))
|
||||
.map(f => {
|
||||
return {
|
||||
id: uuidv4(),
|
||||
from: {},
|
||||
to: {
|
||||
app: sourceApp.value,
|
||||
fields: [f],
|
||||
isDialogVisible: false
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
const modelValue = props.modelValue ?? [];
|
||||
|
||||
if (modelValue.length === 0 || newId !== oldId) {
|
||||
emit('update:modelValue', a);
|
||||
return;
|
||||
}
|
||||
const modelValueFieldNames = modelValue.map(item => item.to.fields[0].name);
|
||||
|
||||
const newFields = a.filter(field => !modelValueFieldNames.includes(field.to.fields[0].name));
|
||||
|
||||
const updatedModelValue = [...modelValue, ...newFields];
|
||||
|
||||
emit('update:modelValue', updatedModelValue);
|
||||
})
|
||||
|
||||
console.log(mappingProps.value);
|
||||
|
||||
// const deleteMappingObject = (index: number) => mappingProps.length === 1
|
||||
// ? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
|
||||
// : mappingProps.splice(index, 1);
|
||||
|
||||
const mappingObjectsInputDisplay = computed(() =>
|
||||
(mappingProps.value && Array.isArray(mappingProps.value)) ?
|
||||
mappingProps.value
|
||||
.filter(item => item.from?.sharedText && item.to.fields?.length > 0)
|
||||
.map(item => {
|
||||
return `field(${item.to.app?.id},${item.to.fields[0].label}) = ${item.from.sharedText} `;
|
||||
})
|
||||
: []
|
||||
);
|
||||
|
||||
|
||||
|
||||
const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
|
||||
|
||||
//集計処理方法
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', mappingProps.value);
|
||||
});
|
||||
return {
|
||||
uuidv4,
|
||||
dgIsShow: ref(false),
|
||||
closeDg,
|
||||
toDgIsShow: ref(false),
|
||||
closeToDg,
|
||||
mappingProps,
|
||||
// addMappingObject: () => mappingProps.push(defaultMappingProp()),
|
||||
// deleteMappingObject,
|
||||
mappingObjectsInputDisplay,
|
||||
sourceApp,
|
||||
sourceAppId,
|
||||
btnDisable,
|
||||
config: {
|
||||
canInput: false,
|
||||
buttonsConfig: [
|
||||
{ label: '変数', color: 'green', type: 'VariableAdd',editable:false },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
@@ -139,6 +139,7 @@ export default defineComponent({
|
||||
}
|
||||
return null;
|
||||
}));
|
||||
provide('sourceApp', computed(() => source.props?.modelValue?.app?.id));
|
||||
}
|
||||
|
||||
const actionName = props.context.find(element => element?.props?.name === 'displayName')
|
||||
@@ -168,12 +169,7 @@ export default defineComponent({
|
||||
processingObjects
|
||||
.filter(item => item.field && item.logicalOperator && item.vName)
|
||||
.map(item => {
|
||||
const name = typeof item.field?.name === 'string'
|
||||
? item.field.name
|
||||
: item.field?.name.name;
|
||||
return item.logicalOperator.operator!==''?
|
||||
`${processingProps.name}.${item.vName} = ${item.logicalOperator.operator}(${name})`
|
||||
:`${processingProps.name}.${item.vName} = ${name}`
|
||||
return`var(${processingProps.name}.${item.vName}) = ${item.field.sharedText}`
|
||||
})
|
||||
: []
|
||||
);
|
||||
|
||||
@@ -22,6 +22,8 @@ import EventSetter from '../right/EventSetter.vue';
|
||||
import ColorPicker from './ColorPicker.vue';
|
||||
import NumInput from './NumInput.vue';
|
||||
import DataProcessing from './DataProcessing.vue';
|
||||
import DataMapping from './DataMapping.vue';
|
||||
import AppSelect from './AppSelect.vue';
|
||||
import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -37,7 +39,9 @@ export default defineComponent({
|
||||
EventSetter,
|
||||
ColorPicker,
|
||||
NumInput,
|
||||
DataProcessing
|
||||
DataProcessing,
|
||||
DataMapping,
|
||||
AppSelect
|
||||
},
|
||||
props: {
|
||||
nodeProps: {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<q-btn :label="model+'選択'" color="primary" @click="showDg()" />
|
||||
<show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
|
||||
<template v-if="model=='アプリ'">
|
||||
<app-select ref="appDg" :name="model" type="single"></app-select>
|
||||
<app-select-box ref="appDg" :name="model" type="single"></app-select-box>
|
||||
</template>
|
||||
<template v-if="model=='フィールド'">
|
||||
<field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import ShowDialog from 'components/ShowDialog.vue';
|
||||
import AppSelect from 'components/AppSelect.vue';
|
||||
import AppSelectBox from 'components/AppSelectBox.vue';
|
||||
import FieldSelect from 'components/FieldSelect.vue';
|
||||
import ActionSelect from 'components/ActionSelect.vue';
|
||||
import { ref } from 'vue'
|
||||
|
||||
@@ -74,6 +74,11 @@ export class GroupNode implements INode {
|
||||
|
||||
}
|
||||
|
||||
export type OperatorListItem = {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
// 条件式ノード
|
||||
export class ConditionNode implements INode {
|
||||
index: number;
|
||||
@@ -83,13 +88,13 @@ export class ConditionNode implements INode {
|
||||
return this.parent.logicalOperator;
|
||||
};
|
||||
object: any; // 比較元
|
||||
operator: Operator; // 比較子
|
||||
operator: Operator | OperatorListItem; // 比較子
|
||||
value: any;
|
||||
get header():string{
|
||||
return 'generic';
|
||||
}
|
||||
|
||||
constructor(object: any, operator: Operator, value: any, parent: GroupNode) {
|
||||
constructor(object: any, operator: Operator | OperatorListItem, value: any, parent: GroupNode) {
|
||||
this.index=0;
|
||||
this.type = NodeType.Condition;
|
||||
this.object = object;
|
||||
@@ -113,10 +118,12 @@ export class ConditionNode implements INode {
|
||||
export class ConditionTree {
|
||||
root: GroupNode;
|
||||
maxIndex:number;
|
||||
queryString:string;
|
||||
|
||||
constructor() {
|
||||
this.maxIndex=0;
|
||||
this.root = new GroupNode(LogicalOperator.AND, null);
|
||||
this.queryString='';
|
||||
}
|
||||
|
||||
// ノード追加
|
||||
@@ -194,16 +201,53 @@ export class ConditionTree {
|
||||
} else {
|
||||
const condNode=node as ConditionNode;
|
||||
if (condNode.object && condNode.operator ) {
|
||||
let value=condNode.value;
|
||||
if(value && typeof value ==='object' && ('label' in value)){
|
||||
value =condNode.value.label;
|
||||
}
|
||||
return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${condNode.operator} '${value}'`;
|
||||
// let value=condNode.value;
|
||||
// if(value && typeof value ==='object' && ('label' in value)){
|
||||
// value =condNode.value.label;
|
||||
// }
|
||||
return `${condNode.object.sharedText} ${typeof condNode.operator === 'object' ? condNode.operator.label : condNode.operator} ${condNode.value.sharedText}`;
|
||||
// return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${typeof condNode.operator === 'object' ? condNode.operator.label : condNode.operator} '${value}'`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buildConditionQueryString(node:INode){
|
||||
if (node.type !== NodeType.Condition) {
|
||||
let conditionString = '';
|
||||
if(node.type !== NodeType.Root){
|
||||
conditionString = '(';
|
||||
}
|
||||
|
||||
const groupNode = node as GroupNode;
|
||||
for (let i = 0; i < groupNode.children.length; i++) {
|
||||
const childConditionString = this.buildConditionQueryString(groupNode.children[i]);
|
||||
if (childConditionString !== '') {
|
||||
conditionString += childConditionString;
|
||||
if (i < groupNode.children.length - 1) {
|
||||
conditionString += ` ${groupNode.logicalOperator.toLowerCase()} `;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(node.type !== NodeType.Root){
|
||||
conditionString += ')';
|
||||
}
|
||||
return conditionString;
|
||||
} else {
|
||||
const condNode=node as ConditionNode;
|
||||
if (condNode.object && condNode.operator ) {
|
||||
if (!condNode.object.code || !condNode.value.sharedText){
|
||||
return '';
|
||||
}
|
||||
return `${condNode.object.code} ${typeof condNode.operator === 'object' ? condNode.operator.value : condNode.operator} "${condNode.value.sharedText}"`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param node ノード移動
|
||||
@@ -325,7 +369,7 @@ export class ConditionTree {
|
||||
}
|
||||
|
||||
toJson():string{
|
||||
return JSON.stringify(this.root, (key, value) => {
|
||||
return JSON.stringify({queryString :this.queryString, ...this.root}, (key, value) => {
|
||||
if (key === 'parent') {
|
||||
return value ? value.type : null;
|
||||
}
|
||||
@@ -333,4 +377,7 @@ export class ConditionTree {
|
||||
});
|
||||
}
|
||||
|
||||
setQuery(queryString:string){
|
||||
this.queryString=queryString;
|
||||
}
|
||||
}
|
||||
|
||||
2
plugin/kintone-addins/.env.dev
Normal file
2
plugin/kintone-addins/.env.dev
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_SOURCE_MAP = inline
|
||||
VITE_PORT = 4173
|
||||
2
plugin/kintone-addins/.env.production
Normal file
2
plugin/kintone-addins/.env.production
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_SOURCE_MAP = false
|
||||
VITE_PORT = 4173
|
||||
@@ -4,17 +4,25 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "tsc && set \"SOURCE_MAP=true\" && vite build && vite preview",
|
||||
"build": "tsc && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"build:linux": "tsc && vite build && cp -ur dist/*.js ../../backend/Temp",
|
||||
"build:dev": "tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"preview": "vite preview",
|
||||
"ngrok": "ngrok http http://localhost:4173/",
|
||||
"vite": "vite dev"
|
||||
"dev": "run-p watch server ngrok",
|
||||
"watch": "vite build --watch --mode dev",
|
||||
"server": "vite dev --mode dev",
|
||||
"ngrok": "ngrok http 4173",
|
||||
|
||||
"build": "run-s b:production copy:windows",
|
||||
"build:dev": "run-s b:dev copy:windows",
|
||||
"build:linux": "run-s b:production copy:linux",
|
||||
"build:linux-dev": "run-s b:dev copy:linux",
|
||||
|
||||
"b:production": "vite build --mode production",
|
||||
"b:dev": "vite build --mode dev",
|
||||
"copy:windows": "xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"copy:linux": "cp -ur dist/*.js ../../backend/Temp"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jquery": "^3.5.24",
|
||||
"@types/node": "^20.8.9",
|
||||
"npm-run-all2": "^6.2.0",
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5",
|
||||
|
||||
74
plugin/kintone-addins/src/actions/current-field-get.ts
Normal file
74
plugin/kintone-addins/src/actions/current-field-get.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import {
|
||||
IAction,
|
||||
IActionResult,
|
||||
IActionNode,
|
||||
IActionProperty,
|
||||
IContext,
|
||||
} from "../types/ActionTypes";
|
||||
import { actionAddins } from ".";
|
||||
|
||||
|
||||
interface Props {
|
||||
displayName: string;
|
||||
field: Field;
|
||||
verName: VerName;
|
||||
}
|
||||
|
||||
interface VerName {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Field {
|
||||
name: string;
|
||||
type: string;
|
||||
code: string;
|
||||
label: string;
|
||||
noLabel: boolean;
|
||||
required: boolean;
|
||||
minLength: string;
|
||||
maxLength: string;
|
||||
expression: string;
|
||||
hideExpression: boolean;
|
||||
unique: boolean;
|
||||
defaultValue: string;
|
||||
}
|
||||
|
||||
export class CurrentFieldGetAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
currentFieldGetProps: Props;
|
||||
constructor() {
|
||||
this.name = "フィールドの値を取得する";
|
||||
this.actionProps = [];
|
||||
this.currentFieldGetProps = {} as Props;
|
||||
this.register();
|
||||
}
|
||||
|
||||
async process(
|
||||
prop: IActionNode,
|
||||
event: any,
|
||||
context: IContext
|
||||
): Promise<IActionResult> {
|
||||
this.currentFieldGetProps = prop.ActionValue as Props;
|
||||
this.actionProps = prop.actionProps;
|
||||
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: "",
|
||||
} as IActionResult;
|
||||
|
||||
try {
|
||||
context.variables[this.currentFieldGetProps.verName.name] = context.record[this.currentFieldGetProps.field.code].value;
|
||||
} catch (error) {
|
||||
console.error("CurrentFieldGetAction error", error);
|
||||
result.canNext = false;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
}
|
||||
|
||||
new CurrentFieldGetAction();
|
||||
166
plugin/kintone-addins/src/actions/data-mapping.ts
Normal file
166
plugin/kintone-addins/src/actions/data-mapping.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
import {
|
||||
IAction,
|
||||
IActionResult,
|
||||
IActionNode,
|
||||
IActionProperty,
|
||||
IContext,
|
||||
} from "../types/ActionTypes";
|
||||
import { actionAddins } from ".";
|
||||
|
||||
interface Props {
|
||||
displayName: string;
|
||||
sources: Sources;
|
||||
dataMapping: DataMapping[];
|
||||
}
|
||||
|
||||
interface DataMapping {
|
||||
id: string;
|
||||
from: From;
|
||||
to: To;
|
||||
}
|
||||
|
||||
interface To {
|
||||
app: App;
|
||||
fields: Field[];
|
||||
isDialogVisible: boolean;
|
||||
}
|
||||
|
||||
interface Field {
|
||||
name: string;
|
||||
type: string;
|
||||
code: string;
|
||||
label: string;
|
||||
noLabel: boolean;
|
||||
required: boolean;
|
||||
minLength: string;
|
||||
maxLength: string;
|
||||
expression: string;
|
||||
hideExpression: boolean;
|
||||
unique: boolean;
|
||||
defaultValue: string;
|
||||
}
|
||||
|
||||
interface From {
|
||||
sharedText: string;
|
||||
_t: string;
|
||||
id: string;
|
||||
objectType: string;
|
||||
name: Name;
|
||||
actionName: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
interface Name {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Sources {
|
||||
app: App;
|
||||
}
|
||||
|
||||
interface App {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
createdate: string;
|
||||
}
|
||||
|
||||
export class DataMappingAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
dataMappingProps: Props;
|
||||
constructor() {
|
||||
this.name = "データマッピング";
|
||||
this.actionProps = [];
|
||||
this.dataMappingProps = {} as Props;
|
||||
this.register();
|
||||
}
|
||||
|
||||
async process(
|
||||
prop: IActionNode,
|
||||
event: any,
|
||||
context: IContext
|
||||
): Promise<IActionResult> {
|
||||
this.actionProps = prop.actionProps;
|
||||
this.dataMappingProps = prop.ActionValue as Props;
|
||||
console.log(prop.ActionValue);
|
||||
|
||||
// this.initTypedActionProps();
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: "",
|
||||
} as IActionResult;
|
||||
try {
|
||||
const record = this.dataMappingProps.dataMapping
|
||||
.filter(
|
||||
(item) =>
|
||||
item.from.objectType === "variable" &&
|
||||
item.from.name.name &&
|
||||
item.to.app &&
|
||||
item.to.fields &&
|
||||
item.to.fields.length > 0
|
||||
)
|
||||
.reduce((accumulator, item) => {
|
||||
return {...accumulator, [item.to.fields[0].code]: {
|
||||
value: getValueByPath(context.variables, item.from.name.name),
|
||||
}};
|
||||
}, {});
|
||||
if (record && Object.keys(record).length > 0) {
|
||||
await kintone.api(kintone.api.url("/k/v1/record.json", true), "POST", {
|
||||
app: this.dataMappingProps.sources.app.id,
|
||||
record: record,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("DataMappingAction error", error);
|
||||
result.canNext = false;
|
||||
}
|
||||
console.log("dataMappingProps", this.dataMappingProps);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
}
|
||||
|
||||
new DataMappingAction();
|
||||
|
||||
const getValueByPath = (obj: any, path: string) => {
|
||||
return path.split(".").reduce((o, k) => (o || {})[k], obj);
|
||||
};
|
||||
|
||||
type Resp = { records: RespRecordType[] };
|
||||
|
||||
type RespRecordType = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
value: any;
|
||||
};
|
||||
};
|
||||
|
||||
type Result = {
|
||||
type: string;
|
||||
value: any[];
|
||||
};
|
||||
|
||||
const selectData = async (appid: string, field: string): Promise<Result> => {
|
||||
return kintone
|
||||
.api(kintone.api.url("/k/v1/records", true), "GET", {
|
||||
app: appid ?? kintone.app.getId(),
|
||||
fields: [field],
|
||||
})
|
||||
.then((resp: Resp) => {
|
||||
const result: Result = { type: "", value: [] };
|
||||
resp.records.forEach((element) => {
|
||||
for (const [key, value] of Object.entries(element)) {
|
||||
if (result.type === "") {
|
||||
result.type = value.type;
|
||||
}
|
||||
result.value.push(value.value);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
};
|
||||
374
plugin/kintone-addins/src/actions/data-processing.ts
Normal file
374
plugin/kintone-addins/src/actions/data-processing.ts
Normal file
@@ -0,0 +1,374 @@
|
||||
import {
|
||||
IAction,
|
||||
IActionResult,
|
||||
IActionNode,
|
||||
IActionProperty,
|
||||
IContext,
|
||||
} from "../types/ActionTypes";
|
||||
import { actionAddins } from ".";
|
||||
|
||||
interface Props {
|
||||
displayName: string;
|
||||
sources: Sources;
|
||||
condition: string;
|
||||
conditionO: Condition;
|
||||
verName: VerName;
|
||||
}
|
||||
|
||||
interface Condition {
|
||||
queryString: string;
|
||||
index: number;
|
||||
type: string;
|
||||
children: Child[];
|
||||
parent: null;
|
||||
logicalOperator: string;
|
||||
}
|
||||
|
||||
interface Child {
|
||||
index: number;
|
||||
type: string;
|
||||
parent: string;
|
||||
object: Object;
|
||||
operator: ChildOperator;
|
||||
value: Value;
|
||||
}
|
||||
|
||||
interface Value {
|
||||
sharedText: string;
|
||||
_t: string;
|
||||
objectType: string;
|
||||
actionName: string;
|
||||
displayName: string;
|
||||
name: Name;
|
||||
}
|
||||
|
||||
interface Name {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ChildOperator {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface Object {
|
||||
sharedText: string;
|
||||
_t: string;
|
||||
name: string;
|
||||
objectType: string;
|
||||
type: string;
|
||||
code: string;
|
||||
label: string;
|
||||
noLabel: boolean;
|
||||
required: boolean;
|
||||
minLength: string;
|
||||
maxLength: string;
|
||||
expression: string;
|
||||
hideExpression: boolean;
|
||||
unique: boolean;
|
||||
defaultValue: string;
|
||||
}
|
||||
|
||||
interface VerName {
|
||||
name: string;
|
||||
actionName: string;
|
||||
displayName: string;
|
||||
vars: Var[];
|
||||
}
|
||||
|
||||
interface Var {
|
||||
id: string;
|
||||
field: Field2;
|
||||
logicalOperator: LogicalOperator;
|
||||
vName: string;
|
||||
}
|
||||
|
||||
interface LogicalOperator {
|
||||
operator: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Field2 {
|
||||
sharedText: string;
|
||||
_t: string;
|
||||
name: string;
|
||||
objectType: string;
|
||||
type: string;
|
||||
code: string;
|
||||
label: string;
|
||||
noLabel: boolean;
|
||||
required: boolean;
|
||||
minLength: string;
|
||||
maxLength: string;
|
||||
expression: string;
|
||||
hideExpression: boolean;
|
||||
unique: boolean;
|
||||
defaultValue: string;
|
||||
}
|
||||
|
||||
interface Sources {
|
||||
app: App;
|
||||
fields: Field[];
|
||||
}
|
||||
|
||||
interface Field {
|
||||
name: string;
|
||||
type: string;
|
||||
code: string;
|
||||
label: string;
|
||||
noLabel: boolean;
|
||||
required: boolean;
|
||||
minLength: string;
|
||||
maxLength: string;
|
||||
expression: string;
|
||||
hideExpression: boolean;
|
||||
unique: boolean;
|
||||
defaultValue: string;
|
||||
}
|
||||
|
||||
interface App {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
createdate: string;
|
||||
}
|
||||
|
||||
export class DataProcessingAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
dataProcessingProps: Props | null;
|
||||
constructor() {
|
||||
this.name = "データ処理";
|
||||
this.actionProps = [];
|
||||
this.dataProcessingProps = null;
|
||||
this.register();
|
||||
}
|
||||
|
||||
async process(
|
||||
nodes: IActionNode,
|
||||
event: any,
|
||||
context: IContext
|
||||
): Promise<IActionResult> {
|
||||
this.actionProps = nodes.actionProps;
|
||||
this.dataProcessingProps = nodes.ActionValue as Props;
|
||||
this.dataProcessingProps.conditionO = JSON.parse(
|
||||
this.dataProcessingProps.condition
|
||||
);
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: "",
|
||||
} as IActionResult;
|
||||
try {
|
||||
if (!this.dataProcessingProps) {
|
||||
return result;
|
||||
}
|
||||
|
||||
const data = await selectData(
|
||||
varGet(
|
||||
this.dataProcessingProps.conditionO.queryString,
|
||||
context.variables
|
||||
)
|
||||
);
|
||||
console.log("data ", data);
|
||||
|
||||
context.variables[this.dataProcessingProps.verName.name] =
|
||||
this.dataProcessingProps.verName.vars.reduce((acc, f) => {
|
||||
const v = calc(f, data);
|
||||
if (v) {
|
||||
acc[f.vName] = calc(f, data);
|
||||
}
|
||||
return acc;
|
||||
}, {} as AnyObject);
|
||||
|
||||
console.log("context ", context);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
event.error = error;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
}
|
||||
|
||||
new DataProcessingAction();
|
||||
|
||||
const varGet = (str: string, vars: any) => {
|
||||
console.log(str);
|
||||
|
||||
const regex = /var\((.*?)\)/g;
|
||||
let match;
|
||||
while ((match = regex.exec(str)) !== null) {
|
||||
const varName = match[1];
|
||||
if (varName in vars) {
|
||||
str = str.replace(match[0], vars[varName]);
|
||||
} else {
|
||||
throw new Error(`変数${varName}が見つかりません`);
|
||||
}
|
||||
}
|
||||
console.log(str);
|
||||
return str;
|
||||
};
|
||||
|
||||
const selectData = async (query?: string) => {
|
||||
return kintone
|
||||
.api(kintone.api.url("/k/v1/records", true), "GET", {
|
||||
app: kintone.app.getId(),
|
||||
query: query,
|
||||
})
|
||||
.then((resp: Resp) => {
|
||||
const result: Result = {};
|
||||
resp.records.forEach((element) => {
|
||||
for (const [key, value] of Object.entries(element)) {
|
||||
if (!result[key]) {
|
||||
result[key] = { type: value.type, value: [] };
|
||||
}
|
||||
result[key].value.push(value.value);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
};
|
||||
|
||||
type Resp = { records: RespRecordType[] };
|
||||
|
||||
type RespRecordType = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
value: any;
|
||||
};
|
||||
};
|
||||
|
||||
type Result = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
value: any[];
|
||||
};
|
||||
};
|
||||
|
||||
type AnyObject = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const ERROR_TYPE = "ERROR_TYPE";
|
||||
|
||||
const calc = (f: Var, result: Result) => {
|
||||
const type = typeCheck(f.field.type);
|
||||
if (!type) {
|
||||
return ERROR_TYPE;
|
||||
}
|
||||
|
||||
const fun =
|
||||
calcFunc[
|
||||
`${type}_${Operator[f.logicalOperator.operator as keyof typeof Operator]}`
|
||||
];
|
||||
if (!fun) {
|
||||
return ERROR_TYPE;
|
||||
}
|
||||
const values = result[f.field.code].value;
|
||||
if (!values) {
|
||||
return null;
|
||||
}
|
||||
return fun(values);
|
||||
};
|
||||
|
||||
const typeCheck = (type: string) => {
|
||||
switch (type) {
|
||||
case "RECORD_NUMBER":
|
||||
case "NUMBER":
|
||||
return CalcType.NUMBER;
|
||||
case "SINGLE_LINE_TEXT":
|
||||
case "MULTI_LINE_TEXT":
|
||||
case "RICH_TEXT":
|
||||
return CalcType.STRING;
|
||||
case "DATE":
|
||||
return CalcType.DATE;
|
||||
case "TIME":
|
||||
return CalcType.TIME;
|
||||
case "DATETIME":
|
||||
case "UPDATED_TIME":
|
||||
return CalcType.DATETIME;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
enum Operator {
|
||||
SUM = "SUM",
|
||||
AVG = "AVG",
|
||||
MAX = "MAX",
|
||||
MIN = "MIN",
|
||||
COUNT = "COUNT",
|
||||
FIRST = "FIRST",
|
||||
}
|
||||
|
||||
enum CalcType {
|
||||
NUMBER = "number",
|
||||
STRING = "string",
|
||||
DATE = "date",
|
||||
TIME = "time",
|
||||
DATETIME = "datetime",
|
||||
}
|
||||
|
||||
const calcFunc: Record<string, (value: string[]) => string | null> = {
|
||||
[`${CalcType.NUMBER}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.STRING}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.DATE}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.TIME}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.DATETIME}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
|
||||
[`${CalcType.NUMBER}_${Operator.SUM}`]: (value: string[]) =>
|
||||
value.reduce((acc, v) => acc + Number(v), 0).toString(),
|
||||
[`${CalcType.NUMBER}_${Operator.AVG}`]: (value: string[]) =>
|
||||
(value.reduce((acc, v) => acc + Number(v), 0) / value.length).toString(),
|
||||
[`${CalcType.NUMBER}_${Operator.MAX}`]: (value: string[]) =>
|
||||
Math.max(...value.map(Number)).toString(),
|
||||
[`${CalcType.NUMBER}_${Operator.MIN}`]: (value: string[]) =>
|
||||
Math.min(...value.map(Number)).toString(),
|
||||
|
||||
[`${CalcType.STRING}_${Operator.SUM}`]: (value: string[]) => value.join(" "),
|
||||
|
||||
[`${CalcType.DATE}_${Operator.MAX}`]: (value: string[]) =>
|
||||
value.reduce((maxDate, currentDate) =>
|
||||
maxDate > currentDate ? maxDate : currentDate
|
||||
),
|
||||
|
||||
[`${CalcType.DATE}_${Operator.MIN}`]: (value: string[]) =>
|
||||
value.reduce((minDate, currentDate) =>
|
||||
minDate < currentDate ? minDate : currentDate
|
||||
),
|
||||
|
||||
[`${CalcType.TIME}_${Operator.MAX}`]: (value: string[]) =>
|
||||
value.reduce((maxTime, currentTime) =>
|
||||
maxTime > currentTime ? maxTime : currentTime
|
||||
),
|
||||
[`${CalcType.TIME}_${Operator.MIN}`]: (value: string[]) =>
|
||||
value.reduce((minTime, currentTime) =>
|
||||
minTime < currentTime ? minTime : currentTime
|
||||
),
|
||||
|
||||
[`${CalcType.DATETIME}_${Operator.MAX}`]: (value: string[]) =>
|
||||
value.reduce((maxDateTime, currentDateTime) =>
|
||||
new Date(maxDateTime) > new Date(currentDateTime)
|
||||
? maxDateTime
|
||||
: currentDateTime
|
||||
),
|
||||
|
||||
[`${CalcType.DATETIME}_${Operator.MIN}`]: (value: string[]) =>
|
||||
value.reduce((minDateTime, currentDateTime) =>
|
||||
new Date(minDateTime) < new Date(currentDateTime)
|
||||
? minDateTime
|
||||
: currentDateTime
|
||||
),
|
||||
[`${CalcType.STRING}_${Operator.FIRST}`]: (value: string[]) => {
|
||||
return value[0];
|
||||
},
|
||||
};
|
||||
@@ -6,6 +6,9 @@ import '../actions/field-shown';
|
||||
import '../actions/error-show';
|
||||
import '../actions/button-add';
|
||||
import '../actions/condition-action';
|
||||
import '../actions/data-processing';
|
||||
import '../actions/data-mapping';
|
||||
import '../actions/current-field-get';
|
||||
import '../actions/regular-check';
|
||||
import '../actions/mail-check';
|
||||
import '../actions/counter-check';
|
||||
@@ -49,7 +52,7 @@ export class ActionProcess{
|
||||
result = await action.process(nextAction,this.event,this.context);
|
||||
}
|
||||
let nextInput = '';
|
||||
//outputPoints一㝤以上㝮場坈〝次㝮InputPoint㝯戻り値を設定㝙る
|
||||
//outputPoints一つ以上の場合、次のInputPointは戻り値を設定する
|
||||
if(nextAction.outputPoints && nextAction.outputPoints.length>1){
|
||||
nextInput = result.result||'';
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
// vite.config.js
|
||||
import { defineConfig } from "vite";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
|
||||
import checker from "vite-plugin-checker";
|
||||
|
||||
const sourcemap = process.env.SOURCE_MAP === "true";
|
||||
export default ({ mode }) => {
|
||||
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
|
||||
|
||||
export default defineConfig({
|
||||
return defineConfig({
|
||||
plugins: [
|
||||
checker({
|
||||
typescript: true,
|
||||
@@ -21,6 +22,11 @@ export default defineConfig({
|
||||
// assetFileNames:'alc_kintone_style.css'
|
||||
},
|
||||
},
|
||||
sourcemap: sourcemap,
|
||||
sourcemap: process.env.VITE_SOURCE_MAP,
|
||||
},
|
||||
server: {
|
||||
port: process.env.VITE_PORT,
|
||||
// open: "/dist/alc_runtime.js",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user