修改父子表格联动

src/api/wms/linkage/index.ts

@@ -0,0 +1,56 @@
+import request from '@/utils/request';
+
+
+export const allocateOrderlList = (query) => {
+  return request({
+    url: '/wms/allocateOrder/list',
+    method: 'get',
+    params: query
+  });
+};
+
+export const allocateOrderDetailList = (query) => {
+  return request({
+    url: '/wms/allocateOrderDetail/list',
+    method: 'get',
+    params: query
+  });
+};
+
+export const allocateOrder = (aoId) => {
+  return request({
+    url: '/wms/allocateOrder/' + aoId,
+    method: 'delete'
+  });
+};
+
+export const viewAllocateOrder = (aoId) => {
+  return request({
+    url: '/wms/allocateOrder/' + aoId,
+    method: 'get'
+  });
+};
+
+export const addAllocateOrder = (data) => {
+  return request({
+    url: '/wms/allocateOrder',
+    method: 'post',
+    data,
+  });
+};
+
+export const getMaterialList = (query) => {
+  return request({
+    url: '/wms/baseMaterialInfo/materialList',
+    method: 'get',
+    params: query
+  });
+};
+
+export const addAllocateOrderDetail = (data) => {
+  return request({
+    url: '/wms/allocateOrderDetail',
+    method: 'post',
+    data,
+  });
+};

src/views/wms/linkage/index.vue

@@ -2,8 +2,8 @@
   <div class="p-2">
     <el-card shadow="never">
       <el-form label-width="120px" label-position="right" :inline="true" :model="queryForm" class="demo-form-inline">
-        <el-form-item label="字段1">
+        <el-form-item label="调拨单号">
-          <el-input v-model="queryForm.user" placeholder="字段1" clearable/>
+          <el-input v-model="queryForm.allocateOrderCode" placeholder="输入调拨单号" clearable/>
         </el-form-item>
         <el-form-item label="字段2">
           <el-select
@@ -24,7 +24,7 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="query">查询</el-button>
+          <el-button :loading="parentTableLoad" type="primary" @click="query">查询</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -47,15 +47,57 @@
             <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
           <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
-                         @queryTable="getList"></right-toolbar>
+                         @queryTable="getParentTable"></right-toolbar>
         </el-row>
       </template>
-      <el-table :data="tableData" style="width: 100%" @cell-click="parentTableCellClick"
+      <el-table v-loading="parentTableLoad" :data="parentTableData" style="width: 100%"
+                @cell-click="parentTableCellClick"
                 @selection-change="selectionChange" ref="parentTableRef">
         <el-table-column type="selection" width="55"/>
-        <el-table-column label="Date" prop="date"/>
+        <el-table-column label="表主键" align="center" prop="aoId" v-if="false"/>
-        <el-table-column label="Date" prop="name"/>
+        <el-table-column label="调拨单号" align="center" prop="allocateOrderCode"/>
-        <el-table-column label="Operations" fixed="right" width="200">
+        <el-table-column label="物料大类" align="center" prop="materialCategories">
+          <template #default="scope">
+            <dict-tag :options="material_mategories" :value="scope.row.materialCategories"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="出库仓库ID" align="center" prop="planWarehouseCode"/>
+        <el-table-column label="工单状态" align="center" prop="orderStatus">
+          <template #default="scope">
+            <dict-tag :options="wms_allocate_status" :value="scope.row.orderStatus"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="入库仓库ID" align="center" prop="targetWarehouseCode"/>
+        <el-table-column label="审核人" align="center" prop="auditBy"/>
+        <el-table-column label="审核时间" align="center" prop="auditTime" width="180">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核状态" align="center" prop="auditStatus">
+          <template #default="scope">
+            <dict-tag :options="approve_status" :value="scope.row.auditStatus"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核意见" align="center" prop="auditComments"/>
+        <el-table-column label="是否创建出库单" align="center" prop="createOut">
+          <template #default="scope">
+            <dict-tag :options="wms_allocate_create" :value="scope.row.createOut"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="出库单号" align="center" prop="outCode"/>
+        <el-table-column label="是否创建入库单" align="center" prop="createIn">
+          <template #default="scope">
+            <dict-tag :options="wms_allocate_create" :value="scope.row.createIn"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="入库单号" align="center" prop="inCode"/>
+        <el-table-column label="入库方式" align="center" prop="inMethod">
+          <template #default="scope">
+            <dict-tag :options="wms_allocate_way" :value="scope.row.inMethod"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="200">
           <template #default="scope">
             <el-button size="small" @click.stop="viewDetails(scope.row)">
               查看
