<template>
<div>
<div v-show="Isshow">
<el-collapse>
<el-collapse-item name="1" title="表头">
<el-checkbox-group v-model="checkboxVal">
<el-checkbox
v-for="(thead, index) in formTheadOptions"
:key="`thead_${index}`"
:label="thead.name"
>{{ thead.name }}</el-checkbox>
</el-checkbox-group>
</el-collapse-item>
</el-collapse>
</div>
<el-table
id="applyTable"
:key="key"
:data="tableData"
style="width: 100%"
ref="multipleTable"
row-key="RowsKeyId"
size="mini"
border
:expand-row-keys="expands"
:show-summary="IsshowSummary"
:summary-method="Summary"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@select="handleSelect"
@select-all="handleSelect"
@header-dragend="headChange"
@row-dblclick="rowDBlclick"
@sort-change="changeTableSort"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="60" v-if="IsShowCheckbox"></el-table-column>
<el-table-column width="29"></el-table-column>
<el-table-column
v-for="(fruit, index) in formThead"
:key="`fruit_${index}`"
:label="fruit.name"
:prop="formThead[index].prop"
align="center"
show-overflow-tooltip
:width="formThead[index].width"
:resizable="true"
class-name="canmove"
:sortable="Issortable"
:sort-method="sortMethod"
>
<template slot-scope="scope">{{ scope.row[formThead[index].prop] }}</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200" v-if="IsShowInline">
<el-button type="primary" size="mini" @click="handleDelete(scope.$index)">删除</el-button>
</el-table-column>
</el-table>
<div class="tablepaging" style="margin-top:10px">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNumber"
:page-sizes="pageList"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import { getSummaries, Deduplicate } from "@/utils/validate";
import Common from "@/utils/common";
import Sortable from "sortablejs";
import { saveHead, getHead } from "@/api/getData";
export default {
data() {
return {
tableData: [],
key: 1, // table key
checkboxVal: [],
formThead: [], // 默认表头 Default header
expands: [], //列表要展开的数据
pageList: [20, 30, 40, 50], //每页显示个数选择器的选项设置
pageSize: 20, //每页显示条目个数
pageNumber: 1, //当前页数
total: 0, //总条数
saveListIn: [], //勾选的数据
sortable: null,
newtableData: [],
saveList: [],
Id: 0, //用于用户进入详情的ID
originalTable: []
};
},
props: {
formTheadOptions: {
//表头数据
type: Array
},
requsetUrl: {
//获取列表的URL
type: String,
default: ""
},
RequestData: {
type: Object //获取列表请求数据
},
IsshowSummary: {
type: Boolean //是否合计
},
SumType: {
type: Array //合计字段
},
Isshow: {
type: Boolean //是否可以自定义表头
},
IsShowInline: {
type: Boolean //table行内删除按钮是否显示
},
Issortable: {
type: Boolean //是否显示排序
},
IsShowCheckbox: {
type: Boolean //是否显示表内复选框
},
HeaderType: {
type: Number //列头类型,用来记录列头宽度和顺序 品目= 1, 部门= 3, 角色 = 4, 员工 = 5, 客户 = 6, 供应商 = 7, 客户订单 = 8, 采购单 = 9, 仓库 = 10, 入仓单 = 11, 在库 = 12, 出仓单 = 13, 送货 = 14
}
},
watch: {
checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(
i => valArr.indexOf(i.name) >= 0
);
// this.key = this.key + 1; // 为了保证table 每次都会重渲
},
requsetUrl: {
handler: function() {
if (this.requsetUrl !== "") {
this.getTableList();
}
},
deep: true
}
},
async mounted() {
this.formTheadOptions.forEach(item => {
this.checkboxVal.push(item.name);
});
await this.getTableList();
if (Number(this.HeaderType) !== 0 && this.formTheadOptions) {
this.rowDrop();
this.columnDrop();
}
},
methods: {
//合计
Summary(param) {
let sums = [];
if (this.tableData.length > 0 && this.SumType.length > 0) {
sums = getSummaries(param, this.SumType, this.tableData);
}
return sums;
},
//行拖拽
rowDrop() {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
}
});
},
//列拖拽
columnDrop() {
let self = this;
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
self.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
handle: ".canmove",
onEnd: evt => {
if (evt.oldIndex < 2 || evt.newIndex < 2) {
self.$message.error("此列不能拖动");
} else {
let oldindex = evt.oldIndex - 2;
let newindex = evt.newIndex - 2;
let oldItem = this.formTheadOptions[oldindex]; //找到要移动的数据
this.formTheadOptions.splice(oldindex, 1); //把数据从就得数据中删除
this.formTheadOptions.splice(newindex, 0, oldItem); //将旧的数组中将就得数据在新的位置上插入
let Data = {
ModuleEnum: this.HeaderType,
ColList: []
};
if (this.formTheadOptions.length > 0) {
this.formTheadOptions.forEach(formTheadOptionsItem => {
let ColList = {
Name: formTheadOptionsItem.name,
Prop: formTheadOptionsItem.prop,
Width: formTheadOptionsItem.width
};
Data.ColList.push(ColList);
});
}
this.saveHead(Data);
}
}
});
},
//获得列表数据
async getTableList() {
this.tableData = [];
this.RequestData.Data.PageNumber = this.pageNumber;
this.RequestData.Data.PageSize = this.pageSize;
let data = await Common(this.requsetUrl, this.RequestData);
if (data.StatusCode !== 0) {
this.$message.error(data.Message);
} else {
if (data.Message !== null) {
this.$message.error(data.Message);
} else {
this.tableData = data.Data.Rows;
this.total = data.Data.Total;
if (this.tableData.length > 0) {
this.tableData.forEach(tableDataItem => {
for (let pro in tableDataItem) {
//Id和RowsKeyId属性不在table上显示
if (
tableDataItem[pro] !== "Id" ||
tableDataItem[pro] !== "RowsKeyId"
) {
//如果table上某一属性是用布尔值来返回的,则在前端转换成相应的"是"或者“否”
if (
typeof tableDataItem[pro] === "boolean" &&
pro !== "IsProduct"
) {
let Item = "";
if (tableDataItem[pro]) {
Item = "可用";
} else {
Item = "停用";
}
tableDataItem[pro] = Item;
}
}
}
});
}
}
}
this.$emit("dataLoaded", "");
},
//换页
async handleSizeChange(val) {
this.pageSize = val;
await this.getTableList();
this.toggleSelection();
},
async handleCurrentChange(val) {
this.pageNumber = val;
await this.getTableList();
this.toggleSelection();
},
handleSelect(row, val) {
let self = this;
self.saveList = self.saveList.filter(item => {
let judgement = true;
self.tableData.forEach(items => {
if (item.RowsKeyId === items.RowsKeyId || items != items) {
judgement = false;
} else {
if (items.children) {
if (items.children.length > 0) {
items.children.forEach(childrenItem => {
if (
item.RowsKeyId == childrenItem.RowsKeyId ||
childrenItem != childrenItem
) {
judgement = false;
}
});
} else {
judgement = false;
}
}
}
});
return judgement;
});
row.forEach(item => {
self.saveList.push(item);
});
//当不勾选某条数据时,将该条数据从savelist中清除,Exit用来判断是去掉勾选数据还是勾上数据,如果Exit有值则说明是勾上数据,如果undefined则说明是无数据
if (val) {
let Exit = row.find(item => item.RowsKeyId === val.RowsKeyId);
//全选和全不选
if (val.Fid === 0) {
//当带有子单的数据被勾选上或者不被勾选上,子单状态和主单状态保持一致
if (val.children.length > 0) {
//如果勾选带有子单的主单,则将主单下的子单全部勾选上
if (Exit) {
val.children.forEach(item => {
self.$refs.multipleTable.toggleRowSelection(item, true);
self.saveList.push(item);
});
} else {
//如果去掉勾选状态的带有子单的主单,则将主单下的子单全部勾选状态清空
val.children.forEach(item => {
self.$refs.multipleTable.toggleRowSelection(item, false);
self.saveList.push(item);
});
}
} else {
//如果勾选的主单不带有子单
if (Exit) {
self.saveList.push(val);
} else {
let list = self.saveList.find(
items => items.RowsKeyId === val.RowsKeyId
);
if (list) {
self.saveList.splice(items => val.RowsKeyId === list.RowsKeyId);
}
}
}
} //如果勾选的是子单
else {
if (Exit) {
self.saveList.push(val);
} else {
let list = self.saveList.find(
items => items.RowsKeyId === val.RowsKeyId
);
if (list) {
self.saveList.splice(items => val.RowsKeyId === list.RowsKeyId);
}
}
}
}
//去重
self.saveList = Deduplicate(self.saveList);
this.Id = 0;
this.$emit("func", this.saveList, this.Id);
},
rowDBlclick(row) {
this.Id = row.Id;
this.ExchangeUnitId = row.ExchangeUnitId;
this.saveList = [];
if (this.Id) {
this.$emit("func", this.saveList, this.Id);
} else if (this.ExchangeUnitId) {
this.$emit("func", this.saveList, this.ExchangeUnitId);
}
// this.$emit("func", this.saveList, this.Id);
},
//勾选框状态保存
toggleSelection() {
let self = this;
if (self.saveList) {
self.saveList.forEach(item => {
self.$nextTick(() => {
let checkRow = self.tableData.find(
tableRow => tableRow.RowsKeyId === item.RowsKeyId
);
if (self.tableData.length > 0) {
self.tableData.forEach(tableItem => {
if (tableItem.RowsKeyId === item.RowsKeyId) {
this.$refs.multipleTable.toggleRowSelection(tableItem, true);
} else {
if (tableItem.children.length > 0) {
tableItem.children.forEach(childItem => {
if (childItem.RowsKeyId === item.RowsKeyId) {
this.$refs.multipleTable.toggleRowSelection(
childItem,
true
);
}
});
}
}
});
}
});
});
}
},
//删除
handleDelete(index) {
this.tableData.splice(index, 1);
},
//保存表头的宽度和顺序
async saveHead(Data) {
let res = await saveHead(Data);
if (res.StatusCode !== 0) {
this.$message.error(res.Message);
}
},
//拖动表头改变列宽
headChange(newWidth, oldWidth, column, event) {
setTimeout(() => {
let applyTable = document.getElementById("applyTable");
let applyTableColgroup = applyTable.getElementsByTagName("colgroup")[0];
let applyTableCol = applyTableColgroup.getElementsByTagName("col");
for (let i = 0; i < applyTableCol.length; i++) {
if (i < this.formTheadOptions.length) {
this.formTheadOptions[i].width = applyTableCol[i + 2].width;
}
}
let Data = {
ModuleEnum: this.HeaderType,
ColList: []
};
if (this.formTheadOptions.length > 0) {
this.formTheadOptions.forEach(formTheadOptionsItem => {
let ColList = {
Name: formTheadOptionsItem.name,
Prop: formTheadOptionsItem.prop,
Width: formTheadOptionsItem.width
};
Data.ColList.push(ColList);
});
}
this.saveHead(Data);
}, 100);
},
changeTableSort(e) {
if (this.originalTable.length === 0) {
this.originalTable = JSON.parse(JSON.stringify(this.tableData));
}
if (e.order) {
this.tableData = this.tableData.sort((a, b) => {
let tempA = a[e.prop] || 0;
let tempB = b[e.prop] || 0;
return parseFloat(tempA) - parseFloat(tempB);
});
} else {
this.tableData = JSON.parse(JSON.stringify(this.originalTable));
}
},
sortMethod(a, b) {},
handleSelectionChange(val) {
this.saveList = val;
this.saveList = Deduplicate(this.saveList);
this.Id = 0;
this.$emit("func", this.saveList, this.Id);
},
handleRowClick(row){
let multipleTable = this.$refs.multipleTable;
multipleTable.toggleRowSelection(row);
}
}
};
</script>