126 lines
3 KiB
Vue
126 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
|
|
import FormGroupHead from './FormGroupHead.vue';
|
|
import FormIssue from './FormIssue.vue';
|
|
|
|
import { UndoButton, SaveButton, EditButton } from 'src/components/button';
|
|
import { AttributesForm, Step } from 'src/stores/request-list/types';
|
|
import { useRequestList } from 'src/stores/request-list';
|
|
|
|
const props = defineProps<{
|
|
readonly?: boolean;
|
|
step: Step;
|
|
requestWorkId: string;
|
|
prefix?: string;
|
|
}>();
|
|
|
|
const requestListStore = useRequestList();
|
|
|
|
const state = reactive({
|
|
isEdit: false,
|
|
});
|
|
|
|
const defaultForm = {
|
|
customerDuty: false,
|
|
customerDutyCost: 30,
|
|
companyDuty: false,
|
|
companyDutyCost: 30,
|
|
responsibleUserLocal: true,
|
|
responsibleUserId: '',
|
|
individualDuty: false,
|
|
individualDutyCost: 10,
|
|
};
|
|
|
|
const attributesForm = defineModel<AttributesForm>('attributesForm', {
|
|
default: {
|
|
customerDuty: false,
|
|
customerDutyCost: 30,
|
|
companyDuty: false,
|
|
companyDutyCost: 30,
|
|
responsibleUserLocal: true,
|
|
responsibleUserId: '',
|
|
individualDuty: false,
|
|
individualDutyCost: 10,
|
|
},
|
|
});
|
|
|
|
const formData = ref<AttributesForm>(defaultForm);
|
|
|
|
function triggerUndo() {
|
|
assignToForm();
|
|
state.isEdit = false;
|
|
}
|
|
|
|
async function triggerSubmit() {
|
|
const payload = {
|
|
...props.step,
|
|
...formData.value,
|
|
attributes: {},
|
|
};
|
|
const res = await requestListStore.editStatusRequestWork(payload);
|
|
|
|
if (res) {
|
|
attributesForm.value = JSON.parse(JSON.stringify(formData.value));
|
|
state.isEdit = false;
|
|
}
|
|
}
|
|
|
|
function triggerEdit() {
|
|
state.isEdit = true;
|
|
}
|
|
|
|
function assignToForm() {
|
|
formData.value = JSON.parse(JSON.stringify(attributesForm.value));
|
|
}
|
|
</script>
|
|
<template>
|
|
<q-expansion-item
|
|
dense
|
|
class="overflow-hidden bordered full-width"
|
|
switch-toggle-side
|
|
style="border-radius: var(--radius-2)"
|
|
expand-icon="mdi-chevron-down-circle"
|
|
header-class="surface-1 q-py-sm text-medium text-body1"
|
|
@before-show="assignToForm"
|
|
>
|
|
<template #header>
|
|
<span>
|
|
{{ $t('general.designForm') }}
|
|
</span>
|
|
<nav class="q-ml-auto row" v-if="!readonly">
|
|
<UndoButton
|
|
v-if="state.isEdit"
|
|
:id="`btn-form-${props.prefix || 'nome'}-info-basic-undo`"
|
|
icon-only
|
|
type="button"
|
|
@click.stop="triggerUndo"
|
|
/>
|
|
<SaveButton
|
|
v-if="state.isEdit"
|
|
:id="`btn-form-${props.prefix || 'nome'}-info-basic-save`"
|
|
icon-only
|
|
type="submit"
|
|
@click.stop="triggerSubmit"
|
|
/>
|
|
<EditButton
|
|
v-if="!state.isEdit"
|
|
:id="`btn-form-${props.prefix || 'nome'}-info-basic-edit`"
|
|
icon-only
|
|
@click.stop="triggerEdit"
|
|
type="button"
|
|
/>
|
|
</nav>
|
|
</template>
|
|
|
|
<main class="row">
|
|
<section class="col-12">
|
|
<FormGroupHead>
|
|
{{ $t('quotation.templateForm') }}
|
|
</FormGroupHead>
|
|
<FormIssue :request-work-id="requestWorkId" :readonly="!state.isEdit" />
|
|
</section>
|
|
</main>
|
|
</q-expansion-item>
|
|
</template>
|
|
<style></style>
|