[WIP] Добавил отображение файлов в режиие просмотра

This commit is contained in:
megavrilinvv
2023-05-16 16:46:46 +03:00
parent 669db8d4c6
commit b6b835e65a
2 changed files with 37 additions and 15 deletions

View File

@@ -8,21 +8,35 @@
)
.protocol-body.flex.flex-col
.flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
.flex.gap-x-4(:style="{height: list.change || fillInspection ? '300px' : ''}")
.flex.flex-col.gap-y-4(:class="{'changed': list.change || fillInspection}")
.flex.flex-col.gap-y-1(:class="{'open-textarea': list.change || fillInspection}")
.tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
.tag.flex.items-center.px-3.cursor-pointer.font-medium.text-smm(
v-for="tag in list.tags" :key="tag.id"
v-for="tag in list.tags", :key="tag.id"
) {{tag.label}}
.wrap.gap-1.flex.flex-col(v-if="docData.length && !(list.change || fillInspection)")
.title.font-semibold.text-smm Документы
.wrap.flex.gap-x-1.gap-y-1
.photo-field.flex.gap-x-2.items-center.gap-y-3(v-for="item in docData")
q-avatar(size="24px")
img.h-10.w-10.object-cover(
:src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]"
)
.doc-text.font-medium.text-smm {{item.name}}
.wrap.gap-1.flex.flex-col(v-if="scanData.length && !(list.change || fillInspection)")
.title.font-semibold.text-smm Сканы
.wrap.flex.gap-x-1.gap-y-1
.scan-field.flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(v-for="item in scanData")
q-avatar(size="40px", rounded)
img.h-10.w-10.object-cover(:src="item.file")
.flex.flex-col.gap-y-1
.doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
.title.font-medium.text-xsx {{item.size + " Мб"}}
base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
.filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
.flex.gap-x-2
base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
q-icon(
name="app:icon-search",
size="20px",
style="color: var(--font-grey-color)"
)
q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
.button
q-btn(
icon="filter_alt",
@@ -64,7 +78,7 @@
span Загрузите документ
label.label.cursor-pointer(for="upload") с компьютера
span или перетащите его в это поле
.doc.flex(v-if="docData.length")
.wrap.gap-1.flex(v-if="docData.length")
.photo-field.flex.gap-x-2.items-center(v-for="item in docData")
q-avatar(size="24px")
img.h-10.w-10.object-cover(
@@ -88,7 +102,7 @@
span Загрузите скан документа
label.label(for="upload") с компьютера
span или перетащите его в это поле
.doc.flex(v-if="scanData.length")
.wrap.gap-1.flex(v-if="scanData.length")
.scan-field.flex.gap-x-2.items-center.pl-2.pr-4.py-2(v-for="item in scanData")
q-avatar(size="40px", rounded)
img.h-10.w-10.object-cover(:src="item.file")
@@ -194,6 +208,14 @@ export default {
</script>
<style lang="sass" scoped>
#upload :deep(.q-field__native)
cursor: pointer
.changed
height: 300px
column-gap: 16px
flex-direction: row
.protocol-body
background: var(--default-white)
border-radius: 4px
@@ -273,9 +295,9 @@ export default {
cursor: pointer
.text
width: 520px
height: 60px
background: white
width: 548px
height: 62px
cursor: pointer
color: var(--font-grey-color)
.title
@@ -294,9 +316,7 @@ export default {
padding: 4px 8px
width: fit-content
.doc
column-gap: 4px
row-gap: 4px
.wrap
flex-wrap: wrap !important
.scan-field