HL-5421 修改物料隔离申请的新增表单，增加汇总页，以便于快速查看已选择的明细库存的汇总数量

src/components/BasicForm/src/BasicForm.vue

@@ -7,7 +7,7 @@
     :vLoading="formLoading"
     @updateFullscreen="updateFullscreen"
   >
-    <div style="overflow-y: auto" :style="{ 'max-height': formHeight }">
+    <div style="overflow-y: auto" :style="formHeight">
       <Form
         ref="formRef"
         :rules="rules"
@@ -78,11 +78,17 @@
           <el-input v-model="formSchema.value" v-if="isDetail && formTypeDetail == 'InputString'" />
         </template>
       </Form>
-      <div class="table" v-if="(isBusiness && formType == 'create' && fromeWhere != 'countPlan')||(isBusiness && formType == 'update' && updateTypeEdiltSubList && fromeWhere != 'countPlan')">
+      <Tabs ref="tabRef" v-if="tableAllSchemas&&tableAllSchemas.tableFormColumns.find(item=>item.field == 'itemCode')" :tabsList="[{
+        label: '明细',
+        prop: 'TableForm'
+      },{
+        label: '汇总',
+        prop: 'CollectionTable'
+      }]" v-model="tabSheet" @change="tabChange"/>
+      <div class="table" v-if="(tabSheet=='TableForm'&&isBusiness && formType == 'create' && fromeWhere != 'countPlan')||(tabSheet=='TableForm'&&isBusiness && formType == 'update' && updateTypeEdiltSubList && fromeWhere != 'countPlan')">
         <TableForm
           ref="tableFormRef"
           class="w-[100%]"
-          :maxHeight="490"
           :tableFields="tableAllSchemas.tableFormColumns"
           :tableData="tableData"
           :tableFormRules="tableFormRules"
@@ -117,7 +123,7 @@
           </template>
         </TableForm>
       </div>
-      <div v-if="isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
+      <div v-if="tabSheet=='TableForm'&&isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
         <TableFormCountPlan
           :tableFields="tableAllSchemas.tableFormColumns"
           :tableData="tableData"
@@ -129,6 +135,12 @@
           @handleDeleteTable="handleDeleteTable"
         />
       </div>
+      <div v-if="tableAllSchemas&&tableAllSchemas.tableFormColumns.find(item=>item.field == 'itemCode')" v-show="tabSheet=='CollectionTable'">
+        <CollectionTable
+        :tableFields="tableAllSchemas?tableAllSchemas.tableFormColumns:[]"
+        :tableData="tableData"
+        ></CollectionTable>
+      </div>
     </div>
     <template #footer>
       <slot name="foorter"></slot>
@@ -154,6 +166,7 @@ import TableForm from '@/components/TableForm/src/TableForm.vue'
 import TableFormCountPlan from '@/components/TableFormCountPlan/src/TableFormCountPlan.vue'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { tableFormBlurVer, FormBlur, getListByBottonInput } from '@/api/wms/business/inputBlur'
+import CollectionTable from '@/components/CollectionTable/src/CollectionTable.vue'
 import { isString } from 'min-dash'
 const count = ref(0)
 
@@ -367,9 +380,23 @@ if (props.basicFormWidth) {
 } else {
   dialogWidth.value = props.isBusiness ? '60%' : '40%'
 }
-const formHeight = ref('60vh')
+const formHeight = ref({
+  height:'60vh'
+})
+if(!props.tableAllSchemas){
+  formHeight.value = {
+    height:'auto'
+  }
+}
+const collectionRef = ref()
 const updateFullscreen = (isFullscreen) => {
-  formHeight.value = isFullscreen ? 'auto' : '60vh'
+  formHeight.value.height = isFullscreen ? 'auto' : '60vh'
+  nextTick(()=>{
+    tableFormRef.value?.reloadFullscreen(isFullscreen)
+    collectionRef.value?.reloadFullscreen(isFullscreen)
+    
+  })
+
 }
 
 const dialogVisible = ref(false) // 弹窗的是否展示
