|
@@ -135,9 +135,23 @@
|
|
|
<el-table
|
|
|
:data="sortedTableData"
|
|
|
style="width: 100%"
|
|
|
+ :key="sortedTableDataKey"
|
|
|
>
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
-
|
|
|
+ <!-- 新增的快速排序列 -->
|
|
|
+ <el-table-column label="快速排序" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ style="width: 100px;"
|
|
|
+ v-model="scope.row.sortOrder"
|
|
|
+ :min="1"
|
|
|
+ :max="sortedTableData.length"
|
|
|
+ size="mini"
|
|
|
+ :controls="false"
|
|
|
+ @change="handleQuickSort(scope.row, scope.$index)"
|
|
|
+ ></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="规则">
|
|
|
<template slot-scope="scope">
|
|
|
<span >{{ getDictValueByRule(scope.row.rule) }}</span>
|
|
@@ -160,13 +174,13 @@
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
type="text"
|
|
|
- icon="el-icon-arrow-up"
|
|
|
+ icon="el-icon-top"
|
|
|
@click="handleSortUp(scope.$index)"
|
|
|
style="margin-right: 5px;"
|
|
|
></el-button>
|
|
|
<el-button
|
|
|
type="text"
|
|
|
- icon="el-icon-arrow-down"
|
|
|
+ icon="el-icon-bottom"
|
|
|
@click="handleSortDown(scope.$index)"
|
|
|
></el-button>
|
|
|
</template>
|
|
@@ -217,6 +231,8 @@ export default {
|
|
|
sortDialogVisible: false, // 控制排序弹窗的显示与隐藏
|
|
|
sortedTableData: [], // 排序弹窗的表格数据,为tableData的深拷贝
|
|
|
sortLoad: false, // 排序保存按钮的loading状态
|
|
|
+ sortedTableDataKey: 0, // 控制排序弹窗表格的key,用于强制更新
|
|
|
+
|
|
|
|
|
|
}
|
|
|
},
|
|
@@ -244,32 +260,63 @@ mounted(){
|
|
|
},
|
|
|
sortData() {
|
|
|
this.sortedTableData = JSON.parse(JSON.stringify(this.tableData)); // 深拷贝tableData
|
|
|
- this.sortedTableData.forEach((row, index) => {
|
|
|
- row.sortOrder = index + 1; // 设置序号
|
|
|
-
|
|
|
- })
|
|
|
+ this.sortedTableData.forEach((item, index) => {
|
|
|
+ this.$set(item, 'sortOrder', index + 1);
|
|
|
+ });
|
|
|
this.sortDialogVisible = true; // 显示排序弹窗
|
|
|
},
|
|
|
|
|
|
- handleSortUp(index) {
|
|
|
- if (index > 0) { // 确保不是第一行
|
|
|
- const temp = this.sortedTableData.splice(index, 1)[0]; // 移除当前行
|
|
|
- this.sortedTableData.splice(index - 1, 0, temp); // 在上一行插入
|
|
|
-
|
|
|
- } else {
|
|
|
- this.$message.warning('已经是第一行,无法上移');
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- handleSortDown(index) {
|
|
|
- if (index < this.sortedTableData.length - 1) { // 确保不是最后一行
|
|
|
- const temp = this.sortedTableData.splice(index, 1)[0]; // 移除当前行
|
|
|
- this.sortedTableData.splice(index + 1, 0, temp); // 在下一行插入
|
|
|
|
|
|
- } else {
|
|
|
- this.$message.warning('已经是最后一行,无法下移');
|
|
|
- }
|
|
|
- },
|
|
|
+ // 上移
|
|
|
+ handleSortUp(index) {
|
|
|
+ if (index <= 0) return;
|
|
|
+
|
|
|
+ const newData = [...this.sortedTableData];
|
|
|
+ [newData[index - 1], newData[index]] = [newData[index], newData[index - 1]];
|
|
|
+
|
|
|
+ // 更新所有行的sortOrder
|
|
|
+ newData.forEach((item, i) => {
|
|
|
+ item.sortOrder = i + 1;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.sortedTableData = newData;
|
|
|
+ },
|
|
|
+
|
|
|
+// 快速排序处理函数
|
|
|
+
|
|
|
+ // 快速排序处理
|
|
|
+ handleQuickSort(row, index) {
|
|
|
+ const targetIndex = row.sortOrder - 1;
|
|
|
+ if (targetIndex === index) return;
|
|
|
+
|
|
|
+ const newData = [...this.sortedTableData]; // 创建新数组
|
|
|
+ const [movedItem] = newData.splice(index, 1);
|
|
|
+ newData.splice(targetIndex, 0, movedItem);
|
|
|
+
|
|
|
+ // 更新所有行的sortOrder
|
|
|
+ newData.forEach((item, i) => {
|
|
|
+ item.sortOrder = i + 1;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.sortedTableData = newData; // 替换整个数组触发响应式更新
|
|
|
+ console.log( this.sortedTableData,' this.sortedTableData');
|
|
|
+ this.sortedTableDataKey++; // 强制更新排序弹窗的表格
|
|
|
+
|
|
|
+ },
|
|
|
+ // 下移
|
|
|
+ handleSortDown(index) {
|
|
|
+ if (index >= this.sortedTableData.length - 1) return;
|
|
|
+
|
|
|
+ const newData = [...this.sortedTableData];
|
|
|
+ [newData[index], newData[index + 1]] = [newData[index + 1], newData[index]];
|
|
|
+
|
|
|
+ // 更新所有行的sortOrder
|
|
|
+ newData.forEach((item, i) => {
|
|
|
+ item.sortOrder = i + 1;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.sortedTableData = newData;
|
|
|
+ },
|
|
|
sortSave(){
|
|
|
this.sortLoad = true;
|
|
|
let params=this.sortedTableData
|