src/i18n/locale/en.yml

@@ -1123,6 +1123,13 @@ item:
         stemMultiplier: Multiplier
         producer: Producer
         landed: Landed
+    create:
+        name: Name
+        tag: Tag
+        priority: Priority
+        type: Type
+        intrastat: Intrastat
+        origin: Origin
 components:
     topbar: {}
     userPanel:

src/i18n/locale/es.yml

@@ -1122,6 +1122,13 @@ item:
         stemMultiplier: Multiplicador
         producer: Productor
         landed: F. entrega
+    create:
+        name: Nombre
+        tag: Etiqueta
+        priority: Prioridad
+        type: Tipo
+        intrastat: Intrastat
+        origin: Origen
 components:
     topbar: {}
     userPanel:

src/pages/Item/Card/ItemBasicData.vue

@@ -0,0 +1 @@
+<template>Item basic data</template>

src/pages/Item/ItemCreate.vue

@@ -1 +1,170 @@
-<template>Item create view</template>
+<script setup>
+import { reactive, ref, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const newItemForm = reactive({});
+
+const originsOptions = ref([]);
+const tagsOptions = ref([]);
+const validPriorities = ref([]);
+const itemTypesOptions = ref([]);
+const intrastatsOptions = ref([]);
+
+const fetchDefaultPriorityTag = async () => {
+    const filter = {
+        fields: ['defaultPriority', 'defaultTag', 'validPriorities'],
+        limit: 1,
+    };
+    const { data } = await axios.get(`ItemConfigs`, { filter });
+    if (!data) return;
+
+    const dataRow = data[0];
+    validPriorities.value = [...dataRow.validPriorities];
+    newItemForm.priority = dataRow.defaultPriority;
+    newItemForm.tag = dataRow.defaultTag;
+};
+
+const redirectToItemBasicData = (_, { id }) => {
+    router.push({ name: 'ItemBasicData', params: { id } });
+};
+
+onBeforeMount(async () => {
+    await fetchDefaultPriorityTag();
+});
+</script>
+
+<template>
+    <FetchData
+        url="Origins"
+        @on-fetch="(data) => (originsOptions = data)"
+        :filter="{ order: 'name' }"
+        auto-load
+    />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (tagsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="ItemTypes"
+        :filter="{
+            fields: ['id', 'code', 'categoryFk', 'name'],
+            include: 'category',
+            order: 'name ASC',
+        }"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['id', 'description'], order: 'description ASC' }"
+        @on-fetch="(data) => (intrastatsOptions = data)"
+        auto-load
+    />
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="Items/new"
+            model="item"
+            :form-initial-data="newItemForm"
+            observe-form-changes
+            @on-data-saved="redirectToItemBasicData"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        v-model="data.provisionalName"
+                        :label="t('item.create.name')"
+                    />
+                    <VnSelectFilter
+                        :label="t('item.create.tag')"
+                        v-model="data.tag"
+                        :options="tagsOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                    <VnSelectFilter
+                        :label="t('item.create.priority')"
+                        v-model="data.priority"
+                        :options="validPriorities"
+                        option-value="priority"
+                        option-label="priority"
+                        hide-selected
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelectFilter
+                        :label="t('item.create.type')"
+                        v-model="data.typeFk"
+                        :options="itemTypesOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #option="scope">
+                            <QItem class="column" v-bind="scope.itemProps">
+                                <QItemLabel class="row">
+                                    <span style="width: 3em">
+                                        {{ scope.opt?.code }}
+                                    </span>
+                                    <span>
+                                        {{ scope.opt?.name }}
+                                    </span>
+                                </QItemLabel>
+                                <QItemLabel v-if="scope.opt?.category" caption>
+                                    {{ scope.opt?.category?.name }}
+                                </QItemLabel>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                    <VnSelectFilter
+                        :label="t('item.create.intrastat')"
+                        v-model="data.intrastatFk"
+                        :options="intrastatsOptions"
+                        option-label="description"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt?.description }}
+                                    </QItemLabel>
+                                    <QItemLabel caption>
+                                        #{{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelectFilter
+                        :label="t('item.create.origin')"
+                        v-model="data.originFk"
+                        :options="originsOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>

src/router/modules/item.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'ItemMain' },
     menus: {
         main: ['ItemList'],
-        card: [],
+        card: ['ItemBasicData'],
     },
     children: [
         {
@@ -72,6 +72,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemTags.vue'),
                 },
+                {
+                    path: 'basic-data',
+                    name: 'ItemBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+                },
             ],
         },
     ],