weborsha/deal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix width

Browse Source
This commit is contained in:
Vladimir 2026-06-18 16:34:18 +03:00
parent 4ed5a5d32f
commit ab63462c7d
3 changed files with 63 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

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

39
src/components/deal/DealModal.vue
View File

@ -128,10 +128,9 @@
<h3>Ответственные сотрудники за сделку</h3> <h3>Ответственные сотрудники за сделку</h3>
<div class="flex w-full flex-wrap"> <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" /> <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"> <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="Добавить сотрудника"> <img src="@/shared/assets/icons/plus-green.svg" alt="Добавить сотрудника">
<p>Добавить сотрудника</p> <p>Добавить сотрудника</p>
</button> </button>
@ -954,21 +953,35 @@ watch(selectedObjectSideTwoId, async (newId) => {
}); });
// Логика для управления модальным окном и выбранными сотрудниками // Логика для управления модальным окном и выбранными сотрудниками
const showModalDealManager = ref(false);
const selectedEmployees = ref([]); const selectedEmployees = ref([]);
const openModalDealManager = () => { const openModalDealManager = () => {
showModalDealManager.value = true; console.log('[openModalDealManager] Открываем EmployeeAddModal через DynamicDialog')
};
const closeModalDealManager = () => { dialog.open(EmployeeAddModal, {
showModalDealManager.value = false; props: {
}; header: 'Выберите сотрудников',
style: { width: '30vw' },
const addEmployee = (employees) => { modal: true,
selectedEmployees.value = employees; pt: {
closeModalDealManager(); 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) => { const removeEmployee = (employeeId) => {

111
src/components/deal/addEdit/EmployeeAddModal.vue
View File

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