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

[WIP] Добавил окно создания пакета документов и добавления документов

Browse Source
This commit is contained in:
megavrilinvv
2022-11-23 17:44:47 +03:00
parent 2e0055ec83
commit a01fa94258
8 changed files with 219 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/sass/variables.sass
View File

@@ -44,3 +44,4 @@
--border-light-grey-color-1: rgba(211, 212, 220, 0.5)
--bg-white-color-0: rgba(255, 255, 255, 0.3)
--border-red-color: #ff6565
--btn-grey-color: #e8e8f3

6
src/components/base/BaseModal.vue
View File

@@ -1,10 +1,10 @@
<template lang="pug">
teleport(:to="appContainer", v-if="value")
.base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay")
.base-content(v-click-outside="clickOutside")
.base-content(v-click-outside="clickOutside", :style="styleContent")
.base-header
.header-title.text {{ title }}
.icon-cancel.text-sm(@click="value = false")
.icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
slot
</template>
@@ -15,8 +15,10 @@ export default {
props: {
hideOverlay: Boolean,
styleOverlay: Object,
styleContent: Object,
title: String,
modelValue: Boolean,
showIcon: Boolean,
},
emits: ["update:modelValue"],
methods: {

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

@@ -32,14 +32,22 @@
table-choice-adding-doc(
:add-new-doc="addNewDoc",
:save-docs="saveDocs",
:new-docs="docData"
)
table-adding-new-doc(
v-if="section !== 'docs' && isOpenAddingWrap",
:add-new-doc="addNewDoc",
:save-docs="saveDocs",
:new-docs="docData"
:new-docs="docData",
:change-open-add-doc="changeOpenAddDoc",
:change-open-create-doc="changeOpenCreateDoc",
)
base-modal(
v-model="showModal",
:style-content="{padding: isOpenAddDoc ? '16px' : '28px 32px'}",
:showIcon="isOpenAddDoc"
)
table-adding-new-doc(
v-if="isOpenAddDoc",
:add-new-doc="addNewDoc",
:new-docs="docData",
:close-modal="changeShowModal",
)
table-create-package-doc(v-if="isOpenCreateDoc")
table-adding-new-additional(
v-if="section === 'additional' && isOpenAddingWrap"
:new-additional-data="additionalData",
@@ -100,7 +108,7 @@
.flex.gap-x-2.items-center
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)}`}}
span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
.section-add-doc.flex.justify-center.items-center.cursor-pointer(
v-else,
@click="openAddDoc"
@@ -113,10 +121,12 @@ import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButton from "@/components/base/BaseButton";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
import TableCreatePackageDoc from "@/pages/clients/components/TableCreatePackageDoc";
import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
import TableChoiceAddingDoc from "@/pages/clients/components/TableChoiceAddingDoc";
import BaseInput from "@/components/base/BaseInput";
import BasePopup from "@/components/base/BasePopup";
import BaseModal from "@/components/base/BaseModal";
import { detail } from "@/pages/clients/utils/tableConfig";
import pdfIcon from "@/assets/icons/pdf.svg";
import wordIcon from "@/assets/icons/word.svg";
@@ -124,13 +134,15 @@ import exelIcon from "@/assets/icons/exel.svg";
export default {
name: "ClientDetailInfoSection",
components: {
TableAddingNewAdditional,
BaseButton,
BaseInput,
BasePopup,
BaseModal,
ClientDetailInput,
TableAddingNewDoc,
ClientDetailSectionAddress,
TableAddingNewAdditional,
TableCreatePackageDoc,
TableAddingNewDoc,
TableChoiceAddingDoc,
},
props: {
@@ -172,6 +184,9 @@ export default {
isAddress: true,
isAttachments: true,
iconDictionary: { doc: wordIcon, pdf: pdfIcon, xls: exelIcon },
isOpenAddDoc: false,
isOpenCreateDoc: false,
showModal: false,
};
},
computed: {
@@ -192,6 +207,24 @@ export default {
this.isAttachments = true;
}
},
changeOpenAddDoc() {
this.showModal = true;
this.isOpenAddDoc = true;
this.isOpenAddingWrap = false;
},
changeOpenCreateDoc() {
this.showModal = true;
this.isOpenCreateDoc = true;
this.isOpenAddingWrap = false;
},
clearDocs() {
this.isOpenAddDoc = false;
this.isOpenCreateDoc = false;
},
changeShowModal() {
this.showModal = false;
this.saveDocs();
},
changeDoc() {
this.isChange = false;
if (this.section === "pass") {
@@ -233,7 +266,7 @@ export default {
if (this.section === "additional") {
this.saveNewDoc(this.section, [this.additionalData]);
} else {
this.saveNewDoc(this.section, this.docData);
this.saveNewDoc(this.docData);
}
this.isOpenAddingWrap = false;
this.docData = [];
@@ -264,6 +297,11 @@ export default {
this.isAttachments = newValue;
},
},
showModal: function () {
if (this.showModal === false) {
this.clearDocs();
}
},
},
};
</script>

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

@@ -393,7 +393,7 @@ export default {
this.isOpenPopup = false;
},
saveNewDoc(data) {
this.dataAttachments = [...this.dataDetail, ...data];
this.dataAttachments = [...data];
},
deleteDoc(attachmentId) {
fetchWrapper

43
src/pages/clients/components/TableAddingNewDoc.vue
View File

@@ -1,18 +1,16 @@
<template lang="pug">
.flex.absolute.flex-col.items-end.right-3.top-5
.corner
.wrap.flex.flex-col.p-4.gap-y-4
.flex.flex-col.gap-y-2
.place.flex.flex-col.justify-center.items-center.py-3
.upload.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addNewDoc(e)" type="file" id="file-upload" multiple)
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
.flex.flex-col
span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
base-button(@click="" :size="40")
span.font-semibold Добавить
.wrap.flex.flex-col.gap-y-4
.flex.flex-col.gap-y-2
.place.flex.flex-col.justify-center.items-center.py-8
.w-60.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addNewDoc(e)", type="file", id="file-upload", multiple)
span Загрузите документ
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите его в это поле
.flex.flex-col
span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
base-button(@click="closeModal", :size="40", :style="{width: '124px'}")
span.font-semibold Добавить
</template>
<script>
@@ -22,8 +20,8 @@ export default {
components: { BaseButton },
props: {
addNewDoc: Function,
saveDocs: Function,
newDocs: Array,
closeModal: Function,
},
};
</script>
@@ -32,27 +30,18 @@ export default {
.wrap
width: 485px
height: fit-content
background-color: var(--default-white)
border-radius: 8px 0 8px 8px
box-shadow: var(--default-shadow)
.corner
width: 8px
height: 8px
border-top-left-radius: 100%
background-color: var(--default-white)
z-index: 2
overflow: hidden
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.upload
width: 240px
.name-doc
border-radius: 4px
background-color: var(--border-light-grey-color-1)
width: fit-content
.label
color: var(--btn-blue-color)
</style>

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

@@ -2,10 +2,10 @@
.flex.flex-col.gap-y-3
.button.keep-redaction.flex.items-center.gap-x-2
img(:src="docIcon")
span.text-smm Создать пакет документов
.text-smm(@click="changeOpenAddDoc") Создать пакет документов
.button.keep-redaction.flex.items-center.gap-x-3
img(:src="manyDocIcon")
span.text-smm Добавить документы
.text-smm(@click="changeOpenCreateDoc") Добавить документы
</template>
<script>
@@ -14,6 +14,7 @@ import manyDocIcon from "@/assets/icons/manyDoc.svg";
export default {
name: "TableChoiceAddingDoc",
props: { changeOpenAddDoc: Function, changeOpenCreateDoc: Function },
data() {
return {
docIcon,

144
src/pages/clients/components/TableCreatePackageDoc.vue Normal file
View File

@@ -0,0 +1,144 @@
<template lang="pug">
.wrap.flex.flex-col.gap-y-6
.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")
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
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="Введите название для пакета документов")
span.counter
.flex.gap-x-4
.flex.flex-col.w-full(class="gap-y-1.5")
.counter.font-semibold.text-smm Тип документа
base-select.h-10(placeholder="Выберите тип")
.flex.flex-col(class="gap-y-1.5")
.counter.font-semibold.text-smm Дата подписания
.input-date.flex.h-10.justify-center
base-input-date(:width-input="277")
.flex.flex-col.gap-y-6
span.font-bold Дополнительное
.flex.flex-col.mb-124px(class="gap-y-1.5")
.counter.font-semibold.text-smm Риски
base-select.h-10(placeholder="Выберите риски")
.services.flex.flex-col.gap-y-6(v-else)
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.font-bold Услуги
.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="Поиск")
.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.gap-x-3
input.counter.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
.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")
.flex.p-2(:style="{width: '358px'}") {{service.name}}
.counter {{service.type}}
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 Создать пакет документов
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
export default {
name: "TableCreatePackageDoc",
components: { BaseInput, BaseButton, BaseInputDate, BaseSelect },
data() {
return {
isServices: false,
packageDocs: {
packageName: "",
},
services: [
{ id: 1, name: "Создание сайта", type: "Разработка" },
{
id: 2,
name: "Цифровая реконструкция приложения",
type: "Поддержка",
},
{ id: 3, name: "Маркетинговое ведение", type: "Маркетинг" },
{
id: 4,
name: "Создание дополнительного контента",
type: "Разработка",
},
{ id: 5, name: "Продвижение в соцсетях", type: "ССМ" },
{ id: 6, name: "Продвижение в соцсетях", type: "ССМ" },
{ id: 7, name: "Продвижение в соцсетях", type: "ССМ" },
{ id: 8, name: "Продвижение в соцсетях", type: "ССМ" },
{ id: 9, name: "Продвижение в соцсетях", type: "ССМ" },
{ id: 10, name: "Продвижение в соцсетях", type: "ССМ" },
],
};
},
computed: {
disabledButton() {
return this.packageDocs.packageName ? false : true;
},
},
methods: {
changeServices() {
this.isServices = !this.isServices;
},
},
};
</script>
<style lang="sass" scoped>
.wrap
width: 570px
height: fit-content
min-height: 700px
.services-wrapper
border: 1px solid var(--btn-grey-color)
border-radius: 8px
.list-services
overflow-y: auto
max-height: 280px
.input-date
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.active-button
background: var(--btn-grey-color)
color: var(--font-dark-blue-color)
border-color: var(--btn-grey-color)
.line
width: 78px
border: 1.5px solid var(--btn-grey-color)
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.counter
color: var(--font-grey-color)
</style>