@@ -73,42 +115,84 @@
           </template>
         </el-table-column>
       </el-table>
+      <pagination v-show="parentTableTotal > 0" :total="parentTableTotal" v-model:page="queryForm.pageNum"
+                  v-model:limit="queryForm.pageSize" @pagination="getParentTable"/>
     </el-card>
 
     <el-card style="margin-top: 8px" shadow="never">
-      <el-table :data="tableData1" style="width: 100%">
+      <el-table :data="childrenTableData" style="width: 100%" v-loading="childrenTableLoad">
-        <el-table-column label="Date" prop="date"/>
+        <el-table-column label="调拨子表主键" align="center" prop="aoDId" v-if="false"/>
-        <el-table-column label="Date" prop="name"/>
+        <el-table-column label="调拨单号" align="center" prop="allocateCode"/>
-        <el-table-column label="Operations" fixed="right" width="200">
+        <el-table-column label="物料id" align="center" prop="materialId"/>
-          <template #default="scope">
+        <el-table-column label="调拨数量" align="center" prop="allocateOrderQty"/>
-            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+        <el-table-column label="erp同步状态" align="center" prop="erpSynchronousStatus"/>
-              查看
+        <el-table-column label="erp同步数量" align="center" prop="erpSynchronousQty"/>
-            </el-button>
+        <!--        <el-table-column label="操作" fixed="right" width="200">-->
-            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+        <!--          <template #default="scope">-->
-              修改
+        <!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
-            </el-button>
+        <!--              查看-->
-            <el-button
+        <!--            </el-button>-->
-              size="small"
+        <!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
-              type="danger"
+        <!--              修改-->
-              @click="handleDelete(scope.$index, scope.row)"
+        <!--            </el-button>-->
-            >
+        <!--            <el-button-->
-              删除
+        <!--              size="small"-->
-            </el-button>
+        <!--              type="danger"-->
-          </template>
+        <!--              @click="handleDelete(scope.$index, scope.row)"-->
-        </el-table-column>
+        <!--            >-->
+        <!--              删除-->
+        <!--            </el-button>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
       </el-table>
     </el-card>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="100%" fullscreen>
       <el-card shadow="never">
-        <el-form :model="dialogForm" :inline="true">
+        <el-form :model="dialogForm" :inline="true" label-width="120px" :disabled="isView">
-          <el-form-item label="字段1" label-width="120px">
+          <el-form-item label="物料大类" prop="materialCategories">
-            <el-input v-model="dialogForm.name" autocomplete="off"/>
+
+            <el-select
+              v-model="dialogForm.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="字段2" label-width="120px">
+          <el-form-item label="出库仓库" prop="planWarehouseId">
-            <el-select v-model="dialogForm.region" placeholder="Please select a zone">
+            <el-select v-model="dialogForm.planWarehouseId" placeholder="请选择所属仓库">
-              <el-option label="Zone No.1" value="shanghai"/>
+              <el-option
-              <el-option label="Zone No.2" value="beijing"/>
+                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="dialogForm.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="dialogForm.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>
@@ -120,29 +204,59 @@
           </el-col>
         </el-row>
         <el-table :data="dialogtable" style="width: 100%">
