通知单管理-新增表单验证

src/api/notificationManagement/list.js

+import request from '@/utils/request'
+
+// 获取所有事业部列表
+export function getUnitList() {
+    return request({
+        url: '/control/unit/getAllBusinessUnitName',
+        method: 'get'
+    })
+}
+// 查询国内品牌数据列表
+export function brandData() {
+    return request({
+        url: '/control/brandData/list?type=国内',
+        method: 'get'
+    })
+}
+// 获取所有制造商数据-生产地址
+export function getALLManufacturerList() {
+    return request({
+        url: '/control/notificationManagement/getALLManufacturerList',
+        method: 'get'
+    })
+}

src/views/controlPlan/controlPlanNotice/notificationManagement/index.vue

@@ -26,9 +26,9 @@
             style="width: 120px"
         >
           <el-option
-              v-for="dict in 4"
-              :label="dict"
-              :value="dict"
+              v-for="dict in unitList"
+              :label="dict.businessUnitName"
+              :value="dict.id"
           />
         </el-select>
       </el-form-item>
@@ -142,14 +142,14 @@
 
 
     <!--  抽屉-->
-    <el-drawer  v-model="drawer">
+    <el-drawer @close="drawerColse" v-model="drawer">
       <template #header>
         <div style="font-weight: bold;font-size: 14px">
           新增通知单
         </div>
       </template>
       <template #default>
-        <el-form class="drawer-form" :rules="rules" v-model="drawerQueryParams" label-width="100px" ref="drawerQueryRef"  >
+        <el-form class="drawer-form" :rules="rules" :model="drawerQueryParams" label-width="100px" ref="drawerQueryRef"  >
           <el-row >
             <el-col :offset="1" :span="22">
               <el-form-item label="认证机构" prop="certificationBody">
@@ -157,12 +157,11 @@
                     v-model="drawerQueryParams.certificationBody"
                     placeholder="请选择"
                     clearable
-
                 >
                   <el-option
-                      v-for="dict in 4"
-                      :label="dict"
-                      :value="dict"
+                      v-for="dict in certification_body"
+                      :label="dict.label"
+                      :value="dict.value"
                   />
                 </el-select>
               </el-form-item>
@@ -173,15 +172,16 @@
             <el-col :offset="1" :span="11">
               <el-form-item label="事业部" prop="businessDivisionId">
                 <el-select
+                    @change="onChange"
                     v-model="drawerQueryParams.businessDivisionId"
                     placeholder="请选择"
                     clearable
 
                 >
                   <el-option
-                      v-for="dict in 4"
-                      :label="dict"
-                      :value="dict"
+                      v-for="dict in unitList"
+                      :label="dict.businessUnitName"
+                      :value="dict.id"
                   />
                 </el-select>
               </el-form-item>
@@ -195,9 +195,9 @@
                     clearable
                 >
                   <el-option
-                      v-for="dict in 4"
-                      :label="dict"
-                      :value="dict"
+                      v-for="dict in brandList"
+                      :label="dict.brand"
+                      :value="dict.id"
                   />
                 </el-select>
               </el-form-item>
@@ -213,7 +213,7 @@
                     clearable
                 >
                   <el-option
-                      v-for="dict in 4"
+                      v-for="dict in modelCodeList"
                       :label="dict"
                       :value="dict"
                   />
@@ -226,14 +226,16 @@
             <el-col :offset="1" :span="22">
               <el-form-item label="车型系列" prop="vehicleSeries">
                 <el-select
-                    v-model="drawerQueryParams.groupName"
+                    :disabled="!drawerQueryParams.businessDivisionId"
+                    v-model="drawerQueryParams.vehicleSeries"
                     placeholder="请选择"
                     clearable
                 >
                   <el-option
-                      v-for="dict in 4"
-                      :label="dict"
-                      :value="dict"
+
+                      v-for="dict in vehicleModelSeriesList"
+                      :label="dict.label"
+                      :value="dict.value"
                   />
                 </el-select>
               </el-form-item>
@@ -244,14 +246,15 @@
             <el-col :offset="1" :span="22">
               <el-form-item label="生产地址" prop="productionAddress">
                 <el-select
+                    placement="bottom"
                     v-model="drawerQueryParams.productionAddress"
                     placeholder="请选择"
                     clearable
                 >
                   <el-option
-                      v-for="dict in 4"
-                      :label="dict"
-                      :value="dict"
+                      v-for="dict in addressList"
+                      :label="dict.productionAddress"
+                      :value="dict.id"
                   />
                 </el-select>
               </el-form-item>
