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-11 18:21:08 +03:00
parent 91fff6cb30
commit 7795496c2f
5 changed files with 108 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
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,16 +40,18 @@
: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(v-if="lackPass || lackAddress")
.flex.flex-col(class="gap-y-1.5")
.flex.flex-col(v-for="(item, key) in sectionInfo" v-if="lackPass || lackAddress" class="gap-y-1.5")
span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
.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"
:width="settings[section].width",
:tokens="customTokens"
)
.copy.icon-copy.cursor-pointer(
v-if="item.copy",
@@ -61,6 +63,32 @@
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"
)
.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")
@@ -70,21 +98,26 @@
@click="(e) => deleteDoc(e)"
)
span.text-sm {{item.title}}
.flex.justify-center.items.center(v-else)
.flex(@click="!lackPass") Добавить данные
.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,
},
@@ -98,6 +131,7 @@ export default {
lackPass: Boolean,
lackAddress: Boolean,
},
directives: { mask },
data() {
return {
@@ -112,6 +146,9 @@ export default {
isOpenChange: false,
isChange: false,
settings: detail,
customTokens: {
Y: { pattern: /[0-9a-zA-Zа-яёА-ЯЁ ]/u },
},
};
},
methods: {
@@ -201,4 +238,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>

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

@@ -4,13 +4,11 @@
:rows="Math.ceil(value.length/heightInput)"
:value="value"
@input="$emit('update:value', $event.target.value)"
)
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() {

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

@@ -264,9 +264,7 @@ export default {
saveAddress(data) {
if (data?.join_adress) {
this.dataAddress = {
join_adress: data?.join_adress
? data?.join_adress
: (this.lackAddress = false),
join_adress: data?.join_adress,
};
} else {
this.lackAddress = false;

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 Создать клиента