-          <el-table-column label="字段1" prop="date">
+          <el-table-column label="字段1" prop="date" v-if="false">
             <template #default="scope">
               <el-select
                 v-model="scope.row.date"
                 placeholder="Select"
-                size="small"
               >
                 <el-option
-                  label="1"
+                  v-for="i in mes_material_categories"
-                  value="1"
+                  :label="i.materialName"
-                />
+                  :value="i.materialId"
-                <el-option
+                  :key="i.materialId"
-                  label="2"
-                  value="2"
                 />
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="字段2" prop="name">
+          <el-table-column label="物料名称" prop="materialId">
             <template #default="scope">
-              <el-input v-model="scope.row.name" style="width: 240px" placeholder="Please input" />
+              <el-select
+                v-model="scope.row.materialId"
+                placeholder="选择物料"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="i in materialList"
+                  :label="i.materialName"
+                  :value="i.materialId"
+                  :key="i.materialId"
+                />
+              </el-select>
             </template>
           </el-table-column>
+          <el-table-column label="调拨数量" prop="allocateOrderQty">
+            <template #default="scope">
+              <el-input v-model="scope.row.allocateOrderQty" style="width: 240px" placeholder="输入调拨数量"/>
+            </template>
+          </el-table-column>
+          <!--          <el-table-column label="erp同步状态" prop="erpSynchronousStatus">-->
+          <!--            <template #default="scope">-->
+          <!--              <el-select-->
+          <!--                v-model="scope.row.erpSynchronousStatus"-->
+          <!--                placeholder="选择erp同步状态"-->
+          <!--              >-->
+          <!--                <el-option-->
+          <!--                  label="1"-->
+          <!--                  value="1"-->
+          <!--                />-->
+          <!--                <el-option-->
+          <!--                  label="2"-->
+          <!--                  value="2"-->
+          <!--                />-->
+          <!--              </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)">
@@ -175,9 +289,33 @@
 </template>
 
 <script setup name="Linkage" lang="ts">
+import {
+  allocateOrderDetailList,
+  allocateOrderlList,
+  allocateOrder,
+  viewAllocateOrder,
+  addAllocateOrder,
+  addAllocateOrderDetail,
+  getMaterialList
+} from '@/api/wms/linkage'
 
 import {reactive} from 'vue'
 import {ElMessage, ElMessageBox} from 'element-plus'
