修改父子表格联动

src/api/wms/linkage/index.ts

@@ -17,6 +17,14 @@ export const allocateOrderDetailList = (query) => {
   });
 };
 
+export const allocateOrderUpdate = (query) => {
+  return request({
+    url: '/wms/allocateOrder',
+    method: 'put',
+    data: query
+  });
+};
+
 export const allocateOrder = (aoId) => {
   return request({
     url: '/wms/allocateOrder/' + aoId,
@@ -54,3 +62,17 @@ export const addAllocateOrderDetail = (data) => {
     data,
   });
 };
+
+export const viewAllocateOrderDetail = (aoId) => {
+  return request({
+    url: '/wms/allocateOrderDetail/' + aoId,
+    method: 'get'
+  });
+};
+
+export const delAllocateOrderDetail = (aoDId) => {
+  return request({
+    url: '/wms/allocateOrderDetail/removeDetail/' + aoDId,
+    method: 'delete'
+  });
+};

src/views/wms/linkage/index.vue

@@ -5,26 +5,9 @@
         <el-form-item label="调拨单号">
           <el-input v-model="queryForm.allocateOrderCode" placeholder="输入调拨单号" clearable/>
         </el-form-item>
-        <el-form-item label="字段2">
-          <el-select
-            v-model="queryForm.region"
-            placeholder="字段2"
-            clearable
-          >
-            <el-option label="选项1" value="shanghai"/>
-            <el-option label="选项2" value="beijing"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="字段3">
-          <el-date-picker
-            v-model="queryForm.date"
-            type="date"
-            placeholder="字段3"
-            clearable
-          />
-        </el-form-item>
         <el-form-item>
           <el-button :loading="parentTableLoad" type="primary" @click="query">查询</el-button>
+          <el-button @click="reset">重置</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -43,15 +26,15 @@
             <el-button type="danger" plain icon="Delete" :disabled="ids.length < 1" @click="parentTableDelete()">删除
             </el-button>
           </el-col>
-          <el-col :span="1.5">
+          <!--          <el-col :span="1.5">-->
-            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+          <!--            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>-->
-          </el-col>
+          <!--          </el-col>-->
           <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
                          @queryTable="getParentTable"></right-toolbar>
         </el-row>
       </template>
-      <el-table v-loading="parentTableLoad" :data="parentTableData" style="width: 100%"
+      <el-table v-loading="parentTableLoad" :data="parentTableData" style="width: 100%" highlight-current-row
-                @cell-click="parentTableCellClick"
+                @current-change="parentTableCellClick"
                 @selection-change="selectionChange" ref="parentTableRef">
         <el-table-column type="selection" width="55"/>
         <el-table-column label="表主键" align="center" prop="aoId" v-if="false"/>
@@ -99,9 +82,9 @@
         </el-table-column>
         <el-table-column label="操作" fixed="right" width="200">
           <template #default="scope">
-            <el-button size="small" @click.stop="viewDetails(scope.row)">
+            <!--            <el-button size="small" @click.stop="viewDetails(scope.row)">-->
-              查看
+            <!--              查看-->
-            </el-button>
+            <!--            </el-button>-->
             <el-button size="small" @click.stop="parentTableUpdate(scope.row)">
               修改
             </el-button>
@@ -127,23 +110,20 @@
         <el-table-column label="调拨数量" align="center" prop="allocateOrderQty"/>
         <el-table-column label="erp同步状态" align="center" prop="erpSynchronousStatus"/>
         <el-table-column label="erp同步数量" align="center" prop="erpSynchronousQty"/>
-        <!--        <el-table-column label="操作" fixed="right" width="200">-->
+        <el-table-column label="操作" fixed="right" width="200">
-        <!--          <template #default="scope">-->
+          <template #default="scope">
-        <!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
+<!--            <el-button size="small" @click="childrenTableUpdate( scope.row)">-->
-        <!--              查看-->
+<!--              修改-->
-        <!--            </el-button>-->
+<!--            </el-button>-->
-        <!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
+            <el-button
-        <!--              修改-->
+              size="small"
-        <!--            </el-button>-->
+              type="danger"
-        <!--            <el-button-->
+              @click="childrenTableUDelete(scope.row)"
-        <!--              size="small"-->
+            >
-        <!--              type="danger"-->
+              删除
-        <!--              @click="handleDelete(scope.$index, scope.row)"-->
+            </el-button>
-        <!--            >-->
+          </template>
-        <!--              删除-->
+        </el-table-column>
-        <!--            </el-button>-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
       </el-table>
     </el-card>
 
@@ -257,23 +237,6 @@
           <!--              </el-select>-->
           <!--            </template>-->
           <!--          </el-table-column>-->
-          <el-table-column label="Operations" fixed="right" width="200">
-            <template #default="scope">
-              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
-                查看
-              </el-button>
-              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
-                修改
-              </el-button>
-              <el-button
-                size="small"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
         </el-table>
       </el-card>
       <template #footer>
@@ -285,6 +248,123 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="parentTableInfoVisible" title="修改父表格" width="40%">
+      <el-form :model="parentTableInfoForm" label-width="120px">
+        <el-form-item label="id" prop="planWarehouseId"v-if="false">
+          <el-input v-model="parentTableInfoForm.aoid"></el-input>
+        </el-form-item>
+        <el-form-item label="物料大类" prop="materialCategories">
+          <el-select
+            v-model="parentTableInfoForm.materialCategories"
+            placeholder="选择物料大类"
+            @change="setMaterialList"
+          >
+            <el-option
+              v-for="i in mes_material_categories"
+              :label="i.label"
+              :value="i.value"
+              :key="i.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="出库仓库" prop="planWarehouseId">
+          <el-select v-model="parentTableInfoForm.planWarehouseId" placeholder="请选择所属仓库">
+            <el-option
+              v-for="item in baseStoreList"
+              :key="item.warehouseId"
+              :label="item.warehouseName"
+              :value="item.warehouseId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="入库仓库" prop="targetWarehouseId">
+          <el-select v-model="parentTableInfoForm.targetWarehouseId" placeholder="请选择所属仓库">
+            <el-option
+              v-for="item in baseStoreList"
+              :key="item.warehouseId"
+              :label="item.warehouseName"
+              :value="item.warehouseId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="审核人" prop="auditBy">
+          <el-select v-model="parentTableInfoForm.auditBy" placeholder="请选择审核人">
+            <el-option
+              v-for="item in userList"
+              :key="item.userId"
+              :label="item.userName"
+              :value="item.userName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="parentTableInfoVisible = false">关闭</el-button>
+          <el-button type="primary" @click="parentTableInfoSubmit">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="childrenTableInfoVisible" title="修改子表格" width="40%">
+      <el-form :model="childrenTableInfoForm" label-width="120px">
+        <el-form-item label="物料大类" prop="materialCategories">
+          <el-select
+            v-model="childrenTableInfoForm.materialCategories"
+            placeholder="选择物料大类"
+            @change="setMaterialList"
+          >
+            <el-option
+              v-for="i in mes_material_categories"
+              :label="i.label"
+              :value="i.value"
+              :key="i.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="出库仓库" prop="planWarehouseId">
+          <el-select v-model="childrenTableInfoForm.planWarehouseId" placeholder="请选择所属仓库">
+            <el-option
+              v-for="item in baseStoreList"
+              :key="item.warehouseId"
+              :label="item.warehouseName"
+              :value="item.warehouseId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="入库仓库" prop="targetWarehouseId">
+          <el-select v-model="childrenTableInfoForm.targetWarehouseId" placeholder="请选择所属仓库">
+            <el-option
+              v-for="item in baseStoreList"
+              :key="item.warehouseId"
+              :label="item.warehouseName"
+              :value="item.warehouseId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="审核人" prop="auditBy">
+          <el-select v-model="childrenTableInfoForm.auditBy" placeholder="请选择审核人">
+            <el-option
+              v-for="item in userList"
+              :key="item.userId"
+              :label="item.userName"
+              :value="item.userName"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="childrenTableInfoVisible = false">关闭</el-button>
+          <el-button type="primary" @click="childrenTableInfoSubmit">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -296,7 +376,7 @@ import {
   viewAllocateOrder,
   addAllocateOrder,
   addAllocateOrderDetail,
-  getMaterialList
+  getMaterialList, viewAllocateOrderDetail, delAllocateOrderDetail, allocateOrderUpdate
 } from '@/api/wms/linkage'
 
 import {reactive} from 'vue'
@@ -315,7 +395,6 @@ const {
   wms_allocate_way
 } = toRefs<any>(proxy?.useDict('approve_status', 'material_mategories', 'mes_material_categories', 'wms_allocate_status', 'wms_allocate_create', 'wms_allocate_way'));
 
-console.log(mes_material_categories.value)
 
 interface User {
   date: string
@@ -325,8 +404,12 @@ interface User {
 
 const parentTableTotal = ref(0)
 const dialogVisible = ref(false)
+const parentTableInfoVisible = ref(false)
+const childrenTableInfoSubmit = ref(false)
 const dialogTitle = ref('添加')
 const dialogForm = ref({})
+const parentTableInfoForm = ref({})
+const childrenTableInfoForm = ref({})
 
 const queryForm = ref({
   allocateCode: '',
@@ -344,6 +427,7 @@ const materialList = ref([]);
 const parentTableLoad = ref(false)
 const childrenTableLoad = ref(false)
 const isView = ref(false)
+const partntTableSelectCell = ref({})
 
 // 获取仓库
 getBaseWarehouseList().then(e => {
@@ -360,7 +444,12 @@ const getParentTable = async () => {
     parentTableLoad.value = false
     parentTableData.value = e.rows
     parentTableTotal.value = e.total
-    await getChildrenTable({query: e.rows[0].aoId})
+    if (e.rows.length > 0) {
+      parentTableRef.value.setCurrentRow(e.rows[0])
+      await getChildrenTable({allocateCode: e.rows[0].allocateOrderCode})
+    } else {
+      childrenTableData.value = []
+    }
   })
 }
 
@@ -376,24 +465,22 @@ const getChildrenTable = async (form) => {
 
 getParentTable()
 
-
-const handleEdit = (index: number, row: User) => {
-  console.log(index, row)
-}
-const handleDelete = (index: number, row: User) => {
-  console.log(index, row)
-}
 // 查询
 const query = async () => {
-  console.log(queryForm)
   ids.value = []
   parentTableRef.value?.clearSelection()
   await getParentTable()
 }
+const reset = () => {
+  queryForm.value = {
+    allocateOrderCode: ''
+  }
+}
 
 // 父表格行点击
 const parentTableCellClick = async (e) => {
-  await getChildrenTable({query: e.aoId})
+  partntTableSelectCell.value = e
+  await getChildrenTable({allocateCode: e.allocateOrderCode})
 }
 
 // 表格多选
@@ -412,9 +499,11 @@ const viewDetails = (e) => {
 // 父表格新增
 const parentTableAdd = () => {
   dialogVisible.value = true
+  dialogForm.value = {}
+  dialogtable.value = []
 }
 // 父表格修改
-const parentTableUpdate = (e) => {
+const parentTableUpdate = async (e) => {
   let id = ref(null)
   if (e) {
     id.value = e.aoId
@@ -422,7 +511,8 @@ const parentTableUpdate = (e) => {
     id.value = ids.value?.[0]
   }
   if (!id.value) return
-  dialogVisible.value = true
+  parentTableInfoForm.value = (await viewAllocateOrder(id.value)).data
+  parentTableInfoVisible.value = true
 }
 // 父表格删除
 const parentTableDelete = async (e) => {
@@ -459,6 +549,7 @@ const parentTableDelete = async (e) => {
 
 }
 
+// 获取物料列表
 const setMaterialList = (materialCategories) => {
   getMaterialList({materialCategories}).then(e => {
     materialList.value = e.data
@@ -470,18 +561,68 @@ const addDialogTableCell = () => {
   dialogtable.value.push({})
 }
 
-// dialog提交
+// 新增提交
 const dialogSubmit = () => {
 
   addAllocateOrder(dialogForm.value).then(e => {
-    console.log(e)
+    addAllocateOrderDetail(dialogtable.value.map(item => {
-    addAllocateOrderDetail({WmsAllocateOrderDetailBo: dialogtable.value.map(item=>{return {...item,allocateCode: e.msg, }})}).then(v => {
+        return {...item, allocateCode: e.msg,}
+      }
+      )
+    ).then(v => {
       dialogVisible.value = false
       getParentTable()
     })
 
   })
 }
+
+const parentTableInfoSubmit = () =>{
+  allocateOrderUpdate(parentTableInfoForm.value).then(e=>{
+    ElMessage({
+      type: 'success',
+      message: '修改完成',
+    })
+    parentTableInfoVisible.value = false
+    getParentTable()
+  })
+}
+
+// 子表格修改
+const childrenTableUpdate = async (e) => {
+  childrenTableInfoForm.value = (await viewAllocateOrderDetail(e.aoDId)).data
+  childrenTableInfoVisible.value = true
+}
+
+
+// 子表格删除
+const childrenTableUDelete = (e) => {
+
+  ElMessageBox.confirm(
+    '确定要删除这些数据吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(async () => {
+      await delAllocateOrderDetail(e.aoDId).then(async (e) => {
+        ElMessage({
+          type: 'success',
+          message: '删除完成',
+        })
+        await getChildrenTable({allocateCode: partntTableSelectCell.value.allocateOrderCode})
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消',
+      })
+    })
+}
 </script>
 <style>
 .demo-form-inline .el-input {