@@ -384,8 +411,11 @@ const tableFormRules = ref(props.tableFormRules)
 const route = useRoute() // 路由信息
 const routeName = ref('')
 const sureDisabled = ref(false)
+const tabSheet = ref('TableForm')
 routeName.value = route.name
-
+const tabChange = (item) => {
+  tabSheet.value = item.prop
+}
 // 列表-按钮
 // const buttondata = [
 //   defaultButtons.mainListEditBtn(null), // 编辑
@@ -622,6 +652,7 @@ const open = async (
   titleName?: any,
   alltitleName?: any
 ) => {
+  tabSheet.value = "TableForm"
   dialogVisible.value = true
   if (alltitleName) {
     dialogTitle.value = alltitleName
@@ -1059,7 +1090,6 @@ defineExpose({
   padding: 10px;
   width: calc(100% - 32px);
   display: flex;
-}
   ::v-deep(.el-table__body) {
     padding: 10px 0px;
   }
@@ -1080,6 +1110,7 @@ defineExpose({
   ::v-deep(.el-icon) {
     display: block;
   }
+}
 button .button {
   > div {
     display: flex;

src/components/CollectionTable/src/CollectionTable.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-checkbox-group v-model="checkList" @change="checkChange">
+    <el-checkbox v-for="item in fields.filter(item=>item.checkBoxOption)" :label="item.label" :value="item.label" :disabled="item.checkedDisabled"/>
+  </el-checkbox-group>
+  <el-table v-clientTableForm="{
+    isShowPagination:false,
+    isShowButton: false,
+    isFullscreen:isFullscreen
+  }" class="collection" :data="showList"  border :style="{width:tableWidth+'px'}">
+    <el-table-column type="index" width="60" label="序号" align="center"/>
+    <el-table-column  border row-key="id"
+        v-for="headerItem in fields.filter((item) => !!item.checked)"
+        :label="headerItem.label"
+        :prop="headerItem.field"
+        align="center"
+        :width="headerItem.width"
+    >
+    <template v-if="headerItem.label=='状态'" #default="scope">
+      <span>{{ getStatus(scope.row,headerItem.field) }}</span>
+
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+const { t } = useI18n() // 国际化
+
+const props = defineProps({
+  // 列表数据
+  tableData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  // 列表头定义
+  tableFields: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
+const fields = ref([{
+    field: 'itemCode',
+    label:'物料',
+    checkBoxOption:true, // 显示在checkbox中作为选项
+    checked:true, //checkbox 是否勾选
+    checkedDisabled:true, // checkbox 是否禁用
+    width:200
+},{
+    field: 'batch',
+    label:'批次',
+    checkBoxOption:true, // 显示在checkbox中作为选项
+    checked:false, //checkbox 是否勾选
+    checkedDisabled:false, // checkbox 是否禁用
+    width:100
+},{
+    field: 'locationCode',
+    label:'库位',
+    checkBoxOption:true, // 显示在checkbox中作为选项
+    checked:false, //checkbox 是否勾选
+    checkedDisabled:false, // checkbox 是否禁用
+    width:150
+},{
+    field: 'inventoryStatus',
+    label:'状态',
+    dictType: DICT_TYPE.INVENTORY_STATUS,
+    checkBoxOption:true, // 显示在checkbox中作为选项
+    checked:false, //checkbox 是否勾选
+    checkedDisabled:false, // checkbox 是否禁用
+    width:100,
+},{
+    field: 'totalCount',
+    label:'数量',
+    checkBoxOption:false, // 显示在checkbox中作为选项
+    checked:true,
+    width:100
+}])
+
+const inventoryStatusList = getStrDictOptions(DICT_TYPE.INVENTORY_STATUS)
+const getStatus = (row,field)=>{
+  let findStatus = inventoryStatusList.find(item=>item.value == row[field])
+  if(findStatus){
+    return findStatus.label
+  }else{
+    return row[field]
+  }
+}
+
+// 批次
+let batchField = props.tableFields.find(item=>item.field=='fromBatch'||item.field=='batch')
+if(batchField){//更新使用字段
+  fields.value[1].field = batchField.field
+  fields.value[1].checkBoxOption = true
+  
+}else{//子表没有的字段隐藏
+  fields.value[1].checkBoxOption = false
+}
+
+
+// 库位
+let locationField = props.tableFields.find(item=>item.field=='fromLocationCode'||item.field=='locationCode')
+if(locationField){//更新使用字段
+  fields.value[2].field = locationField.field
+  fields.value[2].checkBoxOption = true
+}else{//子表没有的字段隐藏
+  fields.value[2].checkBoxOption = false
+}
+
+// 状态
+let inventoryStatusField = props.tableFields.find(item=>item.field=='fromInventoryStatus'||item.field=='inventoryStatus')
+if(inventoryStatusField){//更新使用字段
+  fields.value[3].field = inventoryStatusField.field
+  fields.value[3].checkBoxOption = true
+}else{//子表没有的字段隐藏
+  fields.value[3].checkBoxOption = false
+}
+
+
+console.log('fields',fields.value)
+const tableWidth = ref(360)
+const checkList = ref(['物料'])
+const checkChange = (value)=>{
+  console.log('checkChange',value)
+  let width = 0
+  fields.value.forEach(item=>{
+    if(value.includes(item.label) || item.field=='totalCount'){
+      item.checked = true
+      width += item.width
+    }else{
+      item.checked = false
+    }
+  })
+  tableWidth.value = width + 60
+  nextTick(()=>{
+    updateShowList()
+  })
+}
+
+const showList = ref([])
+const updateShowList = ()=>{
+    showList.value = []
+    //数量的field 对象
+    const qtyField = props.tableFields.find(item=>item['field']=='qty')
+    //子表所有数据
+    let tableData = JSON.parse(JSON.stringify(props.tableData))
+    //用于存入重复数据index
+    let removeIndexs = [] 
+    for(let i=0;i<tableData.length;i++){
+      //重复数据进行过滤
+      if(removeIndexs.indexOf(i)>-1){
+        continue
+      }
+      let tableItem = tableData[i]
+      //不存在的数量，根据ts配置进行默认赋值
+      if(!tableItem['qty']){
+        tableItem['totalCount'] =Number(qtyField.min)
+      }else{
+        tableItem['totalCount'] = Number(tableItem['qty'])
+      }
+
+      //查找是否有相同数据
+      for(let j=i+1;j<tableData.length;j++){
+        let tempItem = tableData[j]
+        if(!tempItem['qty']){
+          //不存在 赋默认值
+          tempItem['qty'] = Number( qtyField.min) || 0
+        }
+        
+        //默认相等
+        let equal = true;
+        for (let k = 0; k < fields.value.length; k++) {
+          const fieldItem = fields.value[k];
+          // checkBoxOption：在checkbox的列表中
+          // checked：被勾选
+          if(fieldItem.checkBoxOption&&fieldItem.checked){
+            if(tableItem[fieldItem['field']]+''!==tempItem[fieldItem['field']]+''){
+              equal = false
+              break
+            }
+          }
+        }
+        //匹配到的相同数据存入removeIndexs中不进行下次计算，并且数量进行累计
+        if(equal){
+          removeIndexs.push(j) 
+          tableItem['totalCount'] = Number(tableItem['totalCount'])+Number(tempItem['qty'])
+        }
+      }
+      showList.value.push(tableItem)
+    }
+    console.log('汇总showList',showList.value)
+}
+updateShowList()
+watch(
+  () => props.tableData,
+  () => {
+    console.log('汇总props.tableData',props.tableData)
+    updateShowList()
+  },
+  {
+    deep: true
+  }
+)
+
+const isFullscreen = ref(false)
+const reloadFullscreen = (fullscreen)=>{
+  isFullscreen.value = fullscreen
+}
+defineExpose({
+  reloadFullscreen
+})
+</script>
+<style lang="scss" scoped>
+
+</style>