Files
KintoneAppBuilder/frontend/src/components/AppSelect.vue

75 lines
2.1 KiB
Vue

<template>
<div class="q-pa-md">
<q-table :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
<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 >
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';
import { LeftDataBus } from './flowEditor/left/DataBus';
export default {
name: 'AppSelect',
props: {
name: String,
type: String
},
setup() {
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 rows = reactive([])
onMounted( () => {
api.get('api/v1/allapps').then(res =>{
res.data.apps.forEach((item) =>
{
rows.push({
id:item.appId,
name:item.name,
description:item.description,
createdate:dateFormat(item.createdAt)});
}
)
});
});
const dateFormat=(dateStr)=>{
const date = new Date(dateStr);
const pad = (num) => 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: ref([])
}
},
}
</script>
<style lang="scss">
.description-cell{
height: 60px;
width: 300px;
max-height: 60px;
max-width: 300px;
}
</style>