<template>
|
<div style="padding: 10px">
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
ref="workTypeTable"
|
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: "Dept",
|
components: {},
|
data() {
|
return {
|
subDisabled: false, //编辑页面保存按钮是否禁用(true禁用，false可用)
|
OperationType: null, //保存类型（新增1修改3）
|
HInterID: null,
|
baseURL: process.env.VUE_APP_BASE_API || "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();
|
},
|
props: {
|
openType: {
|
Type: Number,
|
default: 1,
|
},
|
},
|
methods: {
|
// 工种
|
getList() {
|
let sWhere = "";
|
if (this.openType == 2) {
|
sWhere += `禁用标记='' and 审核人<>''`;
|
}
|
this.loading = true;
|
axios
|
.get(this.baseURL + "/Gy_ClassTimePrjController/GetGy_ClassTimePrjList_Json", {
|
params: { sWhere: sWhere, HMaker: this.user, OperationType: 1 },
|
})
|
.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, 1);
|
},
|
//选中行高亮样式
|
rowStyle({ row, rowIndex }) {
|
if (this.ids.includes(row.HItemID)) {
|
return { background: "#ecf5ff" };
|
}
|
},
|
//双击行
|
handleDblclick(row, column, cell, event) {
|
this.$emit("deptEmitDb", row, "CTPrj");
|
// 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>
|
