добавила функционал возврата оплаты, сделала обновление страницы при нажатии на текущий пункт меню, сделала прокрутку в таблицах с зафиксированной шапкой

This commit is contained in:
Luba Kaysina 2022-06-22 11:29:09 +04:00
parent 4296ee3755
commit c883c2d914
17 changed files with 266 additions and 125 deletions

View File

@ -40,6 +40,9 @@ export class MenuComponent implements OnInit {
}
redirect(path: string) {
this.router.navigate([path]);
/* this.router.navigate([path]);*/
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate([path]);
}
}

View File

@ -38,10 +38,16 @@ export interface Address {
}
export interface Payment {
payload: Payload;
summ: number;
type: string;
}
export interface Payload {
id: string;
status: string
}
export interface Order {
address: Address;
comment: string;
@ -92,3 +98,14 @@ export interface Notification {
new_fin: boolean;
due: boolean;
}
export interface ref {
amount: number | undefined;
status: string;
}
export interface Refund {
admin_return: ref;
difference_return: ref;
full_return: ref;
}

View File

@ -9,22 +9,18 @@
<button (click)="createArea()">Добавить</button>
<p-table [value]="areas">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Наименование зоны</th>
<tr style="position:sticky !important; top: 0">
<th style="width:35%">ID</th>
<th style="width:35%">Наименование зоны</th>
<th></th>
<th></th>
<th style="width:10%"></th>
<th style="width:10%"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-areas>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr>
<td>{{areas.id}}</td>
<td>{{areas.name}}</td>
<td></td>
<td></td>
<td style="width:35%">{{areas.id}}</td>
<td style="width:35%">{{areas.name}}</td>
<td><button (click)="updateArea1(areas.id, areas.name)">Изменить</button></td>
<td><button (click)="deleteArea(areas.id)">Удалить</button></td>
</tr>

View File

@ -0,0 +1,5 @@
tr {
display: table;
width: calc(100% - 5px);
table-layout: fixed;
}

View File

@ -38,6 +38,12 @@ export class AreasComponent implements OnInit {
next: (result) => {
let data = result.result;
this.areas = data;
document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
},
error: (err) => {
console.log('ERROR: ', err)

View File

@ -9,19 +9,19 @@
<button (click)="createCient()">Добавить</button>
<p-table [value]="clients">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Наименование организации</th>
<th style="width:10%"></th>
<th style="width:10%"></th>
<th style="width:10%"></th>
<tr style="position:sticky !important; top: 0">
<th style="width:30%">ID</th>
<th style="width:30%">Наименование организации</th>
<th></th>
<th></th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-client>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr>
<td>{{client.id}}</td>
<td>{{client.name}}</td>
<td style="width:30%">{{client.id}}</td>
<td style="width:30%">{{client.name}}</td>
<td><button [disabled]="choose == client.id" (click)="(chooseClient(client.id, client.name))">{{ choose == client.id ? 'Выбран' : 'Выбрать' }}</button></td>
<td><button (click)="changeClient1(client.id, client.name)">Изменить</button></td>
<td><button (click)="deleteClient(client.id)">Удалить</button></td>

View File

@ -0,0 +1,5 @@
tr {
display: table;
width: calc(100% - 5px);
table-layout: fixed;
}

View File

@ -41,6 +41,12 @@ export class ClientsComponent implements OnInit {
next: (result) => {
let data = result.result;
this.clients = data;
document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
},
error: (err) => {
console.log('ERROR: ', err)

View File

@ -9,22 +9,18 @@
<button (click)="createDivision()">Добавить</button>
<p-table [value]="divisions">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Наименование подразделения</th>
<tr style="position:sticky !important; top: 0">
<th style="width:35%">ID</th>
<th style="width:35%">Наименование подразделения</th>
<th></th>
<th></th>
<th style="width:10%"></th>
<th style="width:10%"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-Division>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr>
<td>{{Division.id}}</td>
<td>{{Division.name}}</td>
<td></td>
<td></td>
<td style="width:35%">{{Division.id}}</td>
<td style="width:35%">{{Division.name}}</td>
<td><button (click)="changeDivision1(Division.id, Division.name)">Изменить</button></td>
<td><button (click)="deleteDivision(Division.id)">Удалить</button></td>
</tr>

View File

@ -0,0 +1,5 @@
tr {
display: table;
width: calc(100% - 5px);
table-layout: fixed;
}

View File

@ -38,6 +38,12 @@ export class DivisionsComponent implements OnInit {
next: (result) => {
let data = result.result;
this.divisions = data;
document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
},
error: (err) => {
console.log('ERROR: ', err)

View File

@ -5,48 +5,12 @@
<h2 style="color:red">Выберите клиента</h2>
</ng-template>
<style>
.red {
color: red !important;
background-color: pink;
}
.orange {
color: darkorange !important;
background-color: wheat;
}
.green {
color: green !important;
background-color: lightgreen;
}
.grey {
color: grey !important;
background-color: lightgray;
}
.yellow {
color: darkgoldenrod !important;
background-color: lightgoldenrodyellow;
}
.blue {
color: blue !important;
background-color: lightblue;
}
.lilac {
color: #8b00ff !important;
background-color: #ebc4eb;
}
</style>
<div *ngIf="view; else order_v">
<p>Время последнего обновления: {{lastOrderUpdateTime | date:'dd.MM.yyyy HH:mm:ss'}}</p>
<button (click)="getOrders()">Обновить</button>
<p-table [value]="orders">
<ng-template pTemplate="header">
<tr>
<tr style="position:sticky !important; top: 0">
<th>ID</th>
<th>Статус</th>
<!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>-->
@ -57,22 +21,9 @@
<th>Телефон клиента</th>
<th>Тип оплаты</th>
</tr>
<tr>
<tr style="position:sticky !important; top: 55px">
<th></th>
<th><p-columnFilter type="text" field="status_h"></p-columnFilter></th>
<!--<p-columnFilter field="statuses" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="statuses" placeholder="Any"
(onChange)="filter($event.value)">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<span class="p-ml-1">{{option}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>-->
<th><p-columnFilter type="text" field="address.name"></p-columnFilter></th>
<th></th>
<th></th>
@ -154,21 +105,12 @@
</ng-template>
<ng-template pTemplate="body" let-ord>
<tr>
<!--<td>
<button type="button" pButton pRipple [pRowToggler]="rowData"></button>
</td>-->
<td>{{ord.title}}</td>
<td>{{ord.requested_quantity}}</td>
<td>-</td>
<td>{{ord.stock_quantity}}</td>
<td>-</td>
<!--<p-table [value]="ord.modifiers">
<ng-template pTemplate="body" let-mod>-->
<td>
<tbody *ngFor="let mod of ord.modifiers">
<tr>
@ -187,8 +129,8 @@
<p-table [value]="order[0].payment">
<ng-template pTemplate="header">
<tr>
<th>Сумма к оплате по безналу:</th>
<th>Тип оплаты:</th>
<th width="70%">Сумма оплаты по безналу:</th>
<th width="30%">Тип оплаты:</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-pay>
@ -198,6 +140,20 @@
</tr>
</ng-template>
</p-table>
<h2>Возвраты:</h2>
<p-table>
<ng-template pTemplate="header">
<tr>
<th width="70%">Сумма по возвратам:</th>
<th width="30%"></th>
</tr>
<tr>
<th>{{sumRef}}</th>
<th><button [disabled]="order[0].payment[0].summ == sumRef" (click)="doAdminRefund(order[0].external_id, order[0].payment[0].payload.id)">Возврат ДС</button></th>
</tr>
</ng-template>
</p-table>
</div>
</ng-template>

View File

@ -1,3 +1,50 @@
.Red {
color: red;
button:disabled {
background-color: grey !important;
opacity: 50%;
cursor: default;
}
.red {
color: red !important;
background-color: pink;
}
.orange {
color: darkorange !important;
background-color: wheat;
}
.green {
color: green !important;
background-color: lightgreen;
}
.grey {
color: grey !important;
background-color: lightgray;
}
.yellow {
color: darkgoldenrod !important;
background-color: lightgoldenrodyellow;
}
.blue {
color: blue !important;
background-color: lightblue;
}
.lilac {
color: #8b00ff !important;
background-color: #ebc4eb;
}
p-table {
height: auto;
overflow: scroll
}
tr {
display: table;
width: calc(100% - 5px);
table-layout: fixed;
}

View File

@ -2,7 +2,7 @@ import { Component, OnInit, Renderer2, ElementRef, Input } from "@angular/core";
import { TableModule } from 'primeng/table';
import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
import { MessageService } from "primeng/api";
import { Order, Products, Delivery_address, Notification } from "src/app/interface/data";
import { Order, Products, Delivery_address, Notification, Refund } from "src/app/interface/data";
import { ClientsComponent } from "../clients/clients.component";
/*import { SwPush, NewsletterService } from '@angular/service-worker*/
@ -26,6 +26,11 @@ export class OrdersComponent implements OnInit {
public map_due = new Map();
public myAudioP = new Audio();
public myAudioA = new Audio();
public refund!: Refund;
public sumRef: number = 0;
public sumRef0: any = 0;
public sumRef1: any = 0;
public sumRef2: any = 0;
public statuses = [
@ -108,6 +113,13 @@ export class OrdersComponent implements OnInit {
this.lastOrderUpdateTime = Date().toString();
document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
},
error: (err) => {
console.log('ERROR: ', err)
@ -167,9 +179,75 @@ notif2() {
}
}
);
this.view = false
this.view = false;
setTimeout(() => this.getOrderRefunds(this.order[0].external_id), 400);
}
async getOrderRefunds(id: any) {
await this.jsonRpcService.rpc2({
method: 'getOrderRefunds',
params: { "external_id": id }
}, RpcService.authService, false)
.subscribe({
next: (result) => {
let data = result.result
this.refund =data
if (this.refund.admin_return.status == 'COMPLETED') {
this.sumRef0 = this.refund.admin_return.amount
} else this.sumRef0 = 0;
if (this.refund.difference_return.status == 'COMPLETED') {
this.sumRef1 = this.refund.difference_return.amount
} else this.sumRef1 = 0;
if (this.refund.full_return.status == 'COMPLETED') {
this.sumRef2 = this.refund.full_return.amount
} else this.sumRef2 = 0
this.sumRef = this.sumRef0 + this.sumRef1 + this.sumRef2
},
error: (err) => {
console.log('ERROR: ', err)
this.messageService.add({
severity: 'error',
summary: 'Произошла ошибка!',
})
}
}
);
}
async doAdminRefund(id: any, qr_id: any) {
await this.jsonRpcService.rpc2({
method: 'doAdminRefund',
params: { "external_id": id, "qr_id": qr_id }
}, RpcService.authService, false)
.subscribe({
next: (result) => {
let data = result.result
console.log(data)
},
error: (err) => {
console.log('ERROR: ', err)
this.messageService.add({
severity: 'error',
summary: 'Произошла ошибка!',
})
}
}
);
console.log(id, qr_id)
}
listOrders() {
this.view = true;
this.getOrders();

View File

@ -1,42 +1,41 @@
<h1>Терминалы</h1>
<div>
<h1>Терминалы</h1>
<style>
span {
padding: 0 5px !important;
}
</style>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2>
</ng-template>
<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull>
<h2 style="color:red">Выберите клиента</h2>
</ng-template>
</div>
<div *ngIf="new_ter;else new_Terminal">
<button (click)="registerTerminal()">Добавить</button>
<p-table [value]="terminals">
<ng-template pTemplate="header">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Наименование терминала</th>
<th style="width:20%">ID точки заказа</th>
<th>Список ID цехов готовки</th>
<th>Статус подключения</th>
<th style="width: 10%"></th>
<th style="width: 10%"></th>
<th style="width: 16%">ID</th>
<th style="width: 16%">Наименование терминала</th>
<th style="width: 16%">Адрес точки заказа</th>
<th style="width: 16%">Список ID цехов готовки</th>
<th style="width: 16%">Статус подключения</th>
<th></th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-terminals>
<!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
<tr>
<td>{{terminals.id}}</td>
<td>{{terminals.public_id}}</td>
<td>{{terminals.division_id}}</td>
<td>{{terminals.area_types}}</td>
<td></td>
<td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td>
<td><button (click)="deleteTerminal(terminals.id)">Удалить</button></td>
</tr>
</ng-template>
</ng-template>
<ng-template pTemplate="body" let-terminals>
<tr>
<td style="width: 16%" class="customer-badge status-unqualified">{{terminals.id}}</td>
<td style="width: 16%">{{terminals.public_id}}</td>
<td style="width: 16%">{{terminals.division_id}}</td>
<td style="width: 16%">{{terminals.area_types}}</td>
<td style="width: 16%"></td>
<td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td>
<td><button (click)="deleteTerminal(terminals.id)">Удалить</button></td>
</tr>
</ng-template>
</p-table>
</div>

View File

@ -0,0 +1,9 @@
span {
padding: 0 5px !important;
}
tr {
display: table;
width: calc(100% - 5px);
table-layout: fixed;
}

View File

@ -45,6 +45,12 @@ export class TerminalsComponent implements OnInit {
next: (result) => {
let data = result.result;
this.terminals = data;
document.getElementsByTagName('thead')[0].style.display = 'table';
document.getElementsByTagName('thead')[0].style.width = '100%';
document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
document.getElementsByTagName('tbody')[0].style.display = 'block';
document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
},
error: (err) => {
console.log('ERROR: ', err)
@ -55,6 +61,7 @@ export class TerminalsComponent implements OnInit {
}
});
this.chooseName = this.jsonRpcService.ClientChooseName;
}
async getAreas() {