+import {getBaseWarehouseList} from "@/api/wms/baseWarehouse";
+import {UserVO} from "@/api/system/user/types";
+import {listUser} from "@/api/system/user";
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {
+  approve_status,
+  material_mategories,
+  mes_material_categories,
+  wms_allocate_status,
+  wms_allocate_create,
+  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
@@ -185,98 +323,90 @@ interface User {
   address: string
 }
 
+const parentTableTotal = ref(0)
 const dialogVisible = ref(false)
 const dialogTitle = ref('添加')
-const dialogForm = reactive({})
+const dialogForm = ref({})
 
-const queryForm = reactive({
+const queryForm = ref({
-  user: '',
+  allocateCode: '',
-  region: '',
+  pageNum: 1,
-  date: '',
+  pageSize: 10
 })
 const parentTableRef = ref()
-const tableData = ref([
+const parentTableData = ref([])
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-])
 const ids = ref([])
-const tableData1 = ref([
+const childrenTableData = ref([])
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-])
 const dialogtable = ref([])
+const baseStoreList = ref([]);
+const userList = ref([]);
+const materialList = ref([]);
+const parentTableLoad = ref(false)
+const childrenTableLoad = ref(false)
+const isView = ref(false)
 
-const onSubmit = () => {
+// 获取仓库
-  console.log('submit!')
+getBaseWarehouseList().then(e => {
+  baseStoreList.value = e.data
+})
+listUser().then(e => {
+  userList.value = e.rows;
+})
+
+// 获取父表格数据
+const getParentTable = async () => {
+  parentTableLoad.value = true
+  await allocateOrderlList(queryForm.value).then(async (e) => {
+    parentTableLoad.value = false
+    parentTableData.value = e.rows
+    parentTableTotal.value = e.total
+    await getChildrenTable({query: e.rows[0].aoId})
+  })
 }
 
+// 获取子表格数据
+const getChildrenTable = async (form) => {
+  childrenTableLoad.value = true
+  await allocateOrderDetailList(form).then(e => {
+    childrenTableLoad.value = false
+    childrenTableData.value = e.rows
+    parentTableTotal.value = e.total
+  })
+}
+
+getParentTable()
+
+
 const handleEdit = (index: number, row: User) => {
   console.log(index, row)
 }
 const handleDelete = (index: number, row: User) => {
   console.log(index, row)
 }
-const query = () => {
+// 查询
+const query = async () => {
   console.log(queryForm)
   ids.value = []
-  parentTableRef.value.clearSelection()
+  parentTableRef.value?.clearSelection()
+  await getParentTable()
 }
 
 // 父表格行点击
-const parentTableCellClick = (e) => {
+const parentTableCellClick = async (e) => {
-  console.log(e.date)
+  await getChildrenTable({query: e.aoId})
-  tableData1.value = tableData1.value.map(v => {
-    return {
-      ...v,
-      date: e.date
-    }
-  })
 }
 
 // 表格多选
 const selectionChange = (e) => {
-  ids.value = e.map(v => v.name)
+  ids.value = e.map(v => v.aoId)
-  console.log(ids.value)
 }
 // 查看
 const viewDetails = (e) => {
-  console.log(e)
+  isView.value = true
+  dialogVisible.value = true
+  viewAllocateOrder(e.aoId).then(v => {
+    dialogForm.value = v.data
+  })
 }
 
 // 父表格新增
@@ -287,7 +417,7 @@ const parentTableAdd = () => {
 const parentTableUpdate = (e) => {
   let id = ref(null)
   if (e) {
-    id.value = e.name
+    id.value = e.aoId
   } else {
     id.value = ids.value?.[0]
   }
@@ -295,14 +425,13 @@ const parentTableUpdate = (e) => {
   dialogVisible.value = true
 }
 // 父表格删除
-const parentTableDelete = (e) => {
+const parentTableDelete = async (e) => {
   const delList = ref([])
   if (e) {
-    delList.value = [e.name]
+    delList.value = [e.aoId]
   } else {
     delList.value = ids.value
   }
-  console.log(delList.value)
   ElMessageBox.confirm(
     '确定要删除这些数据吗?',
     'Warning',
@@ -312,10 +441,13 @@ const parentTableDelete = (e) => {
       type: 'warning',
     }
   )
-    .then(() => {
+    .then(async () => {
-      ElMessage({
+      await allocateOrder(delList.value.toString()).then(e => {
-        type: 'success',
+        ElMessage({
-        message: '删除完成',
+          type: 'success',
+          message: '删除完成',
+        })
+        getParentTable()
       })
     })
     .catch(() => {
@@ -327,6 +459,12 @@ const parentTableDelete = (e) => {
 
 }
 
+const setMaterialList = (materialCategories) => {
+  getMaterialList({materialCategories}).then(e => {
+    materialList.value = e.data
+  })
+}
+
 // 添加子表格行
 const addDialogTableCell = () => {
   dialogtable.value.push({})
@@ -334,9 +472,15 @@ const addDialogTableCell = () => {
 
 // dialog提交
 const dialogSubmit = () => {
-  console.log(dialogForm)
+
-  console.log(dialogtable.value)
+  addAllocateOrder(dialogForm.value).then(e => {
-  dialogVisible.value = false
+    console.log(e)
+    addAllocateOrderDetail({WmsAllocateOrderDetailBo: dialogtable.value.map(item=>{return {...item,allocateCode: e.msg, }})}).then(v => {
+      dialogVisible.value = false
+      getParentTable()
+    })
+
+  })
 }
 </script>
 <style>