Untitled
unknown
html
22 days ago
17 kB
3
Indexable
Never
<div class="w-full">
<div class="grid formgrid p-fluid w-full" style="margin-bottom:-1rem;">
<!-- Column 1 -->
<div class="field col-12 md:col-10 grid formgrid p-fluid">
<div class="flex flex-column gap-2 lg:col-3 md:col-4 col-12">
<label class="lb-comp" for="ouId">{{ $tl('oU') }}</label>
<Dropdown id="ouId" v-model="context.ouId" :options="context.ouOptions" optionLabel="name"
optionValue="id" :placeholder="$tl('selectOu')"
class="kb-dropdown w-full h-3rem align-items-center" :loading="context.loading['ouId']">
<template #value="slotProps">
<i class="bi bi-buildings mr-2"></i>
<span v-if="context.ouOptions.find(option => option.id === slotProps.value)">
{{ context.ouOptions.find(option => option.id === slotProps.value).name }}
</span>
</template>
<template #option="slotProps">
<i class="bi bi-buildings mr-2"></i>
{{ slotProps.option.name }}
</template>
</Dropdown>
</div>
<div class="flex flex-column gap-2 lg:col-3 md:col-4 col-12">
<label class="lb-comp" for="dates">{{ $tl('journalMonthYear') }}</label>
<Calendar id="dates" v-model="context.dates" view="month" @hide="changeDates" showIcon
:manualInput="false" dateFormat="MM yy" :disabled="context.loading['table']" />
</div>
<div class="flex flex-column gap-2 lg:col-3 md:col-4 col-12">
<label class="lb-comp" for="status">{{ $tl('status') }}</label>
<div class="p-inputgroup flex-1">
<Dropdown v-model="status" :options="context.statusCode" optionValue="code"
:placeholder="$tl('search') + ' ' + $tl('status')"
class="kb-dropdown w-full border-noround-right md:w-14rem"
:loading="context.loading['table']" :disabled="context.loading['table']">
<template #value="slotProps">
<div class="flex align-items-center">
<span v-if="slotProps.value === 'All'"
class="badge bg-white mr-2 border-1 border-black-alpha-90"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.value === 'N'"
class="badge bg-purple-100 mr-2 border-1 border-purple-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.value === 'I'"
class="badge bg-blue-100 mr-2 border-1 border-blue-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.value === 'F'"
class="badge bg-green-100 mr-2 border-1 border-green-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.value === 'V'"
class="badge bg-gray-100 mr-2 border-1 border-gray-600"
style="width: 1rem; height: 1rem;"></span>
<span v-else-if="slotProps.value === 'D'"
class="badge bg-yellow-100 mr-2 border-1 border-yellow-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.value === 'E'"
class="badge bg-red-100 mr-2 border-1 border-red-600"
style="width: 1rem; height: 1rem;"></span>
<span
v-if="context.statusCode.find(option => option.code === slotProps.value)">
{{ $t('label.' + context.statusCode.find(option => option.code ===
slotProps.value).name) }}
</span>
</div>
</template>
<template #option="slotProps">
<div class="flex align-items-center">
<span v-if="slotProps.option.code === 'All'"
class="badge bg-white mr-2 border-1 border-black-alpha-90"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.option.code === 'N'"
class="badge bg-purple-100 mr-2 border-1 border-purple-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.option.code === 'I'"
class="badge bg-blue-100 mr-2 border-1 border-blue-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.option.code === 'F'"
class="badge bg-green-100 mr-2 border-1 border-green-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.option.code === 'V'"
class="badge bg-gray-100 mr-2 border-1 border-gray-600"
style="width: 1rem; height: 1rem;"></span>
<span v-if="slotProps.option.code === 'D'"
class="badge bg-yellow-100 mr-2 border-1 border-yellow-600"
style="width: 1rem; height: 1rem;"></span>
<span v-else-if="slotProps.option.code === 'E'"
class="badge bg-red-100 mr-2 border-1 border-red-600"
style="width: 1rem; height: 1rem;"></span>
<span>{{ $t('label.' + slotProps.option.name) }}</span>
</div>
</template>
</Dropdown>
<Button icon="pi pi-search" outlined @click="statusFilter" />
</div>
</div>
<div class="flex flex-column lg:col-3 md:col-4 col-12 justify-content-end">
<div class="flex align-items-center">
<Checkbox v-model="flgHideDeleted" binary="true" />
<label for="hideDeleted" class="m-2"> {{ $t('label.hideDeleted') }} </label>
</div>
</div>
</div>
<div class="flex flex-column gap-2 lg:col-2 col-12 justify-content-end mb-3 align-items-end"
style="margin-left: 0rem">
<SplitButton v-if="hasAccess('createProcessHondok')" :model="addHonorOptions" @click="addUmum">
<i class="pi pi-plus mr-2"></i>
<span class="flex align-items-center font-bold">
<span>{{ $t('label.addUmum') }}</span>
</span>
</SplitButton>
</div>
</div>
<DataTable :value="context.dataTable" class="mt-3"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:lazy="true" ref="dt" :totalRecords="context.totalRecords" :paginator="true"
@page="context.onPage($event)" :rows="context.defaultRows"
:rowsPerPageOptions="context.rowPerPageOptions" responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" :scrollable="true">
<template #empty>
<p class="text-center w-full">{{ $t('label.dataNotAvail') }}</p>
</template>
<Column field="action" :header="$t('label.actions')" style="width: 2.7%;" class="flex-auto"
headerClass="justify-content-center" bodyClass="justify-content-center">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="flex-column">
<SplitButton :model="getActionOptions(data)" @click="getProcess(data)" severity="secondary"
:outlined="data.status === 'V'">
<span class="flex align-items-center font-bold">
<span>{{ getProcessLabel(data.processType) }}</span>
</span>
</SplitButton>
</div>
</template>
</Column>
<Column field="paymentDate" :header="$t('label.paymentDate')" style="width: 3%;" class="flex-auto"
headerClass="justify-content-center align-items-center" bodyClass="justify-content-center">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="flex-column">
<span class="block" :class="{ 'text-gray-400': data.status === 'V' }"
style="word-wrap: break-word;">
{{ data.journalDate }}
</span>
</div>
</template>
</Column>
<Column field="processType" :header="$t('label.processType')" style="width: 5%;" class="flex-auto"
headerClass="justify-content-center" bodyClass="justify-content-center">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="flex-column">
<span class="block" :class="{ 'text-gray-400': data.status === 'V' }"
style="word-wrap: break-word;">
{{ data.processType }}
</span>
<span class="block text-gray-400" style="word-wrap: break-word;">{{ data.partnerName
}}</span>
</div>
</template>
</Column>
<Column field="calculationPeriod" :header="$t('label.calculationPeriod')" style="width: 5%;"
class="flex-auto" headerClass="justify-content-center" bodyClass="justify-content-center">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="flex-column">
<span class="block" :class="{ 'text-gray-400': data.status === 'V' }"
style="word-wrap: break-word;">
{{ data.calculationPeriod }}
</span>
</div>
</template>
</Column>
<Column field="totalAdmission" :header="$t('label.totalAdmission')" style="width: 1%;" class="flex-auto"
headerClass="justify-content-center" bodyClass="justify-content-center">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="flex-column">
<span class="block text-right" :class="{ 'text-gray-400': data.status === 'V' }"
style="word-wrap: break-word;">{{ data.totalAdmission }}</span>
</div>
</template>
</Column>
<Column field="estimationValue" :header="$t('label.estimationValue')" style="width: 3%;"
class="flex-auto" headerClass="justify-content-center" bodyClass="justify-content-center">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="flex-column">
<span class="block text-right" :class="{ 'text-gray-400': data.status === 'V' }"
style="word-wrap: break-word;">{{ toCurrencyLocale(data.estimationValue) }}</span>
</div>
</template>
</Column>
<Column field="status" :header="$t('label.status')" style="width: 1%;" class="flex-auto">
<template #body="{ data }">
<Skeleton v-if="context.loading['table']" height="2rem"></Skeleton>
<div v-if="!context.loading['table']" class="w-full align-items-center justify-content-around">
<div class="kb-highlight" :class="{
'bg-blue-100 text-blue-600 w-9rem': data.status === 'I',
'bg-purple-100 text-purple-600 w-9rem': data.status === 'N',
'bg-yellow-100 text-yellow-600 w-9rem': data.status === 'D',
'bg-green-100 text-green-600 w-9rem': data.status === 'F',
'bg-gray-100 text-gray-400 w-9rem': data.status === 'V',
'bg-red-100 text-red-400 w-9rem': data.status === 'E'
}">
<span class="text-lg font-semibold text-center">
{{ data.status === 'I' ? $t('label.inProgress') :
data.status === 'N' ? $t('label.notProcess') :
data.status === 'D' ? $t('label.draft') :
data.status === 'F' ? $t('label.done') :
data.status === 'E' ? $t('label.error') :
data.status === 'V' ? $t('label.void') : '' }}
</span>
</div>
<div v-if="data.status === 'E'" class="mt-2">
<span class="font-semibold cursor-pointer hover:text-red-700 underline text-red-500"
@click="viewError(data)">
{{ $t('label.viewError') }}
</span>
</div>
</div>
</template>
</Column>
</DataTable>
</div>Leave a Comment