From 6494feaf65ee1d700899af252e338572b93dd594 Mon Sep 17 00:00:00 2001
From: siontion <siontion_2000@163.com>
Date: Fri, 19 Jan 2024 10:45:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=BA=E5=85=A5=E5=BA=93=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=A1=B5=E9=9D=A2=20=E5=AD=90=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

出入库 编辑页面 子表单验证
---
 .../src/views/heli/storage/StorageForm.vue    | 234 ++++++++++--------
 1 file changed, 130 insertions(+), 104 deletions(-)

diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/storage/StorageForm.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/storage/StorageForm.vue
index 35634d5f..2c890415 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/storage/StorageForm.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/storage/StorageForm.vue
@@ -4,6 +4,7 @@
       <span v-text="dialogTitle"></span>
     </template>
     <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
+      <!--  基础信息   -->
       <el-card class="hl-card-info">
         <template #header>
           <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
@@ -78,7 +79,7 @@
           </el-col>
         </el-row>
       </el-card>
-
+      <!--  物料信息   -->
       <el-card class="hl-card-info">
         <template #header>
           <div class="hl-card-info-icona"></div><span class="hl-card-info-text">物料信息</span>
@@ -89,95 +90,105 @@
               <el-col>
                 <el-button class="hl-addbutton" type="primary" size="large" @click="onAddItem">新增</el-button>
               </el-col>
