200 lines
5.7 KiB
Plaintext
200 lines
5.7 KiB
Plaintext
<template>
|
||
<el-popover
|
||
style="float: right"
|
||
placement="bottom-end"
|
||
width="250"
|
||
trigger="hover">
|
||
<div>
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="tableData"
|
||
:cell-style="cellStyle"
|
||
row-key="tableTitleSE"
|
||
tooltip-effect="dark"
|
||
style="width: 100%;"
|
||
max-height="400"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="tableTitle"
|
||
label="自定义显示列"
|
||
width="150">
|
||
</el-table-column>
|
||
<!-- <el-table-column-->
|
||
<!-- prop="tableProp"-->
|
||
<!-- label="字段"-->
|
||
<!-- show-overflow-tooltip>-->
|
||
<!-- </el-table-column>-->
|
||
</el-table>
|
||
<el-button style="margin-top: 10px;" type="primary" size="mini" @click="show">保存配置</el-button>
|
||
</div>
|
||
<el-button size="mini" type="primary" class="el-icon-caret-bottom" slot="reference">自定义列</el-button>
|
||
</el-popover>
|
||
</template>
|
||
|
||
<script>
|
||
import Sortable from 'sortablejs'
|
||
export default {
|
||
name: 'head-config',
|
||
props:{
|
||
propThis:Object,
|
||
layerid: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
tableData:[],
|
||
realList:[],
|
||
List:[],
|
||
}
|
||
},
|
||
mounted() {
|
||
const params={
|
||
tableName:this.propThis.tableName
|
||
}
|
||
this.$headerConfig.getRealList(params).then(data=>{
|
||
console.log("定位符而非")
|
||
if(data.data.data!==null){
|
||
let temp = JSON.parse(data.data.data)
|
||
this.realList = temp.headerList
|
||
this.List = temp.List
|
||
}else {
|
||
this.List = this.$headerConfig.getList(this.propThis.tableName)
|
||
this.realList = this.List
|
||
let temp ={
|
||
headerList:this.realList,
|
||
List:this.List
|
||
}
|
||
const params={
|
||
tableName:this.propThis.tableName,
|
||
configure:JSON.stringify(temp)
|
||
}
|
||
this.$headerConfig.updateRealList(params).then(value=>{
|
||
console.log(value)
|
||
})
|
||
}
|
||
this.propThis.indexShow = true;
|
||
const paramsF={
|
||
tableName:"bom",
|
||
configure:{
|
||
headerList:this.realList,
|
||
List:this.List
|
||
}
|
||
}
|
||
console.log(paramsF)
|
||
|
||
this.$emit("fathers", paramsF);
|
||
|
||
this.tableData = JSON.parse(JSON.stringify(this.List))
|
||
this.toggleSelection(JSON.parse(JSON.stringify(this.realList)))
|
||
this.dragSort();
|
||
|
||
})
|
||
|
||
|
||
|
||
},
|
||
methods:{
|
||
init() {
|
||
this.tableData = JSON.parse(JSON.stringify(this.List))
|
||
this.toggleSelection(JSON.parse(JSON.stringify(this.realList)))
|
||
this.dragSort();
|
||
},
|
||
cellStyle({ row, column, rowIndex, columnIndex }) {
|
||
let style = 'padding:6px;padding-top:6px;font-size:15px;'
|
||
return style
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val
|
||
},
|
||
dragSort() {
|
||
const el = this.$refs.multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
||
this.sortable = Sortable.create(el, {
|
||
ghostClass: 'sortable-ghost',
|
||
setData: function(dataTransfer) {
|
||
dataTransfer.setData('Text', '')
|
||
},
|
||
onEnd: e => {
|
||
//e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
|
||
const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
|
||
this.tableData.splice(e.newIndex, 0, targetRow);
|
||
let dragId = this.tableData[e.newIndex].tableTitleSE;//拖动行的id
|
||
let oneId, twoId
|
||
//拖动行的前一行
|
||
if (this.tableData[e.newIndex - 1]) {
|
||
oneId = this.tableData[e.newIndex - 1].tableTitleSE;
|
||
} else {
|
||
oneId = ""
|
||
}
|
||
//拖动行的后一行
|
||
if (this.tableData[e.newIndex + 1]) {
|
||
twoId = this.tableData[e.newIndex + 1].tableTitleSE;
|
||
} else {
|
||
twoId = ""
|
||
}
|
||
}
|
||
})
|
||
},
|
||
toggleSelection(rows) {
|
||
if (rows) {
|
||
rows.forEach(row => {
|
||
this.tableData.forEach(data=>{
|
||
if(data.tableTitleSE ===row.tableTitleSE){
|
||
this.$nextTick(function () {
|
||
this.$refs.multipleTable.toggleRowSelection(data,true);
|
||
})
|
||
}
|
||
})
|
||
});
|
||
} else {
|
||
this.$refs.multipleTable.clearSelection();
|
||
}
|
||
},
|
||
show() {
|
||
console.log("进入罗马")
|
||
this.propThis.indexShow=false
|
||
|
||
let tempData = JSON.parse(JSON.stringify(this.multipleSelection))
|
||
// console.log(tempData)
|
||
let i =0
|
||
this.tableData.forEach(data=>{
|
||
data.tableTitleSE = ++i
|
||
tempData.forEach(value=>{
|
||
if( value.tableProp === data.tableProp){
|
||
value.tableTitleSE = data.tableTitleSE
|
||
}
|
||
})
|
||
})
|
||
|
||
for (let i = 0; i <tempData.length - 1; i++) {
|
||
for (let j = 0; j < tempData.length - 1 - i; j++) {
|
||
if (tempData[j].tableTitleSE > tempData[j + 1].tableTitleSE) {
|
||
let temp = tempData[j];
|
||
tempData[j] = tempData[j + 1];
|
||
tempData[j + 1] = temp;
|
||
}
|
||
}
|
||
}
|
||
const params={
|
||
tableName:"bom",
|
||
configure:{
|
||
headerList:tempData,
|
||
List:this.tableData
|
||
}
|
||
}
|
||
// this.propThis.realList = []
|
||
this.$emit("fathers", params);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|