WIP Добавил выбор соцсети и доверенного лица из существующих персон
This commit is contained in:
DwCay
@@ -15,51 +15,71 @@
|
||||
.font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
|
||||
.flex.w-full.h-full.justify-between.gap-4(v-for="field in data.fields")
|
||||
.label-field.font-sm.text-sm.whitespace-nowrap.mt-10px {{`${field.label} :`}}
|
||||
.input-wrapper.items-center.flex.h-10.gap-10px
|
||||
.flex.gap-1(v-if="field.key === 'networks'")
|
||||
.flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
|
||||
.input-wrapper.items-center.h-fit.gap-10px
|
||||
.w-full.flex.gap-x-1.gap-y-2(v-if="field.key === 'networks'" :style="{'flex-wrap': 'wrap !important'}")
|
||||
.flex.rounded-full.cursor-pointer.h-fit.items-center.gap-10px.py-1.pl-1.pr-2(
|
||||
v-for="network in confidant.networks"
|
||||
@click="() => copyLinkNetwork(network.username)"
|
||||
style="background-color: var(--bg-light-grey)"
|
||||
)
|
||||
q-icon.icon(:name="mapNetworks[network.kind].icon" :class="{old: network.id, new: !network.id}")
|
||||
span.text-sm.font-medium {{ mapNetworks[network.kind].title || network.username }}
|
||||
.flex.add-network.w-7.h-7.rounded-full.items-center.justify-center.cursor-pointer(v-if="isEdit")
|
||||
q-icon.w-3.h-3(name="app:plus")
|
||||
//- .flex.gap-10px(v-else :key="key+index")
|
||||
//- base-select-networks(
|
||||
//- :list-data="Object.values(mapNetworks)"
|
||||
//- :option-data="data.kind"
|
||||
//- :choose-option="(e) => chooseNetwork(e, index)"
|
||||
//- :style-border="true"
|
||||
//- :size-input="50"
|
||||
//- )
|
||||
//- base-input.w-full(
|
||||
//- v-model="data.username"
|
||||
//- type="text"
|
||||
//- no-error-icon
|
||||
//- :name="key"
|
||||
//- :rule="configData[key].rules"
|
||||
//- :standout="!isEdit"
|
||||
//- :outlined="isEdit"
|
||||
//- text-color="black"
|
||||
//- )
|
||||
|
||||
base-input.w-full(
|
||||
v-else
|
||||
:readonly="!isEdit"
|
||||
v-model="confidant[field.key]"
|
||||
@update:model-value="checkChangeInput"
|
||||
:mask="field.mask"
|
||||
:type="field.type"
|
||||
:name="field.key"
|
||||
:placeholder="field.placeholder"
|
||||
:standout="!isEdit"
|
||||
:outlined="isEdit"
|
||||
no-error-icon
|
||||
:rule="field.rules"
|
||||
text-color="black"
|
||||
)
|
||||
span.text-smm.font-medium {{ mapNetworks[network.kind].title || network.username }}
|
||||
.flex.relative
|
||||
q-btn(
|
||||
v-if="isEdit"
|
||||
icon="add",
|
||||
size="17px",
|
||||
class="add-network"
|
||||
@click.stop
|
||||
round,
|
||||
dense,
|
||||
no-caps,
|
||||
padding="3px"
|
||||
)
|
||||
q-menu(v-model="isOpenPopupAdding", anchor="bottom left", self="top right")
|
||||
.menu-wrapper.flex.flex-col.gap-y-3.p-4
|
||||
base-adding-network(
|
||||
:items="Object.values(mapNetworks)",
|
||||
:network="newNetwork",
|
||||
)
|
||||
.w-fit
|
||||
q-btn(
|
||||
color="primary",
|
||||
label="Добавить",
|
||||
no-caps,
|
||||
@click="saveNetwork",
|
||||
padding="8px 24px"
|
||||
)
|
||||
.flex.w-full.relative(v-else)
|
||||
q-menu.h-fit(
|
||||
v-if="field.key === 'last_name'"
|
||||
fit
|
||||
v-model="isOpenListConfidant"
|
||||
:style="{'max-height': '160px'}"
|
||||
no-focus
|
||||
anchor="bottom right"
|
||||
self="top right"
|
||||
)
|
||||
.flex.flex-col.w-full.h-full.overflow-y-auto
|
||||
.confidant-item.flex.h-10.items-center.cursor-pointer.text-base.px-2(
|
||||
v-for="person in listPersons"
|
||||
:id="person.id"
|
||||
@click="(e) => choiceConfidant(e)"
|
||||
) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}
|
||||
base-input.w-full(
|
||||
:readonly="!isEdit"
|
||||
v-model="confidant[field.key]"
|
||||
@update:model-value="(val) => checkChangeInput(val, field.key)"
|
||||
:mask="field.mask"
|
||||
:type="field.type"
|
||||
:name="field.key"
|
||||
:placeholder="field.placeholder"
|
||||
:standout="!isEdit"
|
||||
:outlined="isEdit"
|
||||
no-error-icon
|
||||
:rule="field.rules"
|
||||
text-color="black"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -67,6 +87,9 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
|
||||
import BaseInput from "@/components/base/BaseInput.vue";
|
||||
import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
|
||||
import BaseButton from "@/components/base/BaseButton.vue";
|
||||
import BasePopup from "@/components/base/BasePopup.vue";
|
||||
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork.vue";
|
||||
import BaseSelect from "@/components/base/BaseSelect.vue";
|
||||
import { checkChangeData } from "@/shared/utils/changesObjects";
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import {
|
||||
@@ -76,12 +99,26 @@ import {
|
||||
|
||||
export default {
|
||||
name: "ConfidantForm",
|
||||
components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks, BaseButton },
|
||||
components: {
|
||||
MedicalFormWrapper,
|
||||
BaseInput,
|
||||
BaseSelectNetworks,
|
||||
BaseSelect,
|
||||
BaseButton,
|
||||
BasePopup,
|
||||
BaseAddingNetwork,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newNetwork: {
|
||||
kind: mapNetworks["TELEGRAM"],
|
||||
username: "",
|
||||
},
|
||||
isEdit: false,
|
||||
isLoadingData: false,
|
||||
isCheckChange: false,
|
||||
isOpenPopupAdding: false,
|
||||
isOpenListConfidant: false,
|
||||
configData: confidantConfig,
|
||||
mapNetworks: mapNetworks,
|
||||
};
|
||||
@@ -95,11 +132,41 @@ export default {
|
||||
initConfidant: "getConfidantData",
|
||||
}),
|
||||
...mapState({
|
||||
listPersons: (state) => state.medical.personFiltredList,
|
||||
confidants: (state) => state.medical.confidantData,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
checkChangeInput() {
|
||||
choiceConfidant(e) {
|
||||
const newConfidant = this.listPersons.find(
|
||||
(el) => el.id === e.currentTarget.id
|
||||
);
|
||||
this.confidants[this.index] = { ...newConfidant, note: "" };
|
||||
this.isOpenListConfidant = false;
|
||||
},
|
||||
saveNetwork() {
|
||||
this.confidants[this.index].networks.push({
|
||||
kind: this.newNetwork.kind.id,
|
||||
username: this.newNetwork.username,
|
||||
});
|
||||
this.isOpenPopupAdding = false;
|
||||
},
|
||||
checkChangeInput(val, key) {
|
||||
if (key === "last_name" && val.length > 0) {
|
||||
localStorage.setItem("searchConfidant", val);
|
||||
this.$store.dispatch("getPersonsFiltredList").then(() => {
|
||||
if (key === "last_name" && val.length > 1) {
|
||||
localStorage.setItem("searchConfidant", val);
|
||||
this.$store.dispatch("getPersonsFiltredList").then(() => {
|
||||
if (this.listPersons.length > 0) {
|
||||
this.isOpenListConfidant = true;
|
||||
} else {
|
||||
this.isOpenListConfidant = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.isCheckChange = checkChangeData(this.initConfidant, this.confidant);
|
||||
},
|
||||
saveChange() {
|
||||
@@ -135,6 +202,9 @@ export default {
|
||||
color: var(--font-grey-color)
|
||||
.input-wrapper
|
||||
width: 302px
|
||||
.confidant-item
|
||||
&:hover
|
||||
background-color: var(--bg-light-grey)
|
||||
.add-network
|
||||
color: var(--font-dark-blue-color)
|
||||
background-color: var(--bg-light-grey)
|
||||
|
||||
@@ -135,37 +135,44 @@ export const errorMap = {
|
||||
|
||||
export const mapNetworks = {
|
||||
VK: {
|
||||
id: "VK",
|
||||
title: "VK",
|
||||
icon: "app:icon-vk",
|
||||
network: "VK",
|
||||
},
|
||||
TELEGRAM: {
|
||||
id: "TELEGRAM",
|
||||
title: "Telegram",
|
||||
icon: "app:icon-tg",
|
||||
network: "TELEGRAM",
|
||||
},
|
||||
GMAIL: {
|
||||
id: "GMAIL",
|
||||
title: "Gmail",
|
||||
icon: "app:icon-google",
|
||||
network: "GMAIL",
|
||||
},
|
||||
SLACK: {
|
||||
id: "SLACK",
|
||||
title: "Slack",
|
||||
icon: "app:icon-slack",
|
||||
network: "SLACK",
|
||||
markerLink: "slack",
|
||||
},
|
||||
DISCORD: {
|
||||
id: "DISCORD",
|
||||
title: "Discord",
|
||||
icon: "app:icon-discord",
|
||||
network: "DISCORD",
|
||||
},
|
||||
VIBER: {
|
||||
id: "VIBER",
|
||||
title: "Viber",
|
||||
icon: "wifi_calling_3",
|
||||
network: "VIBER",
|
||||
},
|
||||
WHATS_APP: {
|
||||
id: "WHATS_APP",
|
||||
title: "WhatsApp",
|
||||
icon: "call",
|
||||
network: "WHATS_APP",
|
||||
@@ -218,14 +225,14 @@ export const confidantConfig = [
|
||||
{
|
||||
dataLabel: "Общая информация",
|
||||
fields: [
|
||||
{
|
||||
key: "first_name",
|
||||
label: "Имя",
|
||||
},
|
||||
{
|
||||
key: "last_name",
|
||||
label: "Фамилия",
|
||||
},
|
||||
{
|
||||
key: "first_name",
|
||||
label: "Имя",
|
||||
},
|
||||
{
|
||||
key: "patronymic",
|
||||
label: "Отчество",
|
||||
|
||||
Reference in New Issue
Block a user