@@ -287,18 +290,36 @@
       <template #footer>
         <div style="flex: auto">
           <el-button class="btn-B" @click="cancelClick">取消</el-button>
-          <el-button class="btn-A" type="primary" @click="confirmClick">保存</el-button>
+          <el-button class="btn-A" type="primary" @click="confirmClick(drawerQueryRef)">保存</el-button>
         </div>
       </template>
     </el-drawer>
   </div>
 </template>
 <script setup>
+import {getUnitList,brandData,getALLManufacturerList} from "@/api/notificationManagement/list.js"
 import { ref } from "vue";
-
+const { proxy } = getCurrentInstance();
+const { certification_body } = proxy.useDict('certification_body')
+//车型系列-事业部icar才能选这个
+const { vehicle_model_series_icar } = proxy.useDict('vehicle_model_series_icar')
+//车型系列-除了事业部icar选这个
+ const {vehicle_model_series } = proxy.useDict('vehicle_model_series')
 const tableList =ref([])
+const vehicleModelSeriesList = ref([])
+const addressList = ref([])
 const drawer = ref(false)
-const drawerQueryParams = ref({})
+const modelCodeList = ref([
+  'T19C',
+  'T18'
+])
+const unitList = ref([])
+const brandList = ref([])
+const drawerQueryParams = ref({
+  //暂时写死等接口
+  approvalPerson:"2",
+  certificationResponsiblePerson:"2,100,101"
+})
 const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
@@ -312,58 +333,88 @@ function addNotifiction(){
 
 const rules = ref({
   certificationBody: [
-    { required: true, message: '请选择认证机构', trigger: 'blur' }
+    { required: true, message: '请选择认证机构', trigger: 'change' }
   ],
   businessDivisionId: [
-    { required: true, message: '请选择事业部', trigger: 'blur' }
+    { required: true, message: '请选择事业部', trigger: 'change' }
 
   ],
   brandId: [
-    { required: true, message: '请选择品牌', trigger: 'blur' }
+    { required: true, message: '请选择品牌', trigger: 'change' }
   ],
   vehicleModelCode: [
-    { required: true, message: '请输入车型代码', trigger: 'blur' }
+    { required: true, message: '请输入车型代码', trigger: 'change' }
   ],
   vehicleSeries: [
-    { required: true, message: '请选择车型系列', trigger: 'blur' }
+    { required: true, message: '请选择车型系列', trigger: 'change' }
   ],
   productionAddress: [
-    { required: true, message: '请选择生产地址', trigger: 'blur' }
+    { required: true, message: '请选择生产地址', trigger: 'change' }
   ],
   approvalPerson: [
-    { required: true, message: '请选择批准人', trigger: 'blur' }
+    { required: true, message: '请选择批准人', trigger: 'change' }
   ],
   certificationResponsiblePerson: [
-   { required: true, message: '请选择认证负责人', trigger: 'blur' }
+   { required: true, message: '请选择认证负责人', trigger: 'change' }
  ]
 });
 
-function confirmClick(){
-  drawerQueryRef.value.validate((v)=>{
-    if(v){
-      console.log(drawerQueryParams)
+function confirmClick(formRef) {
+  drawerQueryRef.value.validate((valid) => {
+    if (valid) {
+      console.log(drawerQueryParams.value);
+    } else {
+      console.log('表单验证失败');
+      return false;
     }
+  });
+}
+//获取事业部列表
+function  getUnitDataList(){
+  getUnitList().then(res=>{
+    unitList.value = res.data
   })
 }
 
+//获取品牌列表
+function  getBrandDataList(){
+  brandData().then(res=>{
+    brandList.value = res.rows
+  })
+}
 
+function onChange(){
+  console.log(drawerQueryParams.value.businessDivisionId)
+  let id = drawerQueryParams.value.businessDivisionId
+  drawerQueryParams.value.vehicleSeries = null
+  //icak的id（暂时）
+  if(id === "1911691206111260672"){
+    vehicleModelSeriesList.value = toValue(vehicle_model_series_icar)
 
+  }else {
+    vehicleModelSeriesList.value =toValue(vehicle_model_series)
 
+  }
+  console.log(vehicleModelSeriesList.value)
+}
 
 
 
+//获取所有制造商数据-生产地址
+function  getALLManufacturerDataList(){
+  getALLManufacturerList().then(res=>{
+    console.log(res)
+    addressList.value = res.data
+  })
+}
+function drawerColse(){
+  drawerQueryRef.value.resetFields()
+}
 
 
-
-
-
-
-
-
-
-
-
-
+getALLManufacturerDataList()
+getUnitDataList()
+getBrandDataList()
 </script>