保存数据..."> 保存数据..." />

table 拖拽移动

表格拖拽 

 Sortable.js中文网|配置

  1. <!-- 教务处  -->
  2.  
  3. <template>
  4.     <div class="but">
  5.         <el-button @click="mergeAndPrintArrays()" type="primary">保存数据</el-button>
  6.         <el-button @click="restoration()" type="primary">数据还原</el-button>
  7.     </div>
  8.     <div class="container">
  9.         <div class="left">
  10.             <el-table :data="myArray" row-key="id" ref="table1" id="table1">
  11.                 <el-table-column prop="name" label="姓名"></el-table-column>
  12.                 <el-table-column prop="state" label="前台是否展示" width="90">
  13.                     <template v-slot="scope">
  14.                         <el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
  15.                     </template>
  16.                 </el-table-column>
  17.                 <el-table-column prop="state" label="是否作为搜索条件" width="120">
  18.                     <template v-slot="scope">
  19.                         <el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
  20.                     </template>
  21.                 </el-table-column>
  22.             </el-table>
  23.  
  24.         </div>
  25.  
  26.         <div class="left">
  27.             <el-table :data="myArray2" row-key="id" ref="table2" id="table2">
  28.                 <el-table-column prop="name" label="姓名"></el-table-column>
  29.                 <el-table-column prop="state" label="前台是否展示" width="90">
  30.                     <template v-slot="scope">
  31.                         <el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
  32.                     </template>
  33.                 </el-table-column>
  34.                 <el-table-column prop="state" label="是否作为搜索条件" width="120">
  35.                     <template v-slot="scope">
  36.                         <el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
  37.                     </template>
  38.                 </el-table-column>
  39.             </el-table>
  40.  
  41.         </div>
  42.  
  43.         <div class="left">
  44.             <el-table :data="myArray3" row-key="id" ref="table3" id="table3">
  45.                 <el-table-column prop="name" label="姓名"></el-table-column>
  46.                 <el-table-column prop="state" label="前台是否展示" width="90">
  47.                     <template v-slot="scope">
  48.                         <el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
  49.                     </template>
  50.                 </el-table-column>
  51.                 <el-table-column prop="state" label="是否作为搜索条件" width="120">
  52.                     <template v-slot="scope">
  53.                         <el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
  54.                     </template>
  55.                 </el-table-column>
  56.             </el-table>
  57.  
  58.         </div>
  59.  
  60.  
  61.         <div class="left">
  62.             <el-table :data="myArray4" row-key="id" ref="table4" id="table4">
  63.                 <el-table-column prop="name" label="姓名"></el-table-column>
  64.                 <el-table-column prop="state" label="前台是否展示" width="90">
  65.                     <template v-slot="scope">
  66.                         <el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
  67.                     </template>
  68.                 </el-table-column>
  69.                 <el-table-column prop="state" label="是否作为搜索条件" width="120">
  70.                     <template v-slot="scope">
  71.                         <el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
  72.                     </template>
  73.                 </el-table-column>
  74.             </el-table>
  75.  
  76.         </div>
  77.  
  78.  
  79.         <div class="left">
  80.             <el-table :data="myArray5" row-key="id" ref="table5" id="table5">
  81.                 <el-table-column prop="name" label="姓名"></el-table-column>
  82.                 <el-table-column prop="state" label="前台是否展示" width="90">
  83.                     <template v-slot="scope">
  84.                         <el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" />
  85.                     </template>
  86.                 </el-table-column>
  87.                 <el-table-column prop="state" label="是否作为搜索条件" width="120">
  88.                     <template v-slot="scope">
  89.                         <el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" />
  90.                     </template>
  91.                 </el-table-column>
  92.             </el-table>
  93.  
  94.         </div>
  95.  
  96.     </div>
  97.  
  98. </template>
  99.  
  100. <script>
  101. import Sortable from "sortablejs";
  102. import webfield from "@/api/sys/webfield";
  103. import notifyService from "@/api/notify/notifyService";
  104. export default {
  105.     data() {
  106.  
  107.         return {
  108.             dataList: [],
  109.             earchVisible: true,
  110.             loading: false,
  111.             myArray: [],
  112.             myArray2: [],
  113.             myArray3: [],
  114.             myArray4: [],
  115.             myArray5: [],
  116.             userName: "",
  117.             userNameF: "",
  118.             companyDTO: '',
  119.             ids: '',
  120.             newtype: ''
  121.         };
  122.     },
  123.     props: ["value1"],
  124.     mounted() {
  125.         this.refreshList();
  126.  
  127.     },
  128.     async created() {
  129.         var userInfo = this.$TOOL.data.get("USER_INFO");
  130.         this.userName = userInfo.id;
  131.         this.companyDTO = userInfo.companyDTO.id;
  132.     },
  133.  
  134.     methods: {
  135.         // 获取数据 初始化
  136.         refreshList() {
  137.             // this.newtype = JSON.parse(this.value1)
  138.             // console.log(this.newtype, 'new11')
  139.             this.loading = true;
  140.             const params = {
  141.                 officeId: this.companyDTO,
  142.                 type: 1,
  143.             };
  144.             webfield.webfieldinit(params).then((data) => {
  145.                 this.dataList = JSON.parse(data.data.content)
  146.                 this.ids = data.data.id
  147.                 console.log(data, "disa")
  148.                 this.assignDataToArrays();
  149.                 this.loading = false;
  150.             }).catch((error) => {
  151.                 console.error('Error fetching data:', error);
  152.                 this.loading = false;
  153.             });
  154.         },
  155.  
  156.         // 获取数据 平均分配
  157.         assignDataToArrays() {
  158.             this.myArray = [];
  159.             this.myArray2 = [];
  160.             this.myArray3 = [];
  161.             this.myArray4 = [];
  162.             this.myArray5 = [];
  163.  
  164.             // 计算每个数组应该分配的数据量
  165.             const chunkSize = Math.ceil(this.dataList.length / 5);
  166.             // 将 dataList 的数据平均分配到五个数组中
  167.             for (let i = 0; i < this.dataList.length; i++) {
  168.                 if (i < chunkSize) {
  169.                     this.myArray.push(this.dataList[i]);
  170.                 } else if (i < chunkSize * 2) {
  171.                     this.myArray2.push(this.dataList[i]);
  172.                 } else if (i < chunkSize * 3) {
  173.                     this.myArray3.push(this.dataList[i]);
  174.                 } else if (i < chunkSize * 4) {
  175.                     this.myArray4.push(this.dataList[i]);
  176.                 } else {
  177.                     this.myArray5.push(this.dataList[i]);
  178.                 }
  179.             }
  180.  
  181.             this.initSortable();
  182.         },
  183.  
  184.         initSortable() {
  185.             const initSortableForTable = (tableRef, dataArray, num) => {
  186.                 const tbody = this.$refs[tableRef].$el.querySelector(".el-table__body-wrapper tbody");
  187.                 Sortable.create(tbody, {
  188.  
  189.                     onEnd: ({ newIndex, oldIndex, to, from, clone, pullMode, item }) => {
  190.                         const totableid = to.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id
  191.                         const fromtableid = from.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id
  192.                         //id映射
  193.                         const tablemap = {
  194.                             table1: this.myArray,
  195.                             table2: this.myArray2,
  196.                             table3: this.myArray3,
  197.                             table4: this.myArray4,
  198.                             table5: this.myArray5,
  199.                         }
  200.                         if (totableid == fromtableid) {
  201.                             const currRow = dataArray.splice(oldIndex, 1)[0];
  202.                             dataArray.splice(newIndex, 0, currRow);
  203.                         } else {
  204.                             //不一致 跨列拖动
  205.                             const currRow = tablemap[fromtableid].splice(oldIndex, 1)[0];
  206.                             // //向to添加一个元素
  207.                             tablemap[totableid].splice(newIndex, 0, currRow);
  208.                             //from table会少一列
  209.                             if (tablemap[totableid][newIndex + 1]) {
  210.                                 //如果 to table 的下一行有数据 补充回fromtable的oldindx
  211.                                 tablemap[fromtableid].splice(oldIndex, 0, tablemap[totableid][newIndex + 1])
  212.                                 //得删除to table的数据
  213.                                 tablemap[totableid].splice(newIndex + 1, 1)
  214.                             } else if (tablemap[totableid][newIndex - 1]) {
  215.                                 tablemap[fromtableid].splice(oldIndex, 0, tablemap[totableid][newIndex - 1])
  216.                                 //得删除to table的数据
  217.                                 tablemap[totableid].splice(newIndex - 1, 1)
  218.                             } else {
  219.                                 console.error("前后都没有数据 无法补充")
  220.                             }
  221.                             // console.log(this.myArray, this.myArray2)
  222.  
  223.                         }
  224.  
  225.                     },
  226.                     group: 'zhaoxin'
  227.                 });
  228.             };
  229.  
  230.             initSortableForTable('table1', this.myArray);
  231.             initSortableForTable('table2', this.myArray2);
  232.             initSortableForTable('table3', this.myArray3);
  233.             initSortableForTable('table4', this.myArray4);
  234.             initSortableForTable('table5', this.myArray5);
  235.         },
  236.         //合并数组  保存数据
  237.         mergeAndPrintArrays() {
  238.  
  239.             // console.log(JSON.parse(this.value1), 'oooooooooooo')
  240.             // this.newtype = JSON.parse(JSON.stringify(this.options))[0].value
  241.  
  242.             this.newtype = JSON.parse(this.value1)
  243.             // 合并三个数组
  244.             const mergedArray = [...this.myArray, ...this.myArray2, ...this.myArray3, ...this.myArray4, ...this.myArray5];
  245.             const news = JSON.stringify(mergedArray);
  246.             this.loading = true;
  247.  
  248.             // 构建请求参数对象
  249.             const params = {
  250.                 officeId: this.companyDTO,
  251.                 type: this.newtype,
  252.                 content: news,
  253.                 operatorId: this.userName,
  254.  
  255.             };
  256.  
  257.             const newparams = {
  258.                 officeId: this.companyDTO,
  259.                 type: this.newtype,
  260.                 content: news,
  261.                 operatorId: this.userName,
  262.                 id: this.ids
  263.             };
  264.  
  265.             if (this.ids === '') {
  266.                 console.log('空啦')
  267.                 webfield.webfieldadd(params).then((response) => {
  268.                     location.reload(true);
  269.                     this.loading = false;
  270.                 }).catch((error) => {
  271.                     console.error('Error fetching data:', error);
  272.                     this.loading = false;
  273.                 });
  274.             } else {
  275.                 console.log("不空")
  276.                 console.log(this.myArray, 'cuirow')
  277.                 webfield.webfieldadd(newparams).then((response) => {
  278.                     location.reload(true);
  279.                     this.loading = false;
  280.  
  281.                 }).catch((error) => {
  282.                     console.error('Error fetching data:', error);
  283.                     this.loading = false;
  284.                 });
  285.             }
  286.  
  287.  
  288.         },
  289.         // 控制显隐
  290.         stateChanged(row) {
  291.             const index = this.myArray.findIndex(item => item.id === row.id);
  292.             console.log('Row index:', index);
  293.             console.log('Row data:', row);
  294.         },
  295.  
  296.         // 还原数据
  297.         restoration() {
  298.             this.loading = true;
  299.             console.log(this.loading, 'loading'); // 修正了拼写错误，从 'loda' 改为 'loading'
  300.  
  301.             if (this.ids === '' || this.ids === undefined || this.ids === null) {
  302.                 console.log('kong ')
  303.                 alert('已经还原成最初的原始数据了！');
  304.                 this.loading = false; // 如果不需要刷新页面，可以在这里直接设置 loading 为 false
  305.             } else {
  306.                 console.log(this.ids, 'konglllll ')
  307.                 webfield.webfielddel(this.ids).then((data) => {
  308.                     console.log(data)
  309.                     this.assignDataToArrays();
  310.                     location.reload(true); // 仅在数据删除成功后刷新页面
  311.                 }).catch((error) => {
  312.                     console.error('Error fetching data:', error);
  313.                     this.loading = false; // 请求失败时设置 loading 为 false
  314.                 });
  315.             }
  316.         }
  317.     },
  318. };
  319. </script>
  320.  
  321. <style lang="less" scoped>
  322. .but {
  323.     margin-bottom: 3rem;
  324. }
  325.  
  326. .container {
  327.     display: flex;
  328.     margin-bottom: 50rem;
  329.  
  330.     .left,
  331.     .right {
  332.         background-color: #fff;
  333.         width: 282px;
  334.         height: 1000px;
  335.         margin: 0 4px;
  336.         padding: 0 -8px;
  337.  
  338.  
  339.         .item {
  340.             height: 40px;
  341.             border: 1px solid #e9e9e9;
  342.             text-align: center;
  343.             line-height: 40px;
  344.             margin: 20px 0;
  345.             background-color: rgb(242, 242, 242);
  346.         }
  347.     }
  348. }
  349. </style>

注：本文转载自blog.csdn.net的阿金要当大魔王~~的文章"https://blog.csdn.net/weixin_68266812/article/details/146019566"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！