App,Field,Action Select Dialogue

frontend/src/components/ActionSelect.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="q-pa-md">
+    <q-table :title="name+'一覧'" row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+  </div>
+</template>
+<script>
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'actionSelect',
+  props: {
+    name: String,
+    type: String
+  },
+  setup() {
+  const columns = [
+  { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
+  { name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
+  { name: 'content', label: '内容', field: 'content', sortable: true }
+  ]
+  const rows = reactive([])
+    onMounted( () => {
+        api.get('http://127.0.0.1:8000/api/kintone/1').then(res =>{
+         res.data.forEach((item) =>
+        {
+          rows.push({name:item.name,desc:item.desc,content:item.content});
+        }
+        )
+      });
+      });
+    return {
+      columns,
+      rows,
+      selected: ref([]),
+    }
+  },
+
+}
+</script>

frontend/src/components/AppSelect.vue

@@ -1,11 +1,11 @@
-<template v-slot:list>
+<template>
   <div class="q-pa-md">
-    ppppppp
+    <q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script>
-import { ref, onMounted } from 'vue'
-import axios from 'axios'
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
 
 export default {
   name: 'appSelect',
@@ -14,14 +14,27 @@ export default {
     type: String
   },
   setup() {
+  const columns = [
+  { name: 'id', required: true,label: 'アプリID',align: 'left',field: 'id',sortable: true},
+  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
+  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
+  { name: 'createdate', label: '作成日時', field: 'createdate' }
+  ]
+  const rows = reactive([])
+    onMounted( () => {
+        api.get('allapps').then(res =>{
+         res.data.apps.forEach((item) =>
+        {
+          rows.push({id:item.appId,name:item.name,creator:item.creator.name,createdate:item.createdAt});
+        }
+        )
+      });
+      });
     return {
+      columns,
+      rows,
       selected: ref([]),
-    },
-      onMounted(() => {
-        console.log('Mounted');
-        axios.get('http://127.0.0.1:8000/api/v1/allapps')
-          .then(res => console.log(res.data))
-      })
+    }
   },
 
 }

frontend/src/components/FieldSelect.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="q-pa-md">
+    <q-table :title="name+'一覧'"  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+  </div>
+</template>
+<script>
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'fieldSelect',
+  props: {
+    name: String,
+    type: String,
+    appId:Number
+  },
+  setup(props) {
+  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( () => {
+        api.get('appfields', {
+              params:{
+                app: props.appId
+              }
+          }).then(res =>{
+         let fields = res.data.properties;
+         console.log(fields);
+         Object.keys(fields).forEach((key) =>
+        {
+          rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
+        }
+        )
+      });
+      });
+    return {
+      columns,
+      rows,
+      selected: ref([]),
+    }
+  },
+
+}
+</script>

frontend/src/components/ShowDialog.vue

@@ -7,7 +7,7 @@
         </q-card-section>
 
         <q-card-section class="q-pt-none">
-         <slot name="list"></slot>
+         <slot></slot>
         </q-card-section>
         <q-card-actions align="right" class="text-primary">
           <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
@@ -22,6 +22,7 @@
 export default {
   name: 'showDialog',
   props: {
+    name:String,
     visible: Boolean,
   },
   emits: [

frontend/src/pages/RuleEditor.vue

@@ -9,96 +9,67 @@
       </div>
       <div style="min-height: 100vh;">
         <div class="q-pa-md">
-            <q-btn-dropdown
-              split
-              color="primary"
-              label="ルール新規作成"
-              size="lg"
-            >
-              <q-list>
-                <q-item
-                    v-for="action in actions"
-                    clickable v-close-popup
-                    @click="onItemClick"
-                    :key="action"
-                  >
-                  <q-item-section>
-                    <q-item-label>{{ action }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
+          <q-btn-dropdown split color="primary" label="ルール新規作成" size="lg">
+            <q-list>
+              <q-item v-for="action in actions" clickable v-close-popup @click="onItemClick" :key="action">
+                <q-item-section>
+                  <q-item-label>{{ action }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
         </div>
         <div class="q-pa-md">
-              <q-btn label="アプリ選択" color="primary" @click="showDg()" />
-              <show-dialog v-model:visible="show">
-               <app-select></app-select>
-              </show-dialog>
-            </div>
+          <q-select v-model="model" :options="options" label="Standard"/>
+          <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
+          <show-dialog v-model:visible="show" :name="model" @close="closeDg">
+            <template v-if="model=='アプリ'">
+              <app-select ref="appDg" :name="model" type="single"></app-select>
+            </template>
+            <template v-if="model=='フィールド'">
+              <field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
+            </template>
+            <template v-if="model=='アクション'">
+              <action-select ref="appDg" :name="model" type="single"></action-select>
+            </template>
+          </show-dialog>
+        </div>
       </div>
 
     </div>
   </q-page>
-
 </template>
 
 <script setup lang="ts">
 import ShowDialog from 'components/ShowDialog.vue';
 import AppSelect from 'components/AppSelect.vue';
+import FieldSelect from 'components/FieldSelect.vue';
+import ActionSelect from 'components/ActionSelect.vue';
 import { ref } from 'vue'
-let name = 'アプリ'
 let show = ref(false);
-let type = 'multiple';
-let columns = [
-  {
-    name: 'id',
-    required: true,
-    label: 'アプリID',
-    align: 'left',
-    field: 'id',
-    sortable: true
-  },
-  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
-  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
-  { name: 'createdate', label: '作成日時', field: 'createdate' }
-]
-
-let rows = [
-  {
-    id:1,
-    name: '日報アプリ１',
-    creator: '日報　太郎',
-    createdate: '2023/07/22 11:21:48'
-  },
-  {
-    id:2,
-    name: '日報アプリ２',
-    creator: '日報　太郎',
-    createdate: '2023/07/25 14:10:56'
-  },
-]
-let appDg = ref(null);
+let appDg = ref();
+let model = ref('アプリ');
+let options = ['アプリ','フィールド','アクション']
 const showDg = () => {
   show.value = true;
 };
 
 
-const closeDg = (val) => {
-  if(val == 'OK')
-  {
-    alert(JSON.stringify(appDg.value.selected));
+const closeDg = (val:string) => {
+  if (val == 'OK') {
+      alert(JSON.stringify(appDg.value.selected))
   }
 
 };
 interface Props {
   title: string;
-  actions:string[];
+  actions: string[];
 }
 const props = withDefaults(defineProps<Props>(), {
-  title:"ルールエディター",
-  actions:()=>["フィールド制御","一覧画面","その他"]
+  title: "ルールエディター",
+  actions: () => ["フィールド制御", "一覧画面", "その他"]
 });
-function onItemClick(evt: Event){
-    return;
+function onItemClick(evt: Event) {
+  return;
 }
 </script>