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

Merge pull request #125 from dderbentsov/UC-56

Browse Source 
Добавил состояние отсутствующих данных, дополнительную форму адресов, исправил стили
This commit is contained in:
frontgavrilin
2022-11-11 18:45:15 +03:00
committed by GitHub
parent 7e619306e0 926ef96ab6
commit c873dbcb3a
6 changed files with 173 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
)
.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}}
.flex.items-center.gap-x-8
.flex.items-center.gap-x-8(v-if="lackPass || lackAddress")
base-button(
v-if="isChange",
@click="saveChange",
@@ -40,49 +40,83 @@
: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="section!=='docs' && isChange",
:style="{fontWeight:key === 'numba'&&600}",
v-model:value="sectionInfo[key]",
:width="settings[section].width"
:sharp="settings[section].sharps[key]"
)
.copy.icon-copy.cursor-pointer(
v-if="item.copy",
@click="() => copyValue(item)"
.section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(v-if="lackPass || lackAddress")
.flex.flex-col(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="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"
)
.flex(v-if="settings[section].options && !isChange")
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(
v-if="item.copy",
@click="() => copyValue(item)"
)
.flex(v-if="settings[section].options && !isChange")
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)"
)
.separation.flex.items-center.justify-center.relative.mt-10px.mb(
v-if="section === 'addresses' && isChange",
class="gap-y-1.5"
)
.flex(v-if="item.name && !isChange")
span.text-sm.w-fit {{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)"
)
span.text-sm {{item.title}}
.line.absolute
.text-separation.span.text-sm.separator.px-2 или
.flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Город
base-select(placeholder="Выберите город")
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Область
base-input.input-info(placeholder="Введите область")
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Улица
base-input.input-info(placeholder="Введите улицу")
.flex.gap-x-4
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Дом
base-input.input-info(placeholder="Дом")
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Квартира
base-input.input-info(placeholder="Квартира")
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Индекс
base-input.input-info(v-mask="'######'", placeholder="000000")
.flex(v-if="item.name && !isChange")
span.text-sm.w-fit {{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)"
)
span.text-sm {{item.title}}
.section-add-doc.flex.justify-center.items-center.cursor-pointer(v-else)
span Добавить данные
</template>
<script>
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
import { detail } from "@/pages/clients/utils/tableConfig";
import { mask } from "vue-the-mask";
export default {
name: "ClientDetailInfoSection",
components: {
TableAddingNewAdditional,
BaseButton,
BaseInput,
BaseSelect,
ClientDetailInput,
TableAddingNewDoc,
},
@@ -93,7 +127,10 @@ export default {
deleteDoc: Function,
updateDocument: Function,
updateAddress: Function,
lackPass: Boolean,
lackAddress: Boolean,
},
directives: { mask },
data() {
return {
@@ -108,6 +145,9 @@ export default {
isOpenChange: false,
isChange: false,
settings: detail,
customTokens: {
Y: { pattern: /[0-9a-zA-Zа-яёА-ЯЁ ]/u },
},
};
},
methods: {
@@ -197,4 +237,23 @@ export default {
color: var(--font-grey-color)
&:hover
opacity: 0.6
.section-add-doc
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
background: white
.input-info
color: var(--font-dark-blue-color)
.text-info
color: var(--font-grey-color)
</style>

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

@@ -4,12 +4,14 @@
v-model:section-info="dataDocument"
section="pass"
:update-document="updateDocument"
:lack-pass="lackPass"
)
.flex.flex-col
client-detail-info-section(
:section-info="dataAddress"
section="addresses"
:update-address="updateAddress"
:lack-address="lackAddress"
)
.flex.flex-col
client-detail-info-section(
@@ -34,6 +36,8 @@ export default {
dataDocument: Object,
updateDocument: Function,
updateAddress: Function,
lackPass: Boolean,
lackAddress: Boolean,
},
};
</script>

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

@@ -1,16 +1,14 @@
<template lang="pug">
.input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
input.place-input.w-full.outline-0.text-sm.not-italic.resize-none(
textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none(
:rows="Math.ceil(value.length/heightInput)"
:value="value"
@input="$emit('update:value', $event.target.value)"
v-mask="sharp"
)
slot
</template>
<script>
import { mask } from "vue-the-mask";
export default {
name: "ClientDetailInput",
props: {
@@ -18,7 +16,6 @@ export default {
width: Number,
sharp: String,
},
directives: { mask },
computed: {
heightInput() {

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

@@ -24,6 +24,8 @@
:delete-doc="deleteDoc"
:update-document="postUpdateIdentityDocument"
:update-address="postUpdateAddress"
:lack-pass="lackPass"
:lack-address="lackAddress"
)
</template>
@@ -73,6 +75,8 @@ export default {
dataClient: {},
docId: "",
addressId: "",
lackPass: true,
lackAddress: true,
};
},
props: {
@@ -215,17 +219,32 @@ export default {
this.saveAddress(data.address[0]);
this.saveAttachments([...data.attachments]);
},
addDoc() {
this.lackPass = false;
},
saveIdentityDocument(data) {
this.dataIdentityDocument = {
numba:
data?.series && data?.numba
? data?.series + " " + data?.numba || ""
if (
data?.series ||
data?.numba ||
data?.issued_by_org ||
data?.issued_by_org_code ||
data?.issued_by_date
) {
this.dataIdentityDocument = {
numba:
data.series && data.numba ? data?.series + " " + data?.numba : "",
issued_by_org: data.issued_by_org ? data?.issued_by_org : "",
issued_by_org_code: data.issued_by_org_code
? data?.issued_by_org_code
: "",
issued_by_org: data?.issued_by_org || "",
issued_by_org_code: data?.issued_by_org_code || "",
issued_by_date:
data?.issued_by_date.split("-").reverse().join(".") || "",
};
issued_by_date: data.issued_by_date
? data?.issued_by_date.split("-").reverse().join(".")
: "",
};
} else {
this.lackPass = false;
}
this.docId = data?.id;
},
postUpdateIdentityDocument() {
@@ -243,9 +262,14 @@ export default {
.then(() => this.fetchClientDetail(this.id));
},
saveAddress(data) {
this.dataAddress = {
join_adress: data?.join_adress || "",
};
if (data?.join_adress) {
this.dataAddress = {
join_adress: data?.join_adress,
};
} else {
this.lackAddress = false;
}
this.addressId = data?.id;
},
postUpdateAddress() {

19
src/pages/clients/components/FormCreateAddresses.vue
View File

@@ -3,29 +3,32 @@
.flex.flex-col.gap-y-6.px-4
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm.font-semibold Полный адрес
base-input.input-info(v-model:value="addresses.full_address" placeholder="Введите адрес целиком")
base-input.input-info(
v-model:value="addresses.full_address",
placeholder="Введите адрес целиком"
)
.flex.items-center.justify-center.relative
.line.absolute
span.text-sm.separator.px-2 или
.grid.grid-cols-2.gap-y-6.gap-x-4
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Город
base-input.input-info(v-model:value="addresses.city" placeholder="Ввыберите город")
base-input.input-info(placeholder="Выберите город")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Область
base-input.input-info(v-model:value="addresses.region" placeholder="Введите область")
base-input.input-info(placeholder="Введите область")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Улица
base-input.input-info(v-model:value="addresses.street" placeholder="Введите улицу")
base-input.input-info(placeholder="Введите улицу")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Дом
base-input.input-info(v-model:value="addresses.house_number" placeholder="Номер дома")
base-input.input-info(placeholder="Номер дома")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Квартира
base-input.input-info(v-model:value="addresses.apartment_number" placeholder="Номер квартиры")
base-input.input-info(placeholder="Номер квартиры")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Индекс
base-input.input-info(v-model:value="addresses.zip_code" placeholder="000000")
base-input.input-info(placeholder="000000", v-mask="'######'")
.px-4
base-button(@click="saveClient" :size="40")
span.font-semibold Создать клиента
@@ -34,6 +37,7 @@
<script>
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import { mask } from "vue-the-mask";
export default {
name: "FormCreateAddresses",
components: { BaseInput, BaseButton },
@@ -42,6 +46,7 @@ export default {
saveClient: Function,
saveFile: Function,
},
directives: { mask },
};
</script>

38
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -3,21 +3,47 @@
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4
.flex.flex-col(class="gap-y-1.5")
span.text-sm Приоритет
base-select(:items="priorityList", placeholder="Приоритет клиента", v-model="basicInfo.priority")
base-select(
:items="priorityList",
placeholder="Приоритет клиента",
v-model="basicInfo.priority"
)
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата рождения
base-input.input-info(v-model:value="basicInfo.birth_date" type="date" placeholder="00.00.0000" :width-input="277")
base-input.input-info(
v-model:value="basicInfo.birth_date",
type="date",
placeholder="00.00.0000",
:width-input="277"
)
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер телефона
base-input.input-info(v-model:value="phone.username" placeholder="+7 (915) 644–92–23" :width-input="277")
base-input.input-info(
v-model:value="phone.username",
placeholder="+7 (915) 644–92–23",
:width-input="277"
)
.flex.flex-col(class="gap-y-1.5")
span.text-sm Email
base-input.input-info(v-model:value="email.username" placeholder="user@yandex.ru" :width-input="277")
base-input.input-info(
v-model:value="email.username",
placeholder="user@yandex.ru",
:width-input="277"
)
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
span.text-sm Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
base-adding-network(:list-adding-networks="networks.settings" :selected-option="network.icon" :value="network" :choose-network="chooseOption" :save-network-id="saveNetworkId")
span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
base-adding-network(
:list-adding-networks="networks.settings",
:selected-option="network.icon",
:value="network",
:choose-network="chooseOption",
:save-network-id="saveNetworkId"
)
span.add-network.cursor-pointer(
v-show="networks.settings.length !== basicInfo.contacts.length",
@click="addNetwork"
) Добавить соцсеть
.px-4
base-button(@click="saveClient" :size="40")
span.font-semibold Создать клиента