WIP Исправлены найденные baseInputs

2022-12-29 15:21:21 +03:00
parent c664f11bfb
commit e138bedfac
31 changed files with 200 additions and 228 deletions
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -106,7 +106,7 @@
            client-detail-input.text-sm.w-max-fit(
              v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'",
              :style="{fontWeight:key === 'number'&&600}",
-              v-model:value="sectionInfo[key]",
+              v-model="sectionInfo[key]",
              :rows="section ==='pass' ? 2 : 1",
              :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
              :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
@@ -138,7 +138,7 @@
              client-detail-input.text-sm.w-max-fit.pr-12.relative(
                :maxLength="40",
                :style="{fontWeight:key === 'number'&&600}",
-                v-model:value="sectionInfo[key].title",
+                v-model="sectionInfo[key].title",
                placeholder="Заголовок"
              )
                .text.flex.absolute.text-xsx.top-18px(
@@ -149,7 +149,7 @@
              client-detail-input.text-sm.w-max-fit(
                :maxLength="40",
                :style="{fontWeight:key === 'number'&&600}",
-                v-model:value="sectionInfo[key].description",
+                v-model="sectionInfo[key].description",
                placeholder="Описание"
              )
            .flex.items-center(v-if="item?.title && section !== 'additional'")
@@ -250,7 +250,7 @@ export default {
        pdf: pdfIcon,
        xls: exelIcon,
      },
-      isOpenPackage: true,
+      isOpenPackage: false,
      isOpenAddDoc: false,
      showModal: false,
    };
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -3,16 +3,14 @@
    textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
      v-if="!sharp"
      :rows="textareaRows",
-      :value="value",
+      v-model="value",
      :cols="24",
-      @input="$emit('update:value', $event.target.value)",
      :placeholder="placeholder",
      :maxLength="maxLength"
    )
    input.w-full.outline-0.not-italic.font-medium(
      v-else,
-      :value="value",
-      @input="$emit('update:value', $event.target.value)",
+      v-model="value",
      :placeholder="placeholder",
      v-mask="sharp"
    ) 
