表单排序修改

src/components/table-sort/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-dialog
+    title="合同段排序"
+    :visible.sync="visible"
+    width="600px"
+    append-to-body
+    @close="handleClose"
+    class="project-dialog"
+  >  
+  <span slot="title">
+            <i class="el-icon-sort" style="color: #2550A2;margin-right: 5px;"></i>{{ title }}
+    </span>
+    <div class="sort-container">
+      <!-- 提示信息 -->
+      <div class="tip-box">
+        <i class="el-icon-info"></i>
+             拖动项目可调整顺序，或者使用箭头按钮、输入序号进行排序
+
+      </div>
+
+      <!-- 排序列表 -->
+      <draggable 
+        v-model="sortList" 
+        class="sort-list"
+        handle=".drag-handle"
+        @end="handleDragEnd"
+      >
+        <div v-for="(item, index) in sortList" 
+          :key="item.id" 
+          class="sort-item"
+        >
+          <i class="el-icon-rank drag-handle"></i>
+          <div class="item-content">
+            <span>{{ item.name }}</span>
+
+            <div class="item-actions">
+                <div class="move-btns">
+                    <el-button 
+                    type="text" 
+                    icon="el-icon-arrow-up"
+                    :disabled="index === 0"
+                    @click="moveItem(index, -1)"
+                    ></el-button>
+                    <el-button 
+                    type="text" 
+                    icon="el-icon-arrow-down"
+                    :disabled="index === sortList.length - 1"
+                    @click="moveItem(index, 1)"
+                    ></el-button>
+                </div>
+                <span>移至</span>
+              <el-input-number 
+              :controls="false"
+                v-model="item.sortNum" 
+                :min="1" 
+                :max="sortList.length"
+                size="mini"
+                style="width: 60px;"
+                @change="handleNumberChange($event, index)"
+              ></el-input-number>
+              <span>位</span>
+              
+            </div>
+          </div>
+        </div>
+      </draggable>
+    </div>
+
+    <div slot="footer" style="text-align: center">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm" style="  background-color: #2550A2;border-color: #2550A2 ;color: white;">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'ContractSort',
+  components: {
+    draggable
+  },
+  props: {
+    // 添加 props
+    title: {
+      type: String,
+      default: '排序'
+    },
+    sortProLoad: { // 接收父组件传递的 sortProLoad 状态
+      type: Boolean,
+      default: false,
+    },
+   
+  },
+  data() {
+    return {
+      sortList: [],
+      visible: false
+    }
+  },
+
+  methods: {
+        // 添加显示方法
+     // 修改显示方法
+  show(contractList) {
+    if(!contractList || !Array.isArray(contractList)) {
+      console.warn('contractList must be an array');
+      return;
+    }
+    // 初始化排序列表
+    this.sortList = contractList.map((item, index) => ({
+      ...item,
+      sortNum: index + 1
+    }));
+    this.visible = true;
+  },    // 添加隐藏方法
+    hide() {
+      this.visible = false;
+    },
+    initSortList() {
+      this.sortList = this.contractList.map((item, index) => ({
+        ...item,
+        sortNum: index + 1
+      }));
+    },
+    handleDragEnd() {
+      // 重新计算序号
+      this.sortList.forEach((item, index) => {
+        item.sortNum = index + 1;
+      });
+    },
+    moveItem(index, direction) {
+      const newIndex = index + direction;
+      const item = this.sortList.splice(index, 1)[0];
+      this.sortList.splice(newIndex, 0, item);
+      this.handleDragEnd();
+    },
+    handleNumberChange(value, index) {
+      const targetIndex = value - 1;
+      if (targetIndex === index) return;
+      
+      const item = this.sortList.splice(index, 1)[0];
+      this.sortList.splice(targetIndex, 0, item);
+      this.handleDragEnd();
+    },
+    handleClose() {
+      this.visible = false;
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.sortList);
+      this.visible = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sort-container {
+  padding: 10px;
+
+  .tip-box {
+    background: #EFF6FF;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 4px;
+    color: #3271FF;
+    font-size: 13px;
+    
+    .el-icon-info {
+      margin-right: 5px;
+      color: #3271FF;
+    }
+  }
+
+  .sort-list {
+    max-height: 500px;
+    overflow-y: auto;
+    .sort-item {
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      border: 1px solid #EBEEF5;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      .drag-handle {
+        cursor: move;
+        color: #909399;
+        margin-right: 10px;
+        font-size: 18px;
+      }
+
+      .item-content {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .item-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .move-btns {
+          display: flex;
+        
+        }
+      }
+    }
+  }
+}
+</style>

src/views/manager/projectinfo/tableSortByType.vue

