Add Dialogue

frontend/src/pages/RuleEditor.vue

@@ -29,12 +29,64 @@
               </q-list>
             </q-btn-dropdown>
         </div>
+        <div class="q-pa-md">
+              <q-btn label="アプリ選択" color="primary" @click="showDg()" />
+              <show-dialog ref="appDg" :name="name" v-model:visible="show" :type="type" :columns="columns" :rows="rows" @close="closeDg"></show-dialog>
+            </div>
       </div>
+
     </div>
   </q-page>
+
 </template>
 
 <script setup lang="ts">
+import ShowDialog from 'components/ShowDialog.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);
+const showDg = () => {
+  show.value = true;
+};
+
+
+const closeDg = (val) => {
+  if(val == 'OK')
+  {
+    alert(JSON.stringify(appDg.value.selected));
+  }
+
+};
 interface Props {
   title: string;
   actions:string[];