直接调拨单：包装容器出入库明细

duhe

2025-12-02 53b9fd4ccaec6f8f08cdefc07d871fa254ec0164

直接调拨单：包装容器出入库明细

 src/views/KCGL/MoveStockBill/Kf_MoveStockBillList.vue

@@ -141,6 +141,9 @@
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-printer" size="mini" :disabled="single" @click="get_BarCodeDetail">条码明细</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-printer" size="mini" :disabled="single" @click="get_PackStockDetail">包装容器出入库明细</el-button>
      </el-col>
    </el-row>
    <div class="tableBox" v-loading="loading">
      <el-table :data="tableData" ref="tableData" max-height="710" :summary-method="getSummaries"
@@ -186,6 +189,8 @@
      </el-dialog>
      <!-- 条码明细 -->
      <BarCodeDetail :visible.sync="barCodeDetailShow" ref="barcodeDetail"/>
      <!-- 包装容器出入库明细 -->
      <PackStockDetail :visible.sync="packStockDetailShow" ref="packStockDetail"/>
    </div>
  </div>
</template>
@@ -196,11 +201,12 @@
import RowSettings from '@/views/component/rowSettings'                   //列设置组件
import PrintList from '@/views/component/printList'                       //打印组件
import BarCodeDetail from '@/views/component/BarCodeDetail'               //条码明细组件
import PackStockDetail from '@/views/component/PackStockDetail'               //条码明细组件
import Edit from '@/views/KCGL/MoveStockBill/Kf_MoveStockBillEdit.vue'    //编辑页面组件

