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

feat: numInput属性UI追加

Browse Source 
inputText,numInputにrules設定追加、入力ルール設定可能
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-05-09 10:49:05 +09:00
parent 329debaab8
commit c426bbf793
13 changed files with 335 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/right/AppFieldSelect.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="q-my-md" v-bind="$attrs">
<div class="q-my-md">
<q-card flat> <q-card flat>
<q-card-section class="q-pa-none q-my-sm q-mr-md"> <q-card-section class="q-pa-none q-my-sm q-mr-md">
<!-- <div class=" q-my-none ">App Field Select</div> --> <!-- <div class=" q-my-none ">App Field Select</div> -->
@@ -128,6 +127,7 @@ interface IAppFields{
} }
export default defineComponent({ export default defineComponent({
inheritAttrs:false,
name: 'FieldInput', name: 'FieldInput',
components: { components: {
ShowDialog, ShowDialog,

20
frontend/src/components/right/ColorPicker.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class=""> <div class="" v-bind="$attrs">
<q-field v-model="color" :label="displayName" bottom-slots labelColor="primary"> <q-field v-model="color" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
<template v-slot:control> <template v-slot:control>
<q-chip text-color="black" color="white"> <q-chip text-color="black" color="white" v-if="isSelected">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar> <q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar>
@@ -14,7 +14,7 @@
</q-chip> </q-chip>
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-icon name="colorize" class="cursor-pointer"> <q-icon name="colorize" class="cursor-pointer" color="primary" >
<q-popup-proxy cover transition-show="scale" transition-hide="scale"> <q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-color no-header default-view="palette" v-model="color" /> <q-color no-header default-view="palette" v-model="color" />
</q-popup-proxy> </q-popup-proxy>
@@ -30,8 +30,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue'; import { computed, defineComponent, ref,watchEffect } from 'vue';
export default defineComponent({ export default defineComponent({
inheritAttrs:false,
name: 'ColorPicker', name: 'ColorPicker',
components: { components: {
}, },
@@ -53,15 +54,20 @@ export default defineComponent({
default: '', default: '',
}, },
modelValue: { modelValue: {
type: Object, type: String,
default: null default: null
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const color = ref("#ffffff"); const color = ref(props.modelValue??"");
const isSelected = computed(()=>props.modelValue && props.modelValue!=="");
watchEffect(()=>{
emit('update:modelValue', color.value);
});
return { return {
color, color,
isSelected
}; };
} }
}); });

31
frontend/src/components/right/ConditionInput.vue
View File

@@ -1,18 +1,20 @@
<template> <template>
<q-field v-model="tree" :label="displayName" labelColor="primary" stack-label > <div v-bind="$attrs">
<template v-slot:control > <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
<q-card flat class="full-width"> <template v-slot:control >
<q-card-actions vertical> <q-card flat class="full-width">
<q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn> <q-card-actions vertical>
</q-card-actions> <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
<q-card-section class="text-caption" > </q-card-actions>
<div v-if="!isSetted">{{ placeholder }}</div> <q-card-section class="text-caption" >
<div v-else>{{ conditionString }}</div> <div v-if="!isSetted">{{ placeholder }}</div>
</q-card-section> <div v-else>{{ conditionString }}</div>
</q-card> </q-card-section>
</template> </q-card>
</q-field> </template>
<condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor> </q-field>
<condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -21,6 +23,7 @@
import ConditionEditor from '../ConditionEditor/ConditionEditor.vue' import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
export default defineComponent({ export default defineComponent({
name: 'FieldInput', name: 'FieldInput',
inheritAttrs:false,
components: { components: {
ConditionEditor ConditionEditor
}, },

30
frontend/src/components/right/DatePicker.vue
View File

@@ -1,18 +1,19 @@
<template> <template>
<div v-bind="$attrs">
<q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label> <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale"> <q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date v-model="selectedDate"> <q-date v-model="selectedDate">
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat /> <q-btn v-close-popup label="Close" color="primary" flat />
</div> </div>
</q-date> </q-date>
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -20,6 +21,7 @@ import { defineComponent, ref ,watchEffect} from 'vue';
export default defineComponent({ export default defineComponent({
name: 'DatePicker', name: 'DatePicker',
inheritAttrs:false,
props: { props: {
displayName:{ displayName:{
type: String, type: String,

13
frontend/src/components/right/EventSetter.vue
View File

@@ -1,9 +1,11 @@
<template> <template>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label> <div v-bind="$attrs">
<template v-slot:append> <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
<q-btn round dense flat icon="add" @click="addButtonEvent()" /> <template v-slot:append>
</template> <q-btn round dense flat icon="add" @click="addButtonEvent()" />
</q-input> </template>
</q-input>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -13,6 +15,7 @@ import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';
export default defineComponent({ export default defineComponent({
name: 'EventSetter', name: 'EventSetter',
inheritAttrs:false,
props: { props: {
displayName:{ displayName:{
type: String, type: String,

159
frontend/src/components/right/FieldInput.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<q-field v-model="selectedField" :label="displayName" labelColor="primary" <div v-bind="$attrs">
:clearable="isSelected" stack-label :bottom-slots="!isSelected" > <q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
<template v-slot:control > :bottom-slots="!isSelected">
<q-chip color="primary" text-color="white" v-if="isSelected"> <template v-slot:control>
<q-chip color="primary" text-color="white" v-if="isSelected">
{{ selectedField.name }} {{ selectedField.name }}
</q-chip> </q-chip>
</template> </template>
@@ -14,85 +15,87 @@
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-icon name="search" class="cursor-pointer" color="primary" @click="showDg"/> <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
</template> </template>
</q-field> </q-field>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px"> <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select> <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
</show-dialog> </show-dialog>
</template> </div>
</template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref ,watchEffect,computed} from 'vue'; import { defineComponent, ref, watchEffect, computed } from 'vue';
import ShowDialog from '../ShowDialog.vue'; import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue'; import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor'; import { useFlowEditorStore } from 'stores/flowEditor';
interface IField{ interface IField {
name:string, name: string,
code:string, code: string,
type:string type: string
} }
export default defineComponent({ export default defineComponent({
name: 'FieldInput', name: 'FieldInput',
components: { inheritAttrs:false,
ShowDialog, components: {
FieldSelect, ShowDialog,
}, FieldSelect,
props: { },
displayName:{ props: {
type: String, displayName: {
default: '', type: String,
}, default: '',
name:{ },
type: String, name: {
default: '', type: String,
}, default: '',
placeholder: { },
type: String, placeholder: {
default: '', type: String,
}, default: '',
hint:{ },
type: String, hint: {
default: '', type: String,
}, default: '',
modelValue: { },
type: Object, modelValue: {
default: null type: Object,
}, default: null
}, },
},
setup(props, { emit }) { setup(props, { emit }) {
const appDg = ref(); const appDg = ref();
const show = ref(false); const show = ref(false);
const selectedField = ref(props.modelValue); const selectedField = ref(props.modelValue);
const store = useFlowEditorStore(); const store = useFlowEditorStore();
const isSelected = computed(()=>{ const isSelected = computed(() => {
return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value) return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
});
const showDg = () => {
show.value = true;
};
const closeDg = (val:string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
}
};
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
isSelected
};
}
}); });
</script>
const showDg = () => {
show.value = true;
};
const closeDg = (val: string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
}
};
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
isSelected
};
}
});
</script>

52
frontend/src/components/right/InputText.vue
View File

@@ -1,24 +1,34 @@
<template> <template>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label> <div v-bind="$attrs">
<template v-slot:append v-if="hint!==''"> <q-input :label="displayName" v-model="inputValue" label-color="primary"
<q-icon name="help" size="22px" color="blue-8"> :placeholder="placeholder" stack-label
<q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right"><div class="hint-text" v-html="hint"/></q-tooltip> :rules="rulesExp"
</q-icon> :maxlength="maxLength"
</template> >
</q-input> <template v-slot:append v-if="hint !== ''">
<q-icon name="help" size="22px" color="blue-8">
<q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
<div class="hint-text" v-html="hint" />
</q-tooltip>
</q-icon>
</template>
</q-input>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue'; import { kMaxLength } from 'buffer';
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'InputText', name: 'InputText',
inheritAttrs: false,
props: { props: {
displayName:{ displayName: {
type: String, type: String,
default: '', default: '',
}, },
name:{ name: {
type: String, type: String,
default: '', default: '',
}, },
@@ -26,33 +36,43 @@ export default defineComponent({
type: String, type: String,
default: '', default: '',
}, },
hint:{ hint: {
type: String, type: String,
default: '', default: '',
}, },
maxLength:{
type: Number,
default:undefined
},
//例：[val=>!!val ||'入力してください']
rules:{
type:String,
default:undefined
},
modelValue: { modelValue: {
type: String, type: String,
default: '', default: '',
}, },
}, },
setup(props , { emit }) { setup(props, { emit }) {
const inputValue = ref(props.modelValue); const inputValue = ref(props.modelValue);
const rulesExp = props.rules===undefined?null : eval(props.rules);
watchEffect(() => { watchEffect(() => {
emit('update:modelValue', inputValue.value); emit('update:modelValue', inputValue.value);
}); });
return { return {
inputValue, inputValue,
showhint:ref(false) showhint: ref(false),
rulesExp
}; };
}, },
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
.hint-text{ .hint-text {
white-space : always; white-space: always;
max-width: 450px; max-width: 450px;
font-size: 1.2em; font-size: 1.2em;
} }

14
frontend/src/components/right/MuiltInputText.vue
View File

@@ -1,18 +1,22 @@
<template> <template>
<q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow stack-label/> <div v-bind="$attrs">
<q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
stack-label />
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue'; import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'MuiltInputText', name: 'MuiltInputText',
inheritAttrs: false,
props: { props: {
displayName:{ displayName: {
type: String, type: String,
default: '', default: '',
}, },
name:{ name: {
type: String, type: String,
default: '', default: '',
}, },
@@ -20,7 +24,7 @@ export default defineComponent({
type: String, type: String,
default: '', default: '',
}, },
hint:{ hint: {
type: String, type: String,
default: '', default: '',
}, },

51
frontend/src/components/right/NumInput.vue
View File

@@ -1,6 +1,10 @@
<template> <template>
<div class=""> <div class="" v-bind="$attrs">
<q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" bottom-slots> <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" stack-label bottom-slots
:min="min"
:max="max"
:rules="rulesExp"
>
<template v-slot:hint> <template v-slot:hint>
{{ placeholder }} {{ placeholder }}
</template> </template>
@@ -9,9 +13,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { computed, defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'NumInput', name: 'NumInput',
inheritAttrs:false,
components: { components: {
}, },
props: { props: {
@@ -31,17 +36,51 @@ export default defineComponent({
type: String, type: String,
default: '', default: '',
}, },
min:{
type:Number,
default:undefined
},
max:{
type:Number,
default:undefined
},
//[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']
rules:{
type:String,
default:undefined
},
modelValue: { modelValue: {
type: Object, type: [Number , String],
default: null default: undefined
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const numValue = ref(0); const numValue = ref(props.modelValue);
const rulesExp = props.rules===undefined?null : eval(props.rules);
const isError = computed(()=>{
const val = numValue.value;
if (val === undefined) {
return false;
}
const numVal = typeof val === "string" ? parseInt(val) : val;
// Ensure parsed value is a valid number
if (isNaN(numVal)) {
return true;
}
// Check against min and max boundaries, if defined
if ((props.min !== undefined && numVal < props.min) || (props.max !== undefined && numVal > props.max)) {
return true;
}
return false;
});
watchEffect(()=>{
emit("update:modelValue",numValue.value);
});
return { return {
numValue, numValue,
rulesExp
}; };
} }
}); });

2
frontend/src/components/right/PropertyList.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div v-for="(item, index) in properties" :key="index" > <div v-for="(item, index) in properties" :key="index" >
<component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component> <component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
</div> </div>
</div> </div>
</template> </template>

3
frontend/src/components/right/SelectBox.vue
View File

@@ -1,5 +1,7 @@
<template> <template>
<div v-bind="$attrs">
<q-select v-model="selectedValue" :label="displayName" :options="options"/> <q-select v-model="selectedValue" :label="displayName" :options="options"/>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -7,6 +9,7 @@ import { defineComponent,ref,watchEffect } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'SelectBox', name: 'SelectBox',
inheritAttrs:false,
props: { props: {
displayName:{ displayName:{
type: String, type: String,

232
sample.json
View File

@@ -2,25 +2,22 @@
"id": "", "id": "",
"actionNodes": [ "actionNodes": [
{ {
"id": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870", "id": "c5cd772a-04be-418e-a811-3787f98a2285",
"name": "app.record.create.submit", "name": "app.record.create.show",
"title": "レコード追加画面", "title": "レコード追加画面",
"subTitle": "保存をクリックしたとき", "subTitle": "レコード追加画面を表示した後",
"inputPoint": "", "inputPoint": "",
"outputPoints": [], "outputPoints": [],
"isRoot": true, "isRoot": true,
"actionProps": [], "actionProps": [],
"ActionValue": {}, "ActionValue": {},
"nextNodeIds": [ "nextNodeIds": {
[ "": "1eb097b1-9d08-462e-97b0-6e3e1232edef"
"", }
"dfa6df09-7b3e-4848-89ad-2e9147004f31"
]
]
}, },
{ {
"id": "dfa6df09-7b3e-4848-89ad-2e9147004f31", "id": "1eb097b1-9d08-462e-97b0-6e3e1232edef",
"name": "自動採番する", "name": "属性UIテスト用",
"inputPoint": "", "inputPoint": "",
"outputPoints": [], "outputPoints": [],
"actionProps": [ "actionProps": [
@@ -31,185 +28,86 @@
"displayName": "表示名", "displayName": "表示名",
"placeholder": "表示を入力してください", "placeholder": "表示を入力してください",
"hint": "", "hint": "",
"modelValue": "文書番号を自動採番する" "modelValue": "属性UIテスト用"
} }
}, },
{ {
"component": "FieldInput", "component": "AppFieldSelect",
"props": { "props": {
"displayName": "採番項目", "displayName": "フィールド選択(複数)",
"modelValue": { "modelValue": {
"name": "文書番号", "app": {
"type": "SINGLE_LINE_TEXT", "id": "64",
"code": "文書番号", "name": "日報テスト",
"label": "文書番号", "description": "日々の業務内容、報告事項、所感などを記載していくアプリです。\n記録を行うだけでなく、あとからの振り返りやメンバー間のコミュニケーションにも活用できます。",
"noLabel": false, "createdate": "2023/07/15 10:15:03"
"required": false, },
"minLength": "", "fields": [
"maxLength": "", {
"expression": "", "name": "ステータス",
"hideExpression": false, "type": "STATUS",
"unique": false, "code": "ステータス",
"defaultValue": "" "label": "ステータス",
"enabled": false
}
]
}, },
"name": "field", "name": "selectFields",
"placeholder": "採番項目を選択してください" "placeholder": "アプリ選択後、フィールドを選んでください",
"selectType": "multiple"
} }
}, },
{ {
"component": "InputText", "component": "AppFieldSelect",
"props": { "props": {
"displayName": "フォーマット", "displayName": "フィールド選択(単一)",
"modelValue": "000000",
"name": "format",
"placeholder": "数値書式文字列を指定します"
}
},
{
"component": "InputText",
"props": {
"displayName": "前につける文字列",
"modelValue": "",
"name": "prefix",
"placeholder": "前につける文字列を入力してください"
}
},
{
"component": "InputText",
"props": {
"displayName": "後ろにつける文字列",
"modelValue": "{$format('yyyyMMdd')}",
"name": "suffix",
"placeholder": "後ろにつける文字列を入力してください"
}
},
{
"component": "InputText",
"props": {
"displayName": "結果（戻り値）",
"modelValue": "docNumber",
"name": "verName",
"placeholder": "変数名を入力してください"
}
}
],
"prevNodeId": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
"nextNodeIds": [
[
"",
"b32bf329-f05a-486f-9b79-9920b57fe324"
]
]
},
{
"id": "b32bf329-f05a-486f-9b79-9920b57fe324",
"name": "条件式",
"inputPoint": "",
"outputPoints": [
"はい",
"いいえ"
],
"actionProps": [
{
"component": "InputText",
"props": {
"name": "displayName",
"displayName": "表示名",
"placeholder": "表示を入力してください",
"hint": "",
"modelValue": "条件式を設定する"
}
},
{
"component": "ConditionInput",
"props": {
"displayName": "条件",
"modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"部署\",\"objectType\":\"field\",\"type\":\"DROP_DOWN\",\"code\":\"ドロップダウン\",\"label\":\"部署\",\"noLabel\":false,\"required\":false,\"options\":{\"総務\":{\"label\":\"総務\",\"index\":\"2\"},\"サポート\":{\"label\":\"サポート\",\"index\":\"3\"},\"マーケティング\":{\"label\":\"マーケティング\",\"index\":\"1\"},\"営業\":{\"label\":\"営業\",\"index\":\"0\"},\"開発\":{\"label\":\"開発\",\"index\":\"4\"}},\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":2,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"所感、学び\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行__0\",\"label\":\"所感、学び\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":3,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"業務内容\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行_\",\"label\":\"業務内容\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":4,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"ステータス\",\"objectType\":\"field\",\"type\":\"STATUS\",\"code\":\"ステータス\",\"label\":\"ステータス\",\"enabled\":true},\"operator\":\"=\",\"value\":\"作成中\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
"name": "condition",
"placeholder": "条件式を設定してください"
}
},
{
"component": "InputText",
"props": {
"displayName": "結果（戻り値）",
"modelValue": "conditionResult",
"name": "verName",
"placeholder": "変数名を入力してください"
}
}
],
"prevNodeId": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
"nextNodeIds": [
[
"いいえ",
"82bdcbcc-d8c1-4e2c-b38f-f736c95b193a"
]
]
},
{
"id": "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a",
"name": "表示／非表示",
"inputPoint": "いいえ",
"outputPoints": [],
"actionProps": [
{
"component": "InputText",
"props": {
"name": "displayName",
"displayName": "表示名",
"placeholder": "表示を入力してください",
"hint": "",
"modelValue": "指定項目の表示・非表示を設定する"
}
},
{
"component": "FieldInput",
"props": {
"displayName": "フィールド",
"modelValue": { "modelValue": {
"name": "文書番号", "app": {
"type": "SINGLE_LINE_TEXT", "id": "58",
"code": "文書番号", "name": "日報",
"label": "文書番号", "description": "",
"noLabel": false, "createdate": "2023/07/13 19:05:26"
"required": false, },
"minLength": "", "fields": [
"maxLength": "", {
"expression": "", "name": "所感、学び",
"hideExpression": false, "type": "MULTI_LINE_TEXT",
"unique": false, "code": "文字列__複数行__0",
"defaultValue": "" "label": "所感、学び",
"noLabel": false,
"required": false,
"defaultValue": ""
}
]
}, },
"name": "field", "name": "selectField",
"placeholder": "対象項目を選択してください" "placeholder": "アプリ選択後、フィールドを選んでください",
"selectType": "single"
} }
}, },
{ {
"component": "SelectBox", "component": "ColorPicker",
"props": { "props": {
"displayName": "表示／非表示", "displayName": "色選択",
"options": [ "modelValue": "#f50000",
"表示", "name": "color",
"非表示" "placeholder": "カラーを選択してください"
],
"modelValue": "非表示",
"name": "show",
"placeholder": ""
} }
}, },
{ {
"component": "ConditionInput", "component": "NumInput",
"props": { "props": {
"displayName": "条件", "displayName": "数値入力フィールド",
"modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{},\"operator\":\"=\",\"value\":\"\"}],\"parent\":null,\"logicalOperator\":\"AND\"}", "modelValue": 100,
"name": "condition", "name": "num",
"placeholder": "条件式を設定してください" "max": 100,
"min": 0,
"placeholder": "数値を入力してください"
} }
} }
], ],
"prevNodeId": "b32bf329-f05a-486f-9b79-9920b57fe324", "prevNodeId": "c5cd772a-04be-418e-a811-3787f98a2285",
"nextNodeIds": [] "nextNodeIds": {}
} }
] ]
} }

60
sample2.json
View File

@@ -2,36 +2,54 @@
{ {
"component": "InputText", "component": "InputText",
"props": { "props": {
"displayName": "ボタン名", "displayName": "文字入力",
"modelValue": "", "modelValue": "",
"name": "buttonName", "name": "str",
"placeholder": "ボタンのラベルを入力してください" "placeholder": "文字を入力してください",
"maxLength":"20",
"hint":"文字列入力<br>入力ルール指定可能。ルールの設定例：[val=>!!val||'必須入力です']",
"rules":"[val=>!!val||'必須入力です']"
} }
}, },
{ {
"component": "SelectBox", "component": "AppFieldSelect",
"props": { "props": {
"displayName": "追加位置", "displayName": "フィールド選択(複数)",
"modelValue": "", "modelValue": {},
"name": "position", "name": "selectFields",
"options":[ "placeholder": "アプリ選択後、フィールドを選んでください",
"一番右に追加する", "selectType":"multiple"
"一番左に追加する"
],
"placeholder": "追加位置を選択してください"
} }
}, },
{ {
"component": "EventSetter", "component": "AppFieldSelect",
"props": { "props": {
"displayName": "イベント名", "displayName": "フィールド選択(単一)",
"modelValue": {},
"name": "selectField",
"placeholder": "アプリ選択後、フィールドを選んでください",
"selectType":"single"
}
},
{
"component": "ColorPicker",
"props": {
"displayName": "色選択",
"modelValue": "", "modelValue": "",
"name": "eventName", "name": "color",
"connectProps":[{ "placeholder": "カラーを選択してください"
"key":"displayName", }
"propName":"buttonName" },
}], {
"placeholder": "イベント名を入力してください" "component": "NumInput",
"props": {
"displayName": "数値入力フィールド",
"modelValue": "",
"name": "num",
"max":100,
"min":0,
"placeholder": "数値を入力してください",
"rules":"[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']"
} }
} }
] ]