162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import useProductServiceStore from 'src/stores/product-service';
|
|
|
|
import NoData from '../NoData.vue';
|
|
|
|
const nameList = defineModel<{ id: string; name: string; isEdit: boolean }[]>(
|
|
'nameList',
|
|
{ required: true },
|
|
);
|
|
|
|
const cloneList = ref();
|
|
const isAdd = ref(false);
|
|
const inputName = ref<HTMLInputElement[]>([]);
|
|
|
|
function isWorkNameEdit() {
|
|
return cloneList.value.some((i: { isEdit: boolean }) => i.isEdit === true);
|
|
}
|
|
|
|
async function assignClone() {
|
|
cloneList.value = await JSON.parse(JSON.stringify(nameList.value));
|
|
}
|
|
|
|
defineExpose({
|
|
isWorkNameEdit,
|
|
});
|
|
|
|
defineEmits<{
|
|
(e: 'delete', id: string): void;
|
|
(e: 'edit', id: string, data: { name: string }): void;
|
|
(e: 'add', data: { name: string; productId: []; order: number }): void;
|
|
}>();
|
|
|
|
onMounted(async () => {
|
|
await assignClone();
|
|
});
|
|
|
|
watch(
|
|
() => nameList.value.length,
|
|
async () => {
|
|
await assignClone();
|
|
if (!isAdd.value) return;
|
|
cloneList.value[cloneList.value.length - 1].isEdit = true;
|
|
setTimeout(() => {
|
|
inputName.value[cloneList.value.length - 1].focus();
|
|
isAdd.value = false;
|
|
}, 150);
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<div v-if="cloneList" class="full-width column no-wrap full-height">
|
|
<div
|
|
v-if="cloneList.length > 0"
|
|
class="bordered rounded surface-1 flex col column justify-between"
|
|
>
|
|
<q-list class="full-width col scroll">
|
|
<q-item
|
|
class="items-center row q-px-lg"
|
|
v-for="(item, index) in cloneList"
|
|
:key="index"
|
|
>
|
|
<q-input
|
|
ref="inputName"
|
|
:for="`input-work-name-${index}`"
|
|
dense
|
|
class="col q-mr-md"
|
|
v-model="item.name"
|
|
placeholder="ชื่องาน"
|
|
:borderless="!item.isEdit"
|
|
:readonly="!item.isEdit"
|
|
:outlined="item.isEdit"
|
|
></q-input>
|
|
<q-btn
|
|
v-if="!item.isEdit"
|
|
id="btn-edit-work-name"
|
|
icon="mdi-pencil-outline"
|
|
:disable="isWorkNameEdit()"
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
@click="item.isEdit = true"
|
|
>
|
|
<q-tooltip>{{ $t('edit') }}</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-else
|
|
id="btn-edit-work-name"
|
|
icon="mdi-check"
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
@click="
|
|
() => {
|
|
$emit('edit', item.id, { name: item.name }),
|
|
(item.isEdit = false);
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>{{ $t('save') }}</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="!item.isEdit"
|
|
id="btn-delete-work-name"
|
|
:disable="isWorkNameEdit()"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-ml-md"
|
|
color="negative"
|
|
@click="$emit('delete', item.id)"
|
|
>
|
|
<q-tooltip>{{ $t('delete') }}</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-else
|
|
id="btn-edit-work-name"
|
|
icon="mdi-undo"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-ml-md"
|
|
color="negative"
|
|
@click="assignClone"
|
|
>
|
|
<q-tooltip>{{ $t('cancel') }}</q-tooltip>
|
|
</q-btn>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<div class="bordered-t full-width">
|
|
<q-item
|
|
clickable
|
|
:disable="isWorkNameEdit()"
|
|
@click="
|
|
() => {
|
|
$emit('add', { name: '', productId: [], order: 1 }),
|
|
(isAdd = true);
|
|
}
|
|
"
|
|
>
|
|
<span class="q-px-lg flex items-center app-text-muted-2">
|
|
<q-icon name="mdi-plus" class="q-mr-md" />
|
|
{{ $t('addWork') }}
|
|
</span>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="bordered rounded surface-1 flex justify-center items-center col"
|
|
>
|
|
<NoData />
|
|
</div>
|
|
</div>
|
|
</template>
|