Merge pull request #115 from dderbentsov/UC-53

Изменила поведение Таблицы клиентов
This commit is contained in:
Daria Golova
2022-11-09 14:10:07 +03:00
committed by GitHub
3 changed files with 66 additions and 19 deletions

View File

@@ -1,29 +1,73 @@
<template lang="pug"> <template lang="pug">
.section-wrapper.flex.flex-col.h-fit.cursor-pointer(@dblclick="openInterfaceChange" :class="{click:isOpenChange}" :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}") .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'}"
)
.section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}") .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}} span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
.flex.items-center.gap-x-8(v-if="isOpenChange") .flex.items-center.gap-x-8
base-button(v-if="isChange" @click="saveChange" :confirm="true" :rounded="true" :outlined="true" :size="20") base-button(
v-if="isChange",
@click="saveChange",
confirm,
rounded,
outlined,
:size="20"
)
.icon-ok.text-xsm(class="pt-[3px]") .icon-ok.text-xsm(class="pt-[3px]")
.edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData") .edit.icon-edit.cursor-pointer.text-sm(
v-if="!isChange",
@click="changeClientData"
)
.flex.relative .flex.relative
base-button(v-if="settings[section].addFile" @click="openAddingWrap" :rounded="true" :outlined="true" :added="true" :size="24") base-button(
v-if="settings[section].addFile",
@click="openAddingWrap",
:rounded="true",
:outlined="true",
:added="true",
:size="24"
)
.icon-plus(class="pt-[2px]") .icon-plus(class="pt-[2px]")
table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData") table-adding-new-doc(
table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" ) 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 .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") .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="settings[section].options") {{settings[section].options[key]}}
span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}} 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="section!=='docs' && isChange" :style="{fontWeight:key === 'numba'&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width") client-detail-input.text-sm.text-sm.w-max-fit(
.copy.icon-copy.cursor-pointer(v-if="item.copy" @click="() => copyValue(item)") v-if="section!=='docs' && isChange",
:style="{fontWeight:key === 'numba'&&600}",
v-model:value="sectionInfo[key]",
:width="settings[section].width"
)
.copy.icon-copy.cursor-pointer(
v-if="item.copy",
@click="() => copyValue(item)"
)
.flex(v-if="settings[section].options && !isChange") .flex(v-if="settings[section].options && !isChange")
span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}} span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
.copy.icon-copy.cursor-pointer.pl-4(v-if="key === 'numba'" @click="() => copyValue(item)") .copy.icon-copy.cursor-pointer.pl-4(
v-if="key === 'numba'",
@click="() => copyValue(item)"
)
.flex(v-if="item.name && !isChange") .flex(v-if="item.name && !isChange")
span.text-sm.w-fit {{item.title}} span.text-sm.w-fit {{item.title}}
.flex.items-center(v-if="item.title") .flex.items-center(v-if="item.title")
.icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.id" @click="(e) => deleteDoc(e)") .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
v-if="isChange",
:id="item.id",
@click="(e) => deleteDoc(e)"
)
span.text-sm {{item.title}} span.text-sm {{item.title}}
</template> </template>
@@ -66,18 +110,19 @@ export default {
copyValue(text) { copyValue(text) {
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text);
}, },
openInterfaceChange() {
this.isOpenChange = !this.isOpenChange;
},
changeClientData() { changeClientData() {
if (!this.isOpenAddingWrap) {
this.isChange = true; this.isChange = true;
}
}, },
saveChange() { saveChange() {
this.isOpenChange = false; this.isOpenChange = false;
this.isChange = false; this.isChange = false;
}, },
openAddingWrap() { openAddingWrap() {
this.isOpenAddingWrap = true; if (!this.isChange) {
this.isOpenAddingWrap = !this.isOpenAddingWrap;
}
}, },
addNewDoc(e) { addNewDoc(e) {
this.docData = [...this.docData, ...e.target.files]; this.docData = [...this.docData, ...e.target.files];

View File

@@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
.row-wrapper.flex.flex-col.w-full .row-wrapper.flex.flex-col.w-full
.row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(e) => openDetailInfo(e)") .row-body.flex.w-full.cursor-pointer(:id="id" @click="(e) => openDetailInfo(e)")
.check-box.flex.justify-center.items-center .check-box.flex.justify-center.items-center
clients-table-checkbox(:id="id" :check="check" :is-check="isCheck") clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
table-cell-body-name(:value="dataClient" :avatar="dataClient.avatar" :avatar-color="dataClient.color" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'fullName').width") table-cell-body-name(:value="dataClient" :avatar="dataClient.avatar" :avatar-color="dataClient.color" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'fullName').width")
@@ -178,7 +178,8 @@ export default {
.find((el) => el.name === "priority") .find((el) => el.name === "priority")
["settings"].find((el) => el.text === e.target.id).priority; ["settings"].find((el) => el.text === e.target.id).priority;
}, },
closeChangeData() { closeChangeData(e) {
e.stopPropagation();
this.isOpenChange = false; this.isOpenChange = false;
this.postUpdateClient(); this.postUpdateClient();
this.postContactsClient(); this.postContactsClient();
@@ -229,6 +230,7 @@ export default {
this.dataAttachments = [...this.dataDetail, ...data]; this.dataAttachments = [...this.dataDetail, ...data];
}, },
deleteDoc(e) { deleteDoc(e) {
e.stopPropagation();
this.dataAttachments = this.dataAttachments.filter( this.dataAttachments = this.dataAttachments.filter(
(el) => el.id !== e.target.id (el) => el.id !== e.target.id
); );

View File

@@ -11,7 +11,7 @@
span или перетащите их сюда span или перетащите их сюда
.flex.flex-col .flex.flex-col
span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}} span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
base-button(@click="saveDocs" :size="40") base-button(@click="" :size="40")
span.font-semibold Добавить span.font-semibold Добавить
</template> </template>