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

finish UI

Browse Source
This commit is contained in:
薛家豪
2025-01-17 12:41:05 +08:00
parent e65d53f794
commit 8bd3c0a3a3
24 changed files with 952 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,53 +1,63 @@
<template>
<h2 class="settings-heading">Settings for data fetch pluging</h2>
<p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
<form class="js-submit-settings">
<p class="kintoneplugin-row">
<label for="message">
Message:
<input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
</label>
</p>
<p class="kintoneplugin-row">
<kuc-button text="Cancel" type="normal" @click="cancel" />
<kuc-button text="Save" type="submit" @click="save" />
</p>
</form>
<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" 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>
<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>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { createEmptyJoinTable } from '@/js/helper';
import type { JoinTable, SavedData } from '@/types/model';
import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
const props = defineProps<{ pluginId: string }>();
const data: {
message: string;
} = reactive({
message: '',
const loading = ref(true);
const data: SavedData = reactive({
buttonName: '',
joinTables: [] as JoinTable[],
});
provide('savedData', data);
onMounted(async () => {
const savedData = kintone.plugin.app.getConfig(props.pluginId);
data.message = JSON.parse(savedData.message);
data.buttonName = savedData?.buttonName || '集約';
data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
loading.value = false;
});
const mainTable = computed(() => data.joinTables[0]);
const otherTables = computed(() => data.joinTables.slice(1));
watch(
() => data.joinTables.length,
(newLength) => {
if (newLength === 1) {
data.joinTables[0].onConditions = [];
}
},
);
function save() {
kintone.plugin.app.setConfig(
{ message: JSON.stringify(data.message) },
// () => {
// alert("The plug-in settings have been saved. Please update the app!");
// window.location.href = "../../flow?app=" + kintone.app.getId();
// }
);
kintone.plugin.app.setConfig({
buttonName: data.buttonName,
joinTables: JSON.stringify(data.joinTables || []),
});
}
function cancel() {
window.location.href = `../../${kintone.app.getId()}/plugin/`;
}
</script>
<style scoped>
.settings-heading {
padding: 1em 0;
}
.kintoneplugin-input-text {
width: 20em;
}
</style>

24
vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="kintoneplugin-input-container flex-row">
<plugin-label v-if="label" :label="label" />
<kuc-dropdown className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" />
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps<{
label: string;
items: kintone.fieldTypes.DropDown['Item'][];
modelValue: string;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const updateValue = (event: kintone.Event) => {
emit('update:modelValue', event.detail.value);
};
</script>

23
vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="kintoneplugin-input-container flex-row">
<plugin-label v-if="label" :label="label" />
<kuc-text className="kuc-text-input" :value="modelValue" @change="updateValue" />
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps<{
label: string;
modelValue: string;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const updateValue = (event: kintone.Event) => {
emit('update:modelValue', event.detail.value);
};
</script>

11
vue-project/my-kintone-plugin/src/components/basic/PluginLabel.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="kintoneplugin-label">{{ label }}</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps<{
label: string;
}>();
</script>

7
vue-project/my-kintone-plugin/src/components/basic/PluginRow.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<div class="kintoneplugin-row">
<slot></slot>
</div>
</template>
<script setup lang="ts"></script>

23
vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIcon.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<button :class="['kuc-action-button', isAdd ? 'add' : 'remove']" :title="title">
<svg fill="none" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true">
<path :d="dPath" fill-rule="evenodd" clip-rule="evenodd" :fill="fillPath"></path>
</svg>
</button>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{ isAdd: boolean; title: string }>();
const dAdd =
'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z';
const fillAdd = '#3498db';
const dRemove =
'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z';
const fillRemove = '#b5b5b5';
const dPath = computed(() => (props.isAdd ? dAdd : dRemove));
const fillPath = computed(() => (props.isAdd ? fillAdd : fillRemove));
</script>

33
vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIconGroup.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div>
<plugin-table-action-icon v-if="canAdd" :is-add="true" title="Add Row" @click="onClick('add')" />
<plugin-table-action-icon v-if="canDelete" :is-add="false" title="Delete this row" @click="onClick('remove')" />
</div>
</template>
<script setup lang="ts">
import { createEmptyJoinTable } from '@/js/helper';
import type { SavedData } from '@/types/model';
import { defineProps, withDefaults, inject } from 'vue';
const props = withDefaults(
defineProps<{
canAdd?: boolean;
canDelete?: boolean;
tableId: number;
}>(),
{
canAdd: true,
canDelete: true,
},
);
const savedData = inject<SavedData>('savedData') as SavedData;
const onClick = (type: 'add' | 'remove') => {
if (type === 'add') {
savedData.joinTables.push(createEmptyJoinTable());
} else if (savedData.joinTables.length > 1) {
savedData.joinTables = savedData.joinTables.filter((t) => t.id !== props.tableId);
}
};
</script>

68
vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<plugin-row class="table-area flex-row border">
<div class="table-main-area ">
<plugin-row>
<plugin-dropdown label="取得元アプリ" :items="apps" v-model="table.app" />
</plugin-row>
<plugin-row>
<plugin-dropdown label="テーブル" :items="tables" v-model="table.table" />
</plugin-row>
<plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
<plugin-label label="連結条件" />
<plugin-table-connect-row connector="=" v-model="table.onConditions" />
</plugin-row>
<plugin-row class="flex-row">
<plugin-label label="取得フィールド" />
<plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
</plugin-row>
<plugin-row class="flex-row">
<plugin-label label="絞込条件" />
<plugin-table-condition-row v-model="table.whereConditions" />
</plugin-row>
</div>
<div class="table-action-area">
<plugin-table-action-icon-group :can-delete="savedData.joinTables.length > 1" :table-id="table.id" />
</div>
</plugin-row>
</template>
<script setup lang="ts">
import type { JoinTable, SavedData } from '@/types/model';
import { inject } from 'vue';
const savedData = inject<SavedData>('savedData') as SavedData;
const props = defineProps<{ table: JoinTable }>();
const apps = [
{
label: '-------',
value: '',
},
{
label: 'lable 1',
value: 'value 1',
},
{
label: 'lable 2',
value: 'value 2',
},
];
const tables = [
{
label: '-------',
value: '-------',
},
{
label: 'tables 1',
value: 'tables 1',
},
{
label: 'tables 2',
value: 'tables 2',
},
];
const isJoinConditionShown = (table: JoinTable) => {
return savedData.joinTables[0].id !== table.id;
};
</script>

79
vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
</template>
<script setup lang="ts">
import type { WhereCondition } from '@/types/model';
import { defineProps, defineEmits } from 'vue';
import { Dropdown } from 'kintone-ui-component/lib/dropdown';
const props = defineProps<{
modelValue: WhereCondition[];
}>();
const renderDropdown = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderCondition = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderDynamicData = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const columns = [
{
title: '取得元アプリのフィールド',
field: 'field',
render: renderDropdown,
},
{
title: '',
field: 'condition',
render: renderCondition,
},
{
title: '',
field: 'data',
render: renderDynamicData,
},
];
const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
const emit = defineEmits<{
(e: 'update:modelValue', value: FieldsJoinMapping[]): void;
}>();
const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
};
const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
item[key] = value;
emit('update:modelValue', props.modelValue);
};
</script>

61
vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
</template>
<script setup lang="ts">
import type { FieldsJoinMapping } from '@/types/model';
import { defineProps, defineEmits } from 'vue';
import { Dropdown } from 'kintone-ui-component/lib/dropdown';
const props = defineProps<{
connector: string;
modelValue: FieldsJoinMapping[];
}>();
const renderDropdown = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderConnector = () => {
return props.connector;
};
const columns = [
{
title: '取得元アプリのフィールド',
field: 'leftField',
render: renderDropdown,
},
{
title: '',
field: 'connector',
render: renderConnector,
},
{
title: 'このアプリのフィールド',
field: 'rightField',
render: renderDropdown,
},
];
const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
const emit = defineEmits<{
(e: 'update:modelValue', value: FieldsJoinMapping[]): void;
}>();
const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
};
const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
item[key] = value;
emit('update:modelValue', props.modelValue);
};
</script>

