Исправил позиционирование всплывающих окон, ограничение года календаря, бордеры сайдбара, фикс карточек ивентов, изменил стили карточки клиента

2022-11-17 16:58:17 +03:00
parent 8f63ef9bea
commit 26dc8b37fa
17 changed files with 153 additions and 62 deletions
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
-    :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}"
+    :style="{flexDirection:settings[section].rowFlex && 'row', width : settings[section].width + 'px', height : settings[section].height + 'px', background: changeBackground}"
  )
    .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
      span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
@@ -41,16 +41,24 @@
            :save-additional="saveDocs"
          )
    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(v-if="this.isData || this.isAddress")
-      .flex.flex-col(class="gap-y-1.5")
+      .flex.flex-col.gap-y-4
        .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")
          span.title-section.font-semibold.text-xs(
            v-if="settings[section].options") {{settings[section].options[key]}}
          span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
          client-detail-input.text-sm.text-sm.w-max-fit(
-            v-if="section!=='docs' && isChange",
-            :style="{fontWeight:key === 'numba'&&600}",
+            v-if="section!=='docs' && isChange && settings[section].options[key] !== 'Дата выдачи'",
+            :style="{fontWeight:key === 'numba'&&600, maxHeight: settings[section].options[key] !== 'Выдан' ? '40px' : ''}",
            v-model:value="sectionInfo[key]",
-            :width="settings[section].width"
+            :width="settings[section].width",
+            :placeholder="settings[section].placeholder[key]"
+          )
+          base-input.max-h-10.py-2.pl-3(
+            v-if="settings[section].options[key] === 'Дата выдачи' && isChange",
+            type="date",
+            v-model:value="sectionInfo.issued_by_date"
+            :max-date="`${currentYear}-12-31`",
+            dateInput
          )
            .copy.icon-copy.cursor-pointer(
              v-if="item.copy",
@@ -95,12 +103,14 @@ import BaseButton from "@/components/base/BaseButton";
 import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
 import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
 import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
+import BaseInput from "@/components/base/BaseInput";
 import { detail } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "ClientDetailInfoSection",
  components: {
    TableAddingNewAdditional,
    BaseButton,
+    BaseInput,
    ClientDetailInput,
    TableAddingNewDoc,
    ClientDetailSectionAddress,
@@ -119,9 +129,11 @@ export default {
    createDocument: Function,
    addressId: String,
    docId: String,
+    currentYear: Number,
  },
  data() {
    return {
+      tip: "text",
      additionalData: {
        header: "",
        value: "",
@@ -141,6 +153,13 @@ export default {
      isAddress: true,
    };
  },
+  computed: {
+    changeBackground() {
+      return this.isChange
+        ? "var(--light-grey-bg-color)"
+        : "var(--default-white)";
+    },
+  },
  methods: {
    openAddDoc() {
      this.isChange = true;
@@ -271,5 +290,5 @@ export default {
 .text-separation
  width: 38px
  z-index: 1
-  background: white
+  background: var(--light-grey-bg-color)
 </style>
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue
@@ -1,28 +1,29 @@
 <template lang="pug">
  .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
    client-detail-info-section(
-      v-model:section-info="dataDocument"
-      section="pass"
-      :update-document="updateDocument"
-      :lack-data="lackData"
-      :create-document="createDocument"
-      :doc-id="docId"
+      v-model:section-info="dataDocument",
+      section="pass",
+      :update-document="updateDocument",
+      :lack-data="lackData",
+      :create-document="createDocument",
+      :doc-id="docId",
+      :current-year="currentYear"
    )
    .flex.flex-col
      client-detail-info-section(
-        :section-info="dataAddress"
-        section="addresses"
-        :update-address="updateAddress"
-        :lack-address="lackAddress"
-        :dope-address="dopeAddress"
-        :create-address="createAddress"
+        :section-info="dataAddress",
+        section="addresses",
+        :update-address="updateAddress",
+        :lack-address="lackAddress",
+        :dope-address="dopeAddress",
+        :create-address="createAddress",
        :address-id="addressId"
      )
    .flex.flex-col
      client-detail-info-section(
-        :section-info="dataAttachments"
-        section="docs"
-        :save-new-doc="saveNewDoc"
+        :section-info="dataAttachments",
+        section="docs",
+        :save-new-doc="saveNewDoc",
        :delete-doc="deleteDoc"
      )
 </template>
@@ -48,6 +49,7 @@ export default {
    createDocument: Function,
    addressId: String,
    docId: String,
+    currentYear: Number,
  },
 };
 </script>
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -1,9 +1,10 @@
 <template lang="pug">
  .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
-    textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none(
-      :rows="Math.ceil(value.length/heightInput)"
-      :value="value"
-      @input="$emit('update:value', $event.target.value)"
+    textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none.font-medium(
+      :rows="Math.ceil(value.length/heightInput)",
+      :value="value",
+      @input="$emit('update:value', $event.target.value)",
+      :placeholder="placeholder",
    )
    slot
 </template>
@@ -15,6 +16,9 @@ export default {
    value: String,
    width: Number,
    sharp: String,
+    placeholder: {
+      default: "Поиск",
+    },
  },

  computed: {
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -5,13 +5,14 @@
      clients-table-header(:check="selectedCheck" :is-check="selectAll")
      .flex.flex-col
        clients-table-row(
-          v-for="client in dataClients"
-          :key="client.id"
-          :id="client.id"
-          :is-check="marked.includes(client.id)"
-          :check="selectedCheck"
-          :client="client"
-          :fetch-data-clients="fetchDataClients"
+          v-for="client in dataClients",
+          :key="client.id",
+          :id="client.id",
+          :is-check="marked.includes(client.id)",
+          :check="selectedCheck",
+          :client="client",
+          :fetch-data-clients="fetchDataClients",
+          :current-year="currentYear"
          )
 </template>

@@ -33,6 +34,7 @@ export default {
  },
  props: {
    openForm: Function,
+    currentYear: Number,
  },

  data() {
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -82,6 +82,7 @@
      :create-document="postCreateIdentityDocument"
      :address-id="addressId"
      :doc-id="docId"
+      :current-year="currentYear"
    )
 </template>

@@ -149,6 +150,7 @@ export default {
    isCheck: Boolean,
    client: Object,
    fetchDataClients: Function,
+    currentYear: Number,
  },
  created() {
    this.dataClient = {
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .wrapper.flex.w-full.relative.mx-6
-    clients-table(:open-form="openForm")
+    clients-table(:open-form="openForm", :current-year="currentYear")
 </template>

 <script>
@@ -10,6 +10,7 @@ export default {
  components: { ClientsTable },
  props: {
    openForm: Function,
+    currentYear: Number,
  },
 };
 </script>
@@ -17,4 +18,5 @@ export default {
 <style lang="sass" scoped>
 .wrapper
  overflow: auto
+  border-top-left-radius: 4px
 </style>