0
0
Fork 0

Se implementan las correcciones a los comentarios

This commit is contained in:
carlosfonseca 2024-03-25 16:00:47 -05:00
parent aa2db28eda
commit 627d3bbe85
5 changed files with 103 additions and 520 deletions

View File

@ -1,22 +1,27 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { useQuasar } from 'quasar';
import { downloadFile } from 'src/composables/downloadFile';
import { toDateHour } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import WorkerDmsCreate from '../components/WorkerDmsCreate.vue';
import WorkerDmsActions from '../components/WorkerDmsActions.vue';
const { t } = useI18n();
const quasar = useQuasar();
const route = useRoute();
const router = useRouter();
const workerDmsRef = ref(null);
const findOne = ref([]);
const rows = ref([]);
const workerDmsRef = ref(null);
const filter = { where: { worker: route.params.id }, order: ['dmsFk DESC'], limit: 20 };
const filterFindOne = { where: { code: 'hhrrData' } };
const columns = computed(() => [
{
@ -82,8 +87,15 @@ const setData = () => {
workerDmsRef.value.fetch();
};
const toWorkerDmsCreate = () => {
router.push({ name: 'WorkerDmsCreate' });
const showWorkerDmsCreate = () => {
quasar.dialog({
component: WorkerDmsCreate,
componentProps: {
id: Number(route.params.id),
defaultDmsCode: findOne.value.code,
promise: setData,
},
});
};
</script>
@ -95,6 +107,12 @@ const toWorkerDmsCreate = () => {
auto-load
:url="`WorkerDms/${route.params.id}/filter`"
/>
<fetch-data
:filter="filterFindOne"
@on-fetch="(data) => (findOne = data)"
auto-load
url="DmsTypes/findOne"
/>
<QPage class="column items-center q-pa-md">
<QTable
@ -107,7 +125,9 @@ const toWorkerDmsCreate = () => {
>
<template #body-cell-order="{ row }">
<QTd>
<QChip class="chip-color" square>{{ row.hardCopyNumber }}</QChip>
<QChip class="chip-color" square v-if="row.hardCopyNumber">{{
row.hardCopyNumber
}}</QChip>
</QTd>
</template>
@ -138,7 +158,7 @@ const toWorkerDmsCreate = () => {
</QPage>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toWorkerDmsCreate()" color="primary" fab icon="add" />
<QBtn @click.stop="showWorkerDmsCreate" color="primary" fab icon="add" />
<QTooltip>
{{ t('Upload file') }}
</QTooltip>
@ -147,7 +167,7 @@ const toWorkerDmsCreate = () => {
<style scoped>
.chip-color {
background-color: var(--vn-label);
background-color: var(--vn-label-color);
}
</style>

View File

@ -1,17 +1,15 @@
<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';
import WorkerDmsEdit from './WorkerDmsEdit.vue';
const { t } = useI18n();
const quasar = useQuasar();
const route = useRoute();
const router = useRouter();
const $props = defineProps({
id: {
@ -26,12 +24,12 @@ const $props = defineProps({
const setDownloadFile = () => downloadFile($props.id);
const toWorkerDmsEdit = () => {
router.push({
name: 'WorkerDmsEdit',
params: {
id: route.params.id,
const showWorkerDmsEdit = () => {
quasar.dialog({
component: WorkerDmsEdit,
componentProps: {
dmsId: $props.id,
promise: setData,
},
});
};
@ -64,7 +62,7 @@ const setData = () => {
</QTooltip>
</QIcon>
<QIcon
@click.stop="toWorkerDmsEdit"
@click.stop="showWorkerDmsEdit"
class="q-ml-md"
color="primary"
name="edit"

View File

@ -1,262 +1,37 @@
<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useDialogPluginComponent } from 'quasar';
import axios from 'axios';
import VnDms from 'src/components/common/VnDms.vue';
import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator';
import useNotify from 'src/composables/useNotify';
const { dialogRef } = useDialogPluginComponent();
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,
const $props = defineProps({
id: {
type: Number,
required: true,
},
defaultDmsCode: {
type: String,
required: true,
},
promise: {
type: Function,
required: true,
},
});
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' });
const onDataSaved = async () => {
if ($props.promise) await $props.promise();
};
</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>
<QDialog ref="dialogRef">
<VnDms
:default-dms-code="$props.defaultDmsCode"
:url="`Workers/${$props.id}/uploadFile`"
@on-data-saved="onDataSaved"
model="WorkerDmsCreate"
/>
</QDialog>
</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

@ -1,246 +1,56 @@
<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 { useDialogPluginComponent } from 'quasar';
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';
import VnDms from 'src/components/common/VnDms.vue';
const { notify } = useNotify();
const { t } = useI18n();
const { validate } = useValidator();
const route = useRoute();
const router = useRouter();
const { dialogRef } = useDialogPluginComponent();
const filterCompanies = { order: ['code'] };
const filterWarehouses = { order: ['name'] };
const $props = defineProps({
dmsId: {
type: Number,
required: true,
},
defaultDmsCode: {
type: String,
required: false,
},
promise: {
type: Function,
required: true,
},
});
const inputFileRef = ref();
const allowedContentTypes = ref([]);
const optionsCompanies = ref([]);
const optionsWarehouses = ref([]);
const optionsDmsTypes = ref([]);
const isLoading = ref(false);
const dms = ref({
const initialData = ref({
hasFile: true,
id: $props.dmsId,
});
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;
initialData.value.reference = data.reference;
initialData.value.companyFk = data.companyFk;
initialData.value.warehouseFk = data.warehouseFk;
initialData.value.dmsTypeFk = data.dmsTypeFk;
initialData.value.description = data.description;
initialData.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' });
const onDataSaved = async () => {
if ($props.promise) await $props.promise();
};
</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"
/>
<fetch-data :url="`Dms/${$props.dmsId}`" @on-fetch="setCurrentDms" auto-load />
<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>
<QDialog ref="dialogRef">
<VnDms
:default-initialData-code="$props.defaultDmsCode"
@on-data-saved="onDataSaved"
model="WorkerDmsEdit"
:form-initial-data="initialData"
/>
</QDialog>
</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

@ -86,33 +86,13 @@ export default {
component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
},
{
name: 'WorkerDms',
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'),
},
],
meta: {
title: 'dms',
icon: 'cloud_upload',
},
component: () => import('src/pages/Worker/Card/WorkerDms.vue'),
},
],
},