<template>
|
<div style="padding: 10px;">
|
<el-table v-loading="loading" :data="tableData" ref="deptTable" max-height="550"
|
@selection-change="handleSelectionChange" show-summary border @row-click="handleRowClick" :row-style="rowStyle"
|
@cell-dblclick="handleDblclick">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column align="center" label="sorderid" type="index" sortable width="80" />
|
<el-table-column align="center" v-for="(item, index) in btList" :key="index" :prop="item.ColmCols"
|
:label="item.ColmCols" :width="flexWidth(item.ColmCols, tableData, item.ColmCols)" sortable>
|
<template slot-scope="{row, column }">
|
<span>{{ row[column.label] }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="pageSize" @pagination="currentPage" />
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
export default {
|
name: 'Warehouse',
|
components: {},
|
data() {
|
return {
|
subDisabled: false,//编辑页面保存按钮是否禁用(true禁用，false可用)
|
OperationType: null,//保存类型（新增1修改3）
|
HInterID: null,
|
baseURL: 'http://47.96.97.237/API',
|
user: 'admin',
|
currentRow: [],
|
lastSelectedRowIndex: null, // 用于记录上次点击的行索引
|
lastSelectedRow: null, // 上一次选中的行
|
selectedRow: null, // 当前选中的行
|
rowForm: {},
|
checkedSysZb: [],
|
editData: [],
|
activeName: 'first',
|
searchOpen: false,
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 日期范围
|
dateRange: [],
|
// 查询参数
|
queryParams: {
|
单据号: undefined,
|
},
|
// 显示搜索条件
|
showSearch: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 遮罩层
|
loading: true,
|
tyResList: [],
|
btList: [],
|
tableData: [],
|
page: 1,
|
pageSize: 50,
|
total: 0,
|
scollHeight: document.body.clientHeight * (38.056 / 100),
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
客户: [
|
{ required: true, message: "客户不能为空", trigger: "blur" }
|
],
|
日期: [
|
{ required: true, message: "日期不能为空", trigger: "blur" }
|
],
|
hl: [
|
{ required: true, message: "汇率不能为空", trigger: "blur" }
|
]
|
}
|
};
|
},
|
created() {
|
this.getList();
|
},
|
|
methods: {
|
getList() {
|
let sWhere = ''
|
this.loading = true
|
axios.get(this.baseURL + '/Gy_Warehouse/list', {
|
params: { "sWhere": sWhere, "user": this.user, "Organization": '浙江智云迈思' },
|
}).then(response => {
|
if (response.data.count == 1) {
|
this.btList = response.data.list
|
this.tyResList = response.data.data//总数据
|
this.tableData = this.getPage(this.page, this.tyResList)//数据分页
|
this.total = response.data.data.length;
|
this.loading = false;
|
}
|
}).catch(error => {
|
this.$modal.msgError("接口请求失败!");
|
});
|
},
|
getPage(page, list) {
|
let sindex = (parseInt(page) - 1) * this.pageSize
|
let eindex = parseInt(page) * this.pageSize
|
let newList = list.slice(sindex, eindex)
|
return newList
|
},
|
currentPage(val) {
|
this.loading = true
|
this.page = val.page
|
setTimeout(() => {
|
this.tableData = this.getPage(this.page, this.tyResList)
|
this.loading = false
|
}, 100)
|
},
|
renderHeader(h, { column, $index }) {// 新建一个 span
|
let span = document.createElement(span)// 设置表头名称
|
span.innerText = column.label
|
//临时插入 document
|
document.body.appendChild(span)// 重点:获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时column.minWidth=span.getBoundingClientRect().width + 50.//移除 document 中临时的 span
|
document.body.removeChild(span)
|
return h(span, column.label)
|
},
|
flexWidth(prop, tableData, title, num = 0) {
|
if (tableData.length === 0) {//表格没数据不做处理
|
return;
|
}
|
let flexWidth = 0;//初始化表格列宽
|
let columnContent = '';//占位最宽的内容
|
if (prop.includes('日期')) {
|
flexWidth = 110
|
} else {
|
let canvas = document.createElement("canvas");
|
let context = canvas.getContext("2d");
|
context.font = "14px Microsoft YaHei";
|
if ((prop === '') && title) {//标题长内容少的，取标题的值,
|
columnContent = title
|
} else {// 获取该列中占位最宽的内容
|
let index = 0;
|
for (let i = 0; i < tableData.length; i++) {
|
const now_temp = tableData[i][prop] + '';
|
const max_temp = tableData[index][prop] + '';
|
const now_temp_w = context.measureText(now_temp).width
|
const max_temp_w = context.measureText(max_temp).width
|
if (now_temp_w > max_temp_w) {
|
index = i;
|
}
|
}
|
columnContent = tableData[index][prop]
|
//比较占位最宽的值跟标题、标题为空的留出四个位置
|
const column_w = context.measureText(columnContent).width
|
const title_w = context.measureText(title).width
|
if (column_w < title_w) {
|
columnContent = title || '留四个字'
|
}
|
}
|
// 计算最宽内容的列宽
|
let width = context.measureText(columnContent);
|
flexWidth = width.width + 50 + num
|
}
|
return flexWidth + 'px';
|
},
|
//点击行
|
handleRowClick(row, column, event) {
|
this.lastSelectedRow = this.selectedRow; // 记录上一次选中的行
|
this.selectedRow = row; // 记录当前选中的行
|
this.lastSelectedRowIndex = this.tableData.indexOf(row);
|
this.$refs.deptTable.toggleRowSelection(row);
|
this.$emit('deptEmit', row,2)
|
},
|
//选中行高亮样式
|
rowStyle({ row, rowIndex }) {
|
if (this.ids.includes(row.HItemID)) {
|
return { "background": "#ecf5ff" }
|
}
|
},
|
//双击行
|
handleDblclick(row, column, cell, event) {
|
this.$emit('deptEmitDb', row,2);
|
// this.handleUpdate(row)
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
//单选
|
if (selection.length > 1) {
|
const del_row = selection.shift()
|
this.$refs.deptTable.toggleRowSelection(del_row, false) //设置这一行取消选中
|
}
|
this.rowForm = {}
|
this.ids = selection.map(item => item.HItemID)
|
this.rowForm = selection[0]
|
},
|
}
|
};
|
</script>
|
<style>
|
.xsckdBox .el-date-editor.el-input {
|
width: 100%;
|
}
|
</style>
|
