2つのデータ計算コンポーネントを追加する

2024-05-13 06:56:44 +09:00
parent 371e2ee073
commit 64d2cadd82
6 changed files with 247 additions and 120 deletions
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -0,0 +1,95 @@
+<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>
+                    </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>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+
+type Props = {
+    props?: {
+        name: string;
+        modelValue?: {
+            fields: {
+                type: string;
+                label: string;
+                code: string;
+            }[]
+        }
+    }
+};
+
+export default defineComponent({
+    name: 'DataProcessing',
+    inheritAttrs: false,
+    props: {
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: String,
+            default: '',
+        },
+    },
+
+    setup(props, { emit }) {
+        const value = ref(' ');
+        const tooltipEnable = ref(false);
+        const sources = 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}`;
+            }
+        });
+
+        return {
+            sources,
+            p,
+            value,
+            tooltipEnable,
+        };
+    },
+});
+</script>
+<style lang="scss"></style>