admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Набросала строки таблицы

Browse Source
This commit is contained in:
Daria Golova
2023-07-26 18:26:24 +03:00
parent 2bb879c0cf
commit a747c1820d
27 changed files with 461 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/sass/variables.sass
View File

@@ -92,7 +92,7 @@
--bg-chip-pink-color: #F7D9FF
--gray-thirdly: #f4f4f6
--surface-blue-big: #ecf0fe
--gray-scondary: #dddde8
--gray-secondary: #dddde8
--system-color-red: #f34549
--system-color-green: #21ba72

2
src/components/base/BaseAddingNetwork.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.flex.w-full(class="gap-x-1.5")
base-select(:items="items", v-model="network.kind")
base-select(:items="items", v-model="network.kind", size="M")
base-input.w-full(v-model="network.username", placeholder="Ссылкa", :rule="ruleInput", size="M")
</template>

5
src/components/base/BaseSelect.vue
View File

@@ -12,7 +12,8 @@
emit-value,
map-options,
:clearable="clearable",
dropdown-icon="app:down-arrow"
dropdown-icon="app:down-arrow",
:menu-offset="[0, 8]"
)
template(v-slot:selected)
span(v-if="!value?.icon", :class="{placeholder: placeholder}") {{ textSelect }}
@@ -190,7 +191,7 @@ export default {
height: 20px
.item
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
&:last-child
border-bottom: none
&:hover

3
src/pages/clients/components/ClientDetailSectionAddress.vue
View File

@@ -6,7 +6,8 @@
labelStyle="text-xxs",
placeholder="Введите город",
v-model="dopeAddress.city",
label="Город"
label="Город",
size="S"
)
base-input(
disabled,

3
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -5,7 +5,8 @@
:items="priorityList",
placeholder="Приоритет клиента",
v-model="basicInfo.priority",
label="Приоритет"
label="Приоритет",
size="M"
)
base-input-date(
v-model="basicInfo.birth_date",

6
src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
View File

@@ -5,7 +5,8 @@
placeholder="Категория договора",
v-model="category",
:items="categories",
label="Категория"
label="Категория",
size="M"
)
.flex.justify-between.gap-4
base-input(
@@ -30,7 +31,8 @@
placeholder="Поручить",
v-model="employee",
:items="employees",
label="Исполнитель"
label="Исполнитель",
size="M"
)
</template>

6
src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
View File

@@ -5,7 +5,8 @@
placeholder="Категория договора",
v-model="category",
:items="categories",
label="Категория"
label="Категория",
size="M"
)
.flex.gap-x-4
base-input(
@@ -30,7 +31,8 @@
placeholder="Поручить",
v-model="employee",
:items="employees",
label="Исполнитель"
label="Исполнитель",
size="M"
)
</template>

6
src/pages/clients/components/TableCreatePackageDoc.vue
View File

@@ -23,7 +23,7 @@
.flex.gap-x-4
.flex.flex-col.w-full(class="gap-y-1.5")
.counter.font-semibold.text-smm Тип документа
base-select.h-10(placeholder="Выберите тип")
base-select.h-10(placeholder="Выберите тип", size="M")
.flex.flex-col(class="gap-y-1.5")
.counter.font-semibold.text-smm Дата подписания
.input-date.flex.h-10.justify-center
@@ -32,7 +32,7 @@
span.font-bold Дополнительное
.flex.flex-col.mb-124px(class="gap-y-1.5")
.counter.font-semibold.text-smm Риски
base-select.h-10(placeholder="Выберите риски")
base-select.h-10(placeholder="Выберите риски", size="M")
.services.flex.flex-col.gap-y-6(v-else)
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
@@ -47,7 +47,7 @@
placeholder="Поиск",
)
.counter.icon-search
base-select.h-10(placeholder="Вид услуги")
base-select.h-10(placeholder="Вид услуги", size="M")
.flex.items-center.px-11px.py-9px(
:style="{borderBottom: '1px solid var(--btn-grey-color)'}"
)

3
src/pages/clients/components/cells/TableCellBodyPriority.vue
View File

@@ -9,7 +9,8 @@
@click.stop,
:items="getPriorityList",
v-model="value.priority",
:placeholder="value.priority"
:placeholder="value.priority",
size="M"
)
</template>

6
src/pages/medcards/TheMedcards.vue
View File

