refactor: refs #7527 customerCreditContracts use popup and add all funcionality
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
0a330bfe8f
commit
3f399e5bd4
|
|
@ -2,12 +2,13 @@
|
|||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import ModalCloseContract from 'src/pages/Customer/components/ModalCloseContract.vue';
|
||||
import { toDate } from 'src/filters';
|
||||
import CustomerCreditContractsCreate from '../components/CustomerCreditContractsCreate.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
|
@ -16,6 +17,7 @@ const quasar = useQuasar();
|
|||
|
||||
const vnPaginateRef = ref(null);
|
||||
const showQPageSticky = ref(true);
|
||||
const showForm = ref();
|
||||
|
||||
const filter = {
|
||||
order: 'finished ASC, started DESC',
|
||||
|
|
@ -36,25 +38,21 @@ const fetch = (data) => {
|
|||
data.forEach((element) => {
|
||||
if (!element.finished) {
|
||||
showQPageSticky.value = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toCustomerCreditContractsCreate = () => {
|
||||
router.push({ name: 'CustomerCreditContractsCreate' });
|
||||
};
|
||||
|
||||
const openDialog = (item) => {
|
||||
quasar.dialog({
|
||||
component: ModalCloseContract,
|
||||
componentProps: {
|
||||
id: item.id,
|
||||
promise: updateData,
|
||||
promise: async () => {
|
||||
await updateData();
|
||||
showQPageSticky.value = true;
|
||||
},
|
||||
},
|
||||
});
|
||||
updateData();
|
||||
showQPageSticky.value = true;
|
||||
};
|
||||
|
||||
const openViewCredit = (credit) => {
|
||||
|
|
@ -66,14 +64,14 @@ const openViewCredit = (credit) => {
|
|||
});
|
||||
};
|
||||
|
||||
const updateData = () => {
|
||||
vnPaginateRef.value?.fetch();
|
||||
const updateData = async () => {
|
||||
await vnPaginateRef.value?.fetch();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="full-width flex justify-center">
|
||||
<QCard class="card-width q-pa-lg">
|
||||
<section class="row justify-center">
|
||||
<QCard class="q-pa-lg" style="width: 70%">
|
||||
<VnPaginate
|
||||
:user-filter="filter"
|
||||
@on-fetch="fetch"
|
||||
|
|
@ -84,100 +82,82 @@ const updateData = () => {
|
|||
url="CreditClassifications"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<div v-if="rows.length">
|
||||
<div v-if="rows.length" class="q-gutter-y-md">
|
||||
<QCard
|
||||
v-for="(item, index) in rows"
|
||||
:key="index"
|
||||
:class="{
|
||||
'customer-card': true,
|
||||
'q-mb-md': index < rows.length - 1,
|
||||
'is-active': !item.finished,
|
||||
}"
|
||||
:class="{ disabled: item.finished }"
|
||||
>
|
||||
<QCardSection
|
||||
class="full-width flex justify-between q-py-none"
|
||||
class="full-width"
|
||||
:class="{ 'row justify-between': $q.screen.gt.md }"
|
||||
>
|
||||
<div class="width-state flex">
|
||||
<div
|
||||
class="flex items-center cursor-pointer q-mr-md"
|
||||
v-if="!item.finished"
|
||||
<div class="width-state row no-wrap">
|
||||
<QIcon
|
||||
:style="{
|
||||
visibility: item.finished
|
||||
? 'hidden'
|
||||
: 'visible',
|
||||
}"
|
||||
@click.stop="openDialog(item)"
|
||||
color="primary"
|
||||
name="lock"
|
||||
size="md"
|
||||
class="fill-icon q-px-md"
|
||||
>
|
||||
<QIcon
|
||||
@click.stop="openDialog(item)"
|
||||
color="primary"
|
||||
name="lock"
|
||||
size="md"
|
||||
class="fill-icon"
|
||||
>
|
||||
<QTooltip>{{ t('Close contract') }}</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<QTooltip>{{ t('Close contract') }}</QTooltip>
|
||||
</QIcon>
|
||||
|
||||
<div>
|
||||
<div class="flex q-mb-xs">
|
||||
<div class="q-mr-sm color-vn-label">
|
||||
{{ t('Since') }}:
|
||||
</div>
|
||||
<div class="text-weight-bold">
|
||||
{{ toDate(item.started) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="q-mr-sm color-vn-label">
|
||||
{{ t('To') }}:
|
||||
</div>
|
||||
<div class="text-weight-bold">
|
||||
{{ toDate(item.finished) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<VnLv
|
||||
:label="t('Since')"
|
||||
:value="toDate(item.started)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('To')"
|
||||
:value="toDate(item.finished)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<QSeparator vertical />
|
||||
|
||||
<div class="width-data flex">
|
||||
<div class="column width-data">
|
||||
<div
|
||||
class="full-width flex justify-between items-center"
|
||||
class="column"
|
||||
v-if="item?.insurances.length"
|
||||
v-for="insurance in item.insurances"
|
||||
:key="insurance.id"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="color-vn-label q-mr-xs">
|
||||
{{ t('Credit') }}:
|
||||
</div>
|
||||
<div class="text-weight-bold">
|
||||
{{ item.insurances[0].credit }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="color-vn-label q-mr-xs">
|
||||
{{ t('Grade') }}:
|
||||
</div>
|
||||
<div class="text-weight-bold">
|
||||
{{ item.insurances[0].grade || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="color-vn-label q-mr-xs">
|
||||
{{ t('Date') }}:
|
||||
</div>
|
||||
<div class="text-weight-bold">
|
||||
{{ toDate(item.insurances[0].created) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center cursor-pointer">
|
||||
<QIcon
|
||||
@click.stop="openViewCredit(item)"
|
||||
color="primary"
|
||||
name="preview"
|
||||
size="md"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('View credits')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<div
|
||||
:class="{
|
||||
'row q-gutter-x-md': $q.screen.gt.sm,
|
||||
}"
|
||||
class="q-mb-sm"
|
||||
>
|
||||
<VnLv
|
||||
:label="t('Credit')"
|
||||
:value="toCurrency(insurance.credit)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('Grade')"
|
||||
:value="dashIfEmpty(insurance.grade)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('Date')"
|
||||
:value="toDate(insurance.created)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<QBtn
|
||||
@click.stop="openViewCredit(item)"
|
||||
icon="preview"
|
||||
size="md"
|
||||
:title="t('View credits')"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</div>
|
||||
|
|
@ -187,11 +167,11 @@ const updateData = () => {
|
|||
</template>
|
||||
</VnPaginate>
|
||||
</QCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<QPageSticky :offset="[18, 18]" v-if="showQPageSticky">
|
||||
<QBtn
|
||||
@click.stop="toCustomerCreditContractsCreate()"
|
||||
@click.stop="showForm = !showForm"
|
||||
color="primary"
|
||||
fab
|
||||
icon="add"
|
||||
|
|
@ -201,24 +181,25 @@ const updateData = () => {
|
|||
{{ t('New contract') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
|
||||
<QDialog v-model="showForm">
|
||||
<CustomerCreditContractsCreate @on-data-saved="updateData()" />
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-card {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.is-active {
|
||||
background-color: var(--vn-light-gray);
|
||||
}
|
||||
.width-state {
|
||||
width: 30%;
|
||||
}
|
||||
.width-data {
|
||||
width: 65%;
|
||||
width: 50%;
|
||||
}
|
||||
::v-deep(.label) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
::v-deep(.label)::after {
|
||||
content: ':';
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<script setup>
|
||||
import { computed, onBeforeMount, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const create = ref(null);
|
||||
const tableRef = ref();
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'created',
|
||||
format: ({ created }) => toDate(created),
|
||||
label: t('Created'),
|
||||
name: 'created',
|
||||
create: true,
|
||||
columnCreate: {
|
||||
component: 'date',
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'grade',
|
||||
label: t('Grade'),
|
||||
name: 'grade',
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
format: ({ credit }) => toCurrency(credit),
|
||||
label: t('Credit'),
|
||||
name: 'credit',
|
||||
create: true,
|
||||
},
|
||||
]);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
const query = `CreditClassifications/findOne?filter=${encodeURIComponent(
|
||||
JSON.stringify({
|
||||
fields: ['finished'],
|
||||
where: { id: route.params.creditId },
|
||||
}),
|
||||
)}`;
|
||||
const { data } = await axios(query);
|
||||
create.value = data.finished
|
||||
? false
|
||||
: {
|
||||
urlCreate: 'CreditInsurances',
|
||||
title: t('Create Insurance'),
|
||||
onDataSaved: () => tableRef.value.reload(),
|
||||
formInitialData: {
|
||||
created: Date.vnNew(),
|
||||
creditClassificationFk: route.params.creditId,
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnTable
|
||||
v-if="create != null"
|
||||
url="CreditInsurances"
|
||||
ref="tableRef"
|
||||
data-key="creditInsurances"
|
||||
:filter="{
|
||||
where: {
|
||||
creditClassificationFk: `${route.params.creditId}`,
|
||||
},
|
||||
order: 'created DESC',
|
||||
}"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
:is-editable="false"
|
||||
:use-model="true"
|
||||
:column-search="false"
|
||||
:disable-option="{ card: true }"
|
||||
:create
|
||||
auto-load
|
||||
/>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Created: Fecha creación
|
||||
Grade: Grade
|
||||
Credit: Crédito
|
||||
</i18n>
|
||||
|
|
@ -3,44 +3,29 @@ import { reactive, computed } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import FormModelPopup from 'src/components/FormModelPopup.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const routeId = computed(() => route.params.id);
|
||||
const router = useRouter();
|
||||
|
||||
const initialData = reactive({
|
||||
started: Date.vnNew(),
|
||||
clientFk: routeId.value,
|
||||
});
|
||||
|
||||
const toCustomerCreditContracts = () => {
|
||||
router.push({ name: 'CustomerCreditContracts' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormModel
|
||||
<FormModelPopup
|
||||
v-on="$attrs"
|
||||
:form-initial-data="initialData"
|
||||
:observe-form-changes="false"
|
||||
url-create="creditClassifications/createWithInsurance"
|
||||
@on-data-saved="toCustomerCreditContracts()"
|
||||
>
|
||||
<template #moreActions>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
@click="toCustomerCreditContracts"
|
||||
color="primary"
|
||||
flat
|
||||
icon="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #form="{ data }">
|
||||
<template #form-inputs="{ data }">
|
||||
<VnRow>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
|
|
@ -63,7 +48,7 @@ const toCustomerCreditContracts = () => {
|
|||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const filter = {
|
||||
where: {
|
||||
creditClassificationFk: `${route.params.creditId}`,
|
||||
},
|
||||
limit: 20,
|
||||
};
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'created',
|
||||
format: ({ created }) => toDate(created),
|
||||
label: t('Created'),
|
||||
name: 'created',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'grade',
|
||||
label: t('Grade'),
|
||||
name: 'grade',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
format: ({ credit }) => toCurrency(credit),
|
||||
label: t('Credit'),
|
||||
name: 'credit',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnTable
|
||||
url="CreditInsurances"
|
||||
ref="tableRef"
|
||||
data-key="creditInsurances"
|
||||
:filter="filter"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
:is-editable="false"
|
||||
:use-model="true"
|
||||
:column-search="false"
|
||||
:disable-option="{ card: true }"
|
||||
auto-load
|
||||
></VnTable>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Created: Fecha creación
|
||||
Grade: Grade
|
||||
Credit: Crédito
|
||||
</i18n>
|
||||
|
|
@ -29,7 +29,7 @@ const saveData = async () => {
|
|||
finished: timestamp,
|
||||
};
|
||||
await axios.patch(`CreditClassifications/${$props.id}`, payload);
|
||||
$props.promise();
|
||||
await $props.promise();
|
||||
closeButton.value.click();
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -185,20 +185,12 @@ const customerCard = {
|
|||
'src/pages/Customer/Card/CustomerCreditContracts.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'CustomerCreditContractsCreate',
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Customer/components/CustomerCreditContractsCreate.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'insurance/:creditId',
|
||||
name: 'CustomerCreditContractsInsurance',
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Customer/components/CustomerCreditContractsInsurance.vue'
|
||||
'src/pages/Customer/Card/CustomerCreditContractsInsurance.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue