botones excell y prueba exportar
This commit is contained in:
parent
d3dc7d71c4
commit
37d87dbd50
127
package-lock.json
generated
127
package-lock.json
generated
@ -18,18 +18,22 @@
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"@primeng/themes": "^19.1.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"primeflex": "^4.0.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primeng": "^19.1.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"xlsx": "^0.18.5",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^19.2.9",
|
||||
"@angular/cli": "^19.2.9",
|
||||
"@angular/compiler-cli": "^19.2.0",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"@types/xlsx": "^0.0.35",
|
||||
"jasmine-core": "~5.6.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
@ -5160,6 +5164,13 @@
|
||||
"@types/send": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/file-saver": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
|
||||
"integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/http-errors": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
|
||||
@ -5292,6 +5303,13 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/xlsx": {
|
||||
"version": "0.0.35",
|
||||
"resolved": "https://registry.npmjs.org/@types/xlsx/-/xlsx-0.0.35.tgz",
|
||||
"integrity": "sha512-s0x3DYHZzOkxtjqOk/Nv1ezGzpbN7I8WX+lzlV/nFfTDOv7x4d8ZwGHcnaiB8UCx89omPsftQhS5II3jeWePxQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-basic-ssl": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.2.0.tgz",
|
||||
@ -5563,6 +5581,15 @@
|
||||
"node": ">=8.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/adler-32": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
|
||||
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/agent-base": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
|
||||
@ -6313,6 +6340,19 @@
|
||||
],
|
||||
"license": "CC-BY-4.0"
|
||||
},
|
||||
"node_modules/cfb": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
|
||||
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"adler-32": "~1.3.0",
|
||||
"crc-32": "~1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@ -6555,6 +6595,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/codepage": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
|
||||
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@ -6852,6 +6901,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/crc-32": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
|
||||
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"crc32": "bin/crc32.njs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -7847,6 +7908,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/file-saver": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
@ -8008,6 +8075,15 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/frac": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
|
||||
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/fraction.js": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||
@ -13030,6 +13106,18 @@
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/ssf": {
|
||||
"version": "0.11.2",
|
||||
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
|
||||
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"frac": "~1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/ssri": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
|
||||
@ -14624,6 +14712,24 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/wmf": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
|
||||
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/word": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
|
||||
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/wrap-ansi": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
|
||||
@ -14797,6 +14903,27 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xlsx": {
|
||||
"version": "0.18.5",
|
||||
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
|
||||
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"adler-32": "~1.3.0",
|
||||
"cfb": "~1.2.1",
|
||||
"codepage": "~1.15.0",
|
||||
"crc-32": "~1.2.1",
|
||||
"ssf": "~0.11.2",
|
||||
"wmf": "~1.0.1",
|
||||
"word": "~0.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"xlsx": "bin/xlsx.njs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
|
||||
@ -20,18 +20,22 @@
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"@primeng/themes": "^19.1.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"primeflex": "^4.0.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primeng": "^19.1.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"xlsx": "^0.18.5",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^19.2.9",
|
||||
"@angular/cli": "^19.2.9",
|
||||
"@angular/compiler-cli": "^19.2.0",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"@types/xlsx": "^0.0.35",
|
||||
"jasmine-core": "~5.6.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
|
||||
@ -1,84 +1,144 @@
|
||||
<div class="p-3 text-white">
|
||||
<div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
|
||||
<div class="col-12 md:col-3 lg:col-2 tablaAzul border-round ">
|
||||
<div class="border-round font-bold ">
|
||||
<div class="h-4rem">Filtro Empresa</div>
|
||||
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
|
||||
</div>
|
||||
<div
|
||||
class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1"
|
||||
>
|
||||
<div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Empresa</div>
|
||||
<p-select
|
||||
[options]="empresas"
|
||||
[(ngModel)]="selectedCity"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="w-full md:w-56"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Código Cronograma</div>
|
||||
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
|
||||
</div>
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Código Cronograma</div>
|
||||
<p-select
|
||||
[options]="empresas"
|
||||
[(ngModel)]="selectedCity"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="w-full md:w-56"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabla1 -->
|
||||
<div class="font-bold my-2 tituloTabla">Título de la tabla:</div>
|
||||
<p-table id="azul"
|
||||
[value]="products" stripedRows
|
||||
<!-- Tabla1 -->
|
||||
<div class="flex justify-content-between align-items-center my-2 py-2">
|
||||
<div class="font-bold tituloTabla">Título de la tabla:</div>
|
||||
<p-button
|
||||
icon="pi pi-file-excel"
|
||||
(onClick)="exportExcel(dt)"
|
||||
styleClass="p-button-success"
|
||||
pTooltip="Descargar planilla Excel"
|
||||
tooltipPosition="top"
|
||||
label="Exportar"
|
||||
[tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
|
||||
>
|
||||
</p-button>
|
||||
</div>
|
||||
<p-table
|
||||
id="azul"
|
||||
#dt
|
||||
[value]="products"
|
||||
stripedRows
|
||||
showGridlines
|
||||
[paginator]="true"
|
||||
[rows]="5"
|
||||
[showCurrentPageReport]="true"
|
||||
currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
|
||||
[rowsPerPageOptions]="[5, 10, 20]">
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="tablaAzul font-bold text-white">Empresa</th>
|
||||
<th class="tablaAzul font-bold text-white">Código de cronograma</th>
|
||||
<th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
|
||||
<th class="tablaAzul font-bold text-white">Nombre sistema</th>
|
||||
<th class="tablaAzul font-bold text-white">Tipo de inversión</th>
|
||||
<th class="tablaAzul font-bold text-white">Código de glosa PD</th>
|
||||
<th class="tablaAzul font-bold text-white">Descripción glosa</th>
|
||||
<th class="tablaAzul font-bold text-white">Monto Inversión Total (UF)</th>
|
||||
<th class="tablaAzul font-bold text-white">Año de Inicio</th>
|
||||
<th class="tablaAzul font-bold text-white">Año de Término</th>
|
||||
<th class="tablaAzul font-bold text-white">Mes de Término</th>
|
||||
<th class="tablaAzul font-bold text-white">Nota</th>
|
||||
<th class="bg-green-400 font-bold text-white">Estado aprobación</th>
|
||||
<th class="bg-green-400 font-bold text-white">Observación</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.fechaIngreso }}</td>
|
||||
<td>
|
||||
<div class="border-round font-bold">
|
||||
<p-select [options]="estadoAprobacion" [(ngModel)]="product.dato13" optionLabel="name" placeholder="Seleccione..." class="selectTabla"/>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ product.dato9 }}</td>
|
||||
<td>{{ product.dato10 }}</td>
|
||||
<td>{{ product.dato11 }}</td>
|
||||
<td>{{ product.dato12 }}</td>
|
||||
<td class="bg-verde">
|
||||
<div class="border-round font-bold">
|
||||
<p-select [options]="estadoAprobacion" [(ngModel)]="product.dato13" optionLabel="name" placeholder="Seleccione..." class="selectTabla"/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="bg-verde">
|
||||
<input
|
||||
type="analista"
|
||||
pInputText
|
||||
[(ngModel)]="product.analista"
|
||||
placeholder="Analista"
|
||||
name="analista"
|
||||
class="input-with-icon w-full"
|
||||
style="background-color: white; color: black;width: 228px !important;"
|
||||
/></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="col-12 text-right">
|
||||
<i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
|
||||
</div>
|
||||
[rowsPerPageOptions]="[5, 10, 20]"
|
||||
styleClass="p-datatable-sm"
|
||||
>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th class="tablaAzul font-bold text-white">Empresa</th>
|
||||
<th class="tablaAzul font-bold text-white">Código de cronograma</th>
|
||||
<th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
|
||||
<th class="tablaAzul font-bold text-white">Nombre sistema</th>
|
||||
<th class="tablaAzul font-bold text-white">Tipo de inversión</th>
|
||||
<th class="tablaAzul font-bold text-white">Código de glosa PD</th>
|
||||
<th class="tablaAzul font-bold text-white">Descripción glosa</th>
|
||||
<th class="tablaAzul font-bold text-white">Monto Inversión Total (UF)</th>
|
||||
<th class="tablaAzul font-bold text-white">Año de Inicio</th>
|
||||
<th class="tablaAzul font-bold text-white">Año de Término</th>
|
||||
<th class="tablaAzul font-bold text-white">Mes de Término</th>
|
||||
<th class="tablaAzul font-bold text-white">Nota</th>
|
||||
<th class="bg-green-400 font-bold text-white">Estado aprobación</th>
|
||||
<th class="bg-green-400 font-bold text-white">Observación</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.fechaIngreso }}</td>
|
||||
<td>
|
||||
<div class="border-round font-bold">
|
||||
<p-select
|
||||
[options]="estadoAprobacion"
|
||||
[(ngModel)]="product.dato13"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="selectTabla"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ product.dato9 }}</td>
|
||||
<td>{{ product.dato10 }}</td>
|
||||
<td>{{ product.dato11 }}</td>
|
||||
<td>{{ product.dato12 }}</td>
|
||||
<td class="bg-verde">
|
||||
<div class="border-round font-bold">
|
||||
<p-select
|
||||
[options]="estadoAprobacion"
|
||||
[(ngModel)]="product.dato13"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="selectTabla"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="bg-verde">
|
||||
<input
|
||||
type="analista"
|
||||
pInputText
|
||||
pTool
|
||||
[(ngModel)]="product.analista"
|
||||
placeholder="Analista"
|
||||
name="analista"
|
||||
class="input-with-icon w-full"
|
||||
style="
|
||||
background-color: white;
|
||||
color: black;
|
||||
width: 228px !important;
|
||||
"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
|
||||
<!-- Botón de exportar debajo de la tabla -->
|
||||
<div class="flex justify-content-end mt-3">
|
||||
<button
|
||||
pButton
|
||||
type="button"
|
||||
icon="pi pi-file-excel"
|
||||
(click)="exportExcel(dt)"
|
||||
class="p-button-success"
|
||||
label="Exportar a Excel"
|
||||
pTooltip="Descargar planilla Excel"
|
||||
tooltipPosition="top"
|
||||
[tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,27 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { Table, TableModule } from 'primeng/table';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { SelectModule } from 'primeng/select';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
import * as FileSaver from 'file-saver';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
@Component({
|
||||
selector: 'app-actualizacion-pd',
|
||||
imports: [FormsModule, TableModule, InputTextModule, SelectModule],
|
||||
imports: [
|
||||
FormsModule,
|
||||
TableModule,
|
||||
InputTextModule,
|
||||
SelectModule,
|
||||
ButtonModule,
|
||||
TooltipModule
|
||||
|
||||
],
|
||||
templateUrl: './actualizacion-pd.component.html',
|
||||
styleUrl: './actualizacion-pd.component.scss'
|
||||
styleUrl: './actualizacion-pd.component.scss',
|
||||
standalone: true
|
||||
})
|
||||
export class ActualizacionPdComponent {
|
||||
pageTitle: string = 'Cronogramas cargados:';
|
||||
@ -19,7 +32,6 @@ export class ActualizacionPdComponent {
|
||||
{ name: 'Aprobado', value: 'Aprobado' },
|
||||
{ name: 'Rechazado', value: 'Rechazado' },
|
||||
];
|
||||
|
||||
products: any[] = [
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
@ -81,4 +93,83 @@ export class ActualizacionPdComponent {
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
/**
|
||||
* Exporta la tabla a Excel
|
||||
* @param table Referencia a la tabla PrimeNG
|
||||
*/
|
||||
exportExcel(table: Table) {
|
||||
// Preparamos los datos para exportar
|
||||
const exportData = this.prepareDataForExport(table);
|
||||
|
||||
// Creamos el libro de Excel
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData);
|
||||
const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
|
||||
|
||||
// Aplicamos estilos a las celdas (encabezados en negrita con fondo azul)
|
||||
this.applyStyles(worksheet);
|
||||
|
||||
// Opciones de exportación
|
||||
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
||||
|
||||
// Guardamos el archivo
|
||||
this.saveAsExcelFile(excelBuffer, 'cronogramas_exportados');
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepara los datos para la exportación, filtrando según sea necesario
|
||||
*/
|
||||
prepareDataForExport(table: Table): any[] {
|
||||
// Si hay filtros aplicados, usamos los datos filtrados
|
||||
const data = table.filteredValue || table.value;
|
||||
|
||||
// Mapeamos los datos para tener solo las propiedades que queremos exportar
|
||||
return data.map(item => {
|
||||
return {
|
||||
'Empresa': item.empresa,
|
||||
'Código de cronograma': item.codigoCronograma,
|
||||
'Etapa del Servicio': item.codigoCronogramaAjuste,
|
||||
'Nombre sistema': item.tipoCarga,
|
||||
'Tipo de inversión': item.estadoRevision,
|
||||
'Código de glosa PD': item.analista,
|
||||
'Descripción glosa': item.fechaIngreso,
|
||||
'Monto Inversión Total (UF)': '',
|
||||
'Año de Inicio': item.dato9,
|
||||
'Año de Término': item.dato10,
|
||||
'Mes de Término': item.dato11 || '',
|
||||
'Nota': item.dato12 || '',
|
||||
'Estado aprobación': item.dato13,
|
||||
'Observación': ''
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Aplica estilos al worksheet de Excel
|
||||
*/
|
||||
applyStyles(worksheet: XLSX.WorkSheet) {
|
||||
// Establecemos el estilo para los encabezados
|
||||
const headerStyle = {
|
||||
font: { bold: true, color: { rgb: 'FFFFFF' } },
|
||||
fill: { fgColor: { rgb: '0070C0' } },
|
||||
alignment: { horizontal: 'center' }
|
||||
};
|
||||
|
||||
// Aplicar estilos a los encabezados (primera fila)
|
||||
const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
|
||||
for (let col = range.s.c; col <= range.e.c; col++) {
|
||||
const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
|
||||
if (!worksheet[cellRef]) worksheet[cellRef] = { t: 's', v: '' };
|
||||
worksheet[cellRef].s = headerStyle;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Guarda el buffer como un archivo Excel
|
||||
*/
|
||||
saveAsExcelFile(buffer: any, fileName: string): void {
|
||||
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
|
||||
const EXCEL_EXTENSION = '.xlsx';
|
||||
const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
|
||||
FileSaver.saveAs(data, fileName + '_' + new Date().getTime() + EXCEL_EXTENSION);
|
||||
}
|
||||
}
|
||||
@ -1,98 +1,135 @@
|
||||
<div class="p-3 text-white">
|
||||
<div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
|
||||
<div class="col-6 md:col-3 lg:col-2 tablaAzul border-round ">
|
||||
<div class="border-round font-bold ">
|
||||
<div class="h-4rem">Filtro Empresa</div>
|
||||
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
|
||||
</div>
|
||||
<div
|
||||
class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1"
|
||||
>
|
||||
<div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Empresa</div>
|
||||
<p-select
|
||||
[options]="empresas"
|
||||
[(ngModel)]="selectedCity"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="w-full md:w-56"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Código Cronograma</div>
|
||||
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
|
||||
</div>
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Código Cronograma</div>
|
||||
<p-select
|
||||
[options]="empresas"
|
||||
[(ngModel)]="selectedCity"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="w-full md:w-56"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabla1 -->
|
||||
<!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
|
||||
<p-table id="azul"
|
||||
[value]="products" stripedRows
|
||||
<!-- Tabla1 -->
|
||||
<!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
|
||||
<p-table
|
||||
#dt
|
||||
id="azul"
|
||||
[value]="products"
|
||||
stripedRows
|
||||
showGridlines
|
||||
[paginator]="true"
|
||||
[rows]="5"
|
||||
[showCurrentPageReport]="true"
|
||||
currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
|
||||
[rowsPerPageOptions]="[5, 10, 20]">
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th colspan="10" style="background-color: #F8F9FA;border: none;"></th>
|
||||
<th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
|
||||
<th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="tablaAzul text-white font-bold">Empresa</th>
|
||||
<th class="tablaAzul text-white font-bold">Código de cronograma</th>
|
||||
<th class="tablaAzul text-white font-bold">Etapa del Servicio</th>
|
||||
<th class="tablaAzul text-white font-bold">Nombre sistema</th>
|
||||
<th class="tablaAzul text-white font-bold">Nombre sistema</th>
|
||||
<th class="tablaAzul text-white font-bold">Nombre localidad</th>
|
||||
<th class="tablaAzul text-white font-bold">Tipo de inversión</th>
|
||||
<th class="tablaAzul text-white font-bold">Código de glosa PD</th>
|
||||
<th class="tablaAzul text-white font-bold">Descripción glosa</th>
|
||||
<th class="tablaAzul text-white font-bold">Monto Inversión Total (UF)</th>
|
||||
<th class="tablaAzul text-white font-bold">Año de Inicio</th>
|
||||
<th class="tablaAzul text-white font-bold">Año de Término</th>
|
||||
<th class="tablaAzul text-white font-bold">Mes de Término</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Año de Inicio</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Año de Término</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Mes de Término</th>
|
||||
<th class="tablaAzul text-white font-bold">Nota</th>
|
||||
<th class="bg-green-400 text-white font-bold">Estado aprobación</th>
|
||||
<th class="bg-green-400 text-white font-bold">Observación</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.fechaIngreso }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.dato9 }}</td>
|
||||
<td>{{ product.dato10 }}</td>
|
||||
<td>{{ product.dato13 }}</td>
|
||||
<td>{{ product.dato14 }}</td>
|
||||
<td>{{ product.dato15 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato16 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato17 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato18 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato11 }}</td>
|
||||
<td>{{ product.dato12 }}</td>
|
||||
<td class="bg-verde">
|
||||
<div class="border-round font-bold">
|
||||
<p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="selectTabla" />
|
||||
</div>
|
||||
</td>
|
||||
<td class="bg-verde">
|
||||
<input
|
||||
type="analista"
|
||||
pInputText
|
||||
[(ngModel)]="product.analista"
|
||||
placeholder="Analista"
|
||||
name="analista"
|
||||
class="input-with-icon w-full"
|
||||
style="background-color: white; color: black;width: 228px !important;"
|
||||
/></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="col-12 text-right">
|
||||
<i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
|
||||
</div>
|
||||
|
||||
|
||||
[rowsPerPageOptions]="[5, 10, 20]"
|
||||
>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th colspan="10" style="background-color: #f8f9fa; border: none"></th>
|
||||
<th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
|
||||
<th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="tablaAzul text-white font-bold">Empresa</th>
|
||||
<th class="tablaAzul text-white font-bold">Código de cronograma</th>
|
||||
<th class="tablaAzul text-white font-bold">Etapa del Servicio</th>
|
||||
<th class="tablaAzul text-white font-bold">Nombre sistema</th>
|
||||
<th class="tablaAzul text-white font-bold">Nombre sistema</th>
|
||||
<th class="tablaAzul text-white font-bold">Nombre localidad</th>
|
||||
<th class="tablaAzul text-white font-bold">Tipo de inversión</th>
|
||||
<th class="tablaAzul text-white font-bold">Código de glosa PD</th>
|
||||
<th class="tablaAzul text-white font-bold">Descripción glosa</th>
|
||||
<th class="tablaAzul text-white font-bold">Monto Inversión Total (UF)</th>
|
||||
<th class="tablaAzul text-white font-bold">Año de Inicio</th>
|
||||
<th class="tablaAzul text-white font-bold">Año de Término</th>
|
||||
<th class="tablaAzul text-white font-bold">Mes de Término</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Año de Inicio</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Año de Término</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Mes de Término</th>
|
||||
<th class="tablaAzul text-white font-bold">Nota</th>
|
||||
<th class="bg-green-400 text-white font-bold">Estado aprobación</th>
|
||||
<th class="bg-green-400 text-white font-bold">Observación</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.fechaIngreso }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.dato9 }}</td>
|
||||
<td>{{ product.dato10 }}</td>
|
||||
<td>{{ product.dato13 }}</td>
|
||||
<td>{{ product.dato14 }}</td>
|
||||
<td>{{ product.dato15 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato16 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato17 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato18 }}</td>
|
||||
<td class="bg-azulFuerte">{{ product.dato11 }}</td>
|
||||
<td>{{ product.dato12 }}</td>
|
||||
<td class="bg-verde">
|
||||
<div class="border-round font-bold">
|
||||
<p-select
|
||||
[options]="estadoAprobacion"
|
||||
[(ngModel)]="select1"
|
||||
optionLabel="name"
|
||||
placeholder="Seleccione..."
|
||||
class="selectTabla"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="bg-verde">
|
||||
<input
|
||||
type="analista"
|
||||
pInputText
|
||||
[(ngModel)]="product.analista"
|
||||
placeholder="Analista"
|
||||
name="analista"
|
||||
class="input-with-icon w-full"
|
||||
style="
|
||||
background-color: white;
|
||||
color: black;
|
||||
width: 228px !important;
|
||||
"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="flex justify-content-end mt-3">
|
||||
<button
|
||||
pButton
|
||||
type="button"
|
||||
onclick="exportExcel(dt)"
|
||||
icon="pi pi-file-excel"
|
||||
class="p-button-success"
|
||||
label="Exportar a Excel"
|
||||
pTooltip="Descargar planilla Excel"
|
||||
tooltipPosition="top"
|
||||
[tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,22 +1,31 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { TableModule ,Table} from 'primeng/table';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { SelectModule } from 'primeng/select';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import * as FileSaver from 'file-saver';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ajuste-pd',
|
||||
imports: [FormsModule, TableModule, InputTextModule, SelectModule],
|
||||
imports: [
|
||||
FormsModule,
|
||||
TableModule,
|
||||
InputTextModule,
|
||||
SelectModule,
|
||||
TooltipModule,
|
||||
ButtonModule
|
||||
],
|
||||
templateUrl: './ajuste-pd.component.html',
|
||||
styleUrl: './ajuste-pd.component.scss'
|
||||
})
|
||||
export class AjustePdComponent {
|
||||
selectedCity: any = '';
|
||||
empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
|
||||
|
||||
select1: any = '';
|
||||
estadoAprobacion: any[] = [{name:'Rechazado'}, {name:'Aprobado'}];
|
||||
|
||||
products: any[] = [
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
@ -92,4 +101,114 @@ export class AjustePdComponent {
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
/**
|
||||
* Exporta los datos de la tabla a un archivo Excel
|
||||
* @param table Referencia a la tabla PrimeNG
|
||||
*/
|
||||
exportExcel(table: Table) {
|
||||
try {
|
||||
// Obtenemos los datos a exportar (usamos los datos filtrados si existen)
|
||||
const dataToExport = this.prepareDataForExport(table);
|
||||
|
||||
// Creamos el libro de Excel
|
||||
const worksheet = XLSX.utils.json_to_sheet(dataToExport);
|
||||
const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
|
||||
|
||||
// Aplicamos estilos a las celdas
|
||||
this.applyExcelStyles(worksheet);
|
||||
|
||||
// Opciones de exportación
|
||||
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
||||
|
||||
// Guardamos el archivo
|
||||
this.saveAsExcelFile(excelBuffer, 'ajuste_pd');
|
||||
|
||||
console.log('Exportación a Excel completada con éxito');
|
||||
} catch (error) {
|
||||
console.error('Error al exportar a Excel:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepara los datos para la exportación, traduciendo los nombres de columnas
|
||||
* @param table Referencia a la tabla PrimeNG
|
||||
* @returns Array de objetos con los datos formateados para exportar
|
||||
*/
|
||||
private prepareDataForExport(table: Table): any[] {
|
||||
// Si hay filtros aplicados, usamos los datos filtrados, de lo contrario todos los datos
|
||||
const data = table.filteredValue || table.value;
|
||||
|
||||
// Mapeamos los datos para tener nombres de columnas en español y legibles
|
||||
return data.map(item => {
|
||||
return {
|
||||
'Empresa': item.empresa,
|
||||
'Código de cronograma': item.codigoCronograma,
|
||||
'Etapa del Servicio': item.codigoCronogramaAjuste,
|
||||
'Nombre sistema': item.tipoCarga,
|
||||
'Tipo de inversión': item.estadoRevision,
|
||||
'Código de glosa PD': item.analista,
|
||||
'Descripción glosa': item.fechaIngreso,
|
||||
'Año de Inicio': item.dato9,
|
||||
'Año de Término': item.dato10,
|
||||
'Estado aprobación': item.dato13
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Aplica estilos al worksheet de Excel para mejorar la presentación
|
||||
* @param worksheet Hoja de Excel a la que aplicar estilos
|
||||
*/
|
||||
private applyExcelStyles(worksheet: XLSX.WorkSheet) {
|
||||
// Definimos estilos para los encabezados
|
||||
const headerStyle = {
|
||||
font: { bold: true, color: { rgb: 'FFFFFF' } },
|
||||
fill: { fgColor: { rgb: '007ACC' } }, // Color azul para los encabezados
|
||||
alignment: { horizontal: 'center', vertical: 'center' }
|
||||
};
|
||||
|
||||
// Aplicamos estilos a los encabezados (primera fila)
|
||||
const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
|
||||
for (let col = range.s.c; col <= range.e.c; col++) {
|
||||
const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
|
||||
if (!worksheet[cellRef]) worksheet[cellRef] = { t: 's', v: '' };
|
||||
|
||||
// Asignamos el estilo al encabezado
|
||||
worksheet[cellRef].s = headerStyle;
|
||||
}
|
||||
|
||||
// Ajustamos el ancho de las columnas automáticamente
|
||||
const colWidths = [];
|
||||
for (let col = range.s.c; col <= range.e.c; col++) {
|
||||
colWidths.push({ wch: 15 }); // Ancho predeterminado
|
||||
}
|
||||
worksheet['!cols'] = colWidths;
|
||||
}
|
||||
|
||||
/**
|
||||
* Guarda el buffer como un archivo Excel
|
||||
* @param buffer Datos del archivo Excel
|
||||
* @param fileName Nombre base del archivo
|
||||
*/
|
||||
private saveAsExcelFile(buffer: any, fileName: string): void {
|
||||
// Definimos el tipo MIME para archivos Excel
|
||||
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
|
||||
const EXCEL_EXTENSION = '.xlsx';
|
||||
|
||||
// Creamos un Blob con los datos
|
||||
const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
|
||||
|
||||
// Generamos un nombre de archivo con timestamp para evitar duplicados
|
||||
const today = new Date();
|
||||
const formattedDate =
|
||||
today.getFullYear().toString() +
|
||||
(today.getMonth() + 1).toString().padStart(2, '0') +
|
||||
today.getDate().toString().padStart(2, '0') +
|
||||
'_' +
|
||||
today.getHours().toString().padStart(2, '0') +
|
||||
today.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
// Guardamos el archivo
|
||||
FileSaver.saveAs(data, `${fileName}_${formattedDate}${EXCEL_EXTENSION}`);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user