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

load app and fields

Browse Source
This commit is contained in:
薛家豪
2025-01-21 17:41:15 +08:00
parent 8bd3c0a3a3
commit f37f15482e
12 changed files with 211 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
vue-project/my-kintone-plugin/src/components/Config.vue
View File

@@ -3,27 +3,29 @@
<p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
<plugin-row class="header-row border">
<plugin-input v-model="data.buttonName" label="集約ボタン名" />
<plugin-input v-model="data.buttonName" placeholder="集約" label="集約ボタン名" />
</plugin-row>
<div v-if="!loading">
<plugin-table-area :table="mainTable" :key="mainTable.id" />
<plugin-table-area v-for="joinTable in otherTables" :table="joinTable" :key="joinTable.id" />
<div id="main-area" ref="mainArea">
<plugin-table-area v-for="joinTable in data.joinTables" :table="joinTable" :key="joinTable.id" />
</div>
<plugin-row class="footer-row border">
<kuc-button text="キャンセル" type="normal" @click="cancel" />
<kuc-button text="保存する" class="save-btn" type="submit" @click="save" />
</plugin-row>
<kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
</template>
<script setup lang="ts">
import { createEmptyJoinTable } from '@/js/helper';
import { createEmptyJoinTable, fetchApps } from '@/js/helper';
import type { JoinTable, SavedData } from '@/types/model';
import type { KucSpinnerEl } from '@/types/my-kintone';
import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
const props = defineProps<{ pluginId: string }>();
const loading = ref(true);
const loading = ref(false);
const data: SavedData = reactive({
buttonName: '',
joinTables: [] as JoinTable[],
@@ -31,15 +33,24 @@ const data: SavedData = reactive({
provide('savedData', data);
const mainArea = shallowRef<HTMLElement | null>(null);
const spinner = shallowRef<KucSpinnerEl | null>(null);
onMounted(async () => {
const savedData = kintone.plugin.app.getConfig(props.pluginId);
data.buttonName = savedData?.buttonName || '集約';
data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
loading.value = false;
data.joinTables = savedData?.joinTables ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable()];
nextTick(async () => {
spinner.value?.close(); // 修复不自动挂载到节点的 bug
loading.value = true;
await fetchApps();
loading.value = false;
});
});
const mainTable = computed(() => data.joinTables[0]);
const otherTables = computed(() => data.joinTables.slice(1));
watch(loading, (load) => {
load ? spinner.value?.open() : spinner.value?.close();
});
watch(
() => data.joinTables.length,