feat(projectinfo): 添加合同段排序功能

src/views/manager/projectinfo/ContractSort.vue

@@ -0,0 +1,206 @@
+<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>合同段排序
+    </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.contractName }}</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
+  },
+  
+  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/list.vue

@@ -184,26 +184,33 @@
               </el-table-column>
               <el-table-column
                 prop="contractType"
-                label="合同段类型">
+                label="合同段类型"
+                width="100px"
+                
+                >
+                  <template slot-scope="scope">
+                     <el-tag  size="small" type="danger"   class="custom-ellipse-tag1"   >{{ scope.row.contractType===1?'施工':scope.row.contractType===2?'监理':'指挥' }}</el-tag>
+                  </template>
+                
               </el-table-column>
                <el-table-column
                 prop=""
                 label="合同段权限">
               </el-table-column>
                <el-table-column
-               width="120px"
+               width="180px"
                 prop="address"
                 label="操作">
                 <template slot-scope="scope">
                   <el-link
                    type="primary"
                     size="mini"
-                    @click="handleEdit(scope.$index, scope.row)">编辑合同段信息</el-link>
+                     @click="editContract(scope.row)">编辑合同段信息</el-link>
                   <el-link
                     size="mini"
                     type="danger"
                     class="ml-10"
-                    @click="handleDelete(scope.$index, scope.row)">删除</el-link>
+                    @click="delContract(scope.row,sortOptionscope.$index)">删除</el-link>
                 </template>
               </el-table-column>
             </el-table>
@@ -215,6 +222,13 @@
             暂无合同段，请先创建合同段
           </div>
         </el-dialog>
+
+        <!-- 合同段排序弹窗 -->
+        <ContractSort 
+         ref="contractSortRef"
+       
+        @confirm="handleSortConfirm"
+      />
 </el-container>
 
  
@@ -227,6 +241,7 @@ import { findContractByProjectId, removeContractInfo } from "@/api/manager/contr
 // import {getDictionary} from "@/api/system/dict";
 import { mapGetters } from "vuex";
 import { getStore, setStore } from "@/util/store";
+import ContractSort from './ContractSort.vue'
 export default {
   data () {
     return {
@@ -317,13 +332,18 @@ export default {
         },
          icon: 'el-icon-s-order'
       }
-    ]
+    ],
+      sortContractVisible: false, // 合同段排序弹窗
+      sortContractList: [],
 
     }
   },
   computed: {
     ...mapGetters(["userInfo"]),
   },
+  components: {
+    ContractSort
+  },
   created () {
     this.init();
     //console.log(this.userInfo)
@@ -570,6 +590,24 @@ export default {
     },
     toggleLike(item){
       item.isLiked = !item.isLiked;
+    },
+    //合同段排序
+    sortContract(){
+      // this.sortContractVisible = true;
+      this.sortContractList = JSON.parse(JSON.stringify(this.contractList));
+      console.log( this.$refs.contractSortRef,' this.$refs.contractSortRef');
+      
+      this.$nextTick(() => {
+        this.$refs.contractSortRef.show(this.sortContractList);
+      });
+    },
+        // 处理排序确认
+    handleSortConfirm(sortedList) {
+      // 这里处理排序后的数据
+      console.log('排序后的列表:', sortedList);
+      // TODO: 调用接口保存排序结果
+      this.contractList = [...sortedList];
+      this.$message.success('排序成功');
     }
   }
 };
@@ -785,6 +823,7 @@ export default {
 .project-dialog {
  .el-dialog__body {
    color: black;
+   padding: 10px 20px 20px 20px !important;
   }
   .el-dialog__header {