0
0
Fork 0

Se crea submodulo mis documentos en worker

This commit is contained in:
carlosfonseca 2024-03-22 08:30:54 -05:00
parent b3a889e8f6
commit aa2db28eda
9 changed files with 891 additions and 5 deletions

View File

@ -85,6 +85,11 @@ select:-webkit-autofill {
color: $white; color: $white;
} }
.card-width {
max-width: 800px;
width: 100%;
}
.vn-card { .vn-card {
background-color: var(--vn-section-color); background-color: var(--vn-section-color);
color: var(--vn-text-color); color: var(--vn-text-color);

View File

@ -837,6 +837,7 @@ export default {
workerCreate: 'New worker', workerCreate: 'New worker',
department: 'Department', department: 'Department',
pda: 'PDA', pda: 'PDA',
dms: 'My documentation',
}, },
list: { list: {
name: 'Name', name: 'Name',
@ -955,7 +956,7 @@ export default {
roadmap: 'Roadmap', roadmap: 'Roadmap',
summary: 'Summary', summary: 'Summary',
basicData: 'Basic Data', basicData: 'Basic Data',
stops: 'Stops' stops: 'Stops',
}, },
}, },
roadmap: { roadmap: {
@ -963,7 +964,7 @@ export default {
roadmap: 'Roadmap', roadmap: 'Roadmap',
summary: 'Summary', summary: 'Summary',
basicData: 'Basic Data', basicData: 'Basic Data',
stops: 'Stops' stops: 'Stops',
}, },
}, },
route: { route: {

View File

@ -837,6 +837,7 @@ export default {
workerCreate: 'Nuevo trabajador', workerCreate: 'Nuevo trabajador',
department: 'Departamentos', department: 'Departamentos',
pda: 'PDA', pda: 'PDA',
dms: 'Mi documentación',
}, },
list: { list: {
name: 'Nombre', name: 'Nombre',
@ -955,7 +956,7 @@ export default {
roadmap: 'Troncales', roadmap: 'Troncales',
summary: 'Resumen', summary: 'Resumen',
basicData: 'Datos básicos', basicData: 'Datos básicos',
stops: 'Paradas' stops: 'Paradas',
}, },
}, },
roadmap: { roadmap: {
@ -963,7 +964,7 @@ export default {
roadmap: 'Troncales', roadmap: 'Troncales',
summary: 'Resumen', summary: 'Resumen',
basicData: 'Datos básicos', basicData: 'Datos básicos',
stops: 'Paradas' stops: 'Paradas',
}, },
}, },
route: { route: {

View File

@ -0,0 +1,164 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { downloadFile } from 'src/composables/downloadFile';
import { toDateHour } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import WorkerDmsActions from '../components/WorkerDmsActions.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const workerDmsRef = ref(null);
const rows = ref([]);
const filter = { where: { worker: route.params.id }, order: ['dmsFk DESC'], limit: 20 };
const columns = computed(() => [
{
align: 'left',
field: 'dmsFk',
label: t('Id'),
name: 'id',
},
{
align: 'left',
field: 'hardCopyNumber',
label: t('Order'),
name: 'order',
},
{
align: 'left',
field: 'reference',
label: t('Reference'),
name: 'reference',
},
{
align: 'left',
field: 'description',
label: t('Description'),
name: 'description',
},
{
align: 'left',
field: 'hasFile',
label: t('Original'),
name: 'original',
},
{
align: 'left',
field: 'file',
label: t('File'),
name: 'file',
},
{
align: 'left',
field: 'created',
label: t('Created'),
name: 'created',
format: (value) => toDateHour(value),
},
{
align: 'right',
field: 'actions',
label: '',
name: 'actions',
},
]);
watch(
() => route.params.id,
(newValue) => {
filter.where.worker = newValue;
setData();
}
);
const setData = () => {
workerDmsRef.value.fetch();
};
const toWorkerDmsCreate = () => {
router.push({ name: 'WorkerDmsCreate' });
};
</script>
<template>
<FetchData
ref="workerDmsRef"
:filter="filter"
@on-fetch="(data) => (rows = data)"
auto-load
:url="`WorkerDms/${route.params.id}/filter`"
/>
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
:pagination="{ rowsPerPage: 12 }"
:rows="rows"
class="full-width q-mt-md"
row-key="id"
v-if="rows?.length"
>
<template #body-cell-order="{ row }">
<QTd>
<QChip class="chip-color" square>{{ row.hardCopyNumber }}</QChip>
</QTd>
</template>
<template #body-cell-original="{ row }">
<QTd>
<QCheckbox :model-value="row.hasFile === 1" disable />
</QTd>
</template>
<template #body-cell-file="{ row }">
<QTd>
<QBtn @click.stop="downloadFile(row.dmsFk)" color="blue" flat no-caps>
{{ row.file }}
</QBtn>
</QTd>
</template>
<template #body-cell-actions="{ row }">
<QTd>
<WorkerDmsActions :id="row.dmsFk" :promise="setData" />
</QTd>
</template>
</QTable>
<h5 class="flex justify-center color-vn-label" v-else>
{{ t('globals.noResults') }}
</h5>
</QPage>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toWorkerDmsCreate()" color="primary" fab icon="add" />
<QTooltip>
{{ t('Upload file') }}
</QTooltip>
</QPageSticky>
</template>
<style scoped>
.chip-color {
background-color: var(--vn-label);
}
</style>
<i18n>
es:
Id: Id
Order: Orden
Reference: Referencia
Description: Descripción
File: Archivo
Original: Original
Created: Fecha creación
Upload file: Subir fichero
</i18n>

View File

@ -0,0 +1,96 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { downloadFile } from 'src/composables/downloadFile';
import WorkerDmsDelete from 'src/pages/Worker/components/WorkerDmsDelete.vue';
const { t } = useI18n();
const quasar = useQuasar();
const route = useRoute();
const router = useRouter();
const $props = defineProps({
id: {
type: Number,
required: true,
},
promise: {
type: Function,
required: true,
},
});
const setDownloadFile = () => downloadFile($props.id);
const toWorkerDmsEdit = () => {
router.push({
name: 'WorkerDmsEdit',
params: {
id: route.params.id,
dmsId: $props.id,
},
});
};
const showWorkerDmsDeleteDialog = () => {
quasar.dialog({
component: WorkerDmsDelete,
componentProps: {
id: $props.id,
promise: setData,
},
});
};
const setData = () => {
$props.promise();
};
</script>
<template>
<div>
<QIcon
@click.stop="setDownloadFile"
color="primary"
name="cloud_download"
size="sm"
>
<QTooltip>
{{ t('actionFile', { action: t('globals.download') }) }}
</QTooltip>
</QIcon>
<QIcon
@click.stop="toWorkerDmsEdit"
class="q-ml-md"
color="primary"
name="edit"
size="sm"
>
<QTooltip>
{{ t('actionFile', { action: t('globals.edit') }) }}
</QTooltip>
</QIcon>
<QIcon
@click.stop="showWorkerDmsDeleteDialog"
class="q-ml-md"
color="primary"
name="delete"
size="sm"
>
<QTooltip>
{{ t('actionFile', { action: t('globals.remove') }) }}
</QTooltip>
</QIcon>
</div>
</template>
<i18n>
en:
actionFile: '{action} file'
es:
actionFile: '{action} fichero'
</i18n>

View File

@ -0,0 +1,262 @@
<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator';
import useNotify from 'src/composables/useNotify';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { notify } = useNotify();
const { t } = useI18n();
const { validate } = useValidator();
const route = useRoute();
const router = useRouter();
const state = useState();
const user = state.getUser();
const filterFindOne = { where: { code: 'paymentsLaw' } };
const filterCompanies = { order: ['code'] };
const filterWarehouses = { order: ['name'] };
const inputFileRef = ref();
const client = ref({});
const findOne = ref([]);
const allowedContentTypes = ref([]);
const optionsCompanies = ref([]);
const optionsWarehouses = ref([]);
const optionsDmsTypes = ref([]);
const isLoading = ref(false);
const dms = ref({
hasFile: false,
});
onBeforeMount(() => {
const { companyFk, warehouseFk } = user.value;
dms.value.reference = route.params.id;
dms.value.companyId = companyFk;
dms.value.warehouseId = warehouseFk;
});
watch([client, findOne], ([newClient, newFindOne]) => {
dms.value.description = t('clientFileDescription', {
dmsTypeName: newFindOne.name?.toUpperCase(),
clientName: newClient.name?.toUpperCase(),
clientId: newClient.id,
});
dms.value.dmsTypeId = newFindOne.id;
});
const saveData = async () => {
try {
const formData = new FormData();
const files = dms.value.files;
if (files && files.length > 0) {
for (let file of files) {
formData.append(file.name, file);
}
dms.value.hasFileAttached = true;
const url = `Workers/${route.params.id}/uploadFile`;
await axios.post(url, formData, {
params: dms.value,
});
notify('globals.dataSaved', 'positive');
toWorkerDms();
}
} catch (error) {
notify(error.message, 'negative');
}
};
const toWorkerDms = () => {
router.push({ name: 'WorkerDms' });
};
</script>
<template>
<fetch-data
@on-fetch="(data) => (client = data)"
auto-load
:url="`Clients/${route.params.id}/getCard`"
/>
<fetch-data
:filter="filterFindOne"
@on-fetch="(data) => (findOne = data)"
auto-load
url="DmsTypes/findOne"
/>
<fetch-data
@on-fetch="(data) => (allowedContentTypes = data)"
auto-load
url="DmsContainers/allowedContentTypes"
/>
<fetch-data
:filter="filterCompanies"
@on-fetch="(data) => (optionsCompanies = data)"
auto-load
url="Companies"
/>
<fetch-data
:filter="filterWarehouses"
@on-fetch="(data) => (optionsWarehouses = data)"
auto-load
url="Warehouses"
/>
<fetch-data
:filter="filterWarehouses"
@on-fetch="(data) => (optionsDmsTypes = data)"
auto-load
url="DmsTypes"
/>
<Teleport to="#st-actions">
<QBtnGroup push class="q-gutter-x-sm">
<QBtn
:disabled="isLoading"
:label="t('globals.cancel')"
:loading="isLoading"
@click="toWorkerDms"
color="primary"
flat
icon="close"
/>
<QBtn
:disabled="isLoading"
:label="t('globals.save')"
:loading="isLoading"
@click.stop="saveData"
color="primary"
icon="save"
/>
</QBtnGroup>
</Teleport>
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg">
<QCardSection>
<QForm>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
:label="t('Reference')"
clearable
v-model="dms.reference"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('Company')"
:options="optionsCompanies"
:rules="validate('entry.companyFk')"
option-label="code"
option-value="id"
v-model="dms.companyId"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Warehouse')"
:options="optionsWarehouses"
option-label="name"
option-value="id"
v-model="dms.warehouseId"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('Type')"
:options="optionsDmsTypes"
option-label="name"
option-value="id"
v-model="dms.dmsTypeId"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
:label="t('Description')"
:rules="validate('route.description')"
clearable
type="textarea"
v-model="dms.description"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QFile
ref="inputFileRef"
class="required"
:label="t('File')"
v-model="dms.files"
multiple
:accept="allowedContentTypes.join(',')"
clearable
clear-icon="close"
>
<template #append>
<QBtn
icon="vn:attach"
flat
round
padding="xs"
@click="inputFileRef.pickFiles()"
>
<QTooltip>
{{ t('Select a file') }}
</QTooltip>
</QBtn>
<QBtn icon="info" flat round padding="xs">
<QTooltip max-width="30rem">
{{
`${t(
'Allowed content types'
)}: ${allowedContentTypes.join(', ')}`
}}
</QTooltip>
</QBtn>
</template>
</QFile>
</div>
</VnRow>
<QCheckbox
:label="t('Generate identifier for original file')"
v-model="dms.hasFile"
/>
</QForm>
</QCardSection>
</QCard>
</div>
</template>
<i18n>
en:
clientFileDescription: '{dmsTypeName} FROM CLIENT {clientName} ID {clientId}'
es:
Reference: Referencia
Company: Empresa
Warehouse: Almacén
Type: Tipo
Description: Descripción
clientFileDescription: '{dmsTypeName} DEL CLIENTE {clientName} ID {clientId}'
File: Fichero
Select a file: Selecciona un fichero
Allowed content types: Tipos de archivo permitidos
Generate identifier for original file: Generar identificador para archivo original
</i18n>

View File

@ -0,0 +1,82 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useDialogPluginComponent } from 'quasar';
import axios from 'axios';
import useNotify from 'src/composables/useNotify';
const $props = defineProps({
id: {
type: Number,
required: true,
},
promise: {
type: Function,
required: true,
},
});
const { dialogRef } = useDialogPluginComponent();
const { notify } = useNotify();
const { t } = useI18n();
const closeButton = ref(null);
const isLoading = ref(false);
const deleteDms = async () => {
isLoading.value = true;
try {
await axios.post(`WorkerDms/${$props.id}/removeFile`);
if ($props.promise) await $props.promise();
notify('globals.dataDeleted', 'positive');
} catch (error) {
notify(error.message, 'negative');
} finally {
closeButton.value.click();
isLoading.value = false;
}
};
</script>
<template>
<QDialog ref="dialogRef">
<QCard class="q-pa-md q-mb-md">
<span ref="closeButton" class="row justify-end close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<QCardSection>
<div class="mt-1 text-h6">{{ t('This file will be deleted') }}</div>
<div>{{ t('Are you sure you want to continue?') }}</div>
</QCardSection>
<QCardActions class="flex justify-end">
<QBtn
:disabled="isLoading"
:label="t('globals.cancel')"
:loading="isLoading"
class="q-mr-xl"
color="primary"
flat
v-close-popup
/>
<QBtn
:disabled="isLoading"
:label="t('globals.save')"
:loading="isLoading"
@click.stop="deleteDms"
color="primary"
/>
</QCardActions>
</QCard>
</QDialog>
</template>
<i18n>
es:
This file will be deleted: Este fichero va a ser borrado
Are you sure you want to continue?: ¿Seguro que quieres continuar?
</i18n>

View File

@ -0,0 +1,246 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { useValidator } from 'src/composables/useValidator';
import useNotify from 'src/composables/useNotify';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { notify } = useNotify();
const { t } = useI18n();
const { validate } = useValidator();
const route = useRoute();
const router = useRouter();
const filterCompanies = { order: ['code'] };
const filterWarehouses = { order: ['name'] };
const inputFileRef = ref();
const allowedContentTypes = ref([]);
const optionsCompanies = ref([]);
const optionsWarehouses = ref([]);
const optionsDmsTypes = ref([]);
const isLoading = ref(false);
const dms = ref({
hasFile: true,
});
const setCurrentDms = (data) => {
dms.value.reference = data.reference;
dms.value.companyId = data.companyFk;
dms.value.warehouseId = data.warehouseFk;
dms.value.dmsTypeId = data.dmsTypeFk;
dms.value.description = data.description;
dms.value.hasFile = data.hasFile;
};
const saveData = async () => {
try {
const formData = new FormData();
console.log(formData);
const files = dms.value.files;
console.log(files);
dms.value.hasFileAttached = files ? true : false;
const url = `dms/${route.params.dmsId}/updateFile`;
if (files && files.length > 0) {
for (let file of files) {
formData.append(file.name, file);
}
await axios.post(url, formData, {
params: dms.value,
});
notify('globals.dataSaved', 'positive');
} else {
await axios.post(url, dms.value);
}
toWorkerDms();
} catch (error) {
notify(error.message, 'negative');
}
};
const toWorkerDms = () => {
router.push({ name: 'WorkerDms' });
};
</script>
<template>
<fetch-data :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load />
<fetch-data
@on-fetch="(data) => (allowedContentTypes = data)"
auto-load
url="DmsContainers/allowedContentTypes"
/>
<fetch-data
:filter="filterCompanies"
@on-fetch="(data) => (optionsCompanies = data)"
auto-load
url="Companies"
/>
<fetch-data
:filter="filterWarehouses"
@on-fetch="(data) => (optionsWarehouses = data)"
auto-load
url="Warehouses"
/>
<fetch-data
:filter="filterWarehouses"
@on-fetch="(data) => (optionsDmsTypes = data)"
auto-load
url="DmsTypes"
/>
<Teleport to="#st-actions">
<QBtnGroup push class="q-gutter-x-sm">
<QBtn
:disabled="isLoading"
:label="t('globals.cancel')"
:loading="isLoading"
@click="toWorkerDms"
color="primary"
flat
icon="close"
/>
<QBtn
:disabled="isLoading"
:label="t('globals.save')"
:loading="isLoading"
@click.stop="saveData"
color="primary"
icon="save"
/>
</QBtnGroup>
</Teleport>
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg">
<QCardSection>
<QForm>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
:label="t('Reference')"
clearable
v-model="dms.reference"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('Company')"
:options="optionsCompanies"
:rules="validate('entry.companyFk')"
option-label="code"
option-value="id"
v-model="dms.companyId"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Warehouse')"
:options="optionsWarehouses"
option-label="name"
option-value="id"
v-model="dms.warehouseId"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('Type')"
:options="optionsDmsTypes"
option-label="name"
option-value="id"
v-model="dms.dmsTypeId"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
:label="t('Description')"
:rules="validate('route.description')"
clearable
type="textarea"
v-model="dms.description"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QFile
ref="inputFileRef"
class="required"
:label="t('File')"
v-model="dms.files"
multiple
:accept="allowedContentTypes.join(',')"
clearable
clear-icon="close"
>
<template #append>
<QBtn
icon="vn:attach"
flat
round
padding="xs"
@click="inputFileRef.pickFiles()"
>
<QTooltip>
{{ t('Select a file') }}
</QTooltip>
</QBtn>
<QBtn icon="info" flat round padding="xs">
<QTooltip max-width="30rem">
{{
`${t(
'Allowed content types'
)}: ${allowedContentTypes.join(', ')}`
}}
</QTooltip>
</QBtn>
</template>
</QFile>
</div>
</VnRow>
<QCheckbox
:label="t('Generate identifier for original file')"
v-model="dms.hasFile"
disable
/>
</QForm>
</QCardSection>
</QCard>
</div>
</template>
<i18n>
en:
clientFileDescription: '{dmsTypeName} FROM CLIENT {clientName} ID {clientId}'
es:
Reference: Referencia
Company: Empresa
Warehouse: Almacén
Type: Tipo
Description: Descripción
clientFileDescription: '{dmsTypeName} DEL CLIENTE {clientName} ID {clientId}'
File: Fichero
Select a file: Selecciona un fichero
Allowed content types: Tipos de archivo permitidos
Generate identifier for original file: Generar identificador para archivo original
</i18n>

View File

@ -12,7 +12,7 @@ export default {
redirect: { name: 'WorkerMain' }, redirect: { name: 'WorkerMain' },
menus: { menus: {
main: ['WorkerList', 'WorkerDepartment'], main: ['WorkerList', 'WorkerDepartment'],
card: ['WorkerNotificationsManager', 'WorkerPda'], card: ['WorkerNotificationsManager', 'WorkerPda', 'WorkerDms'],
departmentCard: ['BasicData'], departmentCard: ['BasicData'],
}, },
children: [ children: [
@ -85,6 +85,35 @@ export default {
}, },
component: () => import('src/pages/Worker/Card/WorkerPda.vue'), component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
}, },
{
path: 'dms',
name: 'DmsCard',
redirect: { name: 'WorkerDms' },
children: [
{
path: '',
name: 'WorkerDms',
meta: {
title: 'dms',
icon: 'cloud_upload',
},
component: () =>
import('src/pages/Worker/Card/WorkerDms.vue'),
},
{
path: 'create',
name: 'WorkerDmsCreate',
component: () =>
import('src/pages/Worker/components/WorkerDmsCreate.vue'),
},
{
path: ':dmsId/edit',
name: 'WorkerDmsEdit',
component: () =>
import('src/pages/Worker/components/WorkerDmsEdit.vue'),
},
],
},
], ],
}, },
], ],