nothing

resources/js/Pages/Report/Components/ReportFormInput.vue

@@ -2,16 +2,42 @@
 import {NCard, NSkeleton, NSpace, NFlex, NFormItem, NForm, NInputNumber, NStatistic} from "naive-ui";
 import {useReportStore} from "../../../Stores/report.js";
 import {useAuthStore} from "../../../Stores/auth.js";
+import {computed, onMounted, ref, watch} from "vue";
 
 const reportStore = useReportStore()
 const authStore = useAuthStore()
+const formRef = ref()
 
+const rules = computed(() => {
+    const rawRules = {}
+
+    for (const metrika of reportStore.reportInfo.metrikaItems) {
+        const rule = {}
+        rule.required = metrika.is_required
+        rule.trigger = ['input', 'blur']
+        if (metrika.data_type === 'integer') {
+            rule.validator = (rule, value) => {
+                if (!/^\d*$/.test(value)) {
+                    return new Error()
+                }
+                return true
+            }
+        }
+        rawRules[`metrika_item_${metrika.metrika_item_id}`] = rule
+    }
+
+    return rawRules
+})
+
+watch(() => formRef.value, (nv) => {
+    reportStore.reportFormRef = nv
+})
 </script>
 
 <template>
     <div class="grid grid-cols-[1fr_auto] gap-x-3">
-        <NCard v-if="reportStore.reportInfo?.report?.isActiveSendButton">
-            <NForm>
+        <NCard>
+            <NForm ref="formRef" :model="reportStore.reportForm" :disabled="!reportStore.reportInfo?.report?.isActiveSendButton" :rules="rules">
                 <template v-if="reportStore.isLoadReportInfo">
                     <NFlex>
                         <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
@@ -22,9 +48,9 @@ const authStore = useAuthStore()
                 <NFlex v-else justify="space-between" align="center">
                     <NSpace>
                         <template v-for="metrikaItem in reportStore.reportInfo?.metrikaItems">
-                            <NFormItem :label="metrikaItem.name" :show-feedback="false">
+                            <NFormItem :label="metrikaItem.name" :show-feedback="false" :required="metrikaItem.is_required" :path="`metrika_item_${metrikaItem.metrika_item_id}`">
                                 <NInputNumber v-model:value="reportStore.reportForm[`metrika_item_${metrikaItem.metrika_item_id}`]"
-                                              :default-value="metrikaItem.default_value" />
+                                              :default-value="metrikaItem.default_value" min="0" />
                             </NFormItem>
                         </template>
                     </NSpace>
@@ -39,6 +65,19 @@ const authStore = useAuthStore()
                     <NStatistic label="Умерло" :value="reportStore.reportInfo?.department?.deadCount" />
                 </div>
             </NCard>
+            <NCard class="min-w-[120px] max-w-[120px] min-h-[100px] max-h-[102px] h-full"
+                   style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
+                <div class="w-full h-full flex flex items-center justify-center">
+                    <NStatistic :value="reportStore.reportInfo.department.percentDead">
+                        <template #label>
+                            <div class="flex flex-col">
+                                <span>Летальность</span>
+                                <span>%</span>
+                            </div>
+                        </template>
+                    </NStatistic>
+                </div>
+            </NCard>
             <NCard class="min-w-[120px] max-w-[120px] min-h-[100px] max-h-[102px] h-full"
                    style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
                 <div class="w-full h-full flex flex items-center justify-center">