fang create

frontend/src/components/right/ActionProperty.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div v-for="(item, index) in componentData" :key="index">
+      <component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import InputText from '../right/InputText.vue';
+import SelectBox from '../right/SelectBox.vue';
+import DatePicker from '../right/DatePicker.vue';
+import FieldInput from '../right/FieldInput.vue';
+
+export default defineComponent({
+  name: 'ActionProperty',
+  components: {
+    InputText,
+    SelectBox,
+    DatePicker,
+    FieldInput
+  },
+  props: {
+    jsonData: {
+      type: Object,
+      required: true,
+    },
+    jsonValue:{
+      type: Object,
+      required: false,
+    }
+  },
+  computed: {
+      componentData() {
+      return this.jsonData.elements.map((element: any) => {
+        if(this.jsonValue != undefined )
+        {
+          if(this.jsonValue.hasOwnProperty(element.props.name))
+          {
+            element.props.modelValue = this.jsonValue[element.props.name];
+          }
+          else
+          {
+            element.props.modelValue = '';
+          }
+
+        }
+        return {
+          component: element.component,
+          props: element.props,
+        };
+      });
+    },
+  },
+});
+</script>

frontend/src/components/right/DatePicker.vue

@@ -0,0 +1,45 @@
+<template>
+
+  <q-input v-model="selectedDate" :label="placeholder" mask="date" :rules="['date']">
+    <template v-slot:append>
+      <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <q-date v-model="selectedDate">
+            <div class="row items-center justify-end">
+              <q-btn v-close-popup label="Close" color="primary" flat />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref ,watchEffect} from 'vue';
+
+export default defineComponent({
+  name: 'DatePicker',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const selectedDate = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedDate.value);
+    });
+
+    return {
+      selectedDate
+    };
+  }
+});
+</script>

frontend/src/components/right/FieldInput.vue

@@ -0,0 +1,62 @@
+<template>
+<q-input v-model="selectedField" :label="placeholder">
+        <template v-slot:append>
+          <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+        </template>
+</q-input>
+<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
+  <field-select ref="appDg" name="フィールド" type="single" :appId="1"></field-select>
+</show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref ,watchEffect} from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+
+export default defineComponent({
+  name: 'FieldInput',
+  components: {
+    ShowDialog,
+    FieldSelect,
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+    const appDg = ref();
+    const show = ref(false);
+    const selectedField = ref(props.modelValue);
+
+    const showDg = () => {
+      show.value = true;
+    };
+
+    const closeDg = (val:string) => {
+      if (val == 'OK') {
+        selectedField.value = appDg.value.selected[0].name;
+      }
+    };
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedField.value);
+    });
+
+    return {
+      appDg,
+      show,
+      showDg,
+      closeDg,
+      selectedField,
+    };
+  }
+});
+</script>

frontend/src/components/right/InputText.vue

@@ -0,0 +1,33 @@
+<template>
+  <q-input :label="placeholder"  v-model="inputValue"/>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,watchEffect } from 'vue';
+
+export default defineComponent({
+  name: 'InputText',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+    const inputValue = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', inputValue.value);
+    });
+
+    return {
+      inputValue,
+    };
+  },
+});
+</script>

frontend/src/components/right/SelectBox.vue

@@ -0,0 +1,36 @@
+<template>
+  <q-select v-model="selectedValue" :label="placeholder" :options="options"/>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,watchEffect } from 'vue';
+
+export default defineComponent({
+  name: 'SelectBox',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const selectedValue = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedValue.value);
+    });
+
+    return {
+      selectedValue
+    };
+  },
+});
+</script>