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

merge

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2023-08-02 20:54:58 +09:00
parent 66d91f01b7 f597f7aa5a
commit be05c0879f
8 changed files with 167 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
document/Kintone自動化ツール設計図2.drawio
View File

@@ -1,4 +1,4 @@
<mxfile host="app.diagrams.net" modified="2023-08-02T11:25:04.093Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" etag="EMmL5XG9C4Pk2V_oktW5" version="21.6.6" type="device" pages="14">
<mxfile host="app.diagrams.net" modified="2023-08-02T11:53:11.935Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" etag="fnozejIO3fuGrEKEncA1" version="21.6.6" type="device" pages="14">
<diagram id="cNe2wJ0UVCjUIX4xeHyy" name="システム構成">
<mxGraphModel dx="1434" dy="790" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
@@ -439,66 +439,66 @@
</mxGraphModel>
</diagram>
<diagram id="tNFcAe9q32FVhuFY7C8b" name="アクション一覧">
<mxGraphModel dx="1434" dy="773" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<mxGraphModel dx="1434" dy="790" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="5P4xDcqKEJpwtg3mcYR_-1" value="アクション一覧" style="html=1;shadow=1;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;" vertex="1" parent="1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-1" value="アクション一覧" style="html=1;shadow=1;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;" parent="1" vertex="1">
<mxGeometry x="30" y="90" width="680" height="480" as="geometry" />
</mxCell>
<mxCell id="5P4xDcqKEJpwtg3mcYR_-2" value="" style="shape=line;strokeColor=#dddddd;resizeWidth=1;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-2" value="" style="shape=line;strokeColor=#dddddd;resizeWidth=1;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry width="680" height="10" relative="1" as="geometry">
<mxPoint y="50" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="5P4xDcqKEJpwtg3mcYR_-3" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.x;strokeColor=#868686;strokeWidth=2;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-3" value="" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.x;strokeColor=#868686;strokeWidth=2;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="1" width="8" height="8" relative="1" as="geometry">
<mxPoint x="-24" y="20" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="5P4xDcqKEJpwtg3mcYR_-4" value="" style="shape=line;strokeColor=#dddddd;resizeWidth=1;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-4" value="" style="shape=line;strokeColor=#dddddd;resizeWidth=1;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry width="680" height="20" relative="1" as="geometry">
<mxPoint y="400" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="5P4xDcqKEJpwtg3mcYR_-5" value="選択" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#FFFFFF;fontSize=14;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-5" value="選択" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#FFFFFF;fontSize=14;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="1" y="1" width="110" height="40" relative="1" as="geometry">
<mxPoint x="-130" y="-60" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="5P4xDcqKEJpwtg3mcYR_-6" value="キャンセル" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-6" value="キャンセル" style="html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="1" y="1" width="111" height="40" relative="1" as="geometry">
<mxPoint x="-260" y="-60" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="5P4xDcqKEJpwtg3mcYR_-7" value="検索" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.searchBox;strokeColor=#999999;mainText=;strokeColor2=#008cff;fontColor=#666666;fontSize=17;align=left;spacingLeft=3;whiteSpace=wrap;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="5P4xDcqKEJpwtg3mcYR_-7" value="検索" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.searchBox;strokeColor=#999999;mainText=;strokeColor2=#008cff;fontColor=#666666;fontSize=17;align=left;spacingLeft=3;whiteSpace=wrap;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="449.9981481481482" y="10" width="188.88888888888889" height="30" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-1" value="自動採番" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#cce5ff;strokeColor=#36393d;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-1" value="自動採番" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#cce5ff;strokeColor=#36393d;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="70" y="70" width="200" height="35" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-2" value="必須チェック" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-2" value="必須チェック" style="rounded=0;whiteSpace=wrap;html=1;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="70" y="105" width="200" height="40" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-3" value="項目無効化" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-3" value="項目無効化" style="rounded=0;whiteSpace=wrap;html=1;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="70" y="145" width="200" height="40" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-4" value="一覧の表示の目立つ" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-4" value="一覧の表示の目立つ" style="rounded=0;whiteSpace=wrap;html=1;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="70" y="185" width="200" height="40" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-5" value="分類" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-5" value="分類" style="rounded=0;whiteSpace=wrap;html=1;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="10" y="70" width="60" height="155" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-6" value="文書番号を割り振り、決まったフォーマットで自動採番する" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#cce5ff;strokeColor=#36393d;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-6" value="文書番号を割り振り、決まったフォーマットで自動採番する" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#cce5ff;strokeColor=#36393d;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="270" y="70" width="260" height="35" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-7" value="文書保存前に選択した項目に応じて、条件付きで必須チェックを行う" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-7" value="文書保存前に選択した項目に応じて、条件付きで必須チェックを行う" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="270" y="105" width="260" height="40" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-8" value="フィールドを編集ができない" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-8" value="フィールドを編集ができない" style="rounded=0;whiteSpace=wrap;html=1;align=left;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="270" y="145" width="260" height="40" as="geometry" />
</mxCell>
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-9" value="" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="5P4xDcqKEJpwtg3mcYR_-1">
<mxCell id="LcaoVIrjWFiDU0Mr5dfh-9" value="" style="rounded=0;whiteSpace=wrap;html=1;align=center;" parent="5P4xDcqKEJpwtg3mcYR_-1" vertex="1">
<mxGeometry x="270" y="185" width="260" height="40" as="geometry" />
</mxCell>
</root>

