Add Dialogue

frontend/src/components/ShowDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+
+
+    <q-dialog :model-value="visible" persistent>
+      <q-card style="min-width: 350px">
+        <q-card-section>
+          <div class="text-h6">{{ name }}選択</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <div class="q-pa-md">
+            <q-table :title="name+'リスト'" :rows="rows" :columns="columns" row-key="name" :selection="type"
+              v-model:selected="selected" />
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right" class="text-primary">
+          <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')"/>
+          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')"/>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script>
+//import { bexContent } from 'quasar/wrappers'
+import { ref } from 'vue'
+
+export default {
+  name:'showDialog',
+  props: {
+    name:String,
+    visible:Boolean,
+    type:String,
+    columns:[],
+    rows:[]
+  },
+  emits:[
+    'close'
+  ],
+  setup(props,context) {
+    const CloseDialogue =(val) =>{
+      context.emit('update:visible',false);
+      context.emit('close',val);
+    }
+
+    return {
+      CloseDialogue,
+      selected: ref([]),
+      }
+  }
+}
+</script>