export default {
  name: 'Kf_MoveStockBillList',
  components: { RowSettings, Edit, PrintList,BarCodeDetail },
  components: { RowSettings, Edit, PrintList,BarCodeDetail,PackStockDetail },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,                //后端接口前缀(后端服务器ip地址)
@@ -252,6 +258,7 @@
      openRowHide: false,                                   //列设置组件显示标记
      rowHideShow: false,                                   //列设置组件容器显示标记
      barCodeDetailShow: false,                             //条码明细组件容器显示标记
      packStockDetailShow:false,                            //包装容器出入库明细容器显示标记
      
      
      
@@ -834,6 +841,19 @@
        },
    //#endregion

    //#region 包装容器出入库明细
    get_PackStockDetail() {
      // if (this.selectedRow.length !== 1) {
      //   this.$message.warning('请选择一行数据查看条码明细！')
      //   return
      // }
      this.packStockDetailShow = true
      this.$nextTick(() => {
        this.$refs.packStockDetail.open(this.rowForm)
      })
        },
    //#endregion

    //#region 退出
    close() {
      // this.reset()

 src/views/component/PackStockDetail/index.vue

New file
@@ -0,0 +1,335 @@
<template>
  <div class="barcode-detail">
    <el-dialog
      :visible.sync="dialogVisible"
      title="包装容器出入库记录表"
      width="90%"
      top="5vh"
      :close-on-click-modal="false"
      @closed="handleClosed"
    >
      <el-card>
        <div class="dialog-content">
          <el-form :model="formData" label-width="100px" class="form-container">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="单据内码">
                  <el-input v-model="formData.HInterID" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据号">
                  <el-input v-model="formData.HBillNo" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据类型">
                  <el-input v-model="formData.HBillType" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div class="table-toolbar">
            <el-button size="mini" @click="handleColumnSetting">
              <i class="el-icon-setting"></i> 列设置
            </el-button>
          </div>

          <el-table
            ref="mainTable"
            :data="tableData"
            border
            stripe
            style="width: 100%"
            :loading="loading"
            @selection-change="handleSelectionChange"
            show-summary
            :summary-method="getSummaries"
          >
            <el-table-column type="selection" width="55" fixed="left" />
            <el-table-column
              v-for="column in tableColumns"
              :key="column.field"
              :prop="column.field"
              :label="column.title"
              :width="column.width"
              :align="column.align"
              :fixed="column.fixed"
              :sortable="column.sortable"
              :show-overflow-tooltip="true"
            >
              <template v-if="column.editable" #default="scope">
                <el-input
                  v-model="scope.row[column.field]"
                  size="mini"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-dialog>

    <el-dialog
      :visible.sync="columnDialogVisible"
      title="隐藏列设置"
      width="50%"
    >
      <div class="column-setting">
        <el-checkbox-group v-model="selectedColumns">
          <el-checkbox
            v-for="column in allColumns"
            :key="column.field"
            :label="column.field"
          >
            {{ column.title }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer">
        <el-button @click="columnDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="applyColumnSettings">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'BarCodeDetail',
  data() {
    return {
      formData: {                                   //用于查询的参数
        HInterID: '',
        HBillNo: '',
        HBillType: ''
      },
      loading: false,                               //页面加载动画显示标记
      dialogVisible: false,                         //包装容器出入库明细数据显示标记
      columnDialogVisible: false,                   //列设置按钮显示标记
      
      tableData: [],                                //表格数据
      tableColumns: [],                             //表格列数据
      allColumns: [],                               
      selectedColumns: [],
      selectedRows: [],
      baseURL: process.env.VUE_APP_BASE_URL || "http://47.96.97.237/API/"
    }
  },
  methods: {
    //#region 页面初始化
    open(record) {
      if (!record) {
        this.$message.warning('请选择要查看条码明细的单据')
        return
      }

      const hmainid = record.hmainid || record.HInterID
      const billNo = record.单据号 || record.HBillNo
      
    
      let billTypeDesc = ''
      switch (record.单据类型 || '') {
        case '1201': billTypeDesc = '外购入库单'; break
        case '1202': billTypeDesc = '产品入库单'; break
        case '1203': billTypeDesc = '其它入库单'; break
        case '1204': billTypeDesc = '生产领料'; break
        case '1205': billTypeDesc = '销售出库'; break
        case '1206': billTypeDesc = '其它出库单'; break
        case '1207': billTypeDesc = '直接调拨单'; break
        case '1210': billTypeDesc = '委外加工入库单'; break
        case '1211': billTypeDesc = '委外加工出库单'; break
        default: billTypeDesc = record.单据类型 || ''
      }

      this.formData = {
        HInterID: hmainid,
        HBillNo: billNo,
        HBillType: billTypeDesc
      }

      this.dialogVisible = true
      this.$nextTick(() => {
        this.loadData(hmainid, record.单据类型 || '', billNo)
      })
    },
    //#endregion

    //#region 查询数据
    async loadData(HInterID, HBillType, HBillNo) {
      this.loading = true
      try {
        const sWhere = " and hmainid = " +  `${HInterID}` ;
        
        const url = `${this.baseURL}/Kf_ICStockInOutBill/Kf_PackStockDetailQuery`
        const params = { sWhere }
        
        const response = await axios.get(url, { params })
        const data = response.data

        if (data && data.list) {
          this.generateTableColumns(data.list)
          this.tableData = data.data || []
          this.applyColumnSettingsFromStorage()
        } else {
          this.$message.error('获取包装容器出入库明细数据失败')
        }
      } catch (error) {
        console.error('加载包装容器出入库明细失败:', error)
        this.$message.error('加载包装容器出入库明细失败')
      } finally {
        this.loading = false
      }
    },
    //#endregion

    //#region 根据表格列数据进行进一步处理
    generateTableColumns(columnList) {
      const columns = []
      const allColumns = []

      
      columns.push({
        type: 'selection',
        width: 55,
        fixed: 'left'
      })

      columnList.forEach((item, index) => {
        const colName = item.ColmCols
        let columnConfig = {
          field: colName,
          title: colName,
          width: 200,
          align: 'center',
          sortable: true
        }

   
        switch (colName) {
          case 'HItemID':
            columnConfig.hide = true
            break
          case '数量':
            columnConfig.total = true
            break
        }

        columns.push(columnConfig)
        allColumns.push({ ...columnConfig })
      })

      this.tableColumns = columns
      this.allColumns = allColumns
      this.selectedColumns = allColumns.map(col => col.field)
    },
    //#endregion

    //#region 获取选中行数据
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    //#endregion

    //#region 列设置
    handleColumnSetting() {
      this.columnDialogVisible = true
    },

    applyColumnSettings() {
      this.tableColumns = [
        this.tableColumns[0], 
        ...this.allColumns.filter(col => this.selectedColumns.includes(col.field))
      ]
      this.columnDialogVisible = false
      
  
      this.saveColumnSettings()
    },

    applyColumnSettingsFromStorage() {

    },


    saveColumnSettings() {
   
    },

    //#endregion

    //#region 合计行计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
      })

      return sums
    },
    //#endregion

    //#region 页面关闭方法
    handleClosed() {
      this.tableData = []
      this.tableColumns = []
      this.selectedRows = []
    }
    //#endregion
  }
}
</script>

<style scoped>
.barcode-detail {
  font-family: "Microsoft YaHei", sans-serif;
}

.form-container {
  margin-bottom: 16px;
}

.table-toolbar {
  margin-bottom: 12px;
}

.column-setting {
  max-height: 400px;
  overflow-y: auto;
}

.column-setting .el-checkbox {
  display: block;
  margin-bottom: 8px;
}

:deep(.el-dialog__body) {
  padding: 10px 20px;
}

:deep(.el-card__body) {
  padding: 12px;
}
</style>