2
frontend/README.md
View File

@@ -50,4 +50,4 @@ See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-
## VUE3.0编程规范
1. [VUE3.0编程概要](./VUE3.0概要.md)
2. [VUE3.0编程规范](./VUE3.0コーディングルール.md)
2. [VUE3.0编程规范](./VUE3.0-coding-rule.md)

0
frontend/VUE3.0コーディングルール.md → frontend/VUE3.0-coding-rule.md
View File

40
frontend/src/components/ActionSelect.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="q-pa-md">
<q-table :title="name+'一覧'" row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
</div>
</template>
<script>
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';
export default {
name: 'actionSelect',
props: {
name: String,
type: String
},
setup() {
const columns = [
{ name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
{ name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
{ name: 'content', label: '内容', field: 'content', sortable: true }
]
const rows = reactive([])
onMounted( () => {
api.get('http://127.0.0.1:8000/api/kintone/1').then(res =>{
res.data.forEach((item) =>
{
rows.push({name:item.name,desc:item.desc,content:item.content});
}
)
});
});
return {
columns,
rows,
selected: ref([]),
}
},
}
</script>

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

@@ -1,11 +1,11 @@
<template v-slot:list>
<template>
<div class="q-pa-md">
ppppppp
<q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';
export default {
name: 'appSelect',
@@ -14,14 +14,27 @@ export default {
type: String
},
setup() {
const columns = [
{ name: 'id', required: true,label: 'アプリID',align: 'left',field: 'id',sortable: true},
{ name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
{ name: 'creator', label: '作成者', field: 'creator', sortable: true },
{ name: 'createdate', label: '作成日時', field: 'createdate' }
]
const rows = reactive([])
onMounted( () => {
api.get('allapps').then(res =>{
res.data.apps.forEach((item) =>
{
rows.push({id:item.appId,name:item.name,creator:item.creator.name,createdate:item.createdAt});
}
)
});
});
return {
columns,
rows,
selected: ref([]),
},
onMounted(() => {
console.log('Mounted');
axios.get('http://127.0.0.1:8000/api/v1/allapps')
.then(res => console.log(res.data))
})
}
},
}

47
frontend/src/components/FieldSelect.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="q-pa-md">
<q-table :title="name+'一覧'" row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
</div>
</template>
<script>
import { ref,onMounted,reactive } from 'vue'
import { api } from 'boot/axios';
export default {
name: 'fieldSelect',
props: {
name: String,
type: String,
appId:Number
},
setup(props) {
const columns = [
{ name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
{ name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
{ name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
]
const rows = reactive([])
onMounted( () => {
api.get('appfields', {
params:{
app: props.appId
}
}).then(res =>{
let fields = res.data.properties;
console.log(fields);
Object.keys(fields).forEach((key) =>
{
rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
}
)
});
});
return {
columns,
rows,
selected: ref([]),
}
},
}
</script>

3
frontend/src/components/ShowDialog.vue
View File

@@ -7,7 +7,7 @@
</q-card-section>
<q-card-section class="q-pt-none">
<slot name="list"></slot>
<slot></slot>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
@@ -22,6 +22,7 @@
export default {
name: 'showDialog',
props: {
name:String,
visible: Boolean,
},
emits: [

101
frontend/src/pages/RuleEditor.vue
View File

@@ -9,96 +9,67 @@
</div>
<div style="min-height: 100vh;">
<div class="q-pa-md">
<q-btn-dropdown
split
color="primary"
label="ルール新規作成"
size="lg"
>
<q-list>
<q-item
v-for="action in actions"
clickable v-close-popup
@click="onItemClick"
:key="action"
>
<q-item-section>
<q-item-label>{{ action }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-btn-dropdown split color="primary" label="ルール新規作成" size="lg">
<q-list>
<q-item v-for="action in actions" clickable v-close-popup @click="onItemClick" :key="action">
<q-item-section>
<q-item-label>{{ action }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="q-pa-md">
<q-btn label="アプリ選択" color="primary" @click="showDg()" />
<show-dialog v-model:visible="show">
<app-select></app-select>
</show-dialog>
</div>
<q-select v-model="model" :options="options" label="Standard"/>
<q-btn :label="model+'選択'" color="primary" @click="showDg()" />
<show-dialog v-model:visible="show" :name="model" @close="closeDg">
<template v-if="model=='アプリ'">
<app-select ref="appDg" :name="model" type="single"></app-select>
</template>
<template v-if="model=='フィールド'">
<field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
</template>
<template v-if="model=='アクション'">
<action-select ref="appDg" :name="model" type="single"></action-select>
</template>
</show-dialog>
</div>
</div>
</div>
</q-page>
</template>
<script setup lang="ts">
import ShowDialog from 'components/ShowDialog.vue';
import AppSelect from 'components/AppSelect.vue';
import FieldSelect from 'components/FieldSelect.vue';
import ActionSelect from 'components/ActionSelect.vue';
import { ref } from 'vue'
let name = 'アプリ'
let show = ref(false);
let type = 'multiple';
let columns = [
{
name: 'id',
required: true,
label: 'アプリID',
align: 'left',
field: 'id',
sortable: true
},
{ name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
{ name: 'creator', label: '作成者', field: 'creator', sortable: true },
{ name: 'createdate', label: '作成日時', field: 'createdate' }
]
let rows = [
{
id:1,
name: '日報アプリ１',
creator: '日報　太郎',
createdate: '2023/07/22 11:21:48'
},
{
id:2,
name: '日報アプリ２',
creator: '日報　太郎',
createdate: '2023/07/25 14:10:56'
},
]
let appDg = ref(null);
let appDg = ref();
let model = ref('アプリ');
let options = ['アプリ','フィールド','アクション']
const showDg = () => {
show.value = true;
};
const closeDg = (val) => {
if(val == 'OK')
{
alert(JSON.stringify(appDg.value.selected));
const closeDg = (val:string) => {
if (val == 'OK') {
alert(JSON.stringify(appDg.value.selected))
}
};
interface Props {
title: string;
actions:string[];
actions: string[];
}
const props = withDefaults(defineProps<Props>(), {
title:"ルールエディター",
actions:()=>["フィールド制御","一覧画面","その他"]
title: "ルールエディター",
actions: () => ["フィールド制御", "一覧画面", "その他"]
});
function onItemClick(evt: Event){
return;
function onItemClick(evt: Event) {
return;
}
</script>