<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_API || "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>
|
