WIP Переделала inputs в agreement и medical

2022-12-30 15:39:34 +03:00
parent 2b13957fe2
commit 9fe57eda5e
11 changed files with 178 additions and 227 deletions
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
@@ -1,53 +1,43 @@
 <template lang="pug">
-  .flex-col
+  .flex.flex-col.gap-y-6
    span.font-bold Общая информация
-    .flex-col
-      .flex-col.my-6
-        .counter.font-semibold.text-smm Категория
-        base-custom-select.select.text-sm(
-          placeholder="Категория договора",
-          v-model="category",
-          :items="categories",            
-        )
-      .flex.justify-between.w-full.gap-4
-        base-input-date(
-          v-model="signedDate",
-          label="Дата подписания"
-        )        
-        base-input-date(
-          v-model="startDate",
-          label="Начало оказания услуг"
-        )        
-        base-input-date(
-          v-model="endDate",
-          label="Окончание оказания услуг"
-        )
-      
-      .flex-col.w-full.my-6
-        .font-semibold.text-smm Исполнитель             
-        base-custom-select.select.text-sm(
-          placeholder="Поручить",
-          v-model="employee",
-          :items="employees",
-        )
+    base-custom-select(
+      placeholder="Категория договора",
+      v-model="category",
+      :items="categories",
+      label="Категория"          
+    )
+    .flex.justify-between.gap-4
+      base-input-date.w-48(
+        v-model="signedDate",
+        label="Дата подписания"
+      )        
+      base-input-date.w-48(
+        v-model="startDate",
+        label="Начало оказания услуг"
+      )        
+      base-input-date.w-48(
+        v-model="endDate",
+        label="Окончание оказания услуг"
+      )         
+    base-custom-select(
+      placeholder="Поручить",
+      v-model="employee",
+      :items="employees",
+      label="Исполнитель"
+    )
 </template>

 <script>
-import BaseButton from "@/components/base/BaseButton";
 import BaseStepper from "@/components/base/BaseStepper";
-import BaseSelect from "@/components/base/BaseSelect";
 import BaseInputDate from "@/components/base/BaseInputDate";
-import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";

 export default {
  name: "AgreementCommon",
  components: {
-    BaseButton,
    BaseStepper,
-    BaseSelect,
    BaseInputDate,
-    BaseInput,
    BaseCustomSelect,
  },
  data() {
@@ -72,5 +62,3 @@ export default {
  },
 };
 </script>
-
-<style lang="sass" scoped></style>
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -1,81 +1,72 @@
 <template lang="pug">
-  .flex-col
-    .flex-col
-      .font-semibold.text-smm ФИО пациента 
-      base-input(
-        :width-input="200",
-        v-model="patient.full_name"
+  .flex.flex-col.gap-y-6
+    base-input(
+      label="ФИО пациента",
+      v-model="patient.full_name"
+    )
+    .flex.justify-between
+      base-custom-select.w-80(
+        placeholder="Тип документа",
+        v-model="patient.doc_type",
+        :items="patentIdentityDocumentTypes",
+        label="Документ, удостоверяющий личность"            
      )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Документ, удостоверяющий личность
-        base-custom-select.select.text-sm(
-          placeholder="Тип документа",
-          v-model="patient.doc_type",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Серия и номер
-        base-input(
-          v-model="patient.seriesAndNumber", 
-          disabled,                  
-        )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Телефон
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Адрес
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes"    
-        )
-    .flex-col
-      .font-semibold.text-smm ФИО Заказчика 
      base-input(
-        :width-input="200",
-        v-model="patient.full_name"
+        v-model="patient.seriesAndNumber", 
+        disabled,
+        v-mask="'#### ######'"  
+        label="Серия и номер" 
+      )
+    .flex.justify-between
+      base-input.w-80(
+        v-model="patient.address",
+        label="Адрес"  
+      )
+      base-input(
+        v-model="patient.phone",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Телефон" 
+      )
+    base-input(
+      v-model="patient.full_name"
+      label="ФИО Заказчика",
+    )
+    .flex.justify-between
+      base-custom-select.w-80(
+        placeholder="Тип документа",
+        v-model="patient.doc_type",
+        :items="patentIdentityDocumentTypes",
+        label="Документ, удостоверяющий личность"            
+      )
+      base-input(
+        v-model="patient.seriesAndNumber", 
+        disabled,
+        v-mask="'#### ######'"  
+        label="Серия и номер" 
+      )
+    .flex.justify-between
+      base-input.w-80(
+        v-model="patient.address",
+        label="Адрес"  
+      )
+      base-input(
+        v-model="patient.phone",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Телефон" 
      )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Документ, удостоверяющий личность
-        base-custom-select.select.text-sm(
-          placeholder="Тип документа",
-          v-model="patient.doc_type",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Серия и номер
-        base-input(
-          v-model="patient.seriesAndNumber", 
-          disabled,                  
-        )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Телефон
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Адрес
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes" )
 </template>

 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import { mask } from "vue-the-mask";
 export default {
  name: "AgreementPerson",
  components: {
    BaseInput,
    BaseCustomSelect,
  },
+  directives: { mask },
  data() {
    return {
      patient: {
@@ -85,10 +76,8 @@ export default {
          label: "",
        },
        seriesAndNumber: "2354 125423",
-        phone: {
-          id: null,
-          label: "",
-        },
+        phone: "",
+        address: "",
      },
    };
  },
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
@@ -1,62 +1,41 @@
 <template lang="pug">
-  .flex-col
+  .flex.flex-col.gap-y-6
    span.font-bold Общая информация
-    .flex-col
-      .flex-col.my-6
-        .counter.font-semibold.text-smm Категория
-        base-custom-select.select.text-sm(
-          placeholder="Категория договора",
-          v-model="category",
-          :items="categories",            
-        )
-      .flex.w-full.my-6
-        .flex-col
-          .font-semibold.text-smm Дата подписания 
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model="signedDate"
-            )
-        .flex-col
-          .font-semibold.text-smm Начало оказания услуг
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model="startDate"
-            )
-        .flex-col
-          .font-semibold.text-smm Окончание оказания услуг
-          .input-date.flex.h-10.justify-center
-            base-input-date(
-              :width-input="200",
-              v-model="endDate"
-            )
-      
-      .flex-col.w-full.my-6
-        .font-semibold.text-smm Исполнитель             
-        base-custom-select.select.text-sm(
-          placeholder="Поручить",
-          v-model="employee",
-          :items="employees",
-        )
+    base-custom-select(
+      placeholder="Категория договора",
+      v-model="category",
+      :items="categories",
+      label="Категория"   
+    )
+    .flex.gap-x-4
+      base-input-date.w-48(
+        v-model="signedDate",
+        label="Дата подписания"
+      )
+      base-input-date.w-48(
+        v-model="startDate",
+        label="Начало оказания услуг"
+      )
+      base-input-date.w-48(
+        v-model="endDate",
+        label="Окончание оказания услуг"
+      )         
+    base-custom-select(
+      placeholder="Поручить",
+      v-model="employee",
+      :items="employees",
+      label="Исполнитель"
+    )
 </template>

 <script>
-import BaseButton from "@/components/base/BaseButton";
-import BaseStepper from "@/components/base/BaseStepper";
-import BaseSelect from "@/components/base/BaseSelect";
 import BaseInputDate from "@/components/base/BaseInputDate";
-import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";

 export default {
  name: "AgreementServices",
  components: {
-    BaseButton,
-    BaseStepper,
-    BaseSelect,
    BaseInputDate,
-    BaseInput,
    BaseCustomSelect,
  },
  data() {