ファイル名とコンポーネント名を変更し、コンポーネントとして使用できるようにする。

2024-05-27 18:44:36 +09:00
parent 78bba2502f
commit 484ab9fdae
4 changed files with 10 additions and 10 deletions
--- a/frontend/src/components/AppSelectBox.vue
+++ b/frontend/src/components/AppSelectBox.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="q-px-xs">
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner color="primary" size="3em" />
+    </div>
+    <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
+      virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
+      :filter="filter" style="max-height: 65vh;">
+      <template v-slot:body-cell-description="props">
+        <q-td :props="props">
+          <q-scroll-area class="description-cell">
+            <div v-html="props.row.description"></div>
+          </q-scroll-area>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+</template>
+<script lang="ts">
+import { ref, onMounted, reactive, watchEffect } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'AppSelectBox',
+  props: {
+    name: String,
+    type: String,
+    filter: String,
+    updateExternalSelectAppInfo: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const columns = [
+      { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true },
+      { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
+      { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
+      { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
+    ]
+    const isLoaded = ref(false);
+    const rows: any[] = reactive([]);
+    const selected = ref([])
+
+    watchEffect(()=>{
+      if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
+        props.updateExternalSelectAppInfo(selected.value[0])
+      }
+    });
+    onMounted(() => {
+      api.get('api/v1/allapps').then(res => {
+        res.data.apps.forEach((item: any) => {
+          rows.push({
+            id: item.appId,
+            name: item.name,
+            description: item.description,
+            createdate: dateFormat(item.createdAt)
+          });
+        });
+        isLoaded.value = true;
+      });
+    });
+
+    const dateFormat = (dateStr: string) => {
+      const date = new Date(dateStr);
+      const pad = (num: number) => num.toString().padStart(2, '0');
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hours = pad(date.getHours());
+      const minutes = pad(date.getMinutes());
+      const seconds = pad(date.getSeconds());
+      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+    }
+    return {
+      columns,
+      rows,
+      selected,
+      isLoaded,
+      pagination: ref({
+        rowsPerPage: 10
+      })
+    }
+  },
+
+}
+</script>
+<style lang="scss">
+.description-cell {
+  height: 60px;
+  width: 300px;
+  max-height: 60px;
+  max-width: 300px;
+  white-space: break-spaces;
+}
+
+.spinner {
+  min-height: 300px;
+  min-width: 400px;
+}
+</style>