物资信息管理 表单校验调整

src/views/comprehensiveGuarantee/MaterialReserveManagement/MaterialInformationDetails.vue

@@ -81,7 +81,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="分类名称：" prop="category_name">
-                <el-input v-model="form.category_name" disabled class="custom-disabled" />
+                <el-select v-model="form.category_name" disabled class="custom-disabled">
+                  <el-option v-for="(item, index) in material_type" :key="index" :label="item.label" :value="item.value" />
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -92,7 +94,7 @@
             <el-col :span="12">
               <el-form-item label="物资类型：" prop="material_type_id">
                 <el-select v-model="form.material_type_id" disabled class="custom-disabled">
-                  <el-option v-for="(item, index) in materialTypeList" :key="index" :label="item.material_category_name" :value="item.id" />
+                  <el-option v-for="(item, index) in material_type" :key="index" :label="item.label" :value="item.value" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -251,7 +253,7 @@ const props = defineProps({
   id: String
 });
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { disaster_type, material_source } = toRefs<any>(proxy?.useDict('disaster_type', 'material_source'));
+const { disaster_type, material_source, material_classification, material_type } = toRefs<any>(proxy?.useDict('disaster_type', 'material_source', 'material_classification', 'material_type'));
 const baseUrl = import.meta.env.VITE_APP_BASE_API + import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
 const emits = defineEmits(['close']);
 
@@ -297,7 +299,6 @@ const form = ref({
   remarks: ''
 });
 let godownList = ref([]);
-let materialTypeList = ref([]);
 let materialWarehouseRootList = ref([]);
 const closeDialog = () => {
   emits('close');
@@ -306,9 +307,6 @@ onMounted(() => {
   getMaterialWarehouseRootList().then((res) => {
     materialWarehouseRootList.value = res.data;
   });
-  getMaterialTypeList().then((res) => {
-    materialTypeList.value = res.data;
-  });
   getMaterialWarehouseList().then((res) => {
     godownList.value = res.data;
   });
@@ -316,7 +314,6 @@ onMounted(() => {
     form.value = res.data;
   });
 })
-
 </script>
 
 <style lang="scss" scoped>

src/views/comprehensiveGuarantee/MaterialReserveManagement/addMaterialInformation.vue

@@ -287,12 +287,12 @@ const data = reactive({
   },
   rules: {
     material_name: [{ required: true, message: '物资名称不能为空', trigger: 'blur' }],
-    warehouse_id: [{ required: true, message: '仓库不能为空', trigger: 'blur' }],
-    inventory: [{ required: true, message: '库存不能为空', trigger: 'blur' }],
+    warehouse_id: [{ required: true, message: '请选择仓库', trigger: 'change' }],
+    inventory: [{ required: true, message: '请选择库存', trigger: 'change' }],
     specification: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
     model: [{ required: true, message: '型号不能为空', trigger: 'blur' }],
-    category_name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-    material_type_id: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+    category_name: [{ required: true, message: '请选择分类名称', trigger: 'change' }],
+    material_type_id: [{ required: true, message: '请选择物资类型', trigger: 'change' }],
     unit_name: [{ required: true, message: '计量单位名称不能为空', trigger: 'blur' }],
     brand_name: [{ required: true, message: '品牌名称不能为空', trigger: 'blur' }],
     length: [{ required: true, message: '长度不能为空', trigger: 'blur' }],
@@ -347,7 +347,18 @@ const submitForm = async (formEl) => {
         });
       }
     } else {
+      nextTick(() => {
+        let isError = document.getElementsByClassName('is-error');
+        isError[0].scrollIntoView({
+          // 滚动到指定节点
+          // 值有start,center,end，nearest，当前显示在视图区域中间
+          block: 'center',
+          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
+          behavior: 'smooth'
+        });
+      });
       proxy.$modal.msgError('表单校验失败');
+      return false;
     }
   });
 };