alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

データ処理書き込み完了

Browse Source
This commit is contained in:
Mouriya
2024-05-17 23:32:14 +09:00
parent 61ac281134
commit cf4209333d
5 changed files with 197 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
frontend/src/components/right/DataProcessing.vue
View File

@@ -1,34 +1,66 @@
<template>
<q-input v-model="value" type="text" :label="displayName" label-color="primary">
<q-tooltip persistent no-parent-event v-model="tooltipEnable" anchor="center left" self="center right">
<div style="max-width: 24vw; ">
<div v-if="p">
<div class="row">字段名称:</div>
<div class="row q-col-gutter-x-xs q-col-gutter-y-sm">
<div class="col-4" style="min-width: 8vw;"
v-for="(item, index) in sources?.props?.modelValue?.fields" :key="index">
<div style="pointer-events: auto;">{{ item.type }}</div>
<div><i>{{ item.label }}</i></div>
<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-for="(item) in processingObjectsInputDisplay" :key="item">{{ item }}</div>
</q-card-section>
</q-card>
</template>
</q-field>
<show-dialog v-model:visible="dgIsShow" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
<div class="q-mx-md q-mb-md">
<q-input v-model="processingProps.name" type="text" label-color="primary" label="変数名を入力してください"
placeholder="varName" />
</div>
<div class="q-mx-md">
<div class="row q-col-gutter-x-xs flex-center">
<div class="col-5">
<div class="q-mx-xs">数据源</div>
</div>
<div class="col-2">
<div class="q-mx-xs">运算符</div>
</div>
<div class="col-4">
<div class="q-mx-xs">目标变量</div>
</div>
<div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addProcessingObject" />
</div>
</div>
<div class="q-my-sm" v-for="(item, index) in processingObjects" :key="item.id">
<div class="row q-col-gutter-x-xs flex-center">
<div class="col-5">
<ConditionObject v-model="item.field" />
</div>
<div class="col-2">
<q-select v-model="item.logicalOperator" :options="logicalOperators" outlined
dense></q-select>
</div>
<div class="col-4">
<q-input v-model="item.vName" type="text" label="Label" outlined dense />
</div>
<div class="col-1">
<q-btn flat round dense icon="delete" size="sm"
@click="() => deleteProcessingObject(index)" />
</div>
</div>
<div class="row q-mt-md">示例:</div>
<div class="row" style="pointer-events: auto;"> {{ p }}</div>
</div>
<div v-else>
请先选择计算来源
</div>
</div>
</q-tooltip>
<template v-slot:append>
<q-btn round size="sm" padding="xs" color="secondary" icon="school"
@click="() => tooltipEnable = !tooltipEnable" />
</template>
</q-input>
</show-dialog>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
import ConditionObject from '../ConditionEditor/ConditionObject.vue';
import ShowDialog from '../ShowDialog.vue';
type Props = {
props?: {
@@ -39,13 +71,40 @@ type Props = {
label: string;
code: string;
}[]
}
} | string
}
};
type ProcessingObjectType = {
field?: {
name: string | {
name: string;
};
objectType: string;
type: string;
code: string;
label: string;
noLabel: boolean;
};
logicalOperator?: string;
vName?: string;
id: string;
}
type ValueType = {
name: string;
actionName: string,
displayName: string,
vars: ProcessingObjectType[];
}
export default defineComponent({
name: 'DataProcessing',
inheritAttrs: false,
components: {
ShowDialog,
ConditionObject,
},
props: {
context: {
type: Array<Props>,
@@ -60,34 +119,70 @@ export default defineComponent({
default: '',
},
modelValue: {
type: String,
default: '',
type: Object as () => ValueType,
},
},
setup(props, { emit }) {
const value = ref(' ');
const tooltipEnable = ref(false);
const sources = props.context.find(element => element?.props?.name === 'sources');
const source = props.context.find(element => element?.props?.name === 'sources')
const p = computed(() => {
const fields = sources?.props?.modelValue?.fields
if (!fields || fields.length === 0) {
return '';
} else if (fields.length === 1) {
return fields[0].type;
} else if (fields.length === 2) {
return fields.map(field => field.type).join('+');
} else {
return `(${fields[0].type} + ${fields[1].type}) * ${fields[2].type}`;
}
if (source) {
provide('sourceFields', computed(() => {
const modelValue = source.props?.modelValue;
if (modelValue && typeof modelValue !== 'string') {
return modelValue.fields;
}
return null;
}));
}
const actionName = props.context.find(element => element?.props?.name === 'displayName')
const processingProps: ValueType = props.modelValue && props.modelValue.vars
? props.modelValue
: reactive({
name: '',
actionName: actionName?.props?.modelValue as string,
displayName: '結果（戻り値）',
vars: [{ id: uuidv4() }]
});
const closeDg = () => {
emit('update:modelValue', processingProps
);
}
const processingObjects = processingProps.vars;
const deleteProcessingObject = (index: number) => processingObjects.length === 1
? processingObjects.splice(0, processingObjects.length, { id: uuidv4() })
: processingObjects.splice(index, 1);
const processingObjectsInputDisplay = computed(() =>
processingObjects ?
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 `${processingProps.name}.${item.vName} = ${item.logicalOperator}(${name})`
})
: ''
);
watchEffect(() => {
emit('update:modelValue', processingProps);
});
return {
sources,
p,
value,
tooltipEnable,
uuidv4,
dgIsShow: ref(false),
closeDg,
processingObjects,
processingProps,
addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
deleteProcessingObject,
logicalOperators: reactive(['MAX', 'SUM']),
processingObjectsInputDisplay,
};
},
});