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

Merge pull request #59 from dderbentsov/UC-19

Browse Source 
WIP добавил области для добавления новых документов
This commit is contained in:
Алексей Дёмин
2022-10-24 23:49:13 +03:00
committed by GitHub
parent 2cfaa30551 5f6a98dfc4
commit 75acc3a032
10 changed files with 215 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,18 +5,22 @@
.flex.items-center.gap-x-8(v-if="isOpenChange")
base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
.edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true")
.flex.relative
base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true" @click="openAddingWrap")
table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
.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[section].options") {{settings[section].options[key]}}
span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="item.value" :width="settings[section].width")
.copy.icon-copy.cursor-pointer(v-if="item.copy")
.flex.gap-x-4(v-if="item.value && !isChange")
.flex(v-if="item.value && !isChange")
span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
.copy.icon-copy.cursor-pointer(v-if="item.copy")
.flex.gap-x-4(v-if="item.name")
.icon-files.cursor-pointer(:style="{color:settings.docsColor[item.type]}")
.copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
.flex.items-center(v-if="item.name")
.icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
.icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
span.text-sm {{item.name}}
</template>
@@ -24,16 +28,34 @@
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
import { detail } from "@/pages/clients/utils/tableConfig";
export default {
name: "ClientDetailInfoSection",
components: { BaseButtonPlus, BaseButtonOk, ClientDetailInput },
components: {
TableAddingNewAdditional,
BaseButtonPlus,
BaseButtonOk,
ClientDetailInput,
TableAddingNewDoc,
},
props: {
saveNewDoc: Function,
sectionInfo: Object,
section: String,
deleteDoc: Function,
},
data() {
return {
additionalData: {
header: "",
value: "",
name: "",
type: "",
},
docData: [],
isOpenAddingWrap: false,
isOpenChange: false,
isChange: false,
settings: detail,
@@ -50,6 +72,32 @@ export default {
this.isOpenChange = false;
this.isChange = false;
},
openAddingWrap() {
this.isOpenAddingWrap = true;
},
addNewDoc(e) {
this.docData = [...this.docData, ...e.target.files];
},
addDocAdditional(e) {
this.additionalData.name = e.target.files[0].name;
this.additionalData.type = e.target.files[0].type;
},
saveDocs() {
if (this.section === "additional") {
this.saveNewDoc(this.section, [this.additionalData]);
} else {
this.saveNewDoc(this.section, this.docData);
}
this.isOpenAddingWrap = false;
this.isOpenChange = false;
this.docData = [];
this.additionalData = {
header: "",
value: "",
name: "",
type: "",
};
},
},
};
</script>
@@ -87,4 +135,8 @@ export default {
color: var(--btn-blue-color)
&:hover
opacity: 0.6
.cancel
color: var(--font-grey-color)
&:hover
opacity: 0.6
</style>

6
src/pages/clients/components/ClientDetailInfoWrapper.vue
View File

@@ -7,8 +7,8 @@
.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")
client-detail-info-section(:section-info="dataDetail.docs" section="docs")
client-detail-info-section(:section-info="dataDetail.additional" section="additional")
client-detail-info-section(:section-info="dataDetail.docs" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
client-detail-info-section(:section-info="dataDetail.additional" section="additional" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
</template>
<script>
@@ -18,6 +18,8 @@ export default {
components: { ClientDetailInfoSection },
props: {
dataDetail: Object,
saveNewDoc: Function,
deleteDoc: Function,
},
};
</script>

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

@@ -13,7 +13,7 @@ export default {
},
computed: {
heightInput() {
return ((this.width / 100) * 70) / 8;
return ((this.width / 100) * 70) / 11;
},
},
};

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

@@ -3,11 +3,12 @@
.flex.gap-2.w-fit.h-fit
.input
base-input(:with-icon="true")
.icon-search
button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
.icon-filter.text-xl.leading-4
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
.flex.w-fit.h-fit.gap-x-2
bass-export-button(:only-icon="true")
base-export-button(:only-icon="true")
base-create-button(@click="openFormCreate" :with-icon="true")
</template>
@@ -15,13 +16,13 @@
<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BassExportButton from "@/components/base/buttons/BassExportButton";
import BaseExportButton from "@/components/base/buttons/BaseExportButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "ClientsTableHat",
components: {
BaseInput,
BassExportButton,
BaseExportButton,
BaseCreateButton,
ClientsTableHeaderActions,
},

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

@@ -14,7 +14,7 @@
.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")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
</template>
<script>
@@ -85,6 +85,21 @@ export default {
handleUnFocusPopup() {
this.isOpenPopup = false;
},
saveNewDoc(section, data) {
this.dataDetail[section] = [...this.dataDetail[section], ...data];
},
deleteDoc(e, section) {
if (section === "additional") {
this.dataDetail[section].forEach((el, index) => {
if (el.name === e.target.id) {
delete this.dataDetail[section][index].name;
}
});
}
this.dataDetail[section] = this.dataDetail[section].filter(
(el) => el.name !== e.target.id
);
},
},
};
</script>

66
src/pages/clients/components/TableAddingNewAdditional.vue Normal file
View File

@@ -0,0 +1,66 @@
<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-1
base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
span.counter {{`${newAdditionalData.header.length}/140`}}
.description.flex.px-4.py-3
textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
.place.flex.flex-col.justify-center.items-center.py-3
.upload.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addNewAdditional(e)" type="file" id="file-upload")
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
base-create-button(text="Добавить" @click="saveAdditional")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "TableAddingNewAdditional",
components: { BaseInput, BaseCreateButton },
props: {
addNewAdditional: Function,
saveAdditional: Function,
newAdditionalData: Object,
},
};
</script>
<style lang="sass" scoped>
.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
.description
min-height: 77px
border-radius: 4px
border: 2px solid var(--border-light-grey-color)
.label
color: var(--btn-blue-color)
.counter
color: var(--font-grey-color)
</style>

57
src/pages/clients/components/TableAddingNewDoc.vue Normal file
View File

@@ -0,0 +1,57 @@
<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-create-button(text="Добавить" @click="saveDocs")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "TableAddingNewDoc",
components: { BaseCreateButton },
props: {
addNewDoc: Function,
saveDocs: Function,
newDocs: Array,
},
};
</script>
<style lang="sass" scoped>
.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>