<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">
|
<div class="table-toolbar">
|
<el-button size="mini" @click="handleColumnSetting">
|
<i class="el-icon-setting"></i> 列设置
|
</el-button>
|
</div>
|
<el-table ref="mainTable" border stripe style="width: 100%"
|
:data="tableData" @selection-change="handleSelectionChange" :loading="loading"
|
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: 'Kf_ICInventory_Mould',
|
data() {
|
return {
|
baseURL: process.env.VUE_APP_BASE_API, //后端接口前缀
|
dialogVisible: false, //弹窗显示标记
|
columnDialogVisible: false, //列设置显示标记
|
loading: false, //table表格加载标记
|
formData: { //表头数据
|
HInterID: '',
|
HBillNo: '',
|
HBillType: ''
|
},
|
tableData: [], //table表格数据
|
tableColumns: [], //table表格列数据
|
allColumns: [], //列设置table表格
|
selectedColumns: [],
|
selectedRows: [], //选中行记录数据
|
}
|
},
|
methods: {
|
open(record) {
|
if (!record) {
|
this.$message.warning('请选择要查看库存的容器')
|
return
|
}
|
|
const HMaterID = record.HMaterID; //容器ID
|
const HWHID = record.HWHID; //仓库ID
|
const HSPID = record.HSPID; //仓位ID
|
|
this.dialogVisible = true
|
this.$nextTick(() => {
|
this.loadData(HMaterID, HWHID , HSPID);
|
})
|
},
|
|
//#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 页面初始化 加载数据
|
async loadData(HMaterID, HWHID , HSPID) {
|
this.loading = true
|
var sWhere = "' and HMaterID = " + HMaterID + " '";
|
var sql = "exec h_p_Kf_ICInventory_Mould " + sWhere;
|
var ModRightNameCheck = "";
|
axios.get(this.$baseUrl + "/CommonModel/searchMethod", {
|
params: {
|
"sql": sql
|
, "user": sessionStorage["HUserName"]
|
, "ModRightNameCheck": ModRightNameCheck
|
}
|
}).then(response => {
|
var data1 = response.data
|
if (data1.count == 1) {
|
this.generateTableColumns(data1.list);
|
this.tableData = data1.data || [];
|
this.applyColumnSettingsFromStorage();
|
this.loading = false;
|
}
|
else {
|
this.$message.error('获取条码明细数据失败');
|
this.loading = false;
|
}
|
});
|
},
|
//#endregion
|
|
//#region 对查询数据进行处理，为渲染table、列设置table提供数据
|
generateTableColumns(columnList) {
|
const columns = [] //table表格列数据
|
const allColumns = [] //列设置table表格数据
|
|
//增加复选框列
|
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 '数量':
|
columnConfig.total = true
|
break
|
}
|
|
columns.push(columnConfig) //table表格列数据 添加数据
|
allColumns.push({ ...columnConfig }) //列设置table表格数据 添加数据
|
})
|
|
this.tableColumns = columns
|
this.allColumns = allColumns
|
this.selectedColumns = allColumns.map(col => col.field)
|
},
|
//#endregion
|
|
//#region table选中行监听变更，获取选中行数据
|
handleSelectionChange(selection) {
|
this.selectedRows = selection
|
},
|
//#endregion
|
|
//#region 列设置按钮点击事件监听
|
handleColumnSetting() {
|
this.columnDialogVisible = true
|
},
|
//#endregion
|
|
//#region 列设置保存
|
saveColumnSettings() {
|
|
},
|
//#endregion
|
|
//#region 列设置确定按钮点击事件监听
|
applyColumnSettings() {
|
this.tableColumns = [
|
this.tableColumns[0],
|
...this.allColumns.filter(col => this.selectedColumns.includes(col.field))
|
]
|
this.columnDialogVisible = false
|
this.saveColumnSettings()
|
},
|
//#endregion
|
|
//#region 列设置 根据列设置显示table列
|
applyColumnSettingsFromStorage() {
|
|
},
|
//#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>
|
