diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue index a1b4f43..fe2db9e 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue @@ -8,7 +8,7 @@ .index-wrapper.w-full(v-if="isEdit") .rounded.border.px-4.py-2(v-if="data.content?.list") .flex.flex-col - .py-2.radio-item(v-for="item in data.content?.list") + .py-2.radio-item.flex.justify-between.items-center(v-for="item in data.content?.list") q-radio( v-model="modelValue", dense, @@ -17,22 +17,30 @@ unchecked-icon="check_box_outline_blank" ) span.text-sm.line-height.blue-color {{ item?.label ? item.label : item }} + .alert-icon.flex.justify-center.items-center.rounded.w-6.h-6(v-if="item?.icon") + q-icon(name="warning_amber", size="13") base-input( v-else, v-model="modelValue", outlined, - type="number" - :rule="data?.rules" + type="number", + :rule="data?.rules", + step="any", ) .rounded.grey-background.py-3.px-4.blue-color span.font-bold.text-base.line-height Справка .text-sm.line-height.mt-2(:class="{'whitespace-pre-line': data.content?.whitespace}") {{ data.content?.reference}} + .w-full.flex.gap-x-1(v-else) + .text-sm.line-height.blue-color.py-6px.px-3.grey-background.rounded {{ displayedValue }} + .flex.rounded.grey-background.w-8.h-8.justify-center.items-center.text-xl + q-icon(name="warning_amber", color="white") @@ -73,10 +105,16 @@ export default { .blue-color color: var(--font-dark-blue-color) + .grey-background background-color: var(--bg-light-grey) + .radio-item border-bottom: 1px solid var(--bg-light-grey) .radio-item:last-child border-bottom: none + +.alert-icon + background-color: var(--bg-light-grey) + color: var(--font-grey-color) diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue index 3f2d29a..66fea65 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue @@ -74,7 +74,7 @@ export default { }, computed: { ...mapState({ - protocolsData: (state) => state.medical.protocolsData, + protocolsList: (state) => state.medical.protocolsList, }), sortingClass() { return this.sorting @@ -86,8 +86,8 @@ export default { }; }, sortingYears() { - if (!this.protocolsData) return []; - let years = this.protocolsData + if (!this.protocolsList) return []; + let years = this.protocolsList .map((elem) => { return elem?.start.slice(0, 4); }) @@ -95,9 +95,9 @@ export default { return this.sorting ? [...new Set(years.reverse())] : [...new Set(years)]; }, sortingProtocols() { - if (!this.protocolsData) return []; + if (!this.protocolsList) return []; let protocols = []; - this.protocolsData.forEach((elem) => + this.protocolsList.forEach((elem) => protocols.push({ id: elem.id, employee: { diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js index 21bde72..76c8fd4 100644 --- a/src/pages/newMedicalCard/utils/medicalConfig.js +++ b/src/pages/newMedicalCard/utils/medicalConfig.js @@ -611,7 +611,28 @@ export const protocolForms = [ 2 — налет поражает до 2/3 зуба, отмечается поддесневой камень; 3 — налет покрывает более 2/3 поверхности, поддесневой камень поражает шейки зубов.`, whitespace: true, - list: [0, 1, 2, 3], + list: [ + { + label: "0", + value: 0, + }, + { + label: "1", + value: 1, + }, + { + label: "2", + value: 2, + icon: true, + color: "var(--bg-event-orange-color)", + }, + { + label: "3", + value: 3, + icon: true, + color: "var(--border-red-color)", + }, + ], }, }, { @@ -627,6 +648,12 @@ export const protocolForms = [ whitespace: true, }, rules: [(val) => val <= 10 && val >= 0], + checkRangeColor: (val) => { + let roundedVal = parseInt(val); + if (roundedVal >= 3 && roundedVal <= 5) + return "var(--bg-event-orange-color)"; + if (roundedVal >= 6 && roundedVal <= 10) return "var(--border-red-color)"; + }, }, { title: "Данные обследования", diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js index 7e86d98..e619fe3 100644 --- a/src/store/modules/medicalCard.js +++ b/src/store/modules/medicalCard.js @@ -59,7 +59,7 @@ const state = () => ({ avatar: "", benefitData: [], events: [], - protocolsData: [ + protocolsList: [ { id: 1, employee: { @@ -126,6 +126,11 @@ const state = () => ({ status: "filled", }, ], + protocolData: { + bite: "distal bite", + hygieneIndex: 2, + KPUIndex: 3, + }, }); const getters = { @@ -338,8 +343,8 @@ const actions = { }, createProtocol({ commit, rootGetters, state }, data) { data.employee = rootGetters.getUserData; - data.id = state.protocolsData.length + 1; - commit("setProtocolsData", data); + data.id = state.protocolsList.length + 1; + commit("setProtocolsList", data); }, }; @@ -370,8 +375,8 @@ const mutations = { state.events = res.events; }); }, - setProtocolsData(state, data) { - state.protocolsData = [...state.protocolsData, data]; + setProtocolsList(state, data) { + state.protocolsList = [...state.protocolsList, data]; }, };