112
vue-project/my-kintone-plugin/src/css/config.css
View File

@@ -1,6 +1,114 @@
/* 辅助类 */
.flex-row {
display: flex;
}
.hidden {
visibility: hidden;
}
.border {
border: 1px solid #e3e7e8;
}
/* config 页面 */
#app {
width: 60vw;
min-width: 920px;
}
/* 最上面的说明 */
.settings-heading {
padding: 1em 0;
}
.kintoneplugin-input-text {
width: 20em;
/* label 样式 */
.kintoneplugin-label {
padding-left: 20px;
line-height: 40px;
}
/* laebl input 单号的情况 */
.flex-row .kintoneplugin-label {
margin: 0;
width: 10em;
}
/* 表格内容垂直居中 */
.table-area {
margin: 0;
align-items: center;
}
/* 整体边框相关样式 */
.header-row {
padding: 24px 0;
margin: 0;
border-bottom: none;
}
.table-main-area {
flex: 1;
border-right: 1px solid #e3e7e8;
padding-top: 24px;
}
.footer-row {
padding: 24px 0;
margin-bottom: 32px;
text-align: right;
border-top: none;
}
/* 底部按钮空间 */
.save-btn {
margin-left: 16px;
margin-right: 24px;
}
/* 输入框宽度 */
.kuc-text-input {
--kuc-text-input-width: max(15vw, 200px);
--kuc-dropdown-toggle-width: max(15vw, 200px);
}
/* 统一 kintone +/- 按钮样式 */
.kuc-action-button {
width: 24px;
height: 24px;
background: transparent;
border: 1px solid transparent;
padding: 2px;
cursor: pointer;
margin: 0 4px;
}
.kuc-action-button.remove {
margin-right: 8px;
}
.kuc-action-button.add {
margin-left: 8px;
}
.kuc-action-button:focus {
border: 1px solid #3498db;
outline: none;
}
.kuc-action-button.remove:hover path {
fill: #e74c3c;
}
/* 覆盖表格样式 */
.plugin-kuc-table td {
border-left-color: rgba(0, 0, 0, 0);
border-right-color: rgba(0, 0, 0, 0);
vertical-align: middle;
}
.plugin-kuc-table tr td:nth-last-child(2) {
border-right-color: #e3e7e8;
}
.plugin-kuc-table tr td:first-child {
border-left-color: #e3e7e8;
}
.plugin-kuc-table .kuc-table-1-18-0__table__body__row__action {
height: 55px;
align-items: center;
}
/* 絞り込み条件选择相关样式 */
.row-connector-area {
margin: 0 1em;
}

13
vue-project/my-kintone-plugin/src/i18n/index.ts Normal file
View File

@@ -0,0 +1,13 @@
import { createI18n } from 'vue-i18n';
import ja from './lang/ja';
import en from './lang/en';
const i18n = createI18n({
legacy: false,
locale: kintone.getLoginUser().language || 'ja',
messages: {
ja,
en,
},
});
export default i18n;

6
vue-project/my-kintone-plugin/src/i18n/lang/en.ts Normal file
View File

@@ -0,0 +1,6 @@
export default {
config: {
title: 'Settings for data fetch plugin',
desc: 'This message is displayed on the app page after the app has been updated.',
},
};

6
vue-project/my-kintone-plugin/src/i18n/lang/ja.ts Normal file
View File

@@ -0,0 +1,6 @@
export default {
config: {
title: 'Settings for data fetch plugin',
desc: 'This message is displayed on the app page after the app has been updated.',
},
};

16
vue-project/my-kintone-plugin/src/js/helper.ts Normal file
View File

@@ -0,0 +1,16 @@
import type { JoinTable } from '@/types/model';
export const condition = {
unset: '',
eq: '=',
};
export function createEmptyJoinTable(id = Number(new Date())) {
return {
id,
app: '',
table: '',
onConditions: [{ leftField: '', rightField: '' }],
fieldsMapping: [{ leftField: '', rightField: '' }],
whereConditions: [{ field: '', condition: condition.unset, data: '' }],
} as JoinTable;
}

3
vue-project/my-kintone-plugin/src/main.ts
View File

@@ -1,4 +1,5 @@
import { createApp } from 'vue';
import Config from './components/Config.vue';
import i18n from './i18n/index';
createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');
createApp(Config, { pluginId: kintone.$PLUGIN_ID }).use(i18n).mount('#app');

18
vue-project/my-kintone-plugin/src/types/kintone.d.ts vendored
View File

@@ -1,11 +1,27 @@
// https://cybozu.dev/ja/kintone/docs/overview/field-types/
// https://cybozudev.kf5.com/hc/kb/article/201593/
declare namespace kintone.fieldTypes {
interface TABLE {
interface Table {
type: 'SUBTABLE';
value: any;
}
interface DropDown {
Item: {
label: string,
value: string,
disabled?: boolean
}
}
}
declare namespace kintone {
interface Event {
detail: {
value: string;
};
}
}
// lookup https://cybozudev.kf5.com/hc/kb/article/1611088/

27
vue-project/my-kintone-plugin/src/types/model.d.ts vendored Normal file
View File

@@ -0,0 +1,27 @@
import { condition } from './helper';
export interface FieldsJoinMapping {
leftField: string;
rightField: string;
}
export interface WhereCondition {
field: string;
condition: (typeof condition)[keyof typeof condition];
data: string;
}
export interface JoinTable {
id: number; // 用于唯一区分
app: string; // 取得元アプリ
table: string; // テーブル
onConditions: FieldsJoinMapping[]; // 連結条件
fieldsMapping: FieldsJoinMapping[]; // 取得フィールド
whereConditions: WhereCondition[]; // 絞込条件
}
// 存储的数据格式
export interface SavedData {
buttonName: string;
joinTables: JoinTable[];
}