83 lines
2.6 KiB
Vue
83 lines
2.6 KiB
Vue
<template>
|
|
<h2 class="settings-heading">{{ $t('config.title') }}</h2>
|
|
<p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
|
|
|
|
<plugin-row class="header-row border">
|
|
<plugin-input v-model="data.buttonName" placeholder="集約" label="集約ボタン名" />
|
|
</plugin-row>
|
|
|
|
<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, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION } from '@/js/helper';
|
|
import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
|
|
import type { KucDropdownItem, KucSpinnerEl } from '@/types/my-kintone';
|
|
|
|
import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
|
|
|
|
const props = defineProps<{ pluginId: string }>();
|
|
const loading = ref(false);
|
|
const data: SavedData = reactive({
|
|
buttonName: '',
|
|
joinTables: [] as JoinTable[],
|
|
});
|
|
|
|
const cachedData: CachedData = reactive({
|
|
apps: [EMPTY_OPTION],
|
|
currentAppFields: { fields: [], layout: [] } as FieldsInfo,
|
|
});
|
|
|
|
provide('savedData', data);
|
|
provide('cachedData', cachedData);
|
|
|
|
const mainArea = shallowRef<HTMLElement | null>(null);
|
|
const spinner = shallowRef<KucSpinnerEl | null>(null);
|
|
|
|
onMounted(async () => {
|
|
spinner.value?.close(); // 修复不自动挂载到节点的 bug
|
|
const savedData = kintone.plugin.app.getConfig(props.pluginId);
|
|
data.buttonName = savedData?.buttonName || '集約';
|
|
data.joinTables = savedData?.joinTables ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable()];
|
|
nextTick(async () => {
|
|
loading.value = true;
|
|
cachedData.apps = await loadApps();
|
|
cachedData.currentAppFields = await loadAppFieldsAndLayout();
|
|
loading.value = false;
|
|
});
|
|
});
|
|
|
|
watch(loading, (load) => {
|
|
load ? spinner.value?.open() : spinner.value?.close();
|
|
});
|
|
|
|
watch(
|
|
() => data.joinTables.length,
|
|
(newLength) => {
|
|
console.log(data.joinTables);
|
|
if (newLength === 1) {
|
|
data.joinTables[0].onConditions = [{ leftField: '', rightField: '' }];
|
|
}
|
|
},
|
|
);
|
|
|
|
function save() {
|
|
kintone.plugin.app.setConfig({
|
|
buttonName: data.buttonName,
|
|
joinTables: JSON.stringify(data.joinTables || []),
|
|
});
|
|
}
|
|
|
|
function cancel() {
|
|
window.location.href = `../../${kintone.app.getId()}/plugin/`;
|
|
}
|
|
</script>
|