|
@@ -1,4 +1,4 @@
|
|
|
-import Sortablejs from "sortablejs";
|
|
|
+import Sortablejs from 'sortablejs'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -21,17 +21,17 @@ export default {
|
|
|
// 保存表格所有页面所选中的数据
|
|
|
dataRadioId: [],
|
|
|
// 保存表格单选的数据 保存数据的id
|
|
|
- dataRadioId: ""
|
|
|
- };
|
|
|
+ dataRadioId: ''
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
if (this.isHeigth) {
|
|
|
- window.addEventListener("resize", this.getHeight);
|
|
|
- this.getHeight();
|
|
|
+ window.addEventListener('resize', this.getHeight)
|
|
|
+ this.getHeight()
|
|
|
}
|
|
|
- this.dataCurrentPage = this.currentPage;
|
|
|
- this.dataPageSize = this.pageSize;
|
|
|
- this.requestData();
|
|
|
+ this.dataCurrentPage = this.currentPage
|
|
|
+ this.dataPageSize = this.pageSize
|
|
|
+ this.requestData()
|
|
|
},
|
|
|
mounted() {
|
|
|
//行拖拽
|
|
@@ -41,37 +41,37 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
getHeight() {
|
|
|
- this.height = window.innerHeight - this.shiyHeigth;
|
|
|
+ this.height = window.innerHeight - this.shiyHeigth
|
|
|
},
|
|
|
// 通过请求获取数据
|
|
|
requestData(options) {
|
|
|
- let pageNum = undefined;
|
|
|
- let pageSize = undefined;
|
|
|
+ let pageNum = undefined
|
|
|
+ let pageSize = undefined
|
|
|
|
|
|
if (options) {
|
|
|
- pageNum = options.pageNum;
|
|
|
- pageSize = options.pageSize;
|
|
|
+ pageNum = options.pageNum
|
|
|
+ pageSize = options.pageSize
|
|
|
}
|
|
|
|
|
|
if (this.requestUrl) {
|
|
|
// 处理请求地址逻辑
|
|
|
- let url;
|
|
|
- if (this.requestUrl.indexOf("//") > -1) {
|
|
|
- url = this.requestUrl;
|
|
|
+ let url
|
|
|
+ if (this.requestUrl.indexOf('//') > -1) {
|
|
|
+ url = this.requestUrl
|
|
|
} else {
|
|
|
- url = this.requestUrl;
|
|
|
+ url = this.requestUrl
|
|
|
}
|
|
|
// 判断是否需要在请求体中放入参数
|
|
|
if (this.requestQuery) {
|
|
|
- this.dataRequestQuery = this.requestQuery;
|
|
|
+ this.dataRequestQuery = this.requestQuery
|
|
|
}
|
|
|
- let data = undefined;
|
|
|
+ let data = undefined
|
|
|
for (const key in this.dataRequestQuery) {
|
|
|
- const val = this.dataRequestQuery[key];
|
|
|
+ const val = this.dataRequestQuery[key]
|
|
|
|
|
|
if (val || val == 0) {
|
|
|
- if (!data) data = {};
|
|
|
- data[key] = val;
|
|
|
+ if (!data) data = {}
|
|
|
+ data[key] = val
|
|
|
}
|
|
|
}
|
|
|
//判断是否是带分页查询
|
|
@@ -86,16 +86,17 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
.then(response => {
|
|
|
- let d = response.data.data;
|
|
|
- this.dataTabel = d.list;
|
|
|
- this.dataTotal = d.total;
|
|
|
+ let d = response.data.data
|
|
|
+ this.dataTabel = d.list
|
|
|
+ this.dataTotal = d.total
|
|
|
//执行成功的回调
|
|
|
- this.$emit("func", response.data.data);
|
|
|
- this.refreshColumnData(d.columnData);
|
|
|
+ this.$emit('func', response.data.data)
|
|
|
+ this.refreshColumnData(d.columnData)
|
|
|
//this.$refs.mainTable.getTableConfig();
|
|
|
- this.isShow = true;
|
|
|
- });
|
|
|
+ this.isShow = true
|
|
|
+ })
|
|
|
} else {
|
|
|
+ this.dataCurrentPage = 1
|
|
|
// 发送请求
|
|
|
this.axios
|
|
|
.post(url, data, {
|
|
@@ -106,27 +107,27 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
.then(response => {
|
|
|
- let d = response.data.data;
|
|
|
- this.dataTabel = d.list;
|
|
|
- this.dataTotal = d.total;
|
|
|
+ let d = response.data.data
|
|
|
+ this.dataTabel = d.list
|
|
|
+ this.dataTotal = d.total
|
|
|
//执行成功的回调
|
|
|
- this.$emit("func", response.data.data);
|
|
|
- this.refreshColumnData(d.columnData);
|
|
|
+ this.$emit('func', response.data.data)
|
|
|
+ this.refreshColumnData(d.columnData)
|
|
|
//this.$refs.mainTable.getTableConfig();
|
|
|
- this.isShow = true;
|
|
|
- });
|
|
|
+ this.isShow = true
|
|
|
+ })
|
|
|
}
|
|
|
} else {
|
|
|
- console.warn("requestUrl 参数不能为 null");
|
|
|
+ console.warn('requestUrl 参数不能为 null')
|
|
|
}
|
|
|
},
|
|
|
// 刷新表头显示数据
|
|
|
refreshColumnData(columnData) {
|
|
|
// 如果前端有写表头,则加在后端表头前面
|
|
|
- const d = this.columnData.concat(columnData);
|
|
|
+ const d = this.columnData.concat(columnData)
|
|
|
// 把操作列拼接到最后一列
|
|
|
- this.dataColumnData = d;
|
|
|
- this.dataDropColumn = [].concat(this.dataColumnData);
|
|
|
+ this.dataColumnData = d
|
|
|
+ this.dataDropColumn = [].concat(this.dataColumnData)
|
|
|
},
|
|
|
// 排序回调
|
|
|
sortChange({ column, prop, order }) {
|
|
@@ -151,108 +152,108 @@ export default {
|
|
|
|
|
|
// 后端排序
|
|
|
let s = {
|
|
|
- ascending: "asc",
|
|
|
- descending: "desc"
|
|
|
- };
|
|
|
+ ascending: 'asc',
|
|
|
+ descending: 'desc'
|
|
|
+ }
|
|
|
|
|
|
let value = {
|
|
|
orderType: s[order] || undefined,
|
|
|
orderField: order ? prop : undefined
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- this.setDataRequestQuery(value);
|
|
|
+ this.setDataRequestQuery(value)
|
|
|
},
|
|
|
// 更新请求参数
|
|
|
setDataRequestQuery(value) {
|
|
|
- let q = this.dataRequestQuery;
|
|
|
+ let q = this.dataRequestQuery
|
|
|
for (const key in value) {
|
|
|
- q[key] = value[key];
|
|
|
+ q[key] = value[key]
|
|
|
}
|
|
|
- this.requestData(q);
|
|
|
- this.$emit("update:requestQuery", q);
|
|
|
- this.dataRequestQuery = q;
|
|
|
+ this.requestData(q)
|
|
|
+ this.$emit('update:requestQuery', q)
|
|
|
+ this.dataRequestQuery = q
|
|
|
},
|
|
|
// 格式化字符串
|
|
|
getString(str) {
|
|
|
if (str != null && str != undefined && str.toString) {
|
|
|
- return str.toString();
|
|
|
+ return str.toString()
|
|
|
} else {
|
|
|
- return str || "";
|
|
|
+ return str || ''
|
|
|
}
|
|
|
},
|
|
|
// 当某一行被点击时会触发该事件
|
|
|
rowClick(row, column, event) {
|
|
|
- if (this.selectionType == "radio") {
|
|
|
+ if (this.selectionType == 'radio') {
|
|
|
if (this.dataRadioId == row.ROW_ID) {
|
|
|
- this.dataRadioId = "";
|
|
|
- row = {};
|
|
|
+ this.dataRadioId = ''
|
|
|
+ row = {}
|
|
|
} else {
|
|
|
- this.dataRadioId = row.ROW_ID;
|
|
|
+ this.dataRadioId = row.ROW_ID
|
|
|
}
|
|
|
- this.$emit("radio-change", row);
|
|
|
+ this.$emit('radio-change', row)
|
|
|
}
|
|
|
},
|
|
|
// 多选的选中行改变回调
|
|
|
selectionChange(selection) {
|
|
|
// this.dataSelection = selection;
|
|
|
// 将多选中的数据抛出
|
|
|
- this.$emit("selection-change", selection);
|
|
|
+ this.$emit('selection-change', selection)
|
|
|
},
|
|
|
// 当表格的筛选条件发生变化的时候会触发该事件,
|
|
|
// 参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。
|
|
|
filterChange(filters) {
|
|
|
- let value = {};
|
|
|
+ let value = {}
|
|
|
for (const key in filters) {
|
|
|
- value[key] = filters[key].length > 0 ? filters[key] : undefined;
|
|
|
+ value[key] = filters[key].length > 0 ? filters[key] : undefined
|
|
|
}
|
|
|
// 每次筛选时,都默认将页面改为第一页,避免数据过少时,显示没有数据
|
|
|
- this.currentChange(1, false);
|
|
|
- this.setDataRequestQuery(value);
|
|
|
+ this.currentChange(1, false)
|
|
|
+ this.setDataRequestQuery(value)
|
|
|
},
|
|
|
// 行拖拽
|
|
|
rowDrop() {
|
|
|
- const tbody = document.querySelector(".el-table__body-wrapper tbody");
|
|
|
- const _this = this;
|
|
|
+ const tbody = document.querySelector('.el-table__body-wrapper tbody')
|
|
|
+ const _this = this
|
|
|
Sortablejs.create(tbody, {
|
|
|
onEnd({ newIndex, oldIndex }) {
|
|
|
- const currRow = _this.dataTabel.splice(oldIndex, 1)[0];
|
|
|
- _this.dataTabel.splice(newIndex, 0, currRow);
|
|
|
+ const currRow = _this.dataTabel.splice(oldIndex, 1)[0]
|
|
|
+ _this.dataTabel.splice(newIndex, 0, currRow)
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
// 列拖拽
|
|
|
columnDrop() {
|
|
|
- const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
|
|
|
+ const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
|
|
|
this.sortablejs = Sortablejs.create(wrapperTr, {
|
|
|
animation: 180,
|
|
|
delay: 0,
|
|
|
- handle: ".allowDrag",
|
|
|
+ handle: '.allowDrag',
|
|
|
onEnd: evt => {
|
|
|
// 因为序号列和单多选列不在数组中,所以需要进行偏移计算
|
|
|
- const offset = this.dragColumnOffset;
|
|
|
- evt.oldIndex -= offset;
|
|
|
- evt.newIndex -= offset;
|
|
|
+ const offset = this.dragColumnOffset
|
|
|
+ evt.oldIndex -= offset
|
|
|
+ evt.newIndex -= offset
|
|
|
// 换列
|
|
|
- const oldItem = this.dataDropColumn[evt.oldIndex];
|
|
|
- this.dataDropColumn.splice(evt.oldIndex, 1);
|
|
|
- this.dataDropColumn.splice(evt.newIndex, 0, oldItem);
|
|
|
+ const oldItem = this.dataDropColumn[evt.oldIndex]
|
|
|
+ this.dataDropColumn.splice(evt.oldIndex, 1)
|
|
|
+ this.dataDropColumn.splice(evt.newIndex, 0, oldItem)
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
// current-page 改变时会触发
|
|
|
currentChange(val, isRequest = true) {
|
|
|
if (isRequest) {
|
|
|
- this.requestData({ pageNum: val });
|
|
|
+ this.requestData({ pageNum: val })
|
|
|
}
|
|
|
// 最后通知父节点页面改变
|
|
|
- this.dataCurrentPage = val;
|
|
|
- this.$emit("update:current-page", val);
|
|
|
+ this.dataCurrentPage = val
|
|
|
+ this.$emit('update:current-page', val)
|
|
|
},
|
|
|
// pageSize 改变时会触发
|
|
|
sizeChange(val) {
|
|
|
- this.dataPageSize = val;
|
|
|
- this.requestData({});
|
|
|
- this.$emit("update:size-change", val);
|
|
|
+ this.dataPageSize = val
|
|
|
+ this.requestData({})
|
|
|
+ this.$emit('update:size-change', val)
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -260,53 +261,53 @@ export default {
|
|
|
dataSortable() {
|
|
|
return function(item) {
|
|
|
if (item.template) {
|
|
|
- return false;
|
|
|
+ return false
|
|
|
} else if (item.sortable) {
|
|
|
- return item.sortable;
|
|
|
+ return item.sortable
|
|
|
} else {
|
|
|
- return this.sortable;
|
|
|
+ return this.sortable
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
// 计算每列的最小宽度
|
|
|
dataColumnMinWidth() {
|
|
|
return function(item) {
|
|
|
- let mw = 0;
|
|
|
+ let mw = 0
|
|
|
if (this.dataSortable(item)) {
|
|
|
// 如果使用排序功能
|
|
|
- mw += 30;
|
|
|
+ mw += 30
|
|
|
}
|
|
|
|
|
|
if (item.filters && item.filters.length > 0) {
|
|
|
- mw += 20;
|
|
|
+ mw += 20
|
|
|
}
|
|
|
if (item.label) {
|
|
|
- mw += item.label.toString().length * 30;
|
|
|
+ mw += item.label.toString().length * 30
|
|
|
}
|
|
|
- return mw;
|
|
|
- };
|
|
|
+ return mw
|
|
|
+ }
|
|
|
},
|
|
|
// 计算拖拽列的偏移差
|
|
|
dragColumnOffset() {
|
|
|
- let o = 0;
|
|
|
+ let o = 0
|
|
|
if (this.showIndex) {
|
|
|
- o++;
|
|
|
+ o++
|
|
|
}
|
|
|
- if (this.selectionType != "") {
|
|
|
- o++;
|
|
|
+ if (this.selectionType != '') {
|
|
|
+ o++
|
|
|
}
|
|
|
- return o;
|
|
|
+ return o
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
requestQuery: {
|
|
|
deep: true,
|
|
|
handler(val, oldVal) {
|
|
|
- let q = this.dataRequestQuery;
|
|
|
+ let q = this.dataRequestQuery
|
|
|
for (const key in val) {
|
|
|
- q[key] = val[key] ? val[key] : undefined;
|
|
|
+ q[key] = val[key] ? val[key] : undefined
|
|
|
}
|
|
|
- this.setDataRequestQuery(q);
|
|
|
+ this.setDataRequestQuery(q)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -316,18 +317,18 @@ export default {
|
|
|
componentProxy: {
|
|
|
props: {
|
|
|
html: {
|
|
|
- default: ""
|
|
|
+ default: ''
|
|
|
},
|
|
|
scope: {
|
|
|
default() {
|
|
|
- return {};
|
|
|
+ return {}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
template: ``,
|
|
|
created() {
|
|
|
- this.$options.template = this.html;
|
|
|
+ this.$options.template = this.html
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|