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

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
-    .check-box.flex.justify-center.items-center
-      clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
-    table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
-    table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
-    table-cell-body-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
-    table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
-    table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
-    table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
-    table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
-    table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').width")
-    .dots.flex.justify-center.items-center
-      .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")
+  .row-wrapper.flex.flex-col.w-full
+    .row-body.flex.w-full.cursor-pointer(@click="openDetailInfo")
+      .check-box.flex.justify-center.items-center
+        clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
+      table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
+      table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
+      table-cell-body-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
+      table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
+      table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
+      table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
+      table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
+      table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').width")
+      .dots.flex.justify-center.items-center
+        .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