Добавил лоадер
This commit is contained in:
Sipachev Igor
parent
f2fcce4646
commit
5672773345
@ -19,6 +19,7 @@ export default class Mocks extends Vue {
|
||||
@Prop()
|
||||
mode!: Mode
|
||||
|
||||
showLoader = false
|
||||
registers = new Registers()
|
||||
register2Id: Record<string, string> = {}
|
||||
|
||||
@ -32,7 +33,11 @@ export default class Mocks extends Vue {
|
||||
}
|
||||
|
||||
refreshMocks () {
|
||||
this.mode === Mode.UPDATE && httpClient.mockConfigurations({ personalCode: this.personalCode })
|
||||
if (this.mode !== Mode.UPDATE) {
|
||||
return
|
||||
}
|
||||
this.showLoader = true
|
||||
httpClient.mockConfigurations({ personalCode: this.personalCode })
|
||||
.then((data: any) => {
|
||||
const existServiceKeys = []
|
||||
for (const mockConfiguration of data.data) {
|
||||
@ -52,6 +57,9 @@ export default class Mocks extends Vue {
|
||||
delete this.register2Id[serviceCode]
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.showLoader = false
|
||||
})
|
||||
}
|
||||
|
||||
async onServiceChanged (serviceKey: string) {
|
||||
@ -66,6 +74,7 @@ export default class Mocks extends Vue {
|
||||
return
|
||||
}
|
||||
|
||||
this.showLoader = true
|
||||
httpClient.changeMockValueConfiguration({
|
||||
id: this.register2Id[serviceKey],
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
||||
@ -76,6 +85,9 @@ export default class Mocks extends Vue {
|
||||
console.log('updateMock')
|
||||
console.log(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.showLoader = false
|
||||
})
|
||||
}
|
||||
|
||||
saveMocks () {
|
||||
@ -93,11 +105,15 @@ export default class Mocks extends Vue {
|
||||
mockConfiguration.active = 'true'
|
||||
mockConfigurations.push(mockConfiguration)
|
||||
}
|
||||
this.showLoader = true
|
||||
httpClient.addMockConfigurations({ items: mockConfigurations })
|
||||
.then((data: any) => {
|
||||
console.log('saveMocks')
|
||||
console.log(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.showLoader = false
|
||||
})
|
||||
}
|
||||
|
||||
saveMock (personalCode: string, serviceCode: string, value: number): Promise<any> {
|
||||
@ -108,10 +124,14 @@ export default class Mocks extends Vue {
|
||||
mockConfiguration.value = value
|
||||
mockConfiguration.active = 'true'
|
||||
mockConfigurations.push(mockConfiguration)
|
||||
this.showLoader = true
|
||||
return httpClient.addMockConfigurations({ items: mockConfigurations })
|
||||
.then((data: any) => {
|
||||
console.log('saveMocks')
|
||||
console.log(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.showLoader = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,71 @@
|
||||
.option-select {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.lds-grid {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.lds-grid div {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #298df8;
|
||||
animation: lds-grid 1.2s linear infinite;
|
||||
}
|
||||
.lds-grid div:nth-child(1) {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.lds-grid div:nth-child(2) {
|
||||
top: 8px;
|
||||
left: 32px;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.lds-grid div:nth-child(3) {
|
||||
top: 8px;
|
||||
left: 56px;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-grid div:nth-child(4) {
|
||||
top: 32px;
|
||||
left: 8px;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.lds-grid div:nth-child(5) {
|
||||
top: 32px;
|
||||
left: 32px;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-grid div:nth-child(6) {
|
||||
top: 32px;
|
||||
left: 56px;
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
.lds-grid div:nth-child(7) {
|
||||
top: 56px;
|
||||
left: 8px;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-grid div:nth-child(8) {
|
||||
top: 56px;
|
||||
left: 32px;
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
.lds-grid div:nth-child(9) {
|
||||
top: 56px;
|
||||
left: 56px;
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
@keyframes lds-grid {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +1,37 @@
|
||||
<div>
|
||||
<div>
|
||||
<div>XTEE MTA</div>
|
||||
<div v-if="showLoader" class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div v-if="!showLoader">
|
||||
<div>
|
||||
<select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
|
||||
<option value="-1">-</option>
|
||||
<option value="0">Не замокано (делать запрос)</option>
|
||||
<option value="1">Выписка на хороший доход</option>
|
||||
<option value="2">Выписка на маленький доход</option>
|
||||
<option value="3">Ошибка загрузки выписки (перезапрос)</option>
|
||||
<option value="4">Ошибка загрузки выписки (нет данных)</option>
|
||||
<option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
|
||||
<option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
|
||||
<option value="7">Выписка на хороший доход, последний месяц доход 0</option>
|
||||
<option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
|
||||
<option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
|
||||
</select>
|
||||
<div>XTEE MTA</div>
|
||||
<div>
|
||||
<select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
|
||||
<option value="-1">-</option>
|
||||
<option value="0">Не замокано (делать запрос)</option>
|
||||
<option value="1">Выписка на хороший доход</option>
|
||||
<option value="2">Выписка на маленький доход</option>
|
||||
<option value="3">Ошибка загрузки выписки (перезапрос)</option>
|
||||
<option value="4">Ошибка загрузки выписки (нет данных)</option>
|
||||
<option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
|
||||
<option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
|
||||
<option value="7">Выписка на хороший доход, последний месяц доход 0</option>
|
||||
<option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
|
||||
<option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>XTEE RIA</div>
|
||||
<div>
|
||||
<select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
|
||||
<option value="-1">-</option>
|
||||
<option value="0">Не замокано (делать запрос)</option>
|
||||
<option value="1">Успешный запрос</option>
|
||||
<option value="2">Все запросы отклонены</option>
|
||||
<option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
|
||||
</select>
|
||||
<div>XTEE RIA</div>
|
||||
<div>
|
||||
<select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
|
||||
<option value="-1">-</option>
|
||||
<option value="0">Не замокано (делать запрос)</option>
|
||||
<option value="1">Успешный запрос</option>
|
||||
<option value="2">Все запросы отклонены</option>
|
||||
<option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
|
||||
</div>
|
||||
|
||||
<!-- <br /><br />-->
|
||||
<!-- <label>-->
|
||||
<!-- XTEE Pension-->
|
||||
<!-- <select class="option-select" v-model="registers.xtee_pension">-->
|
||||
<!-- <option value="">-</option>-->
|
||||
<!-- <option value="0">Не замокано (делать запрос)</option>-->
|
||||
<!-- <option value="2">Ошибка сервиса. (перезапросы)</option>-->
|
||||
<!-- </select>-->
|
||||
<!-- </label>-->
|
||||
<br /><br />
|
||||
<button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user