-              <el-table :data="formData.productBomItemDOList" class="hl-table">
-                <el-table-column prop="cid" label="序号" :width="80" />
-                <el-table-column prop="matId" label="物料编码">
-                  <template #default="scope">
-                    <el-select v-model="scope.row.matId" placeholder="物料编码" :remote-method="remoteMatCodeSearch"
-                      remote-show-suffix remote clearable reserve-keyword filterable :loading="matSelectLoading"
-                      @change="(val) => handleMatCode(scope, val)" class="!w-180px">
-                      <el-option v-for="item in matList" :key="item.id" :label="item.code" :value="item.id" />
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="matName" label="物料名称">
-                  <!-- <template #default="scope">
-                    <el-input v-model="scope.row.matName" 
-                      :disabled="!scope.row.editable" />
-
-                    <el-select v-model="scope.row.matName" placeholder="物料名称" :remote-method="remoteMatSearch"
-                      remote-show-suffix remote clearable reserve-keyword filterable :loading="matSelectLoading" @click="handleMatName"
-                      class="!w-180px">
-                      <el-option v-for="item in matList" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-
-                  </template> -->
-                </el-table-column>
-                <el-table-column prop="matType" label="物料类型">
-                  <template #default="scope">
-                    <dict-tag :type="DICT_TYPE.HELI_MATERIAL_TYPE" :value="scope.row.matType"
-                      v-if="scope.row.matType ? true : false" />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="matSpec" label="规格/型号" />
-
-                <el-table-column prop="matUnit" label="系统单位">
-                  <template #default="scope">
-                    <dict-tag :type="DICT_TYPE.HELI_MATERIAL_UNIT" :value="scope.row.matUnit"
-                      v-if="scope.row.matUnit ? true : false" />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="rgId" width="140" label="入库库区" required>
-                  <template #default="scope">
-                    <el-select v-model="scope.row.rgId" placeholder="" style="width: 100%" @change="handleRg(scope)">
-                      <el-option v-for="dict in rgList" :key="dict.id" :label="dict.rgName" :value="dict.id" />
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="pnId" width="140" label="入库库位" required>
-                  <template #default="scope">
-                    <el-select v-model="scope.row.pnId" placeholder="" style="width: 100%">
-                      <el-option v-for="dict in scope.row.pnlist" :key="dict.id" :label="dict.pnName" :value="dict.id" />
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="storageOkQty" width="120" label="入库数量" required>
-                  <template #default="scope">
-                    <el-input v-model="scope.row.storageOkQty" />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="lotNo" width="120" label="批次号">
-                  <template #default="scope">
-                    <el-input v-model="scope.row.lotNo" />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="description" width="150" label="备注">
-                  <template #default="scope">
-                    <el-input v-model="scope.row.description" />
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center" width="240">
-                  <template #default="scope">
-                    <!-- <el-button v-if="!scope.row.editable" type="primary" size="small" link
-                      @click="handleEdit(scope.$index)">
-                      编辑
-                    </el-button>
-                    <el-button link v-else type="success" size="small" @click="handleSave(scope.$index)">
-                      保存
-                    </el-button>
-
-                    <el-button link type="primary" @click="handlefuke(scope.$index, scope.row)">复制</el-button> -->
-                    <el-button link type="danger" size="small" @click.prevent="handleDelete2(scope.$index)">
-                      删除
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+              <el-form ref="matSubFormRef" :model="formData.matItemDOList" :rules="subFormRules"
+                v-loading="subFormLoading" label-width="0">
+                <el-table :data="formData.matItemDOList" class="hl-table">
+                  <el-table-column prop="cid" label="序号" :width="80" />
+                  <el-table-column prop="matId" label="物料编码">
+                    <template #default="scope">
+                      <el-form-item :prop="`${scope.$index}.matId`" :rules="subFormRules.matId" class="mb-0px!">
+                        <el-select v-model="scope.row.matId" placeholder="物料编码" :remote-method="remoteMatCodeSearch"
+                          remote-show-suffix remote clearable reserve-keyword filterable :loading="matSelectLoading"
+                          @change="(val) => handleMatCode(scope, val)" class="!w-180px">
+                          <el-option v-for="item in matList" :key="item.id" :label="item.code" :value="item.id" />
+                        </el-select>
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="matName" label="物料名称">
+                    <!-- <template #default="scope">
+                      <el-input v-model="scope.row.matName" 
+                        :disabled="!scope.row.editable" />
+
+                      <el-select v-model="scope.row.matName" placeholder="物料名称" :remote-method="remoteMatSearch"
+                        remote-show-suffix remote clearable reserve-keyword filterable :loading="matSelectLoading" @click="handleMatName"
+                        class="!w-180px">
+                        <el-option v-for="item in matList" :key="item.id" :label="item.name" :value="item.id" />
+                      </el-select>
+
+                    </template> -->
+                  </el-table-column>
+                  <el-table-column prop="matType" label="物料类型">
+                    <template #default="scope">
+                      <dict-tag :type="DICT_TYPE.HELI_MATERIAL_TYPE" :value="scope.row.matType"
+                        v-if="scope.row.matType ? true : false" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="matSpec" label="规格/型号" />
+
+                  <el-table-column prop="matUnit" label="系统单位">
+                    <template #default="scope">
+                      <dict-tag :type="DICT_TYPE.HELI_MATERIAL_UNIT" :value="scope.row.matUnit"
+                        v-if="scope.row.matUnit ? true : false" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="rgId" width="140" label="入库库区" required>
+                    <template #default="scope">
+                      <el-form-item :prop="`${scope.$index}.rgId`" :rules="subFormRules.rgId" class="mb-0px!">
+                        <el-select v-model="scope.row.rgId" placeholder="" style="width: 100%" @change="handleRg(scope)">
+                          <el-option v-for="dict in rgList" :key="dict.id" :label="dict.rgName" :value="dict.id" />
+                        </el-select>
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="pnId" width="140" label="入库库位" required>
+                    <template #default="scope">
+                      <el-form-item :prop="`${scope.$index}.pnId`" :rules="subFormRules.pnId" class="mb-0px!">
+                        <el-select v-model="scope.row.pnId" placeholder="" style="width: 100%">
+                          <el-option v-for="dict in scope.row.pnlist" :key="dict.id" :label="dict.pnName"
+                            :value="dict.id" />
+                        </el-select>
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="storageOkQty" width="120" label="入库数量" required>
+                    <template #default="scope">
+                      <el-input v-model="scope.row.storageOkQty" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="lotNo" width="120" label="批次号">
+                    <template #default="scope">
+                      <el-input v-model="scope.row.lotNo" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="description" width="150" label="备注">
+                    <template #default="scope">
+                      <el-input v-model="scope.row.description" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" align="center" width="240">
+                    <template #default="scope">
+                      <!-- <el-button v-if="!scope.row.editable" type="primary" size="small" link
+                        @click="handleEdit(scope.$index)">
+                        编辑
+                      </el-button>
+                      <el-button link v-else type="success" size="small" @click="handleSave(scope.$index)">
+                        保存
+                      </el-button>
+
+                      <el-button link type="primary" @click="handlefuke(scope.$index, scope.row)">复制</el-button> -->
+                      <el-button link type="danger" size="small" @click.prevent="handleDelete2(scope.$index)">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-form>
             </el-card>
           </el-col>
         </el-row>
       </el-card>
-
+      <!--  附件信息   -->
       <el-card class="hl-card-info">
         <template #header>
           <div class="hl-card-info-icona"></div><span class="hl-card-info-text">附件信息</span>
@@ -222,6 +233,7 @@
           </el-col>
         </el-row>
       </el-card>
+      <!--  系统信息   -->
       <el-card class="hl-card-info">
         <template #header>
           <div class="hl-card-info-icona"></div><span class="hl-card-info-text">系统信息</span>
