WIP Добавил страницу доверенного лица

2023-04-24 19:01:58 +03:00
parent 2205500916
commit b2f180bbb9
9 changed files with 288 additions and 7 deletions
--- a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
+++ b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
@@ -0,0 +1,149 @@
+<template lang="pug">
+  medical-form-wrapper(
+    :title="`Доверенное лицо ${index+1}`" 
+    titleDelete="Удалить контакт" 
+    :delete-item="deleteConfidant"
+    :is-check-change="isCheckChange" 
+    :is-loading-data="isLoadingData" 
+    :is-edit="isEdit"
+    :save="saveChange" 
+    :cancel="cancelEdit" 
+    :open-edit="openEdit"
+    )
+    q-form.form-wrap.gap-24.w-full(ref="formConfidant")
+      .flex.flex-col.gap-4(v-for="data in configData")
+        .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
+        .flex.w-full.h-full.justify-between.gap-4(v-for="field in data.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap.mt-10px {{`${field.label} :`}}
+          .input-wrapper.items-center.flex.h-10.gap-10px
+            .flex.gap-1(v-if="field.key === 'networks'")
+              .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
+                v-for="network in confidant.networks"
+                @click="() => copyLinkNetwork(network.username)"
+                style="background-color: var(--bg-light-grey)"
+              )
+                q-icon.icon(:name="mapNetworks[network.kind].icon" :class="{old: network.id, new: !network.id}")
+                span.text-sm.font-medium {{ mapNetworks[network.kind].title || network.username }}
+              .flex.add-network.w-7.h-7.rounded-full.items-center.justify-center.cursor-pointer(v-if="isEdit")
+                q-icon.w-3.h-3(name="app:plus")
+              //- .flex.gap-10px(v-else :key="key+index")
+              //-   base-select-networks(
+              //-     :list-data="Object.values(mapNetworks)"
+              //-     :option-data="data.kind"
+              //-     :choose-option="(e) => chooseNetwork(e, index)"
+              //-     :style-border="true"
+              //-     :size-input="50"
+              //-     )
+              //-   base-input.w-full(
+              //-     v-model="data.username"
+              //-     type="text"
+              //-     no-error-icon
+              //-     :name="key"
+              //-     :rule="configData[key].rules"
+              //-     :standout="!isEdit" 
+              //-     :outlined="isEdit" 
+              //-     text-color="black"
+              //-     )
+
+            base-input.w-full(
+              v-else
+              :readonly="!isEdit" 
+              v-model="confidant[field.key]"
+              @update:model-value="checkChangeInput"
+              :mask="field.mask"
+              :type="field.type"
+              :name="field.key"
+              :placeholder="field.placeholder" 
+              :standout="!isEdit" 
+              :outlined="isEdit"
+              no-error-icon
+              :rule="field.rules"
+              text-color="black"
+              )
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import { checkChangeData } from "@/shared/utils/changesObjects";
+import { mapState, mapGetters } from "vuex";
+import {
+  confidantConfig,
+  mapNetworks,
+} from "@/pages/newMedicalCard/utils/medicalConfig";
+
+export default {
+  name: "ConfidantForm",
+  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks, BaseButton },
+  data() {
+    return {
+      isEdit: false,
+      isLoadingData: false,
+      isCheckChange: false,
+      configData: confidantConfig,
+      mapNetworks: mapNetworks,
+    };
+  },
+  props: {
+    confidant: {},
+    index: Number,
+  },
+  computed: {
+    ...mapGetters({
+      initConfidant: "getConfidantData",
+    }),
+    ...mapState({
+      confidants: (state) => state.medical.confidantData,
+    }),
+  },
+  methods: {
+    checkChangeInput() {
+      this.isCheckChange = checkChangeData(this.initConfidant, this.confidant);
+    },
+    saveChange() {
+      // console.log(this.confidants);
+    },
+    cancelEdit() {
+      this.$store.dispatch("returnInitData");
+      this.isEdit = false;
+      this.isCheckChange = false;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    deleteConfidant() {
+      this.confidants.splice(this.index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
+.label-field
+  color: var(--font-grey-color)
+.input-wrapper
+  width: 302px
+.add-network
+  color: var(--font-dark-blue-color)
+  background-color: var(--bg-light-grey)
+  &:hover
+    color: var(--btn-blue-color)
+    opacity: 0.7
+.icon
+  &.old
+    color: var(--btn-blue-color)
+  &.new
+    color: var(--icon-violet-color)
+</style>