191 lines
7.3 KiB
Vue
191 lines
7.3 KiB
Vue
<template>
|
|
<MessageBox v-if="openMessageBox && messageType !== MessageBoxType.NotSet" class="z-99 absolute top-10 left-10 openbox">
|
|
<template v-slot:header>
|
|
<h2 class="text-indigo-700 dark:text-indigo-300">
|
|
<span v-if="messageType === MessageBoxType.Select">{{ t('selectModel', 'Select Model') }}</span>
|
|
<span v-if="messageType === MessageBoxType.Save"> {{ t('DataNeedSaved', 'Data changes not saved') }}</span>
|
|
</h2>
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="task" v-if="messageType === MessageBoxType.Save && data_url_encoded !== MessageBoxType.NotSet">
|
|
<a
|
|
:href="`data:${data_url_encoded}`"
|
|
:download="`${inputValue}${inputValue.includes('json') ? '' : '.json'}`"
|
|
>{{ t('download_json_data', 'download JSON data') }}</a>
|
|
</div>
|
|
<div
|
|
v-if="messageType === MessageBoxType.Save && data_url_encoded !== MessageBoxType.NotSet"
|
|
class="mt-2 text-xs text-800 dark:text-indigo-100"
|
|
>{{ t('click_link_to_save', 'Click on link to save') }} {{inputValue}}</div>
|
|
<form v-if="messageType === MessageBoxType.OneInput" @submit.prevent="onMessageOkBtn" class="w-full max-w-sm">
|
|
<div class="flex items-center border-b border-indigo-500 py-2">
|
|
<input
|
|
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 mr-3 py-1 px-2 leading-tight focus:outline-none"
|
|
:type="inputType"
|
|
v-model="oneinputValue"
|
|
:placeholder="input_placeholder"
|
|
aria-label="Full name"
|
|
/>
|
|
<div v-if="inpType === inputType" i-carbon-view @click="onInputType"/>
|
|
<div v-else i-carbon-view-off @click="onInputType"/>
|
|
</div>
|
|
</form>
|
|
<form v-if="messageType === MessageBoxType.Save && show_input" @submit.prevent="onMessageOkBtn" class="w-full max-w-sm">
|
|
<div class="flex items-center border-b border-indigo-500 py-2">
|
|
<input
|
|
class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 mr-3 py-1 px-2 leading-tight focus:outline-none"
|
|
type="text"
|
|
v-model="inputValue"
|
|
:placeholder="input_placeholder"
|
|
aria-label="Full name"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center mt-2 py-2">
|
|
<span class="text-gray-700 dark:text-gray-500 text-sm">{{t('saveload.saveOptions','Save options')}}:</span>
|
|
<div class="mt-0 flex">
|
|
<div v-if="sendurl !== ''" class="mx-2">
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" class="form-radio" name="radio" v-model="inputSaveMode" :checked="inputSaveMode === 'send'" />
|
|
<span class="ml-2 text-sm">{{t('send','Send')}}</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" class="form-radio" name="radio" v-model="inputSaveMode" :checked="inputSaveMode !== 'send'"/>
|
|
<span class="ml-2 text-sm">{{t('local','Local')}}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button v-for="(btn:any,idx:number) in input_btns" :key="idx"
|
|
class="flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
|
:class="{'dark:bg-red-400 bg-red-700': btn.typ === 'cancel'}"
|
|
type="button"
|
|
@click="onInputBtn(btn)"
|
|
>{{ t(btn.title) }}</button>
|
|
</div>
|
|
</form>
|
|
<div v-if="messageType === 'select' && Object.keys(select_ops).length > 0" class="inline-block relative w-64">
|
|
<select
|
|
class="block appearance-none w-full bg-white dark:bg-gray-600 border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
|
|
v-model="selectValue"
|
|
>
|
|
<option value=""></option>
|
|
<option v-for="(op: any) in select_ops" :key="op.id" :value="op.id">{{op.title}}</option>
|
|
</select>
|
|
<div
|
|
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 dark:text-indigo-200 text-indigo-700 dark:bg-gray-600 border-r-1 border-t-1 border-b-1 border-l-0 border-gray-400 "
|
|
>
|
|
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:button>
|
|
<div class="flex items-center gap-5">
|
|
<button
|
|
v-if="messageType === MessageBoxType.Select || (messageType === MessageBoxType.Save && data_url_encoded === '')"
|
|
class="btn-msg flex-grow"
|
|
@click="onMessageOkBtn"
|
|
>
|
|
<span v-if="messageType === MessageBoxType.Select">{{ t('select', 'Select') }}</span>
|
|
<span v-if="messageType === MessageBoxType.Save && data_url_encoded === ''" >{{ t('save', 'Save') }}</span>
|
|
</button>
|
|
<button v-if="messageType === MessageBoxType.OneInput" :disabled="oneinputValue === ''" class="btn-msg flex-grow" @click="onMessageOkBtn">{{ t('save', 'Save') }}</button>
|
|
<button v-else class="btn-msg flex-grow" @click="onMessageCloseBtn">{{ t('close', 'Close') }}</button>
|
|
</div>
|
|
</template>
|
|
</MessageBox>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { PropType } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import useState from '~/hooks/useState'
|
|
import { MessageBoxType, InputBtnsType, ModelType} from '~/typs/cv'
|
|
import MessageBox from '~/components/MessageBox.vue'
|
|
|
|
const props = defineProps({
|
|
messageType: {
|
|
type: String as PropType<MessageBoxType>,
|
|
default: MessageBoxType.NotSet,
|
|
required: true,
|
|
},
|
|
openMessageBox: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: true,
|
|
},
|
|
show_input: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
input_btns: {
|
|
type: Array as PropType<InputBtnsType[]>,
|
|
default: [],
|
|
required: false,
|
|
},
|
|
input_placeholder: {
|
|
type: String,
|
|
default: '',
|
|
required: false,
|
|
},
|
|
select_ops: {
|
|
type: Object as PropType<ModelType>,
|
|
default: {},
|
|
required: true,
|
|
},
|
|
data_url_encoded: {
|
|
type: String,
|
|
default: '',
|
|
required: false,
|
|
},
|
|
inpType: {
|
|
type: String,
|
|
default: 'text',
|
|
required: false,
|
|
},
|
|
})
|
|
const emit = defineEmits(['onMessageBox','onInput','onLoadModel'])
|
|
const router = useRouter()
|
|
const inputType = ref(props.inpType)
|
|
const sendurl = router.currentRoute.value.meta.sendurl as string || '/'
|
|
const inputValue = useState().current_modelid
|
|
const oneinputValue = ref('')
|
|
const inputSaveMode = ref(sendurl !== '' ? 'send': 'local')
|
|
const selectValue = ref(useState().current_model.value.id)
|
|
|
|
const t = useI18n().t
|
|
const onInputBtn = (btn: InputBtnsType) => {
|
|
emit('onInput', btn )
|
|
}
|
|
const onMessageOkBtn = () => {
|
|
switch(props.messageType) {
|
|
case MessageBoxType.Save:
|
|
if (inputSaveMode.value === 'send') {
|
|
emit('onMessageBox', { src: 'sendata', val: inputValue.value })
|
|
} else {
|
|
emit('onMessageBox', { src: 'savedata', val: inputValue.value })
|
|
}
|
|
break
|
|
case MessageBoxType.Select:
|
|
if (useState().current_model.value.id !== selectValue.value) {
|
|
emit('onLoadModel', { id: selectValue.value })
|
|
}
|
|
emit('onMessageBox', { src: 'done' })
|
|
break
|
|
case MessageBoxType.OneInput:
|
|
if (oneinputValue.value !== '') {
|
|
emit('onMessageBox', { src: 'oneinput', val: oneinputValue.value })
|
|
}
|
|
// emit('onMessageBox', { src: 'done' })
|
|
break
|
|
}
|
|
}
|
|
const onInputType = () => {
|
|
inputType.value = inputType.value === props.inpType ? 'text' : props.inpType
|
|
}
|
|
const onMessageCloseBtn = () => {
|
|
emit('onMessageBox', { src: 'done' })
|
|
}
|
|
</script> |