优化产品 物料 台账联动报表布局

src/components/LowDesign/src/LowReport/index.vue

@@ -50,11 +50,22 @@
         <div ref="tableHeightRef"></div>
       </template>
   
-
+      <template v-if="reportCode=='production_batch'" #spec=scope>
+       <div style="display:flex;justify-content:space-between;align-items:center;">
+        <span>产品规格：{{scope.row.spec}}</span>
+        <span>单位：{{scope.row.unit}}</span>
+        <span>生产批量：{{scope.row.batch_value}}</span>
+        <span>批量单位：{{scope.row.batch_unit}}</span>
+        <span>可产批数：{{scope.row.available_batches}}</span>
+       </div>
+      </template>
       <template #expand="scope" v-if="reportCode === 'production_batch'" >
-      <!-- 这里写你自定义的展开内容 -->
+        <div :style="'margin-left:'+(widthOther+12)+'px'">
           <otherReport reportCode="material_info" @select-row-change="handleSelectRowChange" :row="scope.row" />
           <otherReport ref="inventoryAccountRef" reportCode="inventory_account" v-if="selectRow.material_id" :row="selectRow" />
+        </div>
+      <!-- 这里写你自定义的展开内容 -->
+
 
       </template>
       <template  v-for="prop in searchReportSlots" :key="prop" #[`${prop}-search`]="scope" >
@@ -220,6 +231,7 @@ import { Console } from 'console'
 import { ruleLeng } from '../utils/util'
 import otherReport from './other.vue'
 const inventoryAccountRef=ref<any>({})
+const widthOther=ref<any>(250)
 const selectRow=ref<any>({})
 defineOptions({ name: 'LowReport' })
 
@@ -336,13 +348,18 @@ const selectIds = computed(() => {
   return tableSelect.value.map((item) => item['id'])
 })
 // 整行点击展开/收起
