diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue index 019d1d3..3869702 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue @@ -14,25 +14,22 @@ .tag.flex.items-center.px-3.cursor-pointer.font-medium.text-smm( 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 Документы + base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...") + .wrap.gap-1.flex.flex-col(v-if="(scanData.length || docData.length) && !(list.change || fillInspection)", v-for="file in list.files") + .title.font-semibold.text-smm {{file.name}} .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") + .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3( + v-for="item in file.data" + :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}" + ) + q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="checkedName(file.name)") img.h-10.w-10.object-cover( - :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]" + :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file" ) - .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(v-if="checkedName(file.name)") {{item.name}} + .flex.flex-col.gap-y-1(v-else) .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) @@ -61,52 +58,34 @@ ) .name.flex.items-center.font-medium.text-smm {{ name?.label }} .protocol-data.flex.gap-x-20(v-if="list.change || fillInspection") - .flex.flex-col.gap-y-3 - .title.text-smm.font-semibold Документы + .flex.flex-col.gap-y-3(v-for="file in list.files") + .title.text-smm.font-semibold {{file.name}} .download.flex.relative base-input( - @change="addNewDoc", + @update:model-value="(e) => addNewFiles(e, file.name)", doc, :width="548", type="file", id="upload", - accept=".xlsx, .xls, .doc, .docx, .pdf, .odt", + :accept="checkedName(file.name) ? '.xlsx, .xls, .doc, .docx, .pdf, .odt' : 'image/*'", borderless, multiple ) .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm - span Загрузите документ + span {{checkedName(file.name) ? 'Загрузите документ' : 'Загрузите скан документа'}} label.label.cursor-pointer(for="upload") с компьютера span или перетащите его в это поле - .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( - :src="iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)]" - ) - .doc-text.font-medium.text-smm {{item.name}} - .flex.flex-col.gap-y-3 - .title.text-smm.font-semibold Сканы - .download.flex.relative.cursor-pointer - base-input( - @change="addNewScan" - doc, - :width="548", - type="file", - id="upload", - accept="image/*", - borderless, - multiple + .wrap.gap-1.flex(v-if="file?.data?.length") + .flex.gap-x-2.items-center( + v-for="item in file.data", + :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}" ) - .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm - span Загрузите скан документа - label.label(for="upload") с компьютера - span или перетащите его в это поле - .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") - .flex.flex-col.gap-y-1 + q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="checkedName(file.name)") + img.h-10.w-10.object-cover( + :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file" + ) + .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}} + .flex.flex-col.gap-y-1(v-else) .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}} .title.font-medium.text-xsx {{item.size + " Мб"}} @@ -151,6 +130,10 @@ export default { { id: 7, label: "Удаление зуба" }, { id: 2, label: "Жжение языка" }, ], + files: [ + { name: "Документы", data: null }, + { name: "Сканы", data: null }, + ], }, selected: [], docData: [], @@ -165,7 +148,14 @@ export default { }, }; }, + methods: { + checkedName(e) { + return e === "Документы" ? true : false; + }, + addNewFiles(e, name) { + return name === "Документы" ? this.addNewDoc(e) : this.addNewScan(e); + }, textSorting(arr) { let srt = []; this.abc.forEach((letter) => { @@ -187,11 +177,12 @@ export default { closeCard() { this.list.change = false; }, - addNewDoc(e) { - this.docData = [...this.docData, ...e.target.files]; + addNewDoc(arr) { + this.docData = [...this.docData, ...arr]; + this.list.files.find((e) => e.name === "Документы").data = this.docData; }, - addNewScan(e) { - [...e.target.files].forEach((file) => { + addNewScan(arr) { + [...arr].forEach((file) => { const reader = new FileReader(); reader.onload = (e) => { this.scanData.push({ @@ -202,6 +193,7 @@ export default { }; reader.readAsDataURL(file); }); + this.list.files.find((e) => e.name === "Сканы").data = this.scanData; }, }, }; @@ -324,4 +316,5 @@ export default { background: var(--bg-light-grey) border-radius: 4px width: fit-content + padding: 8px 16px 8px 8px