113 lines
4.1 KiB
Vue
113 lines
4.1 KiB
Vue
<template>
|
||
<pn-page-card>
|
||
<template #title>
|
||
<div class="flex items-center justify-between col-grow">
|
||
<div>
|
||
{{ $t('person_card__title') }}
|
||
</div>
|
||
<q-btn
|
||
@click = "goProject()"
|
||
flat round
|
||
icon="mdi-check"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<pn-scroll-list>
|
||
<div class="flex column">
|
||
<div class="flex column items-center col-grow q-pa-lg">
|
||
<q-avatar size="100px">
|
||
<q-img :src="person.logo"/>
|
||
</q-avatar>
|
||
<div class="flex row items-start justify-center no-wrap">
|
||
|
||
<div class="flex column justify-center">
|
||
<div class="text-bold q-pr-xs text-center">{{ person.tname }}</div>
|
||
<div caption class="text-blue text-caption">{{ person.tusername }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<q-input
|
||
v-model="person.name"
|
||
dense
|
||
filled
|
||
class = "q-my-sm w100"
|
||
:label = "$t('person_card__name')"
|
||
/>
|
||
|
||
<q-select
|
||
v-if="companies"
|
||
v-model="person.company"
|
||
:options="companies"
|
||
dense
|
||
filled
|
||
class="q-my-sm w100"
|
||
:label = "$t('person_card__company')"
|
||
>
|
||
<template #option="scope">
|
||
<q-item v-bind="scope.itemProps">
|
||
<q-item-section avatar>
|
||
<q-avatar rounded size="md">
|
||
<img v-if="scope.opt.logo" :src="scope.opt.logo"/>
|
||
<pn-auto-avatar v-else :name="scope.opt.name"/>
|
||
</q-avatar>
|
||
</q-item-section>
|
||
<q-item-section>
|
||
<q-item-label>{{ scope.opt.name }}</q-item-label>
|
||
</q-item-section>
|
||
</q-item>
|
||
</template>
|
||
<template v-slot:selected>
|
||
{{ JSON.parse(JSON.stringify(person.company)).name }}
|
||
</template>
|
||
</q-select>
|
||
|
||
<q-input
|
||
v-model="person.department"
|
||
dense
|
||
filled
|
||
class = "q-my-sm w100"
|
||
:label = "$t('person_card__department')"
|
||
/>
|
||
|
||
<q-input
|
||
v-model="person.role"
|
||
dense
|
||
filled
|
||
class = "q-my-sm w100"
|
||
:label = "$t('person_card__role')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</pn-scroll-list>
|
||
</pn-page-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
|
||
const person = ref({id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: '', department: 'test' })
|
||
|
||
const companies = ref([
|
||
{id: "com11", value: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
|
||
{id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
|
||
{id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией', qtyPersons: 5, masked: false, unmasked: [] },
|
||
{id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то', qtyPersons: 5, masked: false, unmasked: [] },
|
||
{id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
|
||
{id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
|
||
{id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией', qtyPersons: 5, masked: false, unmasked: [] },
|
||
])
|
||
|
||
|
||
async function goProject () {
|
||
|
||
await router.push({ name: 'project' })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
</style>
|