表格拖拽
<!-- 教务处 -->
<template>
<div class="but">
<el-button @click="mergeAndPrintArrays()" type="primary">保存数据</el-button>
<el-button @click="restoration()" type="primary">数据还原</el-button>
</div>
<div class="container">
<div class="left">
<el-table :data="myArray" row-key="id" ref="table1" id="table1">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="state" label="前台是否展示" width="90">
<template v-slot="scope">
<el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="state" label="是否作为搜索条件" width="120">
<template v-slot="scope">
<el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
<div class="left">
<el-table :data="myArray2" row-key="id" ref="table2" id="table2">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="state" label="前台是否展示" width="90">
<template v-slot="scope">
<el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="state" label="是否作为搜索条件" width="120">
<template v-slot="scope">
<el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
<div class="left">
<el-table :data="myArray3" row-key="id" ref="table3" id="table3">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="state" label="前台是否展示" width="90">
<template v-slot="scope">
<el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="state" label="是否作为搜索条件" width="120">
<template v-slot="scope">
<el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
<div class="left">
<el-table :data="myArray4" row-key="id" ref="table4" id="table4">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="state" label="前台是否展示" width="90">
<template v-slot="scope">
<el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="state" label="是否作为搜索条件" width="120">
<template v-slot="scope">
<el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
<div class="left">
<el-table :data="myArray5" row-key="id" ref="table5" id="table5">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="state" label="前台是否展示" width="90">
<template v-slot="scope">
<el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="state" label="是否作为搜索条件" width="120">
<template v-slot="scope">
<el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import Sortable from "sortablejs";
import webfield from "@/api/sys/webfield";
import notifyService from "@/api/notify/notifyService";
export default {
data() {
return {
dataList: [],
earchVisible: true,
loading: false,
myArray: [],
myArray2: [],
myArray3: [],
myArray4: [],
myArray5: [],
userName: "",
userNameF: "",
companyDTO: '',
ids: '',
newtype: ''
};
},
props: ["value1"],
mounted() {
this.refreshList();
},
async created() {
var userInfo = this.$TOOL.data.get("USER_INFO");
this.userName = userInfo.id;
this.companyDTO = userInfo.companyDTO.id;
},
methods: {
// 获取数据 初始化
refreshList() {
// this.newtype = JSON.parse(this.value1)
// console.log(this.newtype, 'new11')
this.loading = true;
const params = {
officeId: this.companyDTO,
type: 1,
};
webfield.webfieldinit(params).then((data) => {
this.dataList = JSON.parse(data.data.content)
this.ids = data.data.id
console.log(data, "disa")
this.assignDataToArrays();
this.loading = false;
}).catch((error) => {
console.error('Error fetching data:', error);
this.loading = false;
});
},
// 获取数据 平均分配
assignDataToArrays() {
this.myArray = [];
this.myArray2 = [];
this.myArray3 = [];
this.myArray4 = [];
this.myArray5 = [];
// 计算每个数组应该分配的数据量
const chunkSize = Math.ceil(this.dataList.length / 5);
// 将 dataList 的数据平均分配到五个数组中
for (let i = 0; i < this.dataList.length; i++) {
if (i < chunkSize) {
this.myArray.push(this.dataList[i]);
} else if (i < chunkSize * 2) {
this.myArray2.push(this.dataList[i]);
} else if (i < chunkSize * 3) {
this.myArray3.push(this.dataList[i]);
} else if (i < chunkSize * 4) {
this.myArray4.push(this.dataList[i]);
} else {
this.myArray5.push(this.dataList[i]);
}
}
this.initSortable();
},
initSortable() {
const initSortableForTable = (tableRef, dataArray, num) => {
const tbody = this.$refs[tableRef].$el.querySelector(".el-table__body-wrapper tbody");
Sortable.create(tbody, {
onEnd: ({ newIndex, oldIndex, to, from, clone, pullMode, item }) => {
const totableid = to.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id
const fromtableid = from.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id
//id映射
const tablemap = {
table1: this.myArray,
table2: this.myArray2,
table3: this.myArray3,
table4: this.myArray4,
table5: this.myArray5,
}
if (totableid == fromtableid) {
const currRow = dataArray.splice(oldIndex, 1)[0];
dataArray.splice(newIndex, 0, currRow);
} else {
//不一致 跨列拖动
const currRow = tablemap[fromtableid].splice(oldIndex, 1)[0];
// //向to添加一个元素
tablemap[totableid].splice(newIndex, 0, currRow);
//from table会少一列
if (tablemap[totableid][newIndex + 1]) {
//如果 to table 的下一行有数据 补充回fromtable的oldindx
tablemap[fromtableid].splice(oldIndex, 0, tablemap[totableid][newIndex + 1])
//得删除to table的数据
tablemap[totableid].splice(newIndex + 1, 1)
} else if (tablemap[totableid][newIndex - 1]) {
tablemap[fromtableid].splice(oldIndex, 0, tablemap[totableid][newIndex - 1])
//得删除to table的数据
tablemap[totableid].splice(newIndex - 1, 1)
} else {
console.error("前后都没有数据 无法补充")
}
// console.log(this.myArray, this.myArray2)
}
},
group: 'zhaoxin'
});
};
initSortableForTable('table1', this.myArray);
initSortableForTable('table2', this.myArray2);
initSortableForTable('table3', this.myArray3);
initSortableForTable('table4', this.myArray4);
initSortableForTable('table5', this.myArray5);
},
//合并数组 保存数据
mergeAndPrintArrays() {
// console.log(JSON.parse(this.value1), 'oooooooooooo')
// this.newtype = JSON.parse(JSON.stringify(this.options))[0].value
this.newtype = JSON.parse(this.value1)
// 合并三个数组
const mergedArray = [...this.myArray, ...this.myArray2, ...this.myArray3, ...this.myArray4, ...this.myArray5];
const news = JSON.stringify(mergedArray);
this.loading = true;
// 构建请求参数对象
const params = {
officeId: this.companyDTO,
type: this.newtype,
content: news,
operatorId: this.userName,
};
const newparams = {
officeId: this.companyDTO,
type: this.newtype,
content: news,
operatorId: this.userName,
id: this.ids
};
if (this.ids === '') {
console.log('空啦')
webfield.webfieldadd(params).then((response) => {
location.reload(true);
this.loading = false;
}).catch((error) => {
console.error('Error fetching data:', error);
this.loading = false;
});
} else {
console.log("不空")
console.log(this.myArray, 'cuirow')
webfield.webfieldadd(newparams).then((response) => {
location.reload(true);
this.loading = false;
}).catch((error) => {
console.error('Error fetching data:', error);
this.loading = false;
});
}
},
// 控制显隐
stateChanged(row) {
const index = this.myArray.findIndex(item => item.id === row.id);
console.log('Row index:', index);
console.log('Row data:', row);
},
// 还原数据
restoration() {
this.loading = true;
console.log(this.loading, 'loading'); // 修正了拼写错误，从 'loda' 改为 'loading'
if (this.ids === '' || this.ids === undefined || this.ids === null) {
console.log('kong ')
alert('已经还原成最初的原始数据了！');
this.loading = false; // 如果不需要刷新页面，可以在这里直接设置 loading 为 false
} else {
console.log(this.ids, 'konglllll ')
webfield.webfielddel(this.ids).then((data) => {
console.log(data)
this.assignDataToArrays();
location.reload(true); // 仅在数据删除成功后刷新页面
}).catch((error) => {
console.error('Error fetching data:', error);
this.loading = false; // 请求失败时设置 loading 为 false
});
}
}
},
};
</script>
<style lang="less" scoped>
.but {
margin-bottom: 3rem;
}
.container {
display: flex;
margin-bottom: 50rem;
.left,
.right {
background-color: #fff;
width: 282px;
height: 1000px;
margin: 0 4px;
padding: 0 -8px;
.item {
height: 40px;
border: 1px solid #e9e9e9;
text-align: center;
line-height: 40px;
margin: 20px 0;
background-color: rgb(242, 242, 242);
}
}
}
</style>