@@ -23,15 +21,14 @@
 import { mask } from "vue-the-mask";
 export default {
  name: "ClientDetailInput",
+  emits: ["update:modelValue"],
  props: {
-    value: String,
+    modelValue: String,
    width: Number,
    sharp: String,
-    placeholder: {
-      default: "Поиск",
-    },
    rows: Number,
    maxLength: Number,
+    placeholder: String,
  },
  directives: { mask },
  computed: {
@@ -42,6 +39,14 @@ export default {
      if (this.value.length <= 22) return this.rows;
      return Math.ceil(this.value.length / 22);
    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
  },
 };
 </script>
--- a/src/pages/clients/components/ClientDetailSectionAddress.vue
+++ b/src/pages/clients/components/ClientDetailSectionAddress.vue
@@ -14,7 +14,7 @@
      base-input.text-sm.input-info(
        disabled,
        placeholder="Введите область",
-        v-model:value="dopeAddress.region",
+        v-model="dopeAddress.region",
        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
      )
    .flex.flex-col(class="gap-y-1.5")
@@ -22,7 +22,7 @@
      base-input.text-sm.input-info(
        disabled,
        placeholder="Введите улицу",
-        v-model:value="dopeAddress.street",
+        v-model="dopeAddress.street",
        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
      )
    .flex.gap-x-4
@@ -31,7 +31,7 @@
        base-input.text-sm.input-info(
          disabled,
          placeholder="Дом",
-          v-model:value="dopeAddress.house",
+          v-model="dopeAddress.house",
          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
        )
      .flex.flex-col(class="gap-y-1.5")
@@ -39,7 +39,7 @@
        base-input.text-sm.input-info(
          disabled,
          placeholder="Квартира",
-          v-model:value="dopeAddress.flat",
+          v-model="dopeAddress.flat",
          :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
        )
    .flex.flex-col(class="gap-y-1.5")
@@ -48,7 +48,7 @@
        disabled,
        v-mask="'######'",
        placeholder="000000",
-        v-model:value="dopeAddress.index",
+        v-model="dopeAddress.index",
        :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
      )
 </template>
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -5,7 +5,7 @@
        base-input(
          :with-icon="true",
          icon-position="left",
-          v-model:value="searchClient",
+          v-model="searchClient",
          placeholder="Введите фамилию",
          @keyup.enter="searchLastName"
        )
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -284,6 +284,7 @@ export default {
          });
    },
    postContactsClient() {
+      console.log(this.dataClient);
      let contacts = [...this.dataClient.contacts];
      if (
        this.dataClient.email.username &&
--- a/src/pages/clients/components/FormCreateAdditional.vue
+++ b/src/pages/clients/components/FormCreateAdditional.vue
@@ -3,7 +3,7 @@
    .flex.flex-col.gap-y-6.w-full.px-4
      .flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id")
        .flex.flex-col.gap-y-1
-          base-input(v-model:value="info.header" placeholder="Заголовок")
+          base-input(v-model="info.header" placeholder="Заголовок")
          .flex.px-4.py-3.description
            textarea.w-full.h-full.outline-0.resize-none(:value="info.description" @input="$emit('update:info.description', $event.target.value)" placeholder="Описание" style="py-10")
        .upload-wrapper.flex.flex-col.justify-center.items-center
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -1,67 +1,52 @@
 <template lang="pug">
  .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
    .flex.flex-col.gap-y-6.px-4
-      .flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
-        span.text-sm.font-semibold Полный адрес
-        base-input.input-info(
-          v-model:value="addresses.full_address",
-          placeholder="Введите адрес целиком"
-        )
+      base-input.input-info(
+        v-model="addresses.full_address",
+        placeholder="Введите адрес целиком",
+        label="Полный адрес"
+      )
      .flex.items-center.justify-center.relative
        .line.absolute
        span.text-sm.separator.px-2 или
      .grid.grid-cols-2.gap-y-6.gap-x-4
-        .flex.flex-col(class="gap-y-1.5")
-          .text-info.text-xxs.font-semibold Город
-          base-input.input-info(
-            disabled,
-            placeholder="Введите город",
-            v-model:value="addresses.city",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Область
-          base-input.input-info(
-            disabled,
-            placeholder="Введите область",
-            v-model:value="addresses.region",
-
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Улица
-          base-input.input-info(
-            disabled,
-            placeholder="Введите улицу",
-            v-model:value="addresses.street",
-
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Дом
-          base-input.input-info(
-            disabled,
-            placeholder="Номер дома",
-            v-model:value="addresses.house_number",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Квартира
-          base-input.input-info(
-            disabled,
-            placeholder="Номер квартиры",
-            v-model:value="addresses.apartment_number",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm.font-semibold Индекс
-          base-input.input-info(
-            disabled,
-            placeholder="000000",
-            v-mask="'######'",
-            v-model:value="addresses.zip_code",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
+        base-input.input-info(
+          disabled,
+          placeholder="Введите город",
+          v-model="addresses.city",
+          label="Город"
+        )
+        base-input.input-info(
+          disabled,
+          placeholder="Введите область",
+          v-model="addresses.region",
+          label="Область"
+        )
+        base-input.input-info(
+          disabled,
+          placeholder="Введите улицу",
+          v-model="addresses.street",
+          label="Введите улицу"
+        )
+        base-input.input-info(
+          disabled,
+          placeholder="Номер дома",
+          v-model="addresses.house_number",
+          label="Дом"
+        )
+        base-input.input-info(
+          disabled,
+          placeholder="Номер квартиры",
+          v-model="addresses.apartment_number",
+          label="Квартира"
+        )
+        base-input.input-info(
+          disabled,
+          placeholder="000000",
+          v-mask="'######'",
+          v-model="addresses.zip_code",
+          label="Индекс"
+        )
    .px-4
      base-button(@click="saveClient" :size="40")
        span.font-semibold Создать клиента
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -1,35 +1,29 @@
 <template lang="pug">
  .wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
    .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Приоритет
-        base-custom-select(
-          :items="priorityList",
-          placeholder="Приоритет клиента",
-          v-model="basicInfo.priority"
-        )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Дата рождения
-        base-input-date.input-info(
-          v-model="basicInfo.birth_date",
-        )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Номер телефона
-        base-input.input-info(
-          v-model:value="phone.username",
-          placeholder="+7 (915) 644–92–23",
-          v-mask="'+7 (###) ###-##-##'",
-          :width-input="277"
-        )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Email
-        base-input.input-info(
-          v-model:value="email.username",
-          placeholder="user@yandex.ru",
-          :width-input="277"
-        )
+      base-custom-select.input-info(
+        :items="priorityList",
+        placeholder="Приоритет клиента",
+        v-model="basicInfo.priority",
+        label="Приоритет"
+      )
+      base-input-date.input-info(
+        v-model="basicInfo.birth_date",
+        label="Дата рождения"
+      )
+      base-input.input-info(
+        v-model="phone.username",
+        placeholder="+7 (915) 644–92–23",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Номер телефона"
+      )
+      base-input.input-info(
+        v-model="email.username",
+        placeholder="user@yandex.ru",
+        label="Email"
+      )
      .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
-        span.text-sm Ссылки на соцсети
+        span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
          base-adding-network(
            :list-adding-networks="networks.settings",
@@ -100,7 +94,6 @@ export default {
    background-color: var(--btn-blue-color)
 .input-info
  color: var(--font-dark-blue-color)
-  height: 40px
 .obligatory
  color: var(--font-obligatory-color)
 .add-network
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -3,59 +3,45 @@
    .flex.flex-col.gap-y-6.px-4
      span.title-info.text-base.font-bold Паспортные данные
      .grid.grid-cols-2.gap-x-4.gap-y-6
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Серия и номер
-          base-input.input-info(
-            v-mask="'#### ######'",
-            v-model:value="identityDocument.pass.series_number",
-            placeholder="0000 000000",
-            :width-input="277"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Кем выдан
-          base-input.input-info(
-            v-model:value="identityDocument.pass.issued_by_org",
-            placeholder="Точно как в паспорте",
-            :width-input="277"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Код подразделения
-          base-input.input-info(
-            v-mask="'###-###'",
-            v-model:value="identityDocument.pass.issued_by_org_code",
-            placeholder="000–000",
-            :width-input="277"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Дата выдачи
-          base-input-date.input-info.h-10(
-            v-model="identityDocument.pass.issued_by_date",
-            placeholder="Дата",
-            :width-input="277"
-          )
+        base-input.input-info(
+          v-mask="'#### ######'",
+          v-model="identityDocument.pass.series_number",
+          placeholder="0000 000000",
+          label="Серия и номер"
+        )
+        base-input.input-info(
+          v-model="identityDocument.pass.issued_by_org",
+          placeholder="Точно как в паспорте",
+          label="Кем выдан"
+        )
+        base-input.input-info(
+          v-mask="'###-###'",
+          v-model="identityDocument.pass.issued_by_org_code",
+          placeholder="000–000",
+          label="Код подразделения"
+        )
+        base-input-date.input-info.h-10(
+          v-model="identityDocument.pass.issued_by_date",
+          placeholder="Дата",
+          label="Дата выдачи"
+        )
    .flex.flex-col.gap-y-6.px-4
      span.title-info.text-base.font-bold СНИЛС и ИНН
      .grid.grid-cols-2.gap-x-4.gap-y-6
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Номер СНИЛС
-          base-input.input-info(
-            disabled,
-            v-mask="'###-###-### ##'",
-            v-model:value="identityDocument.snils.number",
-            placeholder="000–000–000 00",
-            :width-input="277",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
-        .flex.flex-col(class="gap-y-1.5")
-          span.text-sm Номер ИНН
-          base-input.input-info(
-            disabled,
-            v-mask="'############'",
-            v-model:value="identityDocument.inn.number",
-            placeholder="000000000000",
-            :width-input="277",
-            :style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
-          )
+        base-input.input-info(
+          disabled,
+          v-mask="'###-###-### ##'",
+          v-model="identityDocument.snils.number",
+          placeholder="000–000–000 00",
+          label="Номер СНИЛС"
+        )
+        base-input.input-info(
+          disabled,
+          v-mask="'############'",
+          v-model="identityDocument.inn.number",
+          placeholder="000000000000",
+          label="Номер ИНН"
+        )
    .px-4
      base-button(@click="saveClient" :size="40")
        span.font-semibold Создать клиента
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -4,7 +4,7 @@
      .font-semibold.text-smm ФИО пациента 
      base-input(
        :width-input="200",
-        v-model:value="patient.full_name"
+        v-model="patient.full_name"
      )
    .flex
      .flex-col
@@ -17,7 +17,7 @@
      .flex-col
        .font-semibold.text-smm Серия и номер
        base-input(
-          v-model:value="patient.seriesAndNumber", 
+          v-model="patient.seriesAndNumber", 
          disabled,                  
        )
    .flex
@@ -37,7 +37,7 @@
      .font-semibold.text-smm ФИО Заказчика 
      base-input(
        :width-input="200",
-        v-model:value="patient.full_name"
+        v-model="patient.full_name"
      )
    .flex
      .flex-col
@@ -50,7 +50,7 @@
      .flex-col
        .font-semibold.text-smm Серия и номер
        base-input(
-          v-model:value="patient.seriesAndNumber", 
+          v-model="patient.seriesAndNumber", 
          disabled,                  
        )
    .flex
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
@@ -15,21 +15,21 @@
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
-              v-model:value="signedDate"
+              v-model="signedDate"
            )
        .flex-col
          .font-semibold.text-smm Начало оказания услуг
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
-              v-model:value="startDate"
+              v-model="startDate"
            )
        .flex-col
          .font-semibold.text-smm Окончание оказания услуг
          .input-date.flex.h-10.justify-center
            base-input-date(
              :width-input="200",
-              v-model:value="endDate"
+              v-model="endDate"
            )
      
      .flex-col.w-full.my-6
--- a/src/pages/clients/components/TableAddingNewAdditional.vue
+++ b/src/pages/clients/components/TableAddingNewAdditional.vue
@@ -3,7 +3,7 @@
    .corner
    .wrap.flex.flex-col.p-4.gap-y-4
      .flex.flex-col.gap-y-1
-        base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
+        base-input(:with-icon="true" v-model="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
          span.counter {{`${newAdditionalData.header.length}/140`}}
        .description.flex.px-4.py-3
          textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
--- a/src/pages/clients/components/TableCreateNote.vue
+++ b/src/pages/clients/components/TableCreateNote.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .flex.flex-col.gap-y-3
    .flex.flex-col.gap-y-3.relative
-      base-input.text-smm(placeholder="Заголовок", v-model:value="title", :maxLength="40")
+      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40")
      .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
    .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
      textarea.place-input.w-full.outline-0.not-italic.resize-none(
--- a/src/pages/clients/components/TableCreatePackageDoc.vue
+++ b/src/pages/clients/components/TableCreatePackageDoc.vue
@@ -16,7 +16,7 @@
        .flex.flex-col(class="gap-y-1.5")
          .counter.font-semibold.text-smm ФИО
          base-input(
-            v-model:value="patient",
+            v-model="patient",
            placeholder="Введите название для пакета документов"
          )
            span.counter 
--- a/src/pages/clients/components/cells/ClientsTableCellHeader.vue
+++ b/src/pages/clients/components/cells/ClientsTableCellHeader.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .flex.box-border.justify-between.items-center(
-    :style="{ minWidth : width + 'px', maxWidth: width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
+    :style="{ width : width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
    :class="{width:generateWidth}"
  )
    span.text-sm(v-if="title") {{title}}
--- a/src/pages/clients/components/cells/TableCellBodyBirthday.vue
+++ b/src/pages/clients/components/cells/TableCellBodyBirthday.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full.text-sm(
-    :style="{ minWidth : width + 'px', maxWidth : width + 'px' }"
+    :style="{ width : width + 'px'}"
  )
    span(v-if="!isOpenChange") {{ birthday }}
    base-input-date.input.h-10(
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/src/pages/clients/components/cells/TableCellBodyEmail.vue
@@ -7,13 +7,13 @@
      @mouseover="changeHover",
      @mouseleave="changeHover"
    ) {{maxValue}}
-    base-input(
-      v-if="isOpenChange",
-      :width-input="234",
-      @click.stop,
-      v-model:value="value.email.username",
-      :placeholder="value.email.username"
-    )
+    .email
+      base-input(
+        v-if="isOpenChange",
+        @click.stop,
+        v-model="value.email.username",
+        :placeholder="value.email.username"
+      )
 </template>

 <script>
@@ -45,3 +45,8 @@ export default {
  },
 };
 </script>
+
+<style lang="sass" scoped>
+.email
+  width: 234px
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -1,19 +1,17 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
-    :style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
+    :style="{ width : width + 'px'}",
  )
    base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
    base-avatar(:size="36", v-else)
      img.h-full.object-cover(:src="url + photo")
    span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
-    base-input(
-      v-if="isOpenChange",
-      @click.stop,
-      type="text",
-      v-model:value="value.fullName",
-      :width-input="300",
-      placeholder="Фамилия Имя Отчество"
-    )
+    .name(v-if="isOpenChange")
+      base-input(
+        @click.stop,
+        v-model="value.fullName",
+        placeholder="Фамилия Имя Отчество"
+      )
 </template>

 <script>
@@ -41,4 +39,6 @@ export default {
  border-radius: 50%
  background-color: var(--font-grey-color)
  color: var(--font-dark-blue-color)
+.name
+  width: 300px
 </style>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth: width + 'px', maxWidth: width + 'px' }")
+  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
    .flex.gap-x-1
      .text-xl.icon.relative(
        v-for="network in getNetworks",
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -1,16 +1,15 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ width : width + 'px' }")
    span.text-sm(
      v-if="!isOpenChange"
    ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
-    base-input(
-      v-if="isOpenChange",
-      @click.stop,
-      :width-input="154",
-      v-model:value="value.phone.username",
-      :placeholder="value.phone.username",
-      v-mask="'+7 (###) ###-##-##'"
-    )
+    .phone(v-if="isOpenChange")
+      base-input(
+        @click.stop,
+        v-model="value.phone.username",
+        :placeholder="value.phone.username",
+        v-mask="'+7 (###) ###-##-##'"
+      )
 </template>

 <script>
@@ -27,3 +26,8 @@ export default {
  directives: { mask },
 };
 </script>
+
+<style lang="sass" scoped>
+.phone
+  width: 158px
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPriority.vue
@@ -1,10 +1,15 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ width : width + 'px'}")
    .flex.gap-x-2.items-center(v-if="!isOpenChange")
      .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }")
      span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}}
    .flex.gap-x-2.text-sm(class="w-[164px]")
-      base-select(v-if="isOpenChange", @click.stop :items="getPriorityList", v-model="value.priority")
+      base-select(
+        v-if="isOpenChange",
+        @click.stop :items="getPriorityList",
+        v-model="value.priority",
+        textStyle="text-sm"
+      )
 </template>

 <script>