fix width

src/App.vue

@@ -25,7 +25,7 @@ const createDeal = (newDealReqId) => {
   dialog.open(DealModal, {
     props: {
       header: 'Создание сделки',
-      style: { width: '80vw' },
+      style: { width: '85vw' },
       modal: true
     },
     data: {
@@ -47,7 +47,7 @@ const editDeal = (newDealReqId, dealId) => {
   dialog.open(DealModal, {
     props: {
       header: 'Редактирование сделки',
-      style: { width: '80vw' },
+      style: { width: '85vw' },
       modal: true
     },
     data: {

src/components/deal/DealModal.vue

@@ -128,10 +128,9 @@
 
       <h3>Ответственные сотрудники за сделку</h3>
       <div class="flex w-full flex-wrap">
-        <EmployeeAddModal v-if="showModalDealManager" :employees="employeesList" :selected="selectedEmployees" @close="closeModalDealManager" @select="addEmployee" />
         <EmployeeCard v-for="employee in selectedEmployees" :key="employee.id" :employee="employee" :url="url" @remove="removeEmployee" />
         <div class="sm:w-1/2 md:w-1/3 lg:w-1/4">
-          <button @click="openModalDealManager" class="w-full h-full p-6 rounded flex flex-col items-center justify-center add-employee-button">
+          <button @click="openModalDealManager" class="w-full h-full p-5 rounded flex flex-col items-center justify-center add-employee-button">
             <img src="@/shared/assets/icons/plus-green.svg" alt="Добавить сотрудника">
             <p>Добавить сотрудника</p>
           </button>
@@ -954,21 +953,35 @@ watch(selectedObjectSideTwoId, async (newId) => {
 });
 
 // Логика для управления модальным окном и выбранными сотрудниками
-const showModalDealManager = ref(false);
-
 const selectedEmployees = ref([]);
 
 const openModalDealManager = () => {
-  showModalDealManager.value = true;
-};
+  console.log('[openModalDealManager] Открываем EmployeeAddModal через DynamicDialog')
 
-const closeModalDealManager = () => {
-  showModalDealManager.value = false;
-};
-
-const addEmployee = (employees) => {
-  selectedEmployees.value = employees;
-  closeModalDealManager();
+  dialog.open(EmployeeAddModal, {
+    props: {
+      header: 'Выберите сотрудников',
+      style: { width: '30vw' },
+      modal: true,
+      pt: {
+        header: {
+          style: {
+            padding: '0.75rem 1rem'
+          }
+        }
+      }
+    },
+    data: {
+      employees: employeesList.value,
+      selected: selectedEmployees.value
+    },
+    onClose: (opt) => {
+      console.log('[DynamicDialog] EmployeeAddModal закрыт:', opt?.data)
+      if (opt?.data) {
+        selectedEmployees.value = opt.data;
+      }
+    }
+  })
 };
 
 const removeEmployee = (employeeId) => {

src/components/deal/addEdit/EmployeeAddModal.vue

@@ -1,24 +1,25 @@
 <template>
-  <div class="modal dealAddEmployee">
-    <div class="modal-content">
-      <span class="close" @click="closeModal">&times;</span>
-      <h3 class="mb-4">Выберите сотрудников</h3>
-      <MultiSelect
-          v-model="selectedEmployeeIds"
-          :options="employeesWithFullName"
-          optionLabel="fullName"
-          optionValue="id"
-          placeholder="Выберите сотрудников"
-          class="w-full"
-          display="chip"
-          :maxSelectedLabels="3"
-          :filter="true"
-      >
-        <template #dropdownicon>
-          <DropdownIcon />
-        </template>
-      </MultiSelect>
-      <button @click="handleSelect" class="mt-4 p-2 rounded add-employee-btn">
+  <div class="add-employee-modal">
+    <div class="mb-4">
+      <label class="block text-sm font-medium text-gray-700">Выберите сотрудников</label>
+    </div>
+    <MultiSelect
+        v-model="selectedEmployeeIds"
+        :options="employeesWithFullName"
+        optionLabel="fullName"
+        optionValue="id"
+        placeholder="Выберите сотрудников"
+        class="w-full"
+        display="chip"
+        :maxSelectedLabels="3"
+        :filter="true"
+    >
+      <template #dropdownicon>
+        <DropdownIcon />
+      </template>
+    </MultiSelect>
+    <div class="mt-4 flex justify-center">
+      <button @click="handleSelect" class="p-2 rounded add-employee-btn">
         Выбрать
       </button>
     </div>
@@ -26,84 +27,38 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, watch, computed } from 'vue';
+import { ref, inject, watch, computed } from 'vue';
 import MultiSelect from 'primevue/multiselect';
 import DropdownIcon from "@/shared/assets/icons/dropdown-icon.vue";
 
-const props = defineProps({
-  employees: {
-    type: Array,
-    required: true,
-  },
-  selected: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['close', 'select']);
+const dialogRef = inject('dialogRef');
+const props = dialogRef.value.data;
 
 const selectedEmployeeIds = ref([]);
 
-// Добавляем поле fullName для каждого сотрудника
 const employeesWithFullName = computed(() => {
-  return props.employees.map(employee => ({
+  return (props.employees || []).map(employee => ({
     ...employee,
     fullName: employee.fio || `${employee.first_name} ${employee.last_name}`,
   }));
 });
 
-// Инициализируем selectedEmployeeIds при открытии модального окна
 watch(() => props.selected, (newSelected) => {
   selectedEmployeeIds.value = newSelected.map(employee => employee.id);
 }, { immediate: true });
 
-const closeModal = () => {
-  emit('close');
-};
-
 const handleSelect = () => {
-  // Находим объекты сотрудников по их id
   const selectedEmployeeObjects = selectedEmployeeIds.value
       .map(id => props.employees.find(employee => employee.id === id))
-      .filter(employee => employee !== undefined); // Убираем undefined, если сотрудник не найден
+      .filter(employee => employee !== undefined);
 
-  // Передаем выбранных сотрудников в родительский компонент
-  emit('select', selectedEmployeeObjects);
-  closeModal();
+  dialogRef.value.close(selectedEmployeeObjects);
 };
 </script>
 
 <style>
-.modal.dealAddEmployee {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-
-  .modal-content {
-    position: absolute;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    width: 80%;
-    max-width: 500px;
-    text-align: center;
-  }
-
-  .close {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    font-size: 24px;
-    cursor: pointer;
-  }
+.add-employee-modal {
+  padding: 4px;
 
   .p-multiselect {
     height: auto;
@@ -112,7 +67,11 @@ const handleSelect = () => {
   .add-employee-btn {
     background: #64A853;
     color: #fff;
-    width: 50%;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 10px 32px;
+    font-size: 14px;
   }
 }
-</style>
+</style>