Исправила базовые кнопки

This commit is contained in:
Daria Golova
2023-07-12 16:13:11 +03:00
parent 73b40e4b0e
commit 7458a1dd32
22 changed files with 171 additions and 213 deletions

View File

@@ -12,50 +12,45 @@
)
.flex.items-center.cursor-pointer
.icon-search
q-btn(
base-button(
v-if="createdClientName === ''",
@click="searchLastName",
color="primary",
label="Поиск",
padding="8px 24px",
no-caps
width="96px"
)
q-btn(
base-button(
v-if="searchClient.length > 0",
outline,
type="secondary",
@click="resetLastName",
color="primary",
label="Сбросить",
padding="8px 24px",
no-caps
width="124px"
)
//- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
.flex.w-fit.h-10.gap-x-2
q-btn(
outline,
icon="icon-download",
color="primary",
size="12px",
padding="8px 24px",
base-button(
type="secondary",
width="64px"
)
q-btn(
q-icon(name="app:export", size="16px")
base-button(
@click="openForm",
color="primary",
icon="add",
label="Создать",
padding="6px 24px",
no-caps
width="144px"
)
q-icon(name="app:plus", size="12px", left)
span Создать
</template>
<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "ClientsTableHat",
components: {
BaseInput,
ClientsTableHeaderActions,
BaseButton,
},
props: {
openForm: Function,
@@ -100,4 +95,6 @@ export default {
<style lang="sass" scoped>
.input
min-width: 280px
.on-left
margin-right: 10px
</style>

View File

@@ -14,7 +14,7 @@
@click="createForm",
)
q-icon(name="app:plus", size="12px", left)
span Создать событие
span Создать запись
.flex.flex-col.gap-y-1
q-expansion-item.expansion.font-bold.text-xm(
v-for="(elem, index) in patientList",

View File

@@ -8,11 +8,11 @@
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
)
img(:src="arrow")
.button.flex
q-btn(color="primary", dense, padding="14px", @click="createForm")
q-icon(name="app:icon-plus", size="12px")
.button.flex
base-button(width="40px", @click="createForm")
q-icon(name="app:plus", size="12px")
.button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
q-btn(
q-btn.blue-hover(
v-click-outside="hideActive",
@click="()=>clickButton(svg.name)",
dense,
@@ -269,10 +269,10 @@ export default {
border-radius: 4px
color: var(--default-white)
.q-btn
transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
&:hover
background: var(--bg-light-blue-color)
// .q-btn .blue-hover
// transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
// &:hover
// background: var(--bg-light-blue-color)
.gradient
width: 232px

View File

@@ -51,25 +51,8 @@
:networks-list="getNetworksList",
)
.footer.flex.gap-2
q-btn(
color="primary",
outline,
size="16px",
no-caps,
label="Отменить"
:style="{width: '126px', height: '40px'}",
padding="0",
@click="closeForm"
)
q-btn(
color="primary",
size="16px",
no-caps,
label="Создать запись"
:style="{width: '174px', height: '40px'}",
padding="0",
@click="closeForm"
)
base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
base-button(width="168px", label="Создать запись", @click="closeForm")
</template>
<script>
@@ -85,6 +68,7 @@ import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
import HeaderRecordForm from "./HeaderRecordForm.vue";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "RecordCreationForm",
@@ -97,6 +81,7 @@ export default {
BaseInputFullName,
BaseCalendar,
HeaderRecordForm,
BaseButton,
},
props: { isShowForm: Boolean, closeForm: Function },
mixins: [v_model],

View File

@@ -44,13 +44,10 @@
:rule-input="ruleInputNetwork"
)
.w-fit
q-btn(
color="primary",
base-button(
label="Добавить",
type="button"
no-caps,
@click="saveNetwork",
padding="8px 24px"
width="126px"
)
.flex.w-full.relative(v-else)
q-menu.h-fit(

View File

@@ -36,22 +36,16 @@
:text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
)
.flex.gap-x-2.text-smm
q-btn(
color="primary",
outline,
size="16px",
no-caps,
label="Отменить",
padding="10px 24px 10px 24px",
@click="closeModal"
base-button(
width="126px",
type="secondary",
@click="closeModal",
label="Отменить"
)
q-btn(
color="primary",
size="16px",
no-caps,
base-button(
width="126px",
label="Сохранить",
padding="10px 24px 10px 24px",
@click="createNewEntry"
@click="createNewEntry",
)
</template>
@@ -62,10 +56,11 @@ import BaseDownload from "@/components/base/BaseDownload.vue";
import { mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import moment from "moment";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "HealthStateCreateModal",
components: { BaseModal, BaseDownload, BaseInput },
components: { BaseModal, BaseDownload, BaseInput, BaseButton },
mixins: [v_model],
data() {
return {

View File

@@ -1,11 +1,10 @@
<template lang="pug">
.header.flex.w-full.rounded.justify-between.items-center.py-5.pl-6.pr-5
.span.text-2xl.font-bold Карты здоровья
q-btn(
@click="() => {isOpenModal = true}"
color="primary",
no-caps
)
base-button(
width="206px",
@click="() => {isOpenModal = true}",
)
q-icon.mr-2(size="20px" name="add")
span Добавить запись
health-state-create-modal(v-model="isOpenModal")
@@ -13,11 +12,13 @@
<script>
import HealthStateCreateModal from "@/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "HealthStateHeader",
components: {
HealthStateCreateModal,
BaseButton,
},
data() {
return {

View File

@@ -5,7 +5,6 @@
:open-edit="openCard",
:cancel="closeCard",
:tag="fillInspection || change",
template
)
.protocol-body.flex.flex-col
.flex.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
@@ -61,8 +60,11 @@
)
.name.flex.items-center.font-medium.text-smm {{ name }}
.flex.h-10.w-10.absolute.right-4.bottom-4
q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
q-icon(name="app:icon-plus", size="17px")
base-button(
width="40px",
@click="showModal = true",
)
q-icon(name="app:plus", size="16px")
base-modal(v-model="showModal", title="Создание тега", modal-padding)
tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
.flex.gap-x-20.w-full(v-if="change || fillInspection")

View File

@@ -48,14 +48,17 @@
)
.name.flex.items-center.font-medium.text-smm {{ name }}
.flex.h-10.w-10.absolute.right-4.bottom-4
q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
q-icon(name="app:icon-plus", size="17px")
base-button(
width="40px",
@click="showModal = true",
)
q-icon(name="app:plus", size="16px")
base-modal(v-model="showModal", title="Создание тега", modal-padding)
tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
.flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
q-btn(no-caps, flat padding="2px 4px")
q-icon(left, name="app:plus", size="11px")
span.text-smm.font-medium Добавить описание зуба
q-btn(no-caps, flat, padding="2px 4px")
q-icon(left, name="app:plus", size="12px")
span.font-medium Добавить описание зуба
</template>
<script>
@@ -203,4 +206,11 @@ export default {
.q-checkbox :deep(.q-checkbox__inner:before)
background: none !important
.q-btn :deep(.q-focus-helper)
display: none
.q-btn :deep(.q-ripple)
display: none
.on-left
margin-right: 8px
</style>

View File

@@ -31,34 +31,28 @@
.flex.flex-col(class="gap-x-1.5")
base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тег", outlined)
.buttons-group.flex
q-btn(
@click="closeModal",
color="primary",
outline,
size="16px",
no-caps,
base-button(
type="secondary",
width="146px"
label="Отменить",
:style="{width: '100%', height: '40px'}",
padding="10px 24px"
padding="0",
@click="closeModal"
)
q-btn(
base-button(
width="146px",
label="Создать",
:disable="!(model.category && model.tag)",
@click="createTag(model)",
color="primary",
size="16px",
no-caps,
label="Создать"
:style="{width: '100%', height: '40px'}",
padding="10px 24px"
)
</template>
<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "TagCreationForm",
components: { BaseInput },
components: { BaseInput, BaseButton },
props: {
closeModal: Function,
createTag: Function,

View File

@@ -33,23 +33,15 @@
span.text-sm.color-blue.line-height.mb-2px {{ employeeName }}
span.color-grey.line-height.text-sm {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
.flex.gap-2.mt-8
q-btn(
color="primary",
outline,
size="16px",
no-caps,
label="Отменить"
:style="{width: '126px', height: '40px'}",
padding="0",
base-button(
type="secondary",
label="Отменить",
width="126px",
@click="changeShownCreateModal(false)"
)
q-btn(
color="primary",
size="16px",
no-caps,
label="Создать осмотр"
:style="{width: '174px', height: '40px'}",
padding="0",
base-button(
width="174px",
label="Создать осмотр",
@click="saveProtocol"
)
</template>
@@ -61,6 +53,7 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
import * as moment from "moment/moment";
import { mapGetters, mapActions } from "vuex";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "MedicalProtocolCreateModal",
components: {
@@ -68,6 +61,7 @@ export default {
BaseAvatar,
BaseInputDate,
BaseInputTime,
BaseButton,
},
props: {
changeShownCreateModal: Function,

View File

@@ -2,16 +2,12 @@
.list-wrapper.h-full.flex.gap-y-1.flex-col
.background.h-72px.flex.w-full.justify-between.items-center.p-4.rounded
span.text-2xl.font-bold Осмотры
q-btn(
base-button(
width="40px",
@click="changeShownCreateModal(true)",
v-if="createInspection"
color="primary",
size="16px",
no-caps,
icon="add",
:style="{width: '40px', height: '40px'}"
padding="0",
@click="changeShownCreateModal(true)"
)
q-icon(name="app:plus", size="18px")
.p-4.rounded.background.list.flex.flex-col.gap-y-6
.flex
base-select(
@@ -50,6 +46,7 @@ import BaseAvatar from "@/components/base/BaseAvatar.vue";
import MedicalProtocolCard from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCard.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import MedicalProtocolCreateModal from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import { mapState } from "vuex";
export default {
name: "MedicalProtocolsList",
@@ -59,6 +56,7 @@ export default {
MedicalProtocolCard,
BaseModal,
MedicalProtocolCreateModal,
BaseButton,
},
props: {
openInspection: Function,

View File

@@ -29,11 +29,7 @@
v-if="!template",
:style="{color: 'var(--btn-blue-color)'}"
)
q-btn(
no-caps,
outline,
padding="10px 24px"
)
base-button(type="secondary", width="142px")
img.mr-2(:src="layers")
span.text-smm.font-medium Шаблоны
.flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
@@ -44,25 +40,17 @@
span.text-smm.font-medium {{ titleDelete }}
slot
.flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
q-btn(
color="primary",
outline,
size="16px",
no-caps,
base-button(
type="secondary"
label="Отменить",
:style="{width: '126px', height: '40px'}",
padding="0",
width="126px",
@click="cancel"
)
q-btn(
base-button(
v-if="isCheckChange",
color="primary",
size="16px",
no-caps,
width="222px",
label="Сохранить изменения",
:style="{width: '222px', height: '40px'}",
padding="0",
@click="save"
@click="save",
)
</template>

View File

@@ -1,31 +1,29 @@
<template lang="pug">
.modal
.text.mt-4.mb-6.text-base Вы действительно хотите удалить медкарту?
.text.mt-4.mb-10.text-base Вы действительно хотите удалить медкарту?
.flex.gap-x-3
q-btn(
base-button(
type="secondary",
label="Отменить",
no-caps,
outline,
color="primary",
padding="10px 24px",
width="126px"
@click="changeShownRemoveModal(false)"
)
q-btn(
base-button(
type="remove",
label="Удалить",
no-caps,
outline,
style="color: var(--border-red-color)",
padding="10px 24px",
width="126px",
@click="removeMedicalCard"
)
</template>
<script>
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "MedicalRemoveModal",
props: {
changeShownRemoveModal: Function,
},
components: { BaseButton },
data() {
return {};
},

View File

@@ -59,10 +59,11 @@
<script>
import * as moment from "moment";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "ScheduleHeader",
components: { BaseInput },
components: { BaseInput, BaseButton },
props: {
showTime: Boolean,
startMonth: Object,

View File

@@ -11,16 +11,8 @@
size="18px",
style="color: var(--font-dark-blue-color)"
)
q-btn(
color="primary",
padding="8px 25px",
no-caps
)
q-icon(
name="app:icon-plus",
size="12px",
style="margin-right: 10px"
)
base-button(width="188px")
q-icon(name="app:plus", size="12px", left)
span Создать смену
schedule-table-header(
:result="result",
@@ -54,6 +46,7 @@ import ScheduleTableSelect from "@/pages/schedule/components/ScheduleTableSelect
import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "ScheduleTable",
@@ -64,6 +57,7 @@ export default {
ScheduleBar,
BaseInput,
BaseSelect,
BaseButton,
},
props: {
scheduleList: Array,
@@ -263,4 +257,7 @@ export default {
border-radius: 4px
width: 400px
height: 500px
.on-left
margin-right: 10px
</style>