shared-ritm 1.2.30 → 1.2.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +103 -103
- package/dist/index.css +1 -1
- package/dist/shared-ritm.es.js +3244 -3251
- package/dist/shared-ritm.umd.js +6 -6
- package/package.json +1 -1
- package/src/App.vue +2461 -2461
- package/src/api/services/GanttService.ts +17 -17
- package/src/api/services/MetricsService.ts +101 -101
- package/src/api/services/RepairsService.ts +3 -1
- package/src/api/settings/ApiService.ts +126 -126
- package/src/api/types/Api_Files.ts +1 -1
- package/src/api/types/Api_Projects.ts +55 -55
- package/src/api/types/Api_Repairs.ts +93 -93
- package/src/common/app-checkbox/AppCheckbox.vue +26 -26
- package/src/common/app-date-picker/AppDatePicker.vue +81 -81
- package/src/common/app-dialogs/AppConfirmDialog.vue +100 -100
- package/src/common/app-dropdown/AppDropdown.vue +31 -31
- package/src/common/app-icon/AppIcon.vue +108 -108
- package/src/common/app-input-search/AppInputSearch.vue +174 -174
- package/src/common/app-layout/AppLayout.vue +84 -84
- package/src/common/app-layout/components/AppLayoutHeader.vue +246 -246
- package/src/common/app-layout/components/AppLayoutPage.vue +16 -16
- package/src/common/app-select/AppSelect.vue +157 -157
- package/src/common/app-sidebar/components/SidebarMenuItem.vue +146 -146
- package/src/common/app-toggle/AppToggle.vue +23 -23
- package/src/common/app-wrapper/AppWrapper.vue +28 -28
- package/src/icons/dialogs/RemoveIcon.vue +12 -12
- package/src/icons/dialogs/SafetyIcon.vue +12 -12
- package/src/icons/header/NotificationIcon.vue +18 -18
- package/src/icons/header/PersonIcon.vue +11 -11
- package/src/icons/header/SettingIcon.vue +14 -14
- package/src/icons/task/attention-icon.vue +13 -13
- package/src/icons/task/clock-icon.vue +10 -10
- package/src/icons/task/delete-icon.vue +10 -10
- package/src/icons/task/fire-icon.vue +16 -16
- package/src/main.ts +28 -28
- package/src/shared/styles/general.css +96 -96
- package/src/utils/confirm.ts +12 -12
- package/src/utils/notification.ts +9 -9
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
export type Api_Team = {
|
|
2
|
-
id: string
|
|
3
|
-
display_name: string
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
export type Api_Equipment_Short_Dto = {
|
|
7
|
-
id: string
|
|
8
|
-
name: string
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export type Api_Repairs = {
|
|
12
|
-
id: string
|
|
13
|
-
name: string
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export type Api_Projects = {
|
|
17
|
-
id: string
|
|
18
|
-
name: string
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export type OptionFilters = {
|
|
22
|
-
teams?: Api_Team[]
|
|
23
|
-
equipments?: Api_Equipment_Short_Dto[]
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export type Api_Equipment_Full_Dto = {
|
|
27
|
-
id: string
|
|
28
|
-
model: null | string
|
|
29
|
-
name: string
|
|
30
|
-
registration_number: string
|
|
31
|
-
repair_frequency: number
|
|
32
|
-
repair_range: number
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export type Api_Task_Video_Source = {
|
|
36
|
-
id: string
|
|
37
|
-
name: string
|
|
38
|
-
work_zones_by_tasks: Array<{
|
|
39
|
-
coordinates: { x0: number; x1: number; y0: number; y1: number }
|
|
40
|
-
id: string
|
|
41
|
-
tasks: unknown[]
|
|
42
|
-
title: string
|
|
43
|
-
}>
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export type Api_Task_Video_Source_Stream = {
|
|
47
|
-
id: string
|
|
48
|
-
name: string
|
|
49
|
-
url: string
|
|
50
|
-
width: number
|
|
51
|
-
height: number
|
|
52
|
-
fps: string
|
|
53
|
-
login: string
|
|
54
|
-
password: string
|
|
55
|
-
comment: unknown
|
|
56
|
-
work_zones: unknown[]
|
|
57
|
-
video_source: unknown[]
|
|
58
|
-
related_video_sources: unknown[]
|
|
59
|
-
interactive_zones: unknown
|
|
60
|
-
domed: boolean
|
|
61
|
-
snapshot_path: string
|
|
62
|
-
shapes: unknown[]
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export type Api_Create_Repair_With_Equipments = {
|
|
66
|
-
name: string
|
|
67
|
-
display_name: string
|
|
68
|
-
description: string
|
|
69
|
-
equipment_id: string
|
|
70
|
-
power_output_MWh?: number
|
|
71
|
-
cost_per_MWh?: number
|
|
72
|
-
category?: string
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
export type Api_Update_Repair = {
|
|
76
|
-
name?: string
|
|
77
|
-
display_name?: string
|
|
78
|
-
description: string
|
|
79
|
-
power_output_MWh?: number
|
|
80
|
-
cost_per_MWh?: number
|
|
81
|
-
category?: string
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export type Api_Repair_Dto = {
|
|
85
|
-
id: string
|
|
86
|
-
name: string
|
|
87
|
-
display_name: string
|
|
88
|
-
description: string
|
|
89
|
-
start_date: string
|
|
90
|
-
end_date: string
|
|
91
|
-
projects: Api_Projects[]
|
|
92
|
-
equipments: Api_Equipment_Full_Dto[]
|
|
93
|
-
}
|
|
1
|
+
export type Api_Team = {
|
|
2
|
+
id: string
|
|
3
|
+
display_name: string
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export type Api_Equipment_Short_Dto = {
|
|
7
|
+
id: string
|
|
8
|
+
name: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export type Api_Repairs = {
|
|
12
|
+
id: string
|
|
13
|
+
name: string
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export type Api_Projects = {
|
|
17
|
+
id: string
|
|
18
|
+
name: string
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export type OptionFilters = {
|
|
22
|
+
teams?: Api_Team[]
|
|
23
|
+
equipments?: Api_Equipment_Short_Dto[]
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export type Api_Equipment_Full_Dto = {
|
|
27
|
+
id: string
|
|
28
|
+
model: null | string
|
|
29
|
+
name: string
|
|
30
|
+
registration_number: string
|
|
31
|
+
repair_frequency: number
|
|
32
|
+
repair_range: number
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export type Api_Task_Video_Source = {
|
|
36
|
+
id: string
|
|
37
|
+
name: string
|
|
38
|
+
work_zones_by_tasks: Array<{
|
|
39
|
+
coordinates: { x0: number; x1: number; y0: number; y1: number }
|
|
40
|
+
id: string
|
|
41
|
+
tasks: unknown[]
|
|
42
|
+
title: string
|
|
43
|
+
}>
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export type Api_Task_Video_Source_Stream = {
|
|
47
|
+
id: string
|
|
48
|
+
name: string
|
|
49
|
+
url: string
|
|
50
|
+
width: number
|
|
51
|
+
height: number
|
|
52
|
+
fps: string
|
|
53
|
+
login: string
|
|
54
|
+
password: string
|
|
55
|
+
comment: unknown
|
|
56
|
+
work_zones: unknown[]
|
|
57
|
+
video_source: unknown[]
|
|
58
|
+
related_video_sources: unknown[]
|
|
59
|
+
interactive_zones: unknown
|
|
60
|
+
domed: boolean
|
|
61
|
+
snapshot_path: string
|
|
62
|
+
shapes: unknown[]
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export type Api_Create_Repair_With_Equipments = {
|
|
66
|
+
name: string
|
|
67
|
+
display_name: string
|
|
68
|
+
description: string
|
|
69
|
+
equipment_id: string
|
|
70
|
+
power_output_MWh?: number
|
|
71
|
+
cost_per_MWh?: number
|
|
72
|
+
category?: string
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export type Api_Update_Repair = {
|
|
76
|
+
name?: string
|
|
77
|
+
display_name?: string
|
|
78
|
+
description: string
|
|
79
|
+
power_output_MWh?: number
|
|
80
|
+
cost_per_MWh?: number
|
|
81
|
+
category?: string
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export type Api_Repair_Dto = {
|
|
85
|
+
id: string
|
|
86
|
+
name: string
|
|
87
|
+
display_name: string
|
|
88
|
+
description: string
|
|
89
|
+
start_date: string
|
|
90
|
+
end_date: string
|
|
91
|
+
projects: Api_Projects[]
|
|
92
|
+
equipments: Api_Equipment_Full_Dto[]
|
|
93
|
+
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<q-checkbox v-model="value" :class="$style['app-checkbox']" />
|
|
3
|
-
</template>
|
|
4
|
-
<script setup lang="ts">
|
|
5
|
-
import { computed } from 'vue'
|
|
6
|
-
|
|
7
|
-
interface Props {
|
|
8
|
-
modelValue: any
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const props = defineProps<Props>()
|
|
12
|
-
const emit = defineEmits(['update:modelValue', 'number'])
|
|
13
|
-
|
|
14
|
-
const value = computed({
|
|
15
|
-
get: () => props.modelValue,
|
|
16
|
-
set: (newValue: any) => emit('update:modelValue', newValue),
|
|
17
|
-
})
|
|
18
|
-
</script>
|
|
19
|
-
<style module lang="scss">
|
|
20
|
-
.app-checkbox {
|
|
21
|
-
:global(.q-checkbox__bg) {
|
|
22
|
-
border-radius: 6px;
|
|
23
|
-
border-color: white;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<q-checkbox v-model="value" :class="$style['app-checkbox']" />
|
|
3
|
+
</template>
|
|
4
|
+
<script setup lang="ts">
|
|
5
|
+
import { computed } from 'vue'
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
modelValue: any
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const props = defineProps<Props>()
|
|
12
|
+
const emit = defineEmits(['update:modelValue', 'number'])
|
|
13
|
+
|
|
14
|
+
const value = computed({
|
|
15
|
+
get: () => props.modelValue,
|
|
16
|
+
set: (newValue: any) => emit('update:modelValue', newValue),
|
|
17
|
+
})
|
|
18
|
+
</script>
|
|
19
|
+
<style module lang="scss">
|
|
20
|
+
.app-checkbox {
|
|
21
|
+
:global(.q-checkbox__bg) {
|
|
22
|
+
border-radius: 6px;
|
|
23
|
+
border-color: white;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="date-picker">
|
|
3
|
-
<app-button
|
|
4
|
-
class="button"
|
|
5
|
-
outline
|
|
6
|
-
size="20px"
|
|
7
|
-
padding="10px"
|
|
8
|
-
border-radius="8px"
|
|
9
|
-
border-width="2px"
|
|
10
|
-
rounded
|
|
11
|
-
:disabled="disabled"
|
|
12
|
-
text-color="primary"
|
|
13
|
-
icon="event"
|
|
14
|
-
>
|
|
15
|
-
<q-popup-proxy anchor="top left" self="top left" transition-show="scale-up" transition-hide="scale-down">
|
|
16
|
-
<q-date v-model="model" mask="YYYY-MM-DD" minimal :options="disablePastDates" />
|
|
17
|
-
</q-popup-proxy>
|
|
18
|
-
</app-button>
|
|
19
|
-
<div class="date-picker__content">
|
|
20
|
-
<p>{{ label }}<span> * </span></p>
|
|
21
|
-
<span>{{ model || 'Выберите дату' }}</span>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</template>
|
|
25
|
-
|
|
26
|
-
<script setup lang="ts">
|
|
27
|
-
import { computed } from 'vue'
|
|
28
|
-
import AppButton from '@/common/app-button/AppButton.vue'
|
|
29
|
-
|
|
30
|
-
interface Props {
|
|
31
|
-
label: string
|
|
32
|
-
disabled?: boolean
|
|
33
|
-
modelValue: string
|
|
34
|
-
disableRuleDates?: string
|
|
35
|
-
}
|
|
36
|
-
const emits = defineEmits(['update:modelValue'])
|
|
37
|
-
const props = defineProps<Props>()
|
|
38
|
-
|
|
39
|
-
const model = computed({
|
|
40
|
-
get() {
|
|
41
|
-
return props.modelValue
|
|
42
|
-
},
|
|
43
|
-
set(value: string) {
|
|
44
|
-
emits('update:modelValue', value)
|
|
45
|
-
},
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
function disablePastDates(date) {
|
|
49
|
-
const today = new Date()
|
|
50
|
-
const [year, month, day] = date.split('/')
|
|
51
|
-
const currentDate = new Date(year, month - 1, day)
|
|
52
|
-
const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
|
|
53
|
-
if (props?.disableRuleDates) {
|
|
54
|
-
const firstDate = new Date(props.disableRuleDates)
|
|
55
|
-
return currentDate >= firstDate
|
|
56
|
-
}
|
|
57
|
-
return currentDate >= todayDate
|
|
58
|
-
}
|
|
59
|
-
</script>
|
|
60
|
-
|
|
61
|
-
<style scoped lang="scss">
|
|
62
|
-
.date-picker {
|
|
63
|
-
display: flex;
|
|
64
|
-
gap: 14px;
|
|
65
|
-
&__content {
|
|
66
|
-
color: #7d8592;
|
|
67
|
-
font-weight: 500;
|
|
68
|
-
p {
|
|
69
|
-
margin: 0;
|
|
70
|
-
font-weight: 700;
|
|
71
|
-
span {
|
|
72
|
-
color: red;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
span {
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
.button {
|
|
80
|
-
}
|
|
81
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="date-picker">
|
|
3
|
+
<app-button
|
|
4
|
+
class="button"
|
|
5
|
+
outline
|
|
6
|
+
size="20px"
|
|
7
|
+
padding="10px"
|
|
8
|
+
border-radius="8px"
|
|
9
|
+
border-width="2px"
|
|
10
|
+
rounded
|
|
11
|
+
:disabled="disabled"
|
|
12
|
+
text-color="primary"
|
|
13
|
+
icon="event"
|
|
14
|
+
>
|
|
15
|
+
<q-popup-proxy anchor="top left" self="top left" transition-show="scale-up" transition-hide="scale-down">
|
|
16
|
+
<q-date v-model="model" mask="YYYY-MM-DD" minimal :options="disablePastDates" />
|
|
17
|
+
</q-popup-proxy>
|
|
18
|
+
</app-button>
|
|
19
|
+
<div class="date-picker__content">
|
|
20
|
+
<p>{{ label }}<span> * </span></p>
|
|
21
|
+
<span>{{ model || 'Выберите дату' }}</span>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { computed } from 'vue'
|
|
28
|
+
import AppButton from '@/common/app-button/AppButton.vue'
|
|
29
|
+
|
|
30
|
+
interface Props {
|
|
31
|
+
label: string
|
|
32
|
+
disabled?: boolean
|
|
33
|
+
modelValue: string
|
|
34
|
+
disableRuleDates?: string
|
|
35
|
+
}
|
|
36
|
+
const emits = defineEmits(['update:modelValue'])
|
|
37
|
+
const props = defineProps<Props>()
|
|
38
|
+
|
|
39
|
+
const model = computed({
|
|
40
|
+
get() {
|
|
41
|
+
return props.modelValue
|
|
42
|
+
},
|
|
43
|
+
set(value: string) {
|
|
44
|
+
emits('update:modelValue', value)
|
|
45
|
+
},
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
function disablePastDates(date) {
|
|
49
|
+
const today = new Date()
|
|
50
|
+
const [year, month, day] = date.split('/')
|
|
51
|
+
const currentDate = new Date(year, month - 1, day)
|
|
52
|
+
const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
|
|
53
|
+
if (props?.disableRuleDates) {
|
|
54
|
+
const firstDate = new Date(props.disableRuleDates)
|
|
55
|
+
return currentDate >= firstDate
|
|
56
|
+
}
|
|
57
|
+
return currentDate >= todayDate
|
|
58
|
+
}
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<style scoped lang="scss">
|
|
62
|
+
.date-picker {
|
|
63
|
+
display: flex;
|
|
64
|
+
gap: 14px;
|
|
65
|
+
&__content {
|
|
66
|
+
color: #7d8592;
|
|
67
|
+
font-weight: 500;
|
|
68
|
+
p {
|
|
69
|
+
margin: 0;
|
|
70
|
+
font-weight: 700;
|
|
71
|
+
span {
|
|
72
|
+
color: red;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
span {
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
.button {
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
|
|
3
|
-
<q-card :class="$style.modal">
|
|
4
|
-
<q-card-section :class="$style['modal__content']">
|
|
5
|
-
<div :class="$style['modal__content__header']">
|
|
6
|
-
<safety-icon v-if="type === 'edit'" />
|
|
7
|
-
<remove-icon v-if="type === 'delete'" />
|
|
8
|
-
<h4>Подтвердить ?</h4>
|
|
9
|
-
</div>
|
|
10
|
-
<p>{{ content }}</p>
|
|
11
|
-
</q-card-section>
|
|
12
|
-
<q-card-section :class="$style.footer">
|
|
13
|
-
<app-button :class="$style['footer__btn--ok']" label="Подтвердить" @click="onDialogOK" />
|
|
14
|
-
<app-button :class="$style['footer__btn--cancel']" label="Отменить" @click="onDialogHide" />
|
|
15
|
-
</q-card-section>
|
|
16
|
-
</q-card>
|
|
17
|
-
</q-dialog>
|
|
18
|
-
</template>
|
|
19
|
-
|
|
20
|
-
<script setup lang="ts">
|
|
21
|
-
import { useDialogPluginComponent } from 'quasar'
|
|
22
|
-
import AppButton from '@/common/app-button/AppButton.vue'
|
|
23
|
-
import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
|
|
24
|
-
import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
|
|
25
|
-
|
|
26
|
-
const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
|
|
27
|
-
|
|
28
|
-
interface Props {
|
|
29
|
-
content: string
|
|
30
|
-
type: 'delete' | 'edit'
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const props = defineProps<Props>()
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
|
-
<style lang="scss" module>
|
|
37
|
-
.modal {
|
|
38
|
-
font-family: NunitoSansFont, sans-serif;
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
width: 400px;
|
|
42
|
-
border-radius: 24px !important;
|
|
43
|
-
justify-content: space-between;
|
|
44
|
-
padding: 40px;
|
|
45
|
-
&__content {
|
|
46
|
-
margin: 0 auto;
|
|
47
|
-
padding: 0;
|
|
48
|
-
flex-grow: 1;
|
|
49
|
-
&__header {
|
|
50
|
-
width: 100%;
|
|
51
|
-
display: flex;
|
|
52
|
-
align-items: center;
|
|
53
|
-
justify-content: center;
|
|
54
|
-
flex-direction: column;
|
|
55
|
-
gap: 16px;
|
|
56
|
-
h4 {
|
|
57
|
-
font-size: 24px;
|
|
58
|
-
font-weight: 600;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
p {
|
|
63
|
-
margin-top: 14px;
|
|
64
|
-
margin-bottom: 30px;
|
|
65
|
-
font-size: 16px;
|
|
66
|
-
text-align: center;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.footer {
|
|
71
|
-
display: flex;
|
|
72
|
-
flex-direction: column;
|
|
73
|
-
gap: 12px;
|
|
74
|
-
align-items: center;
|
|
75
|
-
justify-content: center;
|
|
76
|
-
//height: 146px;
|
|
77
|
-
padding: 0;
|
|
78
|
-
&__btn--ok,
|
|
79
|
-
&__btn--cancel {
|
|
80
|
-
background-color: #3f8cff;
|
|
81
|
-
border-radius: 9px;
|
|
82
|
-
color: white;
|
|
83
|
-
font-size: 16px;
|
|
84
|
-
font-weight: bold;
|
|
85
|
-
width: 300px;
|
|
86
|
-
height: 48px;
|
|
87
|
-
cursor: pointer;
|
|
88
|
-
span {
|
|
89
|
-
color: white;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
&__btn--cancel {
|
|
93
|
-
background-color: white;
|
|
94
|
-
border: 1px solid #3f8cff;
|
|
95
|
-
span {
|
|
96
|
-
color: #3f8cff;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<q-dialog ref="dialogRef" persistent transition-show="slide-up" transition-hide="slide-down" :class="$style.dialog">
|
|
3
|
+
<q-card :class="$style.modal">
|
|
4
|
+
<q-card-section :class="$style['modal__content']">
|
|
5
|
+
<div :class="$style['modal__content__header']">
|
|
6
|
+
<safety-icon v-if="type === 'edit'" />
|
|
7
|
+
<remove-icon v-if="type === 'delete'" />
|
|
8
|
+
<h4>Подтвердить ?</h4>
|
|
9
|
+
</div>
|
|
10
|
+
<p>{{ content }}</p>
|
|
11
|
+
</q-card-section>
|
|
12
|
+
<q-card-section :class="$style.footer">
|
|
13
|
+
<app-button :class="$style['footer__btn--ok']" label="Подтвердить" @click="onDialogOK" />
|
|
14
|
+
<app-button :class="$style['footer__btn--cancel']" label="Отменить" @click="onDialogHide" />
|
|
15
|
+
</q-card-section>
|
|
16
|
+
</q-card>
|
|
17
|
+
</q-dialog>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script setup lang="ts">
|
|
21
|
+
import { useDialogPluginComponent } from 'quasar'
|
|
22
|
+
import AppButton from '@/common/app-button/AppButton.vue'
|
|
23
|
+
import SafetyIcon from '@/icons/dialogs/SafetyIcon.vue'
|
|
24
|
+
import RemoveIcon from '@/icons/dialogs/RemoveIcon.vue'
|
|
25
|
+
|
|
26
|
+
const { onDialogHide, onDialogOK, dialogRef } = useDialogPluginComponent()
|
|
27
|
+
|
|
28
|
+
interface Props {
|
|
29
|
+
content: string
|
|
30
|
+
type: 'delete' | 'edit'
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
const props = defineProps<Props>()
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<style lang="scss" module>
|
|
37
|
+
.modal {
|
|
38
|
+
font-family: NunitoSansFont, sans-serif;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
width: 400px;
|
|
42
|
+
border-radius: 24px !important;
|
|
43
|
+
justify-content: space-between;
|
|
44
|
+
padding: 40px;
|
|
45
|
+
&__content {
|
|
46
|
+
margin: 0 auto;
|
|
47
|
+
padding: 0;
|
|
48
|
+
flex-grow: 1;
|
|
49
|
+
&__header {
|
|
50
|
+
width: 100%;
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 16px;
|
|
56
|
+
h4 {
|
|
57
|
+
font-size: 24px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
p {
|
|
63
|
+
margin-top: 14px;
|
|
64
|
+
margin-bottom: 30px;
|
|
65
|
+
font-size: 16px;
|
|
66
|
+
text-align: center;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.footer {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
gap: 12px;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
//height: 146px;
|
|
77
|
+
padding: 0;
|
|
78
|
+
&__btn--ok,
|
|
79
|
+
&__btn--cancel {
|
|
80
|
+
background-color: #3f8cff;
|
|
81
|
+
border-radius: 9px;
|
|
82
|
+
color: white;
|
|
83
|
+
font-size: 16px;
|
|
84
|
+
font-weight: bold;
|
|
85
|
+
width: 300px;
|
|
86
|
+
height: 48px;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
span {
|
|
89
|
+
color: white;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
&__btn--cancel {
|
|
93
|
+
background-color: white;
|
|
94
|
+
border: 1px solid #3f8cff;
|
|
95
|
+
span {
|
|
96
|
+
color: #3f8cff;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<q-btn-dropdown :color="color" :content-style="{ width: width || '200px', minWidth: height || '200px' }">
|
|
3
|
-
<template #label>
|
|
4
|
-
<slot name="label">
|
|
5
|
-
{{ label }}
|
|
6
|
-
</slot>
|
|
7
|
-
</template>
|
|
8
|
-
<template #default>
|
|
9
|
-
<slot name="content" />
|
|
10
|
-
</template>
|
|
11
|
-
</q-btn-dropdown>
|
|
12
|
-
</template>
|
|
13
|
-
|
|
14
|
-
<script setup lang="ts">
|
|
15
|
-
interface Props {
|
|
16
|
-
label?: string
|
|
17
|
-
color?: string
|
|
18
|
-
width?: number
|
|
19
|
-
height?: number
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const props = defineProps<Props>()
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<style scoped lang="scss">
|
|
26
|
-
.q-btn {
|
|
27
|
-
&:before {
|
|
28
|
-
box-shadow: none;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<q-btn-dropdown :color="color" :content-style="{ width: width || '200px', minWidth: height || '200px' }">
|
|
3
|
+
<template #label>
|
|
4
|
+
<slot name="label">
|
|
5
|
+
{{ label }}
|
|
6
|
+
</slot>
|
|
7
|
+
</template>
|
|
8
|
+
<template #default>
|
|
9
|
+
<slot name="content" />
|
|
10
|
+
</template>
|
|
11
|
+
</q-btn-dropdown>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
interface Props {
|
|
16
|
+
label?: string
|
|
17
|
+
color?: string
|
|
18
|
+
width?: number
|
|
19
|
+
height?: number
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const props = defineProps<Props>()
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<style scoped lang="scss">
|
|
26
|
+
.q-btn {
|
|
27
|
+
&:before {
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
</style>
|