@@ -299,7 +311,6 @@ const message = useMessage() // 消息弹窗
 const router = useRoute();
 
 const isShow = ref(false)
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
@@ -321,7 +332,7 @@ const formData = ref({
   outboundTime: undefined,
   cancel: undefined,
   cancelTime: undefined,
-  productBomItemDOList: [],
+  matItemDOList: [],
   attachments: []
 })
 const formRules = reactive({
@@ -331,6 +342,14 @@ const formRules = reactive({
   whId: [{ required: true, message: '入库仓库不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const matSubFormRef = ref() //子表单 Ref
+
+const subFormLoading = ref(false) // 子表单的加载中
+const subFormRules = reactive({
+  matId: [{ required: true, message: '物料不能为空', trigger: 'blur' }],
+  rgId: [{ required: true, message: '库区不能为空', trigger: 'blur' }],
+  pnId: [{ required: true, message: '库位不能为空', trigger: 'blur' }],
+})
 
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 
@@ -388,6 +407,12 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
+  // 校验子表单
+  try {
+    await matSubFormRef.value.validate()
+  } catch (e) {
+    return
+  }
   // 提交请求
   formLoading.value = true
   try {
@@ -404,11 +429,11 @@ const submitForm = async () => {
       commonResult = 'common.updateSuccess'
     }
     //物料信息保存
-    formData.value.productBomItemDOList.forEach(item => {
+    formData.value.matItemDOList.forEach(item => {
       item.stockId = storageid.value
       item.whId = formData.value.whId
     })
-    const dataMats = formData.value.productBomItemDOList as unknown as StorageMatApi.StorageMatVO[]
+    const dataMats = formData.value.matItemDOList as unknown as StorageMatApi.StorageMatVO[]
     await StorageMatApi.createStorageMatBatch(dataMats)
 
     //附件信息保存
@@ -448,13 +473,13 @@ const onAddItem = () => {
     productBomItemValueDOList: []
   }
   matCount = matCount + 1
-  formData.value.productBomItemDOList.push(newData)
+  formData.value.matItemDOList.push(newData)
 
 }
 
 // 复制数据
 const handlefuke = (index, item) => {
-  const data: any = formData.value.productBomItemDOList[index]
+  const data: any = formData.value.matItemDOList[index]
 
   // 复制数据
   const newData: any = {
@@ -478,13 +503,13 @@ const handlefuke = (index, item) => {
   }
   matCount = matCount + 1
   // 添加新数据
-  formData.value.productBomItemDOList.splice(index + 1, 0, newData)
+  formData.value.matItemDOList.splice(index + 1, 0, newData)
 
 }
 
 //删除新增物料信息
 const handleDelete2 = (index: number) => {
-  formData.value.productBomItemDOList.splice(index, 1)
+  formData.value.matItemDOList.splice(index, 1)
 }
 
 //仓库全数据
@@ -506,7 +531,7 @@ const handleWh = (async (wid) => {
   pnList.value = []
   rgList.value = dataRg.list
 
-  formData.value.productBomItemDOList.forEach(item => {
+  formData.value.matItemDOList.forEach(item => {
     item.rgId = ''
     item.pnId = ''
     item.pnlist.value = []
@@ -564,6 +589,8 @@ const handleMatCode = async (scope, matid) => {
   }
 }
 
+const isShowBtnStatus = false
+const isShowBtnCancel = false
 /** 初始化 **/
 onMounted(async () => {
 
@@ -594,8 +621,8 @@ onMounted(async () => {
     const queryParamsRg = reactive({
       pageNo: 1,
       pageSize: 99,
-      status:1,
-      whId : formData.value.whId
+      status: 1,
+      whId: formData.value.whId
     })
     const dataRg = await RgApi.getRgPage(queryParamsRg)
 
@@ -618,7 +645,7 @@ onMounted(async () => {
       stockId: router.query.id
     })
     const dataMats = await StorageMatApi.getStorageMatPage(queryParamsMat)
-    formData.value.productBomItemDOList = dataMats.list
+    formData.value.matItemDOList = dataMats.list
 
     //获取原始物料信息
     const queryParamsMat2 = reactive({
@@ -628,20 +655,18 @@ onMounted(async () => {
     })
     const matVos = await MaterialApi.getMaterialPage(queryParamsMat2)
 
-    formData.value.productBomItemDOList.forEach(item => {
-      item.cid =  matCount
+    formData.value.matItemDOList.forEach(item => {
+      item.cid = matCount
       item.matId = matVos.list.find((record) => record.id === item.matId)?.id
       //item.matCode = matVos.list.find( (record) => record.id === item.matId)?.id
       item.matName = matVos.list.find((record) => record.id === item.matId)?.name
       item.matSpec = matVos.list.find((record) => record.id === item.matId)?.spec
       item.matType = matVos.list.find((record) => record.id === item.matId)?.materialType
       item.matUnit = matVos.list.find((record) => record.id === item.matId)?.unit
-      item.pnlist =  pnList.value.filter((pn) => pn.rgId === item.rgId)
-      matCount=  matCount+1
+      item.pnlist = pnList.value.filter((pn) => pn.rgId === item.rgId)
+      matCount = matCount + 1
     })
 
-    //物料编码信息初始化
-
 
     // 附件信息
     let attParams = {
@@ -653,6 +678,7 @@ onMounted(async () => {
     formData.value.attachments = (await getFilePage(attParams)).list;
   }
 
+  //用户信息
   userList.value = await UserApi.getSimpleUserList()
 
 })