177 lines
4.6 KiB
Vue
177 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import FormGroupHead from './FormGroupHead.vue';
|
|
import FormDuty from './FormDuty.vue';
|
|
import FormIssue from './FormIssue.vue';
|
|
import FormEmployee from './FormEmployee.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<{
|
|
step: Step;
|
|
responsibleAreaDistrictId?: string;
|
|
}>();
|
|
|
|
const requestListStore = useRequestList();
|
|
|
|
const state = reactive({
|
|
isEdit: false,
|
|
});
|
|
|
|
const defaultForm = {
|
|
customerDuty: false,
|
|
customerDutyCost: 30,
|
|
companyDuty: false,
|
|
companyDutyCost: 30,
|
|
localEmployee: true,
|
|
employeeId: '',
|
|
individualDuty: false,
|
|
individualDutyCost: 10,
|
|
};
|
|
|
|
const attributesForm = defineModel<AttributesForm>('attributesForm', {
|
|
default: {
|
|
customerDuty: false,
|
|
customerDutyCost: 30,
|
|
companyDuty: false,
|
|
companyDutyCost: 30,
|
|
localEmployee: true,
|
|
employeeId: '',
|
|
individualDuty: false,
|
|
individualDutyCost: 10,
|
|
},
|
|
});
|
|
|
|
const isExpand = ref(false);
|
|
const formData = ref<AttributesForm>(defaultForm);
|
|
|
|
function triggerUndo() {
|
|
assignToForm();
|
|
state.isEdit = false;
|
|
}
|
|
|
|
async function triggerSubmit() {
|
|
const payload = {
|
|
...props.step,
|
|
attributes: { form: formData.value },
|
|
};
|
|
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
|
|
v-model="isExpand"
|
|
class="overflow-hidden bordered q-my-sm 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">
|
|
<UndoButton
|
|
v-if="state.isEdit"
|
|
id="btn-info-basic-undo"
|
|
icon-only
|
|
type="button"
|
|
@click.stop="triggerUndo"
|
|
/>
|
|
<SaveButton
|
|
v-if="state.isEdit"
|
|
id="btn-info-basic-save"
|
|
icon-only
|
|
type="submit"
|
|
@click.stop="triggerSubmit"
|
|
/>
|
|
<EditButton
|
|
v-if="!state.isEdit"
|
|
id="btn-info-basic-edit"
|
|
icon-only
|
|
@click.stop="triggerEdit"
|
|
type="button"
|
|
/>
|
|
</nav>
|
|
</template>
|
|
|
|
<main class="row" v-if="isExpand">
|
|
<section class="col-12">
|
|
<FormGroupHead>
|
|
{{ $t('duty.text', { subject: $t('general.customer') }) }}
|
|
</FormGroupHead>
|
|
<FormDuty
|
|
class="surface-1"
|
|
:readonly="!state.isEdit"
|
|
v-model:duty="formData.customerDuty"
|
|
v-model:duty-cost="formData.customerDutyCost"
|
|
cost
|
|
/>
|
|
</section>
|
|
<section class="col-12">
|
|
<FormGroupHead>
|
|
{{ $t('duty.text', { subject: $t('general.company') }) }}
|
|
</FormGroupHead>
|
|
<FormDuty
|
|
class="surface-1"
|
|
:readonly="!state.isEdit"
|
|
v-model:duty="formData.companyDuty"
|
|
v-model:duty-cost="formData.companyDutyCost"
|
|
cost
|
|
/>
|
|
</section>
|
|
<section class="col-12">
|
|
<FormGroupHead>
|
|
{{ $t('quotation.templateForm') }}
|
|
</FormGroupHead>
|
|
<FormIssue :readonly="!state.isEdit" />
|
|
</section>
|
|
<section class="col-12">
|
|
<FormGroupHead>
|
|
{{
|
|
$t('general.select', { msg: $t('requestList.employeeMessenger') })
|
|
}}
|
|
</FormGroupHead>
|
|
<FormEmployee
|
|
:readonly="!state.isEdit"
|
|
class="surface-1"
|
|
v-model:local-employee="formData.localEmployee"
|
|
v-model:employee-id="formData.employeeId"
|
|
:district-id="responsibleAreaDistrictId"
|
|
/>
|
|
</section>
|
|
<section class="col-12">
|
|
<FormGroupHead>
|
|
{{ $t('duty.text', { subject: $t('general.individual') }) }}
|
|
</FormGroupHead>
|
|
<FormDuty
|
|
:options="[10]"
|
|
:readonly="!state.isEdit"
|
|
class="surface-1"
|
|
v-model:duty="formData.individualDuty"
|
|
v-model:duty-cost="formData.individualDutyCost"
|
|
cost
|
|
/>
|
|
</section>
|
|
</main>
|
|
</q-expansion-item>
|
|
</template>
|
|
<style></style>
|