237 lines
8.4 KiB
Vue
237 lines
8.4 KiB
Vue
<template>
|
||
<pn-page-card>
|
||
<template #title>
|
||
<div class="flex items-center justify-between col-grow">
|
||
<div>
|
||
{{ $t('meeting_add__title') }}
|
||
</div>
|
||
<q-btn
|
||
@click = "createMeeting()"
|
||
flat round
|
||
icon="mdi-check"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<pn-scroll-list>
|
||
<div class="flex column items-center q-ma-lg">
|
||
<div class="q-gutter-y-lg w100">
|
||
<q-input
|
||
v-model.trim="task.name"
|
||
dense
|
||
filled
|
||
autogrow
|
||
:label = "$t('task_add__name')"
|
||
class="bold-input w100"
|
||
/>
|
||
|
||
<q-input
|
||
v-model.trim="task.description"
|
||
dense
|
||
filled
|
||
autogrow
|
||
class = "w100"
|
||
:label = "$t('task_add__description')"
|
||
/>
|
||
|
||
<q-file
|
||
v-model="task.files"
|
||
:label="$t('task_add__attach_files')"
|
||
outlined
|
||
use-chips
|
||
multiple
|
||
dense
|
||
class="file-input-fix"
|
||
>
|
||
<template #append>
|
||
<q-icon name="attach_file"/>
|
||
</template>
|
||
</q-file>
|
||
|
||
<q-select
|
||
v-if="companies"
|
||
v-model="task.company"
|
||
:options="companies"
|
||
dense
|
||
filled
|
||
class="w100"
|
||
:label = "$t('task_add__assigned_to')"
|
||
>
|
||
<template #prepend>
|
||
<q-icon name="mdi-account-arrow-left-outline"/>
|
||
</template>
|
||
<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 #selected>
|
||
{{ JSON.parse(JSON.stringify(task.company)).name }}
|
||
</template>
|
||
</q-select>
|
||
|
||
<q-select
|
||
v-if="companies"
|
||
v-model="task.company"
|
||
:options="companies"
|
||
dense
|
||
filled
|
||
class="w100"
|
||
:label = "$t('task_add__watch')"
|
||
>
|
||
<template #prepend>
|
||
<q-icon name="mdi-account-eye-outline"/>
|
||
</template>
|
||
<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 #selected>
|
||
{{ JSON.parse(JSON.stringify(task.company)).name }}
|
||
</template>
|
||
</q-select>
|
||
|
||
<q-input filled v-model="task.date" dense :label="$t('task_add__plan_date')">
|
||
<template #prepend>
|
||
<q-icon name="event" class="cursor-pointer">
|
||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||
<q-date v-model="task.date" mask="YYYY-MM-DD HH:mm">
|
||
<div class="row items-center justify-end">
|
||
<q-btn v-close-popup label="Close" color="primary" flat></q-btn>
|
||
</div>
|
||
</q-date>
|
||
</q-popup-proxy>
|
||
</q-icon>
|
||
</template>
|
||
|
||
<template #append>
|
||
<q-icon name="access_time" class="cursor-pointer">
|
||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||
<q-time v-model="task.date" mask="YYYY-MM-DD HH:mm" format24h>
|
||
<div class="row items-center justify-end">
|
||
<q-btn v-close-popup label="Close" color="primary" flat></q-btn>
|
||
</div>
|
||
</q-time>
|
||
</q-popup-proxy>
|
||
</q-icon>
|
||
</template>
|
||
</q-input>
|
||
|
||
<div class="flex column">
|
||
|
||
<q-item-label header class="q-py-none q-my-none">
|
||
{{$t('task_add__priority')}}
|
||
</q-item-label>
|
||
|
||
<q-btn-toggle
|
||
v-model="task.priority"
|
||
no-caps
|
||
toggle-color="primary"
|
||
spread
|
||
unelevated
|
||
:options="priority"
|
||
class="q-mt-sm w100"
|
||
>
|
||
<template v-for="item in priority" :key="item.id" #[item.slot]>
|
||
<div class="row items-center no-wrap gap-xs text-weight-regular">
|
||
<span>
|
||
{{ $t(item.translationKey) }}
|
||
</span>
|
||
<pn-task-priority-icon :priority="item.value"/>
|
||
</div>
|
||
</template>
|
||
</q-btn-toggle>
|
||
|
||
</div>
|
||
|
||
<q-select
|
||
v-if="companies"
|
||
v-model="task.company"
|
||
:options="companies"
|
||
dense
|
||
filled
|
||
class="w100"
|
||
:label = "$t('meeting_add__attached_chat')"
|
||
>
|
||
<template #prepend>
|
||
<q-icon name="mdi-chat-outline"/>
|
||
</template>
|
||
<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 #selected>
|
||
{{ JSON.parse(JSON.stringify(task.company)).name }}
|
||
</template>
|
||
</q-select>
|
||
</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 task = ref({id: "p1", name: 'Кирюшкин Андрей', description: 'fdsfdsfsdfs', company: '', priority: 1, department: 'test', files: [], date: new Date(Date.now()).toLocaleString() })
|
||
const priority = [
|
||
{ id: 1, slot: 's1', label: '', translationKey: 'task_add__priority_normal', value: 0 },
|
||
{ id: 2, slot: 's2', label: '', translationKey: 'task_add__priority_important', value: 1 },
|
||
{ id: 3, slot: 's3', label: '', translationKey: 'task_add__priority_critical', value: 2 }
|
||
]
|
||
|
||
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 createMeeting () {
|
||
await router.push({ name: 'meetings' })
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bold-input::v-deep .q-field__native {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.file-input-fix :deep(.q-field__append) {
|
||
height: auto !important;
|
||
}
|
||
</style>
|