変数設定を追加

frontend/src/components/ConditionObjects.vue

@@ -1,53 +1,57 @@
 <template>
-  <div class="q-pa-md">
-    <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
-    </div>
-    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
-  </div>
+  <div class="q-gutter-y-md" style="max-width: 600px;">
+    <q-card >
+     <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          active-color="white"
+          active-bg-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab name="fields" label="フィールド"></q-tab>
+          <q-tab name="vars" label="変数"></q-tab>
+        </q-tabs>
+
+        <q-separator></q-separator>
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="fields">
+              <field-list v-model="selected" type="single" :appId="appId"></field-list>
+            </q-tab-panel>
+
+          <q-tab-panel name="vars" >
+            <variable-list v-model="selected" type="single" :vars="vars"></variable-list>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+</div>
 </template>
-<script>
-import { ref,onMounted,reactive } from 'vue'
-import { api } from 'boot/axios';
+<script lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import FieldList from './FieldList.vue';
+import VariableList from './VariableList.vue';
 
 export default {
   name: 'ConditionObjects',
+  components:{
+    FieldList,
+    VariableList
+  },
   props: {
     name: String,
     type: String,
-    appId:Number
+    appId: Number,
+    vars: Array
   },
   setup(props) {
-    const isLoaded=ref(false);
-    const columns = [
-    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
-    { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
-    { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
-    ]
-    const rows = reactive([])
-      onMounted( async () => {
-          const res = await api.get('api/v1/appfields', {
-                params:{
-                  app: props.appId
-                }
-            });
-            let fields = res.data.properties;
-            console.log(fields);
-            Object.keys(fields).forEach((key) =>
-            {
-              const fld=fields[key];
-              // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-              rows.push({name:fld.label,objectType:'field',...fld});
-            });
-            isLoaded.value=true;
-        });
 
-      return {
-        columns,
-        rows,
-        selected: ref([]),
-        isLoaded
-      }
+    return {
+      tab: ref('fields'),
+      selected: ref([])
+    }
   },
 
 }