134 lines
4.1 KiB
Vue
134 lines
4.1 KiB
Vue
<template>
|
|
<div v-bind="$attrs">
|
|
<q-field :label="displayName" labelColor="primary" stack-label lazy-rules="ondemand" ref="fieldRef">
|
|
<template v-slot:control>
|
|
<q-card flat class="full-width">
|
|
<q-card-actions vertical>
|
|
<q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
|
|
</q-card-actions>
|
|
<q-card-section class="text-caption">
|
|
<div v-if="data.dropDownApp?.name">
|
|
{{ `${data.sourceApp?.name} -> ${data.dropDownApp?.name}` }}
|
|
</div>
|
|
<div v-else>{{ placeholder }}</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
</q-field>
|
|
</div>
|
|
|
|
<ShowDialog v-model:visible="dgIsShow" name="ドロップダウン階層化設定" @close="closeDg" min-width="50vw" min-height="20vh" disableBtn>
|
|
<template v-slot:toolbar>
|
|
<q-btn flat round dense icon="more_vert" >
|
|
<q-menu auto-close anchor="bottom start">
|
|
<q-list>
|
|
<q-item clickable @click="copySetting()">
|
|
<q-item-section avatar><q-icon name="content_copy" ></q-icon></q-item-section>
|
|
<q-item-section >コピー</q-item-section>
|
|
</q-item>
|
|
<q-item clickable @click="pasteSetting()">
|
|
<q-item-section avatar><q-icon name="content_paste" ></q-icon></q-item-section>
|
|
<q-item-section >貼り付け</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</template>
|
|
<div class="q-mb-md q-ml-md q-mr-md">
|
|
<CascadingDropDownBox v-model:model-value="data" :finishDialogHandler="finishDialogHandler" />
|
|
</div>
|
|
</ShowDialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, watchEffect } from 'vue';
|
|
import ShowDialog from '../ShowDialog.vue';
|
|
import CascadingDropDownBox from '../CascadingDropDownBox.vue';
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
name: 'CascadingDropDown',
|
|
components: {
|
|
ShowDialog,
|
|
CascadingDropDownBox
|
|
},
|
|
props: {
|
|
displayName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => { ({}) }
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
const dgIsShow = ref(false);
|
|
// const data = ref(props.modelValue);
|
|
const data = ref({
|
|
sourceApp: props.modelValue.sourceApp ?? { appFilter: '', showSelectApp: false },
|
|
dropDownApp: props.modelValue.dropDownApp,
|
|
fieldList: props.modelValue.fieldList ?? [],
|
|
});
|
|
const closeDg = (state: string) => {
|
|
dgIsShow.value = false;
|
|
};
|
|
|
|
const finishDialogHandler = (boxData) => {
|
|
data.value = boxData
|
|
dgIsShow.value = false
|
|
emit('update:modelValue', data.value);
|
|
}
|
|
|
|
//設定をコピーする
|
|
const copySetting=()=>{
|
|
if (navigator.clipboard) {
|
|
const jsonData= JSON.stringify(data.value);
|
|
navigator.clipboard.writeText(jsonData).then(() => {
|
|
console.log('Text successfully copied to clipboard');
|
|
},
|
|
(err) => {
|
|
console.error('Error in copying text: ', err);
|
|
});
|
|
} else {
|
|
console.log('Clipboard API not available');
|
|
}
|
|
};
|
|
//設定を貼り付ける
|
|
const pasteSetting=async ()=>{
|
|
try {
|
|
const text = await navigator.clipboard.readText();
|
|
console.log('Text from clipboard:', text);
|
|
const jsonData=JSON.parse(text);
|
|
if('sourceApp' in jsonData && 'dropDownApp' in jsonData && 'fieldList' in jsonData){
|
|
const {sourceApp,dropDownApp, fieldList}=jsonData;
|
|
data.value.sourceApp=sourceApp;
|
|
data.value.dropDownApp=dropDownApp;
|
|
data.value.fieldList=fieldList;
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to read text from clipboard: ', err);
|
|
throw err;
|
|
}
|
|
}
|
|
|
|
// watchEffect(() => {
|
|
// emit('update:modelValue', data.value);
|
|
// });
|
|
|
|
return {
|
|
dgIsShow,
|
|
closeDg,
|
|
data,
|
|
finishDialogHandler,
|
|
copySetting,
|
|
pasteSetting
|
|
};
|
|
}
|
|
});
|
|
</script>
|