Skip to content

Commit

Permalink
Merge pull request #4031 from mikhailprivalov/document-viewer
Browse files Browse the repository at this point in the history
Документооборот - проводник документов фронт v1
  • Loading branch information
urchinpro authored Jul 1, 2024
2 parents e4336a6 + 5231450 commit 9247864
Show file tree
Hide file tree
Showing 5 changed files with 282 additions and 1 deletion.
1 change: 1 addition & 0 deletions context_processors/utils.py
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ def menu(request):
"access": ["Счет: проект, Счет: закрытие"],
},
{"url": "/ui/utils", "title": "Инструменты", "nt": False, "access": ["Инструменты"]},
{"url": "/ui/document-viewer", "title": "Документы", "nt": False, "access": ["Документооборот: просмотр документов"]},
]

hp = SettingManager.get(key="home_page", default="false")
Expand Down
22 changes: 21 additions & 1 deletion l2-frontend/src/fields/RadioFieldById.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<template>
<div class="base">
<div
class="base"
:class="{ 'auto-height': autoHeight }"
>
<a
v-for="v in variants"
:key="v.id"
href="#"
:class="{ active: v.id === val, disabled, rounded }"
:style="`flex: 1 1 ${itemWidth}; height: ${itemHeight}`"
@click.prevent="changeValue(v.id)"
>
<span>
Expand Down Expand Up @@ -36,6 +40,18 @@ export default {
default: false,
type: Boolean,
},
itemWidth: {
required: false,
type: String,
},
itemHeight: {
required: false,
type: String,
},
autoHeight: {
required: false,
type: Boolean,
},
},
data() {
return {
Expand Down Expand Up @@ -92,6 +108,10 @@ export default {
overflow-y: auto;
width: 100%;
&.auto-height {
height: auto;
}
a {
align-self: stretch;
display: flex;
Expand Down
10 changes: 10 additions & 0 deletions l2-frontend/src/mainWithRouter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -760,6 +760,16 @@ const router = new Router({
groups: ['Счет: проект'],
},
},
{
path: '/ui/document-viewer',
name: 'Billing',
component: () => import('@/pages/DocumentManagement/DocumentViewer.vue'),
meta: {
title: 'Документы',
fullPageLayout: true,
groups: ['Документооборот: просмотр документов'],
},
},
{
path: '/ui/construct/related-tube/:id',
name: 'construct-related-tube',
Expand Down
36 changes: 36 additions & 0 deletions l2-frontend/src/pages/DocumentManagement/DocumentViewer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div class="two-col">
<div class="sidebar">
<DocumentsExplorer />
</div>
<div class="viewer">
<h4>Просмотрщик</h4>
</div>
</div>
</template>

<script setup lang="ts">
import DocumentsExplorer from '@/pages/DocumentManagement/DocumentsExplorer.vue';
</script>

<style scoped lang="scss">
.two-col {
display: grid;
grid-template-columns: minmax(200px, 380px) minmax(150px, auto);
height: calc(100vh - 36px);
}
.sidebar {
display: flex;
flex-direction: column;
background-color: #f8f7f7;
border-right: 1px solid #b1b1b1;
.form-control {
border-radius: 0;
padding-left: 10px;
}
}
</style>
214 changes: 214 additions & 0 deletions l2-frontend/src/pages/DocumentManagement/DocumentsExplorer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
<template>
<div>
<div class="flex">
<input
class="form-control"
placeholder="Номер документа"
>
<button class="btn btn-blue-nb nbr">
Найти
</button>
</div>
<div class="flex row-border">
<RadioFieldById
:variants="filterButtons"
item-width="33%"
item-height="25px"
:auto-height="true"
/>
</div>
<div>
<div class="flex">
<span
class="group-button-header"
>
Группы
</span>
</div>
<div class="scroll">
<div
v-for="group in documentGroups"
:key="group.id"
class="flex row-border"
>
<button
class="transparent-button"
:class="{ 'active-button': selectedGroup === group.id}"
@click="selectGroup(group.id)"
>
{{ group.label }}
</button>
</div>
</div>
</div>
<div>
<div class="flex">
<span
class="group-button-header"
>
Виды
</span>
</div>
<div class="scroll">
<div
v-for="type in documentTypes"
:key="type.id"
class="flex row-border"
>
<button
class="transparent-button"
:class="{ 'active-button': selectedType === type.id}"
@click="selectType(type.id)"
>
{{ type.label }}
</button>
</div>
</div>
</div>
<div>
<div class="flex">
<span class="group-button-header">
Документы
</span>
</div>
<div class="scroll-doc">
<div
v-for="document in documents"
:key="document.id"
class="flex row-border"
>
<button
class="transparent-button"
:class="{ 'active-button': selectedDocument === document.id}"
@click="selectDocument(document.id)"
>
{{ document.label }}
</button>
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import {
ref,
} from 'vue';
import RadioFieldById from '@/fields/RadioFieldById.vue';
// import { useStore } from '@/store';
// import * as actions from '@/store/action-types';
// import api from '@/api';
const filterButtons = ref([
{ id: 'my', label: 'Мои' },
{ id: 'wrote', label: 'Отписал' },
{ id: 'onControl', label: 'На контроле' },
{ id: 'toBeAgreed', label: 'На согласовании' },
{ id: 'onSignature', label: 'На подписи' },
]);
const selectedGroup = ref(null);
const documentGroups = ref([
{ id: 1, label: 'Группа доков 1' },
{ id: 2, label: 'Группа доков 2' },
{ id: 3, label: 'Группа доков 3' },
{ id: 4, label: 'Группа доков 4' },
{ id: 5, label: 'Группа доков 5' },
{ id: 6, label: 'Группа доков 6' },
{ id: 7, label: 'Группа доков 7' },
]);
const selectGroup = (groupId: number) => {
selectedGroup.value = groupId;
};
const selectedType = ref(null);
const documentTypes = ref([
{ id: 1, label: 'Тип дока 1' },
{ id: 2, label: 'Тип дока 2' },
{ id: 3, label: 'Тип дока 3' },
{ id: 4, label: 'Тип дока 4' },
{ id: 5, label: 'Тип дока 5' },
{ id: 6, label: 'Тип дока 6' },
{ id: 7, label: 'Тип дока 7' },
]);
const selectType = (typeId: number) => {
selectedType.value = typeId;
};
const selectedDocument = ref(null);
const documents = ref([
{ id: 1, label: 'Документ 1' },
{ id: 2, label: 'Документ 2' },
{ id: 3, label: 'Документ 3' },
{ id: 4, label: 'Документ 4' },
{ id: 5, label: 'Документ 5' },
{ id: 6, label: 'Документ 6' },
{ id: 7, label: 'Документ 7' },
{ id: 8, label: 'Документ 8' },
{ id: 9, label: 'Документ 9' },
{ id: 10, label: 'Документ 10' },
{ id: 11, label: 'Документ 11' },
]);
const selectDocument = (documentId: number) => {
selectedDocument.value = documentId;
};
</script>

<style scoped lang="scss">
.flex {
display: flex;
}
.row-border {
border-bottom: 1px solid #b1b1b1;
}
.row-border:nth-child(1) {
border-top: 1px solid #b1b1b1;
}
.group-button-header {
background-color: #ededed;
flex: 1;
align-self: flex-start;
border: none;
padding: 1px 5px 1px 10px;
text-align: left;
cursor: default;
}
.transparent-button {
background-color: transparent;
align-self: stretch;
color: #434A54;
flex: 1;
border: none;
padding: 1px 5px 1px 10px;
text-align: left;
}
.transparent-button:hover {
background-color: #434a54;
color: #FFFFFF;
border: none;
}
.transparent-button:active {
background-color: #37BC9B;
color: #FFFFFF;
}
.active-button {
background-color: #049372;
color: #FFFFFF;
}
.scroll {
height: 139px;
overflow-y: auto;
}
.scroll-doc {
height: calc(100vh - 465px);
overflow-y: auto;
}
</style>

0 comments on commit 9247864

Please sign in to comment.