Создал компонент отображения детальной информации, конфиг для него и добавил данные в мок

server.js

@@ -1,41 +1,141 @@
 import { createServer } from "miragejs";
 
+const dataClients = [
+  {
+    id: "1",
+    fullName: "Вильгейльм Арнольд Витальевич",
+    age: "34",
+    jobTitle: "Менеджер",
+    priority: "Высокий",
+    phone: "+7 (915) 657–21–14",
+    email: "Superboyband@yandex.ru",
+    networks: [],
+    meeting: {
+      date: "02.06.22",
+      time: "18:30–19:30",
+    },
+  },
+  {
+    id: "2",
+    fullName: "Астафоркина Екатерина Геннадьевна",
+    age: "54",
+    jobTitle: "Менеджер",
+    priority: "-",
+    phone: "+7 (574) 364–53–36",
+    email: "antimag@gmail.com",
+    networks: [],
+    meeting: {
+      date: "14.07.22",
+      time: "17:30–21:30",
+    },
+  },
+];
+
+const clientsDetail = [
+  {
+    id: "5",
+    idClient: "1",
+    pass: {
+      number: {
+        value: "5261 918732",
+        copy: true,
+      },
+      issuedBy: {
+        value: "Отделом УФМС России по рязанской области",
+      },
+      divisionCode: {
+        value: "426–234",
+      },
+      dateIssue: {
+        value: "02.04.2022",
+      },
+    },
+    snils: {
+      number: {
+        value: "812–183–139 21",
+        copy: true,
+      },
+    },
+    inn: {
+      number: {
+        value: "138291382731",
+        copy: true,
+      },
+    },
+    birthday: {
+      date: {
+        value: "21.04.1999",
+      },
+    },
+    addresses: {
+      registrationPlace: {
+        value:
+          "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
+      },
+      actualPlace: {
+        value:
+          "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
+      },
+    },
+    docs: {
+      info: [
+        {
+          value: "Договор оферты.pdf",
+        },
+        {
+          value: "Договор о долевом строительстве.pdf",
+        },
+        {
+          value: "Какое-то очень очень очень очень длинное название.doc",
+        },
+        {
+          value: "Договор об оплате.doc",
+        },
+        {
+          value: "Коммерческое предложение.xls",
+        },
+        {
+          value: "Таблица заказов.xls",
+        },
+      ],
+    },
+    additional: {
+      info: [
+        {
+          name: "Предпочтения",
+          value: "Разговор на “Вы”\nТолько по делу\nТолько официальный стиль",
+          file: "",
+        },
+        {
+          name: "Доп.документы",
+          value: "",
+          file: "Памятка с вопросами на созвоне.pdf",
+        },
+        {
+          name: "Его должность",
+          value: "Вроде бы важная шишка, пусть будет – Гуру в дизайне",
+          file: "",
+        },
+        {
+          name: "Чтобы не забыть",
+          value: "Не забудь!",
+          file: "",
+        },
+      ],
+    },
+  },
+];
 export function clientsServer() {
   createServer({
     routes() {
       this.get("/api/clients", () => ({
-        dataClients: [
+        dataClients,
-          {
-            id: "1",
-            fullName: "Вильгейльм Арнольд Витальевич",
-            age: "34",
-            jobTitle: "Менеджер",
-            priority: "Высокий",
-            phone: "+7 (915) 657–21–14",
-            email: "Superboyband@yandex.ru",
-            networks: [],
-            meeting: {
-              date: "02.06.22",
-              time: "18:30–19:30",
-            },
-          },
-          {
-            id: "2",
-            fullName: "Астафоркина Екатерина Геннадьевна",
-            age: "54",
-            jobTitle: "Менеджер",
-            priority: "-",
-            phone: "+7 (574) 364–53–36",
-            email: "antimag@gmail.com",
-            networks: [],
-            meeting: {
-              date: "14.07.22",
-              time: "17:30–21:30",
-            },
-          },
-        ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");
+      this.get("/api/detail/:id", (schema, request) => {
+        let id = request.params.id;
+        return clientsDetail.find((el) => el.idClient === id);
+      });
     },
   });
 }

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+  .section-wrapper.flex.flex-col.h-fit(:style="{ minWidth : settings.width + 'px' }" :class="{flexRow:settings.rollFlex}")
+    .section-header.flex.items-center.justify-start.pt-4.pb-3.pl-4(:class="{styleBorder:settings.rollFlex}")
+      span.text-sm.font-semibold {{settings.title}}
+    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.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.options") {{settings.options[key]}}
+        .flex.gap-x-4
+          .icon-files.cursor-pointer(v-if="!!item.file" style="color:red")
+          span.text-sm.text-sm.text-center.w-fit(v-if="!!item.value" :style="{fontWeight:item.copy&&600}") {{item.value}}
+          span.text-sm.text-center(v-if="!!item.file") {{item.file}}
+          .icon-copy.cursor-pointer(v-if="item.copy")
+</template>
+
+<script>
+import { detail } from "@/pages/clients/utils/tableConfig";
+export default {
+  name: "ClientDetailInfoSection",
+  props: {
+    sectionInfo: Object,
+    section: String,
+  },
+  data() {
+    return {
+      settings: detail.find((el) => el.name === this.section),
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.section-wrapper
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+  &.flex-row
+    flex-direction: row
+.section-header
+  border-bottom: 1px solid var(--border-light-grey-color)
+  &.style-border
+    border-bottom: none
+    border-right: 1px solid var(--border-light-grey-color)
+.title-section
+  color: var(--font-grey-color)
+</style>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+  .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
+    client-detail-info-section(:section-info="dataDetail.pass" section="pass")
+    .flex.flex-col.gap-y-2
+      client-detail-info-section(:section-info="dataDetail.snils" section="snils" )
+      client-detail-info-section(:section-info="dataDetail.inn" section="inn" )
+    .flex.flex-col.gap-y-2
+      client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
+      client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
+</template>
+
+<script>
+import ClientDetailInfoSection from "@/pages/clients/components/ClientDetailInfoSection";
+export default {
+  name: "ClientDetailInfoWrapper",
+  components: { ClientDetailInfoSection },
+  props: {
+    dataDetail: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/clients/components/ClientsTable.vue

@@ -79,9 +79,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.row-body
-  min-height: 56px
-  border-bottom: 1px solid var(--border-light-grey-color)
 .wrapper
   background-color: var(--default-white)
 </style>

src/pages/clients/components/ClientsTableHeader.vue

@@ -2,7 +2,7 @@
   .flex.row.text-base.font-semibold
     clients-table-cell-header(v-for="cell in columnHead" :title="cell.title" :width="cell.width" :class="!cell.title && 'px-3'")
       .icon-down-arrow.icon.text-xsm.cursor-pointer(v-if="cell.iconHead && cell.name !== 'fullName'" )
-      img.cursor-pointer(v-if="cell.iconHead && cell.name === 'fullName'" src="@/assets/icons/sort-number.svg" alt="SortNumber")
+      .icon-sort-number.cursor-pointer.text-xs.icon(v-if="cell.iconHead && cell.name === 'fullName'")
       clients-table-checkbox(v-if="cell.name === 'checkbox'" :id="cell.name" :check="check" :is-check="isCheck")
 </template>
 

src/pages/clients/components/ClientsTableRow.vue

@@ -1,18 +1,20 @@
 <template lang="pug">
-  .row-body.flex.w-full.cursor-pointer
+  .row-wrapper.flex.flex-col.w-full
-    .check-box.flex.justify-center.items-center
+    .row-body.flex.w-full.cursor-pointer(@click="openDetailInfo")
-      clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
+      .check-box.flex.justify-center.items-center
-    table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
+        clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
-    table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
+      table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
-    table-cell-body-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
+      table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
-    table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
+      table-cell-body-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
-    table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
+      table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
-    table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
+      table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
-    table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
+      table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
-    table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').width")
+      table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
-    .dots.flex.justify-center.items-center
+      table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').width")
-      .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+      .dots.flex.justify-center.items-center
-        clients-action-popup(v-if="isOpenPopup")
+        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+          clients-action-popup(v-if="isOpenPopup")
+    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail")
 </template>
 
 <script>
@@ -26,6 +28,7 @@ import TableCellBodyAge from "@/pages/clients/components/cells/TableCellBodyAge"
 import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyName";
 import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
+import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientsTableRow",
@@ -40,9 +43,12 @@ export default {
     TableCellBodyEmail,
     TableCellBodyNetworks,
     TableCellBodyMeeting,
+    ClientDetailInfoWrapper,
   },
   data() {
     return {
+      dataDetail: {},
+      isOpenDetailInfo: false,
       isOpenPopup: false,
       columnBody: column,
     };
@@ -61,10 +67,21 @@ export default {
     meetingTime: Object,
   },
   methods: {
+    fetchClientDetail() {
+      // eslint-disable-next-line
+      fetch("/api/detail/1").then((res) => res.json()).then((data) => this.saveClientDetail(data))
+    },
+    saveClientDetail(data) {
+      this.dataDetail = data;
+    },
     openPopup(e) {
       e.target.focus();
       this.isOpenPopup = !this.isOpenPopup;
     },
+    openDetailInfo() {
+      this.isOpenDetailInfo = !this.isOpenDetailInfo;
+      this.isOpenDetailInfo && this.fetchClientDetail();
+    },
     handleUnFocusPopup() {
       this.isOpenPopup = false;
     },
@@ -73,9 +90,11 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.row-wrapper
+  border-bottom: 1px solid #D3D4DC
 .row-body
   color: var(--font-dark-blue-color)
-  border-bottom: 1px solid #D3D4DC
+  min-height: 56px
   &:hover
     background-color: var(--bg-hover-row-table)
 .check-box

src/pages/clients/utils/tableConfig.js

@@ -59,3 +59,60 @@ export const column = [
     width: 53,
   },
 ];
+
+export const detail = [
+  {
+    name: "pass",
+    title: "Паспортные данные",
+    options: {
+      number: "Серия и номер",
+      issuedBy: "Выдан",
+      divisionCode: "Код подразделения",
+      dateIssue: "Дата выдачи",
+    },
+    width: 280,
+  },
+  {
+    name: "snils",
+    title: "СНИЛС",
+    options: {
+      number: "Номер",
+    },
+    width: 180,
+  },
+  {
+    name: "inn",
+    title: "ИНН",
+    options: {
+      number: "Номер",
+    },
+    width: 180,
+  },
+  {
+    name: "birthday",
+    title: "Дата рождения",
+    width: 292,
+    rollFlex: true,
+  },
+  {
+    name: "addresses",
+    title: "Адреса",
+    options: {
+      registrationPlace: "Адрес постоянной регистрации",
+      actualPlace: "Адрес фактического проживания",
+    },
+    width: 292,
+  },
+  {
+    name: "docs",
+    title: "Документы",
+    height: 280,
+    width: 360,
+  },
+  {
+    name: "additional",
+    title: "Дополнительные данные",
+    height: 280,
+    width: 360,
+  },
+];