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

レイアウトを改善し、ドロップダウンの対象をクリアするボタンを追加する、同じ値のラベルを持つ対象要素の選択を許可しない

Browse Source
This commit is contained in:
Mouriya
2024-09-19 22:12:30 +09:00
parent 1e4cb27998
commit 843db5f10c
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/CascadingDropDownBox.vue
View File

@@ -23,8 +23,7 @@
<q-separator class="q-mt-md" />
<div class="q-my-md row justify-between items-center">
データソースにフィールドを設定する :
<q-btn icon="add" size="sm" padding="xs" outline color="primary"
@click="addRow" />
<q-btn icon="add" size="sm" padding="xs" outline color="primary" @click="addRow" />
</div>
<q-virtual-scroll style="max-height: 13.5rem;" :items="data.fieldList" separator v-slot="{ item, index }">
<div class="row justify-between items-center q-my-md">
@@ -55,18 +54,29 @@
<q-step :name="2" title="ドロップダウンコンポーネントの設定" icon="multiple_stop" active-icon="multiple_stop"
done-icon="multiple_stop" :done="step > 2">
<div class="row q-pa-sm q-col-gutter-x-md flex-center">
<div class="col-5">データソース</div>
<div class="col-5">ドロップダウン選択</div>
<div class="col-2"></div>
<div class="row q-pa-sm q-col-gutter-x-sm flex-center">
<div class="col-grow row q-col-gutter-x-sm">
<div class="col-6">データソース</div>
<div class="col-6">ドロップダウン選択</div>
</div>
<div class="col-auto">
<div style="width: 88px; height: 1px;"></div>
</div>
</div>
<div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-md flex-center">
<div class="col-5">{{ item.source.name }}</div>
<div class="col-5">{{ item.dropDown?.name }}</div>
<div class="col-2">
<div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-sm flex-center">
<div class="col-grow row q-col-gutter-x-sm">
<div class="col-6">{{ item.source.name }}</div>
<div class="col-6">{{ item.dropDown?.name }}</div>
</div>
<div class="col-auto">
<div class="row justify-end">
<q-btn outline dense label="変更" padding="xs sm" color="primary"
@click="() => showFieldDialog(item, 'dropDown')" />
<q-btn-group outline>
<q-btn outline dense label="変更" padding="xs sm" color="primary"
@click="() => showFieldDialog(item, 'dropDown')" />
<q-btn outline dense label="消去" padding="xs sm" color="primary"
@click="() => item.dropDown = undefined" />
</q-btn-group>
</div>
</div>
</div>
@@ -193,7 +203,7 @@ export default defineComponent({
const updateSelectField = (f: any, item: any, index: number, keyName: 'source' | 'dropDown') => {
const [selected] = f.value;
const isDuplicate = data.fieldList.some((field, idx) =>
idx !== index && field[keyName]?.code === selected.code
idx !== index && (field[keyName]?.code === selected.code || field[keyName]?.label === selected.label)
);
if (isDuplicate) {