alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Mouriya
2024-04-22 22:05:39 +09:00
parent 99d3a01991
commit 1a48fb5b20
9 changed files with 436 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/src/components/AppSelect.vue
View File

@@ -1,69 +1,70 @@
<template>
<div class="q-pa-md" >
<div class="q-px-xs">
<div v-if="!isLoaded" class="spinner flex flex-center">
<q-spinner color="primary" size="3em" />
<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"
>
<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>
<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 } from 'vue'
import { ref, onMounted, reactive, watch } from 'vue'
import { api } from 'boot/axios';
import { LeftDataBus } from './flowEditor/left/DataBus';
export default {
name: 'AppSelect',
props: {
name: String,
type: String,
filter:String
filter: String,
updateExternalSelectAppInfo: {
type: Function
}
},
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 isLoaded=ref(false);
const rows :any[]= reactive([]);
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;
});
});
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([])
const dateFormat=(dateStr:string)=>{
const updateExternalSelectAppInfo = props.updateExternalSelectAppInfo
watch(selected, (newValue, oldValue) => {
if (newValue && newValue[0] && updateExternalSelectAppInfo) {
updateExternalSelectAppInfo(newValue[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 pad = (num: number) => num.toString().padStart(2, '0');
const year = date.getFullYear();
const month = pad(date.getMonth() + 1);
const day = pad(date.getDate());
@@ -75,10 +76,10 @@ export default {
return {
columns,
rows,
selected: ref([]),
selected,
isLoaded,
pagination:ref({
rowsPerPage:10
pagination: ref({
rowsPerPage: 10
})
}
},
@@ -86,19 +87,16 @@ export default {
}
</script>
<style lang="scss">
.description-cell{
.description-cell {
height: 60px;
width: 300px;
max-height: 60px;
max-width: 300px;
white-space: break-spaces;
}
.spinner{
.spinner {
min-height: 300px;
min-width: 400px;
}
.app-table{
height: 100%;
max-height: 600px;
}
</style>
</style>