@@ -0,0 +1,250 @@
+<template>
+  <el-dialog
+    title="表单排序"
+    :visible.sync="visible"
+    width="600px"
+    append-to-body
+    @close="handleClose"
+    class="project-dialog"
+  >  
+  <span slot="title">
+            <i class="el-icon-sort" style="color: #2550A2;"></i>{{ title }}
+    </span>
+    <div class="sort-container">
+      <!-- 提示信息 -->
+      <div class="tip-box">
+        <i class="el-icon-info"></i>
+             拖动项目可调整顺序，或者使用箭头按钮、输入序号进行排序
+      </div>
+      
+      <div class="sort-list">
+        <!-- 遍历每个分类 -->
+        <div class="category-section" v-for="(category, categoryIndex) in sortList" :key="categoryIndex">
+          <div class="category-header">{{ category.title }}</div>
+          
+          <!-- 使用draggable包裹每个分类下的项目列表 -->
+          <draggable 
+            v-model="category.list" 
+            :options="{ group: `category-${categoryIndex}`, animation: 150 }"
+            @end="handleDragEnd(categoryIndex)"
+            class="draggable-container"
+          >
+            <div 
+              v-for="(item, itemIndex) in category.list" 
+              :key="item.id" 
+              class="sort-item"
+            >
+              <i class="el-icon-rank drag-handle"></i>
+              <div class="item-content">
+                <span>{{ item.tableName }}</span>
+                <div class="item-actions">
+                  <div class="move-btns">
+                    <el-button 
+                      type="text" 
+                      icon="el-icon-arrow-up"
+                      :disabled="itemIndex === 0"
+                      @click="moveItem(categoryIndex, itemIndex, -1)"
+                    ></el-button>
+                    <el-button 
+                      type="text" 
+                      icon="el-icon-arrow-down"
+                      :disabled="itemIndex === category.list.length - 1"
+                      @click="moveItem(categoryIndex, itemIndex, 1)"
+                    ></el-button>
+                  </div>
+                  <span>移至</span>
+                  <el-input-number 
+                    :controls="false"
+                    v-model="item.sortNum" 
+                    :min="1" 
+                    :max="category.list.length"
+                    size="mini"
+                    style="width: 60px;"
+                    @change="handleNumberChange(categoryIndex, $event, itemIndex)"
+                  ></el-input-number>
+                  <span>位</span>
+                </div>
+              </div>
+            </div>
+          </draggable>
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer" style="text-align: center">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm" style="background-color: #2550A2;border-color: #2550A2 ;color: white;">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'ContractSort',
+  components: {
+    draggable
+  },
+  props: {
+    title: {
+      type: String,
+      default: '排序'
+    },
+    sortProLoad: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      sortList: [],  // 结构应为 [{ title: '分类1', list: [{ id: 1, tableName: '项目1', sortNum: 1 }] }, ...]
+      visible: false
+    }
+  },
+
+  methods: {
+    show(contractList) {
+      if(!contractList || !Array.isArray(contractList)) {
+        console.warn('contractList must be an array');
+        return;
+      }
+      // 初始化排序列表，确保结构是带分类的
+      this.sortList = contractList.map((category, categoryIndex) => ({
+        ...category,
+        list: category.list.map((item, itemIndex) => ({
+          ...item,
+          sortNum: itemIndex + 1
+        }))
+      }));
+      this.visible = true;
+    },
+    
+    hide() {
+      this.visible = false;
+    },
+    
+    // 拖动结束后重新计算当前分类的序号
+    handleDragEnd(categoryIndex) {
+      this.sortList[categoryIndex].list.forEach((item, index) => {
+        item.sortNum = index + 1;
+      });
+    },
+    
+    // 移动项目（仅在当前分类内）
+    moveItem(categoryIndex, itemIndex, direction) {
+      const category = this.sortList[categoryIndex];
+      const newIndex = itemIndex + direction;
+      
+      // 确保不超出当前分类的范围
+      if (newIndex < 0 || newIndex >= category.list.length) return;
+      
+      const item = category.list.splice(itemIndex, 1)[0];
+      category.list.splice(newIndex, 0, item);
+      this.handleDragEnd(categoryIndex);
+    },
+    
+    // 序号变更处理（仅在当前分类内）
+    handleNumberChange(categoryIndex, value, itemIndex) {
+      const category = this.sortList[categoryIndex];
+      const targetIndex = value - 1;
+      
+      // 验证目标位置是否在当前分类范围内
+      if (targetIndex < 0 || targetIndex >= category.list.length) return;
+      if (targetIndex === itemIndex) return;
+      
+      const item = category.list.splice(itemIndex, 1)[0];
+      category.list.splice(targetIndex, 0, item);
+      this.handleDragEnd(categoryIndex);
+    },
+    
+    handleClose() {
+      this.visible = false;
+    },
+    
+    handleConfirm() {
+      this.$emit('confirm', this.sortList);
+  
+      
+      this.visible = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sort-container {
+  padding: 10px;
+
+  .tip-box {
+    background: #EFF6FF;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 4px;
+    color: #3271FF;
+    font-size: 13px;
+    
+    .el-icon-info {
+      margin-right: 5px;
+      color: #3271FF;
+    }
+  }
+
+  .sort-list {
+    max-height: 500px;
+    overflow-y: auto;
+    
+    .category-section {
+      margin-bottom: 20px;
+      
+      .category-header {
+        font-weight: bold;
+        margin-bottom: 10px;
+        color: #333;
+        padding-left: 10px;
+      }
+    }
+    
+    .draggable-container {
+      padding: 5px 0;
+    }
+
+    .sort-item {
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      border: 1px solid #EBEEF5;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      .drag-handle {
+        cursor: move;
+        color: #909399;
+        margin-right: 10px;
+        font-size: 18px;
+      }
+
+      .item-content {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .item-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .move-btns {
+          display: flex;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/manager/projectinfo/tree.vue

@@ -350,7 +350,7 @@
               </p>
               <div class="mg-t-10"></div>
             </div>
-                 <div style="flex: 1; position: relative;  height: calc(100vh - 260px);overflow-y: auto;" >
+                 <div style="flex: 1; position: relative;  height: calc(100vh - 260px);overflow-y: auto;"  v-loading="tableListByTypeLoad">
                         <!-- 施工方分类 -->
                          <template v-if="isNodeType">
                                 <template v-if="tableListByType.length > 0">
@@ -969,27 +969,13 @@
     </el-dialog>
 
     <!-- 元素表排序 -->
-    <el-dialog
-      title="调整排序"
-      :visible.sync="excelSortTag"
-      width="50%"
-      append-to-body
-    >
-      <ManualSorting
-        v-if="excelSortTag2"
-        @bianhua="bianhua2()"
-        :sort="tableSortList"
+
+      <tableSortByType 
+         ref="tableSortRef"
+         title="表单排序"
+         :sortProLoad="sortProLoad"
+        @confirm="editPrivateSort"
       />
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="excelSortTag = false">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="editPrivateSort()"
-          v-loading="surePrivateSortload"
-          >确 定</el-button
-        >
-      </span>
-    </el-dialog>
 
     <!-- 关联清表 -->
     <el-dialog
@@ -2584,6 +2570,7 @@ import { getTempProject,addSync,getNodeStatus,getById } from "@/api/manager/ledg
 import { selectByNodeTable   as findNodeTableByCondition1 } from "@/api/manager/wbstree";
 
 import { getDictionaryBiz } from "@/api/other";
+import tableSortByType from './tableSortByType'
 export default {
 
   data() {
@@ -2784,6 +2771,9 @@ export default {
       excelSortTag: false,
       excelSortTag2: false,
       tableSortList: [],
+      sortTableList: [],
+      sortProLoad:false,
+
       //#endregion
 
       defaultExpandedKeys: [],
@@ -2994,7 +2984,8 @@ export default {
         isAddConceal:''
 
       },
-      tableListByType:[]
+      tableListByType:[],
+      tableListByTypeLoad:false
       
     };
   },
@@ -3366,8 +3357,9 @@ export default {
     updateNodeTable() {
 
       if(this.isNodeType){
+        this.tableListByTypeLoad=true
           getGroupNodeTables( 
-            // this.curTreeData.id, this.projectid, this.id
+           
             {
               parentId: this.curTreeData.id,
               projectId: this.projectid,
@@ -3375,10 +3367,11 @@ export default {
             }
           ).then(
             (res) => {
+               this.tableListByTypeLoad=false
               if (res.data.data && res.data.data.length) {
-                console.log(res.data.data,'res.data.data');
+              
                 this.tableListByType = res.data.data;
-
+                
                 // this.formData = res.data.data;
                 // this.formData.forEach((ele) => {
                 //   ele.nodeType = Number(ele.nodeType);
@@ -4110,21 +4103,35 @@ clearSearch1() {
           pkeyId: form.pkeyId,
         };
       });
-      this.excelSortTag = true;
-      this.excelSortTag2 = true;
-    },
-    editPrivateSort() {
-      this.surePrivateSortload = true;
-      wbsTreePrivateTableSort(this.tableSortList).then(() => {
+      // this.excelSortTag = true;
+      // this.excelSortTag2 = true;
+            this.sortTableList = JSON.parse(JSON.stringify(this.tableListByType));
+     
+
+              this.$nextTick(() => {
+                this.$refs.tableSortRef.show(this.sortTableList);
+              });
+            },
+    editPrivateSort(listArr) {
+      console.log(listArr,'list');
+      let finalList=[]
+      listArr.forEach(item=>{ 
+        finalList.push(...item.list)
+      })
+   
+      this.sortProLoad = true;
+      wbsTreePrivateTableSort(finalList).then(() => {
+        this.sortProLoad = false;
         this.$message({
           type: "success",
           message: "排序成功!",
         });
 
         this.updateNodeTable();
-        this.surePrivateSortload = false;
-        this.excelSortTag = false;
-        this.excelSortTag2 = false;
+   
+   
+      }).finally(()=>{
+        this.sortProLoad = false;
       });
     },
 
@@ -5793,7 +5800,7 @@ async saveLinkTab() {
       });
      },
     handleCheckChange1(data){
-      console.log(data,'data1111111111');
+
       
       getNodeStatus({ id:data.primaryKeyId}).then((res) => {
           if(res.data.code==200){
@@ -6335,7 +6342,8 @@ async saveLinkTab() {
     FormulaEdit,
     EditElement,
     FormulaEditone,
-    CodeSet
+    CodeSet,
+    tableSortByType
   },
 };
 </script>