-const handleRowClick = (row) => {
+const handleRowClick = (row,column) => {
   if (props.reportCode !== 'production_batch') return
-
+if (column.property !== 'product_name') return
   const currentKey = row.product_id
+  function swap(i,j){
+      [tableData.value[i],tableData.value[j]] = [tableData.value[j],tableData.value[i]]
+  }
+  const index = tableData.value.findIndex(item => item.product_id === row.product_id)
+  if(index!==0)  swap(index,0)
  
   if (tableOption.value&&tableOption.value.expandRowKeys.length&&tableOption.value.expandRowKeys.includes(currentKey)) {
-    tableOption.value.expandRowKeys = [] // 关闭
+    // tableOption.value.expandRowKeys = [] // 关闭
   } else if(tableOption.value) {
     tableOption.value.expandRowKeys = [currentKey] // 只展开当前行
     selectRow.value={}
@@ -627,9 +644,11 @@ const initTable = async () => {
     expandWidth:1,
     rowKey:props.reportCode=='production_batch'?'product_id':undefined,
     expandRowKeys:[],
-    searchShow:props.reportCode=='zhxs-hz'?false:true,
+    searchShow:props.reportCode=='zhxs-hz'||props.reportCode=='production_batch'?false:true,
     searchShowBtn:props.reportCode=='zhxs-hz'?false:true,
     searchBtnText:'查询',
+    header:props.reportCode=='production_batch'?false:true,
+    
     column: {}
   }
   
@@ -673,6 +692,7 @@ const initTable = async () => {
 
   //   }
   // 处理动态列（暂不构建children，等数据返回后动态生成）
+
   dynamicFields.forEach(async (item, index) => {
     if (item.parentFieldCode && item.parentFieldCode !== '') return
     const config: any = {
@@ -861,9 +881,12 @@ const initTable = async () => {
      }else{
       tableOption.value.column[item.fieldCode] = config
      }
-    
+    if(props.reportCode=='production_batch'&&config.prop=='product_name'){
+      widthOther.value=Number(config.width)
+    tableOption.value.column['product12']={...config,prop:'product12',label:'product12',hide:false,width:10,widthOld:10}
+   }
   })
-  
+  console.log(tableOption.value,12312312)
   isInit.value = true
   searchChange()
   initTableLayout()
@@ -943,7 +966,12 @@ const getTableData = async (isLoading = true) => {
       // 获取数据
     
       let data = await ReportApi.getTableList(props.reportCode, searchObj)
- 
+     if(props.reportCode=='production_batch'){
+      data.records.forEach(item=>{
+        item.product12 = '1'
+        item.product_name = item.product_name+'('+item.product_id+')'
+      })
+     }
       // 功能测试：CS_DTBT报表使用模拟数据
       if (props.reportCode === 'CS_DTBT') {
         data = {
@@ -1037,6 +1065,7 @@ const getTableData = async (isLoading = true) => {
         // 按分组字段值对数据进行分组
         const groupedData = {}
         data.records.forEach(record => {
+         
           const groupValue = record[groupField.fieldCode]
           if (!groupedData[groupValue]) {
             groupedData[groupValue] = []
@@ -1184,7 +1213,8 @@ const getTableData = async (isLoading = true) => {
         'zhxs-hz':['板块'],
         'stgoodTop10':['产品名称'],
         'capacity_utilization':['车间名称'],
-        'product_sales_inventory':['类别/品种']
+        'product_sales_inventory':['类别/品种'],
+        'production_batch':['产品id','产品名称','product12']
       }
       Object.keys(tableOption.value.column).forEach(key=>{
         const showCols=Object.values(tableOption.value.column).filter(item=>!item.hide)
@@ -1204,7 +1234,12 @@ const getTableData = async (isLoading = true) => {
 
       if (isLoading) loading.value = false
       selectRow.value={}
+      if(tableData.value.length){
+       tableOption.value.expandRowKeys = [tableData.value[0].product_id] // 只展开当前行
+      }else{
         tableOption.value.expandRowKeys=[]
+      }
+    selectRow.value={}
       resolve()
     }
   })
@@ -1324,7 +1359,37 @@ defineExpose({
 
 <style lang="scss" scoped>
 
+  .low-report__production_batch>.avue-crud{
+  //  & :deep(.el-table thead ){
+  //     display: none;
+  //   }
+    & :deep(>.avue-crud__body>.el-card__body>.el-form>.el-table>.el-table__inner-wrapper>.el-table__header-wrapper){
+     display: none;
+   }
+  //  & :deep(>.avue-crud__body>.el-card__body>.el-form>.el-table>.el-table__inner-wrapper>.el-table__body-wrapper>.el-scrollbar>.el-scrollbar__wrap>.el-scrollbar__view>.el-table__body>.tbody ){
       
+  //   }
+    :deep(>.avue-crud__body>.el-card__body>.el-form>.el-table>.el-table__inner-wrapper>.el-table__body-wrapper>.el-scrollbar>.el-scrollbar__wrap>.el-scrollbar__view>.el-table__body>tbody){
+       &>tr>td:nth-of-type(3){
+          border-bottom-color:#fff !important;
+          background-color: #fff !important;
+         .cell{
+          opacity: 0;
+         }
+        }
+        &>tr:nth-of-type(n+2)>td:nth-of-type(3){
+          border-right-color:#fff !important;
+        }
+        &>tr:nth-of-type(n+2)>td:nth-of-type(4){
+          border-bottom-color:#fff !important;
+          border-left-color:#fff !important;
+          background-color: #fff !important;
+         .cell{
+          opacity: 0;
+         }
+        }
+      }
+    }
   :deep(.el-form-item--default){
     margin-bottom: 10px;
   }
@@ -1349,7 +1414,11 @@ defineExpose({
 
   :deep(.el-table){
       --el-table-border-color: #000;
-
+      .el-table__expand-column{
+        .cell{
+          display: none;
+        }
+      }
      .is-group th.el-table__cell,th.el-table__cell{
       background-color: #C6EFFE;
       }