137 lines
3.4 KiB
Vue
137 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import DialogForm from 'components/DialogForm.vue';
|
|
import { onMounted } from 'vue';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
action: (...args: unknown[]) => void;
|
|
checkData: (...args: unknown[]) => {
|
|
oldData: { nameField: string; value: string }[];
|
|
newData: { nameField: string; value: string }[];
|
|
};
|
|
cancel?: (...args: unknown[]) => void;
|
|
}>();
|
|
const modal = ref<boolean>(false);
|
|
const selectOldData = ref<boolean>(true);
|
|
const selectNewData = ref<boolean>(false);
|
|
|
|
onMounted(() => {
|
|
if (props.checkData().oldData.length === 0) {
|
|
props.action();
|
|
} else {
|
|
modal.value = true;
|
|
}
|
|
});
|
|
</script>
|
|
<template>
|
|
<DialogForm
|
|
v-model:modal="modal"
|
|
:title="$t('form.warning.duplicateInformation')"
|
|
:submit="
|
|
() => {
|
|
if (selectNewData) {
|
|
action();
|
|
}
|
|
modal = false;
|
|
}
|
|
"
|
|
:close="
|
|
() => {
|
|
cancel?.();
|
|
modal = false;
|
|
}
|
|
"
|
|
width="60%"
|
|
height="45%"
|
|
>
|
|
<template #iconTitle>
|
|
<q-icon name="mdi-alert" color="warning" size="xs" class="q-mr-xs" />
|
|
</template>
|
|
<div class="q-py-md q-px-lg full-height">
|
|
<div class="surface-1 q-pa-sm column bordered rounded full-height">
|
|
<div
|
|
class="row col-3 items-center text-weight-medium"
|
|
style="font-size: 16px"
|
|
>
|
|
เลือกข้อมูลที่มีอยู่แล้ว
|
|
</div>
|
|
<div
|
|
class="row col-3 items-center cursor-pointer"
|
|
style="gap: 16px"
|
|
:class="{ active: selectOldData }"
|
|
@click="
|
|
() => {
|
|
selectOldData = true;
|
|
selectNewData = false;
|
|
}
|
|
"
|
|
>
|
|
<q-checkbox
|
|
:model-value="selectOldData"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (selectOldData === false) {
|
|
selectOldData = v;
|
|
selectNewData = !v;
|
|
}
|
|
}
|
|
"
|
|
size="xs"
|
|
/>
|
|
|
|
<div v-for="v in checkData().oldData">
|
|
<span class="text-regular app-text-muted">
|
|
{{ v.nameField }}
|
|
</span>
|
|
: {{ v.value }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row col-3 items-center text-weight-medium"
|
|
style="font-size: 16px"
|
|
>
|
|
เพิ่มมาใหม่
|
|
</div>
|
|
<div
|
|
class="row col-3 items-center cursor-pointer"
|
|
style="gap: 16px"
|
|
:class="{ active: selectNewData }"
|
|
@click="
|
|
() => {
|
|
selectNewData = true;
|
|
selectOldData = false;
|
|
}
|
|
"
|
|
>
|
|
<q-checkbox
|
|
:model-value="selectNewData"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (selectNewData === false) {
|
|
selectNewData = v;
|
|
selectOldData = !v;
|
|
}
|
|
}
|
|
"
|
|
size="xs"
|
|
/>
|
|
|
|
<div v-for="v in checkData().newData">
|
|
<span class="text-regular app-text-muted">
|
|
{{ v.nameField }}
|
|
</span>
|
|
: {{ v.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogForm>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.active {
|
|
border: 3px solid var(--blue-4);
|
|
background-color: var(--blue-0);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
</style>
|