admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил возможность добавления документов, поправил стили окна создания документов

Browse Source
This commit is contained in:
megavrilinvv
2022-11-24 14:24:13 +03:00
parent d2ae4ab2ac
commit bb4f56f54e
5 changed files with 118 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/clients/components/ClientDetailInfoSection.vue
View File

@@ -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', background: changeBackground}"
: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}}
@@ -47,7 +47,7 @@
:new-docs="docData",
:close-modal="changeShowModal",
)
table-create-package-doc(v-if="isOpenCreateDoc")
table-create-package-doc(v-if="isOpenPackage")
table-adding-new-additional(
v-if="section === 'additional' && isOpenAddingWrap"
:new-additional-data="additionalData",
@@ -109,11 +109,10 @@
img(:src="iconDictionary[item?.document?.substr(item.document.lastIndexOf('.') + 1)]")
span.text-sm {{item.title}}
span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
.section-add-doc.flex.justify-center.items-center.cursor-pointer(
.section-add.flex.justify-center.items-center.cursor-pointer(
v-else,
@click="openAddDoc"
)
span Добавить данные
) Добавить данные
</template>
<script>
@@ -183,9 +182,15 @@ export default {
isData: true,
isAddress: true,
isAttachments: true,
iconDictionary: { doc: wordIcon, pdf: pdfIcon, xls: exelIcon },
iconDictionary: {
doc: wordIcon,
docx: wordIcon,
odt: wordIcon,
pdf: pdfIcon,
xls: exelIcon,
},
isOpenPackage: false,
isOpenAddDoc: false,
isOpenCreateDoc: false,
showModal: false,
};
},
@@ -205,21 +210,23 @@ export default {
this.isAddress = true;
} else if (this.section === "docs") {
this.isAttachments = true;
this.showModal = true;
this.isOpenAddDoc = true;
}
},
changeOpenAddDoc() {
this.showModal = true;
this.isOpenAddDoc = true;
this.isOpenPackage = true;
this.isOpenAddingWrap = false;
},
changeOpenCreateDoc() {
this.showModal = true;
this.isOpenCreateDoc = true;
this.isOpenAddDoc = true;
this.isOpenAddingWrap = false;
},
clearDocs() {
this.isOpenPackage = false;
this.isOpenAddDoc = false;
this.isOpenCreateDoc = false;
},
changeShowModal() {
this.showModal = false;
@@ -313,18 +320,23 @@ export default {
color: var(--font-dark-blue-color)
&.click
background-color: var(--light-grey-bg-color)
.section-header
min-height: 44px
border-bottom: 1px solid var(--border-light-grey-color)
.small
border-bottom: none
border-right: 1px solid var(--border-light-grey-color)
min-width: 180px
.title-section
color: var(--font-grey-color)
.copy
color: var(--btn-blue-color)
opacity: 0.6
.section-body
overflow-y: auto
&::-webkit-scrollbar
@@ -335,25 +347,31 @@ export default {
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.edit
color: var(--btn-blue-color)
&:hover
opacity: 0.6
.cancel
color: var(--font-grey-color)
&:hover
opacity: 0.6
.section-add-doc
.section-add
height: 100%
min-height: 64px
color: var(--btn-blue-color)
.line
width: 100%
height: 1px
background-color: var(--border-light-grey-color)
z-index: 0
.separation
width: 100%
.text-separation
width: 38px
z-index: 1

10
src/pages/clients/components/ClientsTableRow.vue
View File

@@ -394,6 +394,16 @@ export default {
},
saveNewDoc(data) {
this.dataAttachments = [...data];
const formData = new FormData();
this.dataAttachments.forEach((e) => {
formData.append("person_id", this.id);
formData.append("document", e);
formData.append("title", e.name.substr(0, e.name.lastIndexOf(".")));
fetchWrapper
.post("general/attachment/create/", formData, "formData")
.then(() => this.fetchClientDetail(this.id));
});
this.dataAttachments = [];
},
deleteDoc(attachmentId) {
fetchWrapper

7
src/pages/clients/components/TableChoiceAddingDoc.vue
View File

@@ -1,6 +1,8 @@
<template lang="pug">
.flex.flex-col.gap-y-3
.button.keep-redaction.flex.items-center.gap-x-2
.button.flex.items-center.gap-x-2(
:style="{color: 'var(--font-dark-blue-color)'}"
)
img(:src="docIcon")
.text-smm(@click="changeOpenAddDoc") Создать пакет документов
.button.keep-redaction.flex.items-center.gap-x-3
@@ -25,9 +27,6 @@ export default {
</script>
<style lang="sass" scoped>
.keep-redaction
color: var(--font-dark-blue-color)
.button
&:hover
opacity: 0.7

57
src/pages/clients/components/TableCreatePackageDoc.vue
View File

@@ -3,19 +3,22 @@
.flex.flex.flex-col.gap-y-9
span.font-bold.text-xl Создание пакета документов
.flex.justify-center.items-center.gap-x-2
base-button(:size="32", :rounded="true")
base-button.button(:size="32", :rounded="true")
span(v-if="!isServices") 1
.icon-ok.text-xs(v-else)
span(:style="{color: 'var(--btn-blue-color)'}") Основное
.line.flex.mx-2
base-button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
.base.flex.flex-col.gap-y-6(v-if="!isServices")
.flex.flex-col.gap-y-6
span.font-bold Основное
.flex.flex-col(class="gap-y-1.5")
.counter.font-semibold.text-smm Название пакета
base-input(v-model:value="packageDocs.packageName", placeholder="Введите название для пакета документов")
base-input(
v-model:value="packageDocs.packageName",
placeholder="Введите название для пакета документов"
)
span.counter
.flex.gap-x-4
.flex.flex-col.w-full(class="gap-y-1.5")
@@ -37,21 +40,41 @@
.counter.text-smm Выберите подходищие из списка
.services-wrapper.flex.flex-col.pt-4.px-4
.flex.gap-x-2
base-input(:with-icon="true", icon-position="left", :width-input="310", placeholder="Поиск")
base-input(
:with-icon="true",
icon-position="left",
:width-input="310",
placeholder="Поиск"
)
.counter.icon-search
base-select.h-10(placeholder="Вид услуги")
.flex.items-center.px-11px.py-9px(:style="{borderBottom: '1px solid var(--btn-grey-color)'}")
.flex.items-center.px-11px.py-9px(
:style="{borderBottom: '1px solid var(--btn-grey-color)'}"
)
.flex.items-center.gap-x-3
input.counter.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
input.counter.w-4.h-4.checkbox.cursor-pointer(
type="checkbox",
@click="selectAll",
v-model="isAllServices"
)
.counter.flex.p-2(:style="{width: '358px'}") Название услуги
.counter Вид услуги
.list-services.flex.flex-col.px-11px.py-9px
.flex.items-center(v-for="service in services", :key="service.id")
.flex.items-center.gap-x-3
input.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
input.w-4.h-4.checkbox.cursor-pointer(
type="checkbox",
v-model="userIds",
:value="service.id"
)
.flex.p-2(:style="{width: '358px'}") {{service.name}}
.counter {{service.type}}
base-button.custom-button(v-if="!isServices", :disabled="disabledButton", :size="40", @click="changeServices")
base-button.custom-button(
v-if="!isServices",
:disabled="disabledButton",
:size="40",
@click="changeServices"
)
span.font-semibold Далее
base-button.custom-button(:size="40", v-else)
span.font-semibold Создать пакет документов
@@ -71,6 +94,8 @@ export default {
packageDocs: {
packageName: "",
},
isAllServices: false,
userIds: [],
services: [
{ id: 1, name: "Создание сайта", type: "Разработка" },
{
@@ -102,6 +127,12 @@ export default {
changeServices() {
this.isServices = !this.isServices;
},
selectAll() {
this.userIds = [];
if (!this.isAllServices) {
this.services.forEach((el) => this.userIds.push(el.id));
}
},
},
};
</script>
@@ -110,7 +141,7 @@ export default {
.wrap
width: 570px
height: fit-content
min-height: 700px
min-height: 640px
.services-wrapper
border: 1px solid var(--btn-grey-color)
@@ -124,10 +155,18 @@ export default {
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.button
&:hover
background-color: var(--btn-blue-color)
border: none
.active-button
background: var(--btn-grey-color)
color: var(--font-dark-blue-color)
border-color: var(--btn-grey-color)
&:hover
background-color: var(--btn-grey-color)
border: none
.line
width: 78px