@@ -1,15 +1,15 @@
<template lang="pug">
.medcards-wrapper.flex.flex-col.w-full.gap-y-2.h-full
table-patients
medical-card-list
medical-card-search
</template>
<script>
import MedicalCardList from "./components/MedicalCardList.vue";
import MedicalCardSearch from "./components/MedicalCardSearch.vue";
import TablePatients from "./components/TablePatients.vue";
export default {
name: "TheMedcards",
components: { MedicalCardList, TablePatients },
components: { MedicalCardSearch, TablePatients },
};
</script>

2
src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
View File

@@ -91,7 +91,7 @@ export default {
<style lang="sass" scoped>
.header
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
.priority
height: 8px

4
src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
View File

@@ -120,8 +120,8 @@ export default {
width: 340px
.patient
border-bottom: 1px solid var(--gray-scondary)
border-right: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
border-right: 1px solid var(--gray-secondary)
margin-right: 8px
&:last-child
border-bottom: none

2
src/pages/medcards/components/MedcardFormWrapper.vue
View File

@@ -29,7 +29,7 @@ export default {
.header
max-height: 62px
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
.grey-color
color: var(--font-grey-color)

17
src/pages/medcards/components/MedicalCardList.vue
View File

@@ -1,17 +0,0 @@
<template lang="pug">
.medical-wrapper.flex.h-full.rounded.w-full
list-header
</template>
<script>
import ListHeader from "@/pages/medcards/components/MedicalCardListHeader.vue";
export default {
name: "MedicalCardList",
components: { ListHeader },
};
</script>
<style lang="sass" scoped>
.medical-wrapper
background-color: var(--default-white)
</style>

19
src/pages/medcards/components/MedicalCardSearch.vue Normal file
View File

@@ -0,0 +1,19 @@
<template lang="pug">
.medical-wrapper.flex.h-full.rounded.w-full.flex-col
list-header
list-contents
</template>
<script>
import ListHeader from "@/pages/medcards/components/MedicalCardSearchHeader.vue";
import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue";
export default {
name: "MedicalCardSearch",
components: { ListHeader, ListContents },
};
</script>
<style lang="sass" scoped>
.medical-wrapper
background-color: var(--default-white)
</style>

4
src/pages/medcards/components/MedicalCardListHeader.vue → src/pages/medcards/components/MedicalCardSearchHeader.vue
View File

@@ -26,7 +26,7 @@ import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "MedicalCardListHeader",
name: "MedicalCardSearchHeader",
components: { BaseInput, BaseSelect, BaseButton },
data() {
return {
@@ -65,7 +65,7 @@ export default {
<style lang="sass" scoped>
.header-wrapper
height: 72px
border-bottom: 1px solid var(--gray-scondary)
border-bottom: 1px solid var(--gray-secondary)
.search-icon :deep(path)
fill: var(--font-grey-color)

194
src/pages/medcards/components/MedicalCardSearchList.vue Normal file
View File

@@ -0,0 +1,194 @@
<template lang="pug">
.list-wrapper.rounded.w-full(id="listWrapper")
.w-full.header.h-10.flex
.h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
v-for="field in headerConfig",
:key="field.title",
:style="headerStyle(field)"
) {{ field.title }}
.h-full.w-8(v-if="scrollPresence")
.body.w-full
row(
v-for="medcard in medcardsInfo",
:key="medcard.id"
:scroll-presence="scrollPresence",
:header-style="headerStyle",
:medcard-info="medcard",
)
</template>
<script>
import { searchListConfig } from "@/pages/medcards/utils/medcardsConfig.js";
import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";
import avatar from "@/assets/images/person.png";
export default {
name: "MedicalCardSearchList",
components: { Row },
data() {
return {
headerConfig: searchListConfig,
//TODO Взять из конфига
medcardsInfo: [
{
id: 1,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 15,
priority: 1,
medcard: "6112 813812",
},
{
id: 2,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 40,
priority: 2,
medcard: "6112 813812",
},
{
id: 3,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 70,
priority: 3,
medcard: "6112 813812",
},
{
id: 4,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 5,
priority: null,
medcard: "6112 813812",
},
{
id: 5,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 6,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 7,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 8,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 9,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
{
id: 10,
first_name: "Арнольд",
last_name: "Першин",
patronymic: "Витальевич",
birthday: "12.12.1986",
avatar: avatar,
creation_date: "30.07.2023",
filling_percentage: 56,
priority: 1,
medcard: "6112 813812",
},
],
};
},
computed: {
scrollPresence() {
return this.medcardsInfo.length > 9;
// const wrapper = document.getElementById("listWrapper");
// return wrapper?.scrollHeight > wrapper?.clientHeight;
},
},
methods: {
headerStyle(field) {
return {
width:
!this.scrollPresence && field.spareWidth
? field.spareWidth
: field.width,
"min-width":
this.scrollPresence && field.compressedMinWidth
? field.compressedMinWidth
: field.minWidth,
"justify-content": field.title === "Do" ? "center" : "",
};
},
},
};
</script>
<style lang="sass" scoped>
.header
background-color: var(--gray-thirdly)
border-bottom: 1px solid var(--gray-secondary)
.grey-color
color: var(--font-grey-color)
.body
height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
overflow-y: auto
&::-webkit-scrollbar-track
margin: 24px 0 24px 0
background: #E9E9ED
&::-webkit-scrollbar-thumb
background: var(--font-grey-color)
</style>

127
src/pages/medcards/components/MedicalCardSearchRow.vue Normal file
View File

@@ -0,0 +1,127 @@
<template lang="pug">
.w-full.row-wrapper.h-14.flex
.field.gap-x-3(
:style="headerStyle(headerConfig[0])"
)
q-avatar(size="36px")
img(:src="medcardInfo.avatar")
span.font-semibold.text-dark {{patientName}}
.field(:style="headerStyle(headerConfig[1])")
span.text-dark {{ convertDate(medcardInfo?.birthday) }} г.
.field.gap-x-2(:style="headerStyle(headerConfig[2])")
.rounded-full.h-2.w-2(:style="{background: patientPriority?.color}")
span(:style="{color: patientPriority?.color}") {{ patientPriority?.text }}
.field(:style="headerStyle(headerConfig[3])")
.medcard-number.rounded.h-7.py-1.pl-3.pr-2.flex.items-center.justify-between.w-full.cursor-pointer(
@click="copyValue(medcardInfo?.medcard)"
)
span.text-dark.cursor-pointer {{ medcardInfo?.medcard }}
q-icon.copy(size="18px", name="app:copy")
.field(:style="headerStyle(headerConfig[4])")
span.text-dark {{ convertDate(medcardInfo?.creation_date) }} г.
.field.gap-x-3(:style="headerStyle(headerConfig[5])")
.track.h-2.flex-1.rounded
.thumb.h-full.rounded(:style="thumbStyle")
span.grey-color {{ medcardInfo?.filling_percentage }}%
.field(:style="{...headerStyle(headerConfig[6])}")
q-icon.medcard.cursor-pointer(name="app:medcard", size="20px")
</template>
<script>
import {
searchListConfig,
priorityList,
} from "@/pages/medcards/utils/medcardsConfig.js";
import * as moment from "moment/moment";
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
import { addNotification } from "@/components/Notifications/notificationContext";
export default {
name: "MedicalCardSearchRow",
components: { TheNotificationProvider },
props: {
scrollPresence: Boolean,
headerStyle: Function,
medcardInfo: Object,
},
data() {
return {
headerConfig: searchListConfig,
};
},
computed: {
patientName() {
return `${this.medcardInfo?.last_name} ${this.medcardInfo?.first_name} ${this.medcardInfo?.patronymic}`;
},
patientPriority() {
return priorityList?.find(
({ priority }) => this.medcardInfo.priority === priority
);
},
thumbStyle() {
let percentage = this.medcardInfo?.filling_percentage;
return {
width: `calc(${percentage}%)`,
"background-color":
percentage < 11
? "var(--system-color-red)"
: percentage < 51
? "var(--bg-yellow-warning)"
: "var(--system-color-green)",
};
},
},
methods: {
convertDate(date) {
return moment(date?.split(".")?.reverse()?.join("-"))?.format(
"DD MMMM YYYY"
);
},
copyValue(text) {
navigator.clipboard.writeText(text);
addNotification(
new Date().getTime(),
"",
"Номер медкарты скопирован",
"success",
5000
);
},
},
};
</script>
<style lang="sass" scoped>
.row-wrapper
border-bottom: 1px solid var(--gray-secondary)
& > .field
height: 100%
padding: 10px 16px
display: flex
align-items: center
justify-content: start
font-size: 14px
line-height: 135%
.medcard-number
border: 1px solid var(--gray-secondary)
background: var(--gray-thirdly)
&:hover
background: var(--gray-secondary)
.copy :deep(path)
fill: var(--font-grey-color)
.medcard :deep(path)
fill: var(--btn-blue-color)
span
cursor: default
.track
background: var(--gray-thirdly)
.thumb
.grey-color
color: var(--font-grey-color)
</style>

69
src/pages/medcards/utils/medcardsConfig.js Normal file
View File

@@ -0,0 +1,69 @@
export const searchListConfig = [
{
title: "ФИО",
width: "518px",
minWidth: "400px",
spareWidth: "550px",
},
{
title: "Дата рождения",
width: "220px",
minWidth: "160px",
compressedMinWidth: "170px",
},
{
title: "Приоритет",
width: "220px",
minWidth: "140px",
},
{
title: "№ медкарты",
width: "280px",
minWidth: "220px",
compressedMinWidth: "194px",
},
{
title: "Дата создания",
width: "215px",
minWidth: "160px",
compressedMinWidth: "170px",
},
{
title: "Процент заполнения",
width: "295px",
minWidth: "220px",
compressedMinWidth: "194px",
},
{
title: "Do",
width: "60px",
minWidth: "60px",
},
];
export const priorityList = [
{
priority: 1,
id: 1,
text: "Высокий",
color: "var(--system-color-red)",
},
{
priority: 2,
id: 2,
text: "Средний",
color: "var(--bg-yellow-warning)",
},
{
priority: 3,
id: 3,
text: "Низкий",
color: "var(--btn-blue-color)",
},
{
priority: null,
id: 4,
text: "-",
color: "#9294A7",
},
];

2
src/pages/newCalendar/components/CalendarOpenSidebar.vue
View File

@@ -234,7 +234,7 @@ export default {
font-size: 20px
.button-open
border: 1px solid var(--gray-scondary)
border: 1px solid var(--gray-secondary)
color: var(--font-grey-color)
background: var(--bg-light-grey)

6
src/pages/newCalendar/components/CalendarSidebar.vue
View File

@@ -88,7 +88,7 @@
)
q-btn.ml-2(
@click="sortPerson(patientsData)",
:style="{width: '32px', height: '32px', border: '1px solid var(--gray-scondary)'}",
:style="{width: '32px', height: '32px', border: '1px solid var(--gray-secondary)'}",
padding="0",
:class="sortingClass"
)
@@ -350,14 +350,14 @@ export default {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
.button-open
border: 1px solid var(--gray-scondary)
border: 1px solid var(--gray-secondary)
color: var(--font-grey-color)
background: var(--bg-light-grey)
.sort-icon-default
background-color: var(--bg-light-grey)
color: var(--font-grey-color)
border: 1px solid var(--gray-scondary)
border: 1px solid var(--gray-secondary)
.sort-icon-active
background-color: var(--btn-blue-color)

3
src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
View File

@@ -36,7 +36,8 @@
:outlined="isEdit"
:standout="!isEdit"
:items="genderOptions"
bg-color="#e9e9f6"
bg-color="#e9e9f6",
size="M"
)
base-input-date(
v-else-if="field.type === 'date'",

3
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue
View File

@@ -14,7 +14,8 @@
:style="{flex: 1}",
:items="sortingYears",
v-model="sortingYear",
clearable
clearable,
size="M"
)
q-btn.ml-2(
icon="app:sort-number",

9
src/pages/oldCalendar/components/CalendarFormAddEvent.vue
View File

@@ -11,7 +11,8 @@
v-if="selectedEventData.id"
v-model="status",
:items="statusesList",
label="Статус приема"
label="Статус приема",
size="M"
)
base-input(
v-else,
@@ -24,13 +25,15 @@
:items="ownersList",
v-model="employees.employee",
placeholder="Выберите сотрудника"
label="Сотрудник"
label="Сотрудник",
size="M"
)
base-select(
:items="membersList",
v-model="members.person",
placeholder="Выберите клиента",
label="Клиент"
label="Клиент",
size="M"
)
.flex.gap-x-4
base-input(

3
src/pages/schedule/components/FormChangeShift.vue
View File

@@ -22,7 +22,8 @@
:items="ownersList",
v-model="replacementSheet.replacementEmployee",
label="Замена сотрудника",
placeholder="Выберите сотрудника"
placeholder="Выберите сотрудника",
size="M"
)
.time-wrapper.flex.justify-center.gap-x-6
base-input(

3
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -34,7 +34,8 @@
:items="templateList",
v-model="template.item",
placeholder="Выберите шаблон"
label="Шаблоны графиков"
label="Шаблоны графиков",
size="M"
)
.flex.justify-center.gap-x-6.h-10
q-btn(

3
src/pages/schedule/components/ScheduleTableSelect.vue
View File

@@ -13,7 +13,8 @@
v-if="!selectEmployee.label",
:items="ownersList",
v-model="selectEmployee",
placeholder="Добавить сотрудника"
placeholder="Добавить сотрудника",
size="M"
)
.flex.justify-center(v-else) {{selectEmployee.label}}
.row.flex